@itwin/itwinui-react 2.11.2 → 2.11.3
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 +6 -0
- package/cjs/core/FileUpload/FileUploadCard.d.ts +1 -0
- package/cjs/core/FileUpload/FileUploadCard.js +6 -4
- package/cjs/core/FileUpload/FileUploadTemplate.js +2 -1
- package/esm/core/FileUpload/FileUploadCard.d.ts +1 -0
- package/esm/core/FileUpload/FileUploadCard.js +7 -5
- package/esm/core/FileUpload/FileUploadTemplate.js +2 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import '@itwin/itwinui-css/css/file-upload.css';
|
|
2
3
|
export declare type FileUploadCardIconProps = React.ComponentPropsWithRef<'span'>;
|
|
3
4
|
export declare type FileUploadCardInfoProps = React.ComponentPropsWithRef<'span'>;
|
|
4
5
|
export declare type FileUploadCardTitleProps = React.ComponentPropsWithRef<'span'>;
|
|
@@ -35,6 +35,8 @@ const React = __importStar(require("react"));
|
|
|
35
35
|
const index_js_1 = require("../utils/index.js");
|
|
36
36
|
const classnames_1 = __importDefault(require("classnames"));
|
|
37
37
|
const FileEmptyCard_js_1 = require("./FileEmptyCard.js");
|
|
38
|
+
const Anchor_js_1 = require("../Typography/Anchor/Anchor.js");
|
|
39
|
+
require("@itwin/itwinui-css/css/file-upload.css");
|
|
38
40
|
const toBytes = (bytes) => {
|
|
39
41
|
const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
40
42
|
let i = 0;
|
|
@@ -82,13 +84,13 @@ const FileUploadCardAction = React.forwardRef((props, ref) => {
|
|
|
82
84
|
});
|
|
83
85
|
FileUploadCardAction.displayName = 'FileUploadCard.Action';
|
|
84
86
|
const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
|
|
85
|
-
const { children,
|
|
87
|
+
const { children, ...rest } = props;
|
|
86
88
|
const { inputId } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
|
|
87
|
-
return (React.createElement(
|
|
89
|
+
return (React.createElement(Anchor_js_1.Anchor, { as: 'label', ref: ref, htmlFor: inputId, ...rest }, children));
|
|
88
90
|
});
|
|
89
91
|
FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
|
|
90
92
|
const FileUploadCardInput = React.forwardRef((props, ref) => {
|
|
91
|
-
const { children,
|
|
93
|
+
const { children, onChange, id, ...rest } = props;
|
|
92
94
|
const { files, onFilesChange, setInternalFiles, inputId, setInputId } = (0, index_js_1.useSafeContext)(exports.FileUploadCardContext);
|
|
93
95
|
const setNativeFilesRef = React.useCallback((node) => {
|
|
94
96
|
var _a;
|
|
@@ -107,7 +109,7 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
|
|
|
107
109
|
}
|
|
108
110
|
}, [id, inputId, setInputId]);
|
|
109
111
|
return (React.createElement(React.Fragment, null,
|
|
110
|
-
React.createElement(
|
|
112
|
+
React.createElement(index_js_1.VisuallyHidden, { as: 'input', type: 'file', onChange: (0, index_js_1.mergeEventHandlers)(onChange, (e) => {
|
|
111
113
|
const _files = Array.from(e.currentTarget.files || []);
|
|
112
114
|
onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
|
|
113
115
|
setInternalFiles(_files);
|
|
@@ -35,6 +35,7 @@ const React = __importStar(require("react"));
|
|
|
35
35
|
const classnames_1 = __importDefault(require("classnames"));
|
|
36
36
|
const index_js_1 = require("../utils/index.js");
|
|
37
37
|
require("@itwin/itwinui-css/css/file-upload.css");
|
|
38
|
+
const Anchor_js_1 = require("../Typography/Anchor/Anchor.js");
|
|
38
39
|
/**
|
|
39
40
|
* Default template to be used with the `FileUpload` wrapper component.
|
|
40
41
|
* Contains a hidden input with styled labels (customizable).
|
|
@@ -47,7 +48,7 @@ const FileUploadTemplate = (props) => {
|
|
|
47
48
|
return (React.createElement("div", { className: (0, classnames_1.default)('iui-file-upload-template', className), ...rest },
|
|
48
49
|
React.createElement(index_js_1.SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
|
|
49
50
|
React.createElement("div", { className: 'iui-template-text' },
|
|
50
|
-
React.createElement(
|
|
51
|
+
React.createElement(Anchor_js_1.Anchor, { as: 'label' },
|
|
51
52
|
React.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
|
|
52
53
|
label),
|
|
53
54
|
React.createElement("div", null, subtitle),
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import '@itwin/itwinui-css/css/file-upload.css';
|
|
2
3
|
export declare type FileUploadCardIconProps = React.ComponentPropsWithRef<'span'>;
|
|
3
4
|
export declare type FileUploadCardInfoProps = React.ComponentPropsWithRef<'span'>;
|
|
4
5
|
export declare type FileUploadCardTitleProps = React.ComponentPropsWithRef<'span'>;
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
4
|
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as React from 'react';
|
|
6
|
-
import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEventHandlers, } from '../utils/index.js';
|
|
6
|
+
import { getWindow, SvgDocument, useMergedRefs, useSafeContext, useId, mergeEventHandlers, VisuallyHidden, } from '../utils/index.js';
|
|
7
7
|
import cx from 'classnames';
|
|
8
8
|
import { FileEmptyCard } from './FileEmptyCard.js';
|
|
9
|
+
import { Anchor } from '../Typography/Anchor/Anchor.js';
|
|
10
|
+
import '@itwin/itwinui-css/css/file-upload.css';
|
|
9
11
|
const toBytes = (bytes) => {
|
|
10
12
|
const units = [' bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
11
13
|
let i = 0;
|
|
@@ -53,13 +55,13 @@ const FileUploadCardAction = React.forwardRef((props, ref) => {
|
|
|
53
55
|
});
|
|
54
56
|
FileUploadCardAction.displayName = 'FileUploadCard.Action';
|
|
55
57
|
const FileUploadCardInputLabel = React.forwardRef((props, ref) => {
|
|
56
|
-
const { children,
|
|
58
|
+
const { children, ...rest } = props;
|
|
57
59
|
const { inputId } = useSafeContext(FileUploadCardContext);
|
|
58
|
-
return (React.createElement(
|
|
60
|
+
return (React.createElement(Anchor, { as: 'label', ref: ref, htmlFor: inputId, ...rest }, children));
|
|
59
61
|
});
|
|
60
62
|
FileUploadCardInputLabel.displayName = 'FileUploadCard.InputLabel';
|
|
61
63
|
const FileUploadCardInput = React.forwardRef((props, ref) => {
|
|
62
|
-
const { children,
|
|
64
|
+
const { children, onChange, id, ...rest } = props;
|
|
63
65
|
const { files, onFilesChange, setInternalFiles, inputId, setInputId } = useSafeContext(FileUploadCardContext);
|
|
64
66
|
const setNativeFilesRef = React.useCallback((node) => {
|
|
65
67
|
var _a;
|
|
@@ -78,7 +80,7 @@ const FileUploadCardInput = React.forwardRef((props, ref) => {
|
|
|
78
80
|
}
|
|
79
81
|
}, [id, inputId, setInputId]);
|
|
80
82
|
return (React.createElement(React.Fragment, null,
|
|
81
|
-
React.createElement(
|
|
83
|
+
React.createElement(VisuallyHidden, { as: 'input', type: 'file', onChange: mergeEventHandlers(onChange, (e) => {
|
|
82
84
|
const _files = Array.from(e.currentTarget.files || []);
|
|
83
85
|
onFilesChange === null || onFilesChange === void 0 ? void 0 : onFilesChange(_files);
|
|
84
86
|
setInternalFiles(_files);
|
|
@@ -6,6 +6,7 @@ import * as React from 'react';
|
|
|
6
6
|
import cx from 'classnames';
|
|
7
7
|
import { useTheme, SvgUpload } from '../utils/index.js';
|
|
8
8
|
import '@itwin/itwinui-css/css/file-upload.css';
|
|
9
|
+
import { Anchor } from '../Typography/Anchor/Anchor.js';
|
|
9
10
|
/**
|
|
10
11
|
* Default template to be used with the `FileUpload` wrapper component.
|
|
11
12
|
* Contains a hidden input with styled labels (customizable).
|
|
@@ -18,7 +19,7 @@ export const FileUploadTemplate = (props) => {
|
|
|
18
19
|
return (React.createElement("div", { className: cx('iui-file-upload-template', className), ...rest },
|
|
19
20
|
React.createElement(SvgUpload, { className: 'iui-template-icon', "aria-hidden": true }),
|
|
20
21
|
React.createElement("div", { className: 'iui-template-text' },
|
|
21
|
-
React.createElement(
|
|
22
|
+
React.createElement(Anchor, { as: 'label' },
|
|
22
23
|
React.createElement("input", { className: 'iui-browse-input', type: 'file', onChange: onChange, multiple: acceptMultiple, accept: acceptType }),
|
|
23
24
|
label),
|
|
24
25
|
React.createElement("div", null, subtitle),
|