@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.
Files changed (142) hide show
  1. package/CHANGELOG.md +257 -0
  2. package/README.md +5 -0
  3. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
  4. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.test.js +24 -0
  5. package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js +1 -1
  6. package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js +1 -1
  7. package/lib/cjs/components/AccordionGroup/AccordionGroup.test.js +33 -1
  8. package/lib/cjs/components/AccordionItem/AccordionItem.js +5 -4
  9. package/lib/cjs/components/Button/Button.js +6 -26
  10. package/lib/cjs/components/Button/Button.stories.js +7 -12
  11. package/lib/cjs/components/Button/Button.test.js +2 -25
  12. package/lib/cjs/components/Chip/Chip.js +26 -10
  13. package/lib/cjs/components/Chip/Chip.stories.js +44 -5
  14. package/lib/cjs/components/Chip/Chip.test.js +9 -0
  15. package/lib/cjs/components/{DropdownField/index.js → Chip/ChipContext.js} +8 -7
  16. package/lib/cjs/components/ColorField/ColorField.js +1 -0
  17. package/lib/cjs/components/ComboBoxField/ComboBoxField.js +7 -0
  18. package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js +25 -1
  19. package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js +44 -0
  20. package/lib/cjs/components/FileInputField/FileItem.js +2 -1
  21. package/lib/cjs/components/IconButton/IconButton.js +17 -7
  22. package/lib/cjs/components/IconButton/IconButton.stories.js +8 -17
  23. package/lib/cjs/components/IconButton/IconButton.test.js +4 -6
  24. package/lib/cjs/components/ImageUploadField/ImagePreviewButton.js +2 -1
  25. package/lib/cjs/components/List/List.js +3 -0
  26. package/lib/cjs/components/List/List.stories.js +7 -2
  27. package/lib/cjs/components/ListBox/ListBox.js +3 -6
  28. package/lib/cjs/components/ListBox/ListBox.test.js +2 -0
  29. package/lib/cjs/components/ListBox/Option.js +6 -0
  30. package/lib/cjs/components/ListItem/ListItem.stories.js +0 -2
  31. package/lib/cjs/components/ListView/ListView.js +4 -3
  32. package/lib/cjs/components/ListView/ListView.stories.js +580 -39
  33. package/lib/cjs/components/ListViewItem/ListViewItem.js +3 -6
  34. package/lib/cjs/components/Messages/Message.js +2 -2
  35. package/lib/cjs/components/MultivaluesField/MultivaluesField.js +3 -2
  36. package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js +15 -14
  37. package/lib/cjs/components/PopoverContainer/PopoverContainer.test.js +15 -0
  38. package/lib/cjs/components/Stepper/Stepper.js +1 -0
  39. package/lib/cjs/components/Tab/Tab.js +5 -3
  40. package/lib/cjs/components/Tabs/Tabs.js +3 -0
  41. package/lib/cjs/components/Tabs/Tabs.stories.js +3 -4
  42. package/lib/cjs/components/Tabs/Tabs.test.js +44 -15
  43. package/lib/cjs/components/TextArea/TextArea.js +5 -1
  44. package/lib/cjs/components/TextAreaField/TextAreaField.test.js +10 -0
  45. package/lib/cjs/components/TooltipTrigger/TooltipTrigger.stories.js +45 -2
  46. package/lib/cjs/index.js +48 -136
  47. package/lib/cjs/layouts/ListLayout.stories.js +2 -1
  48. package/lib/cjs/layouts/SchemaFormLayout.stories.js +2 -21
  49. package/lib/cjs/recipes/ArrayField.stories.js +3 -3
  50. package/lib/cjs/styles/forms/input.js +4 -0
  51. package/lib/cjs/styles/theme.js +0 -3
  52. package/lib/cjs/styles/variants/accordion.js +7 -9
  53. package/lib/cjs/styles/variants/boxes.js +22 -19
  54. package/lib/cjs/styles/variants/buttons.js +48 -29
  55. package/lib/cjs/styles/variants/variants.js +0 -3
  56. package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js +4 -11
  57. package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js +23 -1
  58. package/lib/components/AccordionGridItem/AccordionGridItemBody.js +1 -1
  59. package/lib/components/AccordionGridItem/AccordionGridItemHeader.js +1 -1
  60. package/lib/components/AccordionGroup/AccordionGroup.test.js +30 -1
  61. package/lib/components/AccordionItem/AccordionItem.js +6 -5
  62. package/lib/components/Button/Button.js +8 -26
  63. package/lib/components/Button/Button.stories.js +7 -11
  64. package/lib/components/Button/Button.test.js +2 -21
  65. package/lib/components/Chip/Chip.js +25 -10
  66. package/lib/components/Chip/Chip.stories.js +41 -5
  67. package/lib/components/Chip/Chip.test.js +9 -0
  68. package/lib/components/Chip/ChipContext.js +3 -0
  69. package/lib/components/ColorField/ColorField.js +1 -0
  70. package/lib/components/ComboBoxField/ComboBoxField.js +7 -0
  71. package/lib/components/ComboBoxField/ComboBoxField.stories.js +21 -0
  72. package/lib/components/ComboBoxField/ComboBoxField.test.js +35 -0
  73. package/lib/components/FileInputField/FileItem.js +2 -1
  74. package/lib/components/IconButton/IconButton.js +17 -9
  75. package/lib/components/IconButton/IconButton.stories.js +7 -13
  76. package/lib/components/IconButton/IconButton.test.js +4 -6
  77. package/lib/components/ImageUploadField/ImagePreviewButton.js +2 -1
  78. package/lib/components/List/List.js +2 -0
  79. package/lib/components/List/List.stories.js +6 -2
  80. package/lib/components/ListBox/ListBox.js +3 -5
  81. package/lib/components/ListBox/ListBox.test.js +2 -0
  82. package/lib/components/ListBox/Option.js +6 -0
  83. package/lib/components/ListItem/ListItem.stories.js +0 -2
  84. package/lib/components/ListView/ListView.js +4 -3
  85. package/lib/components/ListView/ListView.stories.js +577 -39
  86. package/lib/components/ListViewItem/ListViewItem.js +3 -5
  87. package/lib/components/Messages/Message.js +2 -2
  88. package/lib/components/MultivaluesField/MultivaluesField.js +3 -2
  89. package/lib/components/OverlayPanel/OverlayPanel.stories.js +7 -5
  90. package/lib/components/PopoverContainer/PopoverContainer.test.js +16 -1
  91. package/lib/components/Stepper/Stepper.js +1 -0
  92. package/lib/components/Tab/Tab.js +5 -3
  93. package/lib/components/Tabs/Tabs.js +3 -0
  94. package/lib/components/Tabs/Tabs.stories.js +3 -4
  95. package/lib/components/Tabs/Tabs.test.js +40 -15
  96. package/lib/components/TextArea/TextArea.js +5 -1
  97. package/lib/components/TextAreaField/TextAreaField.test.js +8 -0
  98. package/lib/components/TooltipTrigger/TooltipTrigger.stories.js +33 -1
  99. package/lib/index.js +0 -8
  100. package/lib/layouts/ListLayout.stories.js +2 -1
  101. package/lib/layouts/SchemaFormLayout.stories.js +2 -19
  102. package/lib/recipes/ArrayField.stories.js +3 -3
  103. package/lib/styles/forms/input.js +4 -0
  104. package/lib/styles/theme.js +0 -3
  105. package/lib/styles/variants/accordion.js +7 -9
  106. package/lib/styles/variants/boxes.js +21 -19
  107. package/lib/styles/variants/buttons.js +47 -29
  108. package/lib/styles/variants/variants.js +0 -2
  109. package/package.json +1 -1
  110. package/lib/cjs/components/Dropdown/Dropdown.js +0 -112
  111. package/lib/cjs/components/Dropdown/Dropdown.test.js +0 -80
  112. package/lib/cjs/components/Dropdown/index.js +0 -18
  113. package/lib/cjs/components/DropdownField/DropdownField.js +0 -187
  114. package/lib/cjs/components/DropdownField/DropdownField.stories.js +0 -278
  115. package/lib/cjs/components/DropdownField/DropdownField.test.js +0 -80
  116. package/lib/cjs/components/Panel/Panel.js +0 -101
  117. package/lib/cjs/components/Panel/Panel.stories.js +0 -57
  118. package/lib/cjs/components/Panel/Panel.test.js +0 -72
  119. package/lib/cjs/components/Panel/index.js +0 -18
  120. package/lib/cjs/components/Popover/Popover.js +0 -87
  121. package/lib/cjs/components/Popover/Popover.stories.js +0 -80
  122. package/lib/cjs/components/Popover/Popover.test.js +0 -91
  123. package/lib/cjs/components/Popover/index.js +0 -18
  124. package/lib/cjs/recipes/InputBoxWithLinkedChip.stories.js +0 -67
  125. package/lib/cjs/styles/variants/popover.js +0 -86
  126. package/lib/components/Dropdown/Dropdown.js +0 -90
  127. package/lib/components/Dropdown/Dropdown.test.js +0 -62
  128. package/lib/components/Dropdown/index.js +0 -1
  129. package/lib/components/DropdownField/DropdownField.js +0 -155
  130. package/lib/components/DropdownField/DropdownField.stories.js +0 -222
  131. package/lib/components/DropdownField/DropdownField.test.js +0 -60
  132. package/lib/components/DropdownField/index.js +0 -1
  133. package/lib/components/Panel/Panel.js +0 -71
  134. package/lib/components/Panel/Panel.stories.js +0 -35
  135. package/lib/components/Panel/Panel.test.js +0 -52
  136. package/lib/components/Panel/index.js +0 -1
  137. package/lib/components/Popover/Popover.js +0 -65
  138. package/lib/components/Popover/Popover.stories.js +0 -52
  139. package/lib/components/Popover/Popover.test.js +0 -75
  140. package/lib/components/Popover/index.js +0 -2
  141. package/lib/recipes/InputBoxWithLinkedChip.stories.js +0 -43
  142. package/lib/styles/variants/popover.js +0 -76
@@ -24,7 +24,6 @@ import menu from './menu';
24
24
  import menuItem from './menuItem';
25
25
  import messages from './messages';
26
26
  import numberField from './numberField';
27
- import popover from './popover';
28
27
  import overlayPanel from './overlayPanel';
29
28
  import popoverMenu from './popoverMenu';
30
29
  import rockerbutton from './rockerbutton';
@@ -47,7 +46,6 @@ export default _objectSpread(_objectSpread({
47
46
  modal: modal,
48
47
  numberField: numberField,
49
48
  overlayPanel: overlayPanel,
50
- popover: popover,
51
49
  popoverMenu: popoverMenu,
52
50
  rockerbutton: rockerbutton,
53
51
  separator: separator,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.0.0-alpha.9",
3
+ "version": "1.1.0-alpha.10",
4
4
  "description": "PingUX themeable React component library",
5
5
  "author": "uxdev@pingidentity.com",
6
6
  "license": "Apache-2.0",
@@ -1,112 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
6
-
7
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
8
-
9
- _Object$defineProperty(exports, "__esModule", {
10
- value: true
11
- });
12
-
13
- exports["default"] = void 0;
14
-
15
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
16
-
17
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
18
-
19
- var _react = _interopRequireWildcard(require("react"));
20
-
21
- var _propTypes = _interopRequireDefault(require("prop-types"));
22
-
23
- var _forms = require("@rebass/forms");
24
-
25
- var _focus = require("@react-aria/focus");
26
-
27
- var _hooks = require("../../hooks");
28
-
29
- var _react2 = require("@emotion/react");
30
-
31
- /**
32
- * Basic dropdown menu input.
33
- * Accepts most styling props from [styled-system](https://styled-system.com/table).
34
- * Built on top of the [Select component from Rebass Forms](https://rebassjs.org/forms/select).
35
- */
36
- var Dropdown = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
37
- var className = props.className,
38
- children = props.children,
39
- hasNoneOption = props.hasNoneOption,
40
- hasDisabledFirstOption = props.hasDisabledFirstOption,
41
- firstLabel = props.firstLabel,
42
- noneLabel = props.noneLabel,
43
- defaultValue = props.defaultValue,
44
- value = props.value,
45
- others = (0, _objectWithoutProperties2["default"])(props, ["className", "children", "hasNoneOption", "hasDisabledFirstOption", "firstLabel", "noneLabel", "defaultValue", "value"]);
46
- var dropdownRef = (0, _react.useRef)();
47
- /* istanbul ignore next */
48
-
49
- (0, _react.useImperativeHandle)(ref, function () {
50
- return dropdownRef.current;
51
- });
52
-
53
- var _useFocusRing = (0, _focus.useFocusRing)(),
54
- isFocusVisible = _useFocusRing.isFocusVisible,
55
- focusProps = _useFocusRing.focusProps;
56
-
57
- var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
58
- isFocused: isFocusVisible
59
- }),
60
- classNames = _useStatusClasses.classNames;
61
-
62
- return (0, _react2.jsx)(_forms.Select, (0, _extends2["default"])({
63
- ref: dropdownRef,
64
- className: classNames,
65
- defaultValue: value ? undefined : defaultValue || '',
66
- value: value
67
- }, others, focusProps), !hasNoneOption && (0, _react2.jsx)("option", {
68
- key: "__empty",
69
- value: "",
70
- disabled: hasDisabledFirstOption
71
- }, firstLabel), hasNoneOption && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)("option", {
72
- key: "__empty",
73
- value: "",
74
- disabled: hasDisabledFirstOption
75
- }, noneLabel || firstLabel), (0, _react2.jsx)("option", {
76
- key: "__spacer",
77
- disabled: true
78
- }, "--------")), children);
79
- });
80
-
81
- Dropdown.propTypes = {
82
- /** Displays a none option within the dropdown options */
83
- hasNoneOption: _propTypes["default"].bool,
84
-
85
- /** Whether the first option is disabled. Useful to prevent reselection of the first option. */
86
- hasDisabledFirstOption: _propTypes["default"].bool,
87
-
88
- /** Id of the selected element */
89
- id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
90
-
91
- /** Label for first option. */
92
- firstLabel: _propTypes["default"].string,
93
-
94
- /** Label for none option. `firstLabel` prop can also be used. */
95
- noneLabel: _propTypes["default"].string,
96
-
97
- /** Value of the select (controlled). */
98
- value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
99
-
100
- /** Default value of the select (uncontrolled). */
101
- defaultValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
102
-
103
- /** Handler that is called when the element's selection state changes. */
104
- onChange: _propTypes["default"].func
105
- };
106
- Dropdown.defaultProps = {
107
- hasNoneOption: false,
108
- firstLabel: 'Select an option'
109
- };
110
- Dropdown.displayName = 'Dropdown';
111
- var _default = Dropdown;
112
- exports["default"] = _default;
@@ -1,80 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
6
-
7
- var _react = _interopRequireDefault(require("react"));
8
-
9
- var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
10
-
11
- var _testWrapper = require("../../utils/testUtils/testWrapper");
12
-
13
- var _ = _interopRequireDefault(require("."));
14
-
15
- var _react2 = require("@emotion/react");
16
-
17
- var testId = 'test-box';
18
- var defaultProps = {
19
- 'data-testid': testId
20
- };
21
-
22
- var getComponent = function getComponent() {
23
- var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
24
- var children = props.children;
25
- return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), children));
26
- }; // Need to be added to each test file to test accessibility using axe.
27
-
28
-
29
- (0, _testAxe["default"])(getComponent, {
30
- // Dropdown with label provided by DropdownField
31
- rules: {
32
- 'select-name': {
33
- enabled: false
34
- }
35
- }
36
- });
37
- test('dropdown renders', function () {
38
- getComponent();
39
-
40
- var dropdown = _testWrapper.screen.getByTestId(testId);
41
-
42
- expect(dropdown).toBeInstanceOf(HTMLSelectElement);
43
- expect(dropdown).toBeInTheDocument();
44
- });
45
- test('hasNoneOption prop renders none option', function () {
46
- getComponent({
47
- hasNoneOption: true,
48
- noneLabel: 'None'
49
- });
50
- expect((0, _testWrapper.within)(document).getByText('None')).toBeInTheDocument();
51
- });
52
- test('default option is first one', function () {
53
- getComponent();
54
-
55
- var firstOption = _testWrapper.screen.getByRole('option');
56
-
57
- expect(firstOption.value).toEqual('');
58
- expect(firstOption).toHaveAttribute('selected', '');
59
- expect(firstOption).toBeEnabled();
60
- });
61
- test('default option is disabled when hasDisabledFirstOption is passed in', function () {
62
- getComponent({
63
- hasDisabledFirstOption: true
64
- });
65
-
66
- var firstOption = _testWrapper.screen.getByRole('option');
67
-
68
- expect(firstOption.value).toEqual('');
69
- expect(firstOption).toHaveAttribute('selected', '');
70
- expect(firstOption).toBeDisabled();
71
- });
72
- test('default option is not first one when custom defaultValue is passed in', function () {
73
- getComponent({
74
- defaultValue: '1'
75
- });
76
-
77
- var firstOption = _testWrapper.screen.getByRole('option');
78
-
79
- expect(firstOption).not.toHaveAttribute('selected', '');
80
- });
@@ -1,18 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
-
5
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
-
7
- _Object$defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
-
11
- _Object$defineProperty(exports, "default", {
12
- enumerable: true,
13
- get: function get() {
14
- return _Dropdown["default"];
15
- }
16
- });
17
-
18
- var _Dropdown = _interopRequireDefault(require("./Dropdown"));
@@ -1,187 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
6
-
7
- var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
8
-
9
- _Object$defineProperty2(exports, "__esModule", {
10
- value: true
11
- });
12
-
13
- exports["default"] = void 0;
14
-
15
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
16
-
17
- var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
18
-
19
- var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
20
-
21
- var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
22
-
23
- var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
24
-
25
- var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
26
-
27
- var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
28
-
29
- var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
30
-
31
- var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
32
-
33
- var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
34
-
35
- var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
36
-
37
- var _react = _interopRequireWildcard(require("react"));
38
-
39
- var _propTypes = _interopRequireDefault(require("prop-types"));
40
-
41
- var _hooks = require("../../hooks");
42
-
43
- var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
44
-
45
- var _Box = _interopRequireDefault(require("../Box"));
46
-
47
- var _Dropdown = _interopRequireDefault(require("../Dropdown"));
48
-
49
- var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
50
-
51
- var _Label = _interopRequireDefault(require("../Label"));
52
-
53
- var _react2 = require("@emotion/react");
54
-
55
- function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
56
-
57
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
58
-
59
- /**
60
- * **WARNING: Will be deprecated in Astro 1.0.0, use `SelectField` instead.**
61
- *
62
- * Combines a dropdown, label, and helper text for a complete, form-ready solution.
63
- */
64
- var DropdownField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
65
- var children = props.children,
66
- controlProps = props.controlProps,
67
- firstLabel = props.firstLabel,
68
- hasAutoFocus = props.hasAutoFocus,
69
- hasDisabledFirstOption = props.hasDisabledFirstOption,
70
- hasNoneOption = props.hasNoneOption,
71
- helperText = props.helperText,
72
- noneLabel = props.noneLabel,
73
- status = props.status;
74
-
75
- var _useField = (0, _hooks.useField)(_objectSpread({
76
- autoFocus: hasAutoFocus,
77
- controlProps: _objectSpread({
78
- firstLabel: firstLabel,
79
- hasDisabledFirstOption: hasDisabledFirstOption,
80
- hasNoneOption: hasNoneOption,
81
- noneLabel: noneLabel
82
- }, controlProps)
83
- }, props)),
84
- fieldContainerProps = _useField.fieldContainerProps,
85
- fieldControlProps = _useField.fieldControlProps,
86
- fieldLabelProps = _useField.fieldLabelProps;
87
-
88
- var dropdownRef = (0, _react.useRef)();
89
- /* istanbul ignore next */
90
-
91
- (0, _react.useImperativeHandle)(ref, function () {
92
- return dropdownRef.current;
93
- });
94
- (0, _hooks.useDeprecationWarning)('`DropdownField` will be deprecated in Astro-UI 1.0.0, use `SelectField` instead.');
95
- return (0, _react2.jsx)(_Box["default"], fieldContainerProps, (0, _react2.jsx)(_Label["default"], fieldLabelProps), (0, _react2.jsx)(_Box["default"], {
96
- variant: "forms.input.container",
97
- className: fieldControlProps.className
98
- }, (0, _react2.jsx)(_Dropdown["default"], (0, _extends2["default"])({
99
- ref: dropdownRef
100
- }, fieldControlProps), children)), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
101
- status: status
102
- }, helperText));
103
- });
104
- DropdownField.propTypes = {
105
- /** The default value of the select field (uncontrolled). */
106
- defaultValue: _propTypes["default"].string,
107
-
108
- /** The value of the select field (controlled). */
109
- value: _propTypes["default"].string,
110
-
111
- /** Displays a none option within the dropdown options */
112
- hasNoneOption: _propTypes["default"].bool,
113
-
114
- /** Whether the first option is disabled. Useful to prevent reselection of the first option. */
115
- hasDisabledFirstOption: _propTypes["default"].bool,
116
-
117
- /** Label for first option. */
118
- firstLabel: _propTypes["default"].string,
119
-
120
- /** Label for none option. `firstLabel` prop can also be used. */
121
- noneLabel: _propTypes["default"].string,
122
-
123
- /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
124
- id: _propTypes["default"].string,
125
-
126
- /** Whether the Dropdown is required. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required). */
127
- isRequired: _propTypes["default"].bool,
128
-
129
- /** @ignore Whether the Dropdown can be interacted
130
- * with but cannot have its selection state changed. */
131
- isReadOnly: _propTypes["default"].bool,
132
-
133
- /** Whether the element should receive focus on render. */
134
- hasAutoFocus: _propTypes["default"].bool,
135
-
136
- /** Whether the field has a status indicator. */
137
- hasNoStatusIndicator: _propTypes["default"].bool,
138
-
139
- /** Text to display after the radio group label. Useful for errors or other info. */
140
- helperText: _propTypes["default"].node,
141
-
142
- /** If present this prop will cause a help hint to render in the label of the field. */
143
- hintText: _propTypes["default"].string,
144
-
145
- /** Determines the helper text styling. */
146
- status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
147
-
148
- /** Handler that is called when the element receives focus. */
149
- onFocus: _propTypes["default"].func,
150
-
151
- /** Handler that is called when the element loses focus. */
152
- onBlur: _propTypes["default"].func,
153
-
154
- /** Handler that is called when the element's focus status changes. */
155
- onFocusChange: _propTypes["default"].func,
156
-
157
- /** Handler that is called when a key is pressed. */
158
- onKeyDown: _propTypes["default"].func,
159
-
160
- /** Handler that is called when a key is released. */
161
- onKeyUp: _propTypes["default"].func,
162
-
163
- /** Defines a string value that labels the current element. */
164
- 'aria-label': _propTypes["default"].string,
165
-
166
- /** Identifies the element (or elements) that labels the current element. */
167
- 'aria-labelledby': _propTypes["default"].string,
168
-
169
- /** Identifies the element (or elements) that describes the object. */
170
- 'aria-describedby': _propTypes["default"].string,
171
-
172
- /**
173
- * Identifies the element (or elements) that provide a detailed, extended description for the
174
- * object.
175
- */
176
- 'aria-details': _propTypes["default"].string,
177
-
178
- /** Props object that is spread directly into the select element. */
179
- controlProps: _propTypes["default"].shape({})
180
- };
181
- DropdownField.defaultProps = {
182
- hasNoneOption: false,
183
- firstLabel: 'Select an option'
184
- };
185
- DropdownField.displayName = 'DropdownField';
186
- var _default = DropdownField;
187
- exports["default"] = _default;