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

package/Accordion.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = n => {
-            /******/ var t = n && n.__esModule ? 
+            /******/ var r = n && n.__esModule ? 
             /******/ () => n["default"]
             /******/ : () => n
             /******/;
-            e.d(t, {
-                a: t
+            e.d(r, {
+                a: r
             });
-            /******/            return t;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (n, t) => {
-            /******/ for (var r in t) {
-                /******/ if (e.o(t, r) && !e.o(n, r)) {
-                    /******/ Object.defineProperty(n, r, {
+        /******/ e.d = (n, r) => {
+            /******/ for (var t in r) {
+                /******/ if (e.o(r, t) && !e.o(n, t)) {
+                    /******/ Object.defineProperty(n, t, {
                         enumerable: true,
-                        get: t[r]
+                        get: r[t]
                     });
                     /******/                }
                 /******/            }
@@ -61,314 +61,256 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        Panel: () => /* reexport */ j,
-        default: () => /* reexport */ L
+        Panel: () => /* reexport */ O,
+        default: () => /* reexport */ V
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var r =  e.n(t);
+    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/has"
-    const i = require("lodash/has");
-    var l =  e.n(i);
-    // CONCATENATED MODULE: external "lodash/keys"
-    const u = require("lodash/keys");
+    const a = require("prop-types");
+    var o =  e.n(a);
+    // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
+    const l = require("@splunk/react-ui/useControlled");
+    var i =  e.n(l);
+    // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
+    const u = require("@splunk/react-ui/usePrevious");
     var c =  e.n(u);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const s = require("lodash/omit");
-    var f =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-ui/CollapsiblePanel"
-    const p = require("@splunk/react-ui/CollapsiblePanel");
-    var d =  e.n(p);
+    const s = require("@splunk/react-ui/CollapsiblePanel");
+    var f =  e.n(s);
     // CONCATENATED MODULE: ./src/Accordion/AccordionContext.tsx
-    var y =  (0, t.createContext)({});
-    y.displayName = "Accordion";
-    /* harmony default export */    const v = y;
+    var d =  (0, r.createContext)({});
+    d.displayName = "Accordion";
+    /* harmony default export */    const p = d;
     // CONCATENATED MODULE: ./src/Accordion/Panel.tsx
-    function b() {
-        return b = 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 t = arguments[n];
-                for (var r in t) {
-                    ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
+                var r = arguments[n];
+                for (var t in r) {
+                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
                 }
             }
             return e;
-        }, b.apply(null, arguments);
+        }, v.apply(null, arguments);
     }
-    function h(e, n) {
+    function y(e, n) {
         if (null == e) return {};
-        var t, r, o = m(e, n);
+        var r, t, a = m(e, n);
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (r = 0; r < a.length; r++) {
-                t = a[r], n.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+            var o = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < o.length; t++) {
+                r = o[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return o;
+        return a;
     }
     function m(e, n) {
         if (null == e) return {};
-        var t = {};
-        for (var r in e) {
-            if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
-                t[r] = e[r];
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
             }
         }
-        return t;
+        return r;
     }
-    var P = {
-        description: a().string,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        inset: a().bool,
-        panelId: a().any.isRequired,
-        title: a().node.isRequired
+    var b = {
+        description: o().string,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        inset: o().bool,
+        panelId: o().any.isRequired,
+        title: o().node.isRequired
     };
-    var O = {
+    var h = {
         flexShrink: 1
     };
     /**
  * `Accordion.Panel` operates as a container component for content in an `Accordion`.
  */    function g(e) {
-        var n = e.panelId, o = e.inset, a = h(e, [ "panelId", "inset" ]);
+        var n = e.panelId, a = e.inset, o = y(e, [ "panelId", "inset" ]);
         // @docs-props-type AccordionPanelPropsBase
-                var i = (0, t.useContext)(y), l = i.onChange, u = i.openPanelId, c = i.inset;
+                var l = (0, r.useContext)(d), i = l.onChange, u = l.openPanelId, c = l.inset;
         var s = u === n;
-        var f = o !== undefined ? o : c;
+        var p = a !== undefined ? a : c;
         // Props are different based on controlled/uncontrolled
         // For controlled, onChange required prop for controlled cases and must be defined.
-                var p = l ? {
-            onChange: l,
+                var m = i ? {
+            onChange: i,
             open: s
         } : {
             onChange: undefined
         };
         
-        return r().createElement(d(), b({
+        return t().createElement(f(), v({
             panelId: n,
             "data-test": "panel",
-            inset: f,
+            inset: p,
             "data-test-panel-id": n,
-            style: O
-        }, a, p));
+            style: h
+        }, o, m));
     }
-    g.propTypes = P;
-    /* harmony default export */    const j = g;
+    g.propTypes = b;
+    /* harmony default export */    const O = g;
     // CONCATENATED MODULE: external "styled-components"
-    const w = require("styled-components");
-    var C =  e.n(w);
+    const P = require("styled-components");
+    var I =  e.n(P);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const I = require("@splunk/react-ui/Box");
-    var S =  e.n(I);
+    const j = require("@splunk/react-ui/Box");
+    var S =  e.n(j);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const _ = require("@splunk/themes");
+    const C = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Accordion/AccordionStyles.ts
-    var x = C()(S()).withConfig({
+    var w = I()(S()).withConfig({
         displayName: "AccordionStyles__StyledBox",
         componentId: "m39hyh-0"
-    })([ "", ";flex-direction:column;margin-bottom:0;" ], _.mixins.reset("flex"));
+    })([ "", ";flex-direction:column;margin-bottom:0;" ], C.mixins.reset("flex"));
     // CONCATENATED MODULE: ./src/Accordion/Accordion.tsx
-    function E(e) {
-        "@babel/helpers - typeof";
-        return E = "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;
-        }, E(e);
-    }
     function q() {
         return q = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
-                var t = arguments[n];
-                for (var r in t) {
-                    ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
+                var r = arguments[n];
+                for (var t in r) {
+                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
                 }
             }
             return e;
         }, q.apply(null, arguments);
     }
-    function T(e, n) {
-        if (!(e instanceof n)) throw new TypeError("Cannot call a class as a function");
+    function x(e, n) {
+        return T(e) || R(e, n) || E(e, n) || A();
     }
-    function k(e, n) {
-        for (var t = 0; t < n.length; t++) {
-            var r = n[t];
-            r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, F(r.key), r);
+    function A() {
+        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 E(e, n) {
+        if (e) {
+            if ("string" == typeof e) return k(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) ? k(e, n) : void 0;
         }
     }
-    function R(e, n, t) {
-        return n && k(e.prototype, n), t && k(e, t), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
+    function k(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 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
+    function R(e, n) {
+        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != r) {
+            var t, a, o, l, i = [], u = !0, c = !1;
+            try {
+                if (o = (r = r.call(e)).next, 0 === n) {
+                    if (Object(r) !== r) return;
+                    u = !1;
+                } else for (;!(u = (t = o.call(r)).done) && (i.push(t.value), i.length !== n); u = !0) {
+                }
+            } catch (e) {
+                c = !0, a = e;
+            } finally {
+                try {
+                    if (!u && null != r["return"] && (l = r["return"](), Object(l) !== l)) return;
+                } finally {
+                    if (c) throw a;
+                }
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), n && A(e, n);
-    }
-    function A(e, n) {
-        return A = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, n) {
-            return e.__proto__ = n, e;
-        }, A(e, n);
-    }
-    function M(e) {
-        var n = U();
-        return function() {
-            var t, r = V(e);
-            if (n) {
-                var o = V(this).constructor;
-                t = Reflect.construct(r, arguments, o);
-            } else t = r.apply(this, arguments);
-            return N(this, t);
-        };
-    }
-    function N(e, n) {
-        if (n && ("object" == E(n) || "function" == typeof n)) return n;
-        if (void 0 !== n) throw new TypeError("Derived constructors may only return object or undefined");
-        return D(e);
-    }
-    function D(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function U() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (U = function n() {
-            return !!e;
-        })();
-    }
-    function V(e) {
-        return V = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, V(e);
+            return i;
+        }
     }
-    function z(e, n, t) {
-        return (n = F(n)) in e ? Object.defineProperty(e, n, {
-            value: t,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[n] = t, e;
+    function T(e) {
+        if (Array.isArray(e)) return e;
     }
-    function F(e) {
-        var n = G(e, "string");
-        return "symbol" == E(n) ? n : n + "";
+    function _(e, n) {
+        if (null == e) return {};
+        var r, t, a = M(e, n);
+        if (Object.getOwnPropertySymbols) {
+            var o = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < o.length; t++) {
+                r = o[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+            }
+        }
+        return a;
     }
-    function G(e, n) {
-        if ("object" != E(e) || !e) return e;
-        var t = e[Symbol.toPrimitive];
-        if (void 0 !== t) {
-            var r = t.call(e, n || "default");
-            if ("object" != E(r)) return r;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+    function M(e, n) {
+        if (null == e) return {};
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
+            }
         }
-        return ("string" === n ? String : Number)(e);
+        return r;
     }
-    /** @public */    var H = {
-        children: a().node,
-        defaultOpenPanelId: a().any,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        inset: a().bool,
-        onChange: a().func,
-        openPanelId: a().any
-    };
-    var J = {
-        inset: true
+    /** @public */    var N = {
+        children: o().node,
+        defaultOpenPanelId: o().any,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        inset: o().bool,
+        onChange: o().func,
+        openPanelId: o().any
     };
     /**
  * @deprecated
  * Accordion has been deprecated and will be removed in a future major version. Use Collapsible Panel's SingleOpenPanelGroup API instead.
- */    var K =  function(e) {
-        B(o, e);
-        var n = M(o);
+ */    function B(e) {
+        var n = e.children, a = e.defaultOpenPanelId, o = e.elementRef, l = e.inset, u = l === void 0 ? true : l, s = e.onChange, f = e.openPanelId, d = _(e, [ "children", "defaultOpenPanelId", "elementRef", "inset", "onChange", "openPanelId" ]);
         // @docs-props-type AccordionPropsBase
-                function o(e) {
-            var t;
-            T(this, o);
-            t = n.call(this, e);
-            z(D(t), "controlledExternally", void 0);
-            z(D(t), "getCurrentOpenPanel", (function() {
-                var e = t.isControlled() ? t.props.openPanelId : t.state.openPanelId;
-                return e;
-            }));
-            z(D(t), "handleChange", (function(e, n) {
-                var r, o;
-                var a = n.panelId, i = n.reason;
-                var l = t.getCurrentOpenPanel();
-                var u = l === a ? undefined : a;
-                if (!t.isControlled()) {
-                    t.setState({
-                        openPanelId: u
-                    });
-                }
-                (r = (o = t.props).onChange) === null || r === void 0 ? void 0 : r.call(o, e, {
-                    event: e,
-                    panelId: u,
-                    reason: i
-                });
-            }));
-            t.controlledExternally = l()(e, "openPanelId");
-            if (!t.isControlled()) {
-                t.state = {
-                    openPanelId: e.defaultOpenPanelId
-                };
-            }
+                (0, r.useEffect)((function() {
             if (false) {}
-            return t;
-        }
-        R(o, [ {
-            key: "componentDidUpdate",
-            value: function e(n) {
-                if (false) {}
-                if (false) {}
-            }
-        }, {
-            key: "isControlled",
-            value: function e() {
-                return this.controlledExternally;
-            }
-        }, {
-            key: "render",
-            value: function e() {
-                if (false) {}
-                var n = this.props, a = n.children, i = n.elementRef, l = n.inset;
-                var u = this.isControlled() ? this.props.openPanelId : this.state.openPanelId;
-                var s = t.Children.toArray(a).filter(t.isValidElement);
+        }), []);
+        var v = c()(a);
+        (0, r.useEffect)((function() {
+            if (false) {}
+        }), [ a, v ]);
+        var y = i()({
+            componentName: "Accordion",
+            /* eslint-disable-next-line prefer-rest-params */
+            componentProps: arguments[0],
+            // see SUI-7028
+            defaultValuePropName: "defaultOpenPanelId",
+            valuePropName: "openPanelId"
+        });
+        var m = (0, r.useState)(a), b = x(m, 2), h = b[0], g = b[1];
+        var O = y ? f : h;
+        var P = r.Children.toArray(n).filter(r.isValidElement);
  // remove false, null, 0, etc
-                                
-                return r().createElement(x, q({
-                    "data-test": "accordion",
-                    "data-test-open-panel-id": u,
-                    elementRef: i
-                }, f()(this.props, c()(o.propTypes))),  r().createElement(v.Provider, {
-                    // eslint-disable-next-line react/jsx-no-constructed-context-values
-                    value: {
-                        onChange: this.handleChange,
-                        openPanelId: u,
-                        inset: l
-                    }
-                }, s));
+                var I = (0, r.useCallback)((function(e, n) {
+            var r = n.panelId, t = n.reason;
+            // if the open panel is clicked on, collapse it
+                        var a = O === r ? undefined : r;
+            if (!y) {
+                g(a);
             }
-        } ]);
-        return o;
-    }(t.Component);
-    z(K, "propTypes", H);
-    z(K, "defaultProps", J);
-    z(K, "Panel", j);
-    /* harmony default export */    const L = K;
+            s === null || s === void 0 ? void 0 : s(e, {
+                event: e,
+                panelId: a,
+                reason: t
+            });
+        }), [ y, s, O ]);
+        var j = (0, r.useMemo)((function() {
+            return {
+                inset: u,
+                onChange: I,
+                openPanelId: O
+            };
+        }), [ I, u, O ]);
+        
+        return t().createElement(w, q({
+            "data-test": "accordion",
+            "data-test-open-panel-id": O,
+            elementRef: o
+        }, d),  t().createElement(p.Provider, {
+            value: j
+        }, P));
+    }
+    B.propTypes = N;
+    B.Panel = O;
+    /* harmony default export */    const V = B;
     // CONCATENATED MODULE: ./src/Accordion/index.ts
     module.exports = n;
     /******/})();

package/Animation.js

@@ -51,8 +51,8 @@
         useAnimation: () => /* reexport */ s,
         useAnimationTransition: () => /* reexport */ b
     });
-    // CONCATENATED MODULE: external "react-spring"
-    const t = require("react-spring");
+    // CONCATENATED MODULE: external "@react-spring/web"
+    const t = require("@react-spring/web");
     // CONCATENATED MODULE: external "@splunk/react-ui/AnimationToggle"
     const n = require("@splunk/react-ui/AnimationToggle");
     // CONCATENATED MODULE: ./src/Animation/Animation.tsx

package/Button.js

@@ -97,7 +97,7 @@
     var x = y()(h()).withConfig({
         displayName: "ButtonStyles__StyledButtonSimple",
         componentId: "eqxqs2-0"
-    })([ "vertical-align:middle;text-decoration:none;white-space:nowrap;flex-grow:1;min-width:", ";max-width:100%;min-height:", ";line-height:20px;padding:", " ", ";", " ", " &[data-inline]{display:inline-flex;}" ], w.variables.inputHeight, w.variables.inputHeight, w.variables.spacingXSmall, w.variables.spacingSmall, (function(e) {
+    })([ "vertical-align:middle;text-decoration:none;white-space:nowrap;flex-grow:1;min-width:", ";max-width:100%;min-height:", ";padding:2px ", ";line-height:20px;", " ", " &[data-inline]{display:inline-flex;}" ], w.variables.inputHeight, w.variables.inputHeight, w.variables.spacingSmall, (function(e) {
         var n = e.$inline, t = e.append, r = e.prepend;
         return !n && !t && !r && (0, m.css)([ "width:100%;" ]);
     }), (function(e) {
@@ -151,7 +151,7 @@
     }
     /** @public */    var k = {
         action: i().string,
-        appearance: i().oneOf([ "default", "secondary", "primary", "destructive", "subtle" ]),
+        appearance: i().oneOf([ "default", "secondary", "primary", "destructive", "destructiveSecondary", "standalone", "subtle" ]),
         append: i().bool,
         children: i().node,
         /** @private An additional className to add to the button. */
@@ -190,11 +190,11 @@
             R = true;
             H = typeof _ === "string" ? _ : I;
         }
-        var X = !!(g && !k && !N && !c);
+        var z = !!(g && !k && !N && !c);
         
         return r().createElement(x, q({
             $inline: w,
-            $isIconOnly: X,
+            $isIconOnly: z,
             appearance: l,
             append: s,
             "aria-haspopup": N || undefined,

package/ButtonGroup.js

@@ -80,8 +80,8 @@
         componentId: "sc-14fs2xs-0"
     })([ "", " position:relative;" ], u.mixins.reset("inline-flex"));
     // CONCATENATED MODULE: ./src/ButtonGroup/ButtonGroup.tsx
-    function p() {
-        return p = Object.assign ? Object.assign.bind() : function(e) {
+    function c() {
+        return c = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var n = arguments[r];
                 for (var t in n) {
@@ -89,11 +89,11 @@
                 }
             }
             return e;
-        }, p.apply(null, arguments);
+        }, c.apply(null, arguments);
     }
-    function c(e, r) {
+    function f(e, r) {
         if (null == e) return {};
-        var n, t, o = f(e, r);
+        var n, t, o = p(e, r);
         if (Object.getOwnPropertySymbols) {
             var l = Object.getOwnPropertySymbols(e);
             for (t = 0; t < l.length; t++) {
@@ -102,7 +102,7 @@
         }
         return o;
     }
-    function f(e, r) {
+    function p(e, r) {
         if (null == e) return {};
         var n = {};
         for (var t in e) {
@@ -118,7 +118,7 @@
         elementRef: l().oneOfType([ l().func, l().object ])
     };
     function y(e) {
-        var r = e.children, o = e.elementRef, l = c(e, [ "children", "elementRef" ]);
+        var r = e.children, o = e.elementRef, l = f(e, [ "children", "elementRef" ]);
         // @docs-props-type ButtonGroupPropsBase
                 var i = n.Children.toArray(r).filter(n.isValidElement).map((function(e, r, t) {
             var o = t.length;
@@ -126,15 +126,14 @@
             return (0, n.cloneElement)(e, {
                 prepend: r > 0,
                 append: r < o - 1,
-                inline: false,
-                role: e.props && e.props.role || "menuitem"
+                inline: false
             });
         }));
         
-        return t().createElement(s, p({
+        return t().createElement(s, c({
             "data-test": "button-group",
             ref: o,
-            role: "menubar"
+            role: "group"
         }, l), i);
     }
     y.propTypes = d;