@sps-woodland/file-upload 8.50.1 → 8.51.0

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/README.md CHANGED
@@ -1,3 +1,20 @@
1
1
  ## [@sps-woodland/file-upload](https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/file-upload#readme)
2
2
 
3
- SPS Woodland Design System file upload component
3
+ SPS Woodland Design System file upload component.
4
+
5
+ `FileUpload` lives in `@sps-woodland/core/file-upload` — this wrapper
6
+ re-exports from there for backwards compatibility.
7
+
8
+ ### Preferred (core, tree-shakes per component)
9
+
10
+ ```ts
11
+ import { FileUpload } from "@sps-woodland/core/file-upload";
12
+ import "@sps-woodland/core/file-upload/style.css";
13
+ ```
14
+
15
+ ### Still supported (legacy wrapper, re-exports from `@sps-woodland/core`)
16
+
17
+ ```ts
18
+ import { FileUpload } from "@sps-woodland/file-upload";
19
+ import "@sps-woodland/file-upload/style.css";
20
+ ```
package/lib/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export * from "./FileUpload";
1
+ export * from "@sps-woodland/core/file-upload";
2
2
  export * from "./manifest";
package/lib/index.js CHANGED
@@ -1,354 +1,8 @@
1
- import * as e from "react";
2
- import { Metadata as ve, cl as R, Spinner as we } from "@sps-woodland/core";
3
- import { parseFileSize as ge, code as _ } from "@spscommerce/utils";
4
- import { Button as I } from "@sps-woodland/buttons";
5
- import { GENERAL_ERROR_LARGE as Fe, UPLOAD_LARGE as Ee } from "@sps-woodland/illustrations";
6
- import { useWoodlandLanguage as xe } from "@spscommerce/i18n";
7
- const W = {
8
- "7Z": ["application/x-7z-compressed"],
9
- AAC: ["audio/aac"],
10
- ABW: ["application/x-abiword"],
11
- ARC: ["application/octet-stream"],
12
- AVI: ["video/x-msvideo"],
13
- AZW: ["application/vnd.amazon.ebook"],
14
- BIN: ["application/octet-stream"],
15
- BMP: ["image/bmp"],
16
- BZ: ["application/x-bzip"],
17
- BZ2: ["application/x-bzip2"],
18
- CER: ["application/pkix-cert", "application/x-x509-ca-cert"],
19
- CSH: ["application/x-csh"],
20
- CSS: ["text/css"],
21
- CSV: ["text/csv", "application/vnd.ms-excel"],
22
- DOC: ["application/msword"],
23
- DOT: ["application/msword"],
24
- DOCX: ["application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
25
- DOTX: ["application/vnd.openxmlformats-officedocument.wordprocessingml.template"],
26
- DOCM: ["application/vnd.ms-word.document.macroEnabled.12"],
27
- DOTM: ["application/vnd.ms-word.template.macroEnabled.12"],
28
- EML: [
29
- "application/octet-stream",
30
- "message/rfc822",
31
- "multipart/mixed",
32
- "message/rfc5322",
33
- "message/rfc6532"
34
- ],
35
- EOT: ["application/vnd.ms-fontobject"],
36
- EPUB: ["application/epub+zip"],
37
- ES: ["application/ecmascript"],
38
- FLV: ["video/x-flv"],
39
- GIF: ["image/gif"],
40
- GZ: ["application/x-gzip"],
41
- HTM: ["text/html"],
42
- HTML: ["text/html"],
43
- ICO: ["image/x-icon"],
44
- ICS: ["text/calendar"],
45
- JAR: ["application/java-archive"],
46
- JPEG: ["image/jpeg"],
47
- JPG: ["image/jpeg"],
48
- JS: ["application/javascript"],
49
- JSON: ["application/json"],
50
- M3U: ["audio/x-mpequrl"],
51
- MID: ["audio/midi"],
52
- MIDI: ["audio/midi"],
53
- MOV: ["video/quicktime"],
54
- MP3: ["audio/mpeg3"],
55
- MP4: ["video/mp4"],
56
- MPEG: ["video/mpeg"],
57
- MPKG: ["application/vnd.apple.installer+xml"],
58
- ODP: ["application/vnd.oasis.opendocument.presentation"],
59
- ODS: ["application/vnd.oasis.opendocument.spreadsheet"],
60
- ODT: ["application/vnd.oasis.opendocument.text"],
61
- OGA: ["audio/ogg"],
62
- OGV: ["video/ogg"],
63
- OGX: ["application/ogg"],
64
- OTF: ["font/otf"],
65
- PNG: ["image/png"],
66
- PDF: ["application/pdf"],
67
- POT: ["application/vnd.ms-powerpoint"],
68
- POTM: ["application/vnd.ms-powerpoint.template.macroEnabled.12"],
69
- POTX: ["application/vnd.openxmlformats-officedocument.presentationml.template"],
70
- PPA: ["application/vnd.ms-powerpoint"],
71
- PPAM: ["application/vnd.ms-powerpoint.addin.macroEnabled.12"],
72
- PPS: ["application/vnd.ms-powerpoint"],
73
- PPSM: ["application/vnd.ms-powerpoint.slideshow.macroEnabled.12"],
74
- PPT: ["application/vnd.ms-powerpoint"],
75
- PPTM: ["application/vnd.ms-powerpoint.presentation.macroEnabled.12"],
76
- PPSX: ["application/vnd.openxmlformats-officedocument.presentationml.slideshow"],
77
- PPTX: ["application/vnd.openxmlformats-officedocument.presentationml.presentation"],
78
- RAR: ["application/x-rar-compressed"],
79
- RTF: ["application/rtf"],
80
- SH: ["application/x-sh"],
81
- SVG: ["image/svg+xml"],
82
- SWF: ["application/x-shockwave-flash"],
83
- TAR: ["application/x-tar"],
84
- TIF: ["image/tiff"],
85
- TIFF: ["image/tiff"],
86
- TS: ["application/typescript"],
87
- TTF: ["font/ttf"],
88
- TXT: ["text/plain"],
89
- VSD: ["application/vnd.visio"],
90
- WAV: ["audio/wav"],
91
- WEBA: ["audio/webm"],
92
- WEBM: ["video/webm"],
93
- WEBP: ["image/webp"],
94
- WOFF: ["font/woff"],
95
- WOFF2: ["font/woff2"],
96
- XHTML: ["application/xhtml+xml"],
97
- XLA: ["application/vnd.ms-excel"],
98
- XLS: ["application/vnd.ms-excel"],
99
- XLSB: ["application/vnd.ms-excel.sheet.binary.macroEnabled.12"],
100
- XLT: ["application/vnd.ms-excel"],
101
- XLAM: ["application/vnd.ms-excel.addin.macroEnabled.12"],
102
- XLSM: ["application/vnd.ms-excel.sheet.macroEnabled.12"],
103
- XLSX: ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
104
- XLTM: ["application/vnd.ms-excel.template.macroEnabled.12"],
105
- XLTX: ["application/vnd.openxmlformats-officedocument.spreadsheetml.template"],
106
- XML: ["application/xml"],
107
- XUL: ["application/vnd.mozilla.xul+xml"],
108
- ZIP: ["application/zip"]
109
- };
110
- function be(o, i, l) {
111
- return i in o ? Object.defineProperty(o, i, {
112
- value: l,
113
- enumerable: !0,
114
- configurable: !0,
115
- writable: !0
116
- }) : o[i] = l, o;
117
- }
118
- function z(o, i) {
119
- var l = Object.keys(o);
120
- if (Object.getOwnPropertySymbols) {
121
- var t = Object.getOwnPropertySymbols(o);
122
- i && (t = t.filter(function(r) {
123
- return Object.getOwnPropertyDescriptor(o, r).enumerable;
124
- })), l.push.apply(l, t);
125
- }
126
- return l;
127
- }
128
- function G(o) {
129
- for (var i = 1; i < arguments.length; i++) {
130
- var l = arguments[i] != null ? arguments[i] : {};
131
- i % 2 ? z(Object(l), !0).forEach(function(t) {
132
- be(o, t, l[t]);
133
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(o, Object.getOwnPropertyDescriptors(l)) : z(Object(l)).forEach(function(t) {
134
- Object.defineProperty(o, t, Object.getOwnPropertyDescriptor(l, t));
135
- });
136
- }
137
- return o;
138
- }
139
- var ye = (o, i, l) => {
140
- for (var t of Object.keys(o)) {
141
- var r;
142
- if (o[t] !== ((r = i[t]) !== null && r !== void 0 ? r : l[t]))
143
- return !1;
144
- }
145
- return !0;
146
- }, O = (o) => (i) => {
147
- var l = o.defaultClassName, t = G(G({}, o.defaultVariants), i);
148
- for (var r in t) {
149
- var m, g = (m = t[r]) !== null && m !== void 0 ? m : o.defaultVariants[r];
150
- if (g != null) {
151
- var p = g;
152
- typeof p == "boolean" && (p = p === !0 ? "true" : "false");
153
- var s = (
154
- // @ts-expect-error
155
- o.variantClassNames[r][p]
156
- );
157
- s && (l += " " + s);
158
- }
159
- }
160
- for (var [b, T] of o.compoundVariants)
161
- ye(b, t, o.defaultVariants) && (l += " " + T);
162
- return l;
163
- }, Ue = O({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw0", variantClassNames: { active: { true: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw1", false: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw2" }, mini: { true: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw3", false: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw4" }, error: { true: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw5", false: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw6" }, shown: { true: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw7", false: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw8" }, disabled: { true: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw9", false: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwa" } }, defaultVariants: { active: !1, mini: !1, error: !1, shown: !0, disabled: !1 }, compoundVariants: [] }), Se = O({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwb", variantClassNames: { constrainContentWidth: { true: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwc", false: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwd" }, disabled: { true: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwe", false: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwf" } }, defaultVariants: { constrainContentWidth: !1, disabled: !1 }, compoundVariants: [] }), Z = "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwg", je = O({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwh", variantClassNames: { mini: { true: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwi", false: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwj" }, error: { true: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwk", false: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwl" }, disabled: { true: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwm", false: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwn" } }, defaultVariants: { mini: !1, error: !1, disabled: !1 }, compoundVariants: [] }), Ce = O({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwo", variantClassNames: { mini: { true: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwp", false: "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwq" } }, defaultVariants: { mini: !1 }, compoundVariants: [] }), ke = "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwr", Oe = "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jws", $ = "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwt", q = "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwu", Te = "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwv", De = "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jww", Pe = "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwx", Me = "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwy", Le = "pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwz";
164
- function H({ list: o }) {
165
- return /* @__PURE__ */ e.createElement(e.Fragment, null, o.map((i, l) => {
166
- const t = Math.floor(i.length / 2);
167
- return /* @__PURE__ */ e.createElement("div", { className: Oe, key: i }, /* @__PURE__ */ e.createElement("span", { className: $ }, i.substring(0, t)), /* @__PURE__ */ e.createElement("div", { className: $ }, /* @__PURE__ */ e.createElement("span", null, i.substring(t))), l < o.length - 1 ? "," : "");
168
- }));
169
- }
170
- function J({
171
- constrainContentWidth: o,
172
- description: i,
173
- multiple: l = !1,
174
- dismissable: t,
175
- processing: r,
176
- mini: m,
177
- downloadLabel: g,
178
- acceptExtensions: p,
179
- maxSize: s,
180
- customRequirement: b,
181
- onSelection: T,
182
- onDismiss: D,
183
- download: P,
184
- shown: y,
185
- className: K,
186
- disabled: d,
187
- children: Ae,
188
- ...Y
189
- }) {
190
- const U = e.useRef(/* @__PURE__ */ new Set()), [Q, M] = e.useState(y), [Ve, ee] = e.useState([]), [oe, ae] = e.useState(""), [L, le] = e.useState(), [te, S] = e.useState(!1), [F, j] = e.useState(!1), [h, N] = e.useState([]), [v, A] = e.useState([]), [E, ie] = e.useState(""), V = e.useMemo(() => (/* @__PURE__ */ new Set([...h, ...v])).size, [h, v]), { t: c } = xe(), C = (l ? c("fileUpload.instructions.other", {
191
- defaultValue: "Drag and drop your files here or |browse for files| on your desktop."
192
- }) : c("fileUpload.instructions.one", {
193
- defaultValue: "Drag and drop your file here or |browse for a file| on your desktop."
194
- })).split("|"), B = i || (l ? "Files" : "File"), f = e.useRef(null);
195
- e.useEffect(() => {
196
- y && M(y);
197
- }, [y]), e.useEffect(() => {
198
- s && se(s);
199
- }, [s]), e.useEffect(() => {
200
- p && re(p);
201
- }, [p]);
202
- function ne() {
203
- t && (M(!1), D && D());
204
- }
205
- function se(a) {
206
- try {
207
- le(ge(a));
208
- } catch {
209
- throw new Error(`Could not parse "${a}" as a file size.`);
210
- }
211
- }
212
- function re(a) {
213
- const w = (Array.isArray(a) ? a : a.trim().split(/\s?,\s?/)).map((n) => n.replace(/^\./, "")), u = w.map((n) => `.${n}`.toLowerCase());
214
- ie(
215
- u.map((n, k) => k > 0 && k === u.length - 1 ? `or ${n}` : n).join(u.length > 2 ? ", " : " ")
216
- ), U.current.clear();
217
- for (const n of w) {
218
- const k = Object.keys(W).includes(n.toUpperCase()) ? W[n.toUpperCase()] : [];
219
- for (const he of k)
220
- U.current.add(he);
221
- }
222
- ae(u.concat(Array.from(U.current)).join(","));
223
- }
224
- function X(a) {
225
- N([]), A([]);
226
- let x = [], w = [];
227
- const u = a ? Array.from(a) : [];
228
- for (const n of u)
229
- p && !U.current.has(n.type) && w.push(n.name), s && L && n.size > L && x.push(n.name);
230
- x.length || w.length ? (j(!0), f.current && f.current.value && (f.current.value = "")) : (ee(u), T(u)), N(x), A(w);
231
- }
232
- function pe(a) {
233
- a.preventDefault(), j(!1), f.current && f.current.click();
234
- }
235
- function de() {
236
- P && P();
237
- }
238
- function ce(a) {
239
- a.stopPropagation(), X(a.target.files), f.current && f.current.value && (f.current.value = "");
240
- }
241
- function _e(a) {
242
- a.preventDefault(), a.stopPropagation(), S(!0), j(!1);
243
- }
244
- function fe(a) {
245
- a.preventDefault(), S(!0), j(!1);
246
- }
247
- function ue(a) {
248
- a.preventDefault(), S(!1);
249
- }
250
- function me(a) {
251
- a.preventDefault(), a.stopPropagation(), S(!1), a.dataTransfer.files && X(a.dataTransfer.files);
252
- }
253
- return /* @__PURE__ */ e.createElement(
254
- "div",
255
- {
256
- onDrop: d ? () => {
257
- } : me,
258
- onDragOver: d ? () => {
259
- } : _e,
260
- onDragLeave: d ? () => {
261
- } : ue,
262
- onDragEnter: d ? () => {
263
- } : fe,
264
- className: R(Ue({ active: te, mini: m, error: F, shown: Q, disabled: d }), K),
265
- ...Y
266
- },
267
- /* @__PURE__ */ e.createElement("div", { className: R(Se({ constrainContentWidth: o, disabled: d })) }, r ? /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(we, { size: "md", "aria-hidden": "true" }), /* @__PURE__ */ e.createElement("div", { className: Z }, c("fileUpload.processing", { defaultValue: "Processing Upload..." }))) : /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", { className: je({ mini: m, error: F, disabled: d }), "aria-hidden": "true" }, /* @__PURE__ */ e.createElement(
268
- "img",
269
- {
270
- className: Le,
271
- src: F ? Fe : Ee,
272
- alt: "Upload Icon"
273
- }
274
- )), /* @__PURE__ */ e.createElement("div", { className: Ce({ mini: m }) }, F ? /* @__PURE__ */ e.createElement("div", null, c(
275
- V > 1 ? "fileUpload.cancelled.other" : "fileUpload.cancelled.one",
276
- {
277
- defaultValue: V > 1 ? "File Upload(s) Failed" : "File Upload Failed"
278
- }
279
- )) : /* @__PURE__ */ e.createElement("div", null, c("fileUpload.title", {
280
- description: B,
281
- defaultValue: `Upload your ${B}`
282
- }))), F ? /* @__PURE__ */ e.createElement("div", { className: ke }, h.length > 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(H, { list: h }), /* @__PURE__ */ e.createElement("div", { className: q }, c(
283
- h.length === 1 ? "fileUpload.error.tooLarge.one" : "fileUpload.error.tooLarge.other",
284
- {
285
- size: s,
286
- defaultValue: h.length === 1 ? `Selected file is larger than the size limit of ${s}.` : `Selected files are larger than the size limit of ${s}.`
287
- }
288
- ))), v.length > 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(H, { list: v }), /* @__PURE__ */ e.createElement("div", { className: q }, c(
289
- v.length === 1 ? "fileUpload.error.wrongType.one" : "fileUpload.error.wrongType.other",
290
- {
291
- fileTypes: E,
292
- defaultValue: v.length === 1 ? `Selected file is not an accepted file type: ${E}.` : `Selected files are not accepted file types: ${E}.`
293
- }
294
- )))) : /* @__PURE__ */ e.createElement("span", null), /* @__PURE__ */ e.createElement("div", { className: Z }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", null, C[0]), d ? /* @__PURE__ */ e.createElement("u", null, C[1]) : /* @__PURE__ */ e.createElement("a", { href: "", onClick: pe }, C[1]), /* @__PURE__ */ e.createElement("span", null, C[2]))), /* @__PURE__ */ e.createElement("div", { className: Te }, p ? /* @__PURE__ */ e.createElement("span", null, "(", " ", c("fileUpload.acceptedTypes", {
295
- fileTypes: E,
296
- defaultValue: `${E} format accepted`
297
- }), " ", ")") : "", s ? /* @__PURE__ */ e.createElement("span", null, "(", " ", c("fileUpload.maximumSize", {
298
- size: s,
299
- defaultValue: `${s} maximum`
300
- }), " ", ")") : "", b ? /* @__PURE__ */ e.createElement("span", null, " ", b, " ") : ""), g && /* @__PURE__ */ e.createElement("div", { className: De }, /* @__PURE__ */ e.createElement(
301
- I,
302
- {
303
- disabled: d,
304
- kind: "link",
305
- icon: "download-cloud",
306
- onClick: de
307
- },
308
- g
309
- )))),
310
- t && !r && /* @__PURE__ */ e.createElement("div", { className: Pe }, /* @__PURE__ */ e.createElement(
311
- I,
312
- {
313
- disabled: d,
314
- kind: "icon",
315
- icon: "x",
316
- title: c("fileUpload.close", { defaultValue: "Close" }),
317
- onClick: ne
318
- }
319
- )),
320
- /* @__PURE__ */ e.createElement("form", { className: Me }, /* @__PURE__ */ e.createElement(
321
- "input",
322
- {
323
- ref: f,
324
- type: "file",
325
- accept: oe || "*/*",
326
- multiple: l || void 0,
327
- onChange: ce
328
- }
329
- ))
330
- );
331
- }
332
- ve.set(J, {
333
- name: "FileUpload",
334
- props: {
335
- constrainContentWidth: { type: "boolean" },
336
- description: { type: "string" },
337
- multiple: { type: "boolean" },
338
- dismissable: { type: "boolean" },
339
- mini: { type: "boolean" },
340
- downloadLabel: { type: "string" },
341
- acceptExtensions: { type: "string[] | string" },
342
- maxSize: { type: "string" },
343
- customRequirement: { type: "string" },
344
- onSelection: { type: "(files: File[]) => void", required: !0 },
345
- dismissal: { type: "() => void" },
346
- download: { type: "() => void" },
347
- disabled: { type: "boolean" }
348
- }
349
- });
350
- const Ne = {
351
- components: [J],
1
+ import { FileUpload as o } from "@sps-woodland/core/file-upload";
2
+ export * from "@sps-woodland/core/file-upload";
3
+ import { code as e } from "@spscommerce/utils";
4
+ const l = {
5
+ components: [o],
352
6
  examples: {
353
7
  basic: {
354
8
  label: "Basic File Upload",
@@ -356,7 +10,7 @@ const Ne = {
356
10
  examples: {
357
11
  basic: {
358
12
  description: "Single file upload",
359
- react: _`
13
+ react: e`
360
14
  import { FileUpload } from "@sps-woodland/file-upload";
361
15
 
362
16
  function Component() {
@@ -372,7 +26,7 @@ const Ne = {
372
26
  },
373
27
  multiple: {
374
28
  description: "Multiple file upload",
375
- react: _`
29
+ react: e`
376
30
  import { FileUpload } from "@sps-woodland/file-upload";
377
31
 
378
32
  function Component() {
@@ -394,7 +48,7 @@ const Ne = {
394
48
  examples: {
395
49
  maxSize: {
396
50
  description: "Maximum size",
397
- react: _`
51
+ react: e`
398
52
  import { FileUpload } from "@sps-woodland/file-upload";
399
53
 
400
54
  function Component() {
@@ -410,7 +64,7 @@ const Ne = {
410
64
  },
411
65
  fileWhitelist: {
412
66
  description: "File type whitelist",
413
- react: _`
67
+ react: e`
414
68
  import { FileUpload } from "@sps-woodland/file-upload";
415
69
 
416
70
  function Component() {
@@ -431,7 +85,7 @@ const Ne = {
431
85
  },
432
86
  bothRestrictions: {
433
87
  description: "Both restrictions",
434
- react: _`
88
+ react: e`
435
89
  import { FileUpload } from "@sps-woodland/file-upload";
436
90
 
437
91
  function Component() {
@@ -458,7 +112,7 @@ const Ne = {
458
112
  description: "With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can show it again programmatically if you need to.",
459
113
  examples: {
460
114
  basic: {
461
- react: _`
115
+ react: e`
462
116
  import { FileUpload } from "@sps-woodland/file-upload";
463
117
  import { Button } from "@sps-woodland/buttons";
464
118
 
@@ -497,7 +151,7 @@ const Ne = {
497
151
  description: "You can optionally provide a button to download a file. Typically this will be a template for whatever the user is expected to upload. They can then fill out the template, save it, and upload it.",
498
152
  examples: {
499
153
  basic: {
500
- react: _`
154
+ react: e`
501
155
  import { FileUpload } from "@sps-woodland/file-upload";
502
156
 
503
157
  function Component() {
@@ -528,7 +182,7 @@ const Ne = {
528
182
  description: "When the file upload component is to be placed in a small container, it should be marked as a mini file upload so that everything fits.",
529
183
  examples: {
530
184
  basic: {
531
- react: _`
185
+ react: e`
532
186
  import { FileUpload } from "@sps-woodland/file-upload";
533
187
 
534
188
  function Component() {
@@ -553,7 +207,7 @@ const Ne = {
553
207
  description: "If this prop is provided, the content will be restricted to 50% of the overall width of the component. Consult your product designer if you're not sure whether to use this variant.",
554
208
  examples: {
555
209
  basic: {
556
- react: _`
210
+ react: e`
557
211
  import { FileUpload } from "@sps-woodland/file-upload";
558
212
 
559
213
  function Component() {
@@ -579,7 +233,7 @@ const Ne = {
579
233
  examples: {
580
234
  basic: {
581
235
  description: "Disabled File Upload",
582
- react: _`
236
+ react: e`
583
237
  import { FileUpload } from "@sps-woodland/file-upload";
584
238
 
585
239
  function Component() {
@@ -601,10 +255,9 @@ const Ne = {
601
255
  }
602
256
  }
603
257
  }
604
- }, ze = {
605
- "File Upload": Ne
258
+ }, n = {
259
+ "File Upload": l
606
260
  };
607
261
  export {
608
- J as FileUpload,
609
- ze as MANIFEST
262
+ n as MANIFEST
610
263
  };
package/lib/index.umd.cjs CHANGED
@@ -1,4 +1,4 @@
1
- (function(s,F){typeof exports=="object"&&typeof module<"u"?F(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils"),require("@sps-woodland/buttons"),require("@sps-woodland/illustrations"),require("@spscommerce/i18n")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils","@sps-woodland/buttons","@sps-woodland/illustrations","@spscommerce/i18n"],F):(s=typeof globalThis<"u"?globalThis:s||self,F(s.FileUpload={},s.React,s.core,s.utils,s.buttons,s.illustrations,s.i18n))})(this,(function(s,F,S,d,L,A,ee){"use strict";function oe(o){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const a in o)if(a!=="default"){const t=Object.getOwnPropertyDescriptor(o,a);Object.defineProperty(l,a,t.get?t:{enumerable:!0,get:()=>o[a]})}}return l.default=o,Object.freeze(l)}const e=oe(F),V={"7Z":["application/x-7z-compressed"],AAC:["audio/aac"],ABW:["application/x-abiword"],ARC:["application/octet-stream"],AVI:["video/x-msvideo"],AZW:["application/vnd.amazon.ebook"],BIN:["application/octet-stream"],BMP:["image/bmp"],BZ:["application/x-bzip"],BZ2:["application/x-bzip2"],CER:["application/pkix-cert","application/x-x509-ca-cert"],CSH:["application/x-csh"],CSS:["text/css"],CSV:["text/csv","application/vnd.ms-excel"],DOC:["application/msword"],DOT:["application/msword"],DOCX:["application/vnd.openxmlformats-officedocument.wordprocessingml.document"],DOTX:["application/vnd.openxmlformats-officedocument.wordprocessingml.template"],DOCM:["application/vnd.ms-word.document.macroEnabled.12"],DOTM:["application/vnd.ms-word.template.macroEnabled.12"],EML:["application/octet-stream","message/rfc822","multipart/mixed","message/rfc5322","message/rfc6532"],EOT:["application/vnd.ms-fontobject"],EPUB:["application/epub+zip"],ES:["application/ecmascript"],FLV:["video/x-flv"],GIF:["image/gif"],GZ:["application/x-gzip"],HTM:["text/html"],HTML:["text/html"],ICO:["image/x-icon"],ICS:["text/calendar"],JAR:["application/java-archive"],JPEG:["image/jpeg"],JPG:["image/jpeg"],JS:["application/javascript"],JSON:["application/json"],M3U:["audio/x-mpequrl"],MID:["audio/midi"],MIDI:["audio/midi"],MOV:["video/quicktime"],MP3:["audio/mpeg3"],MP4:["video/mp4"],MPEG:["video/mpeg"],MPKG:["application/vnd.apple.installer+xml"],ODP:["application/vnd.oasis.opendocument.presentation"],ODS:["application/vnd.oasis.opendocument.spreadsheet"],ODT:["application/vnd.oasis.opendocument.text"],OGA:["audio/ogg"],OGV:["video/ogg"],OGX:["application/ogg"],OTF:["font/otf"],PNG:["image/png"],PDF:["application/pdf"],POT:["application/vnd.ms-powerpoint"],POTM:["application/vnd.ms-powerpoint.template.macroEnabled.12"],POTX:["application/vnd.openxmlformats-officedocument.presentationml.template"],PPA:["application/vnd.ms-powerpoint"],PPAM:["application/vnd.ms-powerpoint.addin.macroEnabled.12"],PPS:["application/vnd.ms-powerpoint"],PPSM:["application/vnd.ms-powerpoint.slideshow.macroEnabled.12"],PPT:["application/vnd.ms-powerpoint"],PPTM:["application/vnd.ms-powerpoint.presentation.macroEnabled.12"],PPSX:["application/vnd.openxmlformats-officedocument.presentationml.slideshow"],PPTX:["application/vnd.openxmlformats-officedocument.presentationml.presentation"],RAR:["application/x-rar-compressed"],RTF:["application/rtf"],SH:["application/x-sh"],SVG:["image/svg+xml"],SWF:["application/x-shockwave-flash"],TAR:["application/x-tar"],TIF:["image/tiff"],TIFF:["image/tiff"],TS:["application/typescript"],TTF:["font/ttf"],TXT:["text/plain"],VSD:["application/vnd.visio"],WAV:["audio/wav"],WEBA:["audio/webm"],WEBM:["video/webm"],WEBP:["image/webp"],WOFF:["font/woff"],WOFF2:["font/woff2"],XHTML:["application/xhtml+xml"],XLA:["application/vnd.ms-excel"],XLS:["application/vnd.ms-excel"],XLSB:["application/vnd.ms-excel.sheet.binary.macroEnabled.12"],XLT:["application/vnd.ms-excel"],XLAM:["application/vnd.ms-excel.addin.macroEnabled.12"],XLSM:["application/vnd.ms-excel.sheet.macroEnabled.12"],XLSX:["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],XLTM:["application/vnd.ms-excel.template.macroEnabled.12"],XLTX:["application/vnd.openxmlformats-officedocument.spreadsheetml.template"],XML:["application/xml"],XUL:["application/vnd.mozilla.xul+xml"],ZIP:["application/zip"]};function ae(o,l,a){return l in o?Object.defineProperty(o,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):o[l]=a,o}function B(o,l){var a=Object.keys(o);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(o);l&&(t=t.filter(function(p){return Object.getOwnPropertyDescriptor(o,p).enumerable})),a.push.apply(a,t)}return a}function R(o){for(var l=1;l<arguments.length;l++){var a=arguments[l]!=null?arguments[l]:{};l%2?B(Object(a),!0).forEach(function(t){ae(o,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(a)):B(Object(a)).forEach(function(t){Object.defineProperty(o,t,Object.getOwnPropertyDescriptor(a,t))})}return o}var le=(o,l,a)=>{for(var t of Object.keys(o)){var p;if(o[t]!==((p=l[t])!==null&&p!==void 0?p:a[t]))return!1}return!0},U=o=>l=>{var a=o.defaultClassName,t=R(R({},o.defaultVariants),l);for(var p in t){var h,E=(h=t[p])!==null&&h!==void 0?h:o.defaultVariants[p];if(E!=null){var c=E;typeof c=="boolean"&&(c=c===!0?"true":"false");var r=o.variantClassNames[p][c];r&&(a+=" "+r)}}for(var[j,N]of o.compoundVariants)le(j,t,o.defaultVariants)&&(a+=" "+N);return a},te=U({defaultClassName:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw0",variantClassNames:{active:{true:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw1",false:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw2"},mini:{true:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw3",false:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw4"},error:{true:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw5",false:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw6"},shown:{true:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw7",false:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw8"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw9",false:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwa"}},defaultVariants:{active:!1,mini:!1,error:!1,shown:!0,disabled:!1},compoundVariants:[]}),ie=U({defaultClassName:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwb",variantClassNames:{constrainContentWidth:{true:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwc",false:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwd"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwe",false:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwf"}},defaultVariants:{constrainContentWidth:!1,disabled:!1},compoundVariants:[]}),X="pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwg",ne=U({defaultClassName:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwh",variantClassNames:{mini:{true:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwi",false:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwj"},error:{true:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwk",false:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwl"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwm",false:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwn"}},defaultVariants:{mini:!1,error:!1,disabled:!1},compoundVariants:[]}),se=U({defaultClassName:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwo",variantClassNames:{mini:{true:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwp",false:"pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwq"}},defaultVariants:{mini:!1},compoundVariants:[]}),re="pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwr",pe="pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jws",I="pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwt",W="pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwu",de="pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwv",ce="pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jww",fe="pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwx",_e="pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwy",ue="pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwz";function z({list:o}){return e.createElement(e.Fragment,null,o.map((l,a)=>{const t=Math.floor(l.length/2);return e.createElement("div",{className:pe,key:l},e.createElement("span",{className:I},l.substring(0,t)),e.createElement("div",{className:I},e.createElement("span",null,l.substring(t))),a<o.length-1?",":"")}))}function M({constrainContentWidth:o,description:l,multiple:a=!1,dismissable:t,processing:p,mini:h,downloadLabel:E,acceptExtensions:c,maxSize:r,customRequirement:j,onSelection:N,onDismiss:G,download:q,shown:O,className:he,disabled:f,children:Ae,...ve}){const T=e.useRef(new Set),[we,Z]=e.useState(O),[Ve,ge]=e.useState([]),[Fe,Ee]=e.useState(""),[$,be]=e.useState(),[xe,C]=e.useState(!1),[b,k]=e.useState(!1),[v,H]=e.useState([]),[w,J]=e.useState([]),[x,ye]=e.useState(""),K=e.useMemo(()=>new Set([...v,...w]).size,[v,w]),{t:_}=ee.useWoodlandLanguage(),D=(a?_("fileUpload.instructions.other",{defaultValue:"Drag and drop your files here or |browse for files| on your desktop."}):_("fileUpload.instructions.one",{defaultValue:"Drag and drop your file here or |browse for a file| on your desktop."})).split("|"),Y=l||(a?"Files":"File"),u=e.useRef(null);e.useEffect(()=>{O&&Z(O)},[O]),e.useEffect(()=>{r&&Ue(r)},[r]),e.useEffect(()=>{c&&je(c)},[c]);function Se(){t&&(Z(!1),G&&G())}function Ue(i){try{be(d.parseFileSize(i))}catch{throw new Error(`Could not parse "${i}" as a file size.`)}}function je(i){const g=(Array.isArray(i)?i:i.trim().split(/\s?,\s?/)).map(n=>n.replace(/^\./,"")),m=g.map(n=>`.${n}`.toLowerCase());ye(m.map((n,P)=>P>0&&P===m.length-1?`or ${n}`:n).join(m.length>2?", ":" ")),T.current.clear();for(const n of g){const P=Object.keys(V).includes(n.toUpperCase())?V[n.toUpperCase()]:[];for(const Ne of P)T.current.add(Ne)}Ee(m.concat(Array.from(T.current)).join(","))}function Q(i){H([]),J([]);let y=[],g=[];const m=i?Array.from(i):[];for(const n of m)c&&!T.current.has(n.type)&&g.push(n.name),r&&$&&n.size>$&&y.push(n.name);y.length||g.length?(k(!0),u.current&&u.current.value&&(u.current.value="")):(ge(m),N(m)),H(y),J(g)}function Oe(i){i.preventDefault(),k(!1),u.current&&u.current.click()}function Te(){q&&q()}function Ce(i){i.stopPropagation(),Q(i.target.files),u.current&&u.current.value&&(u.current.value="")}function ke(i){i.preventDefault(),i.stopPropagation(),C(!0),k(!1)}function De(i){i.preventDefault(),C(!0),k(!1)}function Pe(i){i.preventDefault(),C(!1)}function Me(i){i.preventDefault(),i.stopPropagation(),C(!1),i.dataTransfer.files&&Q(i.dataTransfer.files)}return e.createElement("div",{onDrop:f?()=>{}:Me,onDragOver:f?()=>{}:ke,onDragLeave:f?()=>{}:Pe,onDragEnter:f?()=>{}:De,className:S.cl(te({active:xe,mini:h,error:b,shown:we,disabled:f}),he),...ve},e.createElement("div",{className:S.cl(ie({constrainContentWidth:o,disabled:f}))},p?e.createElement("div",null,e.createElement(S.Spinner,{size:"md","aria-hidden":"true"}),e.createElement("div",{className:X},_("fileUpload.processing",{defaultValue:"Processing Upload..."}))):e.createElement("div",null,e.createElement("div",{className:ne({mini:h,error:b,disabled:f}),"aria-hidden":"true"},e.createElement("img",{className:ue,src:b?A.GENERAL_ERROR_LARGE:A.UPLOAD_LARGE,alt:"Upload Icon"})),e.createElement("div",{className:se({mini:h})},b?e.createElement("div",null,_(K>1?"fileUpload.cancelled.other":"fileUpload.cancelled.one",{defaultValue:K>1?"File Upload(s) Failed":"File Upload Failed"})):e.createElement("div",null,_("fileUpload.title",{description:Y,defaultValue:`Upload your ${Y}`}))),b?e.createElement("div",{className:re},v.length>0&&e.createElement(e.Fragment,null,e.createElement(z,{list:v}),e.createElement("div",{className:W},_(v.length===1?"fileUpload.error.tooLarge.one":"fileUpload.error.tooLarge.other",{size:r,defaultValue:v.length===1?`Selected file is larger than the size limit of ${r}.`:`Selected files are larger than the size limit of ${r}.`}))),w.length>0&&e.createElement(e.Fragment,null,e.createElement(z,{list:w}),e.createElement("div",{className:W},_(w.length===1?"fileUpload.error.wrongType.one":"fileUpload.error.wrongType.other",{fileTypes:x,defaultValue:w.length===1?`Selected file is not an accepted file type: ${x}.`:`Selected files are not accepted file types: ${x}.`})))):e.createElement("span",null),e.createElement("div",{className:X},e.createElement("div",null,e.createElement("span",null,D[0]),f?e.createElement("u",null,D[1]):e.createElement("a",{href:"",onClick:Oe},D[1]),e.createElement("span",null,D[2]))),e.createElement("div",{className:de},c?e.createElement("span",null,"("," ",_("fileUpload.acceptedTypes",{fileTypes:x,defaultValue:`${x} format accepted`})," ",")"):"",r?e.createElement("span",null,"("," ",_("fileUpload.maximumSize",{size:r,defaultValue:`${r} maximum`})," ",")"):"",j?e.createElement("span",null," ",j," "):""),E&&e.createElement("div",{className:ce},e.createElement(L.Button,{disabled:f,kind:"link",icon:"download-cloud",onClick:Te},E)))),t&&!p&&e.createElement("div",{className:fe},e.createElement(L.Button,{disabled:f,kind:"icon",icon:"x",title:_("fileUpload.close",{defaultValue:"Close"}),onClick:Se})),e.createElement("form",{className:_e},e.createElement("input",{ref:u,type:"file",accept:Fe||"*/*",multiple:a||void 0,onChange:Ce})))}S.Metadata.set(M,{name:"FileUpload",props:{constrainContentWidth:{type:"boolean"},description:{type:"string"},multiple:{type:"boolean"},dismissable:{type:"boolean"},mini:{type:"boolean"},downloadLabel:{type:"string"},acceptExtensions:{type:"string[] | string"},maxSize:{type:"string"},customRequirement:{type:"string"},onSelection:{type:"(files: File[]) => void",required:!0},dismissal:{type:"() => void"},download:{type:"() => void"},disabled:{type:"boolean"}}});const me={"File Upload":{components:[M],examples:{basic:{label:"Basic File Upload",description:"Simply allow the user to drag-and-drop or select a single file or multiple files at once.",examples:{basic:{description:"Single file upload",react:d.code`
1
+ (function(e,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("@sps-woodland/core/file-upload"),require("@spscommerce/utils")):typeof define=="function"&&define.amd?define(["exports","@sps-woodland/core/file-upload","@spscommerce/utils"],l):(e=typeof globalThis<"u"?globalThis:e||self,l(e.FileUpload={},e.fileUpload,e.utils))})(this,(function(e,l,o){"use strict";const t={"File Upload":{components:[l.FileUpload],examples:{basic:{label:"Basic File Upload",description:"Simply allow the user to drag-and-drop or select a single file or multiple files at once.",examples:{basic:{description:"Single file upload",react:o.code`
2
2
  import { FileUpload } from "@sps-woodland/file-upload";
3
3
 
4
4
  function Component() {
@@ -10,7 +10,7 @@
10
10
  <FileUpload onSelection={selectFile} />
11
11
  )
12
12
  }
13
- `},multiple:{description:"Multiple file upload",react:d.code`
13
+ `},multiple:{description:"Multiple file upload",react:o.code`
14
14
  import { FileUpload } from "@sps-woodland/file-upload";
15
15
 
16
16
  function Component() {
@@ -22,7 +22,7 @@
22
22
  <FileUpload onSelection={selectFile} multiple />
23
23
  )
24
24
  }
25
- `}}},restrictions:{label:"Restrictions",description:"You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.",examples:{maxSize:{description:"Maximum size",react:d.code`
25
+ `}}},restrictions:{label:"Restrictions",description:"You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.",examples:{maxSize:{description:"Maximum size",react:o.code`
26
26
  import { FileUpload } from "@sps-woodland/file-upload";
27
27
 
28
28
  function Component() {
@@ -34,7 +34,7 @@
34
34
  <FileUpload onSelection={selectFile} maxSize="100KB" />
35
35
  )
36
36
  }
37
- `},fileWhitelist:{description:"File type whitelist",react:d.code`
37
+ `},fileWhitelist:{description:"File type whitelist",react:o.code`
38
38
  import { FileUpload } from "@sps-woodland/file-upload";
39
39
 
40
40
  function Component() {
@@ -51,7 +51,7 @@
51
51
  />
52
52
  )
53
53
  }
54
- `},bothRestrictions:{description:"Both restrictions",react:d.code`
54
+ `},bothRestrictions:{description:"Both restrictions",react:o.code`
55
55
  import { FileUpload } from "@sps-woodland/file-upload";
56
56
 
57
57
  function Component() {
@@ -69,7 +69,7 @@
69
69
  />
70
70
  )
71
71
  }
72
- `}}},dismissable:{label:"Dismissable",description:"With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can show it again programmatically if you need to.",examples:{basic:{react:d.code`
72
+ `}}},dismissable:{label:"Dismissable",description:"With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can show it again programmatically if you need to.",examples:{basic:{react:o.code`
73
73
  import { FileUpload } from "@sps-woodland/file-upload";
74
74
  import { Button } from "@sps-woodland/buttons";
75
75
 
@@ -99,7 +99,7 @@
99
99
  </>
100
100
  )
101
101
  }
102
- `}}},download:{label:"Download Button",description:"You can optionally provide a button to download a file. Typically this will be a template for whatever the user is expected to upload. They can then fill out the template, save it, and upload it.",examples:{basic:{react:d.code`
102
+ `}}},download:{label:"Download Button",description:"You can optionally provide a button to download a file. Typically this will be a template for whatever the user is expected to upload. They can then fill out the template, save it, and upload it.",examples:{basic:{react:o.code`
103
103
  import { FileUpload } from "@sps-woodland/file-upload";
104
104
 
105
105
  function Component() {
@@ -121,7 +121,7 @@
121
121
  />
122
122
  )
123
123
  }
124
- `}}},mini:{label:"Mini File Upload",description:"When the file upload component is to be placed in a small container, it should be marked as a mini file upload so that everything fits.",examples:{basic:{react:d.code`
124
+ `}}},mini:{label:"Mini File Upload",description:"When the file upload component is to be placed in a small container, it should be marked as a mini file upload so that everything fits.",examples:{basic:{react:o.code`
125
125
  import { FileUpload } from "@sps-woodland/file-upload";
126
126
 
127
127
  function Component() {
@@ -137,7 +137,7 @@
137
137
  </div>
138
138
  )
139
139
  }
140
- `}}},constrainContentWidth:{label:"Constrain Content Width",description:"If this prop is provided, the content will be restricted to 50% of the overall width of the component. Consult your product designer if you're not sure whether to use this variant.",examples:{basic:{react:d.code`
140
+ `}}},constrainContentWidth:{label:"Constrain Content Width",description:"If this prop is provided, the content will be restricted to 50% of the overall width of the component. Consult your product designer if you're not sure whether to use this variant.",examples:{basic:{react:o.code`
141
141
  import { FileUpload } from "@sps-woodland/file-upload";
142
142
 
143
143
  function Component() {
@@ -153,7 +153,7 @@
153
153
  </div>
154
154
  )
155
155
  }
156
- `}}},disabled:{label:"Disabled State",description:"File Upload have a disabled style for each possible state.",examples:{basic:{description:"Disabled File Upload",react:d.code`
156
+ `}}},disabled:{label:"Disabled State",description:"File Upload have a disabled style for each possible state.",examples:{basic:{description:"Disabled File Upload",react:o.code`
157
157
  import { FileUpload } from "@sps-woodland/file-upload";
158
158
 
159
159
  function Component() {
@@ -170,4 +170,4 @@
170
170
  onSelection={selectFile} />
171
171
  )
172
172
  }
173
- `}}}}}};s.FileUpload=M,s.MANIFEST=me,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));
173
+ `}}}}}};e.MANIFEST=t,Object.keys(l).forEach(i=>{i!=="default"&&!Object.prototype.hasOwnProperty.call(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:()=>l[i]})}),Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
package/lib/style.css CHANGED
@@ -1 +1 @@
1
- .pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw0{border-width:.0625rem;border-style:dashed;border-radius:.25rem;display:block;padding:1rem;position:relative}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw1{background-color:#f4ecf2;border-color:#91467f;border-style:solid}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw3{padding:1rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw5{border-color:#de002e}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw8{display:none}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jw9{border-color:#d2d4d4}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwb{color:#4b5356;margin:0 auto;text-align:center}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwc{width:50%}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwe{color:#717779}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwg{font-size:.75rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwh{color:#717779;display:block;margin-bottom:1rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwi{font-size:1.5rem;line-height:1.5rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwj{font-size:3rem;line-height:3rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwk{color:#de002e}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwm{opacity:.5}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwo{font-weight:600;margin-bottom:.25rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwp{font-size:1rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwq{font-size:1.125rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwr{font-size:.875rem;font-weight:600;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jws{display:flex;justify-content:center;white-space:nowrap}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwt{max-width:50%;overflow:hidden}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwt:first-child{text-overflow:ellipsis}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwt:last-child{float:right}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwu{font-weight:400}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwv{font-size:.75rem;line-height:1.125rem;margin-top:.25rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwv>span+span{margin-left:.125rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jww{margin-top:1rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwx{position:absolute;right:.5rem;top:.5rem}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwy{display:none}.pkg_sps-woodland_file-upload__version_8_50_1__hash_rh07jwz{height:3rem}
1
+ .pkg_sps-woodland_core__version_8_51_0__hash_17kn1zk0{border-width:.0625rem;border-style:dashed;border-radius:.25rem;display:block;padding:1rem;position:relative}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zk1{background-color:#f4ecf2;border-color:#91467f;border-style:solid}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zk3{padding:1rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zk5{border-color:#de002e}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zk8{display:none}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zk9{border-color:#d2d4d4}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkb{color:#4b5356;margin:0 auto;text-align:center}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkc{width:50%}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zke{color:#717779}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkg{font-size:.75rem;line-height:1.25rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkh{color:#717779;display:block;margin-bottom:1rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zki{font-size:1.5rem;line-height:1.5rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkj{font-size:3rem;line-height:3rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkk{color:#de002e}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkm{opacity:.5}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zko{font-weight:600;margin-bottom:.25rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkp{font-size:1rem;line-height:1.25rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkq{font-size:1.125rem;line-height:1.25rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkr{font-size:.875rem;font-weight:600;line-height:1.25rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zks{display:flex;justify-content:center;white-space:nowrap}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkt{max-width:50%;overflow:hidden}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkt:first-child{text-overflow:ellipsis}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkt:last-child{float:right}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zku{font-weight:400}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkv{font-size:.75rem;line-height:1.125rem;margin-top:.25rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkv>span+span{margin-left:.125rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkw{margin-top:1rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkx{position:absolute;right:.5rem;top:.5rem}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zky{display:none}.pkg_sps-woodland_core__version_8_51_0__hash_17kn1zkz{height:3rem}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sps-woodland/file-upload",
3
3
  "description": "SPS Woodland Design System file upload component",
4
- "version": "8.50.1",
4
+ "version": "8.51.0",
5
5
  "author": "SPS Commerce",
6
6
  "license": "UNLICENSED",
7
7
  "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/file-upload",
@@ -20,44 +20,32 @@
20
20
  "./lib/style.css": {
21
21
  "import": "./lib/style.css",
22
22
  "require": "./lib/style.css"
23
+ },
24
+ "./style.css": {
25
+ "import": "./lib/style.css",
26
+ "require": "./lib/style.css"
23
27
  }
24
28
  },
25
29
  "publishConfig": {
26
30
  "access": "public"
27
31
  },
28
32
  "peerDependencies": {
29
- "@spscommerce/ds-illustrations": "6.12.1",
30
33
  "@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
31
34
  "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
32
35
  "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
33
- "@sps-woodland/buttons": "8.50.1",
34
- "@sps-woodland/core": "8.50.1",
35
- "@sps-woodland/illustrations": "8.50.1",
36
- "@sps-woodland/tokens": "8.50.1",
37
- "@spscommerce/ds-react": "8.50.1",
38
- "@spscommerce/ds-shared": "8.50.1",
39
- "@spscommerce/i18n": "8.50.1"
36
+ "@sps-woodland/core": "8.51.0"
40
37
  },
41
38
  "devDependencies": {
42
- "@spscommerce/ds-illustrations": "6.12.1",
43
39
  "@spscommerce/utils": "9.0.3",
44
- "@vanilla-extract/css": "1.17.4",
45
- "@vanilla-extract/recipes": "0.2.5",
46
40
  "react": "16.14.0",
47
41
  "react-dom": "16.14.0",
48
- "@sps-woodland/buttons": "8.50.1",
49
- "@sps-woodland/core": "8.50.1",
50
- "@sps-woodland/illustrations": "8.50.1",
51
- "@sps-woodland/tokens": "8.50.1",
52
- "@spscommerce/ds-colors": "8.50.1",
53
- "@spscommerce/ds-react": "8.50.1",
54
- "@spscommerce/ds-shared": "8.50.1",
55
- "@spscommerce/i18n": "8.50.1"
42
+ "@sps-woodland/core": "8.51.0"
56
43
  },
57
44
  "scripts": {
58
- "build": "pnpm run build:js && pnpm run build:types",
45
+ "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
59
46
  "build:js": "vite build",
60
47
  "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
48
+ "build:css": "cp ../core/lib/file-upload/style.css lib/style.css 2>/dev/null || echo 'file-upload style.css not found, skipping'",
61
49
  "watch": "vite build --watch",
62
50
  "clean": "git clean -fdX",
63
51
  "pub": "node ../../../scripts/publish-package.mjs"
package/vite.config.mjs CHANGED
@@ -1,31 +1,22 @@
1
1
  import path from "node:path";
2
- import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
3
2
  import { defineConfig } from "vite";
4
- import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.mjs";
5
3
  import pkg from "./package.json";
6
4
 
7
- const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
8
-
9
5
  export default defineConfig({
10
- plugins: [
11
- vanillaExtractPlugin(
12
- getVanillaExtractPluginProps({
13
- packageName: pkg.name,
14
- packageVersion,
15
- })
16
- ),
17
- ],
18
6
  build: {
19
7
  lib: {
20
8
  entry: path.resolve(__dirname, "src/index.ts"),
21
9
  name: "FileUpload",
22
10
  fileName: "index",
23
- cssFileName: "style",
24
11
  },
25
12
  outDir: path.resolve(__dirname, "./lib"),
26
13
  emptyOutDir: false,
27
14
  rollupOptions: {
28
- external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
15
+ // External must match subpath imports like @sps-woodland/core/file-upload
16
+ external: (id) => {
17
+ const peerDeps = pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [];
18
+ return peerDeps.some((dep) => id === dep || id.startsWith(dep + "/"));
19
+ },
29
20
  },
30
21
  },
31
22
  });
@@ -1,94 +0,0 @@
1
- export declare const fileUpload: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
2
- active: {
3
- true: {
4
- backgroundColor: string;
5
- borderColor: string;
6
- borderStyle: "solid";
7
- };
8
- false: {};
9
- };
10
- mini: {
11
- true: {
12
- padding: string;
13
- };
14
- false: {};
15
- };
16
- error: {
17
- true: {
18
- borderColor: string;
19
- };
20
- false: {};
21
- };
22
- shown: {
23
- true: {};
24
- false: {
25
- display: "none";
26
- };
27
- };
28
- disabled: {
29
- true: {
30
- borderColor: string;
31
- };
32
- false: {};
33
- };
34
- }>;
35
- export declare const fileUploadContent: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
36
- constrainContentWidth: {
37
- true: {
38
- width: "50%";
39
- };
40
- false: {};
41
- };
42
- disabled: {
43
- true: {
44
- color: string;
45
- };
46
- false: {};
47
- };
48
- }>;
49
- export declare const fileUploadInstructions: string;
50
- export declare const fileUploadIcon: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
51
- mini: {
52
- true: {
53
- fontSize: string;
54
- lineHeight: string;
55
- };
56
- false: {
57
- fontSize: string;
58
- lineHeight: string;
59
- };
60
- };
61
- error: {
62
- true: {
63
- color: string;
64
- };
65
- false: {};
66
- };
67
- disabled: {
68
- true: {
69
- opacity: number;
70
- };
71
- false: {};
72
- };
73
- }>;
74
- export declare const fileUploadTitle: import("@vanilla-extract/recipes/dist/declarations/src/types").RuntimeFn<{
75
- mini: {
76
- true: {
77
- fontSize: string;
78
- lineHeight: string;
79
- };
80
- false: {
81
- fontSize: string;
82
- lineHeight: string;
83
- };
84
- };
85
- }>;
86
- export declare const erroredFiles: string;
87
- export declare const erroredFileName: string;
88
- export declare const erroredFilenameSegment: string;
89
- export declare const erroredFileMessage: string;
90
- export declare const fileUploadRequirements: string;
91
- export declare const fileUploadDownloadButton: string;
92
- export declare const fileUploadCloseButton: string;
93
- export declare const fileUploadForm: string;
94
- export declare const fileUploadImage: string;
@@ -1,19 +0,0 @@
1
- import * as React from "react";
2
- import { ComponentProps } from "@sps-woodland/core";
3
- export declare function FileUpload({ constrainContentWidth, description, multiple, dismissable, processing, mini, downloadLabel, acceptExtensions, maxSize, customRequirement, onSelection, onDismiss, download, shown, className, disabled, children, ...rest }: ComponentProps<{
4
- constrainContentWidth?: boolean;
5
- description?: string;
6
- multiple?: boolean;
7
- dismissable?: boolean;
8
- processing?: boolean;
9
- mini?: boolean;
10
- downloadLabel?: string;
11
- acceptExtensions?: string[] | string;
12
- maxSize?: string;
13
- customRequirement?: string;
14
- shown?: boolean;
15
- onSelection: (files: File[]) => void;
16
- onDismiss?: () => void;
17
- download?: () => void;
18
- disabled?: boolean;
19
- }>): React.ReactElement;
@@ -1,97 +0,0 @@
1
- export declare const MIMEType: {
2
- "7Z": string[];
3
- AAC: string[];
4
- ABW: string[];
5
- ARC: string[];
6
- AVI: string[];
7
- AZW: string[];
8
- BIN: string[];
9
- BMP: string[];
10
- BZ: string[];
11
- BZ2: string[];
12
- CER: string[];
13
- CSH: string[];
14
- CSS: string[];
15
- CSV: string[];
16
- DOC: string[];
17
- DOT: string[];
18
- DOCX: string[];
19
- DOTX: string[];
20
- DOCM: string[];
21
- DOTM: string[];
22
- EML: string[];
23
- EOT: string[];
24
- EPUB: string[];
25
- ES: string[];
26
- FLV: string[];
27
- GIF: string[];
28
- GZ: string[];
29
- HTM: string[];
30
- HTML: string[];
31
- ICO: string[];
32
- ICS: string[];
33
- JAR: string[];
34
- JPEG: string[];
35
- JPG: string[];
36
- JS: string[];
37
- JSON: string[];
38
- M3U: string[];
39
- MID: string[];
40
- MIDI: string[];
41
- MOV: string[];
42
- MP3: string[];
43
- MP4: string[];
44
- MPEG: string[];
45
- MPKG: string[];
46
- ODP: string[];
47
- ODS: string[];
48
- ODT: string[];
49
- OGA: string[];
50
- OGV: string[];
51
- OGX: string[];
52
- OTF: string[];
53
- PNG: string[];
54
- PDF: string[];
55
- POT: string[];
56
- POTM: string[];
57
- POTX: string[];
58
- PPA: string[];
59
- PPAM: string[];
60
- PPS: string[];
61
- PPSM: string[];
62
- PPT: string[];
63
- PPTM: string[];
64
- PPSX: string[];
65
- PPTX: string[];
66
- RAR: string[];
67
- RTF: string[];
68
- SH: string[];
69
- SVG: string[];
70
- SWF: string[];
71
- TAR: string[];
72
- TIF: string[];
73
- TIFF: string[];
74
- TS: string[];
75
- TTF: string[];
76
- TXT: string[];
77
- VSD: string[];
78
- WAV: string[];
79
- WEBA: string[];
80
- WEBM: string[];
81
- WEBP: string[];
82
- WOFF: string[];
83
- WOFF2: string[];
84
- XHTML: string[];
85
- XLA: string[];
86
- XLS: string[];
87
- XLSB: string[];
88
- XLT: string[];
89
- XLAM: string[];
90
- XLSM: string[];
91
- XLSX: string[];
92
- XLTM: string[];
93
- XLTX: string[];
94
- XML: string[];
95
- XUL: string[];
96
- ZIP: string[];
97
- };