@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.
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js +32 -25
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +148 -169
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js +25 -30
- package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js +29 -14
- package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js +3 -3
- package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js +16 -18
- package/lib/cjs/components/AccordionGroup/AccordionGroup.js +2 -1
- package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js +20 -1
- package/lib/cjs/components/Breadcrumbs/Breadcrumbs.stories.js +3 -3
- package/lib/cjs/components/Button/Button.js +9 -0
- package/lib/cjs/components/Button/Button.stories.js +1 -14
- package/lib/cjs/components/ListView/ListView.js +9 -13
- package/lib/cjs/components/ListViewItem/ListViewItem.js +15 -3
- package/lib/cjs/components/Modal/Modal.stories.js +1 -1
- package/lib/cjs/components/RockerButton/RockerButton.js +14 -22
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.js +5 -9
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.stories.js +4 -22
- package/lib/cjs/components/RockerButtonGroup/RockerButtonGroup.test.js +5 -14
- package/lib/cjs/components/SearchField/SearchField.stories.js +1 -15
- package/lib/cjs/components/TextAreaField/TextAreaField.js +53 -8
- package/lib/cjs/components/TextAreaField/TextAreaField.stories.js +33 -1
- package/lib/cjs/components/TextAreaField/TextAreaField.test.js +12 -0
- package/lib/cjs/context/AccordionGridContext/index.js +20 -0
- package/lib/cjs/hooks/useField/useField.js +5 -0
- package/lib/cjs/hooks/useRockerButton/useRockerButton.js +4 -6
- package/lib/cjs/layouts/ListLayout.stories.js +6 -6
- package/lib/cjs/recipes/ArrayField.stories.js +1 -1
- package/lib/cjs/recipes/ConditionalFilter.stories.js +7 -3
- package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js +1 -1
- package/lib/cjs/styles/variants/boxes.js +9 -0
- package/lib/cjs/styles/variants/buttons.js +2 -0
- package/lib/components/AccordionGridGroup/AccordionGridGroup.js +32 -24
- package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +143 -166
- package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js +24 -25
- package/lib/components/AccordionGridItem/AccordionGridItem.js +29 -15
- package/lib/components/AccordionGridItem/AccordionGridItemBody.js +4 -4
- package/lib/components/AccordionGridItem/AccordionGridItemHeader.js +19 -20
- package/lib/components/AccordionGroup/AccordionGroup.js +2 -1
- package/lib/components/AccordionGroup/AccordionGroup.test.js +16 -2
- package/lib/components/Breadcrumbs/Breadcrumbs.stories.js +3 -3
- package/lib/components/Button/Button.js +10 -1
- package/lib/components/Button/Button.stories.js +0 -10
- package/lib/components/ListView/ListView.js +9 -12
- package/lib/components/ListViewItem/ListViewItem.js +14 -3
- package/lib/components/Modal/Modal.stories.js +1 -1
- package/lib/components/RockerButton/RockerButton.js +14 -21
- package/lib/components/RockerButtonGroup/RockerButtonGroup.js +5 -9
- package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js +2 -17
- package/lib/components/RockerButtonGroup/RockerButtonGroup.test.js +5 -11
- package/lib/components/SearchField/SearchField.stories.js +0 -11
- package/lib/components/TextAreaField/TextAreaField.js +53 -9
- package/lib/components/TextAreaField/TextAreaField.stories.js +27 -0
- package/lib/components/TextAreaField/TextAreaField.test.js +13 -0
- package/lib/context/AccordionGridContext/index.js +5 -0
- package/lib/hooks/useField/useField.js +5 -0
- package/lib/hooks/useRockerButton/useRockerButton.js +4 -6
- package/lib/layouts/ListLayout.stories.js +6 -6
- package/lib/recipes/ArrayField.stories.js +1 -1
- package/lib/recipes/ConditionalFilter.stories.js +7 -3
- package/lib/recipes/RadioButtonsWithLinks.stories.js +1 -1
- package/lib/styles/variants/boxes.js +9 -0
- package/lib/styles/variants/buttons.js +2 -0
- package/package.json +1 -1
- package/lib/cjs/components/AccordionGridGroup/AccordionGridContext.js +0 -17
- 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("
|
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", "
|
54
|
+
others = (0, _objectWithoutProperties2["default"])(props, ["item", "className", "children", "isSelected"]);
|
56
55
|
|
57
|
-
var
|
58
|
-
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,
|
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
|
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:
|
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)(
|
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: "
|
66
|
+
variant: "link",
|
67
67
|
"data-id": "home"
|
68
68
|
}, "Home"), (0, _react2.jsx)(_collections.Item, {
|
69
69
|
key: "trendy",
|
70
|
-
variant: "
|
70
|
+
variant: "link",
|
71
71
|
"data-id": "trendy"
|
72
72
|
}, "Trendy"), (0, _react2.jsx)(_collections.Item, {
|
73
73
|
key: "march 2020 assets",
|
74
|
-
variant: "
|
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.
|
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
|
107
|
-
loadingState = props.loadingState,
|
108
|
-
selectedKeys = props.selectedKeys,
|
104
|
+
var loadingState = props.loadingState,
|
109
105
|
onLoadMore = props.onLoadMore,
|
110
|
-
|
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
|
-
|
167
|
-
|
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"])({},
|
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
|
-
|
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
|
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 =
|
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
|
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: "
|
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
|
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)(
|
92
|
+
return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
|
93
|
+
as: "button",
|
100
94
|
className: classNames,
|
101
|
-
variant: "rocker"
|
102
|
-
},
|
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
|
-
|
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
|
-
/**
|
118
|
-
|
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.
|
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
|
-
|
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.
|
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('
|
85
|
+
test('rocker button is disabled when its key is included in disabledKeys', function () {
|
86
86
|
getComponent({
|
87
|
-
|
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();
|
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.
|
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),
|