@instructure/ui-file-drop 10.13.0 → 10.13.1-pr-snapshot-1741357986437
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 +8 -0
- package/lib/FileDrop/FileDropLocator.js +3 -3
- package/lib/FileDrop/index.js +13 -16
- package/lib/FileDrop/props.js +2 -2
- package/package.json +15 -15
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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
|
+
## [10.13.1-pr-snapshot-1741357986437](https://github.com/instructure/instructure-ui/compare/v10.13.0...v10.13.1-pr-snapshot-1741357986437) (2025-03-07)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-file-drop
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
# [10.13.0](https://github.com/instructure/instructure-ui/compare/v10.12.0...v10.13.0) (2025-03-06)
|
|
7
15
|
|
|
8
16
|
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.FileDropLocator = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _uiTestLocator = require("@instructure/ui-test-locator");
|
|
8
8
|
var _index = require("./index");
|
|
9
9
|
/*
|
|
10
10
|
* The MIT License (MIT)
|
|
@@ -30,8 +30,8 @@ var _index = require("./index");
|
|
|
30
30
|
* SOFTWARE.
|
|
31
31
|
*/
|
|
32
32
|
|
|
33
|
-
const fileInputLocator = (0,
|
|
34
|
-
const FileDropLocator = exports.FileDropLocator = (0,
|
|
33
|
+
const fileInputLocator = (0, _uiTestLocator.locator)('input[type="file"]');
|
|
34
|
+
const FileDropLocator = exports.FileDropLocator = (0, _uiTestLocator.locator)(_index.FileDrop.selector, {
|
|
35
35
|
// the file input isn't visible in this component,
|
|
36
36
|
// so we need special locator methods to interact w/ it
|
|
37
37
|
click: async (element, init, options) => {
|
package/lib/FileDrop/index.js
CHANGED
|
@@ -10,13 +10,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _keycode = _interopRequireDefault(require("keycode"));
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
18
|
-
var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
|
|
19
|
-
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
13
|
+
var _uiFormField = require("@instructure/ui-form-field");
|
|
14
|
+
var _uiView = require("@instructure/ui-view");
|
|
15
|
+
var _uiTestable = require("@instructure/ui-testable");
|
|
16
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
20
17
|
var _accepts = require("./utils/accepts");
|
|
21
18
|
var _getEventFiles = require("./utils/getEventFiles");
|
|
22
19
|
var _emotion = require("@instructure/emotion");
|
|
@@ -58,7 +55,7 @@ function keyEventIsClickButton(e) {
|
|
|
58
55
|
category: components
|
|
59
56
|
---
|
|
60
57
|
**/
|
|
61
|
-
let FileDrop = exports.FileDrop = (_dec = (0,
|
|
58
|
+
let FileDrop = exports.FileDrop = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _uiTestable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_FileDrop = class FileDrop extends _react.Component {
|
|
62
59
|
constructor(props) {
|
|
63
60
|
super(props);
|
|
64
61
|
this.makeStyleProps = () => {
|
|
@@ -221,7 +218,7 @@ let FileDrop = exports.FileDrop = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
221
218
|
return this.interaction === 'disabled' || this.interaction === 'readonly';
|
|
222
219
|
}
|
|
223
220
|
get interaction() {
|
|
224
|
-
return (0,
|
|
221
|
+
return (0, _uiReactUtils.getInteraction)({
|
|
225
222
|
props: this.props
|
|
226
223
|
});
|
|
227
224
|
}
|
|
@@ -277,7 +274,7 @@ let FileDrop = exports.FileDrop = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
277
274
|
}
|
|
278
275
|
renderLabel() {
|
|
279
276
|
const renderLabel = this.props.renderLabel;
|
|
280
|
-
return (0,
|
|
277
|
+
return (0, _uiReactUtils.callRenderProp)(renderLabel, {
|
|
281
278
|
isDragAccepted: this.state.isDragAccepted,
|
|
282
279
|
isDragRejected: this.state.isDragRejected,
|
|
283
280
|
interaction: this.interaction
|
|
@@ -298,7 +295,7 @@ let FileDrop = exports.FileDrop = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
298
295
|
props = (0, _objectWithoutProperties2.default)(_this$props7, _excluded);
|
|
299
296
|
const id = this.props.id || this.defaultId;
|
|
300
297
|
const focusColor = this.state.isDragRejected || this.invalid ? 'danger' : void 0;
|
|
301
|
-
return (0, _emotion.jsx)(
|
|
298
|
+
return (0, _emotion.jsx)(_uiView.View, {
|
|
302
299
|
display: display,
|
|
303
300
|
position: "relative" // contain visually hidden file input element
|
|
304
301
|
,
|
|
@@ -315,7 +312,7 @@ let FileDrop = exports.FileDrop = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
315
312
|
onDragOver: this.handleDragOver,
|
|
316
313
|
onDragLeave: this.handleDragLeave,
|
|
317
314
|
onDrop: this.handleChange
|
|
318
|
-
}, (0, _emotion.jsx)(
|
|
315
|
+
}, (0, _emotion.jsx)(_uiView.View, {
|
|
319
316
|
display: "block",
|
|
320
317
|
position: "relative",
|
|
321
318
|
withFocusOutline: this.state.isFocused,
|
|
@@ -327,9 +324,9 @@ let FileDrop = exports.FileDrop = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
327
324
|
css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.fileDropLabelContent
|
|
328
325
|
}, (0, _emotion.jsx)("span", {
|
|
329
326
|
css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.fileDropLayout
|
|
330
|
-
}, (0, _emotion.jsx)(
|
|
327
|
+
}, (0, _emotion.jsx)(_uiView.View, {
|
|
331
328
|
height: height
|
|
332
|
-
}, this.renderLabel()))))), (0, _emotion.jsx)("input", Object.assign({}, (0,
|
|
329
|
+
}, this.renderLabel()))))), (0, _emotion.jsx)("input", Object.assign({}, (0, _uiReactUtils.passthroughProps)(props), {
|
|
333
330
|
onClick: this.handleClick,
|
|
334
331
|
type: "file",
|
|
335
332
|
css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.fileDropInput,
|
|
@@ -345,10 +342,10 @@ let FileDrop = exports.FileDrop = (_dec = (0, _withDeterministicId.withDetermini
|
|
|
345
342
|
"aria-describedby": this.hasMessages ? this.messagesId : void 0,
|
|
346
343
|
"aria-invalid": this.invalid,
|
|
347
344
|
disabled: this.functionallyDisabled
|
|
348
|
-
})), this.hasMessages ? (0, _emotion.jsx)(
|
|
345
|
+
})), this.hasMessages ? (0, _emotion.jsx)(_uiView.View, {
|
|
349
346
|
display: "block",
|
|
350
347
|
margin: "small 0 0"
|
|
351
|
-
}, (0, _emotion.jsx)(
|
|
348
|
+
}, (0, _emotion.jsx)(_uiFormField.FormFieldMessages, {
|
|
352
349
|
id: this.messagesId,
|
|
353
350
|
messages: this.props.messages
|
|
354
351
|
})) : null);
|
package/lib/FileDrop/props.js
CHANGED
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.propTypes = exports.allowedProps = void 0;
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var
|
|
9
|
+
var _uiFormField = require("@instructure/ui-form-field");
|
|
10
10
|
var _emotion = require("@instructure/emotion");
|
|
11
11
|
/*
|
|
12
12
|
* The MIT License (MIT)
|
|
@@ -36,7 +36,7 @@ const propTypes = exports.propTypes = {
|
|
|
36
36
|
id: _propTypes.default.string,
|
|
37
37
|
renderLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
|
|
38
38
|
accept: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
|
|
39
|
-
messages: _propTypes.default.arrayOf(
|
|
39
|
+
messages: _propTypes.default.arrayOf(_uiFormField.FormPropTypes.message),
|
|
40
40
|
onClick: _propTypes.default.func,
|
|
41
41
|
onDrop: _propTypes.default.func,
|
|
42
42
|
onDropAccepted: _propTypes.default.func,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-file-drop",
|
|
3
|
-
"version": "10.13.
|
|
3
|
+
"version": "10.13.1-pr-snapshot-1741357986437",
|
|
4
4
|
"description": "A flexible facade for an HTML file input",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -24,24 +24,24 @@
|
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@babel/runtime": "^7.26.0",
|
|
27
|
-
"@instructure/console": "10.13.
|
|
28
|
-
"@instructure/emotion": "10.13.
|
|
29
|
-
"@instructure/shared-types": "10.13.
|
|
30
|
-
"@instructure/ui-color-utils": "10.13.
|
|
31
|
-
"@instructure/ui-form-field": "10.13.
|
|
32
|
-
"@instructure/ui-react-utils": "10.13.
|
|
33
|
-
"@instructure/ui-testable": "10.13.
|
|
34
|
-
"@instructure/ui-utils": "10.13.
|
|
35
|
-
"@instructure/ui-view": "10.13.
|
|
36
|
-
"@instructure/uid": "10.13.
|
|
27
|
+
"@instructure/console": "10.13.1-pr-snapshot-1741357986437",
|
|
28
|
+
"@instructure/emotion": "10.13.1-pr-snapshot-1741357986437",
|
|
29
|
+
"@instructure/shared-types": "10.13.1-pr-snapshot-1741357986437",
|
|
30
|
+
"@instructure/ui-color-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
31
|
+
"@instructure/ui-form-field": "10.13.1-pr-snapshot-1741357986437",
|
|
32
|
+
"@instructure/ui-react-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
33
|
+
"@instructure/ui-testable": "10.13.1-pr-snapshot-1741357986437",
|
|
34
|
+
"@instructure/ui-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
35
|
+
"@instructure/ui-view": "10.13.1-pr-snapshot-1741357986437",
|
|
36
|
+
"@instructure/uid": "10.13.1-pr-snapshot-1741357986437",
|
|
37
37
|
"keycode": "^2",
|
|
38
38
|
"prop-types": "^15.8.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@instructure/ui-babel-preset": "10.13.
|
|
42
|
-
"@instructure/ui-test-locator": "10.13.
|
|
43
|
-
"@instructure/ui-test-utils": "10.13.
|
|
44
|
-
"@instructure/ui-themes": "10.13.
|
|
41
|
+
"@instructure/ui-babel-preset": "10.13.1-pr-snapshot-1741357986437",
|
|
42
|
+
"@instructure/ui-test-locator": "10.13.1-pr-snapshot-1741357986437",
|
|
43
|
+
"@instructure/ui-test-utils": "10.13.1-pr-snapshot-1741357986437",
|
|
44
|
+
"@instructure/ui-themes": "10.13.1-pr-snapshot-1741357986437"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"react": ">=16.14 <=18"
|