@splunk/react-ui 4.33.0 → 4.35.0

package/Color.js

@@ -94,10 +94,10 @@
     var g =  e.n(b);
     // CONCATENATED MODULE: external "lodash/memoize"
     const x = require("lodash/memoize");
-    var w =  e.n(x);
+    var S =  e.n(x);
     // CONCATENATED MODULE: external "tinycolor2"
-    const S = require("tinycolor2");
-    var k =  e.n(S);
+    const w = require("tinycolor2");
+    var k =  e.n(w);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
     const C = require("@splunk/react-ui/Dropdown");
     var E =  e.n(C);
@@ -110,8 +110,8 @@
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
     const q = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "styled-components"
-    const I = require("styled-components");
-    var j =  e.n(I);
+    const j = require("styled-components");
+    var I =  e.n(j);
     // CONCATENATED MODULE: external "@splunk/react-ui/Text"
     const T = require("@splunk/react-ui/Text");
     var R =  e.n(T);
@@ -129,64 +129,67 @@
         enterprise: P.variables.gray80,
         prisma: "rgba(0, 0, 0, 0.2)"
     });
-    var z = (0, I.css)([ "background-image:linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " ),linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " );background-size:10px 10px;background-position:0 0,5px 5px;background-color:", ";" ], H, H, H, H, H, H, (0, 
+    var z = (0, j.css)([ "background-image:linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " ),linear-gradient( 45deg,", " 25%,transparent 25%,transparent 75%,", " 75%,", " );background-size:10px 10px;background-position:0 0,5px 5px;background-color:", ";" ], H, H, H, H, H, H, (0, 
     P.pick)({
         enterprise: "transparent",
         prisma: P.variables.white
     }));
-    var K = j()(D()).withConfig({
+    var K = I()(D()).withConfig({
         displayName: "SwatchStyles__StyledCheck",
         componentId: "sc-1wxunhq-0"
     })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;" ]);
-    var F = j()($()).withConfig({
+    var F = I()($()).withConfig({
         displayName: "SwatchStyles__StyledClickable",
         componentId: "sc-1wxunhq-1"
-    })([ "display:block;flex:0 0 auto;border:", ";", ";", ";", ";", " &: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: (0, I.css)([ "1px solid ", "" ], P.variables.gray60),
-            dark: P.variables.border
+            light: P.variables.gray60,
+            dark: P.variables.borderColor
         },
-        prisma: (0, I.css)([ "1px solid ", "" ], P.variables.interactiveColorBorder)
+        prisma: P.variables.interactiveColorBorder
     }), (0, P.pick)({
-        prisma: (0, I.css)([ "border-radius:2px;" ])
+        prisma: (0, j.css)([ "border-radius:2px;" ])
     }), (function(e) {
         var t = e.$value;
-        return t === null && (0, I.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";" ], (0, 
+        return t === null && (0, j.css)([ "background-image:linear-gradient( to bottom right,transparent 48%,", ",transparent 52% );", ";" ], (0, 
         P.pick)({
             enterprise: "#ed1e24",
             prisma: P.variables.accentColorNegative
         }), (0, P.pick)({
-            prisma: (0, I.css)([ "background-color:", ";" ], P.variables.white)
+            prisma: (0, j.css)([ "background-color:", ";" ], P.variables.white)
         }));
     }), (function(e) {
         var t = e.$value;
         return t && (t === "transparent" ? z : "background-color: ".concat(t));
     }), (function(e) {
         var t = e.$noBorder;
-        return t && (0, I.css)([ "border:none;" ]);
+        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, I.css)([ "width:32px;height:32px;" ]),
-            compact: (0, I.css)([ "width:24px;height:24px;" ])
+            comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
+            compact: (0, j.css)([ "width:24px;height:24px;" ])
         },
-        prisma: (0, I.css)([ "width:24px;height:24px;" ])
+        prisma: (0, j.css)([ "width:24px;height:24px;" ])
     }), (function(e) {
         var t = e.$prepend;
-        return t && (0, I.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
+        return t && (0, j.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
     }), (function(e) {
         var t = e.$append;
-        return t && (0, I.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
+        return t && (0, j.css)([ "margin-right:-1px;border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
     }), (function(e) {
         var t = e.$hasError;
-        return t && (0, I.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], (0, 
+        return t && (0, j.css)([ "box-shadow:inset 0 0 0 2px white;border-color:", ";" ], (0, 
         P.pick)({
             enterprise: P.variables.errorColor,
             prisma: P.variables.accentColorNegative
         }));
     }), (function(e) {
         var t = e.$showSelected;
-        return t && (0, I.css)([ "display:flex;align-items:center;justify-content:center;" ]);
+        return t && (0, j.css)([ "display:flex;align-items:center;justify-content:center;" ]);
     }));
     // CONCATENATED MODULE: ./src/Color/Swatch.tsx
     function M() {
@@ -244,7 +247,7 @@
         /** @private */
         showSelected: o().bool
     };
-    var Q =  n().forwardRef((function(e, t) {
+    var X =  n().forwardRef((function(e, t) {
         var r = e.append, a = e.error, o = a === void 0 ? false : a, l = e.onClick, i = e.prepend, s = e.value, u = e.noBorder, c = e.showSelected, p = L(e, [ "append", "error", "onClick", "prepend", "value", "noBorder", "showSelected" ]);
         var d = s === null || s === undefined ? (0, _._)("No color") : s;
  // Only valid hexadecimal strings, 'transparent' and `null` are allowed for background colors
@@ -274,47 +277,50 @@
             role: "presentation"
         }),  n().createElement(V(), null, d));
     }));
-    Q.propTypes = W;
-    /* harmony default export */    const X = Q;
+    X.propTypes = W;
+    /* harmony default export */    const G = X;
     // CONCATENATED MODULE: ./src/Color/ColorStyles.ts
-    var G = j().div.withConfig({
+    var J = I().div.withConfig({
         displayName: "ColorStyles__StyledColor",
         componentId: "jxrost-0"
     })([ "", ";flex-direction:row;" ], P.mixins.reset("flex"));
-    var J = j()(X).withConfig({
+    var Q = I()(G).withConfig({
         displayName: "ColorStyles__StyledInputSwatch",
         componentId: "jxrost-1"
-    })([ "", "" ], (0, P.pick)({
-        compact: (0, I.css)([ "width:28px;height:28px;" ])
+    })([ "", ";" ], (0, P.pick)({
+        compact: (0, j.css)([ "width:28px;height:28px;" ])
     }));
-    var Y = j().div.withConfig({
+    var Y = I().div.withConfig({
         displayName: "ColorStyles__StyledInput",
         componentId: "jxrost-2"
-    })([ "", ";" ], (0, P.pick)({
-        enterprise: (0, I.css)([ "display:flex;width:100%;" ]),
-        prisma: (0, I.css)([ "position:relative;", "" ], (function(e) {
-            var t = e.$inDropdown;
-            return t ? (0, I.css)([ "width:80px;" ]) : (0, I.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 = j()(R()).withConfig({
+    var Z = I()(R()).withConfig({
         displayName: "ColorStyles__StyledInputText",
         componentId: "jxrost-3"
     })([ "", "" ], (function(e) {
         var t = e.$inDropdown;
-        return t && (0, I.css)([ "font-size:12px;" ]);
+        return t && (0, j.css)([ "font-size:12px;" ]);
     }));
-    var ee = j()(X).withConfig({
+    var ee = I()(G).withConfig({
         displayName: "ColorStyles__StyledToggleSwatch",
         componentId: "jxrost-4"
     })([ "", "" ], (0, P.pick)({
         prisma: {
-            comfortable: (0, I.css)([ "width:40px;height:40px;" ]),
-            compact: (0, I.css)([ "width:32px;height:32px;" ])
+            comfortable: (0, j.css)([ "width:40px;height:40px;" ]),
+            compact: (0, j.css)([ "width:32px;height:32px;" ])
         },
         enterprise: {
-            comfortable: (0, I.css)([ "width:32px;height:32px;" ]),
-            compact: (0, I.css)([ "width:28px;height:28px;" ])
+            comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
+            compact: (0, j.css)([ "width:28px;height:28px;" ])
         }
     }));
     // CONCATENATED MODULE: external "@splunk/react-icons/ChevronDown"
@@ -324,65 +330,68 @@
     const ne = require("@splunk/react-ui/Divider");
     var ae =  e.n(ne);
     // CONCATENATED MODULE: ./src/Color/PaletteStyles.ts
-    var oe = j().div.withConfig({
+    var oe = I().div.withConfig({
         displayName: "PaletteStyles__StyledPalette",
         componentId: "qgv9v9-0"
     })([ "width:220px;padding:", ";" ], P.variables.spacingSmall);
-    var le = j().ul.withConfig({
+    var le = I().ul.withConfig({
         displayName: "PaletteStyles__StyledSwatches",
         componentId: "qgv9v9-1"
     })([ "", ";", "" ], P.mixins.reset("block"), (0, P.pick)({
-        enterprise: (0, I.css)([ "margin-bottom:", ";" ], P.variables.spacingQuarter)
+        enterprise: (0, j.css)([ "margin-bottom:", ";" ], P.variables.spacingXSmall)
     }));
-    var ie = j().li.withConfig({
+    var ie = I().li.withConfig({
         displayName: "PaletteStyles__StyledSwatch",
         componentId: "qgv9v9-2"
     })([ "", ";margin-right:4px;margin-bottom:4px;vertical-align:top;", "" ], P.mixins.reset("inline-block"), (0, 
     P.pick)({
         enterprise: {
-            compact: (0, I.css)([ "&:nth-child(8n){margin-right:0;}" ])
+            compact: (0, j.css)([ "&:nth-child(8n){margin-right:0;}" ])
         },
-        prisma: (0, I.css)([ "&:nth-child(8n){margin-right:0;}" ])
+        prisma: (0, j.css)([ "&:nth-child(8n){margin-right:0;}" ])
     }));
-    var se = j().div.withConfig({
+    var se = I().div.withConfig({
         displayName: "PaletteStyles__StyledToolBar",
         componentId: "qgv9v9-3"
-    })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:", ";margin-bottom:", ";gap:4px;" ], P.variables.spacingSmall, P.variables.spacingHalf);
-    var ue = j()($()).withConfig({
+    })([ "position:relative;display:flex;align-items:center;padding:0;margin-top:", ";", " gap:4px;" ], P.variables.spacingSmall, (0, 
+    P.pick)({
+        enterprise: (0, j.css)([ "margin-bottom:", ";" ], P.variables.spacingSmall)
+    }));
+    var ue = I()($()).withConfig({
         displayName: "PaletteStyles__StyledExpandButton",
         componentId: "qgv9v9-4"
     })([ "position:absolute;bottom:4px;right:4px;padding:2px 4px;border-radius:2px;&:focus{box-shadow:", ";}", "" ], P.variables.focusShadow, (function(e) {
         var t = e.$expanded;
-        return t && (0, I.css)([ "transform:rotate(180deg);" ]);
+        return t && (0, j.css)([ "transform:rotate(180deg);" ]);
     }));
-    var ce = j().div.withConfig({
+    var ce = I().div.withConfig({
         displayName: "PaletteStyles__StyledSystemColorPickerWrapper",
         componentId: "qgv9v9-5"
     })([ "position:relative;" ]);
-    var pe = j().input.withConfig({
+    var pe = I().input.withConfig({
         displayName: "PaletteStyles__StyledSystemColorPicker",
         componentId: "qgv9v9-6"
-    })([ "box-sizing:border-box;", "     border:", ";", ";outline:none;appearance:none;padding:1px 10px;", "     margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;cursor:pointer;&::-webkit-color-swatch{border:none;border-radius:2px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}" ], (0, 
+    })([ "box-sizing:border-box;", " ", ";", ";outline:none;appearance:none;padding:1px 10px;", " margin:0;background:conic-gradient( #ef3434,#ef9a34,#deef34,#78ef34,#34ef56,#34efbc,#34bcef,#3456ef,#7834ef,#de34ef,#ef349a,#ef3434 );background-repeat:no-repeat;cursor:pointer;&::-webkit-color-swatch{border:none;border-radius:2px;}&::-moz-color-swatch{opacity:0;}&:focus{box-shadow:", ";}" ], (0, 
     P.pick)({
         enterprise: {
-            comfortable: (0, I.css)([ "width:32px;height:32px;" ]),
-            compact: (0, I.css)([ "width:24px;height:24px;" ])
+            comfortable: (0, j.css)([ "width:32px;height:32px;" ]),
+            compact: (0, j.css)([ "width:24px;height:24px;" ])
         },
-        prisma: (0, I.css)([ "width:24px;height:24px;" ])
+        prisma: (0, j.css)([ "width:24px;height:24px;" ])
     }), (0, P.pick)({
         enterprise: {
-            light: (0, I.css)([ "1px solid ", "" ], P.variables.gray60),
-            dark: P.variables.border
+            light: (0, j.css)([ "border:1px solid ", ";" ], P.variables.gray60),
+            dark: (0, j.css)([ "border:1px solid ", ";" ], P.variables.borderColor)
         },
-        prisma: "none"
+        prisma: (0, j.css)([ "border:none;" ])
     }), (0, P.pick)({
-        prisma: (0, I.css)([ "border-radius:2px;" ])
+        prisma: (0, j.css)([ "border-radius:2px;" ])
     }), (0, P.pick)({
         enterprise: {
-            comfortable: (0, I.css)([ "padding:1px 14px;" ])
+            comfortable: (0, j.css)([ "padding:1px 14px;" ])
         }
     }), P.variables.focusShadow);
-    var de = j()(D()).withConfig({
+    var de = I()(D()).withConfig({
         displayName: "PaletteStyles__StyledCheck",
         componentId: "qgv9v9-7"
     })([ "box-sizing:border-box;color:#d3d3d3;height:100%;width:100%;position:absolute;top:0;left:0;pointer-events:none;" ]);
@@ -400,7 +409,7 @@
             
             return n().createElement(ie, {
                 key: r || "null"
-            },  n().createElement(X, {
+            },  n().createElement(G, {
                 value: r,
                 ref: s ? o : null,
                 onClick: l,
@@ -415,19 +424,19 @@
                 "data-test": "tool-bar"
             }, f &&  n().createElement(P.SplunkThemeProvider, {
                 density: "compact"
-            }, p && p()),  n().createElement(X, {
+            }, p && p()),  n().createElement(G, {
                 value: null,
                 ref: a === null ? o : null,
                 onClick: l,
                 noBorder: f && !v,
                 showSelected: a === null
-            }),  n().createElement(X, {
+            }),  n().createElement(G, {
                 value: "#ffffff",
                 ref: a === "#ffffff" ? o : null,
                 onClick: l,
                 noBorder: f && !v,
                 showSelected: a === "#ffffff"
-            }),  n().createElement(X, {
+            }),  n().createElement(G, {
                 value: "#000000",
                 ref: a === "#000000" ? o : null,
                 onClick: l,
@@ -444,15 +453,15 @@
             })));
         };
         var x = y.length === 8 ? 7 : 15;
-        var w = h()(y, 0, x);
-        var S = h()(y, x);
+        var S = h()(y, 0, x);
+        var w = h()(y, x);
         if (f) {
             
             return n().createElement(oe, null,  n().createElement("div", {
                 style: {
                     position: "relative"
                 }
-            },  n().createElement(le, null, w, t && S), t && b(),  n().createElement(ue, {
+            },  n().createElement(le, null, S, t && w), t && b(),  n().createElement(ue, {
                 ref: i,
                 $expanded: t,
                 onClick: s,
@@ -492,26 +501,26 @@
         return me.apply(this, arguments);
     }
     function ye(e) {
-        return we(e) || xe(e) || ge(e) || be();
+        return Se(e) || xe(e) || ge(e) || be();
     }
     function be() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
     function ge(e, t) {
         if (!e) return;
-        if (typeof e === "string") return Se(e, t);
+        if (typeof e === "string") return we(e, t);
         var r = Object.prototype.toString.call(e).slice(8, -1);
         if (r === "Object" && e.constructor) r = e.constructor.name;
         if (r === "Map" || r === "Set") return Array.from(e);
-        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return Se(e, t);
+        if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)) return we(e, t);
     }
     function xe(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function we(e) {
-        if (Array.isArray(e)) return Se(e);
+    function Se(e) {
+        if (Array.isArray(e)) return we(e);
     }
-    function Se(e, t) {
+    function we(e, t) {
         if (t == null || t > e.length) t = e.length;
         for (var r = 0, n = new Array(t); r < t; r++) {
             n[r] = e[r];
@@ -584,7 +593,7 @@
         };
         return qe(e, t);
     }
-    function Ie(e) {
+    function je(e) {
         var t = Re();
         return function r() {
             var n = Be(e), a;
@@ -594,10 +603,10 @@
             } else {
                 a = n.apply(this, arguments);
             }
-            return je(this, a);
+            return Ie(this, a);
         };
     }
-    function je(e, t) {
+    function Ie(e, t) {
         if (t && (he(t) === "object" || typeof t === "function")) {
             return t;
         }
@@ -641,7 +650,7 @@
     }
     // The default palette in Prisma theme.
         var Ae = [ "#912344", "#D44C20", "#C0891E", "#26AA92", "#2F8AA7", "#2E49AA", "#602CA1", "#BA4ABD" ];
-    var De = w()((function(e) {
+    var De = S()((function(e) {
         var t = [];
         for (var r = 1; r <= e.length * 4; r += 1) {
             var n = e[(r - 1) % e.length];
@@ -679,7 +688,6 @@
         append: false,
         disabled: false,
         error: false,
-        hideInput: false,
         palette: De(Ae),
         prepend: false
     };
@@ -697,7 +705,7 @@
  *     2. Otherwise the first color swatch receives focus.
  */    var Me =  function(e) {
         _e(r, e);
-        var t = Ie(r);
+        var t = je(r);
         Oe(r, null, [ {
             key: "hasNull",
             // @docs-props-type ColorPropsBase
@@ -989,11 +997,10 @@
                     required: c,
                     spellCheck: false,
                     value: p
-                }), !d &&  n().createElement(J, {
+                }), !d && i &&  n().createElement(Q, {
                     "data-test": "textbox-swatch",
                     onClick: this.handleButtonClick,
                     value: h,
-                    tabIndex: -1,
                     style: {
                         marginLeft: "1px"
                     }
@@ -1021,7 +1028,7 @@
                             textAppend: true,
                             textPrepend: true,
                             textInline: true,
-                            inDropdown: false
+                            inDropdown: true
                         });
                     },
                     expandButtonRef: this.focusExpandButton,
@@ -1041,8 +1048,11 @@
                 var b = m.isPrisma;
                 var g = this.getValue();
                 var x = this.state.displayValue;
-                var w =  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,
@@ -1057,7 +1067,7 @@
                 }, f()(y, [].concat(ye(p()(r.propTypes)), [ // TS: trick omit
                 "onChange" ]))));
                 
-                return n().createElement(G, null,  n().createElement(E(), {
+                return n().createElement(J, null,  n().createElement(E(), {
                     closeReasons: [ "clickAway", "escapeKey", "offScreen", "toggleClick" ],
                     onRequestClose: this.handleRequestClose,
                     onRequestOpen: this.handleRequestOpen,
@@ -1067,8 +1077,8 @@
                     },
                     retainFocus: true,
                     takeFocus: false,
-                    toggle: w
-                }, this.renderPalette()), b && !c && this.renderInput({
+                    toggle: k
+                }, this.renderPalette()), !w && this.renderInput({
                     textAppend: false,
                     textPrepend: true,
                     textInline: true,

package/ComboBox.js

@@ -698,7 +698,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();
                 }
@@ -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,