@sps-woodland/file-upload 7.17.13 → 7.19.0

package/lib/{index.es.js → index.js}

@@ -1,9 +1,9 @@
 import * as e from "react";
-import { Metadata as ue, I18nContext as me, cl as I, Spinner as he, Icon as ve } from "@sps-woodland/core";
-import { parseFileSize as we, code as m } from "@spscommerce/utils";
-import { SpsButton as B } from "@spscommerce/ds-react";
-import { ButtonKind as V, SpsIcon as W } from "@spscommerce/ds-shared";
-const L = {
+import { Metadata as _e, I18nContext as ue, cl as A, Spinner as me, Icon as he } from "@sps-woodland/core";
+import { parseFileSize as ve, code as u } from "@spscommerce/utils";
+import { SpsButton as M } from "@spscommerce/ds-react";
+import { ButtonKind as I, SpsIcon as B } from "@spscommerce/ds-shared";
+const V = {
   "7Z": ["application/x-7z-compressed"],
   AAC: ["audio/aac"],
   ABW: ["application/x-abiword"],
@@ -79,196 +79,196 @@ const L = {
   XUL: ["application/vnd.mozilla.xul+xml"],
   ZIP: ["application/zip"]
 };
-function ge(i, o, a) {
-  return o in i ? Object.defineProperty(i, o, {
+function we(o, l, a) {
+  return l in o ? Object.defineProperty(o, l, {
     value: a,
     enumerable: !0,
     configurable: !0,
     writable: !0
-  }) : i[o] = a, i;
+  }) : o[l] = a, o;
 }
-function z(i, o) {
-  var a = Object.keys(i);
+function W(o, l) {
+  var a = Object.keys(o);
   if (Object.getOwnPropertySymbols) {
-    var l = Object.getOwnPropertySymbols(i);
-    o && (l = l.filter(function(n) {
-      return Object.getOwnPropertyDescriptor(i, n).enumerable;
-    })), a.push.apply(a, l);
+    var i = Object.getOwnPropertySymbols(o);
+    l && (i = i.filter(function(n) {
+      return Object.getOwnPropertyDescriptor(o, n).enumerable;
+    })), a.push.apply(a, i);
   }
   return a;
 }
-function R(i) {
-  for (var o = 1; o < arguments.length; o++) {
-    var a = arguments[o] != null ? arguments[o] : {};
-    o % 2 ? z(Object(a), !0).forEach(function(l) {
-      ge(i, l, a[l]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(i, Object.getOwnPropertyDescriptors(a)) : z(Object(a)).forEach(function(l) {
-      Object.defineProperty(i, l, Object.getOwnPropertyDescriptor(a, l));
+function L(o) {
+  for (var l = 1; l < arguments.length; l++) {
+    var a = arguments[l] != null ? arguments[l] : {};
+    l % 2 ? W(Object(a), !0).forEach(function(i) {
+      we(o, i, a[i]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(o, Object.getOwnPropertyDescriptors(a)) : W(Object(a)).forEach(function(i) {
+      Object.defineProperty(o, i, Object.getOwnPropertyDescriptor(a, i));
     });
   }
-  return i;
+  return o;
 }
-var Fe = (i, o, a) => {
-  for (var l of Object.keys(i)) {
+var ge = (o, l, a) => {
+  for (var i of Object.keys(o)) {
     var n;
-    if (i[l] !== ((n = o[l]) !== null && n !== void 0 ? n : a[l]))
+    if (o[i] !== ((n = l[i]) !== null && n !== void 0 ? n : a[i]))
       return !1;
   }
   return !0;
-}, U = (i) => (o) => {
-  var a = i.defaultClassName, l = R(R({}, i.defaultVariants), o);
-  for (var n in l) {
-    var v, w = (v = l[n]) !== null && v !== void 0 ? v : i.defaultVariants[n];
-    if (w != null) {
-      var p = w;
+}, E = (o) => (l) => {
+  var a = o.defaultClassName, i = L(L({}, o.defaultVariants), l);
+  for (var n in i) {
+    var h, v = (h = i[n]) !== null && h !== void 0 ? h : o.defaultVariants[n];
+    if (v != null) {
+      var p = v;
       typeof p == "boolean" && (p = p === !0 ? "true" : "false");
-      var c = i.variantClassNames[n][p];
-      c && (a += " " + c);
+      var d = o.variantClassNames[n][p];
+      d && (a += " " + d);
     }
   }
-  for (var [F, C] of i.compoundVariants)
-    Fe(F, l, i.defaultVariants) && (a += " " + C);
+  for (var [g, U] of o.compoundVariants)
+    ge(g, i, o.defaultVariants) && (a += " " + U);
   return a;
-}, xe = "rh07jwm", k = "rh07jwn", ye = "rh07jwl", Se = U({ defaultClassName: "rh07jw0", variantClassNames: { active: { true: "rh07jw1", false: "rh07jw2" }, mini: { true: "rh07jw3", false: "rh07jw4" }, error: { true: "rh07jw5", false: "rh07jw6" }, shown: { true: "rh07jw7", false: "rh07jw8" } }, defaultVariants: { active: !1, mini: !1, error: !1, shown: !0 }, compoundVariants: [] }), be = "rh07jwq", Ee = U({ defaultClassName: "rh07jw9", variantClassNames: { constrainContentWidth: { true: "rh07jwa", false: "rh07jwb" } }, defaultVariants: { constrainContentWidth: !1 }, compoundVariants: [] }), Ue = "rh07jwp", Ce = "rh07jwr", je = U({ defaultClassName: "rh07jwd", variantClassNames: { mini: { true: "rh07jwe", false: "rh07jwf" }, error: { true: "rh07jwg", false: "rh07jwh" } }, defaultVariants: { mini: !1, error: !1 }, compoundVariants: [] }), X = "rh07jwc", Oe = "rh07jwo", De = U({ defaultClassName: "rh07jwi", variantClassNames: { mini: { true: "rh07jwj", false: "rh07jwk" } }, defaultVariants: { mini: !1 }, compoundVariants: [] });
-function G({
-  constrainContentWidth: i,
-  description: o,
+}, Fe = "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwm", z = "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwn", xe = "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwl", ye = E({ defaultClassName: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw0", variantClassNames: { active: { true: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw1", false: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw2" }, mini: { true: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw3", false: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw4" }, error: { true: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw5", false: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw6" }, shown: { true: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw7", false: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw8" } }, defaultVariants: { active: !1, mini: !1, error: !1, shown: !0 }, compoundVariants: [] }), Se = "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwq", be = E({ defaultClassName: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw9", variantClassNames: { constrainContentWidth: { true: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwa", false: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwb" } }, defaultVariants: { constrainContentWidth: !1 }, compoundVariants: [] }), Ee = "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwp", Ue = "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwr", Ce = E({ defaultClassName: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwd", variantClassNames: { mini: { true: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwe", false: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwf" }, error: { true: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwg", false: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwh" } }, defaultVariants: { mini: !1, error: !1 }, compoundVariants: [] }), R = "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwc", je = "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwo", Oe = E({ defaultClassName: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwi", variantClassNames: { mini: { true: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwj", false: "pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwk" } }, defaultVariants: { mini: !1 }, compoundVariants: [] });
+function X({
+  constrainContentWidth: o,
+  description: l,
   multiple: a = !1,
-  dismissable: l,
+  dismissable: i,
   processing: n,
-  mini: v,
-  downloadLabel: w,
+  mini: h,
+  downloadLabel: v,
   acceptExtensions: p,
-  maxSize: c,
-  customRequirement: F,
-  onSelection: C,
-  onDismiss: N,
-  download: T,
-  shown: x,
-  className: K,
-  children: Te,
-  ...Z
+  maxSize: d,
+  customRequirement: g,
+  onSelection: U,
+  onDismiss: k,
+  download: D,
+  shown: F,
+  className: G,
+  children: De,
+  ...K
 }) {
-  const y = e.useRef(/* @__PURE__ */ new Set()), [q, P] = e.useState(x), [Pe, H] = e.useState([]), [J, _] = e.useState(""), [A, Y] = e.useState(), [Q, S] = e.useState(!1), [g, b] = e.useState(!1), [j, M] = e.useState([]), [$, ee] = e.useState(""), { t: h } = e.useContext(me), O = h(a ? "design-system:fileUpload.instructions_plural" : "design-system:fileUpload.instructions").split("|"), te = o || (a ? "Files" : "File"), d = e.useRef(null);
+  const x = e.useRef(/* @__PURE__ */ new Set()), [Z, N] = e.useState(F), [Ne, q] = e.useState([]), [H, J] = e.useState(""), [T, Y] = e.useState(), [Q, y] = e.useState(!1), [w, S] = e.useState(!1), [C, P] = e.useState([]), [$, ee] = e.useState(""), { t: m } = e.useContext(ue), j = m(a ? "design-system:fileUpload.instructions_plural" : "design-system:fileUpload.instructions").split("|"), te = l || (a ? "Files" : "File"), c = e.useRef(null);
   e.useEffect(() => {
-    x && P(x);
-  }, [x]), e.useEffect(() => {
-    c && ae(c);
-  }, [c]), e.useEffect(() => {
-    p && le(p);
+    F && N(F);
+  }, [F]), e.useEffect(() => {
+    d && ae(d);
+  }, [d]), e.useEffect(() => {
+    p && ie(p);
   }, [p]);
-  function ie() {
-    l && (P(!1), N && N());
+  function oe() {
+    i && (N(!1), k && k());
   }
   function ae(t) {
     try {
-      Y(we(t));
+      Y(ve(t));
     } catch {
       throw new Error(`Could not parse "${t}" as a file size.`);
     }
   }
-  function le(t) {
-    const f = (Array.isArray(t) ? t : t.trim().split(/\s?,\s?/)).map((u) => u.replace(/^\./, "")), r = f.map((u) => `.${u}`.toLowerCase());
+  function ie(t) {
+    const f = (Array.isArray(t) ? t : t.trim().split(/\s?,\s?/)).map((_) => _.replace(/^\./, "")), r = f.map((_) => `.${_}`.toLowerCase());
     ee(
-      r.map((u, E) => E > 0 && E === r.length - 1 ? `or ${u}` : u).join(r.length > 2 ? ", " : " ")
-    ), y.current.clear();
-    for (const u of f) {
-      const E = Object.keys(L).includes(u.toUpperCase()) ? L[u.toUpperCase()] : [];
-      for (const fe of E)
-        y.current.add(fe);
+      r.map((_, b) => b > 0 && b === r.length - 1 ? `or ${_}` : _).join(r.length > 2 ? ", " : " ")
+    ), x.current.clear();
+    for (const _ of f) {
+      const b = Object.keys(V).includes(_.toUpperCase()) ? V[_.toUpperCase()] : [];
+      for (const fe of b)
+        x.current.add(fe);
     }
-    _(r.concat(Array.from(y.current)).join(","));
+    J(r.concat(Array.from(x.current)).join(","));
   }
-  function D(t) {
-    M([]);
+  function O(t) {
+    P([]);
     let s = [];
     const f = Array.from(t);
     for (const r of f)
-      r === null ? s.push("Not a file") : (p && !y.current.has(r.type) && s.push(r.name), c && A && r.size > A && s.indexOf(r.name) === -1 && s.push(r.name));
-    s.length ? (b(!0), d.current && d.current.value && (d.current.value = "")) : (H(f), C(f)), M(s);
+      r === null ? s.push("Not a file") : (p && !x.current.has(r.type) && s.push(r.name), d && T && r.size > T && s.indexOf(r.name) === -1 && s.push(r.name));
+    s.length ? (S(!0), c.current && c.current.value && (c.current.value = "")) : (q(f), U(f)), P(s);
   }
-  function oe(t) {
-    t.preventDefault(), b(!1), d.current && d.current.click();
+  function le(t) {
+    t.preventDefault(), S(!1), c.current && c.current.click();
   }
   function ne() {
-    T && T();
+    D && D();
   }
   function se(t) {
-    t.stopPropagation(), D(t.target.files || []), d.current && d.current.value && (d.current.value = "");
+    t.stopPropagation(), O(t.target.files || []), c.current && c.current.value && (c.current.value = "");
   }
   function re(t) {
-    t.preventDefault(), t.stopPropagation(), S(!0), b(!1);
+    t.preventDefault(), t.stopPropagation(), y(!0), S(!1);
   }
   function pe(t) {
-    t.preventDefault(), S(!0), b(!1);
-  }
-  function ce(t) {
-    t.preventDefault(), S(!1);
+    t.preventDefault(), y(!0), S(!1);
   }
   function de(t) {
-    t.preventDefault(), t.stopPropagation(), S(!1), t.dataTransfer.items ? D(
+    t.preventDefault(), y(!1);
+  }
+  function ce(t) {
+    t.preventDefault(), t.stopPropagation(), y(!1), t.dataTransfer.items ? O(
       Array.from(t.dataTransfer.items).map(
         (s) => s.getAsFile()
       )
-    ) : D(t.dataTransfer.files);
+    ) : O(t.dataTransfer.files);
   }
   return /* @__PURE__ */ e.createElement(
     "div",
     {
-      onDrop: de,
+      onDrop: ce,
       onDragOver: re,
-      onDragLeave: ce,
+      onDragLeave: de,
       onDragEnter: pe,
-      className: I(Se({ active: Q, mini: v, error: g, shown: q }), K),
-      ...Z
+      className: A(ye({ active: Q, mini: h, error: w, shown: Z }), G),
+      ...K
     },
-    /* @__PURE__ */ e.createElement("div", { className: I(Ee({ constrainContentWidth: i })) }, n ? /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(he, { size: "md", "aria-hidden": "true" }), /* @__PURE__ */ e.createElement("div", { className: X }, h("design-system:fileUpload.processing"))) : /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
-      ve,
+    /* @__PURE__ */ e.createElement("div", { className: A(be({ constrainContentWidth: o })) }, n ? /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(me, { size: "md", "aria-hidden": "true" }), /* @__PURE__ */ e.createElement("div", { className: R }, m("design-system:fileUpload.processing"))) : /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
+      he,
       {
-        className: je({ mini: v, error: g }),
-        icon: g ? "exclamation-circle" : "upload-cloud",
+        className: Ce({ mini: h, error: w }),
+        icon: w ? "exclamation-circle" : "upload-cloud",
         "aria-hidden": "true"
       }
-    ), /* @__PURE__ */ e.createElement("div", { className: De({ mini: v }) }, g ? /* @__PURE__ */ e.createElement("div", null, h(
-      j.length > 1 ? "design-system:fileUpload.cancelled_plural" : "design-system:fileUpload.cancelled"
-    )) : /* @__PURE__ */ e.createElement("div", null, h("design-system:fileUpload.title", { description: te }))), g ? /* @__PURE__ */ e.createElement("div", { className: ye }, new Set(
-      j.map((t, s) => {
+    ), /* @__PURE__ */ e.createElement("div", { className: Oe({ mini: h }) }, w ? /* @__PURE__ */ e.createElement("div", null, m(
+      C.length > 1 ? "design-system:fileUpload.cancelled_plural" : "design-system:fileUpload.cancelled"
+    )) : /* @__PURE__ */ e.createElement("div", null, m("design-system:fileUpload.title", { description: te }))), w ? /* @__PURE__ */ e.createElement("div", { className: xe }, new Set(
+      C.map((t, s) => {
         const f = Math.floor(t.length / 2);
-        return /* @__PURE__ */ e.createElement("div", { className: xe, key: t }, /* @__PURE__ */ e.createElement("span", { className: k }, t.substr(0, f)), /* @__PURE__ */ e.createElement("div", { className: k }, /* @__PURE__ */ e.createElement("span", null, t.substr(f))), s < j.length - 1 ? "," : "");
+        return /* @__PURE__ */ e.createElement("div", { className: Fe, key: t }, /* @__PURE__ */ e.createElement("span", { className: z }, t.substr(0, f)), /* @__PURE__ */ e.createElement("div", { className: z }, /* @__PURE__ */ e.createElement("span", null, t.substr(f))), s < C.length - 1 ? "," : "");
       })
-    )) : /* @__PURE__ */ e.createElement("span", null), /* @__PURE__ */ e.createElement("div", { className: X }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", null, O[0]), /* @__PURE__ */ e.createElement("a", { href: "", onClick: oe }, O[1]), /* @__PURE__ */ e.createElement("span", null, O[2]))), /* @__PURE__ */ e.createElement("div", { className: Oe }, p ? /* @__PURE__ */ e.createElement("span", null, "(", " ", h("design-system:fileUpload.acceptedTypes", {
+    )) : /* @__PURE__ */ e.createElement("span", null), /* @__PURE__ */ e.createElement("div", { className: R }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", null, j[0]), /* @__PURE__ */ e.createElement("a", { href: "", onClick: le }, j[1]), /* @__PURE__ */ e.createElement("span", null, j[2]))), /* @__PURE__ */ e.createElement("div", { className: je }, p ? /* @__PURE__ */ e.createElement("span", null, "(", " ", m("design-system:fileUpload.acceptedTypes", {
       fileTypes: $
-    }), " ", ")") : "", c ? /* @__PURE__ */ e.createElement("span", null, "( ", h("design-system:fileUpload.maximumSize", { size: c }), " )") : "", F ? /* @__PURE__ */ e.createElement("span", null, " ", F, " ") : ""), w && /* @__PURE__ */ e.createElement("div", { className: Ue }, /* @__PURE__ */ e.createElement(
-      B,
+    }), " ", ")") : "", d ? /* @__PURE__ */ e.createElement("span", null, "( ", m("design-system:fileUpload.maximumSize", { size: d }), " )") : "", g ? /* @__PURE__ */ e.createElement("span", null, " ", g, " ") : ""), v && /* @__PURE__ */ e.createElement("div", { className: Ee }, /* @__PURE__ */ e.createElement(
+      M,
       {
-        kind: V.LINK,
-        icon: W.DOWNLOAD_CLOUD,
+        kind: I.LINK,
+        icon: B.DOWNLOAD_CLOUD,
         onClick: ne
       },
-      w
+      v
     )))),
-    l && !n && /* @__PURE__ */ e.createElement("div", { className: be }, /* @__PURE__ */ e.createElement(
-      B,
+    i && !n && /* @__PURE__ */ e.createElement("div", { className: Se }, /* @__PURE__ */ e.createElement(
+      M,
       {
-        kind: V.ICON,
-        icon: W.X,
-        title: h("design-system:fileUpload.close"),
-        onClick: ie
+        kind: I.ICON,
+        icon: B.X,
+        title: m("design-system:fileUpload.close"),
+        onClick: oe
       }
     )),
-    /* @__PURE__ */ e.createElement("form", { className: Ce }, /* @__PURE__ */ e.createElement(
+    /* @__PURE__ */ e.createElement("form", { className: Ue }, /* @__PURE__ */ e.createElement(
       "input",
       {
-        ref: d,
+        ref: c,
         type: "file",
-        accept: J || "*/*",
+        accept: H || "*/*",
         multiple: a || void 0,
         onChange: se
       }
     ))
   );
 }
-ue.set(G, {
+_e.set(X, {
   name: "FileUpload",
   props: {
     constrainContentWidth: { type: "boolean" },
@@ -285,8 +285,8 @@ ue.set(G, {
     download: { type: "() => void" }
   }
 });
-const Ne = {
-  components: [G],
+const ke = {
+  components: [X],
   examples: {
     basic: {
       label: "Basic File Upload",
@@ -294,7 +294,7 @@ const Ne = {
       examples: {
         basic: {
           description: "Single file upload",
-          react: m`
+          react: u`
             import { FileUpload } from "@sps-woodland/file-upload";
 
             function Component() {
@@ -310,7 +310,7 @@ const Ne = {
         },
         multiple: {
           description: "Multiple file upload",
-          react: m`
+          react: u`
             import { FileUpload } from "@sps-woodland/file-upload";
 
             function Component() {
@@ -332,7 +332,7 @@ const Ne = {
       examples: {
         maxSize: {
           description: "Maximum size",
-          react: m`
+          react: u`
             import { FileUpload } from "@sps-woodland/file-upload";
 
             function Component() {
@@ -348,7 +348,7 @@ const Ne = {
         },
         fileWhitelist: {
           description: "File type whitelist",
-          react: m`
+          react: u`
             import { FileUpload } from "@sps-woodland/file-upload";
 
             function Component() {
@@ -369,7 +369,7 @@ const Ne = {
         },
         bothRestrictions: {
           description: "Both restrictions",
-          react: m`
+          react: u`
             import { FileUpload } from "@sps-woodland/file-upload";
 
             function Component() {
@@ -396,7 +396,7 @@ const Ne = {
       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: m`
+          react: u`
             import { FileUpload } from "@sps-woodland/file-upload";
 
             function Component() {
@@ -434,7 +434,7 @@ const Ne = {
       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: m`
+          react: u`
             import { FileUpload } from "@sps-woodland/file-upload";
 
             function Component() {
@@ -465,7 +465,7 @@ const Ne = {
       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: m`
+          react: u`
             import { FileUpload } from "@sps-woodland/file-upload";
 
             function Component() {
@@ -490,7 +490,7 @@ const Ne = {
       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: m`
+          react: u`
             import { FileUpload } from "@sps-woodland/file-upload";
 
             function Component() {
@@ -511,10 +511,10 @@ const Ne = {
       }
     }
   }
-}, Ve = {
-  "File Upload": Ne
+}, Ie = {
+  "File Upload": ke
 };
 export {
-  G as FileUpload,
-  Ve as MANIFEST
+  X as FileUpload,
+  Ie as MANIFEST
 };

package/lib/index.umd.cjs

@@ -0,0 +1,155 @@
+(function(n,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react"),require("@sps-woodland/core"),require("@spscommerce/utils"),require("@spscommerce/ds-react"),require("@spscommerce/ds-shared")):typeof define=="function"&&define.amd?define(["exports","react","@sps-woodland/core","@spscommerce/utils","@spscommerce/ds-react","@spscommerce/ds-shared"],g):(n=typeof globalThis<"u"?globalThis:n||self,g(n.FileUpload={},n.React,n.core,n.utils,n.dsReact,n.dsShared))})(this,function(n,g,w,d,M,y){"use strict";function q(t){if(t&&t.__esModule)return t;const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const i=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(l,a,i.get?i:{enumerable:!0,get:()=>t[a]})}}return l.default=t,Object.freeze(l)}const e=q(g),A={"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"],DOCX:["application/vnd.openxmlformats-officedocument.wordprocessingml.document"],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"],PPT:["application/vnd.ms-powerpoint"],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"],XLS:["application/vnd.ms-excel"],XLSX:["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],XML:["application/xml"],XUL:["application/vnd.mozilla.xul+xml"],ZIP:["application/zip"]},je="";function K(t,l,a){return l in t?Object.defineProperty(t,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[l]=a,t}function I(t,l){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);l&&(i=i.filter(function(s){return Object.getOwnPropertyDescriptor(t,s).enumerable})),a.push.apply(a,i)}return a}function B(t){for(var l=1;l<arguments.length;l++){var a=arguments[l]!=null?arguments[l]:{};l%2?I(Object(a),!0).forEach(function(i){K(t,i,a[i])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):I(Object(a)).forEach(function(i){Object.defineProperty(t,i,Object.getOwnPropertyDescriptor(a,i))})}return t}var Z=(t,l,a)=>{for(var i of Object.keys(t)){var s;if(t[i]!==((s=l[i])!==null&&s!==void 0?s:a[i]))return!1}return!0},S=t=>l=>{var a=t.defaultClassName,i=B(B({},t.defaultVariants),l);for(var s in i){var v,F=(v=i[s])!==null&&v!==void 0?v:t.defaultVariants[s];if(F!=null){var c=F;typeof c=="boolean"&&(c=c===!0?"true":"false");var f=t.variantClassNames[s][c];f&&(a+=" "+f)}}for(var[b,D]of t.compoundVariants)Z(b,i,t.defaultVariants)&&(a+=" "+D);return a},H="pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwm",V="pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwn",J="pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwl",Y=S({defaultClassName:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw0",variantClassNames:{active:{true:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw1",false:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw2"},mini:{true:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw3",false:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw4"},error:{true:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw5",false:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw6"},shown:{true:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw7",false:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw8"}},defaultVariants:{active:!1,mini:!1,error:!1,shown:!0},compoundVariants:[]}),Q="pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwq",$=S({defaultClassName:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw9",variantClassNames:{constrainContentWidth:{true:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwa",false:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwb"}},defaultVariants:{constrainContentWidth:!1},compoundVariants:[]}),ee="pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwp",te="pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwr",oe=S({defaultClassName:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwd",variantClassNames:{mini:{true:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwe",false:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwf"},error:{true:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwg",false:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwh"}},defaultVariants:{mini:!1,error:!1},compoundVariants:[]}),W="pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwc",ae="pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwo",ie=S({defaultClassName:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwi",variantClassNames:{mini:{true:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwj",false:"pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwk"}},defaultVariants:{mini:!1},compoundVariants:[]});function k({constrainContentWidth:t,description:l,multiple:a=!1,dismissable:i,processing:s,mini:v,downloadLabel:F,acceptExtensions:c,maxSize:f,customRequirement:b,onSelection:D,onDismiss:z,download:L,shown:E,className:ne,children:ke,...se}){const U=e.useRef(new Set),[re,R]=e.useState(E),[De,pe]=e.useState([]),[de,ce]=e.useState(""),[X,fe]=e.useState(),[ue,C]=e.useState(!1),[x,j]=e.useState(!1),[T,G]=e.useState([]),[_e,me]=e.useState(""),{t:h}=e.useContext(w.I18nContext),N=h(a?"design-system:fileUpload.instructions_plural":"design-system:fileUpload.instructions").split("|"),he=l||(a?"Files":"File"),u=e.useRef(null);e.useEffect(()=>{E&&R(E)},[E]),e.useEffect(()=>{f&&we(f)},[f]),e.useEffect(()=>{c&&ge(c)},[c]);function ve(){i&&(R(!1),z&&z())}function we(o){try{fe(d.parseFileSize(o))}catch{throw new Error(`Could not parse "${o}" as a file size.`)}}function ge(o){const _=(Array.isArray(o)?o:o.trim().split(/\s?,\s?/)).map(m=>m.replace(/^\./,"")),p=_.map(m=>`.${m}`.toLowerCase());me(p.map((m,O)=>O>0&&O===p.length-1?`or ${m}`:m).join(p.length>2?", ":" ")),U.current.clear();for(const m of _){const O=Object.keys(A).includes(m.toUpperCase())?A[m.toUpperCase()]:[];for(const Ce of O)U.current.add(Ce)}ce(p.concat(Array.from(U.current)).join(","))}function P(o){G([]);let r=[];const _=Array.from(o);for(const p of _)p===null?r.push("Not a file"):(c&&!U.current.has(p.type)&&r.push(p.name),f&&X&&p.size>X&&r.indexOf(p.name)===-1&&r.push(p.name));r.length?(j(!0),u.current&&u.current.value&&(u.current.value="")):(pe(_),D(_)),G(r)}function Fe(o){o.preventDefault(),j(!1),u.current&&u.current.click()}function xe(){L&&L()}function ye(o){o.stopPropagation(),P(o.target.files||[]),u.current&&u.current.value&&(u.current.value="")}function Se(o){o.preventDefault(),o.stopPropagation(),C(!0),j(!1)}function be(o){o.preventDefault(),C(!0),j(!1)}function Ee(o){o.preventDefault(),C(!1)}function Ue(o){o.preventDefault(),o.stopPropagation(),C(!1),o.dataTransfer.items?P(Array.from(o.dataTransfer.items).map(r=>r.getAsFile())):P(o.dataTransfer.files)}return e.createElement("div",{onDrop:Ue,onDragOver:Se,onDragLeave:Ee,onDragEnter:be,className:w.cl(Y({active:ue,mini:v,error:x,shown:re}),ne),...se},e.createElement("div",{className:w.cl($({constrainContentWidth:t}))},s?e.createElement("div",null,e.createElement(w.Spinner,{size:"md","aria-hidden":"true"}),e.createElement("div",{className:W},h("design-system:fileUpload.processing"))):e.createElement("div",null,e.createElement(w.Icon,{className:oe({mini:v,error:x}),icon:x?"exclamation-circle":"upload-cloud","aria-hidden":"true"}),e.createElement("div",{className:ie({mini:v})},x?e.createElement("div",null,h(T.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled")):e.createElement("div",null,h("design-system:fileUpload.title",{description:he}))),x?e.createElement("div",{className:J},new Set(T.map((o,r)=>{const _=Math.floor(o.length/2);return e.createElement("div",{className:H,key:o},e.createElement("span",{className:V},o.substr(0,_)),e.createElement("div",{className:V},e.createElement("span",null,o.substr(_))),r<T.length-1?",":"")}))):e.createElement("span",null),e.createElement("div",{className:W},e.createElement("div",null,e.createElement("span",null,N[0]),e.createElement("a",{href:"",onClick:Fe},N[1]),e.createElement("span",null,N[2]))),e.createElement("div",{className:ae},c?e.createElement("span",null,"("," ",h("design-system:fileUpload.acceptedTypes",{fileTypes:_e})," ",")"):"",f?e.createElement("span",null,"( ",h("design-system:fileUpload.maximumSize",{size:f})," )"):"",b?e.createElement("span",null," ",b," "):""),F&&e.createElement("div",{className:ee},e.createElement(M.SpsButton,{kind:y.ButtonKind.LINK,icon:y.SpsIcon.DOWNLOAD_CLOUD,onClick:xe},F)))),i&&!s&&e.createElement("div",{className:Q},e.createElement(M.SpsButton,{kind:y.ButtonKind.ICON,icon:y.SpsIcon.X,title:h("design-system:fileUpload.close"),onClick:ve})),e.createElement("form",{className:te},e.createElement("input",{ref:u,type:"file",accept:de||"*/*",multiple:a||void 0,onChange:ye})))}w.Metadata.set(k,{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"}}});const le={"File Upload":{components:[k],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`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload onSelection={selectFile} />
+              )
+            }
+          `},multiple:{description:"Multiple file upload",react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload onSelection={selectFile} multiple />
+              )
+            }
+          `}}},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`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload onSelection={selectFile} maxSize="100KB" />
+              )
+            }
+          `},fileWhitelist:{description:"File type whitelist",react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload
+                  description="Spreadsheets"
+                  onSelection={selectFile}
+                  acceptExtensions="XLS, xlsx, .csv"
+                  multiple
+                />
+              )
+            }
+          `},bothRestrictions:{description:"Both restrictions",react:d.code`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <FileUpload
+                  description="Spreadsheets"
+                  onSelection={selectFile}
+                  acceptExtensions="XLS, xlsx, .csv"
+                  maxSize="100KB"
+                  multiple
+                />
+              )
+            }
+          `}}},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`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              const [showFileUpload, setShowFileUpload] = React.useState(true);
+              function handleDismissal() {
+                setShowFileUpload(false);
+              }
+
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <>
+                  <FileUpload
+                    onSelection={selectFile}
+                    dismissable
+                    onDismiss={handleDismissal}
+                    shown={showFileUpload}
+                  />
+                  {!showFileUpload && (
+                    <SpsButton onClick={() => setShowFileUpload(true)}>
+                      Reset
+                    </SpsButton>
+                  )}
+                </>
+              )
+            }
+          `}}},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`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              function handleDownload() {
+                console.log("Download triggered");
+              }
+
+              return (
+                <FileUpload
+                  onSelection={selectFile}
+                  description="Spreadsheet"
+                  acceptExtensions="xlsx"
+                  downloadLabel="Download Excel Template"
+                  download={handleDownload}
+                />
+              )
+            }
+          `}}},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`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <FileUpload onSelection={selectFile} mini />
+                  </div>
+                </div>
+              )
+            }
+          `}}},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`
+            import { FileUpload } from "@sps-woodland/file-upload";
+
+            function Component() {
+              function selectFile(file) {
+                console.log(file);
+              }
+
+              return (
+                <div className={grid.root}>
+                  <div className={grid[4]}>
+                    <FileUpload onSelection={selectFile} constrainContentWidth />
+                  </div>
+                </div>
+              )
+            }
+          `}}}}}};n.FileUpload=k,n.MANIFEST=le,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/lib/style.css

@@ -1 +1 @@
-.rh07jw0{border-width:.0625rem;border-style:dashed;border-radius:.25rem;display:block;padding:1rem;position:relative}.rh07jw1{background-color:#f4ecf2;border-color:#91467f;border-style:solid}.rh07jw3{padding:1rem}.rh07jw5{border-color:#de002e}.rh07jw8{display:none}.rh07jw9{color:#4b5356;margin:0 auto;text-align:center}.rh07jwa{width:50%}.rh07jwc{font-size:.75rem;line-height:1.25rem}.rh07jwd{color:#717779;display:block;margin-bottom:.25rem}.rh07jwe{font-size:1.5rem;line-height:1.5rem}.rh07jwf{font-size:3rem;line-height:3rem}.rh07jwg{color:#de002e}.rh07jwi{font-weight:600;margin-bottom:.25rem}.rh07jwj{font-size:1rem;line-height:1.25rem}.rh07jwk{font-size:1.125rem;line-height:1.25rem}.rh07jwl{font-size:.875rem;font-weight:600;line-height:1.25rem}.rh07jwm{display:flex;justify-content:center;white-space:nowrap}.rh07jwn{max-width:50%;overflow:hidden}.rh07jwn:first-child{text-overflow:ellipsis}.rh07jwn:last-child{float:right}.rh07jwo{font-size:.75rem;line-height:1.125rem;margin-top:.25rem}.rh07jwo>span+span{margin-left:.125rem}.rh07jwp{margin-top:1rem}.rh07jwq{position:absolute;right:.5rem;top:.5rem}.rh07jwr{display:none}
+.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw0{border-width:.0625rem;border-style:dashed;border-radius:.25rem;display:block;padding:1rem;position:relative}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw1{background-color:#f4ecf2;border-color:#91467f;border-style:solid}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw3{padding:1rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw5{border-color:#de002e}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw8{display:none}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jw9{color:#4b5356;margin:0 auto;text-align:center}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwa{width:50%}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwc{font-size:.75rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwd{color:#717779;display:block;margin-bottom:.25rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwe{font-size:1.5rem;line-height:1.5rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwf{font-size:3rem;line-height:3rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwg{color:#de002e}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwi{font-weight:600;margin-bottom:.25rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwj{font-size:1rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwk{font-size:1.125rem;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwl{font-size:.875rem;font-weight:600;line-height:1.25rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwm{display:flex;justify-content:center;white-space:nowrap}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwn{max-width:50%;overflow:hidden}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwn:first-child{text-overflow:ellipsis}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwn:last-child{float:right}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwo{font-size:.75rem;line-height:1.125rem;margin-top:.25rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwo>span+span{margin-left:.125rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwp{margin-top:1rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwq{position:absolute;right:.5rem;top:.5rem}.pkg_sps-woodland_file-upload__version_7_19_0__hash_rh07jwr{display:none}

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@sps-woodland/file-upload",
   "description": "SPS Woodland Design System file upload component",
-  "version": "7.17.13",
+  "version": "7.19.0",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/file-upload",
   "homepage": "https://github.com/SPSCommerce/woodland/tree/master/packages/@sps-woodland/file-upload#readme",
-  "module": "./lib/index.es.js",
   "type": "module",
-  "main": "./lib/index.cjs.js",
+  "module": "./lib/index.js",
+  "main": "./lib/index.umd.cjs",
   "types": "./lib/index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/index.es.js",
-      "require": "./lib/index.cjs.js",
-      "default": "./lib/index.cjs.js",
+      "require": "./lib/index.umd.cjs",
+      "import": "./lib/index.js",
+      "default": "./lib/index.js",
       "types": "./lib/index.d.ts"
     },
     "./lib/style.css": {
@@ -30,11 +30,11 @@
     "@spscommerce/utils": "^6.12.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@spscommerce/ds-colors": "7.17.13",
-    "@sps-woodland/core": "7.17.13",
-    "@spscommerce/ds-react": "7.17.13",
-    "@sps-woodland/tokens": "7.17.13",
-    "@spscommerce/ds-shared": "7.17.13"
+    "@sps-woodland/core": "7.19.0",
+    "@spscommerce/ds-colors": "7.19.0",
+    "@spscommerce/ds-shared": "7.19.0",
+    "@sps-woodland/tokens": "7.19.0",
+    "@spscommerce/ds-react": "7.19.0"
   },
   "devDependencies": {
     "@spscommerce/ds-illustrations": "6.37.3",
@@ -43,11 +43,11 @@
     "@vanilla-extract/recipes": "^0.2.5",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "@spscommerce/ds-react": "7.17.13",
-    "@sps-woodland/tokens": "7.17.13",
-    "@sps-woodland/core": "7.17.13",
-    "@spscommerce/ds-colors": "7.17.13",
-    "@spscommerce/ds-shared": "7.17.13"
+    "@spscommerce/ds-react": "7.19.0",
+    "@sps-woodland/tokens": "7.19.0",
+    "@sps-woodland/core": "7.19.0",
+    "@spscommerce/ds-colors": "7.19.0",
+    "@spscommerce/ds-shared": "7.19.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",

package/vite.config.js

@@ -1,16 +1,25 @@
 import path from "path";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import { defineConfig } from "vite";
-
+import { getVanillaExtractPluginProps } from "../../../scripts/vanilla-extract-plugin-props.js";
 import pkg from "./package.json";
 
+const packageVersion = process.env.PREDICTED_VERSION || pkg.version;
+
 export default defineConfig({
-  plugins: [vanillaExtractPlugin()],
+  plugins: [
+    vanillaExtractPlugin(
+      getVanillaExtractPluginProps({
+        packageName: pkg.name,
+        packageVersion,
+      })
+    ),
+  ],
   build: {
     lib: {
       entry: path.resolve(__dirname, "src/index.ts"),
-      formats: ["es", "cjs"],
-      fileName: (format) => `index.${format}.js`,
+      name: "FileUpload",
+      fileName: "index",
     },
     outDir: path.resolve(__dirname, "./lib"),
     emptyOutDir: false,

package/lib/index.cjs.js

@@ -1,155 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const ue=require("react"),w=require("@sps-woodland/core"),p=require("@spscommerce/utils"),R=require("@spscommerce/ds-react"),C=require("@spscommerce/ds-shared");function fe(t){if(t&&t.__esModule)return t;const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(l,a,o.get?o:{enumerable:!0,get:()=>t[a]})}}return l.default=t,Object.freeze(l)}const e=fe(ue),W={"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"],DOCX:["application/vnd.openxmlformats-officedocument.wordprocessingml.document"],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"],PPT:["application/vnd.ms-powerpoint"],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"],XLS:["application/vnd.ms-excel"],XLSX:["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],XML:["application/xml"],XUL:["application/vnd.mozilla.xul+xml"],ZIP:["application/zip"]};function me(t,l,a){return l in t?Object.defineProperty(t,l,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[l]=a,t}function z(t,l){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);l&&(o=o.filter(function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable})),a.push.apply(a,o)}return a}function L(t){for(var l=1;l<arguments.length;l++){var a=arguments[l]!=null?arguments[l]:{};l%2?z(Object(a),!0).forEach(function(o){me(t,o,a[o])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):z(Object(a)).forEach(function(o){Object.defineProperty(t,o,Object.getOwnPropertyDescriptor(a,o))})}return t}var he=(t,l,a)=>{for(var o of Object.keys(t)){var n;if(t[o]!==((n=l[o])!==null&&n!==void 0?n:a[o]))return!1}return!0},j=t=>l=>{var a=t.defaultClassName,o=L(L({},t.defaultVariants),l);for(var n in o){var v,g=(v=o[n])!==null&&v!==void 0?v:t.defaultVariants[n];if(g!=null){var c=g;typeof c=="boolean"&&(c=c===!0?"true":"false");var d=t.variantClassNames[n][c];d&&(a+=" "+d)}}for(var[x,O]of t.compoundVariants)he(x,o,t.defaultVariants)&&(a+=" "+O);return a},ve="rh07jwm",k="rh07jwn",we="rh07jwl",ge=j({defaultClassName:"rh07jw0",variantClassNames:{active:{true:"rh07jw1",false:"rh07jw2"},mini:{true:"rh07jw3",false:"rh07jw4"},error:{true:"rh07jw5",false:"rh07jw6"},shown:{true:"rh07jw7",false:"rh07jw8"}},defaultVariants:{active:!1,mini:!1,error:!1,shown:!0},compoundVariants:[]}),Fe="rh07jwq",xe=j({defaultClassName:"rh07jw9",variantClassNames:{constrainContentWidth:{true:"rh07jwa",false:"rh07jwb"}},defaultVariants:{constrainContentWidth:!1},compoundVariants:[]}),Se="rh07jwp",be="rh07jwr",ye=j({defaultClassName:"rh07jwd",variantClassNames:{mini:{true:"rh07jwe",false:"rh07jwf"},error:{true:"rh07jwg",false:"rh07jwh"}},defaultVariants:{mini:!1,error:!1},compoundVariants:[]}),X="rh07jwc",Ee="rh07jwo",Ue=j({defaultClassName:"rh07jwi",variantClassNames:{mini:{true:"rh07jwj",false:"rh07jwk"}},defaultVariants:{mini:!1},compoundVariants:[]});function P({constrainContentWidth:t,description:l,multiple:a=!1,dismissable:o,processing:n,mini:v,downloadLabel:g,acceptExtensions:c,maxSize:d,customRequirement:x,onSelection:O,onDismiss:M,download:A,shown:S,className:G,children:Oe,..._}){const b=e.useRef(new Set),[q,I]=e.useState(S),[De,K]=e.useState([]),[Z,H]=e.useState(""),[B,J]=e.useState(),[Y,y]=e.useState(!1),[F,E]=e.useState(!1),[D,V]=e.useState([]),[Q,$]=e.useState(""),{t:h}=e.useContext(w.I18nContext),N=h(a?"design-system:fileUpload.instructions_plural":"design-system:fileUpload.instructions").split("|"),ee=l||(a?"Files":"File"),u=e.useRef(null);e.useEffect(()=>{S&&I(S)},[S]),e.useEffect(()=>{d&&ie(d)},[d]),e.useEffect(()=>{c&&ae(c)},[c]);function te(){o&&(I(!1),M&&M())}function ie(i){try{J(p.parseFileSize(i))}catch{throw new Error(`Could not parse "${i}" as a file size.`)}}function ae(i){const f=(Array.isArray(i)?i:i.trim().split(/\s?,\s?/)).map(m=>m.replace(/^\./,"")),r=f.map(m=>`.${m}`.toLowerCase());$(r.map((m,U)=>U>0&&U===r.length-1?`or ${m}`:m).join(r.length>2?", ":" ")),b.current.clear();for(const m of f){const U=Object.keys(W).includes(m.toUpperCase())?W[m.toUpperCase()]:[];for(const de of U)b.current.add(de)}H(r.concat(Array.from(b.current)).join(","))}function T(i){V([]);let s=[];const f=Array.from(i);for(const r of f)r===null?s.push("Not a file"):(c&&!b.current.has(r.type)&&s.push(r.name),d&&B&&r.size>B&&s.indexOf(r.name)===-1&&s.push(r.name));s.length?(E(!0),u.current&&u.current.value&&(u.current.value="")):(K(f),O(f)),V(s)}function oe(i){i.preventDefault(),E(!1),u.current&&u.current.click()}function le(){A&&A()}function ne(i){i.stopPropagation(),T(i.target.files||[]),u.current&&u.current.value&&(u.current.value="")}function se(i){i.preventDefault(),i.stopPropagation(),y(!0),E(!1)}function re(i){i.preventDefault(),y(!0),E(!1)}function ce(i){i.preventDefault(),y(!1)}function pe(i){i.preventDefault(),i.stopPropagation(),y(!1),i.dataTransfer.items?T(Array.from(i.dataTransfer.items).map(s=>s.getAsFile())):T(i.dataTransfer.files)}return e.createElement("div",{onDrop:pe,onDragOver:se,onDragLeave:ce,onDragEnter:re,className:w.cl(ge({active:Y,mini:v,error:F,shown:q}),G),..._},e.createElement("div",{className:w.cl(xe({constrainContentWidth:t}))},n?e.createElement("div",null,e.createElement(w.Spinner,{size:"md","aria-hidden":"true"}),e.createElement("div",{className:X},h("design-system:fileUpload.processing"))):e.createElement("div",null,e.createElement(w.Icon,{className:ye({mini:v,error:F}),icon:F?"exclamation-circle":"upload-cloud","aria-hidden":"true"}),e.createElement("div",{className:Ue({mini:v})},F?e.createElement("div",null,h(D.length>1?"design-system:fileUpload.cancelled_plural":"design-system:fileUpload.cancelled")):e.createElement("div",null,h("design-system:fileUpload.title",{description:ee}))),F?e.createElement("div",{className:we},new Set(D.map((i,s)=>{const f=Math.floor(i.length/2);return e.createElement("div",{className:ve,key:i},e.createElement("span",{className:k},i.substr(0,f)),e.createElement("div",{className:k},e.createElement("span",null,i.substr(f))),s<D.length-1?",":"")}))):e.createElement("span",null),e.createElement("div",{className:X},e.createElement("div",null,e.createElement("span",null,N[0]),e.createElement("a",{href:"",onClick:oe},N[1]),e.createElement("span",null,N[2]))),e.createElement("div",{className:Ee},c?e.createElement("span",null,"("," ",h("design-system:fileUpload.acceptedTypes",{fileTypes:Q})," ",")"):"",d?e.createElement("span",null,"( ",h("design-system:fileUpload.maximumSize",{size:d})," )"):"",x?e.createElement("span",null," ",x," "):""),g&&e.createElement("div",{className:Se},e.createElement(R.SpsButton,{kind:C.ButtonKind.LINK,icon:C.SpsIcon.DOWNLOAD_CLOUD,onClick:le},g)))),o&&!n&&e.createElement("div",{className:Fe},e.createElement(R.SpsButton,{kind:C.ButtonKind.ICON,icon:C.SpsIcon.X,title:h("design-system:fileUpload.close"),onClick:te})),e.createElement("form",{className:be},e.createElement("input",{ref:u,type:"file",accept:Z||"*/*",multiple:a||void 0,onChange:ne})))}w.Metadata.set(P,{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"}}});const Ce={components:[P],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:p.code`
-            import { FileUpload } from "@sps-woodland/file-upload";
-
-            function Component() {
-              function selectFile(file) {
-                console.log(file);
-              }
-
-              return (
-                <FileUpload onSelection={selectFile} />
-              )
-            }
-          `},multiple:{description:"Multiple file upload",react:p.code`
-            import { FileUpload } from "@sps-woodland/file-upload";
-
-            function Component() {
-              function selectFile(file) {
-                console.log(file);
-              }
-
-              return (
-                <FileUpload onSelection={selectFile} multiple />
-              )
-            }
-          `}}},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:p.code`
-            import { FileUpload } from "@sps-woodland/file-upload";
-
-            function Component() {
-              function selectFile(file) {
-                console.log(file);
-              }
-
-              return (
-                <FileUpload onSelection={selectFile} maxSize="100KB" />
-              )
-            }
-          `},fileWhitelist:{description:"File type whitelist",react:p.code`
-            import { FileUpload } from "@sps-woodland/file-upload";
-
-            function Component() {
-              function selectFile(file) {
-                console.log(file);
-              }
-
-              return (
-                <FileUpload
-                  description="Spreadsheets"
-                  onSelection={selectFile}
-                  acceptExtensions="XLS, xlsx, .csv"
-                  multiple
-                />
-              )
-            }
-          `},bothRestrictions:{description:"Both restrictions",react:p.code`
-            import { FileUpload } from "@sps-woodland/file-upload";
-
-            function Component() {
-              function selectFile(file) {
-                console.log(file);
-              }
-
-              return (
-                <FileUpload
-                  description="Spreadsheets"
-                  onSelection={selectFile}
-                  acceptExtensions="XLS, xlsx, .csv"
-                  maxSize="100KB"
-                  multiple
-                />
-              )
-            }
-          `}}},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:p.code`
-            import { FileUpload } from "@sps-woodland/file-upload";
-
-            function Component() {
-              const [showFileUpload, setShowFileUpload] = React.useState(true);
-              function handleDismissal() {
-                setShowFileUpload(false);
-              }
-
-              function selectFile(file) {
-                console.log(file);
-              }
-
-              return (
-                <>
-                  <FileUpload
-                    onSelection={selectFile}
-                    dismissable
-                    onDismiss={handleDismissal}
-                    shown={showFileUpload}
-                  />
-                  {!showFileUpload && (
-                    <SpsButton onClick={() => setShowFileUpload(true)}>
-                      Reset
-                    </SpsButton>
-                  )}
-                </>
-              )
-            }
-          `}}},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:p.code`
-            import { FileUpload } from "@sps-woodland/file-upload";
-
-            function Component() {
-              function selectFile(file) {
-                console.log(file);
-              }
-
-              function handleDownload() {
-                console.log("Download triggered");
-              }
-
-              return (
-                <FileUpload
-                  onSelection={selectFile}
-                  description="Spreadsheet"
-                  acceptExtensions="xlsx"
-                  downloadLabel="Download Excel Template"
-                  download={handleDownload}
-                />
-              )
-            }
-          `}}},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:p.code`
-            import { FileUpload } from "@sps-woodland/file-upload";
-
-            function Component() {
-              function selectFile(file) {
-                console.log(file);
-              }
-
-              return (
-                <div className={grid.root}>
-                  <div className={grid[4]}>
-                    <FileUpload onSelection={selectFile} mini />
-                  </div>
-                </div>
-              )
-            }
-          `}}},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:p.code`
-            import { FileUpload } from "@sps-woodland/file-upload";
-
-            function Component() {
-              function selectFile(file) {
-                console.log(file);
-              }
-
-              return (
-                <div className={grid.root}>
-                  <div className={grid[4]}>
-                    <FileUpload onSelection={selectFile} constrainContentWidth />
-                  </div>
-                </div>
-              )
-            }
-          `}}}}},je={"File Upload":Ce};exports.FileUpload=P;exports.MANIFEST=je;