@splunk/react-ui 5.2.0 → 5.3.0

package/File.js

@@ -109,11 +109,11 @@
         displayName: "FileStyles__StyledInput",
         componentId: "sc-1wyh4cf-0"
     })([ "&[type='file']{width:0.1px;height:0.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1;}" ]);
-    /* wraps the drop target box and the list of files */    var E = k().div.withConfig({
+    /* wraps the drop target box and the list of files */    var I = k().div.withConfig({
         displayName: "FileStyles__StyledFileWrapper",
         componentId: "sc-1wyh4cf-1"
     })([ "display:flex;flex-direction:column;gap:", ";" ], w.variables.spacingSmall);
-    var I = k()(q()).withConfig({
+    var E = k()(q()).withConfig({
         displayName: "FileStyles__StyledUploadIcon",
         componentId: "sc-1wyh4cf-2"
     })([ "width:", ";height:", ";fill:", ";" ], C, C, w.variables.contentColorActive);
@@ -133,13 +133,13 @@
         componentId: "sc-1wyh4cf-5"
     })([ "", ";flex-direction:column;align-items:center;justify-content:center;min-height:", ";gap:", ";padding:", ";border-radius:", ";cursor:pointer;", " ", " ", " ", " ", " ", " ", "" ], w.mixins.reset("flex"), x, w.variables.spacingXSmall, w.variables.spacingSmall, w.variables.borderRadius, (function(e) {
         var n = e.$disabled;
-        return !n && (0, h.css)([ "&:hover{background-color:", ";", "{color:", ";}", "{fill:", ";}}" ], w.variables.actionColorBackgroundSubtleHover, /* sc-sel */ _, w.variables.contentColorAccentStrong, /* sc-sel */ I, w.variables.contentColorAccentStrong);
+        return !n && (0, h.css)([ "&:hover{background-color:", ";", "{color:", ";}", "{fill:", ";}}" ], w.variables.actionColorBackgroundSubtleHover, /* sc-sel */ _, w.variables.contentColorAccentStrong, /* sc-sel */ E, w.variables.contentColorAccentStrong);
     }), (function(e) {
         var n = e.$screenMode;
         return n === "normal" && (0, h.css)([ "border:", " dashed ", ";" ], w.variables.inputBorderWidth, w.variables.borderColor);
     }), (function(e) {
         var n = e.$dragOver, r = e.$focused, t = e.$error;
-        return (n || r && !t) && (0, h.css)([ "", "{color:", ";}", "{fill:", ";}" ], /* sc-sel */ _, w.variables.contentColorAccentStrong, /* sc-sel */ I, w.variables.contentColorAccentStrong);
+        return (n || r && !t) && (0, h.css)([ "", "{color:", ";}", "{fill:", ";}" ], /* sc-sel */ _, w.variables.contentColorAccentStrong, /* sc-sel */ E, w.variables.contentColorAccentStrong);
     }), (function(e) {
         var n = e.$dragOver;
         return n && (0, h.css)([ "background-color:", ";" ], w.variables.actionColorBackgroundSubtleHover);
@@ -148,7 +148,7 @@
         return n && (0, h.css)([ "box-shadow:", ";" ], w.variables.focusShadow);
     }), (function(e) {
         var n = e.$disabled;
-        return n && (0, h.css)([ "border-color:", ";cursor:not-allowed;", ",", "{color:", ";}", "{fill:", ";}" ], w.variables.borderColorWeak, /* sc-sel */ _, /* sc-sel */ R, w.variables.contentColorDisabled, /* sc-sel */ I, w.variables.contentColorDisabled);
+        return n && (0, h.css)([ "border-color:", ";cursor:not-allowed;", ",", "{color:", ";}", "{fill:", ";}" ], w.variables.borderColorWeak, /* sc-sel */ _, /* sc-sel */ R, w.variables.contentColorDisabled, /* sc-sel */ E, w.variables.contentColorDisabled);
     }), (function(e) {
         var n = e.$error, r = e.$dragOver;
         return n && !r && (0, h.css)([ "border-color:", ";" ], w.variables.interactiveColorAccentError);
@@ -235,8 +235,8 @@
     const xe = require("@splunk/react-icons/FileMp3");
     var Fe =  e.n(xe);
     // CONCATENATED MODULE: external "@splunk/react-icons/FileMp4"
-    const Ee = require("@splunk/react-icons/FileMp4");
-    var Ie =  e.n(Ee);
+    const Ie = require("@splunk/react-icons/FileMp4");
+    var Ee =  e.n(Ie);
     // CONCATENATED MODULE: external "@splunk/react-icons/FileMpg"
     const _e = require("@splunk/react-icons/FileMpg");
     var Re =  e.n(_e);
@@ -360,7 +360,7 @@
         log: qe(),
         mid: Ce(),
         mp3: Fe(),
-        mp4: Ie(),
+        mp4: Ee(),
         mpg: Re(),
         pdf: Ae(),
         php: Pe(),
@@ -392,10 +392,10 @@
             "aria-hidden": "true"
         });
     };
-    /* harmony default export */    const En = Fn;
+    /* harmony default export */    const In = Fn;
     // CONCATENATED MODULE: ./src/File/Item.tsx
-    function In() {
-        return In = Object.assign ? Object.assign.bind() : function(e) {
+    function En() {
+        return En = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -403,7 +403,7 @@
                 }
             }
             return e;
-        }, In.apply(null, arguments);
+        }, En.apply(null, arguments);
     }
     function _n(e, n) {
         if (null == e) return {};
@@ -472,18 +472,18 @@
         var F = (0, v.sprintf)((0, m._)('Retry "%(filename)s"'), {
             filename: c
         });
-        var E = (0, v.sprintf)((0, m._)('Uploading "%(filename)s"'), {
+        var I = (0, v.sprintf)((0, m._)('Uploading "%(filename)s"'), {
             filename: c
         });
-        var I = (0, m._)("Remove");
+        var E = (0, m._)("Remove");
         var _ = n !== undefined ? n : C;
         var R = p !== undefined && p > 0;
-        var O = o ? An :  t().createElement(En, {
+        var O = o ? An :  t().createElement(In, {
             name: c,
             icon: l
         });
         
-        return t().createElement(yn, null,  t().createElement(bn, In({
+        return t().createElement(yn, null,  t().createElement(bn, En({
             "data-test": "item",
             "data-test-disabled": _ ? "disabled" : undefined,
             "data-test-error": o,
@@ -495,7 +495,7 @@
             "data-test": "label"
         }, c), R &&  t().createElement(t().Fragment, null,  t().createElement(qn, {
             percentage: p,
-            "aria-label": E
+            "aria-label": I
         }),  t().createElement("span", null, p, "%")), S && o &&  t().createElement(wn, {
             "data-test": "retry",
             onClick: q,
@@ -509,14 +509,14 @@
             "aria-label": x,
             appearance: "subtle"
         },  t().createElement(B(), {
-            "aria-label": I
+            "aria-label": E
         })) :  t().createElement(wn, {
             "data-test": "remove",
             onClick: h,
             "aria-label": x,
             appearance: "subtle"
         },  t().createElement(M(), {
-            "aria-label": I
+            "aria-label": E
         })))), o &&  t().createElement(Cn, null, (0, m._)("Something went wrong.")));
     }
     Tn.propTypes = On;
@@ -736,6 +736,7 @@
         fullscreen: d().bool,
         error: d().bool,
         help: d().node,
+        inputId: d().string,
         name: d().string,
         onRequestAdd: d().func,
         onRequestRemove: d().func,
@@ -749,155 +750,157 @@
  * file readers, only a reference to the file. This can be used to post binary content, or
  * upload using an array buffer.
  */    function Yn(e) {
-        var n = e.accept, a = e.allowMultiple, o = e.children, s = e.disabled, u = e.dropAnywhere, d = e.elementRef, p = e.error, b = e.fullscreen, h = e.help, k = e.name, S = e.onRequestAdd, q = e.onRequestRemove, w = e.onRequestRetry, C = e.required, x = e.supportsMessage, j = Zn(e, [ "accept", "allowMultiple", "children", "disabled", "dropAnywhere", "elementRef", "error", "fullscreen", "help", "name", "onRequestAdd", "onRequestRemove", "onRequestRetry", "required", "supportsMessage" ]);
+        var n = e.accept, a = e.allowMultiple, o = e.children, s = e.disabled, u = e.dropAnywhere, d = e.elementRef, p = e.error, b = e.fullscreen, h = e.help, k = e.inputId, S = e.name, q = e.onRequestAdd, w = e.onRequestRemove, C = e.onRequestRetry, x = e.required, j = e.supportsMessage, N = Zn(e, [ "accept", "allowMultiple", "children", "disabled", "dropAnywhere", "elementRef", "error", "fullscreen", "help", "inputId", "name", "onRequestAdd", "onRequestRemove", "onRequestRetry", "required", "supportsMessage" ]);
         // @docs-props-type FilePropsBase
-                var N = (0, r.useState)(false), D = Wn(N, 2), M = D[0], $ = D[1];
-        var B = (0, r.useState)(false), L = Wn(B, 2), X = L[0], U = L[1];
+                var D = (0, r.useState)(false), M = Wn(D, 2), $ = M[0], B = M[1];
+        var L = (0, r.useState)(false), X = Wn(L, 2), U = X[0], W = X[1];
         /* Each time a file is uploaded this is incremented and used to generate the
-   * file input's key. In this way we get a new input without a value. */        var W = (0, 
-        r.useState)(0), z = Wn(W, 2), H = z[0], J = z[1];
-        var G = (0, y.createDOMID)();
-        var V = (0, r.useCallback)((function(e) {
+   * file input's key. In this way we get a new input without a value. */        var z = (0, 
+        r.useState)(0), H = Wn(z, 2), J = H[0], G = H[1];
+        var V = (0, r.useMemo)((function() {
+            return k || (0, y.createDOMID)("file");
+        }), [ k ]);
+        var Z = (0, r.useCallback)((function(e) {
             if (e !== undefined && e.length > 0) {
                 var n = Array.from(e);
-                S === null || S === void 0 ? void 0 : S(a ? n : [ n[0] ], {
-                    name: k
+                q === null || q === void 0 ? void 0 : q(a ? n : [ n[0] ], {
+                    name: S
                 });
             } else {
-                S === null || S === void 0 ? void 0 : S([], {
-                    name: k
+                q === null || q === void 0 ? void 0 : q([], {
+                    name: S
                 });
             }
-            J((function(e) {
+            G((function(e) {
                 return e + 1;
             }));
-        }), [ a, k, S ]);
-        var Z = (0, r.useCallback)((function(e) {
+        }), [ a, S, q ]);
+        var K = (0, r.useCallback)((function(e) {
             var n;
-            V((n = e.currentTarget.files) !== null && n !== void 0 ? n : undefined);
-        }), [ V ]);
-        var K = (0, r.useCallback)((function() {
-            U(true);
-        }), []);
+            Z((n = e.currentTarget.files) !== null && n !== void 0 ? n : undefined);
+        }), [ Z ]);
         var Q = (0, r.useCallback)((function() {
-            U(false);
+            W(true);
         }), []);
-        var Y = (0, r.useCallback)((function(e) {
-            if (!M) {
-                $(true);
+        var Y = (0, r.useCallback)((function() {
+            W(false);
+        }), []);
+        var ee = (0, r.useCallback)((function(e) {
+            if (!$) {
+                B(true);
             }
             e.preventDefault();
-        }), [ M ]);
-        var ee = (0, r.useMemo)((function() {
+        }), [ $ ]);
+        var ne = (0, r.useMemo)((function() {
             return i()((function() {
-                return $(false);
+                return B(false);
             }), 300);
-        }), [ $ ]);
-        var ne = (0, r.useCallback)((function(e) {
+        }), [ B ]);
+        var re = (0, r.useCallback)((function(e) {
             var n;
             e.preventDefault();
-            ee();
-            V((n = e.dataTransfer) === null || n === void 0 ? void 0 : n.files);
-        }), [ V, ee ]);
-        var re = (0, r.useCallback)((function(e) {
+            ne();
+            Z((n = e.dataTransfer) === null || n === void 0 ? void 0 : n.files);
+        }), [ Z, ne ]);
+        var te = (0, r.useCallback)((function(e) {
             var n = e.name, r = e.index, t = e.itemId;
-            w === null || w === void 0 ? void 0 : w({
+            C === null || C === void 0 ? void 0 : C({
                 event: e,
                 filename: n,
                 index: r,
                 itemId: t,
-                name: k
+                name: S
             });
-        }), [ k, w ]);
-        var te = (0, r.useCallback)((function(e) {
+        }), [ S, C ]);
+        var ae = (0, r.useCallback)((function(e) {
             var n = e.name, r = e.index, t = e.itemId;
-            q === null || q === void 0 ? void 0 : q({
+            w === null || w === void 0 ? void 0 : w({
                 event: e,
                 filename: n,
                 index: r,
                 itemId: t,
-                name: k
+                name: S
             });
-        }), [ k, q ]);
-        var ae = r.Children.toArray(o).filter(r.isValidElement).map((function(e, n) {
+        }), [ S, w ]);
+        var ie = r.Children.toArray(o).filter(r.isValidElement).map((function(e, n) {
             
             return (0, r.cloneElement)(e, {
                 index: n,
                 key: e.key || e.props.itemId || "item-".concat(n)
             });
         }));
-        var ie = b || u;
-        var oe = ie || s;
-        var le = ie && !s;
-        var se = s ? false : M || false;
-        var ce = b ? "full" : "normal";
-        var ue = l()(n) && c()(n.split(",").join(", "));
-        var de = ie ? (0, m._)("Drop your file anywhere or click this area to upload") : (0, 
+        var oe = b || u;
+        var le = oe || s;
+        var se = oe && !s;
+        var ce = s ? false : $ || false;
+        var ue = b ? "full" : "normal";
+        var de = l()(n) && c()(n.split(",").join(", "));
+        var pe = oe ? (0, m._)("Drop your file anywhere or click this area to upload") : (0, 
         m._)("Click or drag file to this area to upload");
-        var pe = x;
-        if (!pe) {
-            pe = n ? (0, v.sprintf)((0, m._)("Supports %(fileTypes)s"), {
-                fileTypes: ue
+        var fe = j;
+        if (!fe) {
+            fe = n ? (0, v.sprintf)((0, m._)("Supports %(fileTypes)s"), {
+                fileTypes: de
             }) : (0, m._)("Supports all file types");
         }
-        var fe = (0, r.useMemo)((function() {
+        var ve = (0, r.useMemo)((function() {
             return {
                 disabled: !!s,
-                onRequestRemove: q ? te : undefined,
-                onRequestRetry: w ? re : undefined
+                onRequestRemove: w ? ae : undefined,
+                onRequestRetry: C ? te : undefined
             };
-        }), [ s, te, re, q, w ]);
+        }), [ s, ae, te, w, C ]);
         
-        return t().createElement(E, Un({
+        return t().createElement(I, Un({
             ref: d,
             "data-test": "file",
             "data-test-disabled": s ? "disabled" : undefined,
             "data-test-error": !!p
-        }, j),  t().createElement("label", {
-            htmlFor: G,
+        }, N),  t().createElement("label", {
+            htmlFor: V,
             "data-test": "file-label"
         },  t().createElement(O, {
             "data-test": "file-drop-target",
-            onDragOver: oe ? undefined : Y,
-            onDragLeave: oe ? undefined : ee,
-            onDrop: oe ? undefined : ne,
+            onDragOver: le ? undefined : ee,
+            onDragLeave: le ? undefined : ne,
+            onDrop: le ? undefined : re,
             $disabled: !!s,
-            $dragOver: se,
+            $dragOver: ce,
             $error: !!p,
-            $screenMode: ce,
-            $focused: X
-        },  t().createElement(I, {
-            $screenMode: ce
+            $screenMode: ue,
+            $focused: U
+        },  t().createElement(E, {
+            $screenMode: ue
         }),  t().createElement(F, {
             accept: n,
             "data-test": "file-input",
             disabled: s,
-            id: G,
-            key: "file-input-".concat(H),
+            id: V,
+            key: "file-input-".concat(J),
             multiple: a || undefined,
-            onBlur: Q,
-            onChange: Z,
-            onFocus: K,
-            required: C,
+            onBlur: Y,
+            onChange: K,
+            onFocus: Q,
+            required: x,
             type: "file"
-        }),  t().createElement(_, null, de),  t().createElement(R, {
+        }),  t().createElement(_, null, pe),  t().createElement(R, {
             "data-test": "file-supports"
-        }, pe), le && M &&  t().createElement(T, {
+        }, fe), se && $ &&  t().createElement(T, {
             "data-test": "file-window-drop",
-            onDragLeave: ee
-        }), le &&  t().createElement(t().Fragment, null,  t().createElement(f(), {
+            onDragLeave: ne
+        }), se &&  t().createElement(t().Fragment, null,  t().createElement(f(), {
             target: Xn,
             eventType: "dragover",
-            listener: Y
+            listener: ee
         }),  t().createElement(f(), {
             target: Xn,
             eventType: "drop",
-            listener: ne
+            listener: re
         })))), !s && h &&  t().createElement(A, {
             "data-test": "help"
         }, h),  t().createElement(g.Provider, {
-            value: fe
-        },  t().createElement(P, null, ae)));
+            value: ve
+        },  t().createElement(P, null, ie)));
     }
     Yn.propTypes = Qn;
     Yn.componentType = "File";