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

package/TabLayout.js

@@ -62,48 +62,48 @@
     // EXPORTS
         e.d(t, {
         Panel: () => /* reexport */ S,
-        default: () => /* reexport */ V
+        default: () => /* reexport */ M
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
     var r =  e.n(n);
     // 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 c = require("lodash/keys");
-    var u =  e.n(c);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const s = require("lodash/omit");
-    var p =  e.n(s);
+    const a = require("prop-types");
+    var l =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const f = require("@splunk/ui-utils/id");
+    const o = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: external "@splunk/react-ui/TabBar"
-    const d = require("@splunk/react-ui/TabBar");
-    var y =  e.n(d);
+    const i = require("@splunk/react-ui/TabBar");
+    var u =  e.n(i);
+    // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
+    const c = require("@splunk/react-ui/useControlled");
+    var s =  e.n(c);
+    // CONCATENATED MODULE: external "lodash/omit"
+    const d = require("lodash/omit");
+    var f =  e.n(d);
     // CONCATENATED MODULE: external "styled-components"
-    const b = require("styled-components");
-    var v =  e.n(b);
+    const v = require("styled-components");
+    var p =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const h = require("@splunk/themes");
+    const b = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/TabLayout/TabLayoutStyles.ts
-    var m = v().div.withConfig({
+    var y = p().div.withConfig({
         displayName: "TabLayoutStyles__StyledPanel",
         componentId: "lf0quy-0"
-    })([ "", "" ], h.mixins.reset("block"));
-    var g = v().div.withConfig({
+    })([ "", " ", "" ], b.mixins.reset("block"), (function(e) {
+        var t = e.$inset;
+        return t && (0, v.css)([ "padding:", ";" ], b.variables.spacingLarge);
+    }));
+    var m = p().div.withConfig({
         displayName: "TabLayoutStyles__Styled",
         componentId: "lf0quy-1"
-    })([ "text-align:center;margin-top:", ";", "" ], h.variables.spacingLarge, (function(e) {
+    })([ "text-align:center;margin-top:", ";", "" ], b.variables.spacingLarge, (function(e) {
         var t = e.$layout;
-        return t === "vertical" && (0, b.css)([ "display:flex;& > [role='tablist']{flex:0 0 auto;}& > ", "{width:100%;}" ], /* sc-sel */ m);
+        return t === "vertical" && (0, v.css)([ "display:flex;& > [role='tablist']{flex:0 0 auto;}& > ", "{width:100%;}" ], /* sc-sel */ y);
     }));
     // CONCATENATED MODULE: ./src/TabLayout/Panel.tsx
-    function O() {
-        return O = Object.assign ? Object.assign.bind() : function(e) {
+    function g() {
+        return g = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -111,20 +111,20 @@
                 }
             }
             return e;
-        }, O.apply(null, arguments);
+        }, g.apply(null, arguments);
     }
-    function P(e, t) {
+    function h(e, t) {
         if (null == e) return {};
-        var n, r, o = j(e, t);
+        var n, r, a = P(e, t);
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (r = 0; r < a.length; r++) {
-                n = a[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
+            var l = Object.getOwnPropertySymbols(e);
+            for (r = 0; r < l.length; r++) {
+                n = l[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
             }
         }
-        return o;
+        return a;
     }
-    function j(e, t) {
+    function P(e, t) {
         if (null == e) return {};
         var n = {};
         for (var r in e) {
@@ -135,40 +135,34 @@
         }
         return n;
     }
-    var w = {
-        children: a().node,
-        count: a().number,
-        disabled: a().bool,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        icon: a().node,
-        label: a().oneOfType([ a().string, a().element ]),
-        panelId: a().string.isRequired,
-        tooltip: a().node
+    var O = {
+        children: l().node,
+        count: l().number,
+        disabled: l().bool,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        icon: l().node,
+        inset: l().bool,
+        label: l().oneOfType([ l().string, l().element ]),
+        panelId: l().string.isRequired,
+        tooltip: l().node
     };
     function I(e) {
-        var t = e.children, n = e.disabled, o = n === void 0 ? false : n, a = e.elementRef, i = e.panelId, l = P(e, [ "children", "disabled", "elementRef", "panelId" ]);
+        var t = e.children, n = e.disabled, a = n === void 0 ? false : n, l = e.elementRef, o = e.inset, i = o === void 0 ? true : o, u = e.panelId, c = h(e, [ "children", "disabled", "elementRef", "inset", "panelId" ]);
         // @docs-props-type PanelPropsBase
                 
-        return r().createElement(m, O({
-            "data-test-panel-id": i,
+        return r().createElement(y, g({
+            $inset: i,
+            "data-test-panel-id": u,
             "data-test": "panel",
-            ref: a,
+            ref: l,
             role: "tabpanel"
-        }, p()(l, [ "icon", "label", "tooltip" ])), t);
+        }, f()(c, [ "icon", "label", "tooltip" ])), t);
     }
-    I.propTypes = w;
+    I.propTypes = O;
     /* harmony default export */    const S = I;
     // CONCATENATED MODULE: ./src/TabLayout/TabLayout.tsx
-    function T(e) {
-        "@babel/helpers - typeof";
-        return T = "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;
-        }, T(e);
-    }
-    function _() {
-        return _ = Object.assign ? Object.assign.bind() : function(e) {
+    function j() {
+        return j = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -176,219 +170,171 @@
                 }
             }
             return e;
-        }, _.apply(null, arguments);
+        }, j.apply(null, arguments);
     }
-    function C(e, t) {
-        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
+    function w(e, t) {
+        return E(e) || C(e, t) || T(e, t) || A();
+    }
+    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, t) {
-        for (var n = 0; n < t.length; n++) {
-            var r = t[n];
-            r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, L(r.key), r);
+    function T(e, t) {
+        if (e) {
+            if ("string" == typeof e) return q(e, t);
+            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) ? q(e, t) : void 0;
         }
     }
-    function q(e, t, n) {
-        return t && E(e.prototype, t), n && E(e, n), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
+    function q(e, t) {
+        (null == t || t > e.length) && (t = e.length);
+        for (var n = 0, r = Array(t); n < t; n++) {
+            r[n] = e[n];
+        }
+        return r;
     }
-    function k(e, t) {
-        if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(t && t.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
+    function C(e, t) {
+        var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != n) {
+            var r, a, l, o, i = [], u = !0, c = !1;
+            try {
+                if (l = (n = n.call(e)).next, 0 === t) {
+                    if (Object(n) !== n) return;
+                    u = !1;
+                } else for (;!(u = (r = l.call(n)).done) && (i.push(r.value), i.length !== t); u = !0) {
+                }
+            } catch (e) {
+                c = !0, a = e;
+            } finally {
+                try {
+                    if (!u && null != n["return"] && (o = n["return"](), Object(o) !== o)) return;
+                } finally {
+                    if (c) throw a;
+                }
             }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), t && x(e, t);
-    }
-    function x(e, t) {
-        return x = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, t) {
-            return e.__proto__ = t, e;
-        }, x(e, t);
-    }
-    function R(e) {
-        var t = D();
-        return function() {
-            var n, r = M(e);
-            if (t) {
-                var o = M(this).constructor;
-                n = Reflect.construct(r, arguments, o);
-            } else n = r.apply(this, arguments);
-            return A(this, n);
-        };
-    }
-    function A(e, t) {
-        if (t && ("object" == T(t) || "function" == typeof t)) return t;
-        if (void 0 !== t) throw new TypeError("Derived constructors may only return object or undefined");
-        return z(e);
-    }
-    function z(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function D() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (D = function t() {
-            return !!e;
-        })();
-    }
-    function M(e) {
-        return M = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, M(e);
+            return i;
+        }
     }
-    function B(e, t, n) {
-        return (t = L(t)) in e ? Object.defineProperty(e, t, {
-            value: n,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[t] = n, e;
+    function E(e) {
+        if (Array.isArray(e)) return e;
     }
-    function L(e) {
-        var t = N(e, "string");
-        return "symbol" == T(t) ? t : t + "";
+    function _(e, t) {
+        if (null == e) return {};
+        var n, r, a = k(e, t);
+        if (Object.getOwnPropertySymbols) {
+            var l = Object.getOwnPropertySymbols(e);
+            for (r = 0; r < l.length; r++) {
+                n = l[r], t.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
+            }
+        }
+        return a;
     }
-    function N(e, t) {
-        if ("object" != T(e) || !e) return e;
-        var n = e[Symbol.toPrimitive];
-        if (void 0 !== n) {
-            var r = n.call(e, t || "default");
-            if ("object" != T(r)) return r;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+    function k(e, t) {
+        if (null == e) return {};
+        var n = {};
+        for (var r in e) {
+            if ({}.hasOwnProperty.call(e, r)) {
+                if (t.includes(r)) continue;
+                n[r] = e[r];
+            }
         }
-        return ("string" === t ? String : Number)(e);
+        return n;
     }
-    /** @public */    var W = {
-        autoActivate: a().bool,
-        activePanelId: a().string,
-        appearance: a().oneOf([ "navigation", "context" ]),
-        children: a().node,
-        count: a().number,
-        defaultActivePanelId: a().string,
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        iconSize: a().oneOf([ "inline", "small", "large" ]),
-        layout: a().oneOf([ "horizontal", "vertical" ]),
-        onChange: a().func,
-        tabWidth: a().number
-    };
-    var $ = {
-        appearance: "navigation",
-        layout: "horizontal"
+    /** @public */    var R = {
+        autoActivate: l().bool,
+        activePanelId: l().string,
+        children: l().node,
+        defaultActivePanelId: l().string,
+        elementRef: l().oneOfType([ l().func, l().object ]),
+        iconPosition: l().oneOf([ "above", "left" ]),
+        layout: l().oneOf([ "horizontal", "vertical" ]),
+        onChange: l().func,
+        tabWidth: l().number
     };
     /**
  * The `TabLayout` is a group of managed `Panels`. Only one panel can be open at a time.
  * `TabLayout` supports both the controlled and uncontrolled patterns.
- */    var U =  function(e) {
-        k(o, e);
-        var t = R(o);
+ */    function x(e) {
+        var t = e.autoActivate, a = e.activePanelId, l = e.children, i = e.defaultActivePanelId, c = e.elementRef, d = e.iconPosition, f = e.layout, v = f === void 0 ? "horizontal" : f, p = e.onChange, b = e.tabWidth, y = _(e, [ "autoActivate", "activePanelId", "children", "defaultActivePanelId", "elementRef", "iconPosition", "layout", "onChange", "tabWidth" ]);
         // @docs-props-type TabLayoutPropsBase
-                function o(e) {
-            var n;
-            C(this, o);
-            n = t.call(this, e);
-            B(z(n), "controlledExternally", void 0);
-            B(z(n), "guid", void 0);
-            B(z(n), "handleChange", (function(e, t) {
-                var r, o;
-                var a = t.selectedTabId;
-                if (!n.isControlled()) {
-                    n.setState({
-                        activePanelId: a
+                var g = s()({
+            componentName: "TabLayout",
+            /* eslint-disable-next-line prefer-rest-params */
+            componentProps: arguments[0],
+            // see SUI-7028
+            defaultValuePropName: "defaultActivePanelId",
+            valuePropName: "activePanelId"
+        });
+        var h = (0, n.useState)(), P = w(h, 2), O = P[0], I = P[1];
+        var S = (0, n.useState)(g ? undefined : i), A = w(S, 2), T = A[0], q = A[1];
+ // Could use activePanelIdProp for isControlled route but chose not to b/c we always favor direct prop access in below logic in that scenario
+                var C = (0, n.useMemo)((function() {
+            return g ? a : T;
+        }), [ g, a, T ]);
+        var E = (0, n.useState)((0, o.createGUID)()), k = w(E, 1), R = k[0];
+        var x = (0, n.useCallback)((function(e, t) {
+            var n = t.selectedTabId;
+            if (!g) {
+                q(n);
+            }
+            p === null || p === void 0 ? void 0 : p(e, {
+                activePanelId: n
+            });
+        }), [ g, p ]);
+        var M = (0, n.useMemo)((function() {
+            var e = null;
+            var t = n.Children.toArray(l).filter(n.isValidElement).map((function(t) {
+                var a = t.props;
+                var l = "".concat(R, "-").concat(a.panelId);
+                var o = "".concat(R, "-").concat(a.panelId, "-tab");
+                if (a.panelId === C) {
+                    e =  (0, n.cloneElement)(t, {
+                        "aria-labelledby": o,
+                        id: l
                     });
                 }
-                (r = (o = n.props).onChange) === null || r === void 0 ? void 0 : r.call(o, e, {
-                    activePanelId: a
-                });
+                var i = {};
+                // tell TS that PanelProps can contain `data-title`
+                                var c = a["data-title"];
+                if (c != null) {
+                    i["data-title"] = c;
+                }
+                
+                return r().createElement(u().Tab, j({
+                    count: a.count,
+                    icon: a.icon,
+                    key: a.panelId,
+                    label: a.label,
+                    tabId: a.panelId,
+                    id: o,
+                    ariaControls: l,
+                    tooltip: a.tooltip,
+                    disabled: a.disabled
+                }, i));
             }));
-            n.controlledExternally = l()(e, "activePanelId");
-            n.guid = (0, f.createDOMID)();
-            if (!n.isControlled()) {
-                n.state = {
-                    activePanelId: e.defaultActivePanelId
-                };
-            }
+            I(e);
+            return t;
+        }), [ C, l, R ]);
+        (0, n.useEffect)((function() {
             if (false) {}
-            return n;
-        }
-        q(o, [ {
-            key: "componentDidUpdate",
-            value: function e(t) {
-                if (false) {}
-                if (false) {}
-            }
-        }, {
-            key: "isControlled",
-            value: function e() {
-                return this.controlledExternally;
-            }
-        }, {
-            key: "render",
-            value: function e() {
-                var t = this;
-                var a = this.props, i = a.children, l = a.layout;
-                var c = this.isControlled() ? this.props.activePanelId : this.state.activePanelId;
-                var s;
-                var f = n.Children.toArray(i).filter(n.isValidElement).map((function(e) {
-                    var o = e.props;
-                    var a = "".concat(t.guid, "-").concat(o.panelId);
-                    var i = "".concat(t.guid, "-").concat(o.panelId, "-tab");
-                    if (o.panelId === c) {
-                        s =  (0, n.cloneElement)(e, {
-                            "aria-labelledby": i,
-                            id: a
-                        });
-                    }
-                    var l = {};
-                    // tell TS that PanelProps can contain `data-title`
-                                        var u = o["data-title"];
-                    if (u != null) {
-                        l["data-title"] = u;
-                    }
-                    
-                    return r().createElement(y().Tab, _({
-                        count: o.count,
-                        icon: o.icon,
-                        key: o.panelId,
-                        label: o.label,
-                        tabId: o.panelId,
-                        id: i,
-                        ariaControls: a,
-                        tooltip: o.tooltip,
-                        disabled: o.disabled
-                    }, l));
-                }));
-                if (false) {}
-                
-                return r().createElement(g, _({
-                    "data-test-active-panel-id": c,
-                    "data-test": "tab-layout",
-                    ref: this.props.elementRef,
-                    $layout: l
-                }, p()(this.props, u()(o.propTypes))),  r().createElement(y(), {
-                    autoActivate: this.props.autoActivate,
-                    activeTabId: c,
-                    appearance: this.props.appearance,
-                    iconPosition: this.props.iconPosition,
-                    iconSize: this.props.iconSize,
-                    layout: this.props.layout,
-                    onChange: this.handleChange,
-                    tabWidth: this.props.tabWidth
-                }, f), s);
-            }
-        } ]);
-        return o;
-    }(n.Component);
-    B(U, "propTypes", W);
-    B(U, "defaultProps", $);
-    B(U, "Panel", S);
-    /* harmony default export */    const V = U;
+        }), [ O ]);
+        
+        return r().createElement(m, j({
+            "data-test-active-panel-id": C,
+            "data-test": "tab-layout",
+            ref: c,
+            $layout: v
+        }, y),  r().createElement(u(), {
+            autoActivate: t,
+            activeTabId: C,
+            iconPosition: d,
+            layout: v,
+            onChange: x,
+            tabWidth: b
+        }, M), O);
+    }
+    x.Panel = S;
+    x.propTypes = R;
+    /* harmony default export */    const M = x;
     // CONCATENATED MODULE: ./src/TabLayout/index.ts
     module.exports = t;
     /******/})();