@splunk/react-ui 4.33.0 → 4.35.0

package/ControlGroup.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        ControlGroupContext: () => /* reexport */ T,
+        ControlGroupContext: () => /* reexport */ L,
         default: () => /* reexport */ se
     });
     // CONCATENATED MODULE: external "react"
@@ -98,10 +98,10 @@
         componentId: "wjnyif-0"
     })([ "", " ", " max-width:600px;margin-bottom:", ";", " color:", ";", "" ], c.mixins.reset("block"), c.mixins.clearfix(), (0, 
     c.pick)({
-        enterprise: (0, h.css)([ "calc(", " * 0.75)" ], c.variables.spacing),
+        enterprise: c.variables.spacingMedium,
         prisma: {
-            comfortable: "16px",
-            compact: "12px"
+            comfortable: c.variables.spacingLarge,
+            compact: c.variables.spacingMedium
         }
     }), (0, c.pick)({
         prisma: {
@@ -121,11 +121,11 @@
             prisma: c.variables.accentColorNegative
         }));
     }));
-    var x = m()(d()).withConfig({
+    var S = m()(d()).withConfig({
         displayName: "ControlGroupStyles__StyledControlsStackBox",
         componentId: "wjnyif-1"
     })([ "flex-direction:column;" ]);
-    var S = m().div.withConfig({
+    var x = m().div.withConfig({
         displayName: "ControlGroupStyles__StyledLabelWrapper",
         componentId: "wjnyif-2"
     })([ "display:inline-flex;align-items:center;", " ", "" ], (0, c.pick)({
@@ -138,7 +138,7 @@
             prisma: (0, h.css)([ "min-height:", ";" ], c.variables.inputHeight)
         }));
     }));
-    var I = m()(S).withConfig({
+    var I = m()(x).withConfig({
         displayName: "ControlGroupStyles__StyledLabelWrapperLeft",
         componentId: "wjnyif-3"
     })([ "float:left;" ]);
@@ -196,20 +196,20 @@
  * @public
  */
     var _ =  n().createContext({});
-    /* harmony default export */    const T = _;
+    /* harmony default export */    const L = _;
     // CONCATENATED MODULE: ./src/ControlGroup/ControlGroup.tsx
-    function L(e) {
+    function T(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            L = function e(t) {
+            T = function e(t) {
                 return typeof t;
             };
         } else {
-            L = function e(t) {
+            T = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return L(e);
+        return T(e);
     }
     function E() {
         E = Object.assign || function(e) {
@@ -380,7 +380,7 @@
         };
     }
     function X(e, t) {
-        if (t && (L(t) === "object" || typeof t === "function")) {
+        if (t && (T(t) === "object" || typeof t === "function")) {
             return t;
         }
         return K(e);
@@ -572,13 +572,16 @@
             key: "render",
             value: function e() {
                 var t = this;
-                var o = this.props, i = o.children, l = o.controlsLayout, a = o.error, s = o.help, c = o.hideLabel, u = o.label, f = o.labelFor, y = o.labelPosition, h = o.labelWidth, m = o.required, v = o.size, g = o.splunkTheme, _ = o.tooltip, L = o.tooltipDefaultPlacement, D = M(o, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "size", "splunkTheme", "tooltip", "tooltipDefaultPlacement" ]);
+                var o = this.props, i = o.children, l = o.controlsLayout, a = o.error, s = o.help, c = o.hideLabel, u = o.label, f = o.labelFor, y = o.labelPosition, h = o.labelWidth, m = o.required, v = o.size, g = o.splunkTheme, _ = o.tooltip, T = o.tooltipDefaultPlacement, D = M(o, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "size", "splunkTheme", "tooltip", "tooltipDefaultPlacement" ]);
                 var V = g.isPrisma, $ = g.isCompact;
                 var A = r.Children.toArray(i).filter(r.isValidElement);
                 var G = A.length;
                 var B = D;
+                var N = typeof a === "string";
+                var z = N && a !== "";
+                var R = N || a === true;
  // Clean the Children
-                                var N = function e(n, o) {
+                                var W = function e(n, o) {
                     var i = {
                         key: n.key || o
                     };
@@ -636,32 +639,35 @@
                             i.id = n.props.id || t.getChildID("id", o);
                         }
                     }
+                    if (z && n.props.error === true) {
+                        i["aria-errormessage"] = t.errorId;
+                    }
                     
                     return (0, r.cloneElement)(n, i);
                 };
-                var z = A.map(N);
-                var R = this.getLinkedId(z);
+                var F = A.map(W);
+                var J = this.getLinkedId(F);
                 if (a) {
                     B["aria-invalid"] = true;
                 }
-                var W = y === "left" ? {
+                var H = y === "left" ? {
                     width: h
                 } : undefined;
-                var F = p()(h) ? "".concat(h, "px") : h;
-                var J = V ? "16px" : "20px";
-                var H = y === "left" ? {
-                    marginLeft: "calc(".concat(F, " + ").concat(J, ")")
+                var U = p()(h) ? "".concat(h, "px") : h;
+                var X = V ? "16px" : "20px";
+                var K = y === "left" ? {
+                    marginLeft: "calc(".concat(U, " + ").concat(X, ")")
                 } : undefined;
-                var U = l === "stack" ? x : d();
-                var X = y === "left" ? I : S;
-                var K =  n().createElement(X, {
-                    style: W,
+                var Q = l === "stack" ? S : d();
+                var Y = y === "left" ? I : x;
+                var Z =  n().createElement(Y, {
+                    style: H,
                     $labelPosition: y
                 },  n().createElement(C, {
                     "data-size": v,
                     "data-test": "label",
                     id: this.labelId,
-                    htmlFor: f || R,
+                    htmlFor: f || J,
                     $tooltip: !!_
                 }, m &&  n().createElement(P, {
                     "aria-hidden": "true"
@@ -669,31 +675,29 @@
                     $labelPosition: y,
                     closeWhen: "notOnClick",
                     content: _,
-                    defaultPlacement: L,
+                    defaultPlacement: T,
                     "aria-hidden": "true"
                 }));
-                var Q = typeof a === "string" || a === true;
-                var Y = typeof a === "boolean";
                 
                 return n().createElement(O, E({
                     "data-test": "control-group",
                     "data-test-required": m,
-                    $error: Q
-                }, B),  n().createElement(T.Provider, {
+                    $error: R
+                }, B),  n().createElement(L.Provider, {
                     value: this.getContextValue()
-                }, c ?  n().createElement(b(), null, K) : K,  n().createElement(U, {
+                }, c ?  n().createElement(b(), null, Z) : Z,  n().createElement(Q, {
                     "data-test": "controls",
                     flex: l !== "none",
-                    style: H
-                }, z), s &&  n().createElement(w, {
+                    style: K
+                }, F), s &&  n().createElement(w, {
                     "data-test": "help",
                     id: this.helpId,
-                    style: H,
-                    $error: Q && Y
-                }, s), Q && !Y &&  n().createElement(j, {
+                    style: K,
+                    $error: R && !z
+                }, s), z &&  n().createElement(j, {
                     "data-test": "error",
                     id: this.errorId,
-                    style: H,
+                    style: K,
                     $help: !!s
                 }, a)));
             }

package/DualListbox.js

@@ -250,7 +250,7 @@
     var H = D()(P()).withConfig({
         displayName: "ToolbarButtonStyles__StyledClickable",
         componentId: "k7zksz-0"
-    })([ "", " border:", ";border-radius:", ";box-sizing:border-box;cursor:pointer;flex-grow:1;font-weight:", ";line-height:", ";min-height:", ";min-width:", ";max-width:100%;padding:", ";position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;width:", ";&:active{transition:none;}&:focus{box-shadow:", ";}&:focus,&:hover{z-index:3;}", ";" ], N.mixins.reset("block"), (0, 
+    })([ "", " border:", ";border-radius:", ";box-sizing:border-box;cursor:pointer;flex-grow:1;font-weight:", ";line-height:", ";min-height:", ";min-width:", ";max-width:100%;", ";position:relative;text-align:center;text-decoration:none;vertical-align:middle;white-space:nowrap;width:", ";&:active{transition:none;}&:focus{box-shadow:", ";}&:focus,&:hover{z-index:3;}", ";" ], N.mixins.reset("block"), (0, 
     N.pick)({
         enterprise: "1px solid transparent"
     }), N.variables.borderRadius, (0, N.pick)({
@@ -259,13 +259,10 @@
     }), N.variables.lineHeight, N.variables.inputHeight, N.variables.inputHeight, (0, 
     N.pick)({
         enterprise: {
-            comfortable: "0 5px",
-            compact: "0 2px"
+            comfortable: (0, _.css)([ "padding:0 5px;" ]),
+            compact: (0, _.css)([ "padding:0 2px;" ])
         },
-        prisma: {
-            comfortable: (0, _.css)([ "0px calc(", " / 2 - 1px)" ], N.variables.inputHeight),
-            compact: (0, _.css)([ "0px calc(", " / 2 - 1px)" ], N.variables.inputHeight)
-        }
+        prisma: (0, _.css)([ "padding:0 calc(", " / 2 - 1px);" ], N.variables.inputHeight)
     }), N.variables.inputHeight, N.variables.focusShadow, (0, N.pickVariant)("$disabled", {
         false: (0, N.pick)({
             enterprise: (0, _.css)([ "color:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";transition:none;}&:focus{color:", ";}" ], (0, 
@@ -420,12 +417,12 @@
     var G = D().div.withConfig({
         displayName: "OptionStyles__StyledDiv",
         componentId: "q275d9-2"
-    })([ "padding:", ";word-break:break-word;word-wrap:break-word;" ], (0, N.pick)({
+    })([ "", ";word-break:break-word;word-wrap:break-word;" ], (0, N.pick)({
         prisma: {
-            compact: (0, _.css)([ "6px ", "" ], N.variables.spacingSmall),
-            comfortable: (0, _.css)([ "10px ", "" ], N.variables.spacingSmall)
+            compact: (0, _.css)([ "padding:6px ", ";" ], N.variables.spacingSmall),
+            comfortable: (0, _.css)([ "padding:10px ", ";" ], N.variables.spacingSmall)
         },
-        enterprise: (0, _.css)([ "6px ", "" ], N.variables.spacingSmall)
+        enterprise: (0, _.css)([ "padding:6px ", ";" ], N.variables.spacingSmall)
     }));
     // CONCATENATED MODULE: ./src/DualListbox/ListboxContext.tsx
     /**

package/File.js

@@ -101,8 +101,8 @@
     const w = require("@splunk/react-icons/enterprise/Close");
     var L =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/react-ui/Progress"
-    const O = require("@splunk/react-ui/Progress");
-    var S =  e.n(O);
+    const S = require("@splunk/react-ui/Progress");
+    var O =  e.n(S);
     // CONCATENATED MODULE: external "@splunk/ui-utils/format"
     const I = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: ./src/File/FileContext.tsx
@@ -335,7 +335,7 @@
         });
     }));
  // for Prisma theme only
-        var Q = F().div.withConfig({
+        var J = F().div.withConfig({
         displayName: "ItemStyles__StyledPaperClipIcon",
         componentId: "sc-1fsk3kr-5"
     })([ "color:", ";padding:", ";", "" ], b.variables.neutral400, (0, b.pick)({
@@ -346,12 +346,12 @@
         return r && (0, M.css)([ "color:", ";cursor:not-allowed;" ], b.variables.contentColorDisabled);
     }));
  // for Prisma theme only
-        var J = F().span.withConfig({
+        var K = F().span.withConfig({
         displayName: "ItemStyles__StyledPercentage",
         componentId: "sc-1fsk3kr-6"
     })([ "color:", ";" ], b.variables.contentColorMuted);
  // for Prisma theme only
-        var K = F().div.withConfig({
+        var Q = F().div.withConfig({
         displayName: "ItemStyles__StyledProgress",
         componentId: "sc-1fsk3kr-7"
     })([ "position:absolute;left:0;top:0;width:", "%;height:100%;background:", ";transition:width 300ms;border-radius:", ";" ], (function(e) {
@@ -426,7 +426,7 @@
                 index: c
             });
         }
-        var O = (0, t.useContext)(_), E = O.onRequestRetry;
+        var S = (0, t.useContext)(_), E = S.onRequestRetry;
         function R(e) {
             e.preventDefault();
             E === null || E === void 0 ? void 0 : E({
@@ -450,7 +450,7 @@
             style: {
                 paddingRight: "4px"
             }
-        }, (0, h._)("Uploading ")),  a().createElement(J, null, p, "%"));
+        }, (0, h._)("Uploading ")),  a().createElement(K, null, p, "%"));
         var A = v && !C()(p) && p > 0 ? H : l;
         var B = r !== undefined ? r : q;
         
@@ -462,7 +462,7 @@
             flex: true,
             $error: i,
             $disabled: B
-        }), v && C()(p) &&  a().createElement(Q, {
+        }), v && C()(p) &&  a().createElement(J, {
             "data-test": "paper-clip",
             $disabled: B
         },  a().createElement(j, {
@@ -495,14 +495,14 @@
             "aria-label": F,
             height: y,
             width: y
-        }))), !C()(p) && p > 0 && (v ?  a().createElement(K, {
+        }))), !C()(p) && p > 0 && (v ?  a().createElement(Q, {
             $uploadPercentage: p,
             "aria-label": M,
             role: "progressbar",
             "aria-valuenow": p,
             "aria-valuemin": 0,
             "aria-valuemax": 100
-        }) :  a().createElement(S(), {
+        }) :  a().createElement(O(), {
             style: {
                 position: "absolute",
                 left: 0,
@@ -602,11 +602,9 @@
     var ve = F().div.withConfig({
         displayName: "FileStyles__StyledWindowText",
         componentId: "sc-1wyh4cf-5"
-    })([ "margin-top:", ";margin-bottom:", ";font-size:", ";", "" ], (0, b.pick)({
-        enterprise: (0, M.css)([ "calc(", " * 4)" ], b.variables.spacing),
-        prisma: (0, M.css)([ "calc(", " * 4)" ], b.variables.spacingLarge)
-    }), (0, b.pick)({
-        enterprise: b.variables.spacingHalf,
+    })([ "margin-top:calc(", " * 4);margin-bottom:", ";font-size:", ";", "" ], b.variables.spacingLarge, (0, 
+    b.pick)({
+        enterprise: b.variables.spacingSmall,
         prisma: b.variables.spacingMedium
     }), b.variables.fontSizeXLarge, (0, b.pick)({
         prisma: (0, M.css)([ "color:", ";" ], b.variables.contentColorActive)
@@ -618,10 +616,7 @@
     var me = F().div.withConfig({
         displayName: "FileStyles__StyledHelp",
         componentId: "sc-1wyh4cf-7"
-    })([ "margin-bottom:", ";" ], (0, b.pick)({
-        enterprise: b.variables.spacingXLarge,
-        prisma: (0, M.css)([ "calc(", " * 1.5)" ], b.variables.spacingLarge)
-    }));
+    })([ "margin-bottom:", ";" ], b.variables.spacingXLarge);
     var be = F().div.withConfig({
         displayName: "FileStyles__StyledWindowDrop",
         componentId: "sc-1wyh4cf-8"
@@ -638,7 +633,7 @@
         enterprise: (0, M.css)([ "line-height:calc(", " - 2px);" ], b.variables.inputHeight)
     }), (0, b.pick)({
         enterprise: {
-            comfortable: (0, M.css)([ "min-height:73px;padding:", ";" ], b.variables.spacingQuarter),
+            comfortable: (0, M.css)([ "min-height:73px;padding:", ";" ], b.variables.spacingXSmall),
             compact: (0, M.css)([ "min-height:63px;padding:3px;" ])
         }
     }), (0, b.pick)({
@@ -756,12 +751,12 @@
             Object.defineProperty(e, a.key, a);
         }
     }
-    function Oe(e, r, t) {
+    function Se(e, r, t) {
         if (r) Le(e.prototype, r);
         if (t) Le(e, t);
         return e;
     }
-    function Se(e, r) {
+    function Oe(e, r) {
         if (typeof r !== "function" && r !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -867,7 +862,7 @@
  * file readers, only a reference to the file. This can be used to post binary content, or
  * upload using an array buffer.
  */    var $e =  function(e) {
-        Se(n, e);
+        Oe(n, e);
         var r = _e(n);
         // @docs-props-type FilePropsBase
                 function n(e) {
@@ -919,7 +914,7 @@
             t.handleDragLeave = l()(t.handleDragLeave, 300);
             return t;
         }
-        Oe(n, [ {
+        Se(n, [ {
             key: "addFiles",
             value: function e(r) {
                 var t = this.props.name;
@@ -943,7 +938,7 @@
                 var r = this.props, n = r.accept, i = r.allowMultiple, o = r.children, l = r.disabled, s = r.dropAnywhere, p = r.error, u = r.fullscreen, f = r.help, b = r.name, y = r.onRequestRemove, g = r.onRequestRetry, C = r.required, x = r.splunkTheme, k = xe(r, [ "accept", "allowMultiple", "children", "disabled", "dropAnywhere", "error", "fullscreen", "help", "name", "onRequestRemove", "onRequestRetry", "required", "splunkTheme" ]);
                 var w = x.isPrisma;
                 var L = 0;
-                var O = t.Children.toArray(o).filter(t.isValidElement).map((function(e, r) {
+                var S = t.Children.toArray(o).filter(t.isValidElement).map((function(e, r) {
                     L += 1;
                     
                     return (0, t.cloneElement)(e, {
@@ -951,9 +946,9 @@
                         key: e.key || e.props.itemId || "item-".concat(r)
                     });
                 }));
-                var S = u || s;
-                var I = S || l;
-                var _ = S && !l;
+                var O = u || s;
+                var I = O || l;
+                var _ = O && !l;
                 var R = u ? ye : he;
                 var D = u ? ve : ue;
                 var q = u ? pe : ce;
@@ -1010,7 +1005,7 @@
                     $error: p
                 }), " ",  a().createElement("span", {
                     "data-test": "file-label"
-                }, !S && !l && (0, h._)("Drop your file here or"), _ && (0, h._)("Drop your file anywhere or"), " ", L === 0 && l && (0, 
+                }, !O && !l && (0, h._)("Drop your file here or"), _ && (0, h._)("Drop your file anywhere or"), " ", L === 0 && l && (0, 
                 h._)("No files selected"),  a().createElement(de, {
                     htmlFor: this.inputId,
                     "data-test": "file-link",
@@ -1046,7 +1041,7 @@
                         onRequestRemove: y ? $ : undefined,
                         onRequestRetry: g ? T : undefined
                     }
-                }, O));
+                }, S));
             }
         } ]);
         return n;