@instructure/ui-file-drop 10.16.0 → 10.16.1-pr-snapshot-1744893671793

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 (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/es/FileDrop/__new-tests__/FileDrop.test.js +16 -15
  3. package/es/FileDrop/index.js +58 -49
  4. package/lib/FileDrop/__new-tests__/FileDrop.test.js +17 -17
  5. package/lib/FileDrop/index.js +56 -49
  6. package/package.json +14 -14
  7. package/src/FileDrop/__new-tests__/FileDrop.test.tsx +0 -1
  8. package/src/FileDrop/index.tsx +3 -3
  9. package/tsconfig.build.tsbuildinfo +1 -1
  10. package/types/FileDrop/__new-tests__/FileDrop.test.d.ts.map +1 -1
  11. package/types/FileDrop/index.d.ts +2 -4
  12. package/types/FileDrop/index.d.ts.map +1 -1
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.16.1-pr-snapshot-1744893671793](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-pr-snapshot-1744893671793) (2025-04-17)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-file-drop
9
+
10
+
11
+
12
+
13
+
6
14
  # [10.16.0](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.16.0) (2025-04-11)
7
15
 
8
16
 
package/es/FileDrop/__new-tests__/FileDrop.test.js CHANGED
@@ -23,16 +23,16 @@ var _FileDrop, _FileDrop2, _FileDrop3, _FileDrop4, _FileDrop5, _FileDrop6, _sect
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render } from '@testing-library/react';
28
27
  import { vi } from 'vitest';
29
28
  import { runAxeCheck } from '@instructure/ui-axe-check';
30
29
  import '@testing-library/jest-dom';
31
30
  import { FileDrop } from '../index';
31
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
32
32
  describe('<FileDrop/>', () => {
33
33
  it('should focus the input when focus is called', async () => {
34
34
  let inputEl;
35
- const _render = render(/*#__PURE__*/React.createElement(FileDrop, {
35
+ const _render = render(_jsx(FileDrop, {
36
36
  renderLabel: "filedrop",
37
37
  inputRef: el => {
38
38
  inputEl = el;
@@ -45,7 +45,7 @@ describe('<FileDrop/>', () => {
45
45
  });
46
46
  it('should provide an inputRef prop', async () => {
47
47
  const inputRef = vi.fn();
48
- const _render2 = render(/*#__PURE__*/React.createElement(FileDrop, {
48
+ const _render2 = render(_jsx(FileDrop, {
49
49
  renderLabel: "filedrop",
50
50
  inputRef: inputRef
51
51
  })),
@@ -54,7 +54,7 @@ describe('<FileDrop/>', () => {
54
54
  expect(inputRef).toHaveBeenCalledWith(input);
55
55
  });
56
56
  it('should render', async () => {
57
- const _render3 = render(_FileDrop || (_FileDrop = /*#__PURE__*/React.createElement(FileDrop, {
57
+ const _render3 = render(_FileDrop || (_FileDrop = _jsx(FileDrop, {
58
58
  renderLabel: "fake label"
59
59
  }))),
60
60
  container = _render3.container;
@@ -62,7 +62,7 @@ describe('<FileDrop/>', () => {
62
62
  expect(fileDrop).toBeInTheDocument();
63
63
  });
64
64
  it('should meet a11y standards', async () => {
65
- const _render4 = render(_FileDrop2 || (_FileDrop2 = /*#__PURE__*/React.createElement(FileDrop, {
65
+ const _render4 = render(_FileDrop2 || (_FileDrop2 = _jsx(FileDrop, {
66
66
  renderLabel: "fake label"
67
67
  }))),
68
68
  container = _render4.container;
@@ -71,7 +71,7 @@ describe('<FileDrop/>', () => {
71
71
  });
72
72
  describe('interactions', async () => {
73
73
  it('should functionally disable the input if `interaction` is set to disabled', async () => {
74
- const _render5 = render(_FileDrop3 || (_FileDrop3 = /*#__PURE__*/React.createElement(FileDrop, {
74
+ const _render5 = render(_FileDrop3 || (_FileDrop3 = _jsx(FileDrop, {
75
75
  renderLabel: "Some label",
76
76
  interaction: "disabled"
77
77
  }))),
@@ -80,7 +80,7 @@ describe('<FileDrop/>', () => {
80
80
  expect(fileDrop).toBeDisabled();
81
81
  });
82
82
  it('should functionally disable the input if `disabled` is set', async () => {
83
- const _render6 = render(_FileDrop4 || (_FileDrop4 = /*#__PURE__*/React.createElement(FileDrop, {
83
+ const _render6 = render(_FileDrop4 || (_FileDrop4 = _jsx(FileDrop, {
84
84
  renderLabel: "Some label",
85
85
  disabled: true
86
86
  }))),
@@ -89,7 +89,7 @@ describe('<FileDrop/>', () => {
89
89
  expect(fileDrop).toBeDisabled();
90
90
  });
91
91
  it('should functionally disable the input if `interaction` is set to readonly', async () => {
92
- const _render7 = render(_FileDrop5 || (_FileDrop5 = /*#__PURE__*/React.createElement(FileDrop, {
92
+ const _render7 = render(_FileDrop5 || (_FileDrop5 = _jsx(FileDrop, {
93
93
  renderLabel: "Some label",
94
94
  interaction: "readonly"
95
95
  }))),
@@ -98,7 +98,7 @@ describe('<FileDrop/>', () => {
98
98
  expect(fileDrop).toBeDisabled();
99
99
  });
100
100
  it('should functionally disable the input if `readOnly` is set', async () => {
101
- const _render8 = render(_FileDrop6 || (_FileDrop6 = /*#__PURE__*/React.createElement(FileDrop, {
101
+ const _render8 = render(_FileDrop6 || (_FileDrop6 = _jsx(FileDrop, {
102
102
  renderLabel: "Some label",
103
103
  readOnly: true
104
104
  }))),
@@ -109,10 +109,11 @@ describe('<FileDrop/>', () => {
109
109
  });
110
110
  describe('label handling', async () => {
111
111
  it('renders element label directly', async () => {
112
- const label = _section || (_section = /*#__PURE__*/React.createElement("section", {
113
- id: "test-id"
114
- }, "This is an element label"));
115
- const _render9 = render(/*#__PURE__*/React.createElement(FileDrop, {
112
+ const label = _section || (_section = _jsx("section", {
113
+ id: "test-id",
114
+ children: "This is an element label"
115
+ }));
116
+ const _render9 = render(_jsx(FileDrop, {
116
117
  renderLabel: label
117
118
  })),
118
119
  container = _render9.container;
@@ -127,7 +128,7 @@ describe('<FileDrop/>', () => {
127
128
  };
128
129
  return null;
129
130
  };
130
- render(/*#__PURE__*/React.createElement(FileDrop, {
131
+ render(_jsx(FileDrop, {
131
132
  renderLabel: label
132
133
  }));
133
134
  expect(typeof result.isDragAccepted).toBe('boolean');
@@ -141,7 +142,7 @@ describe('<FileDrop/>', () => {
141
142
  };
142
143
  return null;
143
144
  };
144
- render(/*#__PURE__*/React.createElement(FileDrop, {
145
+ render(_jsx(FileDrop, {
145
146
  renderLabel: label
146
147
  }));
147
148
  expect(result.isDragAccepted).toBe(false);
package/es/FileDrop/index.js CHANGED
@@ -25,8 +25,8 @@ var _dec, _dec2, _dec3, _class, _FileDrop;
25
25
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
26
26
  * SOFTWARE.
27
27
  */
28
- /** @jsx jsx */
29
- import React, { Component } from 'react';
28
+
29
+ import { Component } from 'react';
30
30
  import keycode from 'keycode';
31
31
  import { FormFieldMessages } from '@instructure/ui-form-field';
32
32
  import { View } from '@instructure/ui-view';
@@ -34,10 +34,11 @@ import { testable } from '@instructure/ui-testable';
34
34
  import { callRenderProp, passthroughProps, getInteraction, withDeterministicId } from '@instructure/ui-react-utils';
35
35
  import { accepts, getAcceptList } from './utils/accepts';
36
36
  import { getEventFiles } from './utils/getEventFiles';
37
- import { withStyle, jsx } from '@instructure/emotion';
37
+ import { withStyle } from '@instructure/emotion';
38
38
  import generateStyle from './styles';
39
39
  import generateComponentTheme from './theme';
40
40
  import { propTypes, allowedProps } from './props';
41
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
41
42
  function keyEventIsClickButton(e) {
42
43
  return e.keyCode === keycode.codes.space || e.keyCode === keycode.codes.enter;
43
44
  }
@@ -293,7 +294,7 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
293
294
  props = _objectWithoutProperties(_this$props7, _excluded);
294
295
  const id = this.props.id || this.defaultId;
295
296
  const focusColor = this.state.isDragRejected || this.invalid ? 'danger' : void 0;
296
- return jsx(View, {
297
+ return _jsxs(View, {
297
298
  display: display,
298
299
  position: "relative" // contain visually hidden file input element
299
300
  ,
@@ -302,51 +303,59 @@ let FileDrop = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
302
303
  maxWidth: maxWidth,
303
304
  margin: margin,
304
305
  height: height,
305
- elementRef: this.handleElementRef
306
- }, jsx("label", {
307
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.fileDropLabel,
308
- htmlFor: id,
309
- onDragEnter: this.handleDragEnter,
310
- onDragOver: this.handleDragOver,
311
- onDragLeave: this.handleDragLeave,
312
- onDrop: this.handleChange
313
- }, jsx(View, {
314
- display: "block",
315
- position: "relative",
316
- withFocusOutline: this.state.isFocused,
317
- borderRadius: "large",
318
- focusColor: focusColor,
319
- height: height,
320
- focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$fileDropLayou = styles.fileDropLayout) === null || _styles$fileDropLayou === void 0 ? void 0 : _styles$fileDropLayou.borderRadius)
321
- }, jsx("span", {
322
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.fileDropLabelContent
323
- }, jsx("span", {
324
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.fileDropLayout
325
- }, jsx(View, {
326
- height: height
327
- }, this.renderLabel()))))), jsx("input", Object.assign({}, passthroughProps(props), {
328
- onClick: this.handleClick,
329
- type: "file",
330
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.fileDropInput,
331
- id: id,
332
- ref: this.handleRef,
333
- onFocus: this.handleFocus,
334
- onBlur: this.handleBlur,
335
- onKeyDown: this.handleKeyDown,
336
- onKeyUp: this.handleKeyUp,
337
- multiple: this.props.shouldAllowMultiple,
338
- accept: this.acceptStr(),
339
- onChange: this.handleChange,
340
- "aria-describedby": this.hasMessages ? this.messagesId : void 0,
341
- "aria-invalid": this.invalid,
342
- disabled: this.functionallyDisabled
343
- })), this.hasMessages ? jsx(View, {
344
- display: "block",
345
- margin: "small 0 0"
346
- }, jsx(FormFieldMessages, {
347
- id: this.messagesId,
348
- messages: this.props.messages
349
- })) : null);
306
+ elementRef: this.handleElementRef,
307
+ children: [_jsx("label", {
308
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.fileDropLabel,
309
+ htmlFor: id,
310
+ onDragEnter: this.handleDragEnter,
311
+ onDragOver: this.handleDragOver,
312
+ onDragLeave: this.handleDragLeave,
313
+ onDrop: this.handleChange,
314
+ children: _jsx(View, {
315
+ display: "block",
316
+ position: "relative",
317
+ withFocusOutline: this.state.isFocused,
318
+ borderRadius: "large",
319
+ focusColor: focusColor,
320
+ height: height,
321
+ focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$fileDropLayou = styles.fileDropLayout) === null || _styles$fileDropLayou === void 0 ? void 0 : _styles$fileDropLayou.borderRadius),
322
+ children: _jsx("span", {
323
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.fileDropLabelContent,
324
+ children: _jsx("span", {
325
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.fileDropLayout,
326
+ children: _jsx(View, {
327
+ height: height,
328
+ children: this.renderLabel()
329
+ })
330
+ })
331
+ })
332
+ })
333
+ }), _jsx("input", {
334
+ ...passthroughProps(props),
335
+ onClick: this.handleClick,
336
+ type: "file",
337
+ css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.fileDropInput,
338
+ id: id,
339
+ ref: this.handleRef,
340
+ onFocus: this.handleFocus,
341
+ onBlur: this.handleBlur,
342
+ onKeyDown: this.handleKeyDown,
343
+ onKeyUp: this.handleKeyUp,
344
+ multiple: this.props.shouldAllowMultiple,
345
+ accept: this.acceptStr(),
346
+ onChange: this.handleChange,
347
+ "aria-describedby": this.hasMessages ? this.messagesId : void 0,
348
+ "aria-invalid": this.invalid,
349
+ disabled: this.functionallyDisabled
350
+ }), this.hasMessages ? _jsx(View, {
351
+ display: "block",
352
+ margin: "small 0 0",
353
+ children: _jsx(FormFieldMessages, {
354
+ id: this.messagesId,
355
+ messages: this.props.messages
356
+ })
357
+ }) : null]
358
+ });
350
359
  }
351
360
  }, _FileDrop.displayName = "FileDrop", _FileDrop.componentId = 'FileDrop', _FileDrop.propTypes = propTypes, _FileDrop.allowedProps = allowedProps, _FileDrop.defaultProps = {
352
361
  onClick: function (_e) {},
package/lib/FileDrop/__new-tests__/FileDrop.test.js CHANGED
@@ -1,12 +1,11 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
3
+ var _react = require("@testing-library/react");
6
4
  var _vitest = require("vitest");
7
5
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
8
6
  require("@testing-library/jest-dom");
9
7
  var _index = require("../index");
8
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
10
9
  var _FileDrop, _FileDrop2, _FileDrop3, _FileDrop4, _FileDrop5, _FileDrop6, _section;
11
10
  /*
12
11
  * The MIT License (MIT)
@@ -34,7 +33,7 @@ var _FileDrop, _FileDrop2, _FileDrop3, _FileDrop4, _FileDrop5, _FileDrop6, _sect
34
33
  describe('<FileDrop/>', () => {
35
34
  it('should focus the input when focus is called', async () => {
36
35
  let inputEl;
37
- const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.FileDrop, {
36
+ const _render = (0, _react.render)((0, _jsxRuntime.jsx)(_index.FileDrop, {
38
37
  renderLabel: "filedrop",
39
38
  inputRef: el => {
40
39
  inputEl = el;
@@ -47,7 +46,7 @@ describe('<FileDrop/>', () => {
47
46
  });
48
47
  it('should provide an inputRef prop', async () => {
49
48
  const inputRef = _vitest.vi.fn();
50
- const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.FileDrop, {
49
+ const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.FileDrop, {
51
50
  renderLabel: "filedrop",
52
51
  inputRef: inputRef
53
52
  })),
@@ -56,7 +55,7 @@ describe('<FileDrop/>', () => {
56
55
  expect(inputRef).toHaveBeenCalledWith(input);
57
56
  });
58
57
  it('should render', async () => {
59
- const _render3 = (0, _react2.render)(_FileDrop || (_FileDrop = /*#__PURE__*/_react.default.createElement(_index.FileDrop, {
58
+ const _render3 = (0, _react.render)(_FileDrop || (_FileDrop = (0, _jsxRuntime.jsx)(_index.FileDrop, {
60
59
  renderLabel: "fake label"
61
60
  }))),
62
61
  container = _render3.container;
@@ -64,7 +63,7 @@ describe('<FileDrop/>', () => {
64
63
  expect(fileDrop).toBeInTheDocument();
65
64
  });
66
65
  it('should meet a11y standards', async () => {
67
- const _render4 = (0, _react2.render)(_FileDrop2 || (_FileDrop2 = /*#__PURE__*/_react.default.createElement(_index.FileDrop, {
66
+ const _render4 = (0, _react.render)(_FileDrop2 || (_FileDrop2 = (0, _jsxRuntime.jsx)(_index.FileDrop, {
68
67
  renderLabel: "fake label"
69
68
  }))),
70
69
  container = _render4.container;
@@ -73,7 +72,7 @@ describe('<FileDrop/>', () => {
73
72
  });
74
73
  describe('interactions', async () => {
75
74
  it('should functionally disable the input if `interaction` is set to disabled', async () => {
76
- const _render5 = (0, _react2.render)(_FileDrop3 || (_FileDrop3 = /*#__PURE__*/_react.default.createElement(_index.FileDrop, {
75
+ const _render5 = (0, _react.render)(_FileDrop3 || (_FileDrop3 = (0, _jsxRuntime.jsx)(_index.FileDrop, {
77
76
  renderLabel: "Some label",
78
77
  interaction: "disabled"
79
78
  }))),
@@ -82,7 +81,7 @@ describe('<FileDrop/>', () => {
82
81
  expect(fileDrop).toBeDisabled();
83
82
  });
84
83
  it('should functionally disable the input if `disabled` is set', async () => {
85
- const _render6 = (0, _react2.render)(_FileDrop4 || (_FileDrop4 = /*#__PURE__*/_react.default.createElement(_index.FileDrop, {
84
+ const _render6 = (0, _react.render)(_FileDrop4 || (_FileDrop4 = (0, _jsxRuntime.jsx)(_index.FileDrop, {
86
85
  renderLabel: "Some label",
87
86
  disabled: true
88
87
  }))),
@@ -91,7 +90,7 @@ describe('<FileDrop/>', () => {
91
90
  expect(fileDrop).toBeDisabled();
92
91
  });
93
92
  it('should functionally disable the input if `interaction` is set to readonly', async () => {
94
- const _render7 = (0, _react2.render)(_FileDrop5 || (_FileDrop5 = /*#__PURE__*/_react.default.createElement(_index.FileDrop, {
93
+ const _render7 = (0, _react.render)(_FileDrop5 || (_FileDrop5 = (0, _jsxRuntime.jsx)(_index.FileDrop, {
95
94
  renderLabel: "Some label",
96
95
  interaction: "readonly"
97
96
  }))),
@@ -100,7 +99,7 @@ describe('<FileDrop/>', () => {
100
99
  expect(fileDrop).toBeDisabled();
101
100
  });
102
101
  it('should functionally disable the input if `readOnly` is set', async () => {
103
- const _render8 = (0, _react2.render)(_FileDrop6 || (_FileDrop6 = /*#__PURE__*/_react.default.createElement(_index.FileDrop, {
102
+ const _render8 = (0, _react.render)(_FileDrop6 || (_FileDrop6 = (0, _jsxRuntime.jsx)(_index.FileDrop, {
104
103
  renderLabel: "Some label",
105
104
  readOnly: true
106
105
  }))),
@@ -111,10 +110,11 @@ describe('<FileDrop/>', () => {
111
110
  });
112
111
  describe('label handling', async () => {
113
112
  it('renders element label directly', async () => {
114
- const label = _section || (_section = /*#__PURE__*/_react.default.createElement("section", {
115
- id: "test-id"
116
- }, "This is an element label"));
117
- const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.FileDrop, {
113
+ const label = _section || (_section = (0, _jsxRuntime.jsx)("section", {
114
+ id: "test-id",
115
+ children: "This is an element label"
116
+ }));
117
+ const _render9 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.FileDrop, {
118
118
  renderLabel: label
119
119
  })),
120
120
  container = _render9.container;
@@ -129,7 +129,7 @@ describe('<FileDrop/>', () => {
129
129
  };
130
130
  return null;
131
131
  };
132
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.FileDrop, {
132
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.FileDrop, {
133
133
  renderLabel: label
134
134
  }));
135
135
  expect(typeof result.isDragAccepted).toBe('boolean');
@@ -143,7 +143,7 @@ describe('<FileDrop/>', () => {
143
143
  };
144
144
  return null;
145
145
  };
146
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.FileDrop, {
146
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.FileDrop, {
147
147
  renderLabel: label
148
148
  }));
149
149
  expect(result.isDragAccepted).toBe(false);
package/lib/FileDrop/index.js CHANGED
@@ -1,14 +1,13 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.FileDrop = void 0;
9
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
- var _react = _interopRequireWildcard(require("react"));
10
+ var _react = require("react");
12
11
  var _keycode = _interopRequireDefault(require("keycode"));
13
12
  var _FormFieldMessages = require("@instructure/ui-form-field/lib/FormFieldMessages");
14
13
  var _View = require("@instructure/ui-view/lib/View");
@@ -23,6 +22,7 @@ var _emotion = require("@instructure/emotion");
23
22
  var _styles = _interopRequireDefault(require("./styles"));
24
23
  var _theme = _interopRequireDefault(require("./theme"));
25
24
  var _props = require("./props");
25
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
26
26
  const _excluded = ["display", "height", "width", "minWidth", "maxWidth", "margin", "onDropAccepted", "onDropRejected", "styles"];
27
27
  var _dec, _dec2, _dec3, _class, _FileDrop;
28
28
  /*
@@ -48,7 +48,6 @@ var _dec, _dec2, _dec3, _class, _FileDrop;
48
48
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
49
49
  * SOFTWARE.
50
50
  */
51
- /** @jsx jsx */
52
51
  function keyEventIsClickButton(e) {
53
52
  return e.keyCode === _keycode.default.codes.space || e.keyCode === _keycode.default.codes.enter;
54
53
  }
@@ -304,7 +303,7 @@ let FileDrop = exports.FileDrop = (_dec = (0, _withDeterministicId.withDetermini
304
303
  props = (0, _objectWithoutProperties2.default)(_this$props7, _excluded);
305
304
  const id = this.props.id || this.defaultId;
306
305
  const focusColor = this.state.isDragRejected || this.invalid ? 'danger' : void 0;
307
- return (0, _emotion.jsx)(_View.View, {
306
+ return (0, _jsxRuntime.jsxs)(_View.View, {
308
307
  display: display,
309
308
  position: "relative" // contain visually hidden file input element
310
309
  ,
@@ -313,51 +312,59 @@ let FileDrop = exports.FileDrop = (_dec = (0, _withDeterministicId.withDetermini
313
312
  maxWidth: maxWidth,
314
313
  margin: margin,
315
314
  height: height,
316
- elementRef: this.handleElementRef
317
- }, (0, _emotion.jsx)("label", {
318
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.fileDropLabel,
319
- htmlFor: id,
320
- onDragEnter: this.handleDragEnter,
321
- onDragOver: this.handleDragOver,
322
- onDragLeave: this.handleDragLeave,
323
- onDrop: this.handleChange
324
- }, (0, _emotion.jsx)(_View.View, {
325
- display: "block",
326
- position: "relative",
327
- withFocusOutline: this.state.isFocused,
328
- borderRadius: "large",
329
- focusColor: focusColor,
330
- height: height,
331
- focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$fileDropLayou = styles.fileDropLayout) === null || _styles$fileDropLayou === void 0 ? void 0 : _styles$fileDropLayou.borderRadius)
332
- }, (0, _emotion.jsx)("span", {
333
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.fileDropLabelContent
334
- }, (0, _emotion.jsx)("span", {
335
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.fileDropLayout
336
- }, (0, _emotion.jsx)(_View.View, {
337
- height: height
338
- }, this.renderLabel()))))), (0, _emotion.jsx)("input", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
339
- onClick: this.handleClick,
340
- type: "file",
341
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.fileDropInput,
342
- id: id,
343
- ref: this.handleRef,
344
- onFocus: this.handleFocus,
345
- onBlur: this.handleBlur,
346
- onKeyDown: this.handleKeyDown,
347
- onKeyUp: this.handleKeyUp,
348
- multiple: this.props.shouldAllowMultiple,
349
- accept: this.acceptStr(),
350
- onChange: this.handleChange,
351
- "aria-describedby": this.hasMessages ? this.messagesId : void 0,
352
- "aria-invalid": this.invalid,
353
- disabled: this.functionallyDisabled
354
- })), this.hasMessages ? (0, _emotion.jsx)(_View.View, {
355
- display: "block",
356
- margin: "small 0 0"
357
- }, (0, _emotion.jsx)(_FormFieldMessages.FormFieldMessages, {
358
- id: this.messagesId,
359
- messages: this.props.messages
360
- })) : null);
315
+ elementRef: this.handleElementRef,
316
+ children: [(0, _jsxRuntime.jsx)("label", {
317
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.fileDropLabel,
318
+ htmlFor: id,
319
+ onDragEnter: this.handleDragEnter,
320
+ onDragOver: this.handleDragOver,
321
+ onDragLeave: this.handleDragLeave,
322
+ onDrop: this.handleChange,
323
+ children: (0, _jsxRuntime.jsx)(_View.View, {
324
+ display: "block",
325
+ position: "relative",
326
+ withFocusOutline: this.state.isFocused,
327
+ borderRadius: "large",
328
+ focusColor: focusColor,
329
+ height: height,
330
+ focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$fileDropLayou = styles.fileDropLayout) === null || _styles$fileDropLayou === void 0 ? void 0 : _styles$fileDropLayou.borderRadius),
331
+ children: (0, _jsxRuntime.jsx)("span", {
332
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.fileDropLabelContent,
333
+ children: (0, _jsxRuntime.jsx)("span", {
334
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.fileDropLayout,
335
+ children: (0, _jsxRuntime.jsx)(_View.View, {
336
+ height: height,
337
+ children: this.renderLabel()
338
+ })
339
+ })
340
+ })
341
+ })
342
+ }), (0, _jsxRuntime.jsx)("input", {
343
+ ...(0, _passthroughProps.passthroughProps)(props),
344
+ onClick: this.handleClick,
345
+ type: "file",
346
+ css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.fileDropInput,
347
+ id: id,
348
+ ref: this.handleRef,
349
+ onFocus: this.handleFocus,
350
+ onBlur: this.handleBlur,
351
+ onKeyDown: this.handleKeyDown,
352
+ onKeyUp: this.handleKeyUp,
353
+ multiple: this.props.shouldAllowMultiple,
354
+ accept: this.acceptStr(),
355
+ onChange: this.handleChange,
356
+ "aria-describedby": this.hasMessages ? this.messagesId : void 0,
357
+ "aria-invalid": this.invalid,
358
+ disabled: this.functionallyDisabled
359
+ }), this.hasMessages ? (0, _jsxRuntime.jsx)(_View.View, {
360
+ display: "block",
361
+ margin: "small 0 0",
362
+ children: (0, _jsxRuntime.jsx)(_FormFieldMessages.FormFieldMessages, {
363
+ id: this.messagesId,
364
+ messages: this.props.messages
365
+ })
366
+ }) : null]
367
+ });
361
368
  }
362
369
  }, _FileDrop.displayName = "FileDrop", _FileDrop.componentId = 'FileDrop', _FileDrop.propTypes = _props.propTypes, _FileDrop.allowedProps = _props.allowedProps, _FileDrop.defaultProps = {
363
370
  onClick: function (_e) {},
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-file-drop",
3
- "version": "10.16.0",
3
+ "version": "10.16.1-pr-snapshot-1744893671793",
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,23 +24,23 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.26.0",
27
- "@instructure/console": "10.16.0",
28
- "@instructure/emotion": "10.16.0",
29
- "@instructure/shared-types": "10.16.0",
30
- "@instructure/ui-color-utils": "10.16.0",
31
- "@instructure/ui-form-field": "10.16.0",
32
- "@instructure/ui-react-utils": "10.16.0",
33
- "@instructure/ui-testable": "10.16.0",
34
- "@instructure/ui-utils": "10.16.0",
35
- "@instructure/ui-view": "10.16.0",
36
- "@instructure/uid": "10.16.0",
27
+ "@instructure/console": "10.16.1-pr-snapshot-1744893671793",
28
+ "@instructure/emotion": "10.16.1-pr-snapshot-1744893671793",
29
+ "@instructure/shared-types": "10.16.1-pr-snapshot-1744893671793",
30
+ "@instructure/ui-color-utils": "10.16.1-pr-snapshot-1744893671793",
31
+ "@instructure/ui-form-field": "10.16.1-pr-snapshot-1744893671793",
32
+ "@instructure/ui-react-utils": "10.16.1-pr-snapshot-1744893671793",
33
+ "@instructure/ui-testable": "10.16.1-pr-snapshot-1744893671793",
34
+ "@instructure/ui-utils": "10.16.1-pr-snapshot-1744893671793",
35
+ "@instructure/ui-view": "10.16.1-pr-snapshot-1744893671793",
36
+ "@instructure/uid": "10.16.1-pr-snapshot-1744893671793",
37
37
  "keycode": "^2",
38
38
  "prop-types": "^15.8.1"
39
39
  },
40
40
  "devDependencies": {
41
- "@instructure/ui-babel-preset": "10.16.0",
42
- "@instructure/ui-test-utils": "10.16.0",
43
- "@instructure/ui-themes": "10.16.0",
41
+ "@instructure/ui-babel-preset": "10.16.1-pr-snapshot-1744893671793",
42
+ "@instructure/ui-test-utils": "10.16.1-pr-snapshot-1744893671793",
43
+ "@instructure/ui-themes": "10.16.1-pr-snapshot-1744893671793",
44
44
  "@testing-library/jest-dom": "^6.6.3",
45
45
  "@testing-library/react": "^16.0.1",
46
46
  "vitest": "^2.1.8"
package/src/FileDrop/__new-tests__/FileDrop.test.tsx CHANGED
@@ -22,7 +22,6 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React from 'react'
26
25
  import { render } from '@testing-library/react'
27
26
  import { vi } from 'vitest'
28
27
  import { runAxeCheck } from '@instructure/ui-axe-check'
package/src/FileDrop/index.tsx CHANGED
@@ -21,8 +21,8 @@
21
21
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22
22
  * SOFTWARE.
23
23
  */
24
- /** @jsx jsx */
25
- import React, { Component } from 'react'
24
+
25
+ import { Component } from 'react'
26
26
  import keycode from 'keycode'
27
27
  import { FormFieldMessages } from '@instructure/ui-form-field'
28
28
  import type { FormMessage } from '@instructure/ui-form-field'
@@ -38,7 +38,7 @@ import {
38
38
  import { accepts, getAcceptList } from './utils/accepts'
39
39
  import { getEventFiles } from './utils/getEventFiles'
40
40
 
41
- import { withStyle, jsx } from '@instructure/emotion'
41
+ import { withStyle } from '@instructure/emotion'
42
42
  import generateStyle from './styles'
43
43
  import generateComponentTheme from './theme'
44
44