@pingux/astro 1.1.0-alpha.0 → 1.1.0-alpha.4
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/CHANGELOG.md +44 -0
- package/lib/cjs/components/ComboBoxField/ComboBoxField.js +7 -0
- package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js +25 -1
- package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js +44 -0
- package/lib/cjs/components/IconButton/IconButton.stories.js +8 -17
- package/lib/cjs/components/ListBox/Option.js +6 -0
- package/lib/cjs/components/ListView/ListView.stories.js +580 -39
- package/lib/cjs/styles/variants/buttons.js +10 -0
- package/lib/components/ComboBoxField/ComboBoxField.js +7 -0
- package/lib/components/ComboBoxField/ComboBoxField.stories.js +21 -0
- package/lib/components/ComboBoxField/ComboBoxField.test.js +35 -0
- package/lib/components/IconButton/IconButton.stories.js +7 -13
- package/lib/components/ListBox/Option.js +6 -0
- package/lib/components/ListView/ListView.stories.js +577 -39
- package/lib/styles/variants/buttons.js +10 -0
- package/package.json +1 -1
@@ -330,6 +330,27 @@ export var ControlledFiltering = function ControlledFiltering() {
|
|
330
330
|
}, item.name);
|
331
331
|
}));
|
332
332
|
};
|
333
|
+
export var ControlledWithCustomValue = function ControlledWithCustomValue() {
|
334
|
+
var _useState9 = useState(''),
|
335
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
336
|
+
inputValue = _useState10[0],
|
337
|
+
setInputValue = _useState10[1];
|
338
|
+
|
339
|
+
return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
|
340
|
+
label: "Example label",
|
341
|
+
defaultItems: items
|
342
|
+
}, actions, {
|
343
|
+
inputValue: inputValue,
|
344
|
+
selectedKey: inputValue,
|
345
|
+
onInputChange: setInputValue,
|
346
|
+
onSelectionChange: setInputValue,
|
347
|
+
hasCustomValue: true
|
348
|
+
}), function (item) {
|
349
|
+
return ___EmotionJSX(Item, {
|
350
|
+
key: item.name
|
351
|
+
}, item.name);
|
352
|
+
}));
|
353
|
+
};
|
333
354
|
export var AllowCustomValue = function AllowCustomValue() {
|
334
355
|
return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({
|
335
356
|
label: "Example label",
|
@@ -639,6 +639,41 @@ test('two listbox can not be open at the same time', function () {
|
|
639
639
|
name: 'Tango'
|
640
640
|
})).toBeInTheDocument();
|
641
641
|
});
|
642
|
+
test('should handle selecting custom option', function () {
|
643
|
+
getComponent({
|
644
|
+
hasCustomValue: true
|
645
|
+
});
|
646
|
+
var input = screen.queryByRole('combobox');
|
647
|
+
expect(input).toHaveValue(''); // type something
|
648
|
+
|
649
|
+
userEvent.type(input, 'custom'); // set input value as selected
|
650
|
+
|
651
|
+
userEvent.type(input, '{enter}', {
|
652
|
+
skipClick: true
|
653
|
+
});
|
654
|
+
expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
|
655
|
+
expect(screen.queryByRole('combobox')).toHaveValue('custom'); // blur input
|
656
|
+
|
657
|
+
userEvent.tab();
|
658
|
+
expect(input).toHaveValue('custom');
|
659
|
+
});
|
660
|
+
test('onSelectionChange works properly with custom value', function () {
|
661
|
+
var onSelectionChange = jest.fn();
|
662
|
+
getComponent({
|
663
|
+
hasCustomValue: true,
|
664
|
+
onSelectionChange: onSelectionChange,
|
665
|
+
onInputChange: onSelectionChange
|
666
|
+
});
|
667
|
+
var input = screen.queryByRole('combobox');
|
668
|
+
expect(input).toHaveValue('');
|
669
|
+
expect(onSelectionChange).not.toHaveBeenCalled(); // Should fire when input value was typed, and enter was pressed
|
670
|
+
|
671
|
+
userEvent.type(input, 'custom{enter}');
|
672
|
+
expect(onSelectionChange).toHaveBeenCalledWith('custom'); // Should fire when input is cleared
|
673
|
+
|
674
|
+
userEvent.type(input, '{selectall}{backspace}{enter}');
|
675
|
+
expect(onSelectionChange).toHaveBeenCalledWith('');
|
676
|
+
});
|
642
677
|
test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
|
643
678
|
var _getComponent6, container, results;
|
644
679
|
|
@@ -35,29 +35,23 @@ export default {
|
|
35
35
|
isDisabled: {},
|
36
36
|
variant: {
|
37
37
|
control: {
|
38
|
-
type: '
|
39
|
-
|
38
|
+
type: 'select',
|
39
|
+
options: ['iconButton', 'inverted', 'square', 'invertedSquare']
|
40
|
+
},
|
41
|
+
defaultValue: 'iconButton'
|
40
42
|
}
|
41
43
|
}
|
42
44
|
};
|
43
45
|
export var Default = function Default(args) {
|
44
46
|
return ___EmotionJSX(IconButton, _extends({
|
45
|
-
"aria-label": "
|
47
|
+
"aria-label": "default icon button"
|
46
48
|
}, args), ___EmotionJSX(Icon, {
|
47
49
|
icon: CreateIcon
|
48
50
|
}));
|
49
51
|
};
|
50
|
-
export var Inverted = function Inverted() {
|
51
|
-
return ___EmotionJSX(IconButton, {
|
52
|
-
"aria-label": "my-label",
|
53
|
-
variant: "inverted"
|
54
|
-
}, ___EmotionJSX(Icon, {
|
55
|
-
icon: CreateIcon
|
56
|
-
}));
|
57
|
-
};
|
58
52
|
export var WithTooltip = function WithTooltip() {
|
59
53
|
return ___EmotionJSX(IconButton, {
|
60
|
-
"aria-label": "
|
54
|
+
"aria-label": "icon button with tooltip",
|
61
55
|
title: "Edit"
|
62
56
|
}, ___EmotionJSX(Icon, {
|
63
57
|
icon: CreateIcon
|
@@ -65,7 +59,7 @@ export var WithTooltip = function WithTooltip() {
|
|
65
59
|
};
|
66
60
|
export var Disabled = function Disabled() {
|
67
61
|
return ___EmotionJSX(IconButton, {
|
68
|
-
"aria-label": "
|
62
|
+
"aria-label": "disabled icon button",
|
69
63
|
isDisabled: true
|
70
64
|
}, ___EmotionJSX(Icon, {
|
71
65
|
icon: CreateIcon
|
@@ -63,7 +63,13 @@ var Option = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
63
63
|
isSelected: isSelected
|
64
64
|
}),
|
65
65
|
classNames = _useStatusClasses.classNames;
|
66
|
+
/* Related to UIP-4992
|
67
|
+
* Need to remove these properties to avoid errors in the console on the external app.
|
68
|
+
* By the way, these properties return "undefined", so it shouldn't create issues */
|
66
69
|
|
70
|
+
|
71
|
+
delete optionProps.onPressStart;
|
72
|
+
delete optionProps.onPressUp;
|
67
73
|
return ___EmotionJSX(Box, _extends({
|
68
74
|
as: "li",
|
69
75
|
isRow: true,
|