@pingux/astro 0.42.0 → 1.0.0-alpha.11
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 +132 -0
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js +1 -1
- package/lib/cjs/components/AccordionItem/AccordionItem.js +3 -1
- package/lib/cjs/components/CopyText/CopyText.js +3 -73
- package/lib/cjs/components/FileInputField/FileInputField.js +324 -0
- package/lib/cjs/components/FileInputField/FileInputField.stories.js +250 -0
- package/lib/cjs/components/FileInputField/FileInputField.test.js +227 -0
- package/lib/cjs/components/FileInputField/FileItem.js +125 -0
- package/lib/cjs/components/FileInputField/FileSelect.js +48 -0
- package/lib/cjs/components/FileInputField/index.js +18 -0
- package/lib/cjs/components/ListView/ListView.js +4 -3
- package/lib/cjs/components/ListViewItem/ListViewItem.js +3 -6
- package/lib/cjs/components/NumberField/NumberField.js +4 -2
- package/lib/cjs/components/NumberField/NumberField.test.js +15 -0
- package/lib/cjs/components/Tab/Tab.js +11 -4
- package/lib/cjs/components/Tabs/Tabs.js +7 -1
- package/lib/cjs/components/Tabs/Tabs.stories.js +60 -6
- package/lib/cjs/components/Tabs/Tabs.test.js +78 -15
- package/lib/cjs/hooks/useCopyToClipboard/index.js +18 -0
- package/lib/cjs/hooks/useCopyToClipboard/useCopyToClipboard.js +83 -0
- package/lib/cjs/hooks/useCopyToClipboard/useCopyToClipboard.test.js +79 -0
- package/lib/cjs/index.js +10 -0
- package/lib/cjs/recipes/CopyToClipboard.stories.js +45 -0
- package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js +146 -0
- package/lib/cjs/recipes/RowLineChart.stories.js +6 -1
- package/lib/cjs/styles/forms/input.js +11 -0
- package/lib/cjs/styles/variants/accordion.js +2 -2
- package/lib/cjs/styles/variants/boxes.js +27 -0
- package/lib/cjs/styles/variants/buttons.js +20 -0
- package/lib/cjs/styles/variants/tabs.js +1 -0
- package/lib/components/AccordionGridGroup/AccordionGridGroup.js +1 -1
- package/lib/components/AccordionItem/AccordionItem.js +3 -1
- package/lib/components/CopyText/CopyText.js +2 -71
- package/lib/components/FileInputField/FileInputField.js +280 -0
- package/lib/components/FileInputField/FileInputField.stories.js +206 -0
- package/lib/components/FileInputField/FileInputField.test.js +187 -0
- package/lib/components/FileInputField/FileItem.js +100 -0
- package/lib/components/FileInputField/FileSelect.js +31 -0
- package/lib/components/FileInputField/index.js +1 -0
- package/lib/components/ListView/ListView.js +4 -3
- package/lib/components/ListViewItem/ListViewItem.js +3 -5
- package/lib/components/NumberField/NumberField.js +4 -2
- package/lib/components/NumberField/NumberField.test.js +9 -0
- package/lib/components/Tab/Tab.js +11 -4
- package/lib/components/Tabs/Tabs.js +7 -1
- package/lib/components/Tabs/Tabs.stories.js +56 -4
- package/lib/components/Tabs/Tabs.test.js +78 -15
- package/lib/hooks/useCopyToClipboard/index.js +1 -0
- package/lib/hooks/useCopyToClipboard/useCopyToClipboard.js +69 -0
- package/lib/hooks/useCopyToClipboard/useCopyToClipboard.test.js +64 -0
- package/lib/index.js +1 -0
- package/lib/recipes/CopyToClipboard.stories.js +25 -0
- package/lib/recipes/RadioButtonsWithLinks.stories.js +120 -0
- package/lib/recipes/RowLineChart.stories.js +6 -1
- package/lib/styles/forms/input.js +11 -0
- package/lib/styles/variants/accordion.js +2 -2
- package/lib/styles/variants/boxes.js +27 -0
- package/lib/styles/variants/buttons.js +20 -0
- package/lib/styles/variants/tabs.js +1 -0
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,138 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
# [1.0.0-alpha.11](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.10...@pingux/astro@1.0.0-alpha.11) (2022-01-08)
|
7
|
+
|
8
|
+
|
9
|
+
### Features
|
10
|
+
|
11
|
+
* [UIP-4887] ListView hides Separators on zoom ([92ca2bb](https://gitlab.corp.pingidentity.com/ux/pingux/commit/92ca2bb40bb49ce9a69eb097cc88b5e210acce8a))
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
|
17
|
+
# [1.0.0-alpha.10](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.9...@pingux/astro@1.0.0-alpha.10) (2022-01-07)
|
18
|
+
|
19
|
+
|
20
|
+
### Bug Fixes
|
21
|
+
|
22
|
+
* [UIP-5010] Disabled tabs can be displayed via keyboard ([9115f66](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9115f66c8e921a910934cb8205b29321f2d30fe8))
|
23
|
+
|
24
|
+
|
25
|
+
|
26
|
+
|
27
|
+
|
28
|
+
# [1.0.0-alpha.9](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.8...@pingux/astro@1.0.0-alpha.9) (2022-01-07)
|
29
|
+
|
30
|
+
|
31
|
+
### Bug Fixes
|
32
|
+
|
33
|
+
* [UIP-5013] Accordion design improvements ([436b8ef](https://gitlab.corp.pingidentity.com/ux/pingux/commit/436b8ef7d6e07c03feb7b4abf89e07eae022f809))
|
34
|
+
|
35
|
+
|
36
|
+
|
37
|
+
|
38
|
+
|
39
|
+
# [1.0.0-alpha.8](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.7...@pingux/astro@1.0.0-alpha.8) (2021-12-30)
|
40
|
+
|
41
|
+
|
42
|
+
### Features
|
43
|
+
|
44
|
+
* [UIP-5003] Copy to clipboard Recipe ([655aa6f](https://gitlab.corp.pingidentity.com/ux/pingux/commit/655aa6f4083f71116f6e39bd37ad75cdc08e47ac))
|
45
|
+
|
46
|
+
|
47
|
+
|
48
|
+
|
49
|
+
|
50
|
+
# [1.0.0-alpha.7](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.6...@pingux/astro@1.0.0-alpha.7) (2021-12-30)
|
51
|
+
|
52
|
+
|
53
|
+
### Bug Fixes
|
54
|
+
|
55
|
+
* [UIP-5064] Upgrade lodash version to 4.17.21 ([427286a](https://gitlab.corp.pingidentity.com/ux/pingux/commit/427286a9b3bbb940f7193c793e70e66770ee4ae0))
|
56
|
+
|
57
|
+
|
58
|
+
### Features
|
59
|
+
|
60
|
+
* [UIP-5004] RadioButtonsWithLinks Recipe ([dd7f2e9](https://gitlab.corp.pingidentity.com/ux/pingux/commit/dd7f2e9f3b30e9790de289b71739323cb6cd1328))
|
61
|
+
* [UIP-5037] Add slots props to Tab Component ([a7571a2](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a7571a27568b63c4a0fffed1d9dd1ea21ba1f724))
|
62
|
+
|
63
|
+
|
64
|
+
|
65
|
+
|
66
|
+
|
67
|
+
# [1.0.0-alpha.6](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.5...@pingux/astro@1.0.0-alpha.6) (2021-12-30)
|
68
|
+
|
69
|
+
|
70
|
+
### Bug Fixes
|
71
|
+
|
72
|
+
* [UIP-4928] password field-hide default safari-edge-ie icon ([1c46ce6](https://gitlab.corp.pingidentity.com/ux/pingux/commit/1c46ce6fa4cdd7fe846f3434de3e36c65df61244))
|
73
|
+
|
74
|
+
|
75
|
+
|
76
|
+
|
77
|
+
|
78
|
+
# [1.0.0-alpha.5](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.4...@pingux/astro@1.0.0-alpha.5) (2021-12-29)
|
79
|
+
|
80
|
+
|
81
|
+
### Features
|
82
|
+
|
83
|
+
* [UIP-4918] Add File Input ([5987d40](https://gitlab.corp.pingidentity.com/ux/pingux/commit/5987d4064f8a2a54d3e81037acba17c299bea2b0))
|
84
|
+
|
85
|
+
|
86
|
+
|
87
|
+
|
88
|
+
|
89
|
+
# [1.0.0-alpha.4](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.3...@pingux/astro@1.0.0-alpha.4) (2021-12-20)
|
90
|
+
|
91
|
+
**Note:** Version bump only for package @pingux/astro
|
92
|
+
|
93
|
+
|
94
|
+
|
95
|
+
|
96
|
+
|
97
|
+
# [1.0.0-alpha.3](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.2...@pingux/astro@1.0.0-alpha.3) (2021-12-17)
|
98
|
+
|
99
|
+
**Note:** Version bump only for package @pingux/astro
|
100
|
+
|
101
|
+
|
102
|
+
|
103
|
+
|
104
|
+
|
105
|
+
# [1.0.0-alpha.2](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.1...@pingux/astro@1.0.0-alpha.2) (2021-12-17)
|
106
|
+
|
107
|
+
|
108
|
+
### Bug Fixes
|
109
|
+
|
110
|
+
* [UIP-5014] Increment and decrement buttons don't need to be focusable ([58d7b21](https://gitlab.corp.pingidentity.com/ux/pingux/commit/58d7b21f70bd47a8c381fcf557deb9b0b2da0bf7))
|
111
|
+
|
112
|
+
|
113
|
+
|
114
|
+
|
115
|
+
|
116
|
+
# [1.0.0-alpha.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.0.0-alpha.0...@pingux/astro@1.0.0-alpha.1) (2021-12-16)
|
117
|
+
|
118
|
+
**Note:** Version bump only for package @pingux/astro
|
119
|
+
|
120
|
+
|
121
|
+
|
122
|
+
|
123
|
+
|
124
|
+
# [1.0.0-alpha.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@0.42.0...@pingux/astro@1.0.0-alpha.0) (2021-12-16)
|
125
|
+
|
126
|
+
|
127
|
+
* fix!: [UIP-4912] Update Jenkins container names to match k8s config ([8edeb95](https://gitlab.corp.pingidentity.com/ux/pingux/commit/8edeb95b25adecd8e34c20fb52c6c2f0e552bc4d))
|
128
|
+
|
129
|
+
|
130
|
+
### BREAKING CHANGES
|
131
|
+
|
132
|
+
* The actual breaking change is committed in 3ee02e86f5036ae8f32832c57e43bd31dcb4f812 but Lerna doesn't respect just the ! for major version changes
|
133
|
+
|
134
|
+
|
135
|
+
|
136
|
+
|
137
|
+
|
6
138
|
# [0.42.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@0.41.0...@pingux/astro@0.42.0) (2021-12-02)
|
7
139
|
|
8
140
|
|
@@ -77,7 +77,7 @@ var collectionTypes = {
|
|
77
77
|
* which will be control expansion of the body, and 2) a Body which renders non-interactive content.
|
78
78
|
* The purpose of this component is to allow keyboard interaction
|
79
79
|
* with children passed into the Body and Header
|
80
|
-
* If a more simple implementation is desired, please consider the AccordionGroup
|
80
|
+
* If a more simple implementation is desired, please consider the AccordionGroup.
|
81
81
|
*/
|
82
82
|
|
83
83
|
exports.collectionTypes = collectionTypes;
|
@@ -108,7 +108,9 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
108
108
|
"aria-label": ariaLabel || 'Accordion',
|
109
109
|
ref: buttonRef,
|
110
110
|
sx: {
|
111
|
-
display: 'flex'
|
111
|
+
display: 'flex',
|
112
|
+
px: '0',
|
113
|
+
height: 'unset'
|
112
114
|
},
|
113
115
|
variant: "accordionHeader",
|
114
116
|
className: buttonClasses
|
@@ -14,10 +14,6 @@ exports["default"] = void 0;
|
|
14
14
|
|
15
15
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
16
16
|
|
17
|
-
var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
|
18
|
-
|
19
|
-
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
|
20
|
-
|
21
17
|
var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
|
22
18
|
|
23
19
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
@@ -38,6 +34,8 @@ var _index = require("../../index");
|
|
38
34
|
|
39
35
|
var _CopyButton = _interopRequireDefault(require("./CopyButton"));
|
40
36
|
|
37
|
+
var _useCopyToClipboard = _interopRequireDefault(require("../../hooks/useCopyToClipboard"));
|
38
|
+
|
41
39
|
var _react2 = require("@emotion/react");
|
42
40
|
|
43
41
|
var TooltipWrapper = function TooltipWrapper(_ref) {
|
@@ -100,75 +98,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
100
98
|
|
101
99
|
return undefined;
|
102
100
|
}, [isCopied]);
|
103
|
-
|
104
|
-
var copyToClipboard = /*#__PURE__*/function () {
|
105
|
-
var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
|
106
|
-
var textArea, isSuccessful;
|
107
|
-
return _regenerator["default"].wrap(function _callee$(_context) {
|
108
|
-
while (1) {
|
109
|
-
switch (_context.prev = _context.next) {
|
110
|
-
case 0:
|
111
|
-
_context.prev = 0;
|
112
|
-
|
113
|
-
if (!navigator.clipboard) {
|
114
|
-
_context.next = 7;
|
115
|
-
break;
|
116
|
-
}
|
117
|
-
|
118
|
-
_context.next = 4;
|
119
|
-
return navigator.clipboard.writeText(value);
|
120
|
-
|
121
|
-
case 4:
|
122
|
-
setIsCopied(true);
|
123
|
-
_context.next = 20;
|
124
|
-
break;
|
125
|
-
|
126
|
-
case 7:
|
127
|
-
// Workaround for copying in insecure origin
|
128
|
-
textArea = document.createElement('textarea');
|
129
|
-
textArea.value = value;
|
130
|
-
textArea.style.position = 'fixed';
|
131
|
-
document.body.appendChild(textArea);
|
132
|
-
textArea.focus();
|
133
|
-
textArea.select();
|
134
|
-
isSuccessful = document.execCommand('copy');
|
135
|
-
textArea.remove();
|
136
|
-
|
137
|
-
if (!isSuccessful) {
|
138
|
-
_context.next = 19;
|
139
|
-
break;
|
140
|
-
}
|
141
|
-
|
142
|
-
setIsCopied(isSuccessful);
|
143
|
-
_context.next = 20;
|
144
|
-
break;
|
145
|
-
|
146
|
-
case 19:
|
147
|
-
throw new Error('Unable to copy message');
|
148
|
-
|
149
|
-
case 20:
|
150
|
-
_context.next = 25;
|
151
|
-
break;
|
152
|
-
|
153
|
-
case 22:
|
154
|
-
_context.prev = 22;
|
155
|
-
_context.t0 = _context["catch"](0);
|
156
|
-
// eslint-disable-next-line no-console
|
157
|
-
console.error('Failed to copy: ', _context.t0);
|
158
|
-
|
159
|
-
case 25:
|
160
|
-
case "end":
|
161
|
-
return _context.stop();
|
162
|
-
}
|
163
|
-
}
|
164
|
-
}, _callee, null, [[0, 22]]);
|
165
|
-
}));
|
166
|
-
|
167
|
-
return function copyToClipboard() {
|
168
|
-
return _ref2.apply(this, arguments);
|
169
|
-
};
|
170
|
-
}();
|
171
|
-
|
101
|
+
var copyToClipboard = (0, _useCopyToClipboard["default"])(value, setIsCopied);
|
172
102
|
var content = mode === 'link' ? children : (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
|
173
103
|
variant: "quiet",
|
174
104
|
onPress: copyToClipboard,
|
@@ -0,0 +1,324 @@
|
|
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 _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
|
26
|
+
|
27
|
+
var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
|
28
|
+
|
29
|
+
var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
|
30
|
+
|
31
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
32
|
+
|
33
|
+
var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
|
34
|
+
|
35
|
+
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
36
|
+
|
37
|
+
var _url = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/url"));
|
38
|
+
|
39
|
+
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
40
|
+
|
41
|
+
var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
|
42
|
+
|
43
|
+
var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
|
44
|
+
|
45
|
+
var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
46
|
+
|
47
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
|
48
|
+
|
49
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
50
|
+
|
51
|
+
var _react = _interopRequireWildcard(require("react"));
|
52
|
+
|
53
|
+
var _visuallyHidden = require("@react-aria/visually-hidden");
|
54
|
+
|
55
|
+
var _reactDropzone = require("react-dropzone");
|
56
|
+
|
57
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
58
|
+
|
59
|
+
var _utils = require("@react-aria/utils");
|
60
|
+
|
61
|
+
var _uuid = require("uuid");
|
62
|
+
|
63
|
+
var _index = require("../../index");
|
64
|
+
|
65
|
+
var _FileItem = _interopRequireDefault(require("./FileItem"));
|
66
|
+
|
67
|
+
var _FileSelect = _interopRequireDefault(require("./FileSelect"));
|
68
|
+
|
69
|
+
var _useStatusClasses3 = _interopRequireDefault(require("../../hooks/useStatusClasses"));
|
70
|
+
|
71
|
+
var _useField2 = _interopRequireDefault(require("../../hooks/useField"));
|
72
|
+
|
73
|
+
var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
|
74
|
+
|
75
|
+
var _react2 = require("@emotion/react");
|
76
|
+
|
77
|
+
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; }
|
78
|
+
|
79
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
|
80
|
+
|
81
|
+
/**
|
82
|
+
* The FileInputField component allows users to upload one or more files by
|
83
|
+
* clicking the button or via drag and drop.
|
84
|
+
*
|
85
|
+
* We utilize [react-dropzone](https://react-dropzone.js.org/) for the drag and drop functionality.
|
86
|
+
* */
|
87
|
+
var FileInputField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
88
|
+
var defaultButtonText = props.defaultButtonText,
|
89
|
+
defaultFileList = props.defaultFileList,
|
90
|
+
uploadedFilesImperative = props.fileList,
|
91
|
+
helperText = props.helperText,
|
92
|
+
isDisabled = props.isDisabled,
|
93
|
+
isLoading = props.isLoading,
|
94
|
+
isMultiple = props.isMultiple,
|
95
|
+
onFileSelect = props.onFileSelect,
|
96
|
+
onRemove = props.onRemove,
|
97
|
+
status = props.status,
|
98
|
+
textProps = props.textProps,
|
99
|
+
others = (0, _objectWithoutProperties2["default"])(props, ["defaultButtonText", "defaultFileList", "fileList", "helperText", "isDisabled", "isLoading", "isMultiple", "onFileSelect", "onRemove", "status", "textProps"]);
|
100
|
+
|
101
|
+
var _useState = (0, _react.useState)(defaultFileList || []),
|
102
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
103
|
+
uploadedFiles = _useState2[0],
|
104
|
+
setUploadedFiles = _useState2[1];
|
105
|
+
|
106
|
+
var inputRef = (0, _react.useRef)();
|
107
|
+
/* istanbul ignore next */
|
108
|
+
|
109
|
+
(0, _react.useImperativeHandle)(ref, function () {
|
110
|
+
return inputRef.current;
|
111
|
+
});
|
112
|
+
|
113
|
+
var _useField = (0, _useField2["default"])(_objectSpread({
|
114
|
+
status: status,
|
115
|
+
isDisabled: isDisabled
|
116
|
+
}, others)),
|
117
|
+
fieldContainerProps = _useField.fieldContainerProps,
|
118
|
+
fieldControlProps = _useField.fieldControlProps,
|
119
|
+
fieldLabelProps = _useField.fieldLabelProps;
|
120
|
+
|
121
|
+
var _useVisuallyHidden = (0, _visuallyHidden.useVisuallyHidden)(),
|
122
|
+
visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
|
123
|
+
|
124
|
+
var handleFileSelect = (0, _react.useCallback)(function () {
|
125
|
+
inputRef.current.value = null;
|
126
|
+
inputRef.current.click();
|
127
|
+
}, [inputRef]);
|
128
|
+
var handleFileUpload = (0, _react.useCallback)(function (event, newFiles) {
|
129
|
+
if (onFileSelect) {
|
130
|
+
onFileSelect(event, newFiles);
|
131
|
+
}
|
132
|
+
|
133
|
+
var arrayWithNewFiles = (0, _from["default"])(newFiles);
|
134
|
+
|
135
|
+
if (!isMultiple) {
|
136
|
+
arrayWithNewFiles = (0, _slice["default"])(arrayWithNewFiles).call(arrayWithNewFiles, 0, 1);
|
137
|
+
}
|
138
|
+
|
139
|
+
var newFilesWithIdAndLink = (0, _map["default"])(arrayWithNewFiles).call(arrayWithNewFiles, function (newFile) {
|
140
|
+
return {
|
141
|
+
fileObj: newFile,
|
142
|
+
name: newFile.name,
|
143
|
+
id: (0, _uuid.v4)(),
|
144
|
+
downloadLink: _url["default"].createObjectURL(newFile),
|
145
|
+
status: _statuses["default"].DEFAULT
|
146
|
+
};
|
147
|
+
});
|
148
|
+
|
149
|
+
if (isMultiple) {
|
150
|
+
setUploadedFiles(function (prevFiles) {
|
151
|
+
var _context;
|
152
|
+
|
153
|
+
return (0, _concat["default"])(_context = []).call(_context, prevFiles, newFilesWithIdAndLink);
|
154
|
+
});
|
155
|
+
} else {
|
156
|
+
setUploadedFiles(newFilesWithIdAndLink);
|
157
|
+
}
|
158
|
+
}, [isMultiple, onFileSelect]);
|
159
|
+
var onDrop = (0, _react.useCallback)(function (acceptedFiles, fileRejections, event) {
|
160
|
+
handleFileUpload(event, acceptedFiles);
|
161
|
+
}, [handleFileUpload]);
|
162
|
+
|
163
|
+
var _useDropzone = (0, _reactDropzone.useDropzone)({
|
164
|
+
onDrop: onDrop,
|
165
|
+
noKeyboard: true,
|
166
|
+
disabled: isDisabled || isLoading
|
167
|
+
}),
|
168
|
+
getRootProps = _useDropzone.getRootProps,
|
169
|
+
getInputProps = _useDropzone.getInputProps,
|
170
|
+
isDragActive = _useDropzone.isDragActive;
|
171
|
+
|
172
|
+
var handleOnChange = (0, _react.useCallback)(function (event) {
|
173
|
+
handleFileUpload(event, event.target.files);
|
174
|
+
}, [handleFileUpload]);
|
175
|
+
var handleFileDelete = (0, _react.useCallback)(function (e, fileId) {
|
176
|
+
if (onRemove) {
|
177
|
+
onRemove(e, fileId);
|
178
|
+
}
|
179
|
+
|
180
|
+
setUploadedFiles(function (prevFiles) {
|
181
|
+
return (0, _filter["default"])(prevFiles).call(prevFiles, function (_ref) {
|
182
|
+
var id = _ref.id;
|
183
|
+
return id !== fileId;
|
184
|
+
});
|
185
|
+
});
|
186
|
+
}, [onRemove]);
|
187
|
+
var filesListNode = (0, _react.useMemo)(function () {
|
188
|
+
var filesToRender = uploadedFilesImperative || uploadedFiles;
|
189
|
+
|
190
|
+
if (!(filesToRender === null || filesToRender === void 0 ? void 0 : filesToRender.length)) {
|
191
|
+
return null;
|
192
|
+
}
|
193
|
+
|
194
|
+
return (0, _map["default"])(filesToRender).call(filesToRender, function (fileProps) {
|
195
|
+
return (0, _react2.jsx)(_FileItem["default"], (0, _extends2["default"])({
|
196
|
+
handleFileDelete: handleFileDelete,
|
197
|
+
isDisabled: isDisabled || isLoading,
|
198
|
+
key: fileProps.id,
|
199
|
+
textProps: textProps
|
200
|
+
}, fileProps));
|
201
|
+
});
|
202
|
+
}, [uploadedFilesImperative, uploadedFiles, handleFileDelete, isDisabled, isLoading, textProps]);
|
203
|
+
|
204
|
+
var _useStatusClasses = (0, _useStatusClasses3["default"])('fileInputFieldWrapper', (0, _defineProperty3["default"])({
|
205
|
+
isDragActive: isDragActive,
|
206
|
+
isLoading: isLoading
|
207
|
+
}, "is-".concat(status), true)),
|
208
|
+
classNames = _useStatusClasses.classNames;
|
209
|
+
|
210
|
+
var shouldFileSelectRender = (0, _react.useCallback)(function () {
|
211
|
+
var isFileUploaded;
|
212
|
+
|
213
|
+
if (uploadedFilesImperative) {
|
214
|
+
isFileUploaded = Boolean(uploadedFilesImperative === null || uploadedFilesImperative === void 0 ? void 0 : uploadedFilesImperative.length);
|
215
|
+
} else {
|
216
|
+
isFileUploaded = Boolean(uploadedFiles === null || uploadedFiles === void 0 ? void 0 : uploadedFiles.length);
|
217
|
+
}
|
218
|
+
|
219
|
+
return isMultiple || !isFileUploaded;
|
220
|
+
}, [uploadedFiles, uploadedFilesImperative, isMultiple]);
|
221
|
+
return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Label, fieldLabelProps), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
|
222
|
+
variant: "boxes.fileInputFieldWrapper"
|
223
|
+
}, (0, _utils.mergeProps)(fieldContainerProps, others), {
|
224
|
+
className: classNames
|
225
|
+
}, getRootProps()), (0, _react2.jsx)(_index.Input, (0, _extends2["default"])({}, (0, _utils.mergeProps)(visuallyHiddenProps, fieldControlProps, getInputProps()), {
|
226
|
+
"aria-label": "File Input",
|
227
|
+
multiple: isMultiple,
|
228
|
+
onChange: handleOnChange,
|
229
|
+
ref: inputRef,
|
230
|
+
type: "file"
|
231
|
+
})), filesListNode, shouldFileSelectRender() && (0, _react2.jsx)(_FileSelect["default"], {
|
232
|
+
buttonText: defaultButtonText,
|
233
|
+
handleFileSelect: handleFileSelect,
|
234
|
+
isDisabled: isDisabled || isLoading,
|
235
|
+
textProps: textProps
|
236
|
+
}), isLoading && (0, _react2.jsx)(_index.Loader, {
|
237
|
+
color: "active",
|
238
|
+
sx: {
|
239
|
+
position: 'absolute'
|
240
|
+
},
|
241
|
+
"data-testid": "file-input-field__loader"
|
242
|
+
})), helperText && (0, _react2.jsx)(_index.FieldHelperText, {
|
243
|
+
status: status
|
244
|
+
}, helperText));
|
245
|
+
});
|
246
|
+
FileInputField.displayName = 'FileInputField';
|
247
|
+
FileInputField.propTypes = {
|
248
|
+
/** The rendered label for the field. */
|
249
|
+
label: _propTypes["default"].node,
|
250
|
+
|
251
|
+
/** Text rendered below the input. */
|
252
|
+
helperText: _propTypes["default"].node,
|
253
|
+
|
254
|
+
/** Determines the component border status color indicator and helper text styling. */
|
255
|
+
status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
|
256
|
+
|
257
|
+
/** Default button text that will be changed on the file name once file is uploaded */
|
258
|
+
defaultButtonText: _propTypes["default"].string,
|
259
|
+
|
260
|
+
/** Defines whether input can accept multiple files or not */
|
261
|
+
isMultiple: _propTypes["default"].bool,
|
262
|
+
|
263
|
+
/** Determines whether the loading indicator is shown. */
|
264
|
+
isLoading: _propTypes["default"].bool,
|
265
|
+
|
266
|
+
/** Whether the field is disabled. */
|
267
|
+
isDisabled: _propTypes["default"].bool,
|
268
|
+
|
269
|
+
/** Array of objects for uploaded files.
|
270
|
+
* Objects should have the following structure:
|
271
|
+
*
|
272
|
+
* {
|
273
|
+
*
|
274
|
+
* fileObj: File object (optional),
|
275
|
+
*
|
276
|
+
* id: file id (required - will be returned on delete),
|
277
|
+
*
|
278
|
+
* name: file name that will be displayed (required - will be displayed),
|
279
|
+
*
|
280
|
+
* downloadLink: link for the file download (optional),
|
281
|
+
*
|
282
|
+
* status: file status (if error - icon of the
|
283
|
+
* component will be red icon and warning sign)(optional),
|
284
|
+
*
|
285
|
+
* }
|
286
|
+
* */
|
287
|
+
fileList: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
288
|
+
fileObj: _propTypes["default"].shape({}),
|
289
|
+
id: _propTypes["default"].string.required,
|
290
|
+
name: _propTypes["default"].string.required,
|
291
|
+
downloadLink: _propTypes["default"].string,
|
292
|
+
status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
|
293
|
+
})),
|
294
|
+
|
295
|
+
/** Default array of objects for uploaded files. */
|
296
|
+
defaultFileList: _propTypes["default"].arrayOf(_propTypes["default"].shape({
|
297
|
+
fileObj: _propTypes["default"].shape({}),
|
298
|
+
id: _propTypes["default"].string.required,
|
299
|
+
name: _propTypes["default"].string.required,
|
300
|
+
downloadLink: _propTypes["default"].string,
|
301
|
+
status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"]))
|
302
|
+
})),
|
303
|
+
|
304
|
+
/** The handler that is called when the input files is uploaded.
|
305
|
+
*
|
306
|
+
* `(event, files) => void`
|
307
|
+
* */
|
308
|
+
onFileSelect: _propTypes["default"].func,
|
309
|
+
|
310
|
+
/** The handler that is called when an uploaded file got removed.
|
311
|
+
*
|
312
|
+
* `(fileId) => void`
|
313
|
+
* */
|
314
|
+
onRemove: _propTypes["default"].func,
|
315
|
+
|
316
|
+
/** These props will be spread to the field text component. */
|
317
|
+
textProps: _propTypes["default"].shape({})
|
318
|
+
};
|
319
|
+
FileInputField.defaultProps = {
|
320
|
+
defaultButtonText: 'Select a file',
|
321
|
+
status: _statuses["default"].DEFAULT
|
322
|
+
};
|
323
|
+
var _default = FileInputField;
|
324
|
+
exports["default"] = _default;
|