@pingux/astro 1.2.0-alpha.11 → 1.2.0-alpha.15

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 (65) hide show
  1. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js +32 -25
  2. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +148 -169
  3. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js +25 -30
  4. package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js +29 -14
  5. package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js +3 -3
  6. package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js +16 -18
  7. package/lib/cjs/components/AccordionGroup/AccordionGroup.js +2 -1
  8. package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js +20 -1
  9. package/lib/cjs/components/Breadcrumbs/Breadcrumbs.stories.js +3 -3
  10. package/lib/cjs/components/Button/Button.js +9 -0
  11. package/lib/cjs/components/Button/Button.stories.js +1 -14
  12. package/lib/cjs/components/ListView/ListView.js +9 -13
  13. package/lib/cjs/components/ListViewItem/ListViewItem.js +15 -3
  14. package/lib/cjs/components/Modal/Modal.stories.js +1 -1
  15. package/lib/cjs/components/RockerButton/RockerButton.js +14 -22
  16. package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.js +5 -9
  17. package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.js +4 -22
  18. package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.test.js +5 -14
  19. package/lib/cjs/components/SearchField/SearchField.stories.js +1 -15
  20. package/lib/cjs/components/TextAreaField/TextAreaField.js +53 -8
  21. package/lib/cjs/components/TextAreaField/TextAreaField.stories.js +33 -1
  22. package/lib/cjs/components/TextAreaField/TextAreaField.test.js +12 -0
  23. package/lib/cjs/context/AccordionGridContext/index.js +20 -0
  24. package/lib/cjs/hooks/useField/useField.js +5 -0
  25. package/lib/cjs/hooks/useRockerButton/useRockerButton.js +4 -6
  26. package/lib/cjs/layouts/ListLayout.stories.js +6 -6
  27. package/lib/cjs/recipes/ArrayField.stories.js +1 -1
  28. package/lib/cjs/recipes/ConditionalFilter.stories.js +7 -3
  29. package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js +1 -1
  30. package/lib/cjs/styles/variants/boxes.js +9 -0
  31. package/lib/cjs/styles/variants/buttons.js +2 -0
  32. package/lib/components/AccordionGridGroup/AccordionGridGroup.js +32 -24
  33. package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +143 -166
  34. package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js +24 -25
  35. package/lib/components/AccordionGridItem/AccordionGridItem.js +29 -15
  36. package/lib/components/AccordionGridItem/AccordionGridItemBody.js +4 -4
  37. package/lib/components/AccordionGridItem/AccordionGridItemHeader.js +19 -20
  38. package/lib/components/AccordionGroup/AccordionGroup.js +2 -1
  39. package/lib/components/AccordionGroup/AccordionGroup.test.js +16 -2
  40. package/lib/components/Breadcrumbs/Breadcrumbs.stories.js +3 -3
  41. package/lib/components/Button/Button.js +10 -1
  42. package/lib/components/Button/Button.stories.js +0 -10
  43. package/lib/components/ListView/ListView.js +9 -12
  44. package/lib/components/ListViewItem/ListViewItem.js +14 -3
  45. package/lib/components/Modal/Modal.stories.js +1 -1
  46. package/lib/components/RockerButton/RockerButton.js +14 -21
  47. package/lib/components/RockerButtonGroup/RockerButtonGroup.js +5 -9
  48. package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js +2 -17
  49. package/lib/components/RockerButtonGroup/RockerButtonGroup.test.js +5 -11
  50. package/lib/components/SearchField/SearchField.stories.js +0 -11
  51. package/lib/components/TextAreaField/TextAreaField.js +53 -9
  52. package/lib/components/TextAreaField/TextAreaField.stories.js +27 -0
  53. package/lib/components/TextAreaField/TextAreaField.test.js +13 -0
  54. package/lib/context/AccordionGridContext/index.js +5 -0
  55. package/lib/hooks/useField/useField.js +5 -0
  56. package/lib/hooks/useRockerButton/useRockerButton.js +4 -6
  57. package/lib/layouts/ListLayout.stories.js +6 -6
  58. package/lib/recipes/ArrayField.stories.js +1 -1
  59. package/lib/recipes/ConditionalFilter.stories.js +7 -3
  60. package/lib/recipes/RadioButtonsWithLinks.stories.js +1 -1
  61. package/lib/styles/variants/boxes.js +9 -0
  62. package/lib/styles/variants/buttons.js +2 -0
  63. package/package.json +1 -1
  64. package/lib/cjs/components/AccordionGridGroup/AccordionGridContext.js +0 -17
  65. package/lib/components/AccordionGridGroup/AccordionGridContext.js +0 -2
@@ -34,7 +34,7 @@ var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
34
34
 
35
35
  var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
36
36
 
37
- var _AccordionGridContext = require("../AccordionGridGroup/AccordionGridContext");
37
+ var _AccordionGridContext = require("../../context/AccordionGridContext");
38
38
 
39
39
  var _Box = _interopRequireDefault(require("../Box"));
40
40
 
@@ -50,20 +50,26 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
50
50
  var item = props.item,
51
51
  className = props.className,
52
52
  children = props.children,
53
- key = props.key,
54
53
  isSelected = props.isSelected,
55
- others = (0, _objectWithoutProperties2["default"])(props, ["item", "className", "children", "key", "isSelected"]);
54
+ others = (0, _objectWithoutProperties2["default"])(props, ["item", "className", "children", "isSelected"]);
56
55
 
57
- var _useContext = (0, _react.useContext)(_AccordionGridContext.AccordionGridContext),
58
- state = _useContext.state;
56
+ var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
57
+ state = _useAccordionGridCont.state;
59
58
 
59
+ var cellRef = (0, _react.useRef)();
60
+ /* istanbul ignore next */
61
+
62
+ (0, _react.useImperativeHandle)(ref, function () {
63
+ return cellRef.current;
64
+ });
60
65
  var cellNode = (0, _concat["default"])(_context = []).call(_context, item.childNodes)[0];
61
66
 
62
67
  var _useGridCell = (0, _grid.useGridCell)({
63
68
  node: cellNode,
64
69
  focusMode: 'cell'
65
- }, state, ref),
66
- gridCellProps = _useGridCell.gridCellProps;
70
+ }, state, cellRef),
71
+ gridCellProps = _useGridCell.gridCellProps,
72
+ isPressed = _useGridCell.isPressed;
67
73
 
68
74
  var _useHover = (0, _interactions.useHover)({}),
69
75
  hoverProps = _useHover.hoverProps,
@@ -78,14 +84,7 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
78
84
  focusProps = _useFocusRing2.focusProps,
79
85
  isFocusVisible = _useFocusRing2.isFocusVisible;
80
86
 
81
- var _usePress = (0, _interactions.usePress)({
82
- ref: ref,
83
- isPressed: item.props.isPressed
84
- }),
85
- pressProps = _usePress.pressProps,
86
- isPressed = _usePress.isPressed;
87
-
88
- var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps, pressProps);
87
+ var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps);
89
88
 
90
89
  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
91
90
  isPressed: isPressed,
@@ -98,9 +97,8 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
98
97
  var ariaLabel = props['aria-label'];
99
98
  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
100
99
  as: "div",
101
- ref: ref
100
+ ref: cellRef
102
101
  }, mergedProps, {
103
- role: "gridcell",
104
102
  variant: "accordion.accordionGridHeader",
105
103
  isFocused: isFocusVisible,
106
104
  isSelected: isSelected,
@@ -123,8 +121,8 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
123
121
  AccordionGridItemHeader.propTypes = {
124
122
  'aria-label': _propTypes["default"].string,
125
123
  isSelected: _propTypes["default"].bool,
126
- key: _propTypes["default"].string,
127
124
  item: _propTypes["default"].shape({
125
+ key: _propTypes["default"].string,
128
126
  childNodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
129
127
  props: _propTypes["default"].shape({
130
128
  isPressed: _propTypes["default"].bool
@@ -57,8 +57,9 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
57
57
 
58
58
  var _useAccordion = (0, _accordion.useAccordion)(props, state, accordionRef),
59
59
  accordionProps = _useAccordion.accordionProps;
60
- /* istanbul ignore next */
61
60
 
61
+ delete accordionProps.onMouseDown;
62
+ /* istanbul ignore next */
62
63
 
63
64
  (0, _react.useImperativeHandle)(ref, function () {
64
65
  return accordionRef.current;
@@ -46,7 +46,11 @@ var getComponent = function getComponent() {
46
46
  textValue: "Duplicate",
47
47
  "data-id": "third",
48
48
  label: "Accordion item"
49
- }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
49
+ }, (0, _react2.jsx)(_index.TextField, {
50
+ role: "form",
51
+ label: "Example Label",
52
+ "data-testid": "testField"
53
+ }))));
50
54
  };
51
55
 
52
56
  var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
@@ -280,6 +284,21 @@ test('expanded keys expands an accordion item', function () {
280
284
  var selectedItem = buttons[0];
281
285
  expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
282
286
  });
287
+ test('able to click a textfield that is the rendered child of an accordion', function () {
288
+ getComponent({
289
+ expandedKeys: ['third']
290
+ });
291
+
292
+ var field = _testWrapper.screen.getByTestId('testField');
293
+
294
+ var input = _testWrapper.screen.getByRole('form');
295
+
296
+ _userEvent["default"].click(input);
297
+
298
+ _userEvent["default"].type(input, 'banana');
299
+
300
+ expect(field).toHaveClass('has-focus-within');
301
+ });
283
302
  test('Item accepts a data-id and the data-id can be found in the DOM', function () {
284
303
  getComponent();
285
304
 
@@ -63,15 +63,15 @@ var Default = function Default(args) {
63
63
  onAction: onAction
64
64
  }, args), (0, _react2.jsx)(_collections.Item, {
65
65
  key: "home",
66
- variant: "text",
66
+ variant: "link",
67
67
  "data-id": "home"
68
68
  }, "Home"), (0, _react2.jsx)(_collections.Item, {
69
69
  key: "trendy",
70
- variant: "text",
70
+ variant: "link",
71
71
  "data-id": "trendy"
72
72
  }, "Trendy"), (0, _react2.jsx)(_collections.Item, {
73
73
  key: "march 2020 assets",
74
- variant: "text",
74
+ variant: "link",
75
75
  "data-id": "march"
76
76
  }, "March 2020 Assets"));
77
77
  };
@@ -103,6 +103,15 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
103
103
  }),
104
104
  classNames = _useStatusClasses.classNames;
105
105
 
106
+ (0, _hooks.useDeprecationWarning)('The "icon" variant for `Button` is deprecated in Astro-UI 1.0.0, use the `IconButton` component instead.', {
107
+ isActive: props.variant === 'icon'
108
+ });
109
+ (0, _hooks.useDeprecationWarning)('The "danger" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `critical` variant instead.', {
110
+ isActive: props.variant === 'danger'
111
+ });
112
+ (0, _hooks.useDeprecationWarning)('The "text" variant for `Button` will be deprecated in Astro-UI 2.0.0, use the `link` variant instead.', {
113
+ isActive: props.variant === 'text'
114
+ });
106
115
  var ariaLabel = props['aria-label'];
107
116
  (0, _hooks.useAriaLabelWarning)('Button', ariaLabel, variant === 'filter');
108
117
  return (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
10
 
11
- exports.FilterButton = exports.ColorBlockButton = exports.InlineButton = exports.TextButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
11
+ exports.FilterButton = exports.ColorBlockButton = exports.InlineButton = exports.TextIconButton = exports.Disabled = exports.Default = exports["default"] = void 0;
12
12
 
13
13
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
14
14
 
@@ -99,19 +99,6 @@ var TextIconButton = function TextIconButton() {
99
99
 
100
100
  exports.TextIconButton = TextIconButton;
101
101
 
102
- var TextButton = function TextButton() {
103
- return (0, _react2.jsx)(_index.Button, {
104
- mb: "sm",
105
- variant: "text",
106
- "aria-label": "Add option"
107
- }, (0, _react2.jsx)(_index.Text, {
108
- variant: "label",
109
- color: "active"
110
- }, " + Add Option"));
111
- };
112
-
113
- exports.TextButton = TextButton;
114
-
115
102
  var InlineButton = function InlineButton() {
116
103
  return (0, _react2.jsx)(_index.Button, {
117
104
  mb: "sm",
@@ -45,8 +45,6 @@ var _grid = require("@react-stately/grid");
45
45
 
46
46
  var _grid2 = require("@react-aria/grid");
47
47
 
48
- var _utils = require("@react-aria/utils");
49
-
50
48
  var _layout = require("@react-stately/layout");
51
49
 
52
50
  var _list = require("@react-stately/list");
@@ -103,12 +101,9 @@ function useListLayout(state) {
103
101
  }
104
102
 
105
103
  var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
106
- var disabledKeys = props.disabledKeys,
107
- loadingState = props.loadingState,
108
- selectedKeys = props.selectedKeys,
104
+ var loadingState = props.loadingState,
109
105
  onLoadMore = props.onLoadMore,
110
- onSelectionChange = props.onSelectionChange,
111
- selectionMode = props.selectionMode;
106
+ selectionStyle = props.selectionStyle;
112
107
  var isLoading = loadingState === _loadingStates["default"].LOADING_MORE || loadingState === _loadingStates["default"].LOADING;
113
108
 
114
109
  var renderWrapper = function renderWrapper(parent, reusableView) {
@@ -160,11 +155,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
160
155
  });
161
156
  }, [collection]);
162
157
  var state = (0, _grid.useGridState)(_objectSpread(_objectSpread({}, props), {}, {
163
- disabledKeys: disabledKeys,
164
- selectedKeys: selectedKeys,
165
158
  collection: gridCollection,
166
- selectionMode: selectionMode,
167
- onSelectionChange: onSelectionChange
159
+ focusMode: 'cell',
160
+ selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle'
168
161
  }));
169
162
  var layout = useListLayout(state);
170
163
  var keyboardDelegate = (0, _react.useMemo)(function () {
@@ -199,7 +192,7 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
199
192
  state: state,
200
193
  keyboardDelegate: keyboardDelegate
201
194
  }
202
- }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _utils.mergeProps)(gridProps), {
195
+ }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, gridProps, {
203
196
  onLoadMore: onLoadMore,
204
197
  ref: listViewRef,
205
198
  focusedKey: focusedKey,
@@ -266,6 +259,9 @@ ListView.propTypes = {
266
259
  /** The type of selection that is allowed in the collection. */
267
260
  selectionMode: _propTypes["default"].oneOf(['none', 'single', 'multiple']),
268
261
 
262
+ /** */
263
+ selectionStyle: _propTypes["default"].oneOf(['highlight', undefined]),
264
+
269
265
  /** Callback function that fires when the selected key changes. */
270
266
  onSelectionChange: _propTypes["default"].func,
271
267
 
@@ -278,7 +274,7 @@ ListView.propTypes = {
278
274
  };
279
275
  ListView.defaultProps = {
280
276
  'aria-label': 'listView',
281
- 'selectionMode': 'single'
277
+ selectionMode: 'single'
282
278
  };
283
279
  var _default = ListView;
284
280
  exports["default"] = _default;
@@ -28,6 +28,8 @@ var _grid = require("@react-aria/grid");
28
28
 
29
29
  var _interactions = require("@react-aria/interactions");
30
30
 
31
+ var _selection = require("@react-aria/selection");
32
+
31
33
  var _ListViewContext = require("../ListView/ListViewContext");
32
34
 
33
35
  var _Box = _interopRequireDefault(require("../Box"));
@@ -40,7 +42,9 @@ var ListViewItem = function ListViewItem(props) {
40
42
  var _context;
41
43
 
42
44
  var item = props.item,
43
- _props$item$props = props.item.props,
45
+ _props$item = props.item,
46
+ key = _props$item.key,
47
+ _props$item$props = _props$item.props,
44
48
  listItemProps = _props$item$props.listItemProps,
45
49
  rowProps = _props$item$props.rowProps,
46
50
  _props$item$props$has = _props$item$props.hasSeparator,
@@ -75,7 +79,7 @@ var ListViewItem = function ListViewItem(props) {
75
79
  }, state, rowRef),
76
80
  raRowProps = _useGridRow.rowProps;
77
81
 
78
- var isSelected = raRowProps['aria-selected'];
82
+ var isSelected = state.selectionManager.isSelected(item.key);
79
83
 
80
84
  var _useGridCell = (0, _grid.useGridCell)({
81
85
  node: cellNode,
@@ -83,7 +87,15 @@ var ListViewItem = function ListViewItem(props) {
83
87
  }, state, cellRef),
84
88
  gridCellProps = _useGridCell.gridCellProps;
85
89
 
86
- var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps);
90
+ var _useSelectableItem = (0, _selection.useSelectableItem)({
91
+ isDisabled: isDisabled,
92
+ selectionManager: state.selectionManager,
93
+ key: key,
94
+ ref: cellRef
95
+ }),
96
+ selectableItemProps = _useSelectableItem.itemProps;
97
+
98
+ var mergedProps = (0, _utils.mergeProps)(gridCellProps, hoverProps, focusWithinProps, focusProps, selectableItemProps);
87
99
 
88
100
  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
89
101
  isHovered: isHovered,
@@ -163,7 +163,7 @@ var DarkVariant = function DarkVariant() {
163
163
  onPress: state.close,
164
164
  "aria-label": "Yes"
165
165
  }, "Yes"), (0, _react2.jsx)(_index.Button, {
166
- variant: "text",
166
+ variant: "link",
167
167
  onPress: state.close,
168
168
  "aria-label": "Cancel"
169
169
  }, "Cancel"))))
@@ -40,11 +40,9 @@ var _collections = require("@react-stately/collections");
40
40
 
41
41
  var _focus = require("@react-aria/focus");
42
42
 
43
- var _utils = require("@react-aria/utils");
44
-
45
43
  var _hooks = require("../../hooks");
46
44
 
47
- var _Button = _interopRequireDefault(require("../Button"));
45
+ var _index = require("../../index");
48
46
 
49
47
  var _RockerButtonGroup = require("../RockerButtonGroup");
50
48
 
@@ -56,19 +54,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
56
54
 
57
55
  var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
58
56
  var className = props.className,
59
- item = props.item,
60
- buttonGroupDisabled = props.isDisabled;
61
- var defaultSelectedStyles = {
62
- bg: 'active'
63
- };
57
+ item = props.item;
64
58
  var key = item.key,
65
59
  rendered = item.rendered,
66
60
  itemProps = item.props;
67
- var _itemProps$selectedSt = itemProps.selectedStyles,
68
- selectedStyles = _itemProps$selectedSt === void 0 ? defaultSelectedStyles : _itemProps$selectedSt,
69
- rockerButtonDisabled = itemProps.isDisabled;
70
- var isDisabled = buttonGroupDisabled || rockerButtonDisabled;
71
61
  var state = (0, _react.useContext)(_RockerButtonGroup.RockerContext);
62
+ var isDisabled = state.disabledKeys.has(key);
72
63
 
73
64
  var _useFocusRing = (0, _focus.useFocusRing)(),
74
65
  isFocusVisible = _useFocusRing.isFocusVisible,
@@ -78,7 +69,8 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
78
69
 
79
70
  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
80
71
  isFocused: isFocusVisible,
81
- isSelected: isSelected
72
+ isSelected: isSelected,
73
+ isDisabled: isDisabled
82
74
  }),
83
75
  classNames = _useStatusClasses.classNames;
84
76
 
@@ -92,26 +84,26 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
92
84
 
93
85
  var _useRockerButton = (0, _hooks.useRockerButton)({
94
86
  item: item,
95
- isDisabled: isDisabled
87
+ isDisabled: isDisabled,
88
+ isSelected: isSelected
96
89
  }, state, rockerButtonRef),
97
90
  rockerButtonProps = _useRockerButton.rockerButtonProps;
98
91
 
99
- return (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
92
+ return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
93
+ as: "button",
100
94
  className: classNames,
101
- variant: "rocker"
102
- }, itemProps, (0, _utils.mergeProps)(focusProps, rockerButtonProps), {
103
- ref: rockerButtonRef,
95
+ variant: "buttons.rocker"
96
+ }, rockerButtonProps, {
97
+ ref: rockerButtonRef
98
+ }, focusProps, itemProps, {
104
99
  sx: {
105
- '&.is-selected': _objectSpread({}, selectedStyles)
100
+ '&.is-selected': _objectSpread({}, itemProps.selectedStyles)
106
101
  }
107
102
  }), rendered);
108
103
  });
109
104
  exports.CollectionRockerButton = CollectionRockerButton;
110
105
  CollectionRockerButton.displayName = 'CollectionRockerButton';
111
106
  CollectionRockerButton.propTypes = {
112
- /** Whether the button is disabled. */
113
- isDisabled: _propTypes["default"].bool,
114
-
115
107
  /** Allows custom styles to be passed to button. */
116
108
  selectedStyles: _propTypes["default"].shape({}),
117
109
  // adding to surface in props table
@@ -70,10 +70,10 @@ var RockerButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
70
70
  var _context;
71
71
 
72
72
  var children = props.children,
73
- isDisabled = props.isDisabled,
74
73
  onSelectionChange = props.onSelectionChange,
75
74
  tabListProps = props.tabListProps,
76
- others = (0, _objectWithoutProperties2["default"])(props, ["children", "isDisabled", "onSelectionChange", "tabListProps"]);
75
+ disabledKeys = props.disabledKeys,
76
+ others = (0, _objectWithoutProperties2["default"])(props, ["children", "onSelectionChange", "tabListProps", "disabledKeys"]);
77
77
  var buttonGroupRef = (0, _react.useRef)();
78
78
  (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
79
79
  /* istanbul ignore next */
@@ -102,8 +102,7 @@ var RockerButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
102
102
  }), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
103
103
  return (0, _react2.jsx)(_RockerButton.CollectionRockerButton, {
104
104
  key: item.key,
105
- item: item,
106
- isDisabled: isDisabled
105
+ item: item
107
106
  });
108
107
  }))));
109
108
  });
@@ -114,15 +113,12 @@ RockerButtonGroup.propTypes = {
114
113
  /** The button key that is currently selected. (controlled) */
115
114
  selectedKey: _propTypes["default"].string,
116
115
 
117
- /** Whether the entire button group is disabled. */
118
- isDisabled: _propTypes["default"].bool,
116
+ /** Which keys should be disabled. */
117
+ disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),
119
118
 
120
119
  /** Handler that is called when the selected button has changed. */
121
120
  onSelectionChange: _propTypes["default"].func
122
121
  };
123
- RockerButtonGroup.defaultProps = {
124
- isDisabled: false
125
- };
126
122
  RockerButtonGroup.displayName = 'RockerButtonGroup';
127
123
  var _default = RockerButtonGroup;
128
124
  exports["default"] = _default;
@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
10
10
  value: true
11
11
  });
12
12
 
13
- exports.DisabledRockerButtonGroup = exports.DisabledSingleButton = exports.withCustomSelectedColors = exports.Controlled = exports.Uncontrolled = exports.Default = exports["default"] = void 0;
13
+ exports.DisabledSingleButton = exports.withCustomSelectedColors = exports.Controlled = exports.Uncontrolled = exports.Default = exports["default"] = void 0;
14
14
 
15
15
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
16
16
 
@@ -129,26 +129,8 @@ exports.withCustomSelectedColors = withCustomSelectedColors;
129
129
 
130
130
  var DisabledSingleButton = function DisabledSingleButton() {
131
131
  return (0, _react2.jsx)(_RockerButtonGroup["default"], {
132
- defaultSelectedKey: "or"
133
- }, (0, _react2.jsx)(_RockerButton["default"], {
134
- name: "and",
135
- key: "and",
136
- isDisabled: true
137
- }, "And"), (0, _react2.jsx)(_RockerButton["default"], {
138
- name: "or",
139
- key: "or"
140
- }, "Or"), (0, _react2.jsx)(_RockerButton["default"], {
141
- name: "maybe",
142
- key: "maybe"
143
- }, "Maybe"));
144
- };
145
-
146
- exports.DisabledSingleButton = DisabledSingleButton;
147
-
148
- var DisabledRockerButtonGroup = function DisabledRockerButtonGroup() {
149
- return (0, _react2.jsx)(_RockerButtonGroup["default"], {
150
- isDisabled: true,
151
- defaultSelectedKey: "and"
132
+ defaultSelectedKey: "or",
133
+ disabledKeys: ['and']
152
134
  }, (0, _react2.jsx)(_RockerButton["default"], {
153
135
  name: "and",
154
136
  key: "and"
@@ -161,4 +143,4 @@ var DisabledRockerButtonGroup = function DisabledRockerButtonGroup() {
161
143
  }, "Maybe"));
162
144
  };
163
145
 
164
- exports.DisabledRockerButtonGroup = DisabledRockerButtonGroup;
146
+ exports.DisabledSingleButton = DisabledSingleButton;
@@ -82,9 +82,11 @@ test('buttonGroup is not disabled by default', function () {
82
82
  expect(buttonKey).not.toHaveClass('is-disabled');
83
83
  });
84
84
  });
85
- test('each button is disabled when isDisabled prop is passed to RockerButtonGroup', function () {
85
+ test('rocker button is disabled when its key is included in disabledKeys', function () {
86
86
  getComponent({
87
- isDisabled: true
87
+ disabledKeys: (0, _map["default"])(testButtons).call(testButtons, function (button) {
88
+ return button.key;
89
+ })
88
90
  });
89
91
  (0, _forEach["default"])(testButtons).call(testButtons, function (button) {
90
92
  var buttonKey = _testWrapper.screen.getByText(button.key);
@@ -100,9 +102,7 @@ test('rockerButton renders selectedStyles prop when selected', function () {
100
102
  expect(buttonColorKey).toHaveClass('is-selected');
101
103
  });
102
104
  test('selected button can be changed by keyboard interaction', function () {
103
- getComponent(); // FIXME: Keyboard events must fire twice tests - unsure why at this time.
104
-
105
- _userEvent["default"].tab();
105
+ getComponent();
106
106
 
107
107
  _userEvent["default"].tab();
108
108
 
@@ -114,20 +114,11 @@ test('selected button can be changed by keyboard interaction', function () {
114
114
 
115
115
  expect(button1).not.toHaveClass('is-selected');
116
116
 
117
- _userEvent["default"].tab();
118
-
119
- _userEvent["default"].tab();
120
-
121
117
  _testWrapper.fireEvent.keyDown(_testWrapper.screen.getByText(testButtons[0].key), {
122
118
  key: 'ArrowRight',
123
119
  code: 'ArrowRight'
124
120
  });
125
121
 
126
- _testWrapper.fireEvent.keyDown(_testWrapper.screen.getByText(testButtons[1].key), {
127
- key: 'ArrowRight',
128
- code: 'ArrowRight'
129
- });
130
-
131
122
  expect(_testWrapper.screen.getByText(testButtons[1].key)).toHaveClass('is-selected');
132
123
  expect(_testWrapper.screen.getByText(testButtons[0].key)).not.toHaveClass('is-selected');
133
124
  });
@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
10
10
  value: true
11
11
  });
12
12
 
13
- exports.ControlledWithDebouncedInput = exports.MaxLength = exports.NoClearButton = exports.CustomIcon = exports.Controlled = exports.Default = exports["default"] = void 0;
13
+ exports.ControlledWithDebouncedInput = exports.NoClearButton = exports.CustomIcon = exports.Controlled = exports.Default = exports["default"] = void 0;
14
14
 
15
15
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
16
16
 
@@ -137,20 +137,6 @@ var NoClearButton = function NoClearButton() {
137
137
 
138
138
  exports.NoClearButton = NoClearButton;
139
139
 
140
- var MaxLength = function MaxLength(args) {
141
- return (0, _react2.jsx)(_index.SearchField, (0, _extends2["default"])({}, args, {
142
- icon: _SearchIcon["default"],
143
- "aria-label": "Search Groups",
144
- onSubmit: function onSubmit(text) {
145
- return alert(text);
146
- } // eslint-disable-line no-alert
147
- ,
148
- maxLength: 9
149
- }));
150
- };
151
-
152
- exports.MaxLength = MaxLength;
153
-
154
140
  var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
155
141
  var _useState3 = (0, _react.useState)(''),
156
142
  _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),