@splunk/react-ui 4.34.0 → 4.36.0

package/Message.js

@@ -74,8 +74,8 @@
     const t = require("@splunk/react-icons/CheckCircle");
     var s =  e.n(t);
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const l = require("@splunk/react-icons/Cross");
-    var c =  e.n(l);
+    const c = require("@splunk/react-icons/Cross");
+    var l =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
     const p = require("@splunk/react-icons/enterprise/Close");
     var u =  e.n(p);
@@ -200,7 +200,7 @@
     var J = T()(H()).withConfig({
         displayName: "MessageStyles__StyledRemove",
         componentId: "eg66af-1"
-    })([ "", ";border:1px solid transparent;border-radius:", ";color:", ";", ";cursor:pointer;position:absolute;", " padding:8px;&:hover,&:focus{background:", ";border:1px solid;border-color:", ";color:", ";}&:active{", ";}", "" ], I.mixins.reset("flex"), (0, 
+    })([ "", ";border:1px solid transparent;border-radius:", ";color:", ";", ";cursor:pointer;position:absolute;", " padding:8px;&:hover,&:focus{background:", ";color:", ";}&:active{", ";}", "" ], I.mixins.reset("flex"), (0, 
     I.pick)({
         prisma: "50%",
         enterprise: I.variables.borderRadius
@@ -224,9 +224,6 @@
             dark: I.variables.gray30,
             light: I.variables.gray92
         }
-    }), (0, I.pick)({
-        prisma: "inherit",
-        enterprise: I.variables.gray80
     }), (0, I.pick)({
         enterprise: {
             dark: I.variables.gray96,
@@ -420,21 +417,21 @@
         error: k(),
         success: w()
     });
-    var le = Object.freeze({
+    var ce = Object.freeze({
         info: f(),
         warning: m(),
         error: d(),
         success: s()
     });
-    function ce(e) {
-        var r = e.appearance, i = r === void 0 ? "default" : r, o = e.children, t = e.type, s = t === void 0 ? "warning" : t, l = e.onRequestRemove, p = ne(e, [ "appearance", "children", "type", "onRequestRemove" ]);
+    function le(e) {
+        var r = e.appearance, i = r === void 0 ? "default" : r, o = e.children, t = e.type, s = t === void 0 ? "warning" : t, c = e.onRequestRemove, p = ne(e, [ "appearance", "children", "type", "onRequestRemove" ]);
         // @docs-props-type MessagePropsBase
                 var v = (0, I.useSplunkTheme)(), d = v.isEnterprise;
         if (false) {}
  // double check this can only be button
                 var b = (0, a.useCallback)((function(e) {
-            l === null || l === void 0 ? void 0 : l(e);
-        }), [ l ]);
+            c === null || c === void 0 ? void 0 : c(e);
+        }), [ c ]);
         if (i === "banner") {
             
             return n().createElement(q(), ae({
@@ -443,7 +440,7 @@
                 onRequestClose: b
             }, p), o);
         }
-        var f = d ? se : le;
+        var f = d ? se : ce;
         var g = f[s];
         var m = i === "fill";
         var y = i === "default" || i === "fill";
@@ -451,7 +448,7 @@
         return n().createElement(Q, ae({
             $appearance: i,
             $fillStyle: m,
-            $hasRemoveIcon: !!l,
+            $hasRemoveIcon: !!c,
             $type: s,
             "data-test-type": s,
             "data-test": "message"
@@ -468,7 +465,7 @@
         }),  n().createElement(E(), null, te[s])),  n().createElement(G, {
             "data-test": "content",
             $fillStyle: m
-        }, o), l &&  n().createElement(J, {
+        }, o), c &&  n().createElement(J, {
             "data-test": "remove",
             onClick: b,
             $appearance: i
@@ -477,15 +474,15 @@
             hideDefaultTooltip: true,
             screenReaderText: null,
             width: "12px"
-        }) :  n().createElement(c(), {
+        }) :  n().createElement(l(), {
             height: "20px",
             width: "20px"
         })));
     }
-    ce.propTypes = oe;
-    ce.Title = re;
-    ce.Link = z;
-    /* harmony default export */    const pe = ce;
+    le.propTypes = oe;
+    le.Title = re;
+    le.Link = z;
+    /* harmony default export */    const pe = le;
     // CONCATENATED MODULE: ./src/Message/index.ts
     module.exports = r;
     /******/})();

package/Modal.js

@@ -489,7 +489,7 @@
             id: p,
             "data-test": "subtitle"
         }, a)) : t, i &&  n().createElement(ae, null,  n().createElement(le, null,  n().createElement(ce, {
-            appearance: "pill",
+            appearance: "subtle",
             "aria-label": (0, Y._)("Close"),
             "data-test": "close",
             onClick: i

package/Monogram.js

@@ -61,21 +61,21 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ R,
-        getInitials: () => /* reexport */ P
+        default: () => /* reexport */ N,
+        getInitials: () => /* reexport */ $
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
-    var a =  e.n(i);
+    var o =  e.n(i);
     // CONCATENATED MODULE: external "lodash/omit"
-    const o = require("lodash/omit");
-    var s =  e.n(o);
+    const a = require("lodash/omit");
+    var c =  e.n(a);
     // CONCATENATED MODULE: external "styled-components"
-    const c = require("styled-components");
-    var l =  e.n(c);
+    const s = require("styled-components");
+    var l =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const u = require("@splunk/react-ui/Clickable");
     var f =  e.n(u);
@@ -91,13 +91,10 @@
                 }
         return t;
     };
-    var m = [ "#006d9c", "#ec9960", "#af575a", "#62b3b2", "#4fa484", "#f8be34", "#5a4575", "#708794", "#294e70", "#b6c75a", "#5cc05c", "#007abd", "#dc4e41", "#f1813f", "#f8be34", "#53a051", "#006d9c", "#77d6d8", "#f589ad", "#6a2c5d" ];
-    var b = l().div.withConfig({
-        displayName: "MonogramStyles__Styled",
-        componentId: "r5ud6k-0"
-    })([ "", ";align-items:center;justify-content:center;border-radius:50%;font-weight:normal;", " background-color:", ";", ";& + &{margin-left:4px;}" ], p.mixins.reset("inline-flex"), (0, 
+    var b = [ "#006d9c", "#ec9960", "#af575a", "#62b3b2", "#4fa484", "#f8be34", "#5a4575", "#708794", "#294e70", "#b6c75a", "#5cc05c", "#007abd", "#dc4e41", "#f1813f", "#f8be34", "#53a051", "#006d9c", "#77d6d8", "#f589ad", "#6a2c5d" ];
+    var m = (0, s.css)([ "", ";align-items:center;justify-content:center;border-radius:50%;font-weight:normal;", " background-color:", ";", ";& + &{margin-left:4px;}" ], p.mixins.reset("inline-flex"), (0, 
     p.pick)({
-        prisma: (0, c.css)([ "color:", ";" ], p.variables.contentColorActive)
+        prisma: (0, s.css)([ "color:", ";" ], p.variables.contentColorActive)
     }), (function(e) {
         var r = e.$backgroundColor, t = e.$initials;
         if (r === "theme") {
@@ -110,49 +107,97 @@
             });
         }
         if (r === "auto") {
-            return m[d(t) % m.length];
+            return b[d(t) % b.length];
         }
         return r;
     }), (function(e) {
         var r = e.$size;
         if (typeof r === "number") {
-            return (0, c.css)([ "height:", "px;width:", "px;" ], r, r);
+            return (0, s.css)([ "height:", "px;width:", "px;" ], r, r);
         }
         if (typeof r === "string") {
             return (0, p.pickVariant)("$size", {
-                small: (0, c.css)([ "font-size:", ";", "" ], p.variables.fontSize, (0, p.pick)({
-                    enterprise: (0, c.css)([ "height:32px;width:32px;" ]),
-                    prisma: (0, c.css)([ "height:24px;width:24px;" ])
+                small: (0, s.css)([ "font-size:", ";", "" ], p.variables.fontSize, (0, p.pick)({
+                    enterprise: (0, s.css)([ "height:32px;width:32px;" ]),
+                    prisma: (0, s.css)([ "height:24px;width:24px;" ])
                 })),
-                medium: (0, c.css)([ "height:48px;width:48px;font-size:", ";" ], p.variables.fontSize),
-                large: (0, c.css)([ "height:80px;width:80px;font-size:", ";" ], p.variables.fontSizeXXLarge),
-                xlarge: (0, c.css)([ "width:144px;height:144px;font-size:36px;font-weight:700;" ])
+                medium: (0, s.css)([ "height:48px;width:48px;font-size:", ";" ], p.variables.fontSize),
+                large: (0, s.css)([ "height:80px;width:80px;font-size:", ";" ], p.variables.fontSizeXXLarge),
+                xlarge: (0, s.css)([ "width:144px;height:144px;font-size:36px;font-weight:700;" ])
             });
         }
-        return (0, c.css)([ "height:48px;width:48px;font-size:", ";" ], p.variables.fontSize);
+        return (0, s.css)([ "height:48px;width:48px;font-size:", ";" ], p.variables.fontSize);
     }));
-    var v = b.withComponent(f());
-    var h = l()(v).withConfig({
-        displayName: "MonogramStyles__StyledClickable",
+    var v = l().div.withConfig({
+        displayName: "MonogramStyles__Styled",
+        componentId: "r5ud6k-0"
+    })([ "", "" ], m);
+    var y = l()(f()).withConfig({
+        displayName: "MonogramStyles__StyledClickableComponent",
         componentId: "r5ud6k-1"
+    })([ "", "" ], m);
+    var g = l()(y).withConfig({
+        displayName: "MonogramStyles__StyledClickable",
+        componentId: "r5ud6k-2"
     })([ "cursor:pointer;position:relative;:focus,:hover{", "}:focus{box-shadow:", ";z-index:1;}:active{", "}" ], (0, 
     p.pick)({
-        enterprise: (0, c.css)([ "box-shadow:", ";" ], p.variables.focusShadowInset),
-        prisma: (0, c.css)([ "border:1px solid transparent;background-color:", ";" ], p.variables.neutral200)
+        enterprise: (0, s.css)([ "box-shadow:", ";" ], p.variables.focusShadowInset),
+        prisma: (0, s.css)([ "border:1px solid transparent;background-color:", ";" ], p.variables.neutral200)
     }), (0, p.pick)({
         enterprise: p.variables.focusShadowInset,
         prisma: p.variables.focusShadow
     }), (0, p.pick)({
-        enterprise: (0, c.css)([ "opacity:0.85;" ]),
-        prisma: (0, c.css)([ "border:1px solid transparent;background-color:", ";opacity:1;" ], p.variables.neutral200)
+        enterprise: (0, s.css)([ "opacity:0.85;" ]),
+        prisma: (0, s.css)([ "border:1px solid transparent;background-color:", ";opacity:1;" ], p.variables.neutral200)
     }));
-    var g = l().span.withConfig({
+    var h = l().span.withConfig({
         displayName: "MonogramStyles__Initials",
-        componentId: "r5ud6k-2"
+        componentId: "r5ud6k-3"
     })([ "opacity:0.8;text-transform:capitalize;" ]);
     // CONCATENATED MODULE: ./src/Monogram/Monogram.tsx
-    function y() {
-        y = Object.assign || function(e) {
+    function O(e, r) {
+        var t = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            if (r) n = n.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            }));
+            t.push.apply(t, n);
+        }
+        return t;
+    }
+    function k(e) {
+        for (var r = 1; r < arguments.length; r++) {
+            var t = arguments[r] != null ? arguments[r] : {};
+            if (r % 2) {
+                O(Object(t), true).forEach((function(r) {
+                    w(e, r, t[r]);
+                }));
+            } else if (Object.getOwnPropertyDescriptors) {
+                Object.defineProperties(e, Object.getOwnPropertyDescriptors(t));
+            } else {
+                O(Object(t)).forEach((function(r) {
+                    Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+                }));
+            }
+        }
+        return e;
+    }
+    function w(e, r, t) {
+        if (r in e) {
+            Object.defineProperty(e, r, {
+                value: t,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            e[r] = t;
+        }
+        return e;
+    }
+    function j() {
+        j = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -163,63 +208,63 @@
             }
             return e;
         };
-        return y.apply(this, arguments);
+        return j.apply(this, arguments);
     }
-    function k(e, r) {
-        return C(e) || O(e, r) || w(e, r) || x();
+    function x(e, r) {
+        return I(e) || P(e, r) || C(e, r) || S();
     }
-    function x() {
+    function S() {
         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 w(e, r) {
+    function C(e, r) {
         if (!e) return;
-        if (typeof e === "string") return S(e, r);
+        if (typeof e === "string") return z(e, r);
         var t = Object.prototype.toString.call(e).slice(8, -1);
         if (t === "Object" && e.constructor) t = e.constructor.name;
         if (t === "Map" || t === "Set") return Array.from(e);
-        if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return S(e, r);
+        if (t === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)) return z(e, r);
     }
-    function S(e, r) {
+    function z(e, r) {
         if (r == null || r > e.length) r = e.length;
         for (var t = 0, n = new Array(r); t < r; t++) {
             n[t] = e[t];
         }
         return n;
     }
-    function O(e, r) {
+    function P(e, r) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var t = [];
         var n = true;
         var i = false;
-        var a = undefined;
+        var o = undefined;
         try {
-            for (var o = e[Symbol.iterator](), s; !(n = (s = o.next()).done); n = true) {
-                t.push(s.value);
+            for (var a = e[Symbol.iterator](), c; !(n = (c = a.next()).done); n = true) {
+                t.push(c.value);
                 if (r && t.length === r) break;
             }
         } catch (e) {
             i = true;
-            a = e;
+            o = e;
         } finally {
             try {
-                if (!n && o["return"] != null) o["return"]();
+                if (!n && a["return"] != null) a["return"]();
             } finally {
-                if (i) throw a;
+                if (i) throw o;
             }
         }
         return t;
     }
-    function C(e) {
+    function I(e) {
         if (Array.isArray(e)) return e;
     }
-    function j(e, r) {
+    function _(e, r) {
         if (e == null) return {};
-        var t = z(e, r);
+        var t = E(e, r);
         var n, i;
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (i = 0; i < a.length; i++) {
-                n = a[i];
+            var o = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < o.length; i++) {
+                n = o[i];
                 if (r.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 t[n] = e[n];
@@ -227,31 +272,27 @@
         }
         return t;
     }
-    function z(e, r) {
+    function E(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
-        var i, a;
-        for (a = 0; a < n.length; a++) {
-            i = n[a];
+        var i, o;
+        for (o = 0; o < n.length; o++) {
+            i = n[o];
             if (r.indexOf(i) >= 0) continue;
             t[i] = e[i];
         }
         return t;
     }
-    var I = {
-        backgroundColor: a().string,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        initials: a().string.isRequired,
-        name: a().string,
-        onClick: a().func,
-        size: a().oneOfType([ a().oneOf([ "small", "medium", "large", "xlarge" ]), a().number ])
-    };
-    var _ = {
-        backgroundColor: "theme",
-        size: "medium"
+    var A = {
+        backgroundColor: o().string,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        initials: o().string.isRequired,
+        name: o().string,
+        onClick: o().func,
+        size: o().oneOfType([ o().oneOf([ "small", "medium", "large", "xlarge" ]), o().number ])
     };
-    function A(e) {
+    function M(e) {
         return !!e.onClick;
     }
     /**
@@ -260,55 +301,60 @@
  * @param {string} name - The full name.
  * @returns {string} Limited to three characters. Empty if `name` is empty.
  * @public
- */    function P(e) {
+ */    function $(e) {
         var r = (e.match(/[^\s-]+/g) || []).map((function(e) {
             return e[0];
         })).join("");
         return r.length > 3 ? "".concat(r[0]).concat(r[r.length - 1]) : r;
     }
-    function $(e) {
-        var r = e.backgroundColor, t = e.initials, n = e.size, i = j(e, [ "backgroundColor", "initials", "size" ]);
-        var a = {
+    function q(e) {
+        var r = e.backgroundColor, t = e.initials, n = e.size, i = _(e, [ "backgroundColor", "initials", "size" ]);
+        var o = {
             "data-test": "monogram",
             $backgroundColor: r,
             $initials: t,
             $size: n
         };
-        return [ a, i ];
+        return [ o, i ];
     }
-    function q(e) {
-        var r = $(e), i = k(r, 2), a = i[0], o = i[1];
-        var c = o.children, l = o.elementRef, u = o.name, f = o.onClick, p = j(o, [ "children", "elementRef", "name", "onClick" ]);
+    function R(e) {
+        var r = q(e), i = x(r, 2), o = i[0], a = i[1];
+        var s = a.children, l = a.elementRef, u = a.name, f = a.onClick, p = _(a, [ "children", "elementRef", "name", "onClick" ]);
         var d = (0, t.useCallback)((function(e) {
             f(e, {
                 name: u
             });
         }), [ f, u ]);
         
-        return n().createElement(h, y({
+        return n().createElement(g, j({
             elementRef: l,
             onClick: d
-        }, a, s()(p, Object.keys(I))), c);
+        }, o, c()(p, Object.keys(A))), s);
     }
-    function E(e) {
-        var r = $(e), t = k(r, 2), i = t[0], a = t[1];
-        var o = a.children, c = a.elementRef, l = j(a, [ "children", "elementRef" ]);
+    function T(e) {
+        var r = q(e), t = x(r, 2), i = t[0], o = t[1];
+        var a = o.children, s = o.elementRef, l = _(o, [ "children", "elementRef" ]);
         
-        return n().createElement(b, y({
-            ref: c
-        }, i, s()(l, Object.keys(I))), o);
+        return n().createElement(v, j({
+            ref: s
+        }, i, c()(l, Object.keys(A))), a);
     }
-    function M(e) {
+    function D(e) {
+        var r = e.backgroundColor, t = r === void 0 ? "theme" : r, i = e.initials, o = e.size, a = o === void 0 ? "medium" : o, c = _(e, [ "backgroundColor", "initials", "size" ]);
         // @docs-props-type MonogramPropsBase
-        if (false) {}
-        var r =  n().createElement(g, {
+                if (false) {}
+        var s =  n().createElement(h, {
             "data-test": "initials"
-        }, e.initials);
-        return A(e) ?  n().createElement(q, e, r) :  n().createElement(E, e, r);
+        }, i);
+        var l = k({
+            backgroundColor: t,
+            size: a,
+            initials: i
+        }, c);
+        return M(l) ?  n().createElement(R, l, s) :  n().createElement(T, l, s);
     }
-    M.propTypes = I;
-    M.defaultProps = _;
-    /* harmony default export */    const R = M;
+    D.propTypes = A;
+    /* harmony default export */    const N = D;
     // CONCATENATED MODULE: ./src/Monogram/index.ts
     module.exports = r;
     /******/})();

package/Multiselect.js

@@ -711,7 +711,7 @@
     var Ye = Fe()($e()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-4"
-    })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled]){&:hover{background:", ";", "}&:focus{outline:0;box-shadow:", ";", "}", " ", "}&[disabled]{color:", ";cursor:not-allowed;", ",", "{color:inherit;}", "{cursor:not-allowed;color:", ";}", "}", "" ], (0, 
+    })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}", " ", "}&:focus{outline:0;box-shadow:", ";", "}&[disabled],&[aria-disabled='true']{color:", ";cursor:not-allowed;", ",", "{color:inherit;}", "{cursor:not-allowed;color:", ";}", "}", "" ], (0, 
     Ae.pick)({
         prisma: Ae.variables.contentColorActive,
         enterprise: {
@@ -754,8 +754,6 @@
         return t && (0, Ae.pick)({
             prisma: (0, Le.css)([ "background:", ";" ], Ae.mixins.overlayColors(Ae.variables.interactiveColorOverlaySelected, Ae.variables.interactiveColorOverlayHover))
         });
-    }), Ae.variables.focusShadowInset, (0, Ae.pick)({
-        prisma: (0, Le.css)([ "background:", ";" ], Ae.variables.interactiveColorOverlayHover)
     }), (0, Ae.pick)({
         prisma: (0, Le.css)([ "&:active{background:", ";}" ], Ae.variables.interactiveColorOverlayActive)
     }), (function(e) {
@@ -763,6 +761,8 @@
         return t && (0, Ae.pick)({
             prisma: (0, Le.css)([ "background:", ";&:active{background:", ";}" ], Ae.variables.interactiveColorOverlaySelected, Ae.mixins.overlayColors(Ae.variables.interactiveColorOverlaySelected, Ae.variables.interactiveColorOverlayActive))
         });
+    }), Ae.variables.focusShadowInset, (0, Ae.pick)({
+        prisma: (0, Le.css)([ "background:", ";" ], Ae.variables.interactiveColorOverlayHover)
     }), (0, Ae.pick)({
         enterprise: {
             light: Ae.variables.gray45,
@@ -2236,13 +2236,12 @@
                             placement: i,
                             hasChildren: !!b.length
                         }),
-                        controlledExternally: o.hasFilter(),
-                        placement: i !== null && i !== void 0 ? i : undefined,
-                        onScrollBottom: o.props.onScrollBottom ? o.handleScrollBottom : undefined,
-                        "data-test": "results-menu",
-                        isLoading: o.props.isLoadingOptions,
+                        focusMode: o.hasFilter() ? "never" : undefined,
                         id: o.menuId,
-                        menuId: o.menuListboxId
+                        isLoading: o.props.isLoadingOptions,
+                        menuId: o.menuListboxId,
+                        onScrollBottom: o.props.onScrollBottom ? o.handleScrollBottom : undefined,
+                        placement: i !== null && i !== void 0 ? i : undefined
                     }, pe()(o.props, "noOptionsMessage", "footerMessage", "animateLoading", "loadingMessage", "onScroll")), {}, {
                         style: l,
                         tabIndex: s
@@ -2941,8 +2940,14 @@
             gr(br(a), "popoverId", void 0);
             gr(br(a), "previousActiveIndex", null);
             gr(br(a), "handleClick", (function() {
-                var e;
-                (e = a.input) === null || e === void 0 ? void 0 : e.focus();
+                if (a.state.hasFocus) {
+                    a.open({
+                        resetFilterKeyword: false
+                    });
+                } else {
+                    var e;
+                    (e = a.input) === null || e === void 0 ? void 0 : e.focus();
+                }
             }));
             gr(br(a), "handleRequestRemove", (function(e, t) {
                 var n = t.value;
@@ -2951,6 +2956,19 @@
                 }));
  // allow the event to bubble before removing.
                         }));
+            gr(br(a), "open", (function(e) {
+                var t = e.resetFilterKeyword;
+                a.setState((function(e) {
+                    return {
+                        filterKeyword: t ? "" : e.filterKeyword,
+                        hasFocus: true,
+                        open: true
+                    };
+                }), (function() {
+                    var e, t;
+                    (e = (t = a.props).onOpen) === null || e === void 0 ? void 0 : e.call(t);
+                }));
+            }));
             gr(br(a), "handleInputFocus", (function(e) {
                 if (a.state.filterKeyword !== "") {
                     var t, n;
@@ -2958,14 +2976,9 @@
                         keyword: ""
                     });
                 }
-                a.setState({
-                    filterKeyword: "",
-                    hasFocus: true,
-                    open: true
-                }, (function() {
-                    var e, t;
-                    (e = (t = a.props).onOpen) === null || e === void 0 ? void 0 : e.call(t);
-                }));
+                a.open({
+                    resetFilterKeyword: true
+                });
             }));
             gr(br(a), "handleInputKeyDown", (function(e) {
                 var t, r;
@@ -3056,6 +3069,7 @@
             gr(br(a), "handleMenuOptionClick", (function(e, t) {
                 var n;
                 var r = t.value;
+                e.stopPropagation();
                 a.addValue(e, r);
                 (n = a.input) === null || n === void 0 ? void 0 : n.focus();
             }));
@@ -3128,7 +3142,7 @@
                 });
                 
                 return r().createElement(xe(), sr({
-                    controlledExternally: true,
+                    focusMode: "never",
                     placement: o !== null && o !== void 0 ? o : undefined,
                     isLoading: a.props.isLoadingOptions,
                     onScrollBottom: a.props.onScrollBottom ? a.handleScrollBottom : undefined
@@ -3209,6 +3223,9 @@
             key: "addValue",
             value: function e(t, n) {
                 var r, o, a;
+                if (!this.state.open) {
+                    return;
+                }
                 var i = ((r = this.getCurrentValues()) !== null && r !== void 0 ? r : []).concat([ n ]);
                 var l = this.props.name;
                 if (!this.isControlled()) {

package/Paginator.js

@@ -229,7 +229,7 @@
             $current: o || false,
             "data-test": "page",
             "data-test-page": i,
-            appearance: "pill",
+            appearance: "subtle",
             disabled: a,
             inline: false,
             onClick: s