@splunk/react-ui 4.43.0 → 5.0.0-beta.2

package/Search.js

@@ -61,61 +61,69 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        Divider: () => /* reexport */ g.Divider,
-        Heading: () => /* reexport */ g.Heading,
-        Option: () => /* reexport */ Y,
-        default: () => /* reexport */ be
+        Divider: () => /* reexport */ p.Divider,
+        Heading: () => /* reexport */ p.Heading,
+        Option: () => /* reexport */ D,
+        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 i =  e.n(o);
+    var a =  e.n(o);
     // CONCATENATED MODULE: external "lodash/extend"
-    const a = require("lodash/extend");
-    var u =  e.n(a);
-    // CONCATENATED MODULE: external "lodash/has"
-    const l = require("lodash/has");
-    var c =  e.n(l);
+    const i = require("lodash/extend");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "lodash/memoize"
-    const f = require("lodash/memoize");
-    var s =  e.n(f);
+    const u = require("lodash/memoize");
+    var c =  e.n(u);
     // CONCATENATED MODULE: external "lodash/omit"
-    const d = require("lodash/omit");
-    var v =  e.n(d);
+    const s = require("lodash/omit");
+    var f =  e.n(s);
     // CONCATENATED MODULE: external "lodash/pick"
-    const p = require("lodash/pick");
-    var b =  e.n(p);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const y = require("@splunk/ui-utils/id");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const m = require("@splunk/ui-utils/i18n");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const h = require("@splunk/ui-utils/keyboard");
+    const d = require("lodash/pick");
+    var v =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/react-ui/Menu"
-    const g = require("@splunk/react-ui/Menu");
-    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
-    const O = require("@splunk/react-ui/usePrevious");
-    var w =  e.n(O);
+    const p = require("@splunk/react-ui/Menu");
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const S = require("@splunk/react-ui/Popover");
-    var j =  e.n(S);
+    const b = require("@splunk/react-ui/Popover");
+    var m =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-ui/ResultsMenu"
-    const P = require("@splunk/react-ui/ResultsMenu");
-    var k =  e.n(P);
+    const y = require("@splunk/react-ui/ResultsMenu");
+    var g =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/react-ui/Text"
-    const C = require("@splunk/react-ui/Text");
-    var I =  e.n(C);
-    // CONCATENATED MODULE: ./src/Search/Option.tsx
-    function M(e) {
-        "@babel/helpers - typeof";
-        return M = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
-            return typeof e;
-        } : function(e) {
-            return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, M(e);
+    const h = require("@splunk/react-ui/Text");
+    var O =  e.n(h);
+    // 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");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
+    const P = require("@splunk/ui-utils/keyboard");
+    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+    /**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @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) {
+        if (e) {
+            if (typeof e === "function") {
+                e(n);
+            } else {
+                // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+                // the intention here is to signal "we will take care of setting 'current', not you".
+                e.current = n;
+ // eslint-disable-line no-param-reassign
+                        }
+        }
     }
+    // CONCATENATED MODULE: ./src/Search/Option.tsx
     function R() {
         return R = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
@@ -127,18 +135,18 @@
             return e;
         }, R.apply(null, arguments);
     }
-    function E(e, n) {
+    function M(e, n) {
         if (null == e) return {};
-        var r, t, o = q(e, n);
+        var r, t, o = I(e, n);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < i.length; t++) {
-                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            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]);
             }
         }
         return o;
     }
-    function q(e, n) {
+    function I(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -149,207 +157,111 @@
         }
         return r;
     }
-    function D(e, n) {
-        if (!(e instanceof n)) throw new TypeError("Cannot call a class as a function");
-    }
-    function x(e, n) {
-        for (var r = 0; r < n.length; r++) {
-            var t = n[r];
-            t.enumerable = t.enumerable || !1, t.configurable = !0, "value" in t && (t.writable = !0), 
-            Object.defineProperty(e, F(t.key), t);
-        }
-    }
-    function A(e, n, r) {
-        return n && x(e.prototype, n), r && x(e, r), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function B(e, n) {
-        if ("function" != typeof n && null !== n) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(n && n.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
-            }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), n && T(e, n);
-    }
-    function T(e, n) {
-        return T = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, n) {
-            return e.__proto__ = n, e;
-        }, T(e, n);
-    }
-    function _(e) {
-        var n = V();
-        return function() {
-            var r, t = K(e);
-            if (n) {
-                var o = K(this).constructor;
-                r = Reflect.construct(t, arguments, o);
-            } else r = t.apply(this, arguments);
-            return H(this, r);
-        };
-    }
-    function H(e, n) {
-        if (n && ("object" == M(n) || "function" == typeof n)) return n;
-        if (void 0 !== n) throw new TypeError("Derived constructors may only return object or undefined");
-        return L(e);
-    }
-    function L(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function V() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (V = function n() {
-            return !!e;
-        })();
-    }
-    function K(e) {
-        return K = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, K(e);
-    }
-    function N(e, n, r) {
-        return (n = F(n)) in e ? Object.defineProperty(e, n, {
-            value: r,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[n] = r, e;
-    }
-    function F(e) {
-        var n = W(e, "string");
-        return "symbol" == M(n) ? n : n + "";
-    }
-    function W(e, n) {
-        if ("object" != M(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var t = r.call(e, n || "default");
-            if ("object" != M(t)) return t;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
-        }
-        return ("string" === n ? String : Number)(e);
-    }
-    var z = {
+    var q = {
         /** @private */
-        active: i().bool,
-        description: i().string,
-        descriptionPosition: i().oneOf([ "right", "bottom" ]),
-        disabled: i().bool,
-        endAdornment: i().node,
-        icon: i().node,
-        label: i().string,
-        matchRanges: i().arrayOf(i().shape({
-            start: i().number.isRequired,
-            end: i().number.isRequired
+        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
         })),
-        onClick: i().func,
-        startAdornment: i().node,
-        truncate: i().bool,
-        value: i().string.isRequired
-    };
-    var U = {
-        active: false,
-        descriptionPosition: "bottom",
-        disabled: false,
-        truncate: false
+        onClick: a().func,
+        openInNewContext: a().bool,
+        startAdornment: a().node,
+        to: a().string,
+        truncate: a().bool,
+        value: a().string.isRequired
     };
     /**
- * An option within a `Search`. This inherits from
- * [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
- * so any elements passed to it must also be pure.
- */    var X =  function(e) {
-        B(r, e);
-        var n = _(r);
-        function r() {
-            var e;
-            D(this, r);
-            for (var t = arguments.length, o = new Array(t), i = 0; i < t; i++) {
-                o[i] = arguments[i];
+ * An option within a `Search`.
+ */    function A(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" ]);
+        // @docs-props-type OptionPropsBase
+                var O = (0, r.useCallback)((function(e) {
+            if (!l) {
+                d === null || d === void 0 ? void 0 : d(e, {
+                    to: m,
+                    value: g
+                });
             }
-            e = n.call.apply(n, [ this ].concat(o));
-            N(L(e), "item", null);
-            N(L(e), "handleClick", (function(n) {
-                var r = e.props, t = r.disabled, o = r.onClick, i = r.to, a = r.value;
-                if (!t) {
-                    o === null || o === void 0 ? void 0 : o(n, {
-                        to: i,
-                        value: a
-                    });
-                }
-            }));
-            return e;
+        }), [ l, d, m, g ]);
+        var S = (0, r.useCallback)((function(e) {
+            k(u, e);
+        }), [ u ]);
+        var w = s === undefined ? g : s;
+        
+        return t().createElement(p.Item, R({
+            active: n,
+            "data-test": "search-option",
+            "data-test-value": g,
+            description: o,
+            descriptionPosition: i,
+            disabled: l,
+            elementRef: S,
+            endAdornment: c,
+            matchRanges: f,
+            onClick: O,
+            openInNewContext: v,
+            startAdornment: b,
+            to: m,
+            truncate: y
+        }, h, {
+            role: "option"
+        }), w);
+    }
+    A.propTypes = q;
+    A.as = "Item";
+    /* harmony default export */    const D = A;
+    // 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;
         }
- // @docs-props-type OptionPropsBase
-        // TODO:(SUI-2802) This component remains a class instead of functional because of the Menu's `scrollIntoViewIfNeeded` behavior.
-                A(r, [ {
-            key: "scrollIntoViewIfNeeded",
-            // eslint-disable-next-line react/no-unused-class-component-methods
-            value: function e() {
-                var n;
-                (n = this.item) === null || n === void 0 ? void 0 : n.scrollIntoViewIfNeeded();
-            }
-        }, {
-            key: "render",
-            value: function e() {
-                var n = this;
-                var r = this.props, o = r.value, i = r.label, a = E(r, [ "value", "label" ]);
-                var u = i === undefined ? o : i;
-                
-                return t().createElement(g.Item, R({
-                    ref: function e(r) {
-                        n.item = r;
-                    },
-                    "data-test": "search-option",
-                    "data-test-value": o
-                }, a, {
-                    onClick: this.handleClick,
-                    role: "option"
-                }), u);
-            }
-        } ]);
-        return r;
-    }(r.PureComponent);
-    N(X, "propTypes", z);
-    N(X, "defaultProps", U);
-    N(X, "type", g.Item);
-    /* harmony default export */    const Y = X;
-    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
-    /**
- * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
- *
- * @param ref - The React callback or object ref. Can be `null` or `undefined`.
- * @param current - The new value of the ref.
- */
-    function $(e, n) {
-        if (e) {
-            if (typeof e === "function") {
-                e(n);
-            } else {
-                // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
-                // the intention here is to signal "we will take care of setting 'current', not you".
-                e.current = n;
- // eslint-disable-line no-param-reassign
-                        }
+        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;
+        }
+    };
+    // CONCATENATED MODULE: external "styled-components"
+    const T = require("styled-components");
+    var x =  e.n(T);
+    // CONCATENATED MODULE: external "@splunk/react-icons/Magnifier"
+    const H = require("@splunk/react-icons/Magnifier");
+    var B =  e.n(H);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const L = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/Search/SearchStyles.ts
+    var _ = x()(B()).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);
+    }));
     // CONCATENATED MODULE: ./src/Search/Search.tsx
-    function G(e) {
+    function N(e) {
         "@babel/helpers - typeof";
-        return G = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return N = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, G(e);
+        }, N(e);
     }
-    function J() {
-        return J = Object.assign ? Object.assign.bind() : function(e) {
+    function K() {
+        return K = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -357,9 +269,9 @@
                 }
             }
             return e;
-        }, J.apply(null, arguments);
+        }, K.apply(null, arguments);
     }
-    function Q(e, n) {
+    function V(e, n) {
         var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(e);
@@ -369,96 +281,96 @@
         }
         return r;
     }
-    function Z(e) {
+    function F(e) {
         for (var n = 1; n < arguments.length; n++) {
             var r = null != arguments[n] ? arguments[n] : {};
-            n % 2 ? Q(Object(r), !0).forEach((function(n) {
-                ee(e, n, r[n]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Q(Object(r)).forEach((function(n) {
+            n % 2 ? V(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.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
             }));
         }
         return e;
     }
-    function ee(e, n, r) {
-        return (n = ne(n)) in e ? Object.defineProperty(e, n, {
+    function W(e, n, r) {
+        return (n = $(n)) in e ? Object.defineProperty(e, n, {
             value: r,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[n] = r, e;
     }
-    function ne(e) {
-        var n = re(e, "string");
-        return "symbol" == G(n) ? n : n + "";
+    function $(e) {
+        var n = z(e, "string");
+        return "symbol" == N(n) ? n : n + "";
     }
-    function re(e, n) {
-        if ("object" != G(e) || !e) return e;
+    function z(e, n) {
+        if ("object" != N(e) || !e) return e;
         var r = e[Symbol.toPrimitive];
         if (void 0 !== r) {
             var t = r.call(e, n || "default");
-            if ("object" != G(t)) return t;
+            if ("object" != N(t)) return t;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === n ? String : Number)(e);
     }
-    function te(e, n) {
-        return le(e) || ue(e, n) || ie(e, n) || oe();
+    function U(e, n) {
+        return Q(e) || J(e, n) || Y(e, n) || X();
     }
-    function oe() {
+    function X() {
         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 ie(e, n) {
+    function Y(e, n) {
         if (e) {
-            if ("string" == typeof e) return ae(e, n);
+            if ("string" == typeof e) return G(e, n);
             var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? ae(e, n) : void 0;
+            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? G(e, n) : void 0;
         }
     }
-    function ae(e, n) {
+    function G(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var r = 0, t = Array(n); r < n; r++) {
             t[r] = e[r];
         }
         return t;
     }
-    function ue(e, n) {
+    function J(e, n) {
         var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != r) {
-            var t, o, i, a, u = [], l = !0, c = !1;
+            var t, o, a, i, l = [], u = !0, c = !1;
             try {
-                if (i = (r = r.call(e)).next, 0 === n) {
+                if (a = (r = r.call(e)).next, 0 === n) {
                     if (Object(r) !== r) return;
-                    l = !1;
-                } else for (;!(l = (t = i.call(r)).done) && (u.push(t.value), u.length !== n); l = !0) {
+                    u = !1;
+                } else for (;!(u = (t = a.call(r)).done) && (l.push(t.value), l.length !== n); u = !0) {
                 }
             } catch (e) {
                 c = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!u && null != r["return"] && (i = r["return"](), Object(i) !== i)) return;
                 } finally {
                     if (c) throw o;
                 }
             }
-            return u;
+            return l;
         }
     }
-    function le(e) {
+    function Q(e) {
         if (Array.isArray(e)) return e;
     }
-    function ce(e, n) {
+    function Z(e, n) {
         if (null == e) return {};
-        var r, t, o = fe(e, n);
+        var r, t, o = ee(e, n);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < i.length; t++) {
-                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            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]);
             }
         }
         return o;
     }
-    function fe(e, n) {
+    function ee(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -471,89 +383,90 @@
     }
     /** @public */
     /** @public */
-    /** @public */    var se = {
-        animateLoading: i().bool,
-        children: i().node,
-        defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
-        defaultValue: i().string,
-        describedBy: i().string,
-        disabled: i().bool,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        error: i().bool,
-        footerMessage: i().node,
-        inline: i().bool,
-        inputRef: i().oneOfType([ i().func, i().object ]),
-        isLoadingOptions: i().bool,
-        labelledBy: i().string,
-        loadingMessage: i().node,
-        menuStyle: i().object,
-        name: i().string,
-        noOptionsMessage: i().node,
-        onBlur: i().func,
-        onChange: i().func,
-        onClose: i().func,
-        onFocus: i().func,
-        onKeyDown: i().func,
-        onOpen: i().func,
-        onScroll: i().func,
-        onSelect: i().func,
-        placeholder: i().string,
-        value: i().string
+    /** @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
     };
-    function de(e, n) {
+    function re(e, n) {
         var r = n.clientX, t = n.clientY;
-        var o = e.getBoundingClientRect(), i = o.top, a = o.left, u = o.bottom, l = o.right;
-        return r > a && r < l && t > i && t < u;
+        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 ve = s()((function(e) {
+    var te = c()((function(e) {
         var n = e.anchorWidth, r = e.maxHeight, t = e.menuStyle;
-        return u()({
+        return l()({
             maxHeight: r,
             overflow: "auto",
             width: Math.max(n !== null && n !== void 0 ? n : 0, 200)
         }, t);
     }));
-    function pe(e) {
-        var n = e.animateLoading, o = n === void 0 ? false : n, i = e.children, a = e.defaultPlacement, u = e.defaultValue, l = e.describedBy, f = e.disabled, s = f === void 0 ? false : f, d = e.elementRef, p = e.error, g = p === void 0 ? false : p, O = e.footerMessage, S = e.inline, P = S === void 0 ? false : S, C = e.inputRef, M = e.isLoadingOptions, R = M === void 0 ? false : M, E = e.labelledBy, q = e.loadingMessage, D = e.menuStyle, x = D === void 0 ? {} : D, A = e.name, B = e.noOptionsMessage, T = e.onChange, _ = e.onClose, H = e.onFocus, L = e.onKeyDown, V = e.onOpen, K = e.placeholder, N = K === void 0 ? (0, 
-        m._)("Search...") : K, F = e.value, W = ce(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 oe = (0, j._)("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, q = e.labelledBy, A = e.loadingMessage, D = e.menuStyle, T = D === void 0 ? {} : D, x = e.name, H = e.noOptionsMessage, B = e.onChange, L = e.onClose, N = e.onFocus, V = e.onKeyDown, W = e.onOpen, $ = e.placeholder, z = $ === void 0 ? (0, 
+        j._)("Search...") : $, 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 z = !!i || R;
+                var G = !!a || I;
         // state
-                var U = (0, r.useState)(0), X = te(U, 2), Y = X[0], G = X[1];
-        var Q = (0, r.useState)(false), ee = te(Q, 2), ne = ee[0], re = ee[1];
-        var oe = (0, r.useState)(undefined), ie = te(oe, 2), ae = ie[0], ue = ie[1];
-        var le = (0, r.useState)(u || ""), fe = te(le, 2), se = fe[0], pe = fe[1];
-        var be = (0, r.useState)((function() {
+                var J = (0, r.useState)(0), Q = U(J, 2), ee = Q[0], ne = Q[1];
+        var ae = (0, r.useState)(false), ie = U(ae, 2), le = ie[0], ue = ie[1];
+        var ce = (0, r.useState)(undefined), se = U(ce, 2), fe = se[0], de = se[1];
+        var ve = (0, r.useState)(l || ""), pe = U(ve, 2), be = pe[0], me = pe[1];
+        var ye = (0, r.useState)((function() {
             return {
-                popoverId: (0, y.createDOMID)("popover"),
-                menuId: (0, y.createDOMID)("menu"),
-                activeItemId: (0, y.createDOMID)("active-item")
+                popoverId: (0, C.createDOMID)("popover"),
+                menuId: (0, C.createDOMID)("menu"),
+                activeItemId: (0, C.createDOMID)("active-item")
             };
-        })), ye = te(be, 1), me = ye[0], he = me.popoverId, ge = me.menuId, Oe = me.activeItemId;
+        })), ge = U(ye, 1), he = ge[0], Oe = he.popoverId, Se = he.menuId, we = he.activeItemId;
  // previous state
-                var we = w()(Y);
+                var Ce = w()(ee);
         // refs
-                var Se = (0, r.useRef)(null);
-        var je = (0, r.useRef)(null);
-        var Pe = (0, r.useRef)(F !== undefined && F !== null);
-        var ke = (0, r.useRef)([]);
-        var Ce = (0, r.useRef)(we);
+                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 Me = function e(n) {
-            $(Se, n);
-            $(d, n);
+        var qe = function e(n) {
+            k(je, n);
+            k(d, n);
         };
-        var Re = function e(n) {
-            $(je, n);
-            $(C, n);
+        var Ae = function e(n) {
+            k(Pe, n);
+            k(R, n);
         };
-        var Ee = function e() {
-            return Pe.current ? F : se;
+        var De = function e() {
+            return ke.current ? X : be;
         };
-        var qe = function e() {
-            var n = Ee();
-            var t = r.Children.toArray(i).filter(r.isValidElement);
-            var o = !ae && t.find((function(e) {
+        var Ee = function e() {
+            var n = De();
+            var t = r.Children.toArray(a).filter(r.isValidElement);
+            var o = !fe && t.find((function(e) {
                 return e.props.label !== undefined && e.props.value === n;
             }));
             if (o) {
@@ -561,45 +474,45 @@
             }
             return n;
         };
-        var De = function e() {
-            re(true);
-            G(-1);
-            V === null || V === void 0 ? void 0 : V();
+        var Te = function e() {
+            ue(true);
+            ne(-1);
+            W === null || W === void 0 ? void 0 : W();
         };
         var xe = function e() {
-            re(false);
-            Ce.current = null;
-            _ === null || _ === void 0 ? void 0 : _();
+            ue(false);
+            Me.current = null;
+            L === null || L === void 0 ? void 0 : L();
         };
-        var Ae = function e() {
+        var He = function e() {
             var n;
-            (n = je.current) === null || n === void 0 ? void 0 : n.focus();
+            (n = Pe.current) === null || n === void 0 ? void 0 : n.focus();
         };
         var Be = function e(n, r) {
-            De();
-            H === null || H === void 0 ? void 0 : H(n, r);
+            Te();
+            N === null || N === void 0 ? void 0 : N(n, r);
         };
-        var Te = function e(n, r) {
+        var Le = function e(n, r) {
             var t = r.value;
-            if (!Pe.current) {
-                pe(t);
+            if (!ke.current) {
+                me(t);
             }
-            G(-1);
-            ue(t);
-            T === null || T === void 0 ? void 0 : T(n, {
+            ne(-1);
+            de(t);
+            B === null || B === void 0 ? void 0 : B(n, {
                 value: t,
-                name: A
+                name: x
             });
         };
         var _e = function e(n, r) {
-            Te(n, Z({}, r));
-            Ae();
+            Le(n, F({}, r));
+            He();
             xe();
         };
-        var He = function e(n) {
-            var r = ke.current.length;
-            var t = (0, h.keycode)(n.nativeEvent);
-            if (ne) {
+        var Ne = function e(n) {
+            var r = Re.current.length;
+            var t = (0, P.keycode)(n.nativeEvent);
+            if (le) {
                 switch (t) {
                   case "enter":
                     {
@@ -607,7 +520,7 @@
                         // 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(Oe)) === null || o === void 0 ? void 0 : o.click();
+                                                (o = document.getElementById(we)) === null || o === void 0 ? void 0 : o.click();
                         break;
                     }
 
@@ -616,68 +529,70 @@
                     break;
 
                   case "down":
-                    G(Math.min(Y + 1, r - 1));
+                    ne(Math.min(ee + 1, r - 1));
                     break;
 
                   case "up":
-                    G(Math.max(Y - 1, 0));
+                    ne(Math.max(ee - 1, 0));
                     break;
 
                   default:
  // do nothing
                                 }
-            } else if ((0, h.addsCharacter)(n.nativeEvent) !== false || 
+            } else if ((0, P.addsCharacter)(n.nativeEvent) !== false || 
             // Safari 9.0 returns undefined
             t === "enter" || t === "backspace" || t === "down" || t === "up") {
-                De();
+                Te();
             }
-            L === null || L === void 0 ? void 0 : L(n);
+            V === null || V === void 0 ? void 0 : V(n);
         };
-        var Le = function e() {
-            if (!ne && !s) {
-                De();
+        var Ke = function e() {
+            if (!le && !s) {
+                Te();
             }
         };
         var Ve = function e(n) {
             var r = n.event, t = n.reason;
-            var o = t === "offScreen" || t === "escapeKey" || t === "clickAway" && Se.current && !de(Se.current, r);
+            var o = t === "offScreen" || t === "escapeKey" || t === "clickAway" && je.current && !re(je.current, r);
             if (o) {
                 xe();
             }
         };
-        var Ke = function e(n) {
-            if (Ce.current !== Y) {
-                n === null || n === void 0 ? void 0 : n.scrollIntoViewIfNeeded();
+        var Fe = function e(n) {
+            if (Me.current !== ee) {
+                if (n) {
+                    E(n);
+                }
             }
         };
-        var Ne = function e(n) {
-            var a = n.anchorWidth, u = n.maxHeight;
-            var l = r.Children.toArray(i).filter(r.isValidElement);
+        var We = function e(n) {
+            var i = n.anchorWidth, l = n.maxHeight;
+            var u = r.Children.toArray(a).filter(r.isValidElement);
             // Highlight Active
                         Ie.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 (z && ne) {
-                ke.current = l.map((function(e, n) {
+                        if (G && le) {
+                Re.current = u.map((function(e, n) {
+                    if (e.type.as !== "Item") {
+                        // ignore non-Option items such as Headings and Dividers
+                        return e;
+                    }
                     var t = function n(r, t) {
-                        var o, i;
-                        var a = (o = (i = e.props).onClick) === null || o === void 0 ? void 0 : o.call(i, r, t);
-                        if (a !== false) {
+                        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);
                         }
                     };
-                    if (!c()(e.props, "active")) {
-                        // ignore Headings and Dividers
-                        return e;
-                    }
-                    if (n === Y) {
+                    if (n === ee) {
                         if (!e.props.disabled) {
                             Ie.current = e.props.value;
                         }
                         
                         return (0, r.cloneElement)(e, {
-                            ref: Ke,
-                            id: Oe,
+                            elementRef: Fe,
+                            id: we,
                             onClick: t,
                             active: true
                         });
@@ -688,79 +603,85 @@
                     });
                 }));
             }
-            var f = ve({
-                anchorWidth: a,
-                maxHeight: u,
-                menuStyle: x
+            var c = te({
+                anchorWidth: i,
+                maxHeight: l,
+                menuStyle: T
             });
             
-            return t().createElement(k(), J({
-                style: f,
+            return t().createElement(g(), K({
+                style: c,
                 focusMode: "never",
-                isLoading: R
-            }, b()(W, "onScroll"), {
-                noOptionsMessage: B,
-                footerMessage: O,
+                isLoading: I
+            }, v()(Y, "onScroll"), {
+                noOptionsMessage: H,
+                footerMessage: y,
                 animateLoading: o,
-                loadingMessage: q,
-                menuId: ge
-            }), ke.current);
+                loadingMessage: A,
+                menuId: Se
+            }), Re.current);
         };
-        var Fe = Ee();
-        var We = qe();
-        var ze = ne && !!Se.current && z;
-        var Ue = z ? "combobox" : "searchbox";
-        var Xe = {
-            "aria-activedescendant": ze && Y > -1 ? Oe : undefined,
-            "aria-expanded": z ? ne && !!Se.current : undefined,
-            "aria-controls": ze ? ge : undefined
+        var $e = De();
+        var ze = Ee();
+        var Ue = le && !!je.current && G;
+        var Xe = G ? "combobox" : "searchbox";
+        var Ye = {
+            "aria-activedescendant": Ue && ee > -1 ? we : undefined,
+            "aria-expanded": G ? le && !!je.current : undefined,
+            "aria-controls": Ue ? Se : undefined
         };
+        var Ge =  t().createElement(_, {
+            $disabled: s,
+            "aria-label": oe,
+            "data-test": "search-icon"
+        });
         
-        return t().createElement(I(), J({
+        return t().createElement(O(), K({
             "data-test": "search"
-        }, v()(W, "onScroll"), {
-            appearance: "search",
+        }, f()(Y, "onScroll"), {
             autoCapitalize: "off",
             autoComplete: "off",
             autoCorrect: "off",
-            "data-test-popover-id": he,
-            "data-test-label": We,
-            "data-test-value": Fe,
-            "data-test-open": ze,
-            describedBy: l,
+            canClear: true,
+            "data-test-popover-id": Oe,
+            "data-test-label": ze,
+            "data-test-value": $e,
+            "data-test-open": Ue,
+            describedBy: u,
             disabled: s,
-            elementRef: Me,
-            error: g,
-            inline: P,
-            inputRef: Re,
-            labelledBy: E,
-            name: A,
+            elementRef: qe,
+            error: b,
+            inline: S,
+            inputRef: Ae,
+            labelledBy: q,
+            name: x,
             onFocus: Be,
-            onClick: Le,
-            onChange: Te,
-            onKeyDown: He,
-            placeholder: N,
+            onClick: Ke,
+            onChange: Le,
+            onKeyDown: Ne,
+            placeholder: z,
             spellCheck: false,
-            value: We,
-            role: Ue
-        }, Xe),  t().createElement(j(), {
+            startAdornment: Ge,
+            value: ze,
+            role: Xe
+        }, Ye),  t().createElement(m(), {
             anchor: function() {
-                return Se.current;
+                return je.current;
             }(),
             autoCloseWhenOffScreen: true,
             canCoverAnchor: false,
-            defaultPlacement: a,
-            id: he,
+            defaultPlacement: i,
+            id: Oe,
             onRequestClose: Ve,
-            open: ze,
+            open: Ue,
             repositionMode: "flip"
-        }, Ne));
+        }, We));
     }
-    pe.propTypes = se;
-    pe.Option = Y;
-    pe.Divider = g.Divider;
-    pe.Heading = g.Heading;
-    /* harmony default export */    const be = pe;
+    ae.propTypes = ne;
+    ae.Option = D;
+    ae.Divider = p.Divider;
+    ae.Heading = p.Heading;
+    /* harmony default export */    const ie = ae;
     // CONCATENATED MODULE: ./src/Search/index.ts
     module.exports = n;
     /******/})();