@splunk/react-page 8.1.0 → 8.2.0

package/18.js

@@ -61,145 +61,201 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        default: () => /* binding */ W
+        default: () => /* binding */ se
     });
     // CONCATENATED MODULE: external "react-dom/client"
     const r = require("react-dom/client");
-    // CONCATENATED MODULE: external "react"
-    const t = require("react");
+    // CONCATENATED MODULE: external "@babel/runtime/helpers/objectWithoutProperties"
+    const t = require("@babel/runtime/helpers/objectWithoutProperties");
     var a =  e.n(t);
+    // CONCATENATED MODULE: external "@babel/runtime/helpers/defineProperty"
+    const o = require("@babel/runtime/helpers/defineProperty");
+    var i =  e.n(o);
+    // CONCATENATED MODULE: external "@babel/runtime/helpers/asyncToGenerator"
+    const l = require("@babel/runtime/helpers/asyncToGenerator");
+    var u =  e.n(l);
+    // CONCATENATED MODULE: external "@babel/runtime/regenerator"
+    const c = require("@babel/runtime/regenerator");
+    var d =  e.n(c);
+    // CONCATENATED MODULE: external "react"
+    const s = require("react");
+    var p =  e.n(s);
     // CONCATENATED MODULE: external "scriptjs"
-    const i = require("scriptjs");
-    var o =  e.n(i);
+    const v = require("scriptjs");
+    var f =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
-    const l = require("@splunk/react-ui/Layer");
+    const h = require("@splunk/react-ui/Layer");
     // CONCATENATED MODULE: external "@splunk/splunk-utils/url"
-    const u = require("@splunk/splunk-utils/url");
+    const m = require("@splunk/splunk-utils/url");
     // CONCATENATED MODULE: external "@splunk/themes/SplunkThemeProvider"
-    const c = require("@splunk/themes/SplunkThemeProvider");
-    var d =  e.n(c);
+    const b = require("@splunk/themes/SplunkThemeProvider");
+    var y =  e.n(b);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/boolean"
+    const g = require("@splunk/ui-utils/boolean");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const k = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/splunk-utils/fetch"
+    const w = require("@splunk/splunk-utils/fetch");
+    // CONCATENATED MODULE: external "prop-types"
+    const j = require("prop-types");
+    var S =  e.n(j);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+    const E = require("@splunk/react-ui/ScreenReaderContent");
+    var O =  e.n(E);
+    // CONCATENATED MODULE: external "@babel/runtime/helpers/taggedTemplateLiteral"
+    const q = require("@babel/runtime/helpers/taggedTemplateLiteral");
+    var x =  e.n(q);
     // CONCATENATED MODULE: external "styled-components"
-    const p = require("styled-components");
-    var s =  e.n(p);
+    const C = require("styled-components");
+    var B =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const v = require("@splunk/themes");
+    const P = 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 L() {
+        var e = x()([ "\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" ]);
+        L = 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 _() {
+        var e = x()([ "\n    color: ", ";\n    padding-top: 30vh;\n    text-align: center;\n    min-height: 400px;\n" ]);
+        _ = function n() {
             return e;
         };
         return e;
     }
-    function h() {
-        var e = k([ "\n    background-color: ", ";\n    min-height: ", "px;\n" ]);
-        h = function n() {
+    function T() {
+        var e = x()([ "\n    background-color: ", ";\n    min-height: ", "px;\n" ]);
+        T = function n() {
             return e;
         };
         return e;
     }
-    function y() {
-        var e = k([ "\n    padding: 0;\n    background-color: ", ";\n    height: ", "px;\n" ]);
-        y = function n() {
+    function F() {
+        var e = x()([ "\n    padding: 0;\n    background-color: ", ";\n    height: ", "px;\n" ]);
+        F = function n() {
             return e;
         };
         return e;
     }
-    function b() {
-        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" ]);
-        b = function n() {
+    function A() {
+        var e = x()([ "\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" ]);
+        A = 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 D() {
+        var e = x()([ "\n    0% {\n        opacity: 0.2;\n    }\n\n    20% {\n        opacity: 1;\n    }\n\n    100% {\n        opacity: 0.2;\n    }\n" ]);
+        D = function n() {
             return e;
         };
         return e;
     }
-    function k(e, n) {
-        return n || (n = e.slice(0)), Object.freeze(Object.defineProperties(e, {
-            raw: {
-                value: Object.freeze(n)
-            }
-        }));
-    }
-    var S = 45;
-    var w = 34;
-    var E = (0, p.keyframes)(g());
-    var j = s().div(b(), v.variables.backgroundColorPage);
-    var C = s().div(y(), (0, v.pick)({
-        prisma: v.variables.backgroundColorSection,
-        enterprise: v.variables.gray20
-    }), w);
-    var x = s().div(h(), (0, v.pick)({
-        prisma: v.variables.backgroundColorPopup,
-        enterprise: v.variables.gray30
-    }), S);
-    var q = s().div(m(), v.variables.contentColorInverted);
-    var B = s().div(f(), E, v.variables.neutral500, (0, v.pick)({
-        prisma: v.variables.spacingMedium,
-        enterprise: v.variables.spacingSmall
+    var R = 45;
+    var G = 34;
+    var H = (0, C.keyframes)(D());
+    var M = B().div(A(), P.variables.backgroundColorPage);
+    var z = B().div(F(), (0, P.pick)({
+        prisma: P.variables.backgroundColorSection,
+        enterprise: P.variables.gray20
+    }), G);
+    var U = B().div(T(), (0, P.pick)({
+        prisma: P.variables.backgroundColorPopup,
+        enterprise: P.variables.gray30
+    }), R);
+    var I = B().div(_(), P.variables.contentColorInverted);
+    var W = B().div(L(), H, P.variables.neutral500, (0, P.pick)({
+        prisma: P.variables.spacingMedium,
+        enterprise: P.variables.spacingSmall
     }));
-    // CONCATENATED MODULE: external "prop-types"
-    const O = require("prop-types");
-    var P =  e.n(O);
-    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const F = require("@splunk/react-ui/ScreenReaderContent");
-    var L =  e.n(F);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const _ = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: ./src/Loading.jsx
-    var A = {
-        hideAppBar: P().bool,
-        hideChrome: P().bool,
-        hideSplunkBar: P().bool,
-        AppBarFallback: P().elementType,
-        SplunkBarFallback: P().elementType
+    var J = {
+        hideAppBar: S().bool,
+        hideChrome: S().bool,
+        hideSplunkBar: S().bool,
+        AppBarFallback: S().elementType,
+        SplunkBarFallback: S().elementType
     };
-    function T(e) {
-        var n = e.AppBarFallback, r = n === void 0 ? x : n, t = e.hideAppBar, i = e.hideChrome, o = e.hideSplunkBar, l = e.SplunkBarFallback, u = l === void 0 ? C : l;
+    function K(e) {
+        var n = e.AppBarFallback, r = n === void 0 ? U : n, t = e.hideAppBar, a = e.hideChrome, o = e.hideSplunkBar, i = e.SplunkBarFallback, l = i === void 0 ? z : i;
         
-        return a().createElement(j, null, !i && !o &&  a().createElement(u, null), !i && !t &&  a().createElement(r, null),  a().createElement(q, null,  a().createElement(B, null),  a().createElement(B, null),  a().createElement(B, null),  a().createElement(L(), null, (0, 
-        _._)("Loading"))));
+        return p().createElement(M, null, !a && !o &&  p().createElement(l, null), !a && !t &&  p().createElement(r, null),  p().createElement(I, null,  p().createElement(W, null),  p().createElement(W, null),  p().createElement(W, null),  p().createElement(O(), null, (0, 
+        k._)("Loading"))));
     }
-    T.propTypes = A;
-    /* harmony default export */    const H = T;
+    K.propTypes = J;
+    /* harmony default export */    const N = K;
     // CONCATENATED MODULE: ./src/baseLayout.jsx
-    function M(e, n) {
-        if (null == e) return {};
-        var r, t, a = z(e, n);
+    function Q(e, n) {
+        var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < i.length; t++) {
-                r = i[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
-            }
+            var t = Object.getOwnPropertySymbols(e);
+            n && (t = t.filter((function(n) {
+                return Object.getOwnPropertyDescriptor(e, n).enumerable;
+            }))), r.push.apply(r, t);
         }
-        return a;
+        return r;
     }
-    function z(e, n) {
-        if (null == e) return {};
-        var r = {};
-        for (var t in e) {
-            if ({}.hasOwnProperty.call(e, t)) {
-                if (-1 !== n.indexOf(t)) continue;
-                r[t] = e[t];
-            }
+    function V(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) {
+                i()(e, n, r[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Q(Object(r)).forEach((function(n) {
+                Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
+            }));
         }
-        return r;
+        return e;
     }
-    var G = "build/api/layout.js";
-    var I = "build/api/layout-dark.js";
-    var R = 'header[data-view="splunkjs/mvc/headerview"]';
+    var X = function e() {
+        return fetch((0, m.createRESTURL)("web-features?output_mode=json", {
+            app: "-",
+            owner: "-",
+            sharing: "system"
+        })).then((0, w.handleResponse)(200))["catch"]((0, w.handleError)((0, k._)("failed to get web features")));
+    };
+    var Y = "feature:modern-nav";
+    var Z =  function() {
+        var e = u()( d().mark((function e(n) {
+            var r, t;
+            var a, o;
+            return d().wrap((function e(i) {
+                while (1) {
+                    switch (i.prev = i.next) {
+                      case 0:
+                        if (!(n !== "auto")) {
+                            i.next = 2;
+                            break;
+                        }
+                        return i.abrupt("return", false);
+
+                      case 2:
+                        i.next = 4;
+                        return X();
+
+                      case 4:
+                        a = i.sent;
+                        o = a.entry.find((function(e) {
+                            return e.name === Y;
+                        }));
+                        return i.abrupt("return", (r = (0, g.normalizeBoolean)(o === null || o === void 0 ? void 0 : (t = o.content) === null || t === void 0 ? void 0 : t.enable_nav_vnext)) !== null && r !== void 0 ? r : false);
+
+                      case 7:
+                      case "end":
+                        return i.stop();
+                    }
+                }
+            }), e);
+        })));
+        return function n(r) {
+            return e.apply(this, arguments);
+        };
+    }();
+    var $ = "build/api/layout.js";
+    var ee = "build/api/layout-dark.js";
+    var ne = "build/api/layout-modern-nav.js";
+    var re = 'header[data-view="splunkjs/mvc/headerview"]';
     /**
  * Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
  *
@@ -207,24 +263,31 @@
  * @param {object} [options]
  * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
  * @private
- */    function D(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" ? I : G;
-        var l = (0, u.createStaticURL)(i);
-        if (a === "scriptjs") {
-            o()(l, (function() {
-                // eslint-disable-next-line no-underscore-dangle
-                n(window.__splunk_layout__);
-            }));
-        } else if (a === "requirejs") {
-            if (window.requirejs) {
-                window.requirejs([ l ], n);
+ */    function te(e, n, r) {
+        var t = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}, a = t.loader, o = a === void 0 ? "scriptjs" : a;
+        Z(n).then((function(n) {
+            var t;
+            if (n) {
+                t = ne;
             } else {
-                throw new Error('Error in react-page: options.loader = "requirejs" was set but window.requirejs does not exist.');
+                t = e === "dark" ? ee : $;
             }
-        } else {
-            throw new Error('Invalid options.loader configuration: must be "scriptjs" or "requirejs".');
-        }
+            var a = (0, m.createStaticURL)(t);
+            if (o === "scriptjs") {
+                f()(a, (function() {
+                    // eslint-disable-next-line no-underscore-dangle
+                    r(window.__splunk_layout__);
+                }));
+            } else if (o === "requirejs") {
+                if (window.requirejs) {
+                    window.requirejs([ a ], r);
+                } else {
+                    throw new Error('Error in react-page: options.loader = "requirejs" was set but window.requirejs does not exist.');
+                }
+            } else {
+                throw new Error('Invalid options.loader configuration: must be "scriptjs" or "requirejs".');
+            }
+        }));
     }
     /**
  * Computes the background css of the header container during lazy loading
@@ -232,20 +295,24 @@
  * @param {HTMLDivElement} headerContainer
  * @param {object} [options]
  * @private
- */    function U(e) {
+ */    function ae(e) {
         var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var r = n.hideSplunkBar, t = n.hideAppBar, a = n.headerHeight;
-        var i = e.children[0];
-        var o = i && getComputedStyle(i).backgroundColor;
+        var o = e.children[0];
+        var i = o && getComputedStyle(o).backgroundColor;
         if (!(r || t)) {
             // compute background color to be same as both fallback components
-            var l = i === null || i === void 0 ? void 0 : i.offsetHeight;
+            var l = o === null || o === void 0 ? void 0 : o.offsetHeight;
             var u = e.children[1];
             var c = u && getComputedStyle(u).backgroundColor;
             var d = Math.round(l / a * 100);
-            return "linear-gradient(\n                ".concat(o, " 0%,\n                ").concat(o, " ").concat(d, "%,\n                ").concat(c, " ").concat(d, "%,\n                ").concat(c, " 100%\n            )");
+            return "linear-gradient(\n                ".concat(i, " 0%,\n                ").concat(i, " ").concat(d, "%,\n                ").concat(c, " ").concat(d, "%,\n                ").concat(c, " 100%\n            )");
         }
-        return o;
+        return i;
+    }
+    function oe(e) {
+        var n = e.navLayout, r = e.baseOptions, t = e.additionalOptions;
+        return n === "auto" ? V(V({}, r), t) : r;
     }
     /**
  * renders body element and attaches it to container node in DOM
@@ -256,10 +323,10 @@
  * @param {boolean} useGlobalLayerStack
  * @param {object} splunkTheme
  * @private
- */    function J(e, n, r) {
+ */    function ie(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);
+        var a = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+        var o = t ?  p().createElement(h.LayerStackGlobalProvider, null,  p().createElement(y(), a, e)) :  p().createElement(y(), a, e);
         return n(o, r);
     }
     /**
@@ -278,7 +345,8 @@
  * @param {Boolean} [options.hideSplunkBar = false] - Hides the Splunk bar.
  * @param {string} [options.layout = 'scrolling'] - Set to `fixed` to fix all navigation bars
  * to the edge of the page.
- * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in `@splunk/react-ui`'s LayerStackGlobalProvider.
+ * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in @splunk/react-ui's LayerStackGlobalProvider.
+ * @param {Boolean} [options.navLayout = 'classic'] - Used to determine layout asset to load. Ex. "classic" or "auto".
  * @param {String} [options.theme = 'light'] - Used to theme UI elements. Ex. "light" or "dark".
  * @param {String} [options.themeFamily = 'enterprise'] - Ex. Theme family to use for UI elements. Ex. "enterprise" or "prisma".
  * @param {String} [options.themeDensity] - Ex. Theme density to use for UI elements. Ex. "compact" or "comfortable".
@@ -288,55 +356,66 @@
  * @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.
- */    function K(e, n) {
+ */    function le(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.themeDensity, p = r.loader, s = p === void 0 ? "scriptjs" : p, v = M(r, [ "useGlobalLayerStack", "pageTitle", "theme", "themeDensity", "loader" ]);
-        if (o) {
-            document.title = o;
+        var t = r.useGlobalLayerStack, o = t === void 0 ? true : t, i = r.pageTitle, l = r.theme, u = l === void 0 ? "light" : l, c = r.themeDensity, d = r.loader, s = d === void 0 ? "scriptjs" : d, v = a()(r, [ "useGlobalLayerStack", "pageTitle", "theme", "themeDensity", "loader" ]);
+        if (i) {
+            document.title = i;
         }
-        var f = v.hideChrome, m = v.themeFamily, h = m === void 0 ? "enterprise" : m, y = v.hideAppBar, b = v.hideSplunkBar, g = v.SplunkBarFallback, k = g === void 0 ? C : g, E = v.AppBarFallback, j = E === void 0 ? x : E, q = v.lazyLoadLayout, B = q === void 0 ? false : q, O = v.onLayoutComplete, P = v.onLayoutStart;
-        var F = document.createElement("div");
+        var f = v.hideChrome, h = v.themeFamily, m = h === void 0 ? "enterprise" : h, b = v.hideAppBar, g = v.hideSplunkBar, k = v.SplunkBarFallback, w = k === void 0 ? z : k, j = v.AppBarFallback, S = j === void 0 ? U : j, E = v.lazyLoadLayout, O = E === void 0 ? false : E, q = v.onLayoutComplete, x = v.onLayoutStart, C = v.navLayout, B = C === void 0 ? "classic" : C;
+        var P = document.createElement("div");
         var L = document.createElement("div");
-        P === null || P === void 0 ? void 0 : P({
+        x === null || x === void 0 ? void 0 : x({
             headerContainer: L,
-            bodyContainer: F
+            bodyContainer: P
         });
         // The "theme" in enterprise used to be "enterprise" instead of "light"...
                 var _ = u === "light" || u === "enterprise" ? "light" : "dark";
-        var A = {
-            family: h,
+        var T = {
+            family: m,
             colorScheme: _,
-            density: c || (h === "prisma" ? "compact" : "comfortable")
+            density: c || (m === "prisma" ? "compact" : "comfortable")
         };
-        var T;
-        var z;
-        if (B) {
+        var F;
+        var A;
+        if (v.navLayout === "auto") {
+            P.style.flexGrow = "1";
+        }
+        if (O) {
             // render the React app immediately without waiting for layout API
             if (!f) {
                 document.body.appendChild(L);
-                z = n( a().createElement(a().Fragment, null, !b &&  a().createElement(k, null), !y &&  a().createElement(j, null)), L);
+                A = n( p().createElement(p().Fragment, null, !g &&  p().createElement(w, null), !b &&  p().createElement(S, null)), L);
                 // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
-                                var G = L.offsetHeight;
-                var I = U(L, {
-                    hideSplunkBar: b,
-                    hideAppBar: y,
-                    headerHeight: G,
-                    AppBarFallback: j,
-                    SplunkBarFallback: k
+                                var D = L.offsetHeight;
+                var H = ae(L, {
+                    hideSplunkBar: g,
+                    hideAppBar: b,
+                    headerHeight: D,
+                    AppBarFallback: S,
+                    SplunkBarFallback: w
                 });
-                L.style.height = "".concat(G, "px");
-                L.style.background = "".concat(I);
+                L.style.height = "".concat(D, "px");
+                L.style.background = "".concat(H);
             }
-            document.body.appendChild(F);
-            T = J(e, n, F, i, A);
+            document.body.appendChild(P);
+            F = ie(e, n, P, o, T);
         } else {
-            document.body.appendChild(F);
-            T = n( a().createElement(d(), A,  a().createElement(H, v)), F);
+            document.body.appendChild(P);
+            F = n( p().createElement(y(), T,  p().createElement(N, v)), P);
         }
-        D(u, (function(r) {
+        te(u, B, (function(r) {
             var t;
             if (r) {
-                t = r.create(v).getContainerElement();
+                var a = oe({
+                    navLayout: B,
+                    baseOptions: v,
+                    additionalOptions: {
+                        theme: u,
+                        themeFamily: m
+                    }
+                });
+                t = r.create(a).getContainerElement();
                 if (v.layout === "fixed") {
                     // the above create method adds flex: 1 0 0
                     // IE 11 disregards 0px shorthand for flex-basis component.
@@ -361,34 +440,34 @@
                 t = document.createElement("div");
                 document.body.appendChild(t);
             }
-            if (B) {
+            if (O) {
                 if (!f) {
                     // replace placeholder nav bar with real nav bar
-                    z.unmount(L);
-                    var a = document.querySelector(R);
-                    var o = (!f && !b ? w : 0) + (!f && !y ? S : 0);
+                    A.unmount(L);
+                    var i = document.querySelector(re);
+                    var l = (!f && !g ? G : 0) + (!f && !b ? R : 0);
                     // set a min-height for basic nav bar components and auto height for any additional components like global banner
-                                        L.style.minHeight = "".concat(o, "px");
+                                        L.style.minHeight = "".concat(l, "px");
                     L.style.height = "auto";
-                    L.appendChild(a);
+                    L.appendChild(i);
                 }
-                t.appendChild(F);
-                O === null || O === void 0 ? void 0 : O();
+                t.appendChild(P);
+                q === null || q === void 0 ? void 0 : q();
             } else {
                 setTimeout((function() {
-                    T.unmount(F);
-                    T = J(e, n, F, i, A);
-                    t.appendChild(F);
-                    O === null || O === void 0 ? void 0 : O();
+                    F.unmount(P);
+                    F = ie(e, n, P, o, T);
+                    t.appendChild(P);
+                    q === null || q === void 0 ? void 0 : q();
                 }), 30);
             }
         }), {
             loader: s
         });
     }
-    /* harmony default export */    const N = K;
+    /* harmony default export */    const ue = le;
     // CONCATENATED MODULE: ./src/18.jsx
-    var Q = function e(n, t) {
+    var ce = function e(n, t) {
         var a = (0, r.createRoot)(t);
         a.render(n);
         return a;
@@ -416,9 +495,9 @@
  * @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.
- */    function V(e, n) {
-        N(e, Q, n);
+ */    function de(e, n) {
+        ue(e, ce, n);
     }
-    /* harmony default export */    const W = V;
+    /* harmony default export */    const se = de;
     module.exports = n;
     /******/})();

package/CHANGELOG.md

@@ -1,10 +1,19 @@
 Change Log
 ============
 
+8.2.0 - January 8, 2025
+----------
+New Features:
+* Added a new `options.navLayout` parameter.
+
+8.2.0-beta.1 - October 14, 2025
+----------
+* No public API changes.
+
 8.1.0 - September 2, 2025
 ----------
 New Features:
-* `react-page` now provides Typescript type defitions (SUI-8002).
+* `react-page` now provides Typescript type definitions (SUI-8002).
 
 8.0.0 - June 3, 2025
 ----------

package/baseLayout.d.ts

@@ -15,7 +15,8 @@ export default layout;
  * @param {Boolean} [options.hideSplunkBar = false] - Hides the Splunk bar.
  * @param {string} [options.layout = 'scrolling'] - Set to `fixed` to fix all navigation bars
  * to the edge of the page.
- * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in `@splunk/react-ui`'s LayerStackGlobalProvider.
+ * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in @splunk/react-ui's LayerStackGlobalProvider.
+ * @param {Boolean} [options.navLayout = 'classic'] - Used to determine layout asset to load. Ex. "classic" or "auto".
  * @param {String} [options.theme = 'light'] - Used to theme UI elements. Ex. "light" or "dark".
  * @param {String} [options.themeFamily = 'enterprise'] - Ex. Theme family to use for UI elements. Ex. "enterprise" or "prisma".
  * @param {String} [options.themeDensity] - Ex. Theme density to use for UI elements. Ex. "compact" or "comfortable".
@@ -35,12 +36,4 @@ declare function layout(element: any, render: any, { useGlobalLayerStack, pageTi
     hideSplunkBar?: boolean;
     layout?: string;
     useGlobalLayerStack?: boolean;
-    theme?: string;
-    themeFamily?: string;
-    themeDensity?: string;
-    loader?: string;
-    lazyLoadLayout?: boolean;
-    SplunkBarFallback?: any;
-    AppBarFallback?: any;
-    onLayoutComplete?: Function;
 }): void;

package/index.js

@@ -61,147 +61,203 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        AppBar: () => /* reexport */ b,
+        AppBar: () => /* reexport */ g,
         SplunkBar: () => /* reexport */ y,
-        default: () => /* binding */ W
+        default: () => /* binding */ se
     });
     // CONCATENATED MODULE: external "react-dom"
     const r = require("react-dom");
-    // CONCATENATED MODULE: external "styled-components"
-    const t = require("styled-components");
+    // CONCATENATED MODULE: external "@babel/runtime/helpers/taggedTemplateLiteral"
+    const t = require("@babel/runtime/helpers/taggedTemplateLiteral");
     var a =  e.n(t);
+    // CONCATENATED MODULE: external "styled-components"
+    const o = require("styled-components");
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const i = require("@splunk/themes");
+    const l = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/LoadingStyles.js
-    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 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 u() {
-        var e = s([ "\n    background-color: ", ";\n    min-height: ", "px;\n" ]);
+        var e = a()([ "\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" ]);
         u = function n() {
             return e;
         };
         return e;
     }
     function c() {
-        var e = s([ "\n    padding: 0;\n    background-color: ", ";\n    height: ", "px;\n" ]);
+        var e = a()([ "\n    color: ", ";\n    padding-top: 30vh;\n    text-align: center;\n    min-height: 400px;\n" ]);
         c = function n() {
             return e;
         };
         return e;
     }
     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" ]);
+        var e = a()([ "\n    background-color: ", ";\n    min-height: ", "px;\n" ]);
         d = function n() {
             return e;
         };
         return e;
     }
+    function s() {
+        var e = a()([ "\n    padding: 0;\n    background-color: ", ";\n    height: ", "px;\n" ]);
+        s = function n() {
+            return e;
+        };
+        return e;
+    }
     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" ]);
+        var e = a()([ "\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" ]);
         p = function n() {
             return e;
         };
         return e;
     }
-    function s(e, n) {
-        return n || (n = e.slice(0)), Object.freeze(Object.defineProperties(e, {
-            raw: {
-                value: Object.freeze(n)
-            }
-        }));
+    function v() {
+        var e = a()([ "\n    0% {\n        opacity: 0.2;\n    }\n\n    20% {\n        opacity: 1;\n    }\n\n    100% {\n        opacity: 0.2;\n    }\n" ]);
+        v = function n() {
+            return e;
+        };
+        return e;
     }
-    var v = 45;
+    var f = 45;
     var m = 34;
-    var f = (0, t.keyframes)(p());
-    var h = a().div(d(), i.variables.backgroundColorPage);
-    var y = a().div(c(), (0, i.pick)({
-        prisma: i.variables.backgroundColorSection,
-        enterprise: i.variables.gray20
+    var h = (0, o.keyframes)(v());
+    var b = i().div(p(), l.variables.backgroundColorPage);
+    var y = i().div(s(), (0, l.pick)({
+        prisma: l.variables.backgroundColorSection,
+        enterprise: l.variables.gray20
     }), m);
-    var b = 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(), f, i.variables.neutral500, (0, i.pick)({
-        prisma: i.variables.spacingMedium,
-        enterprise: i.variables.spacingSmall
+    var g = i().div(d(), (0, l.pick)({
+        prisma: l.variables.backgroundColorPopup,
+        enterprise: l.variables.gray30
+    }), f);
+    var k = i().div(c(), l.variables.contentColorInverted);
+    var w = i().div(u(), h, l.variables.neutral500, (0, l.pick)({
+        prisma: l.variables.spacingMedium,
+        enterprise: l.variables.spacingSmall
     }));
+    // CONCATENATED MODULE: external "@babel/runtime/helpers/objectWithoutProperties"
+    const j = require("@babel/runtime/helpers/objectWithoutProperties");
+    var S =  e.n(j);
+    // CONCATENATED MODULE: external "@babel/runtime/helpers/defineProperty"
+    const E = require("@babel/runtime/helpers/defineProperty");
+    var O =  e.n(E);
+    // CONCATENATED MODULE: external "@babel/runtime/helpers/asyncToGenerator"
+    const q = require("@babel/runtime/helpers/asyncToGenerator");
+    var C =  e.n(q);
+    // CONCATENATED MODULE: external "@babel/runtime/regenerator"
+    const x = require("@babel/runtime/regenerator");
+    var B =  e.n(x);
     // CONCATENATED MODULE: external "react"
-    const S = require("react");
-    var w =  e.n(S);
+    const P = require("react");
+    var L =  e.n(P);
     // CONCATENATED MODULE: external "scriptjs"
-    const C = require("scriptjs");
-    var E =  e.n(C);
+    const _ = require("scriptjs");
+    var T =  e.n(_);
     // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
-    const j = require("@splunk/react-ui/Layer");
+    const A = require("@splunk/react-ui/Layer");
     // CONCATENATED MODULE: external "@splunk/splunk-utils/url"
-    const x = require("@splunk/splunk-utils/url");
+    const F = require("@splunk/splunk-utils/url");
     // CONCATENATED MODULE: external "@splunk/themes/SplunkThemeProvider"
-    const B = require("@splunk/themes/SplunkThemeProvider");
-    var q =  e.n(B);
+    const D = require("@splunk/themes/SplunkThemeProvider");
+    var G =  e.n(D);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/boolean"
+    const H = require("@splunk/ui-utils/boolean");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const M = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "@splunk/splunk-utils/fetch"
+    const R = require("@splunk/splunk-utils/fetch");
     // CONCATENATED MODULE: external "prop-types"
-    const O = require("prop-types");
-    var P =  e.n(O);
+    const z = require("prop-types");
+    var U =  e.n(z);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const A = require("@splunk/react-ui/ScreenReaderContent");
-    var F =  e.n(A);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const L = require("@splunk/ui-utils/i18n");
+    const I = require("@splunk/react-ui/ScreenReaderContent");
+    var N =  e.n(I);
     // CONCATENATED MODULE: ./src/Loading.jsx
-    var _ = {
-        hideAppBar: P().bool,
-        hideChrome: P().bool,
-        hideSplunkBar: P().bool,
-        AppBarFallback: P().elementType,
-        SplunkBarFallback: P().elementType
+    var W = {
+        hideAppBar: U().bool,
+        hideChrome: U().bool,
+        hideSplunkBar: U().bool,
+        AppBarFallback: U().elementType,
+        SplunkBarFallback: U().elementType
     };
-    function T(e) {
-        var n = e.AppBarFallback, r = n === void 0 ? b : n, t = e.hideAppBar, a = e.hideChrome, i = e.hideSplunkBar, o = e.SplunkBarFallback, l = o === void 0 ? y : o;
+    function J(e) {
+        var n = e.AppBarFallback, r = n === void 0 ? g : n, t = e.hideAppBar, a = e.hideChrome, o = e.hideSplunkBar, i = e.SplunkBarFallback, l = i === void 0 ? y : i;
         
-        return w().createElement(h, null, !a && !i &&  w().createElement(l, null), !a && !t &&  w().createElement(r, null),  w().createElement(g, null,  w().createElement(k, null),  w().createElement(k, null),  w().createElement(k, null),  w().createElement(F(), null, (0, 
-        L._)("Loading"))));
+        return L().createElement(b, null, !a && !o &&  L().createElement(l, null), !a && !t &&  L().createElement(r, null),  L().createElement(k, null,  L().createElement(w, null),  L().createElement(w, null),  L().createElement(w, null),  L().createElement(N(), null, (0, 
+        M._)("Loading"))));
     }
-    T.propTypes = _;
-    /* harmony default export */    const H = T;
+    J.propTypes = W;
+    /* harmony default export */    const K = J;
     // CONCATENATED MODULE: ./src/baseLayout.jsx
-    function M(e, n) {
-        if (null == e) return {};
-        var r, t, a = z(e, n);
+    function Q(e, n) {
+        var r = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < i.length; t++) {
-                r = i[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
-            }
+            var t = Object.getOwnPropertySymbols(e);
+            n && (t = t.filter((function(n) {
+                return Object.getOwnPropertyDescriptor(e, n).enumerable;
+            }))), r.push.apply(r, t);
         }
-        return a;
+        return r;
     }
-    function z(e, n) {
-        if (null == e) return {};
-        var r = {};
-        for (var t in e) {
-            if ({}.hasOwnProperty.call(e, t)) {
-                if (-1 !== n.indexOf(t)) continue;
-                r[t] = e[t];
-            }
+    function V(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) {
+                O()(e, n, r[n]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : Q(Object(r)).forEach((function(n) {
+                Object.defineProperty(e, n, Object.getOwnPropertyDescriptor(r, n));
+            }));
         }
-        return r;
+        return e;
     }
-    var G = "build/api/layout.js";
-    var I = "build/api/layout-dark.js";
-    var D = 'header[data-view="splunkjs/mvc/headerview"]';
+    var X = function e() {
+        return fetch((0, F.createRESTURL)("web-features?output_mode=json", {
+            app: "-",
+            owner: "-",
+            sharing: "system"
+        })).then((0, R.handleResponse)(200))["catch"]((0, R.handleError)((0, M._)("failed to get web features")));
+    };
+    var Y = "feature:modern-nav";
+    var Z =  function() {
+        var e = C()( B().mark((function e(n) {
+            var r, t;
+            var a, o;
+            return B().wrap((function e(i) {
+                while (1) {
+                    switch (i.prev = i.next) {
+                      case 0:
+                        if (!(n !== "auto")) {
+                            i.next = 2;
+                            break;
+                        }
+                        return i.abrupt("return", false);
+
+                      case 2:
+                        i.next = 4;
+                        return X();
+
+                      case 4:
+                        a = i.sent;
+                        o = a.entry.find((function(e) {
+                            return e.name === Y;
+                        }));
+                        return i.abrupt("return", (r = (0, H.normalizeBoolean)(o === null || o === void 0 ? void 0 : (t = o.content) === null || t === void 0 ? void 0 : t.enable_nav_vnext)) !== null && r !== void 0 ? r : false);
+
+                      case 7:
+                      case "end":
+                        return i.stop();
+                    }
+                }
+            }), e);
+        })));
+        return function n(r) {
+            return e.apply(this, arguments);
+        };
+    }();
+    var $ = "build/api/layout.js";
+    var ee = "build/api/layout-dark.js";
+    var ne = "build/api/layout-modern-nav.js";
+    var re = 'header[data-view="splunkjs/mvc/headerview"]';
     /**
  * Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
  *
@@ -209,24 +265,31 @@
  * @param {object} [options]
  * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
  * @private
- */    function R(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" ? I : G;
-        var o = (0, x.createStaticURL)(i);
-        if (a === "scriptjs") {
-            E()(o, (function() {
-                // eslint-disable-next-line no-underscore-dangle
-                n(window.__splunk_layout__);
-            }));
-        } else if (a === "requirejs") {
-            if (window.requirejs) {
-                window.requirejs([ o ], n);
+ */    function te(e, n, r) {
+        var t = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {}, a = t.loader, o = a === void 0 ? "scriptjs" : a;
+        Z(n).then((function(n) {
+            var t;
+            if (n) {
+                t = ne;
             } else {
-                throw new Error('Error in react-page: options.loader = "requirejs" was set but window.requirejs does not exist.');
+                t = e === "dark" ? ee : $;
             }
-        } else {
-            throw new Error('Invalid options.loader configuration: must be "scriptjs" or "requirejs".');
-        }
+            var a = (0, F.createStaticURL)(t);
+            if (o === "scriptjs") {
+                T()(a, (function() {
+                    // eslint-disable-next-line no-underscore-dangle
+                    r(window.__splunk_layout__);
+                }));
+            } else if (o === "requirejs") {
+                if (window.requirejs) {
+                    window.requirejs([ a ], r);
+                } else {
+                    throw new Error('Error in react-page: options.loader = "requirejs" was set but window.requirejs does not exist.');
+                }
+            } else {
+                throw new Error('Invalid options.loader configuration: must be "scriptjs" or "requirejs".');
+            }
+        }));
     }
     /**
  * Computes the background css of the header container during lazy loading
@@ -234,20 +297,24 @@
  * @param {HTMLDivElement} headerContainer
  * @param {object} [options]
  * @private
- */    function U(e) {
+ */    function ae(e) {
         var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
         var r = n.hideSplunkBar, t = n.hideAppBar, a = n.headerHeight;
-        var i = e.children[0];
-        var o = i && getComputedStyle(i).backgroundColor;
+        var o = e.children[0];
+        var i = o && getComputedStyle(o).backgroundColor;
         if (!(r || t)) {
             // compute background color to be same as both fallback components
-            var l = i === null || i === void 0 ? void 0 : i.offsetHeight;
+            var l = o === null || o === void 0 ? void 0 : o.offsetHeight;
             var u = e.children[1];
             var c = u && getComputedStyle(u).backgroundColor;
             var d = Math.round(l / a * 100);
-            return "linear-gradient(\n                ".concat(o, " 0%,\n                ").concat(o, " ").concat(d, "%,\n                ").concat(c, " ").concat(d, "%,\n                ").concat(c, " 100%\n            )");
+            return "linear-gradient(\n                ".concat(i, " 0%,\n                ").concat(i, " ").concat(d, "%,\n                ").concat(c, " ").concat(d, "%,\n                ").concat(c, " 100%\n            )");
         }
-        return o;
+        return i;
+    }
+    function oe(e) {
+        var n = e.navLayout, r = e.baseOptions, t = e.additionalOptions;
+        return n === "auto" ? V(V({}, r), t) : r;
     }
     /**
  * renders body element and attaches it to container node in DOM
@@ -258,11 +325,11 @@
  * @param {boolean} useGlobalLayerStack
  * @param {object} splunkTheme
  * @private
- */    function N(e, n, r) {
+ */    function ie(e, n, r) {
         var t = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
         var a = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
-        var i = t ?  w().createElement(j.LayerStackGlobalProvider, null,  w().createElement(q(), a, e)) :  w().createElement(q(), a, e);
-        return n(i, r);
+        var o = t ?  L().createElement(A.LayerStackGlobalProvider, null,  L().createElement(G(), a, e)) :  L().createElement(G(), a, e);
+        return n(o, r);
     }
     /**
  * Renders a React element into the Layout API.
@@ -280,7 +347,8 @@
  * @param {Boolean} [options.hideSplunkBar = false] - Hides the Splunk bar.
  * @param {string} [options.layout = 'scrolling'] - Set to `fixed` to fix all navigation bars
  * to the edge of the page.
- * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in `@splunk/react-ui`'s LayerStackGlobalProvider.
+ * @param {Boolean} [options.useGlobalLayerStack = true] - Wraps elements in @splunk/react-ui's LayerStackGlobalProvider.
+ * @param {Boolean} [options.navLayout = 'classic'] - Used to determine layout asset to load. Ex. "classic" or "auto".
  * @param {String} [options.theme = 'light'] - Used to theme UI elements. Ex. "light" or "dark".
  * @param {String} [options.themeFamily = 'enterprise'] - Ex. Theme family to use for UI elements. Ex. "enterprise" or "prisma".
  * @param {String} [options.themeDensity] - Ex. Theme density to use for UI elements. Ex. "compact" or "comfortable".
@@ -290,56 +358,67 @@
  * @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.
- */    function J(e, n) {
+ */    function le(e, n) {
         var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-        var t = r.useGlobalLayerStack, a = t === void 0 ? true : t, i = r.pageTitle, o = r.theme, l = o === void 0 ? "light" : o, u = r.themeDensity, c = r.loader, d = c === void 0 ? "scriptjs" : c, p = M(r, [ "useGlobalLayerStack", "pageTitle", "theme", "themeDensity", "loader" ]);
-        if (i) {
-            document.title = i;
+        var t = r.useGlobalLayerStack, a = t === void 0 ? true : t, o = r.pageTitle, i = r.theme, l = i === void 0 ? "light" : i, u = r.themeDensity, c = r.loader, d = c === void 0 ? "scriptjs" : c, s = S()(r, [ "useGlobalLayerStack", "pageTitle", "theme", "themeDensity", "loader" ]);
+        if (o) {
+            document.title = o;
         }
-        var s = p.hideChrome, f = p.themeFamily, h = f === void 0 ? "enterprise" : f, g = p.hideAppBar, k = p.hideSplunkBar, S = p.SplunkBarFallback, C = S === void 0 ? y : S, E = p.AppBarFallback, j = E === void 0 ? b : E, x = p.lazyLoadLayout, B = x === void 0 ? false : x, O = p.onLayoutComplete, P = p.onLayoutStart;
+        var p = s.hideChrome, v = s.themeFamily, h = v === void 0 ? "enterprise" : v, b = s.hideAppBar, k = s.hideSplunkBar, w = s.SplunkBarFallback, j = w === void 0 ? y : w, E = s.AppBarFallback, O = E === void 0 ? g : E, q = s.lazyLoadLayout, C = q === void 0 ? false : q, x = s.onLayoutComplete, B = s.onLayoutStart, P = s.navLayout, _ = P === void 0 ? "classic" : P;
+        var T = document.createElement("div");
         var A = document.createElement("div");
-        var F = document.createElement("div");
-        P === null || P === void 0 ? void 0 : P({
-            headerContainer: F,
-            bodyContainer: A
+        B === null || B === void 0 ? void 0 : B({
+            headerContainer: A,
+            bodyContainer: T
         });
         // The "theme" in enterprise used to be "enterprise" instead of "light"...
-                var L = l === "light" || l === "enterprise" ? "light" : "dark";
-        var _ = {
+                var F = l === "light" || l === "enterprise" ? "light" : "dark";
+        var D = {
             family: h,
-            colorScheme: L,
+            colorScheme: F,
             density: u || (h === "prisma" ? "compact" : "comfortable")
         };
-        var T;
-        var z;
-        if (B) {
+        var H;
+        var M;
+        if (s.navLayout === "auto") {
+            T.style.flexGrow = "1";
+        }
+        if (C) {
             // render the React app immediately without waiting for layout API
-            if (!s) {
-                document.body.appendChild(F);
-                z = n( w().createElement(w().Fragment, null, !k &&  w().createElement(C, null), !g &&  w().createElement(j, null)), F);
+            if (!p) {
+                document.body.appendChild(A);
+                M = n( L().createElement(L().Fragment, null, !k &&  L().createElement(j, null), !b &&  L().createElement(O, null)), A);
                 // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
-                                var G = F.offsetHeight;
-                var I = U(F, {
+                                var R = A.offsetHeight;
+                var z = ae(A, {
                     hideSplunkBar: k,
-                    hideAppBar: g,
-                    headerHeight: G,
-                    AppBarFallback: j,
-                    SplunkBarFallback: C
+                    hideAppBar: b,
+                    headerHeight: R,
+                    AppBarFallback: O,
+                    SplunkBarFallback: j
                 });
-                F.style.height = "".concat(G, "px");
-                F.style.background = "".concat(I);
+                A.style.height = "".concat(R, "px");
+                A.style.background = "".concat(z);
             }
-            document.body.appendChild(A);
-            T = N(e, n, A, a, _);
+            document.body.appendChild(T);
+            H = ie(e, n, T, a, D);
         } else {
-            document.body.appendChild(A);
-            T = n( w().createElement(q(), _,  w().createElement(H, p)), A);
+            document.body.appendChild(T);
+            H = n( L().createElement(G(), D,  L().createElement(K, s)), T);
         }
-        R(l, (function(r) {
+        te(l, _, (function(r) {
             var t;
             if (r) {
-                t = r.create(p).getContainerElement();
-                if (p.layout === "fixed") {
+                var o = oe({
+                    navLayout: _,
+                    baseOptions: s,
+                    additionalOptions: {
+                        theme: l,
+                        themeFamily: h
+                    }
+                });
+                t = r.create(o).getContainerElement();
+                if (s.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
@@ -363,34 +442,34 @@
                 t = document.createElement("div");
                 document.body.appendChild(t);
             }
-            if (B) {
-                if (!s) {
+            if (C) {
+                if (!p) {
                     // replace placeholder nav bar with real nav bar
-                    z.unmount(F);
-                    var i = document.querySelector(D);
-                    var o = (!s && !k ? m : 0) + (!s && !g ? v : 0);
+                    M.unmount(A);
+                    var i = document.querySelector(re);
+                    var u = (!p && !k ? m : 0) + (!p && !b ? f : 0);
                     // set a min-height for basic nav bar components and auto height for any additional components like global banner
-                                        F.style.minHeight = "".concat(o, "px");
-                    F.style.height = "auto";
-                    F.appendChild(i);
+                                        A.style.minHeight = "".concat(u, "px");
+                    A.style.height = "auto";
+                    A.appendChild(i);
                 }
-                t.appendChild(A);
-                O === null || O === void 0 ? void 0 : O();
+                t.appendChild(T);
+                x === null || x === void 0 ? void 0 : x();
             } else {
                 setTimeout((function() {
-                    T.unmount(A);
-                    T = N(e, n, A, a, _);
-                    t.appendChild(A);
-                    O === null || O === void 0 ? void 0 : O();
+                    H.unmount(T);
+                    H = ie(e, n, T, a, D);
+                    t.appendChild(T);
+                    x === null || x === void 0 ? void 0 : x();
                 }), 30);
             }
         }), {
             loader: d
         });
     }
-    /* harmony default export */    const K = J;
+    /* harmony default export */    const ue = le;
     // CONCATENATED MODULE: ./src/index.jsx
-    var Q = function e(n, t) {
+    var ce = function e(n, t) {
         (0, r.render)(n, t);
         return {
             unmount: function e() {
@@ -424,9 +503,9 @@
  * @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 V(e, n) {
-        K(e, Q, n);
+ */    function de(e, n) {
+        ue(e, ce, n);
     }
-    /* harmony default export */    const W = V;
+    /* harmony default export */    const se = de;
     module.exports = n;
     /******/})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-page",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "description": "Load React components into the latest layout from Splunk Enterprise",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -25,21 +25,22 @@
     "types:start": "yarn types:build --watch"
   },
   "dependencies": {
-    "@splunk/react-ui": "^5.3.0",
-    "@splunk/splunk-utils": "^3.3.0",
-    "@splunk/themes": "^1.2.1",
-    "@splunk/ui-utils": "^1.10.0",
+    "@splunk/react-ui": "^5.7.1",
+    "@splunk/splunk-utils": "^3.4.0",
+    "@splunk/themes": "^1.4.1",
+    "@splunk/ui-utils": "^1.12.0",
     "prop-types": "^15.6.2",
     "scriptjs": "^2.5.8"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/eslint-parser": "^7.28.0",
+    "@babel/plugin-transform-runtime": "^7.28.3",
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "^1.3.0",
+    "@splunk/react-docs": "^1.4.0",
     "@splunk/stylelint-config": "^5.0.0",
-    "@splunk/webpack-configs": "^7.0.2",
+    "@splunk/webpack-configs": "^7.0.3",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "cross-env": "^6.0.3",