@pingux/astro 1.0.0-alpha.9 → 1.1.0-alpha.10
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 +257 -0
- package/README.md +5 -0
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js +24 -0
- package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js +1 -1
- package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js +1 -1
- package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js +33 -1
- package/lib/cjs/components/AccordionItem/AccordionItem.js +5 -4
- package/lib/cjs/components/Button/Button.js +6 -26
- package/lib/cjs/components/Button/Button.stories.js +7 -12
- package/lib/cjs/components/Button/Button.test.js +2 -25
- package/lib/cjs/components/Chip/Chip.js +26 -10
- package/lib/cjs/components/Chip/Chip.stories.js +44 -5
- package/lib/cjs/components/Chip/Chip.test.js +9 -0
- package/lib/cjs/components/{DropdownField/index.js → Chip/ChipContext.js} +8 -7
- package/lib/cjs/components/ColorField/ColorField.js +1 -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/FileInputField/FileItem.js +2 -1
- package/lib/cjs/components/IconButton/IconButton.js +17 -7
- package/lib/cjs/components/IconButton/IconButton.stories.js +8 -17
- package/lib/cjs/components/IconButton/IconButton.test.js +4 -6
- package/lib/cjs/components/ImageUploadField/ImagePreviewButton.js +2 -1
- package/lib/cjs/components/List/List.js +3 -0
- package/lib/cjs/components/List/List.stories.js +7 -2
- package/lib/cjs/components/ListBox/ListBox.js +3 -6
- package/lib/cjs/components/ListBox/ListBox.test.js +2 -0
- package/lib/cjs/components/ListBox/Option.js +6 -0
- package/lib/cjs/components/ListItem/ListItem.stories.js +0 -2
- package/lib/cjs/components/ListView/ListView.js +4 -3
- package/lib/cjs/components/ListView/ListView.stories.js +580 -39
- package/lib/cjs/components/ListViewItem/ListViewItem.js +3 -6
- package/lib/cjs/components/Messages/Message.js +2 -2
- package/lib/cjs/components/MultivaluesField/MultivaluesField.js +3 -2
- package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js +15 -14
- package/lib/cjs/components/PopoverContainer/PopoverContainer.test.js +15 -0
- package/lib/cjs/components/Stepper/Stepper.js +1 -0
- package/lib/cjs/components/Tab/Tab.js +5 -3
- package/lib/cjs/components/Tabs/Tabs.js +3 -0
- package/lib/cjs/components/Tabs/Tabs.stories.js +3 -4
- package/lib/cjs/components/Tabs/Tabs.test.js +44 -15
- package/lib/cjs/components/TextArea/TextArea.js +5 -1
- package/lib/cjs/components/TextAreaField/TextAreaField.test.js +10 -0
- package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js +45 -2
- package/lib/cjs/index.js +48 -136
- package/lib/cjs/layouts/ListLayout.stories.js +2 -1
- package/lib/cjs/layouts/SchemaFormLayout.stories.js +2 -21
- package/lib/cjs/recipes/ArrayField.stories.js +3 -3
- package/lib/cjs/styles/forms/input.js +4 -0
- package/lib/cjs/styles/theme.js +0 -3
- package/lib/cjs/styles/variants/accordion.js +7 -9
- package/lib/cjs/styles/variants/boxes.js +22 -19
- package/lib/cjs/styles/variants/buttons.js +48 -29
- package/lib/cjs/styles/variants/variants.js +0 -3
- package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
- package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js +23 -1
- package/lib/components/AccordionGridItem/AccordionGridItemBody.js +1 -1
- package/lib/components/AccordionGridItem/AccordionGridItemHeader.js +1 -1
- package/lib/components/AccordionGroup/AccordionGroup.test.js +30 -1
- package/lib/components/AccordionItem/AccordionItem.js +6 -5
- package/lib/components/Button/Button.js +8 -26
- package/lib/components/Button/Button.stories.js +7 -11
- package/lib/components/Button/Button.test.js +2 -21
- package/lib/components/Chip/Chip.js +25 -10
- package/lib/components/Chip/Chip.stories.js +41 -5
- package/lib/components/Chip/Chip.test.js +9 -0
- package/lib/components/Chip/ChipContext.js +3 -0
- package/lib/components/ColorField/ColorField.js +1 -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/FileInputField/FileItem.js +2 -1
- package/lib/components/IconButton/IconButton.js +17 -9
- package/lib/components/IconButton/IconButton.stories.js +7 -13
- package/lib/components/IconButton/IconButton.test.js +4 -6
- package/lib/components/ImageUploadField/ImagePreviewButton.js +2 -1
- package/lib/components/List/List.js +2 -0
- package/lib/components/List/List.stories.js +6 -2
- package/lib/components/ListBox/ListBox.js +3 -5
- package/lib/components/ListBox/ListBox.test.js +2 -0
- package/lib/components/ListBox/Option.js +6 -0
- package/lib/components/ListItem/ListItem.stories.js +0 -2
- package/lib/components/ListView/ListView.js +4 -3
- package/lib/components/ListView/ListView.stories.js +577 -39
- package/lib/components/ListViewItem/ListViewItem.js +3 -5
- package/lib/components/Messages/Message.js +2 -2
- package/lib/components/MultivaluesField/MultivaluesField.js +3 -2
- package/lib/components/OverlayPanel/OverlayPanel.stories.js +7 -5
- package/lib/components/PopoverContainer/PopoverContainer.test.js +16 -1
- package/lib/components/Stepper/Stepper.js +1 -0
- package/lib/components/Tab/Tab.js +5 -3
- package/lib/components/Tabs/Tabs.js +3 -0
- package/lib/components/Tabs/Tabs.stories.js +3 -4
- package/lib/components/Tabs/Tabs.test.js +40 -15
- package/lib/components/TextArea/TextArea.js +5 -1
- package/lib/components/TextAreaField/TextAreaField.test.js +8 -0
- package/lib/components/TooltipTrigger/TooltipTrigger.stories.js +33 -1
- package/lib/index.js +0 -8
- package/lib/layouts/ListLayout.stories.js +2 -1
- package/lib/layouts/SchemaFormLayout.stories.js +2 -19
- package/lib/recipes/ArrayField.stories.js +3 -3
- package/lib/styles/forms/input.js +4 -0
- package/lib/styles/theme.js +0 -3
- package/lib/styles/variants/accordion.js +7 -9
- package/lib/styles/variants/boxes.js +21 -19
- package/lib/styles/variants/buttons.js +47 -29
- package/lib/styles/variants/variants.js +0 -2
- package/package.json +1 -1
- package/lib/cjs/components/Dropdown/Dropdown.js +0 -112
- package/lib/cjs/components/Dropdown/Dropdown.test.js +0 -80
- package/lib/cjs/components/Dropdown/index.js +0 -18
- package/lib/cjs/components/DropdownField/DropdownField.js +0 -187
- package/lib/cjs/components/DropdownField/DropdownField.stories.js +0 -278
- package/lib/cjs/components/DropdownField/DropdownField.test.js +0 -80
- package/lib/cjs/components/Panel/Panel.js +0 -101
- package/lib/cjs/components/Panel/Panel.stories.js +0 -57
- package/lib/cjs/components/Panel/Panel.test.js +0 -72
- package/lib/cjs/components/Panel/index.js +0 -18
- package/lib/cjs/components/Popover/Popover.js +0 -87
- package/lib/cjs/components/Popover/Popover.stories.js +0 -80
- package/lib/cjs/components/Popover/Popover.test.js +0 -91
- package/lib/cjs/components/Popover/index.js +0 -18
- package/lib/cjs/recipes/InputBoxWithLinkedChip.stories.js +0 -67
- package/lib/cjs/styles/variants/popover.js +0 -86
- package/lib/components/Dropdown/Dropdown.js +0 -90
- package/lib/components/Dropdown/Dropdown.test.js +0 -62
- package/lib/components/Dropdown/index.js +0 -1
- package/lib/components/DropdownField/DropdownField.js +0 -155
- package/lib/components/DropdownField/DropdownField.stories.js +0 -222
- package/lib/components/DropdownField/DropdownField.test.js +0 -60
- package/lib/components/DropdownField/index.js +0 -1
- package/lib/components/Panel/Panel.js +0 -71
- package/lib/components/Panel/Panel.stories.js +0 -35
- package/lib/components/Panel/Panel.test.js +0 -52
- package/lib/components/Panel/index.js +0 -1
- package/lib/components/Popover/Popover.js +0 -65
- package/lib/components/Popover/Popover.stories.js +0 -52
- package/lib/components/Popover/Popover.test.js +0 -75
- package/lib/components/Popover/index.js +0 -2
- package/lib/recipes/InputBoxWithLinkedChip.stories.js +0 -43
- package/lib/styles/variants/popover.js +0 -76
@@ -1,155 +0,0 @@
|
|
1
|
-
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
2
|
-
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
3
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
4
|
-
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
5
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
6
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
7
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
8
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
9
|
-
import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
|
10
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
11
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
12
|
-
|
13
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
14
|
-
|
15
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
16
|
-
|
17
|
-
import React, { forwardRef, useRef, useImperativeHandle } from 'react';
|
18
|
-
import PropTypes from 'prop-types'; // TODO: Deprecate this component in Astro-UI 1.0.0
|
19
|
-
|
20
|
-
import { useDeprecationWarning, useField } from '../../hooks';
|
21
|
-
import statuses from '../../utils/devUtils/constants/statuses';
|
22
|
-
import Box from '../Box';
|
23
|
-
import Dropdown from '../Dropdown';
|
24
|
-
import FieldHelperText from '../FieldHelperText';
|
25
|
-
import Label from '../Label';
|
26
|
-
/**
|
27
|
-
* **WARNING: Will be deprecated in Astro 1.0.0, use `SelectField` instead.**
|
28
|
-
*
|
29
|
-
* Combines a dropdown, label, and helper text for a complete, form-ready solution.
|
30
|
-
*/
|
31
|
-
|
32
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
33
|
-
var DropdownField = /*#__PURE__*/forwardRef(function (props, ref) {
|
34
|
-
var children = props.children,
|
35
|
-
controlProps = props.controlProps,
|
36
|
-
firstLabel = props.firstLabel,
|
37
|
-
hasAutoFocus = props.hasAutoFocus,
|
38
|
-
hasDisabledFirstOption = props.hasDisabledFirstOption,
|
39
|
-
hasNoneOption = props.hasNoneOption,
|
40
|
-
helperText = props.helperText,
|
41
|
-
noneLabel = props.noneLabel,
|
42
|
-
status = props.status;
|
43
|
-
|
44
|
-
var _useField = useField(_objectSpread({
|
45
|
-
autoFocus: hasAutoFocus,
|
46
|
-
controlProps: _objectSpread({
|
47
|
-
firstLabel: firstLabel,
|
48
|
-
hasDisabledFirstOption: hasDisabledFirstOption,
|
49
|
-
hasNoneOption: hasNoneOption,
|
50
|
-
noneLabel: noneLabel
|
51
|
-
}, controlProps)
|
52
|
-
}, props)),
|
53
|
-
fieldContainerProps = _useField.fieldContainerProps,
|
54
|
-
fieldControlProps = _useField.fieldControlProps,
|
55
|
-
fieldLabelProps = _useField.fieldLabelProps;
|
56
|
-
|
57
|
-
var dropdownRef = useRef();
|
58
|
-
/* istanbul ignore next */
|
59
|
-
|
60
|
-
useImperativeHandle(ref, function () {
|
61
|
-
return dropdownRef.current;
|
62
|
-
});
|
63
|
-
useDeprecationWarning('`DropdownField` will be deprecated in Astro-UI 1.0.0, use `SelectField` instead.');
|
64
|
-
return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, fieldLabelProps), ___EmotionJSX(Box, {
|
65
|
-
variant: "forms.input.container",
|
66
|
-
className: fieldControlProps.className
|
67
|
-
}, ___EmotionJSX(Dropdown, _extends({
|
68
|
-
ref: dropdownRef
|
69
|
-
}, fieldControlProps), children)), helperText && ___EmotionJSX(FieldHelperText, {
|
70
|
-
status: status
|
71
|
-
}, helperText));
|
72
|
-
});
|
73
|
-
DropdownField.propTypes = {
|
74
|
-
/** The default value of the select field (uncontrolled). */
|
75
|
-
defaultValue: PropTypes.string,
|
76
|
-
|
77
|
-
/** The value of the select field (controlled). */
|
78
|
-
value: PropTypes.string,
|
79
|
-
|
80
|
-
/** Displays a none option within the dropdown options */
|
81
|
-
hasNoneOption: PropTypes.bool,
|
82
|
-
|
83
|
-
/** Whether the first option is disabled. Useful to prevent reselection of the first option. */
|
84
|
-
hasDisabledFirstOption: PropTypes.bool,
|
85
|
-
|
86
|
-
/** Label for first option. */
|
87
|
-
firstLabel: PropTypes.string,
|
88
|
-
|
89
|
-
/** Label for none option. `firstLabel` prop can also be used. */
|
90
|
-
noneLabel: PropTypes.string,
|
91
|
-
|
92
|
-
/** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
|
93
|
-
id: PropTypes.string,
|
94
|
-
|
95
|
-
/** Whether the Dropdown is required. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required). */
|
96
|
-
isRequired: PropTypes.bool,
|
97
|
-
|
98
|
-
/** @ignore Whether the Dropdown can be interacted
|
99
|
-
* with but cannot have its selection state changed. */
|
100
|
-
isReadOnly: PropTypes.bool,
|
101
|
-
|
102
|
-
/** Whether the element should receive focus on render. */
|
103
|
-
hasAutoFocus: PropTypes.bool,
|
104
|
-
|
105
|
-
/** Whether the field has a status indicator. */
|
106
|
-
hasNoStatusIndicator: PropTypes.bool,
|
107
|
-
|
108
|
-
/** Text to display after the radio group label. Useful for errors or other info. */
|
109
|
-
helperText: PropTypes.node,
|
110
|
-
|
111
|
-
/** If present this prop will cause a help hint to render in the label of the field. */
|
112
|
-
hintText: PropTypes.string,
|
113
|
-
|
114
|
-
/** Determines the helper text styling. */
|
115
|
-
status: PropTypes.oneOf(_Object$values(statuses)),
|
116
|
-
|
117
|
-
/** Handler that is called when the element receives focus. */
|
118
|
-
onFocus: PropTypes.func,
|
119
|
-
|
120
|
-
/** Handler that is called when the element loses focus. */
|
121
|
-
onBlur: PropTypes.func,
|
122
|
-
|
123
|
-
/** Handler that is called when the element's focus status changes. */
|
124
|
-
onFocusChange: PropTypes.func,
|
125
|
-
|
126
|
-
/** Handler that is called when a key is pressed. */
|
127
|
-
onKeyDown: PropTypes.func,
|
128
|
-
|
129
|
-
/** Handler that is called when a key is released. */
|
130
|
-
onKeyUp: PropTypes.func,
|
131
|
-
|
132
|
-
/** Defines a string value that labels the current element. */
|
133
|
-
'aria-label': PropTypes.string,
|
134
|
-
|
135
|
-
/** Identifies the element (or elements) that labels the current element. */
|
136
|
-
'aria-labelledby': PropTypes.string,
|
137
|
-
|
138
|
-
/** Identifies the element (or elements) that describes the object. */
|
139
|
-
'aria-describedby': PropTypes.string,
|
140
|
-
|
141
|
-
/**
|
142
|
-
* Identifies the element (or elements) that provide a detailed, extended description for the
|
143
|
-
* object.
|
144
|
-
*/
|
145
|
-
'aria-details': PropTypes.string,
|
146
|
-
|
147
|
-
/** Props object that is spread directly into the select element. */
|
148
|
-
controlProps: PropTypes.shape({})
|
149
|
-
};
|
150
|
-
DropdownField.defaultProps = {
|
151
|
-
hasNoneOption: false,
|
152
|
-
firstLabel: 'Select an option'
|
153
|
-
};
|
154
|
-
DropdownField.displayName = 'DropdownField';
|
155
|
-
export default DropdownField;
|
@@ -1,222 +0,0 @@
|
|
1
|
-
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
|
2
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
3
|
-
import React, { useState } from 'react';
|
4
|
-
import DropdownField from '.';
|
5
|
-
import Box from '../Box/Box';
|
6
|
-
import statuses from '../../utils/devUtils/constants/statuses';
|
7
|
-
import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
|
8
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
9
|
-
export default {
|
10
|
-
title: 'Deprecated/DropdownField',
|
11
|
-
component: DropdownField,
|
12
|
-
argTypes: {
|
13
|
-
defaultValue: {},
|
14
|
-
helperText: {
|
15
|
-
control: {
|
16
|
-
type: 'text'
|
17
|
-
}
|
18
|
-
},
|
19
|
-
hintText: {
|
20
|
-
control: {
|
21
|
-
type: 'text'
|
22
|
-
}
|
23
|
-
},
|
24
|
-
firstLabel: {},
|
25
|
-
noneLabel: {},
|
26
|
-
status: {
|
27
|
-
control: {
|
28
|
-
type: 'select',
|
29
|
-
options: statuses
|
30
|
-
},
|
31
|
-
defaultValue: statuses.DEFAULT
|
32
|
-
},
|
33
|
-
hasNoneOption: {},
|
34
|
-
hasDisabledFirstOption: {},
|
35
|
-
isRequired: {},
|
36
|
-
hasAutoFocus: {},
|
37
|
-
controlProps: {},
|
38
|
-
id: {},
|
39
|
-
'aria-label': {
|
40
|
-
control: {
|
41
|
-
type: 'text'
|
42
|
-
}
|
43
|
-
},
|
44
|
-
'aria-labelledby': {
|
45
|
-
control: {
|
46
|
-
type: 'text'
|
47
|
-
}
|
48
|
-
},
|
49
|
-
'aria-describedby': {
|
50
|
-
control: {
|
51
|
-
type: 'text'
|
52
|
-
}
|
53
|
-
},
|
54
|
-
'aria-details': {
|
55
|
-
control: {
|
56
|
-
type: 'text'
|
57
|
-
}
|
58
|
-
},
|
59
|
-
value: {
|
60
|
-
control: {
|
61
|
-
type: 'none'
|
62
|
-
}
|
63
|
-
}
|
64
|
-
},
|
65
|
-
decorators: [function (Story, context) {
|
66
|
-
return withDeprecationWarning(Story, context, '`DropdownField` will be deprecated in Astro-UI 1.0.0, use `SelectField` instead.');
|
67
|
-
}]
|
68
|
-
};
|
69
|
-
export var Default = function Default(args) {
|
70
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
71
|
-
label: "Select one"
|
72
|
-
}), ___EmotionJSX("option", {
|
73
|
-
value: "1"
|
74
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
75
|
-
value: "2"
|
76
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
77
|
-
value: "3"
|
78
|
-
}, "Option 3"));
|
79
|
-
};
|
80
|
-
export var DisabledFirstOption = function DisabledFirstOption(args) {
|
81
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
82
|
-
label: "Select one",
|
83
|
-
hasDisabledFirstOption: true
|
84
|
-
}), ___EmotionJSX("option", {
|
85
|
-
value: "1"
|
86
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
87
|
-
value: "2"
|
88
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
89
|
-
value: "3"
|
90
|
-
}, "Option 3"));
|
91
|
-
};
|
92
|
-
export var DefaultValue = function DefaultValue(args) {
|
93
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
94
|
-
label: "Select one",
|
95
|
-
defaultValue: "2"
|
96
|
-
}), ___EmotionJSX("option", {
|
97
|
-
value: "1"
|
98
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
99
|
-
value: "2"
|
100
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
101
|
-
value: "3"
|
102
|
-
}, "Option 3"));
|
103
|
-
};
|
104
|
-
export var Controlled = function Controlled(args) {
|
105
|
-
var _useState = useState('3'),
|
106
|
-
_useState2 = _slicedToArray(_useState, 2),
|
107
|
-
selected = _useState2[0],
|
108
|
-
setSelected = _useState2[1];
|
109
|
-
|
110
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
111
|
-
label: "Select one",
|
112
|
-
value: selected,
|
113
|
-
onChange: function onChange(e) {
|
114
|
-
return setSelected(e.target.value);
|
115
|
-
}
|
116
|
-
}), ___EmotionJSX("option", {
|
117
|
-
value: "1"
|
118
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
119
|
-
value: "2"
|
120
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
121
|
-
value: "3"
|
122
|
-
}, "Option 3"));
|
123
|
-
};
|
124
|
-
export var WithOptionGroups = function WithOptionGroups(args) {
|
125
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
126
|
-
label: "Select one"
|
127
|
-
}), ___EmotionJSX("optgroup", {
|
128
|
-
label: "Cheeses"
|
129
|
-
}, ___EmotionJSX("option", {
|
130
|
-
value: "brie"
|
131
|
-
}, "Brie"), ___EmotionJSX("option", {
|
132
|
-
value: "gouda"
|
133
|
-
}, "Gouda"), ___EmotionJSX("option", {
|
134
|
-
value: "swiss"
|
135
|
-
}, "Swiss")), ___EmotionJSX("optgroup", {
|
136
|
-
label: "Breads"
|
137
|
-
}, ___EmotionJSX("option", {
|
138
|
-
value: "sourdough"
|
139
|
-
}, "Sourdough"), ___EmotionJSX("option", {
|
140
|
-
value: "rye"
|
141
|
-
}, "Rye"), ___EmotionJSX("option", {
|
142
|
-
value: "focaccia"
|
143
|
-
}, "Focaccia")));
|
144
|
-
};
|
145
|
-
export var NoneOption = function NoneOption(args) {
|
146
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
147
|
-
label: "Select one",
|
148
|
-
hasNoneOption: true
|
149
|
-
}), ___EmotionJSX("option", {
|
150
|
-
value: "1"
|
151
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
152
|
-
value: "2"
|
153
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
154
|
-
value: "3"
|
155
|
-
}, "Option 3"));
|
156
|
-
};
|
157
|
-
export var CustomNoneOption = function CustomNoneOption(args) {
|
158
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
159
|
-
label: "Select one",
|
160
|
-
hasNoneOption: true,
|
161
|
-
hasDisabledFirstOption: true,
|
162
|
-
noneLabel: "None"
|
163
|
-
}), ___EmotionJSX("option", {
|
164
|
-
value: "1"
|
165
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
166
|
-
value: "2"
|
167
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
168
|
-
value: "3"
|
169
|
-
}, "Option 3"));
|
170
|
-
};
|
171
|
-
export var IsDisabled = function IsDisabled(args) {
|
172
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
173
|
-
label: "Select one",
|
174
|
-
isDisabled: true
|
175
|
-
}), ___EmotionJSX("option", {
|
176
|
-
value: "1"
|
177
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
178
|
-
value: "2"
|
179
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
180
|
-
value: "3"
|
181
|
-
}, "Option 3"));
|
182
|
-
};
|
183
|
-
export var HelperText = function HelperText(args) {
|
184
|
-
return ___EmotionJSX(DropdownField, _extends({
|
185
|
-
label: "Select one",
|
186
|
-
helperText: "Here is some helpful text...",
|
187
|
-
status: "error"
|
188
|
-
}, args), ___EmotionJSX("option", {
|
189
|
-
value: "1"
|
190
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
191
|
-
value: "2"
|
192
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
193
|
-
value: "3"
|
194
|
-
}, "Option 3"));
|
195
|
-
};
|
196
|
-
export var Transparent = function Transparent(args) {
|
197
|
-
return ___EmotionJSX(Box, {
|
198
|
-
bg: "neutral.90",
|
199
|
-
p: 20
|
200
|
-
}, ___EmotionJSX(DropdownField, _extends({}, args, {
|
201
|
-
label: "Select one",
|
202
|
-
variant: "forms.select.transparent"
|
203
|
-
}), ___EmotionJSX("option", {
|
204
|
-
value: "1"
|
205
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
206
|
-
value: "2"
|
207
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
208
|
-
value: "3"
|
209
|
-
}, "Option 3")));
|
210
|
-
};
|
211
|
-
export var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
|
212
|
-
return ___EmotionJSX(DropdownField, _extends({}, args, {
|
213
|
-
label: "Select one",
|
214
|
-
hasNoStatusIndicator: true
|
215
|
-
}), ___EmotionJSX("option", {
|
216
|
-
value: "1"
|
217
|
-
}, "Option 1"), ___EmotionJSX("option", {
|
218
|
-
value: "2"
|
219
|
-
}, "Option 2"), ___EmotionJSX("option", {
|
220
|
-
value: "3"
|
221
|
-
}, "Option 3"));
|
222
|
-
};
|
@@ -1,60 +0,0 @@
|
|
1
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
-
import React from 'react';
|
3
|
-
import { render, screen } from '@testing-library/react';
|
4
|
-
import DropdownField from './DropdownField';
|
5
|
-
import axeTest from '../../utils/testUtils/testAxe';
|
6
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
7
|
-
var testId = 'test-dropdown';
|
8
|
-
var defaultProps = {
|
9
|
-
'data-testid': testId,
|
10
|
-
controlProps: {
|
11
|
-
'data-testid': "".concat(testId, "-input")
|
12
|
-
},
|
13
|
-
label: 'testLabel'
|
14
|
-
};
|
15
|
-
|
16
|
-
var getComponent = function getComponent() {
|
17
|
-
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
18
|
-
return render(___EmotionJSX(DropdownField, _extends({}, defaultProps, props), ___EmotionJSX("option", {
|
19
|
-
value: "a"
|
20
|
-
}, "A"), ___EmotionJSX("option", {
|
21
|
-
value: "b"
|
22
|
-
}, "B")));
|
23
|
-
};
|
24
|
-
|
25
|
-
afterEach(function () {
|
26
|
-
jest.restoreAllMocks();
|
27
|
-
}); // Need to be added to each test file to test accessibility using axe.
|
28
|
-
|
29
|
-
axeTest(getComponent);
|
30
|
-
test('default dropdownfield', function () {
|
31
|
-
getComponent();
|
32
|
-
var container = screen.getByTestId(testId);
|
33
|
-
var input = screen.getByLabelText('testLabel');
|
34
|
-
var label = screen.getByText('testLabel');
|
35
|
-
expect(container).toBeInstanceOf(HTMLDivElement);
|
36
|
-
expect(input).toBeInstanceOf(HTMLSelectElement);
|
37
|
-
expect(label).toBeInstanceOf(HTMLLabelElement);
|
38
|
-
expect(container).toBeInTheDocument();
|
39
|
-
expect(input).toBeInTheDocument();
|
40
|
-
expect(label).toBeInTheDocument();
|
41
|
-
});
|
42
|
-
test('disabled prop disables dropdown input', function () {
|
43
|
-
getComponent({
|
44
|
-
isDisabled: true
|
45
|
-
});
|
46
|
-
var dropdown = screen.getByRole('combobox');
|
47
|
-
expect(dropdown).toBeDisabled();
|
48
|
-
});
|
49
|
-
test('input is not disabled without disabled prop', function () {
|
50
|
-
getComponent();
|
51
|
-
var dropdown = screen.getByRole('combobox');
|
52
|
-
expect(dropdown).toBeEnabled();
|
53
|
-
});
|
54
|
-
test('displays helper text when helperText prop is passed', function () {
|
55
|
-
getComponent({
|
56
|
-
helperText: 'helper text!'
|
57
|
-
});
|
58
|
-
var label = screen.getByText('helper text!');
|
59
|
-
expect(label).toBeInTheDocument();
|
60
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './DropdownField';
|
@@ -1,71 +0,0 @@
|
|
1
|
-
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
|
2
|
-
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
|
3
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
4
|
-
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
|
5
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
6
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
7
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
8
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
9
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
10
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
11
|
-
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
13
|
-
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
15
|
-
|
16
|
-
import React, { forwardRef } from 'react';
|
17
|
-
import PropTypes from 'prop-types';
|
18
|
-
import { useFocusRing } from '@react-aria/focus';
|
19
|
-
import { useStatusClasses, useDeprecationWarning } from '../../hooks';
|
20
|
-
import Box from '../Box';
|
21
|
-
import ScrollBox from '../ScrollBox';
|
22
|
-
/**
|
23
|
-
* **WARNING: Panel will be deprecated in Astro 1.0.0, use `OverlayPanel` instead.**
|
24
|
-
*
|
25
|
-
*/
|
26
|
-
|
27
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
28
|
-
var Panel = /*#__PURE__*/forwardRef(function (props, ref) {
|
29
|
-
var className = props.className,
|
30
|
-
children = props.children,
|
31
|
-
isVisible = props.isVisible,
|
32
|
-
sx = props.sx,
|
33
|
-
width = props.width,
|
34
|
-
scrollBoxProps = props.scrollBoxProps;
|
35
|
-
|
36
|
-
var _useFocusRing = useFocusRing(),
|
37
|
-
isFocusVisible = _useFocusRing.isFocusVisible,
|
38
|
-
focusProps = _useFocusRing.focusProps;
|
39
|
-
|
40
|
-
var _useStatusClasses = useStatusClasses(className, {
|
41
|
-
isFocused: isFocusVisible,
|
42
|
-
isVisible: isVisible
|
43
|
-
}),
|
44
|
-
classNames = _useStatusClasses.classNames;
|
45
|
-
|
46
|
-
var dynamicStyles = {
|
47
|
-
marginRight: isVisible ? 0 : "-".concat(width)
|
48
|
-
};
|
49
|
-
useDeprecationWarning('`Panel` will be deprecated in Astro-UI 1.0.0, use `OverflowPanel` instead.');
|
50
|
-
return ___EmotionJSX(Box, _extends({
|
51
|
-
className: classNames,
|
52
|
-
ref: ref,
|
53
|
-
tabIndex: isVisible ? 0 : -1,
|
54
|
-
variant: "boxes.panel"
|
55
|
-
}, props, focusProps, {
|
56
|
-
sx: _objectSpread(_objectSpread({}, dynamicStyles), sx)
|
57
|
-
}), isVisible && ___EmotionJSX(ScrollBox, scrollBoxProps, children));
|
58
|
-
});
|
59
|
-
Panel.propTypes = {
|
60
|
-
isVisible: PropTypes.bool,
|
61
|
-
width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
62
|
-
|
63
|
-
/** Props object that is spread directly into the ScrollBox element. */
|
64
|
-
scrollBoxProps: PropTypes.shape({})
|
65
|
-
};
|
66
|
-
Panel.defaultProps = {
|
67
|
-
width: '100%',
|
68
|
-
isVisible: false
|
69
|
-
};
|
70
|
-
Panel.displayName = 'Panel';
|
71
|
-
export default Panel;
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
-
import React from 'react';
|
3
|
-
import Box from '../Box';
|
4
|
-
import Text from '../Text';
|
5
|
-
import Panel from '.';
|
6
|
-
import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
|
7
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
8
|
-
export default {
|
9
|
-
title: 'Deprecated/Panel',
|
10
|
-
component: Panel,
|
11
|
-
argTypes: {
|
12
|
-
isVisible: {
|
13
|
-
defaultValue: false,
|
14
|
-
description: 'Toggle panel.'
|
15
|
-
},
|
16
|
-
width: {
|
17
|
-
control: {
|
18
|
-
type: 'text'
|
19
|
-
},
|
20
|
-
description: 'Width of panel.'
|
21
|
-
}
|
22
|
-
},
|
23
|
-
decorators: [function (Story, context) {
|
24
|
-
return withDeprecationWarning(Story, context, '`Panel` will be deprecated in Astro-UI 1.0.0, use `OverlayPanel` instead.');
|
25
|
-
}]
|
26
|
-
};
|
27
|
-
export var Default = function Default(_ref) {
|
28
|
-
var args = _extends({}, _ref);
|
29
|
-
|
30
|
-
return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
|
31
|
-
isRow: true
|
32
|
-
}, ___EmotionJSX(Box, {
|
33
|
-
flexGrow: 1
|
34
|
-
}, ___EmotionJSX(Text, null, "Reveal panel with toggle below.")), ___EmotionJSX(Panel, args, "Panel content goes here.")));
|
35
|
-
};
|
@@ -1,52 +0,0 @@
|
|
1
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
-
import React from 'react';
|
3
|
-
import userEvent from '@testing-library/user-event';
|
4
|
-
import axeTest from '../../utils/testUtils/testAxe';
|
5
|
-
import { render, screen } from '../../utils/testUtils/testWrapper';
|
6
|
-
import Panel from '.';
|
7
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
8
|
-
var testId = 'test-panel';
|
9
|
-
var defaultProps = {
|
10
|
-
'data-testid': testId
|
11
|
-
};
|
12
|
-
|
13
|
-
var getComponent = function getComponent() {
|
14
|
-
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
15
|
-
return render(___EmotionJSX(Panel, _extends({}, defaultProps, props)));
|
16
|
-
};
|
17
|
-
|
18
|
-
afterEach(function () {
|
19
|
-
jest.restoreAllMocks();
|
20
|
-
}); // Need to be added to each test file to test accessibility using axe.
|
21
|
-
|
22
|
-
axeTest(getComponent);
|
23
|
-
test('default panel', function () {
|
24
|
-
getComponent({
|
25
|
-
children: ___EmotionJSX("div", null, "Test")
|
26
|
-
});
|
27
|
-
var panel = screen.getByTestId(testId);
|
28
|
-
var child = screen.queryByText('Test');
|
29
|
-
expect(panel).toBeInTheDocument();
|
30
|
-
expect(child).not.toBeInTheDocument();
|
31
|
-
expect(panel).toHaveAttribute('tabIndex', '-1');
|
32
|
-
});
|
33
|
-
test('panel when visible', function () {
|
34
|
-
getComponent({
|
35
|
-
isVisible: true,
|
36
|
-
children: ___EmotionJSX("div", null, "Test")
|
37
|
-
});
|
38
|
-
var panel = screen.getByTestId(testId);
|
39
|
-
var child = screen.queryByText('Test');
|
40
|
-
expect(panel).toBeInTheDocument();
|
41
|
-
expect(child).toBeInTheDocument();
|
42
|
-
expect(panel).toHaveAttribute('tabIndex', '0');
|
43
|
-
});
|
44
|
-
test('panel with focus', function () {
|
45
|
-
getComponent({
|
46
|
-
isVisible: true,
|
47
|
-
children: ___EmotionJSX("div", null, "Test")
|
48
|
-
});
|
49
|
-
var panel = screen.getByTestId(testId);
|
50
|
-
userEvent.tab();
|
51
|
-
expect(panel).toHaveFocus();
|
52
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export { default } from './Panel';
|
@@ -1,65 +0,0 @@
|
|
1
|
-
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
|
2
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
3
|
-
// TODO: popover-deprecate Remove when popover is deprecated in 1.0.0.
|
4
|
-
// Replace with PopoverContainer
|
5
|
-
import React, { forwardRef } from 'react';
|
6
|
-
import Tippy from '@tippyjs/react/headless';
|
7
|
-
import PropTypes from 'prop-types';
|
8
|
-
import Box from '../Box';
|
9
|
-
import { useDeprecationWarning } from '../../hooks';
|
10
|
-
/**
|
11
|
-
* **WARNING: Will be deprecated in Astro 1.0.0, use `PopoverMenu` instead.**
|
12
|
-
*
|
13
|
-
* Popover component used for popover button menus and help hints.
|
14
|
-
* Built using Tippy.js [Tippy.js](https://atomiks.github.io/tippyjs/) and uses the
|
15
|
-
* available [props from Tippy.js](https://atomiks.github.io/tippyjs/v6/all-props/).
|
16
|
-
*/
|
17
|
-
|
18
|
-
import { jsx as ___EmotionJSX } from "@emotion/react";
|
19
|
-
var Popover = /*#__PURE__*/forwardRef(function (props, ref) {
|
20
|
-
var content = props.content,
|
21
|
-
trigger = props.trigger,
|
22
|
-
others = _objectWithoutProperties(props, ["content", "trigger"]);
|
23
|
-
|
24
|
-
useDeprecationWarning('`Popover` will be deprecated in Astro-UI 1.0.0, use `PopoverMenu` for menus instead. Or `Tooltip` when it is available.');
|
25
|
-
return ___EmotionJSX(Tippy, _extends({
|
26
|
-
ref: ref,
|
27
|
-
interactive: true,
|
28
|
-
render: function render(attrs) {
|
29
|
-
return ___EmotionJSX(Box, _extends({}, attrs, {
|
30
|
-
variant: "popover.container"
|
31
|
-
}), ___EmotionJSX(Box, {
|
32
|
-
role: "tooltip",
|
33
|
-
variant: "popover.content"
|
34
|
-
}, content), ___EmotionJSX(Box, {
|
35
|
-
className: "tippy-arrow",
|
36
|
-
"data-popper-arrow": "",
|
37
|
-
variant: "popover.arrow"
|
38
|
-
}));
|
39
|
-
}
|
40
|
-
}, trigger && {
|
41
|
-
trigger: trigger
|
42
|
-
}, others));
|
43
|
-
});
|
44
|
-
Popover.propTypes = {
|
45
|
-
/** The content of the popover. */
|
46
|
-
content: PropTypes.node,
|
47
|
-
|
48
|
-
/** Placement of the popover. Note that TippyJs's flip modifier can change this
|
49
|
-
* to the opposite placement if it has more space. [More information on placement](https://atomiks.github.io/tippyjs/v6/all-props/#placement) */
|
50
|
-
placement: PropTypes.string,
|
51
|
-
|
52
|
-
/** Determines the events that cause the tooltip to show.
|
53
|
-
* Multiple event names are separated by spaces.
|
54
|
-
* [More information on trigger](https://atomiks.github.io/tippyjs/v6/all-props/#trigger) */
|
55
|
-
trigger: PropTypes.string,
|
56
|
-
|
57
|
-
/** Delay in ms once a trigger event is fired before a popover shows or hides.
|
58
|
-
* [More information on delay](https://atomiks.github.io/tippyjs/v6/all-props/#delay) */
|
59
|
-
delay: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf([PropTypes.number])])
|
60
|
-
};
|
61
|
-
Popover.defaultProps = {
|
62
|
-
placement: 'top',
|
63
|
-
trigger: 'mouseenter focus'
|
64
|
-
};
|
65
|
-
export default Popover;
|