@splunk/react-ui 4.34.0 → 4.36.0

package/Chip.js

@@ -96,10 +96,7 @@
     const y = require("@splunk/react-ui/Clickable");
     var x =  e.n(y);
     // CONCATENATED MODULE: ./src/Chip/ChipStyles.ts
-    var $ = C().div.withConfig({
-        displayName: "ChipStyles__StyledBasic",
-        componentId: "sc-1sd3tsh-0"
-    })([ "", ";background-color:", ";border:1px solid transparent;flex:0 1 auto;max-width:calc(100% - 3px);border-radius:2px;", " ", " ", "" ], b.mixins.reset("inline-flex"), (0, 
+    var $ = (0, h.css)([ "", ";background-color:", ";border:1px solid transparent;flex:0 1 auto;max-width:calc(100% - 3px);border-radius:2px;", " ", " ", "" ], b.mixins.reset("inline-flex"), (0, 
     b.pickVariant)("$appearance", {
         default: {
             enterprise: {
@@ -181,11 +178,15 @@
             }
         }));
     }));
-    var k = C()($).withConfig({
+    var k = C().div.withConfig({
+        displayName: "ChipStyles__StyledBasic",
+        componentId: "sc-1sd3tsh-0"
+    })([ "", "" ], $);
+    var S = C()(k).withConfig({
         displayName: "ChipStyles__Styled",
         componentId: "sc-1sd3tsh-1"
     })([ "align-items:center;" ]);
-    var S = C().div.withConfig({
+    var w = C().div.withConfig({
         displayName: "ChipStyles__StyledInner",
         componentId: "sc-1sd3tsh-2"
     })([ "", ";" ], (0, b.pick)({
@@ -209,7 +210,7 @@
             return o;
         }))
     }));
-    var w = C().div.withConfig({
+    var O = C().div.withConfig({
         displayName: "ChipStyles__StyledIcon",
         componentId: "sc-1sd3tsh-3"
     })([ "", ";margin-right:", ";color:", ";" ], (0, b.pick)({
@@ -233,7 +234,7 @@
             }
         }
     }));
-    var O = C().div.withConfig({
+    var R = C().div.withConfig({
         displayName: "ChipStyles__StyledLabel",
         componentId: "sc-1sd3tsh-4"
     })([ "", " ", ";color:", ";" ], b.mixins.ellipsis(), (0, b.pick)({
@@ -251,7 +252,7 @@
             }
         }
     }));
-    var R = C().span.withConfig({
+    var _ = C().span.withConfig({
         displayName: "ChipStyles__StyledRemove",
         componentId: "sc-1sd3tsh-5"
     })([ "", ";" ], (0, b.pick)({
@@ -273,15 +274,15 @@
             return r ? b.variables.contentColorDisabled : a || "inherit";
         }))
     }));
-    var _ = C()($.withComponent(x())).withConfig({
+    var j = C()(x()).withConfig({
         displayName: "ChipStyles__StyledClickable",
         componentId: "sc-1sd3tsh-6"
-    })([ "flex:0 1 auto;line-height:16px;cursor:pointer;&:focus{", ";}&:not([disabled]):hover{", ";}", ";" ], (0, 
+    })([ "", " flex:0 1 auto;line-height:16px;cursor:pointer;&:focus{", ";}&:not([disabled]):hover{", ";}", ";" ], $, (0, 
     b.pick)({
         enterprise: (0, h.css)([ "box-shadow:", ";color:", ";" ], b.variables.focusShadow, b.variables.linkColor),
         prisma: (0, h.css)([ "color:", ";", "{background-color:", ";box-shadow:0 0 0 3px ", ";}" ], b.variables.contentColorActive, 
         /* sc-sel */
-        R, b.variables.interactiveColorOverlayHover, b.variables.focusColor)
+        _, b.variables.interactiveColorOverlayHover, b.variables.focusColor)
     }), (0, b.pick)({
         enterprise: (0, h.css)([ "background-color:", ";", "{color:", ";}" ], (0, b.pickVariant)("$appearance", {
             default: {
@@ -298,24 +299,24 @@
             }
         }), 
         /* sc-sel */
-        R, (function(e) {
+        _, (function(e) {
             var r = e.$foregroundColor;
             return r || b.variables.linkColor;
         })),
         prisma: (0, h.css)([ "color:", ";", "{background-color:", ";", ";}" ], b.variables.contentColorActive, 
         /* sc-sel */
-        R, b.variables.interactiveColorOverlayHover, (function(e) {
+        _, b.variables.interactiveColorOverlayHover, (function(e) {
             var r = e.$appearance;
             return r === "error" && (0, h.css)([ "color:", ";" ], b.variables.contentColorInverted);
         }))
     }), (0, b.pick)({
         prisma: (0, h.css)([ "&:not([disabled]):active ", "{background-color:", ";}" ], 
         /* sc-sel */
-        R, b.variables.interactiveColorOverlayActive)
+        _, b.variables.interactiveColorOverlayActive)
     }));
     // CONCATENATED MODULE: ./src/Chip/Chip.tsx
-    function j() {
-        j = Object.assign || function(e) {
+    function q() {
+        q = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var a = arguments[r];
                 for (var o in a) {
@@ -326,30 +327,30 @@
             }
             return e;
         };
-        return j.apply(this, arguments);
+        return q.apply(this, arguments);
     }
-    function q(e, r) {
-        return L(e) || D(e, r) || I(e, r) || E();
+    function E(e, r) {
+        return z(e) || L(e, r) || A(e, r) || I();
     }
-    function E() {
+    function I() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function I(e, r) {
+    function A(e, r) {
         if (!e) return;
-        if (typeof e === "string") return A(e, r);
+        if (typeof e === "string") return D(e, r);
         var a = Object.prototype.toString.call(e).slice(8, -1);
         if (a === "Object" && e.constructor) a = e.constructor.name;
         if (a === "Map" || a === "Set") return Array.from(e);
-        if (a === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)) return A(e, r);
+        if (a === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)) return D(e, r);
     }
-    function A(e, r) {
+    function D(e, r) {
         if (r == null || r > e.length) r = e.length;
         for (var a = 0, o = new Array(r); a < r; a++) {
             o[a] = e[a];
         }
         return o;
     }
-    function D(e, r) {
+    function L(e, r) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var a = [];
         var o = true;
@@ -372,12 +373,12 @@
         }
         return a;
     }
-    function L(e) {
+    function z(e) {
         if (Array.isArray(e)) return e;
     }
-    function z(e, r) {
+    function N(e, r) {
         if (e == null) return {};
-        var a = N(e, r);
+        var a = T(e, r);
         var o, n;
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(e);
@@ -390,7 +391,7 @@
         }
         return a;
     }
-    function N(e, r) {
+    function T(e, r) {
         if (e == null) return {};
         var a = {};
         var o = Object.keys(e);
@@ -402,7 +403,7 @@
         }
         return a;
     }
-    var P = {
+    var H = {
         appearance: l().oneOf([ "info", "success", "warning", "error", "outline" ]),
         backgroundColor: l().string,
         children: l().node.isRequired,
@@ -414,14 +415,11 @@
         /** Includes this value in `onRequestRemove` callbacks. */
         value: l().any
     };
-    var T = {
-        disabled: false
-    };
-    function H(e) {
+    function P(e) {
         return !!e.onRequestRemove;
     }
     function B(e) {
-        var r = e.appearance, a = e.backgroundColor, o = e.disabled, n = e.foregroundColor, t = e.icon, i = z(e, [ "appearance", "backgroundColor", "disabled", "foregroundColor", "icon" ]);
+        var r = e.appearance, a = e.backgroundColor, o = e.disabled, n = e.foregroundColor, t = e.icon, i = N(e, [ "appearance", "backgroundColor", "disabled", "foregroundColor", "icon" ]);
  // Validate that the color being rendered into the CSS is restricted to only values that are of CSS type <color>.
                 var l = n && (0, f.isCSSColor)(n) ? n : undefined;
         var s = a && (0, f.isCSSColor)(a) ? a : undefined;
@@ -436,46 +434,46 @@
         return [ c, i ];
     }
     function V(e) {
-        var r = B(e), n = q(r, 2), i = n[0], l = n[1];
-        var s = i.$appearance, p = i.$foregroundColor, f = i.disabled, g = i.icon, h = z(i, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
-        var C = l.children, y = l.elementRef, x = l.onRequestRemove, $ = l.value, k = z(l, [ "children", "elementRef", "onRequestRemove", "value" ]);
-        var E = (0, b.useSplunkTheme)(), I = E.isEnterprise;
-        var A = typeof C === "string";
-        var D = A ? (0, v.sprintf)((0, d._)("Remove %(children)s"), {
-            children: C
+        var r = B(e), n = E(r, 2), i = n[0], l = n[1];
+        var s = i.$appearance, p = i.$foregroundColor, f = i.disabled, g = f === void 0 ? false : f, h = i.icon, C = N(i, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
+        var y = l.children, x = l.elementRef, $ = l.onRequestRemove, k = l.value, S = N(l, [ "children", "elementRef", "onRequestRemove", "value" ]);
+        var I = (0, b.useSplunkTheme)(), A = I.isEnterprise;
+        var D = typeof y === "string";
+        var L = D ? (0, v.sprintf)((0, d._)("Remove %(children)s"), {
+            children: y
         }) : (0, d._)("Remove");
-        var L = (0, a.useCallback)((function(e) {
-            x(e, {
-                value: $
+        var z = (0, a.useCallback)((function(e) {
+            $(e, {
+                value: k
             });
-        }), [ x, $ ]);
+        }), [ $, k ]);
         
-        return o().createElement(_, j({
+        return o().createElement(j, q({
             $appearance: s,
-            $disabled: f,
+            $disabled: g,
             $foregroundColor: p,
-            "data-test-value": $,
-            disabled: f,
-            elementRef: y,
-            onClick: L
-        }, h, t()(k, Object.keys(P))),  o().createElement(S, {
-            $icon: !!g,
+            "data-test-value": k,
+            disabled: g,
+            elementRef: x,
+            onClick: z
+        }, C, t()(S, Object.keys(H))),  o().createElement(w, {
+            $icon: !!h,
             $removable: true
-        },  o().createElement(m(), null, D), g &&  o().createElement(w, {
+        },  o().createElement(m(), null, L), h &&  o().createElement(O, {
             $appearance: s,
-            $disabled: f,
+            $disabled: g,
             $foregroundColor: p
-        }, g),  o().createElement(O, {
+        }, h),  o().createElement(R, {
             "data-test": "label",
-            "aria-hidden": A ? true : undefined,
+            "aria-hidden": D ? true : undefined,
             $appearance: s,
-            $disabled: f,
+            $disabled: g,
             $foregroundColor: p
-        }, C),  o().createElement(R, {
+        }, y),  o().createElement(_, {
             $appearance: s,
-            $disabled: f,
+            $disabled: g,
             $foregroundColor: p
-        }, I ?  o().createElement(u(), {
+        }, A ?  o().createElement(u(), {
             "data-test": "cross",
             hideDefaultTooltip: true,
             screenReaderText: null,
@@ -487,34 +485,33 @@
         }))));
     }
     function M(e) {
-        var r = B(e), a = q(r, 2), n = a[0], i = a[1];
-        var l = n.$appearance, s = n.$foregroundColor, c = n.disabled, p = n.icon, u = z(n, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
-        var d = i.children, f = i.elementRef, v = z(i, [ "children", "elementRef" ]);
+        var r = B(e), a = E(r, 2), n = a[0], i = a[1];
+        var l = n.$appearance, s = n.$foregroundColor, c = n.disabled, p = n.icon, u = N(n, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
+        var d = i.children, f = i.elementRef, v = N(i, [ "children", "elementRef" ]);
         
-        return o().createElement(k, j({
+        return o().createElement(S, q({
             $appearance: l,
-            $disabled: c,
+            $disabled: c !== null && c !== void 0 ? c : false,
             ref: f
-        }, u, t()(v, Object.keys(P))),  o().createElement(S, {
+        }, u, t()(v, Object.keys(H))),  o().createElement(w, {
             $icon: !!p,
             $removable: false
-        }, p &&  o().createElement(w, {
+        }, p &&  o().createElement(O, {
             $appearance: l,
-            $disabled: c,
+            $disabled: c !== null && c !== void 0 ? c : false,
             $foregroundColor: s
-        }, p),  o().createElement(O, {
+        }, p),  o().createElement(R, {
             "data-test": "label",
             $appearance: l,
-            $disabled: c,
+            $disabled: c !== null && c !== void 0 ? c : false,
             $foregroundColor: s
         }, d)));
     }
     function W(e) {
         // @docs-props-type ChipPropsBase
-        return H(e) ?  o().createElement(V, e) :  o().createElement(M, e);
+        return P(e) ?  o().createElement(V, e) :  o().createElement(M, e);
     }
-    W.propTypes = P;
-    W.defaultProps = T;
+    W.propTypes = H;
     /* harmony default export */    const G = W;
     // CONCATENATED MODULE: ./src/Chip/index.ts
     module.exports = r;

package/CollapsiblePanel.js

@@ -221,7 +221,7 @@
     }), (0, P.pick)({
         enterprise: P.variables.textColor,
         prisma: P.variables.contentColorActive
-    }), P.variables.focusShadow, (0, P.pick)({
+    }), P.variables.focusShadowInset, (0, P.pick)({
         enterprise: P.variables.textColor,
         prisma: P.variables.contentColorActive
     }), (0, P.pick)({
@@ -772,7 +772,7 @@
                 }, c()(this.props, l()(n.propTypes))), g || o != null ?  r().createElement(W, {
                     $disabled: p
                 },  r().createElement(B, ue({
-                    appearance: "pill",
+                    appearance: "subtle",
                     "aria-label": (0, v._)("Panel"),
                     "aria-labelledby": x
                 }, S),  r().createElement(U, {

package/Color.js

@@ -141,7 +141,7 @@
     var F = I()($()).withConfig({
         displayName: "SwatchStyles__StyledClickable",
         componentId: "sc-1wxunhq-1"
-    })([ "display:block;flex:0 0 auto;border:1px solid;border-color:", ";", ";", ";", ";", " &:focus{border-color:", ";box-shadow:", ";}", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], (0, 
+    })([ "display:block;flex:0 0 auto;border:1px solid;border-color:", ";", ";", ";", ";", " &:focus{border-color:", ";box-shadow:", ";", "}", " ", " ", " &[disabled]{background-image:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8));}", " ", "" ], (0, 
     P.pick)({
         enterprise: {
             light: P.variables.gray60,
@@ -166,6 +166,9 @@
         var t = e.$noBorder;
         return t && (0, j.css)([ "border:none;" ]);
     }), P.variables.focusColor, P.variables.focusShadow, (0, P.pick)({
+        // Fixes focus shadow being cut off by input (SUI-6401)
+        enterprise: (0, j.css)([ "z-index:1;" ])
+    }), (0, P.pick)({
         enterprise: {
             comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
             compact: (0, j.css)([ "width:24px;height:24px;" ])
@@ -284,18 +287,21 @@
     var Q = I()(G).withConfig({
         displayName: "ColorStyles__StyledInputSwatch",
         componentId: "jxrost-1"
-    })([ "", ";&:focus{z-index:1;}" ], (0, P.pick)({
+    })([ "", ";" ], (0, P.pick)({
         compact: (0, j.css)([ "width:28px;height:28px;" ])
     }));
     var Y = I().div.withConfig({
         displayName: "ColorStyles__StyledInput",
         componentId: "jxrost-2"
-    })([ "", ";" ], (0, P.pick)({
-        enterprise: (0, j.css)([ "display:flex;width:100%;" ]),
-        prisma: (0, j.css)([ "position:relative;", "" ], (function(e) {
-            var t = e.$inDropdown;
-            return t ? (0, j.css)([ "width:80px;" ]) : (0, j.css)([ "flex:0 1 auto;min-width:0;" ]);
-        }))
+    })([ "", ";", "" ], (0, P.pick)({
+        enterprise: (0, j.css)([ "display:flex;" ]),
+        prisma: (0, j.css)([ "position:relative;" ])
+    }), (function(e) {
+        var t = e.$inDropdown;
+        return t ? (0, j.css)([ "width:", ";" ], (0, P.pick)({
+            enterprise: "100%",
+            prisma: "80px"
+        })) : (0, j.css)([ "flex:0 1 auto;min-width:0;" ]);
     }));
     var Z = I()(R()).withConfig({
         displayName: "ColorStyles__StyledInputText",
@@ -682,7 +688,6 @@
         append: false,
         disabled: false,
         error: false,
-        hideInput: false,
         palette: De(Ae),
         prepend: false
     };
@@ -992,7 +997,7 @@
                     required: c,
                     spellCheck: false,
                     value: p
-                }), !d &&  n().createElement(Q, {
+                }), !d && i &&  n().createElement(Q, {
                     "data-test": "textbox-swatch",
                     onClick: this.handleButtonClick,
                     value: h,
@@ -1023,7 +1028,7 @@
                             textAppend: true,
                             textPrepend: true,
                             textInline: true,
-                            inDropdown: false
+                            inDropdown: true
                         });
                     },
                     expandButtonRef: this.focusExpandButton,
@@ -1043,8 +1048,11 @@
                 var b = m.isPrisma;
                 var g = this.getValue();
                 var x = this.state.displayValue;
-                var S =  n().createElement(ee, me({
-                    append: b && !c ? true : o,
+ // hideInput defaults to true in Enterprise if prop is not provided
+                                var S = c !== null && c !== void 0 ? c : true;
+                var w = b ? c : S;
+                var k =  n().createElement(ee, me({
+                    append: !w ? true : o,
                     "data-test": "color",
                     "data-test-value": x,
                     "aria-describedby": i,
@@ -1069,8 +1077,8 @@
                     },
                     retainFocus: true,
                     takeFocus: false,
-                    toggle: S
-                }, this.renderPalette()), b && !c && this.renderInput({
+                    toggle: k
+                }, this.renderPalette()), !w && this.renderInput({
                     textAppend: false,
                     textPrepend: true,
                     textInline: true,

package/ComboBox.js

@@ -552,8 +552,7 @@
         inline: false,
         isLoadingOptions: false,
         menuStyle: {},
-        placeholder: (0, O._)("Select..."),
-        size: "medium"
+        placeholder: (0, O._)("Select...")
     };
     function pe(e, t) {
         var n = t.clientX, o = t.clientY;
@@ -698,7 +697,8 @@
                 }
                 r === null || r === void 0 ? void 0 : r(e);
             }));
-            ce(ae(i), "handleInputClick", (function() {
+            ce(ae(i), "handleInputClick", (function(e) {
+                e.stopPropagation();
                 if (!i.state.open && !i.props.disabled) {
                     i.open();
                 }
@@ -820,6 +820,7 @@
             i.activeItemId = (0, g.createDOMID)("active-item");
             if (false) {}
             if (false) {}
+            if (false) {}
             return i;
         }
         te(r, [ {
@@ -906,7 +907,7 @@
                     "data-test-value": a,
                     "data-test-open": i && !!r,
                     onFocus: this.handleInputFocus,
-                    onClick: this.handleInputClick,
+                    onInputClick: this.handleInputClick,
                     onChange: this.handleChange,
                     onKeyDown: this.handleInputKeyDown,
                     inputRef: this.handleInputMount,