@splunk/react-ui 5.0.0 → 5.1.0

package/Search.js

@@ -63,27 +63,27 @@
         e.d(n, {
         Divider: () => /* reexport */ p.Divider,
         Heading: () => /* reexport */ p.Heading,
-        Option: () => /* reexport */ D,
+        Option: () => /* reexport */ E,
         default: () => /* reexport */ ie
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
     var t =  e.n(r);
-    // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var a =  e.n(o);
     // CONCATENATED MODULE: external "lodash/extend"
-    const i = require("lodash/extend");
-    var l =  e.n(i);
+    const o = require("lodash/extend");
+    var a =  e.n(o);
     // CONCATENATED MODULE: external "lodash/memoize"
-    const u = require("lodash/memoize");
-    var c =  e.n(u);
+    const i = require("lodash/memoize");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "lodash/omit"
-    const s = require("lodash/omit");
-    var f =  e.n(s);
+    const u = require("lodash/omit");
+    var c =  e.n(u);
     // CONCATENATED MODULE: external "lodash/pick"
-    const d = require("lodash/pick");
-    var v =  e.n(d);
+    const s = require("lodash/pick");
+    var d =  e.n(s);
+    // CONCATENATED MODULE: external "prop-types"
+    const f = require("prop-types");
+    var v =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/Menu"
     const p = require("@splunk/react-ui/Menu");
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
@@ -98,12 +98,14 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
     const S = require("@splunk/react-ui/usePrevious");
     var w =  e.n(S);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const C = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const j = require("@splunk/ui-utils/i18n");
+    const C = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const j = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const P = require("@splunk/ui-utils/keyboard");
+    const k = require("@splunk/ui-utils/keyboard");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/scroll"
+    const P = require("@splunk/ui-utils/scroll");
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -111,7 +113,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function k(e, n) {
+    function I(e, n) {
         if (e) {
             if (typeof e === "function") {
                 e(n);
@@ -137,7 +139,7 @@
     }
     function M(e, n) {
         if (null == e) return {};
-        var r, t, o = I(e, n);
+        var r, t, o = A(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -146,7 +148,7 @@
         }
         return o;
     }
-    function I(e, n) {
+    function A(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -157,41 +159,41 @@
         }
         return r;
     }
-    var A = {
+    var q = {
         /** @private */
-        active: a().bool,
-        description: a().string,
-        descriptionPosition: a().oneOf([ "right", "bottom" ]),
-        disabled: a().bool,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        endAdornment: a().node,
-        label: a().string,
-        matchRanges: a().arrayOf(a().shape({
-            start: a().number.isRequired,
-            end: a().number.isRequired
+        active: v().bool,
+        description: v().string,
+        descriptionPosition: v().oneOf([ "right", "bottom" ]),
+        disabled: v().bool,
+        elementRef: v().oneOfType([ v().func, v().object ]),
+        endAdornment: v().node,
+        label: v().string,
+        matchRanges: v().arrayOf(v().shape({
+            start: v().number.isRequired,
+            end: v().number.isRequired
         })),
-        onClick: a().func,
-        openInNewContext: a().bool,
-        startAdornment: a().node,
-        to: a().string,
-        truncate: a().bool,
-        value: a().string.isRequired
+        onClick: v().func,
+        openInNewContext: v().bool,
+        startAdornment: v().node,
+        to: v().string,
+        truncate: v().bool,
+        value: v().string.isRequired
     };
     /**
  * An option within a `Search`.
- */    function q(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, f = e.matchRanges, d = 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" ]);
+ */    function D(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) {
             if (!l) {
-                d === null || d === void 0 ? void 0 : d(e, {
+                f === null || f === void 0 ? void 0 : f(e, {
                     to: m,
                     value: g
                 });
             }
-        }), [ l, d, m, g ]);
+        }), [ l, f, m, g ]);
         var S = (0, r.useCallback)((function(e) {
-            k(u, e);
+            I(u, e);
         }), [ u ]);
         var w = s === undefined ? g : s;
         
@@ -204,7 +206,7 @@
             disabled: l ? "disabled" : undefined,
             elementRef: S,
             endAdornment: c,
-            matchRanges: f,
+            matchRanges: d,
             onClick: O,
             openInNewContext: v,
             startAdornment: b,
@@ -214,42 +216,24 @@
             role: "option"
         }), w);
     }
-    q.propTypes = A;
-    q.as = "Item";
-    /* harmony default export */    const D = q;
-    // CONCATENATED MODULE: ./src/utils/scrollIntoViewIfNeeded.ts
-    // A utility that attempts to move an element into view by scrolling it's derived parent.
-    var E = function e(n) {
-        if (!n) {
-            return;
-        }
-        var r = n.offsetParent;
-        if (!r) {
-            return;
-        }
-        // Below the bottom of the container.
-                if (r.scrollTop + r.clientHeight < n.offsetTop + n.clientHeight) {
-            r.scrollTop = n.offsetTop + n.clientHeight - r.clientHeight;
-            // Above the top of the container.
-                } else if (r.scrollTop > n.offsetTop) {
-            r.scrollTop = n.offsetTop;
-        }
-    };
+    D.propTypes = q;
+    D.as = "Item";
+    /* harmony default export */    const E = D;
     // CONCATENATED MODULE: external "styled-components"
-    const T = require("styled-components");
-    var x =  e.n(T);
+    const x = require("styled-components");
+    var B =  e.n(x);
     // CONCATENATED MODULE: external "@splunk/react-icons/Magnifier"
-    const B = require("@splunk/react-icons/Magnifier");
-    var H =  e.n(B);
+    const T = require("@splunk/react-icons/Magnifier");
+    var H =  e.n(T);
     // CONCATENATED MODULE: external "@splunk/themes"
     const L = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Search/SearchStyles.ts
-    var _ = x()(H()).withConfig({
+    var _ = B()(H()).withConfig({
         displayName: "SearchStyles__StyledSearchIcon",
         componentId: "sc-1bohk7c-0"
     })([ "color:", ";pointer-events:none;", "" ], L.variables.contentColorMuted, (function(e) {
         var n = e.$disabled;
-        return n && (0, T.css)([ "color:", ";" ], L.variables.contentColorDisabled);
+        return n && (0, x.css)([ "color:", ";" ], L.variables.contentColorDisabled);
     }));
     // CONCATENATED MODULE: ./src/Search/Search.tsx
     function N(e) {
@@ -260,8 +244,8 @@
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
         }, N(e);
     }
-    function K() {
-        return K = Object.assign ? Object.assign.bind() : function(e) {
+    function V() {
+        return V = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -269,9 +253,9 @@
                 }
             }
             return e;
-        }, K.apply(null, arguments);
+        }, V.apply(null, arguments);
     }
-    function V(e, n) {
+    function K(e, n) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(e);
@@ -284,9 +268,9 @@
     function F(e) {
         for (var n = 1; n < arguments.length; n++) {
             var r = null != arguments[n] ? arguments[n] : {};
-            n % 2 ? V(Object(r), !0).forEach((function(n) {
+            n % 2 ? K(Object(r), !0).forEach((function(n) {
                 W(e, n, r[n]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : V(Object(r)).forEach((function(n) {
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : K(Object(r)).forEach((function(n) {
                 Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
             }));
         }
@@ -384,89 +368,89 @@
     /** @public */
     /** @public */
     /** @public */    var ne = {
-        animateLoading: a().bool,
-        children: a().node,
-        defaultPlacement: a().oneOf([ "above", "below", "vertical" ]),
-        defaultValue: a().string,
-        describedBy: a().string,
-        disabled: a().bool,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        error: a().bool,
-        footerMessage: a().node,
-        inline: a().bool,
-        inputRef: a().oneOfType([ a().func, a().object ]),
-        isLoadingOptions: a().bool,
-        labelledBy: a().string,
-        loadingMessage: a().node,
-        menuStyle: a().object,
-        name: a().string,
-        noOptionsMessage: a().node,
-        onBlur: a().func,
-        onChange: a().func,
-        onClose: a().func,
-        onFocus: a().func,
-        onKeyDown: a().func,
-        onOpen: a().func,
-        onScroll: a().func,
-        onSelect: a().func,
-        placeholder: a().string,
-        value: a().string
+        animateLoading: v().bool,
+        children: v().node,
+        defaultPlacement: v().oneOf([ "above", "below", "vertical" ]),
+        defaultValue: v().string,
+        describedBy: v().string,
+        disabled: v().bool,
+        elementRef: v().oneOfType([ v().func, v().object ]),
+        error: v().bool,
+        footerMessage: v().node,
+        inline: v().bool,
+        inputRef: v().oneOfType([ v().func, v().object ]),
+        isLoadingOptions: v().bool,
+        labelledBy: v().string,
+        loadingMessage: v().node,
+        menuStyle: v().object,
+        name: v().string,
+        noOptionsMessage: v().node,
+        onBlur: v().func,
+        onChange: v().func,
+        onClose: v().func,
+        onFocus: v().func,
+        onKeyDown: v().func,
+        onOpen: v().func,
+        onScroll: v().func,
+        onSelect: v().func,
+        placeholder: v().string,
+        value: v().string
     };
     function re(e, n) {
         var r = n.clientX, t = n.clientY;
         var o = e.getBoundingClientRect(), a = o.top, i = o.left, l = o.bottom, u = o.right;
         return r > i && r < u && t > a && t < l;
     }
-    var te = c()((function(e) {
+    var te = l()((function(e) {
         var n = e.anchorWidth, r = e.maxHeight, t = e.menuStyle;
-        return l()({
+        return a()({
             maxHeight: r,
             overflow: "auto",
             width: Math.max(n !== null && n !== void 0 ? n : 0, 200)
         }, t);
     }));
-    var oe = (0, j._)("Search");
+    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, c = e.disabled, s = c === void 0 ? false : c, d = 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, I = M === void 0 ? false : M, A = e.labelledBy, q = e.loadingMessage, D = e.menuStyle, T = D === void 0 ? {} : D, x = e.name, B = e.noOptionsMessage, H = e.onChange, L = e.onClose, N = e.onFocus, V = e.onKeyDown, W = e.onOpen, U = e.placeholder, $ = U === void 0 ? (0, 
-        j._)("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.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" ]);
         // @docs-props-type SearchPropsBase
-                var G = !!a || I;
+                var G = !!a || A;
         // 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), fe = se[0], de = se[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() {
             return {
-                popoverId: (0, C.createDOMID)("popover"),
-                menuId: (0, C.createDOMID)("menu"),
-                activeItemId: (0, C.createDOMID)("active-item")
+                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;
  // previous state
                 var Ce = w()(ee);
         // refs
                 var je = (0, r.useRef)(null);
-        var Pe = (0, r.useRef)(null);
-        var ke = (0, r.useRef)(X !== undefined && X !== null);
-        var Re = (0, r.useRef)([]);
-        var Me = (0, r.useRef)(Ce);
-        var Ie = (0, r.useRef)(undefined);
+        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) {
-            k(je, n);
-            k(d, n);
+            I(je, n);
+            I(v, n);
         };
         var qe = function e(n) {
-            k(Pe, n);
-            k(R, n);
+            I(ke, n);
+            I(R, n);
         };
         var De = function e() {
-            return ke.current ? X : be;
+            return Pe.current ? X : be;
         };
         var Ee = function e() {
             var n = De();
             var t = r.Children.toArray(a).filter(r.isValidElement);
-            var o = !fe && t.find((function(e) {
+            var o = !de && t.find((function(e) {
                 return e.props.label !== undefined && e.props.value === n;
             }));
             if (o) {
@@ -474,43 +458,43 @@
             }
             return n;
         };
-        var Te = function e() {
+        var xe = function e() {
             ue(true);
             ne(-1);
             W === null || W === void 0 ? void 0 : W();
         };
-        var xe = function e() {
+        var Be = function e() {
             ue(false);
-            Me.current = null;
+            Re.current = null;
             L === null || L === void 0 ? void 0 : L();
         };
-        var Be = function e() {
+        var Te = function e() {
             var n;
-            (n = Pe.current) === null || n === void 0 ? void 0 : n.focus();
+            (n = ke.current) === null || n === void 0 ? void 0 : n.focus();
         };
         var He = function e(n, r) {
-            Te();
+            xe();
             N === null || N === void 0 ? void 0 : N(n, r);
         };
         var Le = function e(n, r) {
             var t = r.value;
-            if (!ke.current) {
+            if (!Pe.current) {
                 me(t);
             }
             ne(-1);
-            de(t);
+            fe(t);
             H === null || H === void 0 ? void 0 : H(n, {
                 value: t,
-                name: x
+                name: B
             });
         };
         var _e = function e(n, r) {
             Le(n, F({}, r));
+            Te();
             Be();
-            xe();
         };
         var Ne = function e(n) {
-            var r = Re.current.length;
+            var r = Ie.current.length;
             var t = n.key;
             if (le) {
                 switch (t) {
@@ -525,7 +509,7 @@
                     }
 
                   case "Tab":
-                    xe();
+                    Be();
                     break;
 
                   case "ArrowDown":
@@ -539,29 +523,29 @@
                   default:
  // do nothing
                                 }
-            } else if ((0, P.addsCharacter)(n.nativeEvent) !== false || 
+            } else if ((0, k.addsCharacter)(n.nativeEvent) !== false || 
             // Safari 9.0 returns undefined
             t === "Enter" || t === "Backspace" || t === "ArrowDown" || t === "ArrowUp") {
-                Te();
+                xe();
             }
-            V === null || V === void 0 ? void 0 : V(n);
+            K === null || K === void 0 ? void 0 : K(n);
         };
-        var Ke = function e() {
-            if (!le && !s) {
-                Te();
+        var Ve = function e() {
+            if (!le && !f) {
+                xe();
             }
         };
-        var Ve = function e(n) {
+        var Ke = function e(n) {
             var r = n.event, t = n.reason;
             var o = t === "offScreen" || t === "escapeKey" || t === "clickAway" && je.current && !re(je.current, r);
             if (o) {
-                xe();
+                Be();
             }
         };
         var Fe = function e(n) {
-            if (Me.current !== ee) {
+            if (Re.current !== ee) {
                 if (n) {
-                    E(n);
+                    (0, P.scrollIntoViewIfNeeded)(n);
                 }
             }
         };
@@ -569,11 +553,11 @@
             var i = n.anchorWidth, l = n.maxHeight;
             var u = r.Children.toArray(a).filter(r.isValidElement);
             // Highlight Active
-                        Ie.current = undefined;
+                        Me.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) {
-                Re.current = u.map((function(e, n) {
+                Ie.current = u.map((function(e, n) {
                     if (e.type.as !== "Item") {
                         // ignore non-Option items such as Headings and Dividers
                         return e;
@@ -587,7 +571,7 @@
                     };
                     if (n === ee) {
                         if (!e.props.disabled) {
-                            Ie.current = e.props.value;
+                            Me.current = e.props.value;
                         }
                         
                         return (0, r.cloneElement)(e, {
@@ -606,20 +590,20 @@
             var c = te({
                 anchorWidth: i,
                 maxHeight: l,
-                menuStyle: T
+                menuStyle: x
             });
             
-            return t().createElement(g(), K({
+            return t().createElement(g(), V({
                 style: c,
                 focusMode: "never",
-                isLoading: I
-            }, v()(Y, "onScroll"), {
-                noOptionsMessage: B,
+                isLoading: A
+            }, d()(Y, "onScroll"), {
+                noOptionsMessage: T,
                 footerMessage: y,
                 animateLoading: o,
-                loadingMessage: q,
+                loadingMessage: D,
                 menuId: Se
-            }), Re.current);
+            }), Ie.current);
         };
         var Ue = De();
         var $e = Ee();
@@ -631,14 +615,14 @@
             "aria-controls": ze ? Se : undefined
         };
         var Ge =  t().createElement(_, {
-            $disabled: s,
+            $disabled: f,
             "aria-label": oe,
             "data-test": "search-icon"
         });
         
-        return t().createElement(O(), K({
+        return t().createElement(O(), V({
             "data-test": "search"
-        }, f()(Y, "onScroll"), {
+        }, c()(Y, "onScroll"), {
             autoCapitalize: "off",
             autoComplete: "off",
             autoCorrect: "off",
@@ -648,15 +632,15 @@
             "data-test-value": Ue,
             "data-test-open": ze,
             describedBy: u,
-            disabled: s,
+            disabled: f,
             elementRef: Ae,
             error: b,
             inline: S,
             inputRef: qe,
-            labelledBy: A,
-            name: x,
+            labelledBy: q,
+            name: B,
             onFocus: He,
-            onClick: Ke,
+            onClick: Ve,
             onChange: Le,
             onKeyDown: Ne,
             placeholder: $,
@@ -672,13 +656,13 @@
             canCoverAnchor: false,
             defaultPlacement: i,
             id: Oe,
-            onRequestClose: Ve,
+            onRequestClose: Ke,
             open: ze,
             repositionMode: "flip"
         }, We));
     }
     ae.propTypes = ne;
-    ae.Option = D;
+    ae.Option = E;
     ae.Divider = p.Divider;
     ae.Heading = p.Heading;
     /* harmony default export */    const ie = ae;