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

package/Dropdown.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = o => {
-            /******/ var t = o && o.__esModule ? 
+            /******/ var n = o && o.__esModule ? 
             /******/ () => o["default"]
             /******/ : () => o
             /******/;
-            e.d(t, {
-                a: t
+            e.d(n, {
+                a: n
             });
-            /******/            return t;
+            /******/            return n;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (o, t) => {
-            /******/ for (var n in t) {
-                /******/ if (e.o(t, n) && !e.o(o, n)) {
-                    /******/ Object.defineProperty(o, n, {
+        /******/ e.d = (o, n) => {
+            /******/ for (var r in n) {
+                /******/ if (e.o(n, r) && !e.o(o, r)) {
+                    /******/ Object.defineProperty(o, r, {
                         enumerable: true,
-                        get: t[n]
+                        get: n[r]
                     });
                     /******/                }
                 /******/            }
@@ -61,39 +61,24 @@
         e.r(o);
     // EXPORTS
         e.d(o, {
-        default: () => /* reexport */ U,
-        legacyRefMode: () => /* reexport */ N
+        default: () => /* reexport */ w
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var n =  e.n(t);
+    const n = require("react");
+    var r =  e.n(n);
     // CONCATENATED MODULE: external "prop-types"
-    const r = require("prop-types");
-    var i =  e.n(r);
-    // CONCATENATED MODULE: external "lodash/has"
-    const l = require("lodash/has");
-    var a =  e.n(l);
-    // CONCATENATED MODULE: external "lodash/includes"
-    const s = require("lodash/includes");
-    var c =  e.n(s);
-    // CONCATENATED MODULE: external "lodash/isEmpty"
-    const p = require("lodash/isEmpty");
-    // CONCATENATED MODULE: external "lodash/isFunction"
-    const u = require("lodash/isFunction");
-    var f =  e.n(u);
-    // CONCATENATED MODULE: external "lodash/keys"
-    const d = require("lodash/keys");
-    var v =  e.n(d);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const g = require("lodash/omit");
-    var y =  e.n(g);
+    const t = require("prop-types");
+    var a =  e.n(t);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const h = require("@splunk/ui-utils/id");
+    const l = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const b = require("@splunk/ui-utils/keyboard");
+    const i = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const O = require("@splunk/react-ui/Popover");
-    var m =  e.n(O);
+    const u = require("@splunk/react-ui/Popover");
+    var c =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
+    const s = require("@splunk/react-ui/useControlled");
+    var f =  e.n(s);
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -101,7 +86,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function w(e, o) {
+    function d(e, o) {
         if (e) {
             if (typeof e === "function") {
                 e(o);
@@ -114,121 +99,50 @@
         }
     }
     // CONCATENATED MODULE: ./src/Dropdown/Dropdown.tsx
-    function C(e) {
-        "@babel/helpers - typeof";
-        return C = "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;
-        }, C(e);
+    function p(e, o) {
+        return m(e) || b(e, o) || y(e, o) || v();
     }
-    function k(e, o) {
-        var t = Object.keys(e);
-        if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            o && (n = n.filter((function(o) {
-                return Object.getOwnPropertyDescriptor(e, o).enumerable;
-            }))), t.push.apply(t, n);
-        }
-        return t;
+    function v() {
+        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 R(e) {
-        for (var o = 1; o < arguments.length; o++) {
-            var t = null != arguments[o] ? arguments[o] : {};
-            o % 2 ? k(Object(t), !0).forEach((function(o) {
-                _(e, o, t[o]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : k(Object(t)).forEach((function(o) {
-                Object.defineProperty(e, o, Object.getOwnPropertyDescriptor(t, o));
-            }));
+    function y(e, o) {
+        if (e) {
+            if ("string" == typeof e) return g(e, o);
+            var n = {}.toString.call(e).slice(8, -1);
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? g(e, o) : void 0;
         }
-        return e;
-    }
-    function j(e, o) {
-        if (!(e instanceof o)) throw new TypeError("Cannot call a class as a function");
     }
-    function P(e, o) {
-        for (var t = 0; t < o.length; t++) {
-            var n = o[t];
-            n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
-            Object.defineProperty(e, F(n.key), n);
+    function g(e, o) {
+        (null == o || o > e.length) && (o = e.length);
+        for (var n = 0, r = Array(o); n < o; n++) {
+            r[n] = e[n];
         }
+        return r;
     }
-    function S(e, o, t) {
-        return o && P(e.prototype, o), t && P(e, t), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function q(e, o) {
-        if ("function" != typeof o && null !== o) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(o && o.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
+    function b(e, o) {
+        var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != n) {
+            var r, t, a, l, i = [], u = !0, c = !1;
+            try {
+                if (a = (n = n.call(e)).next, 0 === o) {
+                    if (Object(n) !== n) return;
+                    u = !1;
+                } else for (;!(u = (r = a.call(n)).done) && (i.push(r.value), i.length !== o); u = !0) {
+                }
+            } catch (e) {
+                c = !0, t = e;
+            } finally {
+                try {
+                    if (!u && null != n["return"] && (l = n["return"](), Object(l) !== l)) return;
+                } finally {
+                    if (c) throw t;
+                }
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), o && T(e, o);
-    }
-    function T(e, o) {
-        return T = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, o) {
-            return e.__proto__ = o, e;
-        }, T(e, o);
-    }
-    function E(e) {
-        var o = K();
-        return function() {
-            var t, n = M(e);
-            if (o) {
-                var r = M(this).constructor;
-                t = Reflect.construct(n, arguments, r);
-            } else t = n.apply(this, arguments);
-            return D(this, t);
-        };
-    }
-    function D(e, o) {
-        if (o && ("object" == C(o) || "function" == typeof o)) return o;
-        if (void 0 !== o) throw new TypeError("Derived constructors may only return object or undefined");
-        return I(e);
-    }
-    function I(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function K() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (K = function o() {
-            return !!e;
-        })();
-    }
-    function M(e) {
-        return M = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, M(e);
-    }
-    function _(e, o, t) {
-        return (o = F(o)) in e ? Object.defineProperty(e, o, {
-            value: t,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[o] = t, e;
-    }
-    function F(e) {
-        var o = A(e, "string");
-        return "symbol" == C(o) ? o : o + "";
-    }
-    function A(e, o) {
-        if ("object" != C(e) || !e) return e;
-        var t = e[Symbol.toPrimitive];
-        if (void 0 !== t) {
-            var n = t.call(e, o || "default");
-            if ("object" != C(n)) return n;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+            return i;
         }
-        return ("string" === o ? String : Number)(e);
+    }
+    function m(e) {
+        if (Array.isArray(e)) return e;
     }
     /** @public */
     /** @public */
@@ -236,231 +150,160 @@
     /** @public */
     /** @public */
     /** @public */
-    /** @public */
-    /** @public */    var x = [ "clickAway", "contentClick", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
-    var W = {
-        align: i().oneOf([ "center", "edge", "theme", "end" ]),
-        canCoverAnchor: i().bool,
-        children: i().oneOfType([ i().node, i().func ]),
-        closeReasons: i().arrayOf(i().oneOf(x)),
-        defaultPlacement: i().oneOf([ "above", "below", "left", "right", "vertical", "horizontal" ]),
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        focusToggleReasons: i().arrayOf(i().oneOf(x)),
-        inputId: i().string,
-        onRequestClose: i().func,
-        onRequestOpen: i().func,
-        open: i().bool,
-        openWithArrowKeys: i().bool,
-        repositionMode: i().oneOf([ "none", "flip", "any" ]),
-        retainFocus: i().bool,
-        takeFocus: i().bool,
-        toggle: i().element.isRequired
+    /** @public */    var k = [ "clickAway", "contentClick", "escapeKey", "offScreen", "tabKey", "toggleClick" ];
+    var C = [ "contentClick", "escapeKey", "tabKey", "toggleClick" ];
+    var h = {
+        align: a().oneOf([ "center", "edge", "end" ]),
+        canCoverAnchor: a().bool,
+        children: a().oneOfType([ a().node, a().func ]),
+        closeReasons: a().arrayOf(a().oneOf(k)),
+        defaultPlacement: a().oneOf([ "above", "below", "left", "right", "vertical", "horizontal" ]),
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        focusToggleReasons: a().arrayOf(a().oneOf(k)),
+        inputId: a().string,
+        onRequestClose: a().func,
+        onRequestOpen: a().func,
+        open: a().bool,
+        openWithArrowKeys: a().bool,
+        repositionMode: a().oneOf([ "none", "flip", "any" ]),
+        retainFocus: a().bool,
+        takeFocus: a().bool,
+        toggle: a().element.isRequired
     };
-    var B = {
-        align: "theme",
-        canCoverAnchor: true,
-        closeReasons: x,
-        defaultPlacement: "below",
-        focusToggleReasons: [ "contentClick", "escapeKey", "tabKey", "toggleClick" ],
-        repositionMode: "flip",
-        retainFocus: false,
-        openWithArrowKeys: false,
-        takeFocus: true
-    };
-    var N = Symbol("Dropdown legacy ref mode marker");
-    var z =  function(e) {
-        q(r, e);
-        var o = E(r);
+    function O(e) {
+        var o = e["aria-labelledby"], t = e.align, a = t === void 0 ? "center" : t, u = e.canCoverAnchor, s = u === void 0 ? true : u, v = e.children, y = e.closeReasons, g = y === void 0 ? k : y, b = e.defaultPlacement, m = b === void 0 ? "below" : b, h = e.elementRef, O = e.focusToggleReasons, w = O === void 0 ? C : O, S = e.inputId, R = e.open, A = e.openWithArrowKeys, q = e.onRequestClose, I = e.onRequestOpen, P = e.repositionMode, j = P === void 0 ? "flip" : P, K = e.retainFocus, M = K === void 0 ? false : K, D = e.takeFocus, T = D === void 0 ? true : D, E = e.toggle;
         // @docs-props-type DropdownPropsBase
-        /**
-   * Enumeration of the possible reasons for closing the Select.
-   * 'clickAway', 'escapeKey', and 'offScreen' are inherited from Popover, but repeated here for
-   * docs extraction.
-   */        function r(e) {
-            var t;
-            j(this, r);
-            t = o.call(this, e);
-            _(I(t), "controlledExternally", void 0);
-            _(I(t), "popoverId", void 0);
-            _(I(t), "toggleRef", null);
-            _(I(t), "toggleId", void 0);
-            _(I(t), "handleToggleMount", (function(e) {
-                t.toggleRef = e;
-                t.setState({
-                    anchor: e
+                var F = (0, n.useState)(null), N = p(F, 2), _ = N[0], x = N[1];
+        var W = (0, n.useState)(false), z = p(W, 2), U = z[0], V = z[1];
+        var $ = (0, n.useRef)(null);
+        var B = f()({
+            componentName: "Dropdown",
+            /* eslint-disable-next-line prefer-rest-params */
+            componentProps: arguments[0],
+            // see SUI-7028
+            defaultValuePropName: "defaultOpen",
+            valuePropName: "open"
+        });
+        var G = B ? R : U;
+        var H = (0, n.useState)((function() {
+            return {
+                popoverId: (0, l.createDOMID)("popover"),
+                toggleId: (0, l.createDOMID)("toggle")
+            };
+        })), J = p(H, 1), L = J[0], Q = L.popoverId, X = L.toggleId;
+        var Y = S || E.props.id || X;
+        var Z = (0, n.useCallback)((function(e) {
+            $.current = e;
+            x(e);
+            // TS: ref does not exist on React.ReactElement - technically, this is undocumented API
+                        d(E.ref, e);
+        }), [ E ]);
+        var ee = (0, n.useCallback)((function(e) {
+            var o, n;
+            (o = (n = E.props).onKeyDown) === null || o === void 0 ? void 0 : o.call(n, e);
+            if (!A) {
+                return;
+            }
+            var r = (0, i.keycode)(e.nativeEvent);
+            if (r === "up" || r === "down") {
+                e.preventDefault();
+                I === null || I === void 0 ? void 0 : I(e, {
+                    reason: "toggleKeydown"
                 });
-                if (t.props.toggle.type[N]) {
-                    // TS: assume that legacy ref mode toggles support elementRef
-                    w(t.props.toggle.props.elementRef, e);
-                } else {
-                    // TS: ref does not exist on React.ReactElement - technically, this is undocumented API
-                    w(t.props.toggle.ref, e);
+                if (!B) {
+                    V(true);
                 }
-            }));
-            _(I(t), "handleToggleClick", (function(e) {
-                var o, n;
-                (o = (n = t.props.toggle.props).onClick) === null || o === void 0 ? void 0 : o.call(n, e);
-                if (t.isOpen()) {
-                    t.handleRequestClose({
-                        reason: "toggleClick",
-                        event: e
-                    });
-                } else {
-                    var r, i;
-                    (r = (i = t.props).onRequestOpen) === null || r === void 0 ? void 0 : r.call(i, e, {
-                        reason: "toggleClick"
-                    });
-                    if (!t.isControlled()) {
-                        t.setState({
-                            open: true
-                        });
-                    }
-                }
-            }));
-            _(I(t), "handleToggleKeyDownOpen", (function(e) {
-                var o, n;
-                (o = (n = t.props.toggle.props).onKeyDown) === null || o === void 0 ? void 0 : o.call(n, e);
-                if (!t.props.openWithArrowKeys) {
-                    return;
-                }
-                var r = (0, b.keycode)(e.nativeEvent);
-                if (r === "up" || r === "down") {
-                    var i, l;
-                    e.preventDefault();
-                    (i = (l = t.props).onRequestOpen) === null || i === void 0 ? void 0 : i.call(l, e, {
-                        reason: "toggleKeydown"
-                    });
-                    if (!t.isControlled()) {
-                        t.setState({
-                            open: true
-                        });
+            }
+        }), [ B, A, I, E ]);
+        var oe = (0, n.useCallback)((function(e) {
+            var o = e.event, n = e.reason;
+            if (o && n === "clickAway") {
+                var r = o.target;
+                while (r) {
+                    // Ignore clicks on toggle.
+                    if (r.id === Y) {
+                        return;
                     }
+                    r = r.parentNode;
                 }
-            }));
-            _(I(t), "handleRequestClose", (function(e) {
-                var o = e.event, n = e.reason;
-                var r = t.props, i = r.closeReasons, l = r.focusToggleReasons, a = r.onRequestClose;
-                if (o && n === "clickAway") {
-                    var s = o.target;
-                    var p = t.props.inputId || t.props.toggle.props.id || t.toggleId;
-                    while (s) {
-                        // Ignore clicks on toggle.
-                        if (s.id === p) {
-                            return;
-                        }
-                        s = s.parentNode;
-                    }
+            }
+            if (G && g.includes(n)) {
+                if (w.includes(n)) {
+                    var t;
+                    (t = $.current) === null || t === void 0 ? void 0 : t.focus();
                 }
-                if (t.isOpen() && c()(i, n)) {
-                    if (c()(l, n)) {
-                        t.focus();
-                    }
-                    if (!t.isControlled()) {
-                        t.setState({
-                            open: false
-                        });
-                    }
-                    a === null || a === void 0 ? void 0 : a(e);
+                if (!B) {
+                    V(false);
                 }
-            }));
-            _(I(t), "handleContentClick", (function(e) {
-                t.handleRequestClose({
-                    reason: "contentClick",
+                q === null || q === void 0 ? void 0 : q(e);
+            }
+        }), [ g, w, B, G, q, Y ]);
+        var ne = (0, n.useCallback)((function(e) {
+            oe({
+                reason: "contentClick",
+                event: e
+            });
+        }), [ oe ]);
+        var re = (0, n.useCallback)((function(e) {
+            var o, n;
+            (o = (n = E.props).onClick) === null || o === void 0 ? void 0 : o.call(n, e);
+            if (G) {
+                oe({
+                    reason: "toggleClick",
                     event: e
                 });
-            }));
-            t.state = {
-                anchor: null,
-                open: false
-            };
-            t.controlledExternally = a()(e, "open");
-            t.popoverId = (0, h.createDOMID)("popover");
-            t.toggleId = (0, h.createDOMID)("toggle");
-            return t;
-        }
-        S(r, [ {
-            key: "componentDidUpdate",
-            value: function e() {
-                if (false) {}
-                var o = R({}, y()(this.props, v()(r.propTypes), "value", "id"));
-                if (false) {}
-            }
-        }, {
-            key: "isOpen",
-            value: function e() {
-                return this.isControlled() ? this.props.open : this.state.open;
-            }
-            /**
-     * Places focus on the toggle.
-     */        }, {
-            key: "focus",
-            value: function e() {
-                var o;
-                (o = this.toggleRef) === null || o === void 0 ? void 0 : o.focus();
-            }
-        }, {
-            key: "isControlled",
-            value: function e() {
-                return this.controlledExternally;
-            }
-        }, {
-            key: "renderToggle",
-            value: function e() {
-                var o;
-                
-                return (0, t.cloneElement)(this.props.toggle, (o = {
-                    onClick: this.handleToggleClick,
-                    onKeyDown: this.handleToggleKeyDownOpen
-                }, _(o, this.props.toggle.type[N] ? "elementRef" : "ref", this.handleToggleMount), 
-                _(o, "aria-controls", this.isOpen() ? this.popoverId : undefined), _(o, "aria-haspopup", this.props.toggle.props["aria-haspopup"] || true), 
-                _(o, "aria-expanded", this.isOpen()), _(o, "data-test", this.props.toggle.props["data-test"] || "dropdown"), 
-                _(o, "data-test-popover-id", this.popoverId), _(o, "id", this.props.inputId || this.props.toggle.props.id || this.toggleId), 
-                o));
-            }
-        }, {
-            key: "render",
-            value: function e() {
-                var o;
-                var t = this.props, r = t.align, i = t.canCoverAnchor, l = t.children, a = t.closeReasons, s = t.defaultPlacement, p = t.elementRef, u = t.repositionMode, d = t.retainFocus, v = t.takeFocus;
-                var g = this.state.anchor;
-                var y = this.handleRequestClose, h = this.handleContentClick;
-                var b = this.renderToggle();
-                
-                return n().createElement(n().Fragment, null, b,  n().createElement(m(), {
-                    align: r,
-                    open: !!g && this.isOpen(),
-                    autoCloseWhenOffScreen: c()(a, "offScreen"),
-                    anchor: g,
-                    canCoverAnchor: i,
-                    elementRef: p,
-                    retainFocus: d,
-                    defaultPlacement: s,
-                    onRequestClose: y,
-                    repositionMode: u,
-                    id: this.popoverId,
-                    "aria-labelledby": "".concat((o = this.props["aria-labelledby"]) !== null && o !== void 0 ? o : "", " ").concat(this.props.inputId || this.props.toggle.props.id || this.toggleId).trim(),
-                    takeFocus: v
-                }, f()(l) ? 
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-                function() {
-                    
-                    return n().createElement("div", {
-                        onClick: h
-                    }, l.apply(void 0, arguments));
-                } : 
-                
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-                n().createElement("div", {
-                    onClick: h
-                }, l)));
+            } else {
+                I === null || I === void 0 ? void 0 : I(e, {
+                    reason: "toggleClick"
+                });
+                if (!B) {
+                    V(true);
+                }
             }
-        } ]);
-        return r;
-    }(t.Component);
-    _(z, "possibleCloseReasons", x);
-    _(z, "propTypes", W);
-    _(z, "defaultProps", B);
-    /* harmony default export */    const U = z;
+        }), [ oe, B, G, I, E ]);
+        var te =  (0, n.cloneElement)(E, {
+            onClick: re,
+            onKeyDown: ee,
+            ref: Z,
+            "aria-controls": G ? Q : undefined,
+            "aria-haspopup": E.props["aria-haspopup"] || true,
+            "aria-expanded": G,
+            "data-test": E.props["data-test"] || "dropdown",
+            "data-test-popover-id": Q,
+            id: Y
+        });
+        
+        return r().createElement(r().Fragment, null, te,  r().createElement(c(), {
+            align: a,
+            open: !!_ && G,
+            autoCloseWhenOffScreen: g.includes("offScreen"),
+            anchor: _,
+            canCoverAnchor: s,
+            elementRef: h,
+            retainFocus: M,
+            defaultPlacement: m,
+            onRequestClose: oe,
+            repositionMode: j,
+            id: Q,
+            "aria-labelledby": "".concat(o !== null && o !== void 0 ? o : "", " ").concat(Y).trim(),
+            takeFocus: T
+        }, typeof v === "function" ? 
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        function() {
+            
+            return r().createElement("div", {
+                onClick: ne
+            }, v.apply(void 0, arguments));
+        } : 
+        
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+        r().createElement("div", {
+            onClick: ne
+        }, v)));
+    }
+    O.propTypes = h;
+    O.possibleCloseReasons = k;
+    /* harmony default export */    const w = O;
     // CONCATENATED MODULE: ./src/Dropdown/index.ts
     module.exports = o;
     /******/})();