@splunk/react-ui 5.1.0 → 5.3.0

package/Search.js

@@ -63,7 +63,7 @@
         e.d(n, {
         Divider: () => /* reexport */ p.Divider,
         Heading: () => /* reexport */ p.Heading,
-        Option: () => /* reexport */ E,
+        Option: () => /* reexport */ D,
         default: () => /* reexport */ ie
     });
     // CONCATENATED MODULE: external "react"
@@ -143,7 +143,7 @@
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
-                r = a[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+                r = a[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
             }
         }
         return o;
@@ -153,7 +153,7 @@
         var r = {};
         for (var t in e) {
             if ({}.hasOwnProperty.call(e, t)) {
-                if (n.includes(t)) continue;
+                if (-1 !== n.indexOf(t)) continue;
                 r[t] = e[t];
             }
         }
@@ -181,7 +181,7 @@
     };
     /**
  * An option within a `Search`.
- */    function D(e) {
+ */    function x(e) {
         var n = e.active, o = e.description, a = e.descriptionPosition, i = a === void 0 ? "bottom" : a, l = e.disabled, u = e.elementRef, c = e.endAdornment, s = e.label, d = e.matchRanges, f = e.onClick, v = e.openInNewContext, b = e.startAdornment, m = e.to, y = e.truncate, g = e.value, h = M(e, [ "active", "description", "descriptionPosition", "disabled", "elementRef", "endAdornment", "label", "matchRanges", "onClick", "openInNewContext", "startAdornment", "to", "truncate", "value" ]);
         // @docs-props-type OptionPropsBase
                 var O = (0, r.useCallback)((function(e) {
@@ -216,12 +216,12 @@
             role: "option"
         }), w);
     }
-    D.propTypes = q;
-    D.as = "Item";
-    /* harmony default export */    const E = D;
+    x.propTypes = q;
+    x.as = "Item";
+    /* harmony default export */    const D = x;
     // CONCATENATED MODULE: external "styled-components"
-    const x = require("styled-components");
-    var B =  e.n(x);
+    const E = require("styled-components");
+    var B =  e.n(E);
     // CONCATENATED MODULE: external "@splunk/react-icons/Magnifier"
     const T = require("@splunk/react-icons/Magnifier");
     var H =  e.n(T);
@@ -233,7 +233,7 @@
         componentId: "sc-1bohk7c-0"
     })([ "color:", ";pointer-events:none;", "" ], L.variables.contentColorMuted, (function(e) {
         var n = e.$disabled;
-        return n && (0, x.css)([ "color:", ";" ], L.variables.contentColorDisabled);
+        return n && (0, E.css)([ "color:", ";" ], L.variables.contentColorDisabled);
     }));
     // CONCATENATED MODULE: ./src/Search/Search.tsx
     function N(e) {
@@ -349,7 +349,7 @@
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
-                r = a[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+                r = a[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
             }
         }
         return o;
@@ -359,7 +359,7 @@
         var r = {};
         for (var t in e) {
             if ({}.hasOwnProperty.call(e, t)) {
-                if (n.includes(t)) continue;
+                if (-1 !== n.indexOf(t)) continue;
                 r[t] = e[t];
             }
         }
@@ -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, D = e.loadingMessage, E = e.menuStyle, x = E === void 0 ? {} : E, 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() {
-            return Pe.current ? X : be;
+        var De = function e(n) {
+            I(Ie, n);
+            I(M, n);
         };
         var Ee = function e() {
-            var n = De();
-            var t = r.Children.toArray(a).filter(r.isValidElement);
-            var o = !de && t.find((function(e) {
+            return Re.current ? G : ye;
+        };
+        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 xe = 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) {
-            xe();
-            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") {
-                xe();
+                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) {
-                xe();
+        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,81 +590,83 @@
                 }));
             }
             var c = te({
-                anchorWidth: i,
+                anchorWidth: a,
                 maxHeight: l,
-                menuStyle: x
+                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: D,
-                menuId: Se
-            }), Ie.current);
+                menuId: Ce
+            }), Me.current);
         };
-        var Ue = De();
-        var $e = Ee();
-        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 = E;
+    ae.Option = D;
     ae.Divider = p.Divider;
     ae.Heading = p.Heading;
     /* harmony default export */    const ie = ae;