@sps-woodland/file-upload 8.53.4 → 8.53.5

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,358 +1,8 @@
1
- import * as e from "react";
2
- import { Metadata as we, cl as W, Spinner as ge } from "@sps-woodland/core";
3
- import { parseFileSize as Fe, code as _ } from "@spscommerce/utils";
4
- import { Button as z } from "@sps-woodland/buttons";
5
- import { GENERAL_ERROR_LARGE as Ee, UPLOAD_LARGE as xe } from "@sps-woodland/illustrations";
6
- import { useWoodlandLanguage as be } from "@spscommerce/i18n";
7
- const G = {
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
- EDI: ["application/edi-x12", "application/edifact"],
29
- EML: [
30
- "application/octet-stream",
31
- "message/rfc822",
32
- "multipart/mixed",
33
- "message/rfc5322",
34
- "message/rfc6532"
35
- ],
36
- EOT: ["application/vnd.ms-fontobject"],
37
- EPUB: ["application/epub+zip"],
38
- ES: ["application/ecmascript"],
39
- FLV: ["video/x-flv"],
40
- GIF: ["image/gif"],
41
- GZ: ["application/x-gzip"],
42
- HTM: ["text/html"],
43
- HTML: ["text/html"],
44
- ICO: ["image/x-icon"],
45
- ICS: ["text/calendar"],
46
- JAR: ["application/java-archive"],
47
- JPEG: ["image/jpeg"],
48
- JPG: ["image/jpeg"],
49
- JS: ["application/javascript"],
50
- JSON: ["application/json"],
51
- M3U: ["audio/x-mpequrl"],
52
- MID: ["audio/midi"],
53
- MIDI: ["audio/midi"],
54
- MOV: ["video/quicktime"],
55
- MP3: ["audio/mpeg3"],
56
- MP4: ["video/mp4"],
57
- MPEG: ["video/mpeg"],
58
- MPKG: ["application/vnd.apple.installer+xml"],
59
- ODP: ["application/vnd.oasis.opendocument.presentation"],
60
- ODS: ["application/vnd.oasis.opendocument.spreadsheet"],
61
- ODT: ["application/vnd.oasis.opendocument.text"],
62
- OGA: ["audio/ogg"],
63
- OGV: ["video/ogg"],
64
- OGX: ["application/ogg"],
65
- OTF: ["font/otf"],
66
- PNG: ["image/png"],
67
- PDF: ["application/pdf"],
68
- POT: ["application/vnd.ms-powerpoint"],
69
- POTM: ["application/vnd.ms-powerpoint.template.macroEnabled.12"],
70
- POTX: ["application/vnd.openxmlformats-officedocument.presentationml.template"],
71
- PPA: ["application/vnd.ms-powerpoint"],
72
- PPAM: ["application/vnd.ms-powerpoint.addin.macroEnabled.12"],
73
- PPS: ["application/vnd.ms-powerpoint"],
74
- PPSM: ["application/vnd.ms-powerpoint.slideshow.macroEnabled.12"],
75
- PPT: ["application/vnd.ms-powerpoint"],
76
- PPTM: ["application/vnd.ms-powerpoint.presentation.macroEnabled.12"],
77
- PPSX: ["application/vnd.openxmlformats-officedocument.presentationml.slideshow"],
78
- PPTX: ["application/vnd.openxmlformats-officedocument.presentationml.presentation"],
79
- RAR: ["application/x-rar-compressed"],
80
- RTF: ["application/rtf"],
81
- SH: ["application/x-sh"],
82
- SVG: ["image/svg+xml"],
83
- SWF: ["application/x-shockwave-flash"],
84
- TAR: ["application/x-tar"],
85
- TIF: ["image/tiff"],
86
- TIFF: ["image/tiff"],
87
- TS: ["application/typescript"],
88
- TTF: ["font/ttf"],
89
- TXT: ["text/plain"],
90
- VSD: ["application/vnd.visio"],
91
- WAV: ["audio/wav"],
92
- WEBA: ["audio/webm"],
93
- WEBM: ["video/webm"],
94
- WEBP: ["image/webp"],
95
- WOFF: ["font/woff"],
96
- WOFF2: ["font/woff2"],
97
- XHTML: ["application/xhtml+xml"],
98
- XLA: ["application/vnd.ms-excel"],
99
- XLS: ["application/vnd.ms-excel"],
100
- XLSB: ["application/vnd.ms-excel.sheet.binary.macroEnabled.12"],
101
- XLT: ["application/vnd.ms-excel"],
102
- XLAM: ["application/vnd.ms-excel.addin.macroEnabled.12"],
103
- XLSM: ["application/vnd.ms-excel.sheet.macroEnabled.12"],
104
- XLSX: ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
105
- XLTM: ["application/vnd.ms-excel.template.macroEnabled.12"],
106
- XLTX: ["application/vnd.openxmlformats-officedocument.spreadsheetml.template"],
107
- XML: ["application/xml"],
108
- XUL: ["application/vnd.mozilla.xul+xml"],
109
- ZIP: ["application/zip"]
110
- };
111
- function ye(o, i, l) {
112
- return i in o ? Object.defineProperty(o, i, {
113
- value: l,
114
- enumerable: !0,
115
- configurable: !0,
116
- writable: !0
117
- }) : o[i] = l, o;
118
- }
119
- function Z(o, i) {
120
- var l = Object.keys(o);
121
- if (Object.getOwnPropertySymbols) {
122
- var t = Object.getOwnPropertySymbols(o);
123
- i && (t = t.filter(function(r) {
124
- return Object.getOwnPropertyDescriptor(o, r).enumerable;
125
- })), l.push.apply(l, t);
126
- }
127
- return l;
128
- }
129
- function $(o) {
130
- for (var i = 1; i < arguments.length; i++) {
131
- var l = arguments[i] != null ? arguments[i] : {};
132
- i % 2 ? Z(Object(l), !0).forEach(function(t) {
133
- ye(o, t, l[t]);
134
- }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(o, Object.getOwnPropertyDescriptors(l)) : Z(Object(l)).forEach(function(t) {
135
- Object.defineProperty(o, t, Object.getOwnPropertyDescriptor(l, t));
136
- });
137
- }
138
- return o;
139
- }
140
- var Se = (o, i, l) => {
141
- for (var t of Object.keys(o)) {
142
- var r;
143
- if (o[t] !== ((r = i[t]) !== null && r !== void 0 ? r : l[t]))
144
- return !1;
145
- }
146
- return !0;
147
- }, T = (o) => (i) => {
148
- var l = o.defaultClassName, t = $($({}, o.defaultVariants), i);
149
- for (var r in t) {
150
- var m, F = (m = t[r]) !== null && m !== void 0 ? m : o.defaultVariants[r];
151
- if (F != null) {
152
- var p = F;
153
- typeof p == "boolean" && (p = p === !0 ? "true" : "false");
154
- var s = (
155
- // @ts-expect-error
156
- o.variantClassNames[r][p]
157
- );
158
- s && (l += " " + s);
159
- }
160
- }
161
- for (var [y, D] of o.compoundVariants)
162
- Se(y, t, o.defaultVariants) && (l += " " + D);
163
- return l;
164
- }, Ue = T({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw0", variantClassNames: { active: { true: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw1", false: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw2" }, mini: { true: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw3", false: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw4" }, error: { true: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw5", false: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw6" }, shown: { true: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw7", false: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw8" }, disabled: { true: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw9", false: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwa" } }, defaultVariants: { active: !1, mini: !1, error: !1, shown: !0, disabled: !1 }, compoundVariants: [] }), Ce = T({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwb", variantClassNames: { constrainContentWidth: { true: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwc", false: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwd" }, disabled: { true: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwe", false: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwf" } }, defaultVariants: { constrainContentWidth: !1, disabled: !1 }, compoundVariants: [] }), q = "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwg", je = T({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwh", variantClassNames: { mini: { true: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwi", false: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwj" }, error: { true: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwk", false: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwl" }, disabled: { true: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwm", false: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwn" } }, defaultVariants: { mini: !1, error: !1, disabled: !1 }, compoundVariants: [] }), ke = T({ defaultClassName: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwo", variantClassNames: { mini: { true: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwp", false: "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwq" } }, defaultVariants: { mini: !1 }, compoundVariants: [] }), Te = "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwr", De = "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jws", H = "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwt", J = "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwu", Oe = "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwv", Pe = "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jww", Le = "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwx", Me = "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwy", Ne = "pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwz";
165
- function K({ list: o }) {
166
- return /* @__PURE__ */ e.createElement(e.Fragment, null, o.map((i, l) => {
167
- const t = Math.floor(i.length / 2);
168
- return /* @__PURE__ */ e.createElement("div", { className: De, key: i }, /* @__PURE__ */ e.createElement("span", { className: H }, i.substring(0, t)), /* @__PURE__ */ e.createElement("div", { className: H }, /* @__PURE__ */ e.createElement("span", null, i.substring(t))), l < o.length - 1 ? "," : "");
169
- }));
170
- }
171
- function Y({
172
- constrainContentWidth: o,
173
- description: i,
174
- multiple: l = !1,
175
- dismissable: t,
176
- processing: r,
177
- mini: m,
178
- downloadLabel: F,
179
- acceptExtensions: p,
180
- maxSize: s,
181
- customRequirement: y,
182
- onSelection: D,
183
- onDismiss: L,
184
- download: M,
185
- shown: S,
186
- className: Q,
187
- disabled: d,
188
- children: Ve,
189
- ...ee
190
- }) {
191
- const U = e.useRef(/* @__PURE__ */ new Set()), O = e.useRef(/* @__PURE__ */ new Set()), [oe, N] = e.useState(S), [Be, ae] = e.useState([]), [le, te] = e.useState(""), [A, ie] = e.useState(), [ne, C] = e.useState(!1), [E, j] = e.useState(!1), [h, V] = e.useState([]), [v, B] = e.useState([]), [x, se] = e.useState(""), R = e.useMemo(() => (/* @__PURE__ */ new Set([...h, ...v])).size, [h, v]), { t: c } = be(), k = (l ? c("fileUpload.instructions.other", {
192
- defaultValue: "Drag and drop your files here or |browse for files| on your desktop."
193
- }) : c("fileUpload.instructions.one", {
194
- defaultValue: "Drag and drop your file here or |browse for a file| on your desktop."
195
- })).split("|"), X = i || (l ? "Files" : "File"), f = e.useRef(null);
196
- e.useEffect(() => {
197
- S && N(S);
198
- }, [S]), e.useEffect(() => {
199
- s && pe(s);
200
- }, [s]), e.useEffect(() => {
201
- p && de(p);
202
- }, [p]);
203
- function re() {
204
- t && (N(!1), L && L());
205
- }
206
- function pe(a) {
207
- try {
208
- ie(Fe(a));
209
- } catch {
210
- throw new Error(`Could not parse "${a}" as a file size.`);
211
- }
212
- }
213
- function de(a) {
214
- const w = (Array.isArray(a) ? a : a.trim().split(/\s?,\s?/)).map((n) => n.replace(/^\./, "")), u = w.map((n) => `.${n}`.toLowerCase());
215
- se(
216
- u.map((n, g) => g > 0 && g === u.length - 1 ? `or ${n}` : n).join(u.length > 2 ? ", " : " ")
217
- ), U.current.clear(), O.current.clear();
218
- for (const n of w) {
219
- O.current.add(n.toLowerCase());
220
- const g = Object.keys(G).includes(n.toUpperCase()) ? G[n.toUpperCase()] : [];
221
- for (const P of g)
222
- U.current.add(P);
223
- }
224
- te(u.concat(Array.from(U.current)).join(","));
225
- }
226
- function I(a) {
227
- V([]), B([]);
228
- let b = [], w = [];
229
- const u = a ? Array.from(a) : [];
230
- for (const n of u) {
231
- const g = n.name.split(".").pop()?.toLowerCase() ?? "", P = n.type ? U.current.has(n.type) : O.current.has(g);
232
- p && !P && w.push(n.name), s && A && n.size > A && b.push(n.name);
233
- }
234
- b.length || w.length ? (j(!0), f.current && f.current.value && (f.current.value = "")) : (ae(u), D(u)), V(b), B(w);
235
- }
236
- function ce(a) {
237
- a.preventDefault(), j(!1), f.current && f.current.click();
238
- }
239
- function _e() {
240
- M && M();
241
- }
242
- function fe(a) {
243
- a.stopPropagation(), I(a.target.files), f.current && f.current.value && (f.current.value = "");
244
- }
245
- function ue(a) {
246
- a.preventDefault(), a.stopPropagation(), C(!0), j(!1);
247
- }
248
- function me(a) {
249
- a.preventDefault(), C(!0), j(!1);
250
- }
251
- function he(a) {
252
- a.preventDefault(), C(!1);
253
- }
254
- function ve(a) {
255
- a.preventDefault(), a.stopPropagation(), C(!1), a.dataTransfer.files && I(a.dataTransfer.files);
256
- }
257
- return /* @__PURE__ */ e.createElement(
258
- "div",
259
- {
260
- onDrop: d ? () => {
261
- } : ve,
262
- onDragOver: d ? () => {
263
- } : ue,
264
- onDragLeave: d ? () => {
265
- } : he,
266
- onDragEnter: d ? () => {
267
- } : me,
268
- className: W(Ue({ active: ne, mini: m, error: E, shown: oe, disabled: d }), Q),
269
- ...ee
270
- },
271
- /* @__PURE__ */ e.createElement("div", { className: W(Ce({ constrainContentWidth: o, disabled: d })) }, r ? /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(ge, { size: "md", "aria-hidden": "true" }), /* @__PURE__ */ e.createElement("div", { className: q }, c("fileUpload.processing", { defaultValue: "Processing Upload..." }))) : /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("div", { className: je({ mini: m, error: E, disabled: d }), "aria-hidden": "true" }, /* @__PURE__ */ e.createElement(
272
- "img",
273
- {
274
- className: Ne,
275
- src: E ? Ee : xe,
276
- alt: "Upload Icon"
277
- }
278
- )), /* @__PURE__ */ e.createElement("div", { className: ke({ mini: m }) }, E ? /* @__PURE__ */ e.createElement("div", null, c(
279
- R > 1 ? "fileUpload.cancelled.other" : "fileUpload.cancelled.one",
280
- {
281
- defaultValue: R > 1 ? "File Upload(s) Failed" : "File Upload Failed"
282
- }
283
- )) : /* @__PURE__ */ e.createElement("div", null, c("fileUpload.title", {
284
- description: X,
285
- defaultValue: `Upload your ${X}`
286
- }))), E ? /* @__PURE__ */ e.createElement("div", { className: Te }, h.length > 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(K, { list: h }), /* @__PURE__ */ e.createElement("div", { className: J }, c(
287
- h.length === 1 ? "fileUpload.error.tooLarge.one" : "fileUpload.error.tooLarge.other",
288
- {
289
- size: s,
290
- defaultValue: h.length === 1 ? `Selected file is larger than the size limit of ${s}.` : `Selected files are larger than the size limit of ${s}.`
291
- }
292
- ))), v.length > 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(K, { list: v }), /* @__PURE__ */ e.createElement("div", { className: J }, c(
293
- v.length === 1 ? "fileUpload.error.wrongType.one" : "fileUpload.error.wrongType.other",
294
- {
295
- fileTypes: x,
296
- defaultValue: v.length === 1 ? `Selected file is not an accepted file type: ${x}.` : `Selected files are not accepted file types: ${x}.`
297
- }
298
- )))) : /* @__PURE__ */ e.createElement("span", null), /* @__PURE__ */ e.createElement("div", { className: q }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", null, k[0]), d ? /* @__PURE__ */ e.createElement("u", null, k[1]) : /* @__PURE__ */ e.createElement("a", { href: "", onClick: ce }, k[1]), /* @__PURE__ */ e.createElement("span", null, k[2]))), /* @__PURE__ */ e.createElement("div", { className: Oe }, p ? /* @__PURE__ */ e.createElement("span", null, "(", " ", c("fileUpload.acceptedTypes", {
299
- fileTypes: x,
300
- defaultValue: `${x} format accepted`
301
- }), " ", ")") : "", s ? /* @__PURE__ */ e.createElement("span", null, "(", " ", c("fileUpload.maximumSize", {
302
- size: s,
303
- defaultValue: `${s} maximum`
304
- }), " ", ")") : "", y ? /* @__PURE__ */ e.createElement("span", null, " ", y, " ") : ""), F && /* @__PURE__ */ e.createElement("div", { className: Pe }, /* @__PURE__ */ e.createElement(
305
- z,
306
- {
307
- disabled: d,
308
- kind: "link",
309
- icon: "download-cloud",
310
- onClick: _e
311
- },
312
- F
313
- )))),
314
- t && !r && /* @__PURE__ */ e.createElement("div", { className: Le }, /* @__PURE__ */ e.createElement(
315
- z,
316
- {
317
- disabled: d,
318
- kind: "icon",
319
- icon: "x",
320
- title: c("fileUpload.close", { defaultValue: "Close" }),
321
- onClick: re
322
- }
323
- )),
324
- /* @__PURE__ */ e.createElement("form", { className: Me }, /* @__PURE__ */ e.createElement(
325
- "input",
326
- {
327
- ref: f,
328
- type: "file",
329
- accept: le || "*/*",
330
- multiple: l || void 0,
331
- onChange: fe
332
- }
333
- ))
334
- );
335
- }
336
- we.set(Y, {
337
- name: "FileUpload",
338
- props: {
339
- constrainContentWidth: { type: "boolean" },
340
- description: { type: "string" },
341
- multiple: { type: "boolean" },
342
- dismissable: { type: "boolean" },
343
- mini: { type: "boolean" },
344
- downloadLabel: { type: "string" },
345
- acceptExtensions: { type: "string[] | string" },
346
- maxSize: { type: "string" },
347
- customRequirement: { type: "string" },
348
- onSelection: { type: "(files: File[]) => void", required: !0 },
349
- dismissal: { type: "() => void" },
350
- download: { type: "() => void" },
351
- disabled: { type: "boolean" }
352
- }
353
- });
354
- const Ae = {
355
- components: [Y],
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],
356
6
  examples: {
357
7
  basic: {
358
8
  label: "Basic File Upload",
@@ -360,7 +10,7 @@ const Ae = {
360
10
  examples: {
361
11
  basic: {
362
12
  description: "Single file upload",
363
- react: _`
13
+ react: e`
364
14
  import { FileUpload } from "@sps-woodland/file-upload";
365
15
 
366
16
  function Component() {
@@ -376,7 +26,7 @@ const Ae = {
376
26
  },
377
27
  multiple: {
378
28
  description: "Multiple file upload",
379
- react: _`
29
+ react: e`
380
30
  import { FileUpload } from "@sps-woodland/file-upload";
381
31
 
382
32
  function Component() {
@@ -398,7 +48,7 @@ const Ae = {
398
48
  examples: {
399
49
  maxSize: {
400
50
  description: "Maximum size",
401
- react: _`
51
+ react: e`
402
52
  import { FileUpload } from "@sps-woodland/file-upload";
403
53
 
404
54
  function Component() {
@@ -414,7 +64,7 @@ const Ae = {
414
64
  },
415
65
  fileWhitelist: {
416
66
  description: "File type whitelist",
417
- react: _`
67
+ react: e`
418
68
  import { FileUpload } from "@sps-woodland/file-upload";
419
69
 
420
70
  function Component() {
@@ -435,7 +85,7 @@ const Ae = {
435
85
  },
436
86
  bothRestrictions: {
437
87
  description: "Both restrictions",
438
- react: _`
88
+ react: e`
439
89
  import { FileUpload } from "@sps-woodland/file-upload";
440
90
 
441
91
  function Component() {
@@ -462,7 +112,7 @@ const Ae = {
462
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.",
463
113
  examples: {
464
114
  basic: {
465
- react: _`
115
+ react: e`
466
116
  import { FileUpload } from "@sps-woodland/file-upload";
467
117
  import { Button } from "@sps-woodland/buttons";
468
118
 
@@ -501,7 +151,7 @@ const Ae = {
501
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.",
502
152
  examples: {
503
153
  basic: {
504
- react: _`
154
+ react: e`
505
155
  import { FileUpload } from "@sps-woodland/file-upload";
506
156
 
507
157
  function Component() {
@@ -532,7 +182,7 @@ const Ae = {
532
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.",
533
183
  examples: {
534
184
  basic: {
535
- react: _`
185
+ react: e`
536
186
  import { FileUpload } from "@sps-woodland/file-upload";
537
187
 
538
188
  function Component() {
@@ -557,7 +207,7 @@ const Ae = {
557
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.",
558
208
  examples: {
559
209
  basic: {
560
- react: _`
210
+ react: e`
561
211
  import { FileUpload } from "@sps-woodland/file-upload";
562
212
 
563
213
  function Component() {
@@ -583,7 +233,7 @@ const Ae = {
583
233
  examples: {
584
234
  basic: {
585
235
  description: "Disabled File Upload",
586
- react: _`
236
+ react: e`
587
237
  import { FileUpload } from "@sps-woodland/file-upload";
588
238
 
589
239
  function Component() {
@@ -605,10 +255,9 @@ const Ae = {
605
255
  }
606
256
  }
607
257
  }
608
- }, Ge = {
609
- "File Upload": Ae
258
+ }, n = {
259
+ "File Upload": l
610
260
  };
611
261
  export {
612
- Y as FileUpload,
613
- Ge as MANIFEST
262
+ n as MANIFEST
614
263
  };
package/lib/index.umd.cjs CHANGED
@@ -1,4 +1,4 @@
1
- (function(s,E){typeof exports=="object"&&typeof module<"u"?E(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"],E):(s=typeof globalThis<"u"?globalThis:s||self,E(s.FileUpload={},s.React,s.core,s.utils,s.buttons,s.illustrations,s.i18n))})(this,(function(s,E,U,d,V,B,ae){"use strict";function le(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=le(E),R={"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"],EDI:["application/edi-x12","application/edifact"],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 te(o,l,a){return l in o?Object.defineProperty(o,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):o[l]=a,o}function I(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 X(o){for(var l=1;l<arguments.length;l++){var a=arguments[l]!=null?arguments[l]:{};l%2?I(Object(a),!0).forEach(function(t){te(o,t,a[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(a)):I(Object(a)).forEach(function(t){Object.defineProperty(o,t,Object.getOwnPropertyDescriptor(a,t))})}return o}var ie=(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},j=o=>l=>{var a=o.defaultClassName,t=X(X({},o.defaultVariants),l);for(var p in t){var h,b=(h=t[p])!==null&&h!==void 0?h:o.defaultVariants[p];if(b!=null){var c=b;typeof c=="boolean"&&(c=c===!0?"true":"false");var r=o.variantClassNames[p][c];r&&(a+=" "+r)}}for(var[C,L]of o.compoundVariants)ie(C,t,o.defaultVariants)&&(a+=" "+L);return a},ne=j({defaultClassName:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw0",variantClassNames:{active:{true:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw1",false:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw2"},mini:{true:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw3",false:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw4"},error:{true:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw5",false:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw6"},shown:{true:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw7",false:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw8"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw9",false:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwa"}},defaultVariants:{active:!1,mini:!1,error:!1,shown:!0,disabled:!1},compoundVariants:[]}),se=j({defaultClassName:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwb",variantClassNames:{constrainContentWidth:{true:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwc",false:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwd"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwe",false:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwf"}},defaultVariants:{constrainContentWidth:!1,disabled:!1},compoundVariants:[]}),W="pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwg",re=j({defaultClassName:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwh",variantClassNames:{mini:{true:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwi",false:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwj"},error:{true:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwk",false:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwl"},disabled:{true:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwm",false:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwn"}},defaultVariants:{mini:!1,error:!1,disabled:!1},compoundVariants:[]}),pe=j({defaultClassName:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwo",variantClassNames:{mini:{true:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwp",false:"pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwq"}},defaultVariants:{mini:!1},compoundVariants:[]}),de="pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwr",ce="pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jws",z="pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwt",G="pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwu",fe="pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwv",_e="pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jww",ue="pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwx",me="pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwy",he="pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwz";function q({list:o}){return e.createElement(e.Fragment,null,o.map((l,a)=>{const t=Math.floor(l.length/2);return e.createElement("div",{className:ce,key:l},e.createElement("span",{className:z},l.substring(0,t)),e.createElement("div",{className:z},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:b,acceptExtensions:c,maxSize:r,customRequirement:C,onSelection:L,onDismiss:Z,download:$,shown:O,className:we,disabled:f,children:Ve,...ge}){const T=e.useRef(new Set),N=e.useRef(new Set),[Fe,H]=e.useState(O),[Be,Ee]=e.useState([]),[be,xe]=e.useState(""),[J,ye]=e.useState(),[Se,k]=e.useState(!1),[x,D]=e.useState(!1),[v,K]=e.useState([]),[w,Y]=e.useState([]),[y,Ue]=e.useState(""),Q=e.useMemo(()=>new Set([...v,...w]).size,[v,w]),{t:_}=ae.useWoodlandLanguage(),P=(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("|"),ee=l||(a?"Files":"File"),u=e.useRef(null);e.useEffect(()=>{O&&H(O)},[O]),e.useEffect(()=>{r&&Ce(r)},[r]),e.useEffect(()=>{c&&Oe(c)},[c]);function je(){t&&(H(!1),Z&&Z())}function Ce(i){try{ye(d.parseFileSize(i))}catch{throw new Error(`Could not parse "${i}" as a file size.`)}}function Oe(i){const g=(Array.isArray(i)?i:i.trim().split(/\s?,\s?/)).map(n=>n.replace(/^\./,"")),m=g.map(n=>`.${n}`.toLowerCase());Ue(m.map((n,F)=>F>0&&F===m.length-1?`or ${n}`:n).join(m.length>2?", ":" ")),T.current.clear(),N.current.clear();for(const n of g){N.current.add(n.toLowerCase());const F=Object.keys(R).includes(n.toUpperCase())?R[n.toUpperCase()]:[];for(const A of F)T.current.add(A)}xe(m.concat(Array.from(T.current)).join(","))}function oe(i){K([]),Y([]);let S=[],g=[];const m=i?Array.from(i):[];for(const n of m){const F=n.name.split(".").pop()?.toLowerCase()??"",A=n.type?T.current.has(n.type):N.current.has(F);c&&!A&&g.push(n.name),r&&J&&n.size>J&&S.push(n.name)}S.length||g.length?(D(!0),u.current&&u.current.value&&(u.current.value="")):(Ee(m),L(m)),K(S),Y(g)}function Te(i){i.preventDefault(),D(!1),u.current&&u.current.click()}function ke(){$&&$()}function De(i){i.stopPropagation(),oe(i.target.files),u.current&&u.current.value&&(u.current.value="")}function Pe(i){i.preventDefault(),i.stopPropagation(),k(!0),D(!1)}function Me(i){i.preventDefault(),k(!0),D(!1)}function Le(i){i.preventDefault(),k(!1)}function Ne(i){i.preventDefault(),i.stopPropagation(),k(!1),i.dataTransfer.files&&oe(i.dataTransfer.files)}return e.createElement("div",{onDrop:f?()=>{}:Ne,onDragOver:f?()=>{}:Pe,onDragLeave:f?()=>{}:Le,onDragEnter:f?()=>{}:Me,className:U.cl(ne({active:Se,mini:h,error:x,shown:Fe,disabled:f}),we),...ge},e.createElement("div",{className:U.cl(se({constrainContentWidth:o,disabled:f}))},p?e.createElement("div",null,e.createElement(U.Spinner,{size:"md","aria-hidden":"true"}),e.createElement("div",{className:W},_("fileUpload.processing",{defaultValue:"Processing Upload..."}))):e.createElement("div",null,e.createElement("div",{className:re({mini:h,error:x,disabled:f}),"aria-hidden":"true"},e.createElement("img",{className:he,src:x?B.GENERAL_ERROR_LARGE:B.UPLOAD_LARGE,alt:"Upload Icon"})),e.createElement("div",{className:pe({mini:h})},x?e.createElement("div",null,_(Q>1?"fileUpload.cancelled.other":"fileUpload.cancelled.one",{defaultValue:Q>1?"File Upload(s) Failed":"File Upload Failed"})):e.createElement("div",null,_("fileUpload.title",{description:ee,defaultValue:`Upload your ${ee}`}))),x?e.createElement("div",{className:de},v.length>0&&e.createElement(e.Fragment,null,e.createElement(q,{list:v}),e.createElement("div",{className:G},_(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(q,{list:w}),e.createElement("div",{className:G},_(w.length===1?"fileUpload.error.wrongType.one":"fileUpload.error.wrongType.other",{fileTypes:y,defaultValue:w.length===1?`Selected file is not an accepted file type: ${y}.`:`Selected files are not accepted file types: ${y}.`})))):e.createElement("span",null),e.createElement("div",{className:W},e.createElement("div",null,e.createElement("span",null,P[0]),f?e.createElement("u",null,P[1]):e.createElement("a",{href:"",onClick:Te},P[1]),e.createElement("span",null,P[2]))),e.createElement("div",{className:fe},c?e.createElement("span",null,"("," ",_("fileUpload.acceptedTypes",{fileTypes:y,defaultValue:`${y} format accepted`})," ",")"):"",r?e.createElement("span",null,"("," ",_("fileUpload.maximumSize",{size:r,defaultValue:`${r} maximum`})," ",")"):"",C?e.createElement("span",null," ",C," "):""),b&&e.createElement("div",{className:_e},e.createElement(V.Button,{disabled:f,kind:"link",icon:"download-cloud",onClick:ke},b)))),t&&!p&&e.createElement("div",{className:ue},e.createElement(V.Button,{disabled:f,kind:"icon",icon:"x",title:_("fileUpload.close",{defaultValue:"Close"}),onClick:je})),e.createElement("form",{className:me},e.createElement("input",{ref:u,type:"file",accept:be||"*/*",multiple:a||void 0,onChange:De})))}U.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 ve={"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=ve,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_53_4__hash_rh07jw0{border-width:.0625rem;border-style:dashed;border-radius:.25rem;display:block;padding:1rem;position:relative}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw1{background-color:#f4ecf2;border-color:#91467f;border-style:solid}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw3{padding:1rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw5{border-color:#de002e}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw8{display:none}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jw9{border-color:#d2d4d4}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwb{color:#4b5356;margin:0 auto;text-align:center}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwc{width:50%}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwe{color:#717779}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwg{font-size:.75rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwh{color:#717779;display:block;margin-bottom:1rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwi{font-size:1.5rem;line-height:1.5rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwj{font-size:3rem;line-height:3rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwk{color:#de002e}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwm{opacity:.5}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwo{font-weight:600;margin-bottom:.25rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwp{font-size:1rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwq{font-size:1.125rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwr{font-size:.875rem;font-weight:600;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jws{display:flex;justify-content:center;white-space:nowrap}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwt{max-width:50%;overflow:hidden}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwt:first-child{text-overflow:ellipsis}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwt:last-child{float:right}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwu{font-weight:400}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwv{font-size:.75rem;line-height:1.125rem;margin-top:.25rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwv>span+span{margin-left:.125rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jww{margin-top:1rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwx{position:absolute;right:.5rem;top:.5rem}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwy{display:none}.pkg_sps-woodland_file-upload__version_8_53_4__hash_rh07jwz{height:3rem}
1
+ .pkg_sps-woodland_core__version_8_53_5__hash_17kn1zk0{border-width:.0625rem;border-style:dashed;border-radius:.25rem;display:block;padding:1rem;position:relative}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zk1{background-color:#f4ecf2;border-color:#91467f;border-style:solid}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zk3{padding:1rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zk5{border-color:#de002e}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zk8{display:none}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zk9{border-color:#d2d4d4}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkb{color:#4b5356;margin:0 auto;text-align:center}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkc{width:50%}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zke{color:#717779}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkg{font-size:.75rem;line-height:1.25rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkh{color:#717779;display:block;margin-bottom:1rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zki{font-size:1.5rem;line-height:1.5rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkj{font-size:3rem;line-height:3rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkk{color:#de002e}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkm{opacity:.5}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zko{font-weight:600;margin-bottom:.25rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkp{font-size:1rem;line-height:1.25rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkq{font-size:1.125rem;line-height:1.25rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkr{font-size:.875rem;font-weight:600;line-height:1.25rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zks{display:flex;justify-content:center;white-space:nowrap}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkt{max-width:50%;overflow:hidden}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkt:first-child{text-overflow:ellipsis}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkt:last-child{float:right}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zku{font-weight:400}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkv{font-size:.75rem;line-height:1.125rem;margin-top:.25rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkv>span+span{margin-left:.125rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkw{margin-top:1rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zkx{position:absolute;right:.5rem;top:.5rem}.pkg_sps-woodland_core__version_8_53_5__hash_17kn1zky{display:none}.pkg_sps-woodland_core__version_8_53_5__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.53.4",
4
+ "version": "8.53.5",
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,46 +20,34 @@
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.53.4",
34
- "@sps-woodland/core": "8.53.4",
35
- "@sps-woodland/illustrations": "8.53.4",
36
- "@sps-woodland/tokens": "8.53.4",
37
- "@spscommerce/ds-react": "8.53.4",
38
- "@spscommerce/ds-shared": "8.53.4",
39
- "@spscommerce/i18n": "8.53.4"
36
+ "@sps-woodland/core": "8.53.5"
40
37
  },
41
38
  "devDependencies": {
42
- "@spscommerce/ds-illustrations": "6.12.1",
43
39
  "@spscommerce/utils": "9.0.3",
44
40
  "@testing-library/jest-dom": "^5.16.5",
45
41
  "@testing-library/react": "12.1.5",
46
- "@vanilla-extract/css": "1.17.4",
47
- "@vanilla-extract/recipes": "0.2.5",
48
42
  "react": "16.14.0",
49
43
  "react-dom": "16.14.0",
50
- "@sps-woodland/buttons": "8.53.4",
51
- "@sps-woodland/core": "8.53.4",
52
- "@sps-woodland/illustrations": "8.53.4",
53
- "@sps-woodland/tokens": "8.53.4",
54
- "@spscommerce/ds-colors": "8.53.4",
55
- "@spscommerce/ds-react": "8.53.4",
56
- "@spscommerce/ds-shared": "8.53.4",
57
- "@spscommerce/i18n": "8.53.4"
44
+ "@sps-woodland/core": "8.53.5"
58
45
  },
59
46
  "scripts": {
60
- "build": "pnpm run build:js && pnpm run build:types",
47
+ "build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
61
48
  "build:js": "vite build",
62
49
  "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib",
50
+ "build:css": "cp ../core/lib/file-upload/style.css lib/style.css 2>/dev/null || echo 'file-upload style.css not found, skipping'",
63
51
  "watch": "vite build --watch",
64
52
  "clean": "git clean -fdX",
65
53
  "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,98 +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
- EDI: string[];
23
- EML: string[];
24
- EOT: string[];
25
- EPUB: string[];
26
- ES: string[];
27
- FLV: string[];
28
- GIF: string[];
29
- GZ: string[];
30
- HTM: string[];
31
- HTML: string[];
32
- ICO: string[];
33
- ICS: string[];
34
- JAR: string[];
35
- JPEG: string[];
36
- JPG: string[];
37
- JS: string[];
38
- JSON: string[];
39
- M3U: string[];
40
- MID: string[];
41
- MIDI: string[];
42
- MOV: string[];
43
- MP3: string[];
44
- MP4: string[];
45
- MPEG: string[];
46
- MPKG: string[];
47
- ODP: string[];
48
- ODS: string[];
49
- ODT: string[];
50
- OGA: string[];
51
- OGV: string[];
52
- OGX: string[];
53
- OTF: string[];
54
- PNG: string[];
55
- PDF: string[];
56
- POT: string[];
57
- POTM: string[];
58
- POTX: string[];
59
- PPA: string[];
60
- PPAM: string[];
61
- PPS: string[];
62
- PPSM: string[];
63
- PPT: string[];
64
- PPTM: string[];
65
- PPSX: string[];
66
- PPTX: string[];
67
- RAR: string[];
68
- RTF: string[];
69
- SH: string[];
70
- SVG: string[];
71
- SWF: string[];
72
- TAR: string[];
73
- TIF: string[];
74
- TIFF: string[];
75
- TS: string[];
76
- TTF: string[];
77
- TXT: string[];
78
- VSD: string[];
79
- WAV: string[];
80
- WEBA: string[];
81
- WEBM: string[];
82
- WEBP: string[];
83
- WOFF: string[];
84
- WOFF2: string[];
85
- XHTML: string[];
86
- XLA: string[];
87
- XLS: string[];
88
- XLSB: string[];
89
- XLT: string[];
90
- XLAM: string[];
91
- XLSM: string[];
92
- XLSX: string[];
93
- XLTM: string[];
94
- XLTX: string[];
95
- XML: string[];
96
- XUL: string[];
97
- ZIP: string[];
98
- };