@splunk/react-page 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -1,6 +1,15 @@
 Change Log
 ============
 
+7.1.0 - July 8, 2024
+----------
+New Features:
+* Added a new `onLayoutStart` callback (SPL-254150). 
+* `AppBar` and `SplunkBar` default placeholder elements are now exported (SPL-254150).
+
+API Changes:
+* Internal changes to built output to support multiple exports in future versions. (SUI-6279)
+
 7.0.0 - February 6, 2024
 ----------
 API Changes: 

package/{lib/index.js → index.js}

@@ -61,72 +61,61 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
+        AppBar: () => /* reexport */ y,
+        SplunkBar: () => /* reexport */ b,
         default: () => /* binding */ X
     });
     // CONCATENATED MODULE: external "react-dom"
     const r = require("react-dom");
-    // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var a =  e.n(t);
-    // CONCATENATED MODULE: external "scriptjs"
-    const i = require("scriptjs");
-    var o =  e.n(i);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
-    const l = require("@splunk/react-ui/Layer");
-    // CONCATENATED MODULE: external "@splunk/splunk-utils/url"
-    const u = require("@splunk/splunk-utils/url");
-    // CONCATENATED MODULE: external "@splunk/themes/SplunkThemeProvider"
-    const c = require("@splunk/themes/SplunkThemeProvider");
-    var d =  e.n(c);
     // CONCATENATED MODULE: external "styled-components"
-    const p = require("styled-components");
-    var s =  e.n(p);
+    const t = require("styled-components");
+    var a =  e.n(t);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const v = require("@splunk/themes");
+    const i = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/LoadingStyles.js
-    function f() {
-        var e = k([ "\n    animation-name: ", ";\n    animation-duration: 1.4s;\n    animation-iteration-count: infinite;\n    animation-fill-mode: both;\n    background-color: ", ";\n    width: 10px;\n    height: 10px;\n    border-radius: 5px;\n    display: inline-block;\n    margin-right: ", ";\n\n    &:nth-child(2) {\n        animation-delay: 0.2s;\n    }\n\n    &:nth-child(3) {\n        animation-delay: 0.4s;\n    }\n" ]);
-        f = function n() {
+    function o() {
+        var e = s([ "\n    animation-name: ", ";\n    animation-duration: 1.4s;\n    animation-iteration-count: infinite;\n    animation-fill-mode: both;\n    background-color: ", ";\n    width: 10px;\n    height: 10px;\n    border-radius: 5px;\n    display: inline-block;\n    margin-right: ", ";\n\n    &:nth-child(2) {\n        animation-delay: 0.2s;\n    }\n\n    &:nth-child(3) {\n        animation-delay: 0.4s;\n    }\n" ]);
+        o = function n() {
             return e;
         };
         return e;
     }
-    function m() {
-        var e = k([ "\n    color: ", ";\n    padding-top: 30vh;\n    text-align: center;\n    min-height: 400px;\n" ]);
-        m = function n() {
+    function l() {
+        var e = s([ "\n    color: ", ";\n    padding-top: 30vh;\n    text-align: center;\n    min-height: 400px;\n" ]);
+        l = function n() {
             return e;
         };
         return e;
     }
-    function h() {
-        var e = k([ "\n    background-color: ", ";\n    min-height: ", "px;\n" ]);
-        h = function n() {
+    function u() {
+        var e = s([ "\n    background-color: ", ";\n    min-height: ", "px;\n" ]);
+        u = function n() {
             return e;
         };
         return e;
     }
-    function b() {
-        var e = k([ "\n    padding: 0;\n    background-color: ", ";\n    height: ", "px;\n" ]);
-        b = function n() {
+    function c() {
+        var e = s([ "\n    padding: 0;\n    background-color: ", ";\n    height: ", "px;\n" ]);
+        c = function n() {
             return e;
         };
         return e;
     }
-    function y() {
-        var e = k([ "\n    background-color: ", ";\n    position: fixed;\n    opacity: 1;\n    z-index: 10000;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n" ]);
-        y = function n() {
+    function d() {
+        var e = s([ "\n    background-color: ", ";\n    position: fixed;\n    opacity: 1;\n    z-index: 10000;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n" ]);
+        d = function n() {
             return e;
         };
         return e;
     }
-    function g() {
-        var e = k([ "\n    0% {\n        opacity: 0.2;\n    }\n\n    20% {\n        opacity: 1;\n    }\n\n    100% {\n        opacity: 0.2;\n    }\n" ]);
-        g = function n() {
+    function p() {
+        var e = s([ "\n    0% {\n        opacity: 0.2;\n    }\n\n    20% {\n        opacity: 1;\n    }\n\n    100% {\n        opacity: 0.2;\n    }\n" ]);
+        p = function n() {
             return e;
         };
         return e;
     }
-    function k(e, n) {
+    function s(e, n) {
         if (!n) {
             n = e.slice(0);
         }
@@ -136,23 +125,36 @@
             }
         }));
     }
-    var S = 45;
-    var j = 34;
-    var w = (0, p.keyframes)(g());
-    var E = s().div(y(), v.variables.backgroundColorPage);
-    var C = s().div(b(), (0, v.pick)({
-        prisma: v.variables.backgroundColorSection,
-        enterprise: v.variables.gray20
-    }), j);
-    var B = s().div(h(), (0, v.pick)({
-        prisma: v.variables.backgroundColorPopup,
-        enterprise: v.variables.gray30
-    }), S);
-    var x = s().div(m(), v.variables.contentColorInverted);
-    var q = s().div(f(), w, v.variables.neutral500, (0, v.pick)({
-        prisma: v.variables.spacingMedium,
-        enterprise: v.variables.spacingHalf
+    var v = 45;
+    var f = 34;
+    var h = (0, t.keyframes)(p());
+    var m = a().div(d(), i.variables.backgroundColorPage);
+    var b = a().div(c(), (0, i.pick)({
+        prisma: i.variables.backgroundColorSection,
+        enterprise: i.variables.gray20
+    }), f);
+    var y = a().div(u(), (0, i.pick)({
+        prisma: i.variables.backgroundColorPopup,
+        enterprise: i.variables.gray30
+    }), v);
+    var g = a().div(l(), i.variables.contentColorInverted);
+    var k = a().div(o(), h, i.variables.neutral500, (0, i.pick)({
+        prisma: i.variables.spacingMedium,
+        enterprise: i.variables.spacingHalf
     }));
+    // CONCATENATED MODULE: external "react"
+    const S = require("react");
+    var j =  e.n(S);
+    // CONCATENATED MODULE: external "scriptjs"
+    const w = require("scriptjs");
+    var C =  e.n(w);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
+    const B = require("@splunk/react-ui/Layer");
+    // CONCATENATED MODULE: external "@splunk/splunk-utils/url"
+    const E = require("@splunk/splunk-utils/url");
+    // CONCATENATED MODULE: external "@splunk/themes/SplunkThemeProvider"
+    const x = require("@splunk/themes/SplunkThemeProvider");
+    var q =  e.n(x);
     // CONCATENATED MODULE: external "prop-types"
     const O = require("prop-types");
     var A =  e.n(O);
@@ -160,9 +162,9 @@
     const P = require("@splunk/react-ui/ScreenReaderContent");
     var F =  e.n(P);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const _ = require("@splunk/ui-utils/i18n");
+    const L = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: ./src/Loading.jsx
-    var L = {
+    var _ = {
         hideAppBar: A().bool,
         hideChrome: A().bool,
         hideSplunkBar: A().bool,
@@ -173,16 +175,16 @@
         hideAppBar: false,
         hideChrome: false,
         hideSplunkBar: false,
-        AppBarFallback: B,
-        SplunkBarFallback: C
+        AppBarFallback: y,
+        SplunkBarFallback: b
     };
     function H(e) {
-        var n = e.hideAppBar, r = e.hideChrome, t = e.hideSplunkBar, i = e.SplunkBarFallback, o = e.AppBarFallback;
+        var n = e.hideAppBar, r = e.hideChrome, t = e.hideSplunkBar, a = e.SplunkBarFallback, i = e.AppBarFallback;
         
-        return a().createElement(E, null, !r && !t &&  a().createElement(i, null), !r && !n &&  a().createElement(o, null),  a().createElement(x, null,  a().createElement(q, null),  a().createElement(q, null),  a().createElement(q, null),  a().createElement(F(), null, (0, 
-        _._)("Loading"))));
+        return j().createElement(m, null, !r && !t &&  j().createElement(a, null), !r && !n &&  j().createElement(i, null),  j().createElement(g, null,  j().createElement(k, null),  j().createElement(k, null),  j().createElement(k, null),  j().createElement(F(), null, (0, 
+        L._)("Loading"))));
     }
-    H.propTypes = L;
+    H.propTypes = _;
     H.defaultProps = T;
     /* harmony default export */    const M = H;
     // CONCATENATED MODULE: ./src/baseLayout.jsx
@@ -226,15 +228,15 @@
  */    function N(e, n) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, t = r.loader, a = t === void 0 ? "scriptjs" : t;
         var i = e === "dark" ? R : I;
-        var l = (0, u.createStaticURL)(i);
+        var o = (0, E.createStaticURL)(i);
         if (a === "scriptjs") {
-            o()(l, (function() {
+            C()(o, (function() {
                 // eslint-disable-next-line no-underscore-dangle
                 n(window.__splunk_layout__);
             }));
         } else if (a === "requirejs") {
             if (window.requirejs) {
-                window.requirejs([ l ], n);
+                window.requirejs([ o ], n);
             } else {
                 throw new Error('Error in react-page: options.loader = "requirejs" was set but window.requirejs does not exist.');
             }
@@ -274,9 +276,9 @@
  * @private
  */    function J(e, n, r) {
         var t = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-        var i = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-        var o = t ?  a().createElement(l.LayerStackGlobalProvider, null,  a().createElement(d(), i, e)) :  a().createElement(d(), i, e);
-        return n(o, r);
+        var a = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+        var i = t ?  j().createElement(B.LayerStackGlobalProvider, null,  j().createElement(q(), a, e)) :  j().createElement(q(), a, e);
+        return n(i, r);
     }
     /**
  * Renders a React element into the Layout API.
@@ -304,50 +306,54 @@
  * @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
  */    function K(e, n) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-        var t = r.useGlobalLayerStack, i = t === void 0 ? true : t, o = r.pageTitle, l = r.theme, u = l === void 0 ? "light" : l, c = r.loader, p = c === void 0 ? "scriptjs" : c, s = z(r, [ "useGlobalLayerStack", "pageTitle", "theme", "loader" ]);
-        if (o) {
-            document.title = o;
+        var t = r.useGlobalLayerStack, a = t === void 0 ? true : t, i = r.pageTitle, o = r.theme, l = o === void 0 ? "light" : o, u = r.loader, c = u === void 0 ? "scriptjs" : u, d = z(r, [ "useGlobalLayerStack", "pageTitle", "theme", "loader" ]);
+        if (i) {
+            document.title = i;
         }
-        var v = s.hideChrome, f = s.hideAppBar, m = s.hideSplunkBar, h = s.SplunkBarFallback, b = h === void 0 ? C : h, y = s.AppBarFallback, g = y === void 0 ? B : y, k = s.lazyLoadLayout, w = k === void 0 ? false : k, E = s.onLayoutComplete;
+        var p = d.hideChrome, s = d.hideAppBar, h = d.hideSplunkBar, m = d.SplunkBarFallback, g = m === void 0 ? b : m, k = d.AppBarFallback, S = k === void 0 ? y : k, w = d.lazyLoadLayout, C = w === void 0 ? false : w, B = d.onLayoutComplete, E = d.onLayoutStart;
         var x = document.createElement("div");
-        var q = document.createElement("div");
+        var O = document.createElement("div");
+        E === null || E === void 0 ? void 0 : E({
+            headerContainer: O,
+            bodyContainer: x
+        });
  // The "theme" in enterprise used to be "enterprise" instead of "light"...
-                var O = u === "light" || u === "enterprise" ? "light" : "dark";
-        var A = {
+                var A = l === "light" || l === "enterprise" ? "light" : "dark";
+        var P = {
             family: "enterprise",
-            colorScheme: O,
+            colorScheme: A,
             density: "comfortable"
         };
-        var P;
         var F;
-        if (w) {
+        var L;
+        if (C) {
             // render the React app immediately without waiting for layout API
-            if (!v) {
-                document.body.appendChild(q);
-                F = n( a().createElement(a().Fragment, null, !m &&  a().createElement(b, null), !f &&  a().createElement(g, null)), q);
+            if (!p) {
+                document.body.appendChild(O);
+                L = n( j().createElement(j().Fragment, null, !h &&  j().createElement(g, null), !s &&  j().createElement(S, null)), O);
  // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
-                                var _ = q.offsetHeight;
-                var L = D(q, {
-                    hideSplunkBar: m,
-                    hideAppBar: f,
+                                var _ = O.offsetHeight;
+                var T = D(O, {
+                    hideSplunkBar: h,
+                    hideAppBar: s,
                     headerHeight: _,
-                    AppBarFallback: g,
-                    SplunkBarFallback: b
+                    AppBarFallback: S,
+                    SplunkBarFallback: g
                 });
-                q.style.height = "".concat(_, "px");
-                q.style.background = "".concat(L);
+                O.style.height = "".concat(_, "px");
+                O.style.background = "".concat(T);
             }
             document.body.appendChild(x);
-            P = J(e, n, x, i, A);
+            F = J(e, n, x, a, P);
         } else {
             document.body.appendChild(x);
-            P = n( a().createElement(d(), A,  a().createElement(M, s)), x);
+            F = n( j().createElement(q(), P,  j().createElement(M, d)), x);
         }
-        N(u, (function(r) {
+        N(l, (function(r) {
             var t;
             if (r) {
-                t = r.create(s).getContainerElement();
-                if (s.layout === "fixed") {
+                t = r.create(d).getContainerElement();
+                if (d.layout === "fixed") {
                     // the above create method adds flex: 1 0 0
                     // IE 11 disregards 0px shorthand for flex-basis component.
                     // flex-basis 0% is better than 0px because css minification can remove px
@@ -371,29 +377,29 @@
                 t = document.createElement("div");
                 document.body.appendChild(t);
             }
-            if (w) {
-                if (!v) {
+            if (C) {
+                if (!p) {
                     // replace placeholder nav bar with real nav bar
-                    F.unmount(q);
-                    var a = document.querySelector(U);
-                    var o = (!v && !m ? j : 0) + (!v && !f ? S : 0);
+                    L.unmount(O);
+                    var i = document.querySelector(U);
+                    var o = (!p && !h ? f : 0) + (!p && !s ? v : 0);
  // set a min-height for basic nav bar components and auto height for any additional components like global banner
-                                        q.style.minHeight = "".concat(o, "px");
-                    q.style.height = "auto";
-                    q.appendChild(a);
+                                        O.style.minHeight = "".concat(o, "px");
+                    O.style.height = "auto";
+                    O.appendChild(i);
                 }
                 t.appendChild(x);
-                E === null || E === void 0 ? void 0 : E();
+                B === null || B === void 0 ? void 0 : B();
             } else {
                 setTimeout((function() {
-                    P.unmount(x);
-                    P = J(e, n, x, i, A);
+                    F.unmount(x);
+                    F = J(e, n, x, a, P);
                     t.appendChild(x);
-                    E === null || E === void 0 ? void 0 : E();
+                    B === null || B === void 0 ? void 0 : B();
                 }), 30);
             }
         }), {
-            loader: p
+            loader: c
         });
     }
     /* harmony default export */    const Q = K;
@@ -429,6 +435,7 @@
  * @param {element} [options.SplunkBarFallback = SplunkBar] - A React element used as a placeholder for the splunk bar while the navigation bar is loading.
  * @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
  * @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
+ * @param {function} [options.onLayoutStart] - A callback function which executes once the layout starts to render
  */    function W(e, n) {
         Q(e, V, n);
     }

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@splunk/react-page",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "Load React components into the latest layout from Splunk Enterprise",
-  "main": "lib/index.js",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
   "scripts": {
@@ -22,9 +21,9 @@
     "test:cypress:ci": "node src/tests/run-cypress-tests.js"
   },
   "dependencies": {
-    "@splunk/react-ui": "^4.25.0",
-    "@splunk/splunk-utils": "^3.0.0",
-    "@splunk/themes": "^0.16.4",
+    "@splunk/react-ui": "^4.33.0",
+    "@splunk/splunk-utils": "^3.1.0",
+    "@splunk/themes": "^0.19.0",
     "@splunk/ui-utils": "^1.6.0",
     "prop-types": "^15.6.2",
     "scriptjs": "^2.5.8"