@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.
Files changed (60) hide show
  1. package/CHANGELOG.md +132 -0
  2. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js +1 -1
  3. package/lib/cjs/components/AccordionItem/AccordionItem.js +3 -1
  4. package/lib/cjs/components/CopyText/CopyText.js +3 -73
  5. package/lib/cjs/components/FileInputField/FileInputField.js +324 -0
  6. package/lib/cjs/components/FileInputField/FileInputField.stories.js +250 -0
  7. package/lib/cjs/components/FileInputField/FileInputField.test.js +227 -0
  8. package/lib/cjs/components/FileInputField/FileItem.js +125 -0
  9. package/lib/cjs/components/FileInputField/FileSelect.js +48 -0
  10. package/lib/cjs/components/FileInputField/index.js +18 -0
  11. package/lib/cjs/components/ListView/ListView.js +4 -3
  12. package/lib/cjs/components/ListViewItem/ListViewItem.js +3 -6
  13. package/lib/cjs/components/NumberField/NumberField.js +4 -2
  14. package/lib/cjs/components/NumberField/NumberField.test.js +15 -0
  15. package/lib/cjs/components/Tab/Tab.js +11 -4
  16. package/lib/cjs/components/Tabs/Tabs.js +7 -1
  17. package/lib/cjs/components/Tabs/Tabs.stories.js +60 -6
  18. package/lib/cjs/components/Tabs/Tabs.test.js +78 -15
  19. package/lib/cjs/hooks/useCopyToClipboard/index.js +18 -0
  20. package/lib/cjs/hooks/useCopyToClipboard/useCopyToClipboard.js +83 -0
  21. package/lib/cjs/hooks/useCopyToClipboard/useCopyToClipboard.test.js +79 -0
  22. package/lib/cjs/index.js +10 -0
  23. package/lib/cjs/recipes/CopyToClipboard.stories.js +45 -0
  24. package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js +146 -0
  25. package/lib/cjs/recipes/RowLineChart.stories.js +6 -1
  26. package/lib/cjs/styles/forms/input.js +11 -0
  27. package/lib/cjs/styles/variants/accordion.js +2 -2
  28. package/lib/cjs/styles/variants/boxes.js +27 -0
  29. package/lib/cjs/styles/variants/buttons.js +20 -0
  30. package/lib/cjs/styles/variants/tabs.js +1 -0
  31. package/lib/components/AccordionGridGroup/AccordionGridGroup.js +1 -1
  32. package/lib/components/AccordionItem/AccordionItem.js +3 -1
  33. package/lib/components/CopyText/CopyText.js +2 -71
  34. package/lib/components/FileInputField/FileInputField.js +280 -0
  35. package/lib/components/FileInputField/FileInputField.stories.js +206 -0
  36. package/lib/components/FileInputField/FileInputField.test.js +187 -0
  37. package/lib/components/FileInputField/FileItem.js +100 -0
  38. package/lib/components/FileInputField/FileSelect.js +31 -0
  39. package/lib/components/FileInputField/index.js +1 -0
  40. package/lib/components/ListView/ListView.js +4 -3
  41. package/lib/components/ListViewItem/ListViewItem.js +3 -5
  42. package/lib/components/NumberField/NumberField.js +4 -2
  43. package/lib/components/NumberField/NumberField.test.js +9 -0
  44. package/lib/components/Tab/Tab.js +11 -4
  45. package/lib/components/Tabs/Tabs.js +7 -1
  46. package/lib/components/Tabs/Tabs.stories.js +56 -4
  47. package/lib/components/Tabs/Tabs.test.js +78 -15
  48. package/lib/hooks/useCopyToClipboard/index.js +1 -0
  49. package/lib/hooks/useCopyToClipboard/useCopyToClipboard.js +69 -0
  50. package/lib/hooks/useCopyToClipboard/useCopyToClipboard.test.js +64 -0
  51. package/lib/index.js +1 -0
  52. package/lib/recipes/CopyToClipboard.stories.js +25 -0
  53. package/lib/recipes/RadioButtonsWithLinks.stories.js +120 -0
  54. package/lib/recipes/RowLineChart.stories.js +6 -1
  55. package/lib/styles/forms/input.js +11 -0
  56. package/lib/styles/variants/accordion.js +2 -2
  57. package/lib/styles/variants/boxes.js +27 -0
  58. package/lib/styles/variants/buttons.js +20 -0
  59. package/lib/styles/variants/tabs.js +1 -0
  60. 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;