@splunk/react-ui 5.2.0 → 5.4.0

package/Search.js

@@ -369,6 +369,7 @@
     /** @public */
     /** @public */    var ne = {
         animateLoading: v().bool,
+        append: v().bool,
         children: v().node,
         defaultPlacement: v().oneOf([ "above", "below", "vertical" ]),
         defaultValue: v().string,
@@ -394,6 +395,7 @@
         onScroll: v().func,
         onSelect: v().func,
         placeholder: v().string,
+        prepend: v().bool,
         value: v().string
     };
     function re(e, n) {
@@ -411,46 +413,46 @@
     }));
     var oe = (0, C._)("Search");
     function ae(e) {
-        var n = e.animateLoading, o = n === void 0 ? false : n, a = e.children, i = e.defaultPlacement, l = e.defaultValue, u = e.describedBy, s = e.disabled, f = s === void 0 ? false : s, v = e.elementRef, p = e.error, b = p === void 0 ? false : p, y = e.footerMessage, h = e.inline, S = h === void 0 ? false : h, R = e.inputRef, M = e.isLoadingOptions, A = M === void 0 ? false : M, q = e.labelledBy, x = e.loadingMessage, D = e.menuStyle, E = D === void 0 ? {} : D, B = e.name, T = e.noOptionsMessage, H = e.onChange, L = e.onClose, N = e.onFocus, K = e.onKeyDown, W = e.onOpen, U = e.placeholder, $ = U === void 0 ? (0, 
-        C._)("Search...") : U, X = e.value, Y = Z(e, [ "animateLoading", "children", "defaultPlacement", "defaultValue", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFocus", "onKeyDown", "onOpen", "placeholder", "value" ]);
+        var n = e.animateLoading, o = n === void 0 ? false : n, a = e.append, i = e.children, l = e.defaultPlacement, u = e.defaultValue, s = e.describedBy, f = e.disabled, v = f === void 0 ? false : f, p = e.elementRef, b = e.error, y = b === void 0 ? false : b, h = e.footerMessage, S = e.inline, R = S === void 0 ? false : S, M = e.inputRef, A = e.isLoadingOptions, q = A === void 0 ? false : A, x = e.labelledBy, D = e.loadingMessage, E = e.menuStyle, B = E === void 0 ? {} : E, T = e.name, H = e.noOptionsMessage, L = e.onChange, N = e.onClose, K = e.onFocus, W = e.onKeyDown, U = e.onOpen, $ = e.placeholder, X = $ === void 0 ? (0, 
+        C._)("Search...") : $, Y = e.prepend, G = e.value, J = Z(e, [ "animateLoading", "append", "children", "defaultPlacement", "defaultValue", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onChange", "onClose", "onFocus", "onKeyDown", "onOpen", "placeholder", "prepend", "value" ]);
         // @docs-props-type SearchPropsBase
-                var G = !!a || A;
+                var Q = !!i || q;
         // state
-                var J = (0, r.useState)(0), Q = z(J, 2), ee = Q[0], ne = Q[1];
-        var ae = (0, r.useState)(false), ie = z(ae, 2), le = ie[0], ue = ie[1];
-        var ce = (0, r.useState)(undefined), se = z(ce, 2), de = se[0], fe = se[1];
-        var ve = (0, r.useState)(l || ""), pe = z(ve, 2), be = pe[0], me = pe[1];
-        var ye = (0, r.useState)((function() {
+                var ee = (0, r.useState)(0), ne = z(ee, 2), ae = ne[0], ie = ne[1];
+        var le = (0, r.useState)(false), ue = z(le, 2), ce = ue[0], se = ue[1];
+        var de = (0, r.useState)(undefined), fe = z(de, 2), ve = fe[0], pe = fe[1];
+        var be = (0, r.useState)(u || ""), me = z(be, 2), ye = me[0], ge = me[1];
+        var he = (0, r.useState)((function() {
             return {
                 popoverId: (0, j.createDOMID)("popover"),
                 menuId: (0, j.createDOMID)("menu"),
                 activeItemId: (0, j.createDOMID)("active-item")
             };
-        })), ge = z(ye, 1), he = ge[0], Oe = he.popoverId, Se = he.menuId, we = he.activeItemId;
+        })), Oe = z(he, 1), Se = Oe[0], we = Se.popoverId, Ce = Se.menuId, je = Se.activeItemId;
  // previous state
-                var Ce = w()(ee);
+                var ke = w()(ae);
         // refs
-                var je = (0, r.useRef)(null);
-        var ke = (0, r.useRef)(null);
-        var Pe = (0, r.useRef)(X !== undefined && X !== null);
-        var Ie = (0, r.useRef)([]);
-        var Re = (0, r.useRef)(Ce);
-        var Me = (0, r.useRef)(undefined);
-        var Ae = function e(n) {
-            I(je, n);
-            I(v, n);
+                var Pe = (0, r.useRef)(null);
+        var Ie = (0, r.useRef)(null);
+        var Re = (0, r.useRef)(G !== undefined && G !== null);
+        var Me = (0, r.useRef)([]);
+        var Ae = (0, r.useRef)(ke);
+        var qe = (0, r.useRef)(undefined);
+        var xe = function e(n) {
+            I(Pe, n);
+            I(p, n);
         };
-        var qe = function e(n) {
-            I(ke, n);
-            I(R, n);
+        var De = function e(n) {
+            I(Ie, n);
+            I(M, n);
         };
-        var xe = function e() {
-            return Pe.current ? X : be;
+        var Ee = function e() {
+            return Re.current ? G : ye;
         };
-        var De = function e() {
-            var n = xe();
-            var t = r.Children.toArray(a).filter(r.isValidElement);
-            var o = !de && t.find((function(e) {
+        var Be = function e() {
+            var n = Ee();
+            var t = r.Children.toArray(i).filter(r.isValidElement);
+            var o = !ve && t.find((function(e) {
                 return e.props.label !== undefined && e.props.value === n;
             }));
             if (o) {
@@ -458,45 +460,45 @@
             }
             return n;
         };
-        var Ee = function e() {
-            ue(true);
-            ne(-1);
-            W === null || W === void 0 ? void 0 : W();
+        var Te = function e() {
+            se(true);
+            ie(-1);
+            U === null || U === void 0 ? void 0 : U();
         };
-        var Be = function e() {
-            ue(false);
-            Re.current = null;
-            L === null || L === void 0 ? void 0 : L();
+        var He = function e() {
+            se(false);
+            Ae.current = null;
+            N === null || N === void 0 ? void 0 : N();
         };
-        var Te = function e() {
+        var Le = function e() {
             var n;
-            (n = ke.current) === null || n === void 0 ? void 0 : n.focus();
+            (n = Ie.current) === null || n === void 0 ? void 0 : n.focus();
         };
-        var He = function e(n, r) {
-            Ee();
-            N === null || N === void 0 ? void 0 : N(n, r);
+        var _e = function e(n, r) {
+            Te();
+            K === null || K === void 0 ? void 0 : K(n, r);
         };
-        var Le = function e(n, r) {
+        var Ne = function e(n, r) {
             var t = r.value;
-            if (!Pe.current) {
-                me(t);
+            if (!Re.current) {
+                ge(t);
             }
-            ne(-1);
-            fe(t);
-            H === null || H === void 0 ? void 0 : H(n, {
+            ie(-1);
+            pe(t);
+            L === null || L === void 0 ? void 0 : L(n, {
                 value: t,
-                name: B
+                name: T
             });
         };
-        var _e = function e(n, r) {
-            Le(n, F({}, r));
-            Te();
-            Be();
+        var Ve = function e(n, r) {
+            Ne(n, F({}, r));
+            Le();
+            He();
         };
-        var Ne = function e(n) {
-            var r = Ie.current.length;
+        var Ke = function e(n) {
+            var r = Me.current.length;
             var t = n.key;
-            if (le) {
+            if (ce) {
                 switch (t) {
                   case "Enter":
                     {
@@ -504,20 +506,20 @@
                         // triggering onClick so that links can be activated with the keyboard
                         // since the menu items themselves never receive focus
                         // this will implicitly call handleSelectOption()
-                                                (o = document.getElementById(we)) === null || o === void 0 ? void 0 : o.click();
+                                                (o = document.getElementById(je)) === null || o === void 0 ? void 0 : o.click();
                         break;
                     }
 
                   case "Tab":
-                    Be();
+                    He();
                     break;
 
                   case "ArrowDown":
-                    ne(Math.min(ee + 1, r - 1));
+                    ie(Math.min(ae + 1, r - 1));
                     break;
 
                   case "ArrowUp":
-                    ne(Math.max(ee - 1, 0));
+                    ie(Math.max(ae - 1, 0));
                     break;
 
                   default:
@@ -526,38 +528,38 @@
             } else if ((0, k.addsCharacter)(n.nativeEvent) !== false || 
             // Safari 9.0 returns undefined
             t === "Enter" || t === "Backspace" || t === "ArrowDown" || t === "ArrowUp") {
-                Ee();
+                Te();
             }
-            K === null || K === void 0 ? void 0 : K(n);
+            W === null || W === void 0 ? void 0 : W(n);
         };
-        var Ve = function e() {
-            if (!le && !f) {
-                Ee();
+        var Fe = function e() {
+            if (!ce && !v) {
+                Te();
             }
         };
-        var Ke = function e(n) {
+        var We = function e(n) {
             var r = n.event, t = n.reason;
-            var o = t === "offScreen" || t === "escapeKey" || t === "clickAway" && je.current && !re(je.current, r);
+            var o = t === "offScreen" || t === "escapeKey" || t === "clickAway" && Pe.current && !re(Pe.current, r);
             if (o) {
-                Be();
+                He();
             }
         };
-        var Fe = function e(n) {
-            if (Re.current !== ee) {
+        var Ue = function e(n) {
+            if (Ae.current !== ae) {
                 if (n) {
                     (0, P.scrollIntoViewIfNeeded)(n);
                 }
             }
         };
-        var We = function e(n) {
-            var i = n.anchorWidth, l = n.maxHeight;
-            var u = r.Children.toArray(a).filter(r.isValidElement);
+        var $e = function e(n) {
+            var a = n.anchorWidth, l = n.maxHeight;
+            var u = r.Children.toArray(i).filter(r.isValidElement);
             // Highlight Active
-                        Me.current = undefined;
+                        qe.current = undefined;
             // Only update the menu options if they are valid and the dropdown is open.
             // This is necessary to handle the outro animation of the dropdown.
-                        if (G && le) {
-                Ie.current = u.map((function(e, n) {
+                        if (Q && ce) {
+                Me.current = u.map((function(e, n) {
                     if (e.type.as !== "Item") {
                         // ignore non-Option items such as Headings and Dividers
                         return e;
@@ -566,17 +568,17 @@
                         var o, a;
                         var i = (o = (a = e.props).onClick) === null || o === void 0 ? void 0 : o.call(a, r, t);
                         if (i !== false) {
-                            _e(r, t);
+                            Ve(r, t);
                         }
                     };
-                    if (n === ee) {
+                    if (n === ae) {
                         if (!e.props.disabled) {
-                            Me.current = e.props.value;
+                            qe.current = e.props.value;
                         }
                         
                         return (0, r.cloneElement)(e, {
-                            elementRef: Fe,
-                            id: we,
+                            elementRef: Ue,
+                            id: je,
                             onClick: t,
                             active: true
                         });
@@ -588,78 +590,80 @@
                 }));
             }
             var c = te({
-                anchorWidth: i,
+                anchorWidth: a,
                 maxHeight: l,
-                menuStyle: E
+                menuStyle: B
             });
             
             return t().createElement(g(), V({
                 style: c,
                 focusMode: "never",
-                isLoading: A
-            }, d()(Y, "onScroll"), {
-                noOptionsMessage: T,
-                footerMessage: y,
+                isLoading: q
+            }, d()(J, "onScroll"), {
+                noOptionsMessage: H,
+                footerMessage: h,
                 animateLoading: o,
-                loadingMessage: x,
-                menuId: Se
-            }), Ie.current);
+                loadingMessage: D,
+                menuId: Ce
+            }), Me.current);
         };
-        var Ue = xe();
-        var $e = De();
-        var ze = le && !!je.current && G;
-        var Xe = G ? "combobox" : "searchbox";
-        var Ye = {
-            "aria-activedescendant": ze && ee > -1 ? we : undefined,
-            "aria-expanded": G ? le && !!je.current : undefined,
-            "aria-controls": ze ? Se : undefined
+        var ze = Ee();
+        var Xe = Be();
+        var Ye = ce && !!Pe.current && Q;
+        var Ge = Q ? "combobox" : "searchbox";
+        var Je = {
+            "aria-activedescendant": Ye && ae > -1 ? je : undefined,
+            "aria-expanded": Q ? ce && !!Pe.current : undefined,
+            "aria-controls": Ye ? Ce : undefined
         };
-        var Ge =  t().createElement(_, {
-            $disabled: f,
+        var Qe =  t().createElement(_, {
+            $disabled: v,
             "aria-label": oe,
             "data-test": "search-icon"
         });
         
         return t().createElement(O(), V({
             "data-test": "search"
-        }, c()(Y, "onScroll"), {
+        }, c()(J, "onScroll"), {
+            append: a,
             autoCapitalize: "off",
             autoComplete: "off",
             autoCorrect: "off",
             canClear: true,
-            "data-test-popover-id": Oe,
-            "data-test-label": $e,
-            "data-test-value": Ue,
-            "data-test-open": ze,
-            describedBy: u,
-            disabled: f,
-            elementRef: Ae,
-            error: b,
-            inline: S,
-            inputRef: qe,
-            labelledBy: q,
-            name: B,
-            onFocus: He,
-            onClick: Ve,
-            onChange: Le,
-            onKeyDown: Ne,
-            placeholder: $,
+            "data-test-popover-id": we,
+            "data-test-label": Xe,
+            "data-test-value": ze,
+            "data-test-open": Ye,
+            describedBy: s,
+            disabled: v,
+            elementRef: xe,
+            error: y,
+            inline: R,
+            inputRef: De,
+            labelledBy: x,
+            name: T,
+            onFocus: _e,
+            onClick: Fe,
+            onChange: Ne,
+            onKeyDown: Ke,
+            placeholder: X,
+            prepend: Y,
             spellCheck: false,
-            startAdornment: Ge,
-            value: $e,
-            role: Xe
-        }, Ye),  t().createElement(m(), {
+            startAdornment: Qe,
+            value: Xe,
+            role: Ge
+        }, Je),  t().createElement(m(), {
             anchor: function() {
-                return je.current;
+                return Pe.current;
             }(),
             autoCloseWhenOffScreen: true,
             canCoverAnchor: false,
-            defaultPlacement: i,
-            id: Oe,
-            onRequestClose: Ke,
-            open: ze,
+            defaultPlacement: l,
+            id: we,
+            onRequestClose: We,
+            open: Ye,
             repositionMode: "flip"
-        }, We));
+        }, $e));
     }
     ae.propTypes = ne;
     ae.Option = D;