@splunk/react-page 8.0.0 → 8.1.0

package/18.d.ts

@@ -0,0 +1,41 @@
+export default layout;
+/**
+ * Renders a React element into the Layout API.
+ * @public
+ * @param {element} element - A React element.
+ * @param {object} [options]
+ * @param {string} [options.pageTitle] - Changes the page title.
+ * @param {Boolean} [options.hideAppBar = false] - Hides the app bar.
+ * @param {Boolean} [options.hideAppsList = false] - Hides the app list in
+ * the Splunk bar.
+ * @param {Boolean} [options.hideChrome = false] - Renders only the main content, hiding
+ * the Splunk bar, app bar, and footer.
+ * @param {Boolean} [options.hideFooter = false] - Hides the footer.
+ * @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 {String} [options.theme = 'light'] - Used to theme UI elements. Ex. "light" or "dark".
+ * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
+ * Change this only if the default loader does not work for your application.
+ * @param {Boolean} [options.lazyLoadLayout = false] - Prioritizes loading the React element and lazily fetches and compiles the layout API (navigation bar).
+ * @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.
+ */
+declare function layout(element: any, options?: {
+    pageTitle?: string;
+    hideAppBar?: boolean;
+    hideAppsList?: boolean;
+    hideChrome?: boolean;
+    hideFooter?: boolean;
+    hideSplunkBar?: boolean;
+    layout?: string;
+    useGlobalLayerStack?: boolean;
+    theme?: string;
+    loader?: string;
+    lazyLoadLayout?: boolean;
+    SplunkBarFallback?: any;
+    AppBarFallback?: any;
+    onLayoutComplete?: Function;
+}): void;

package/18.js

@@ -79,21 +79,21 @@
     const c = require("@splunk/themes/SplunkThemeProvider");
     var d =  e.n(c);
     // CONCATENATED MODULE: external "styled-components"
-    const s = require("styled-components");
-    var p =  e.n(s);
+    const p = require("styled-components");
+    var s =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/themes"
     const v = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/LoadingStyles.js
-    function m() {
+    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" ]);
-        m = function n() {
+        f = function n() {
             return e;
         };
         return e;
     }
-    function f() {
+    function m() {
         var e = k([ "\n    color: ", ";\n    padding-top: 30vh;\n    text-align: center;\n    min-height: 400px;\n" ]);
-        f = function n() {
+        m = function n() {
             return e;
         };
         return e;
@@ -135,18 +135,18 @@
     }
     var S = 45;
     var w = 34;
-    var E = (0, s.keyframes)(g());
-    var j = p().div(b(), v.variables.backgroundColorPage);
-    var C = p().div(y(), (0, v.pick)({
+    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 q = p().div(h(), (0, v.pick)({
+    var x = s().div(h(), (0, v.pick)({
         prisma: v.variables.backgroundColorPopup,
         enterprise: v.variables.gray30
     }), S);
-    var x = p().div(f(), v.variables.contentColorInverted);
-    var B = p().div(m(), E, v.variables.neutral500, (0, v.pick)({
+    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
     }));
@@ -167,9 +167,9 @@
         SplunkBarFallback: P().elementType
     };
     function T(e) {
-        var n = e.AppBarFallback, r = n === void 0 ? q : n, t = e.hideAppBar, i = e.hideChrome, o = e.hideSplunkBar, l = e.SplunkBarFallback, u = l === void 0 ? C : l;
+        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;
         
-        return a().createElement(j, null, !i && !o &&  a().createElement(u, null), !i && !t &&  a().createElement(r, null),  a().createElement(x, null,  a().createElement(B, null),  a().createElement(B, null),  a().createElement(B, null),  a().createElement(L(), null, (0, 
+        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"))));
     }
     T.propTypes = A;
@@ -181,7 +181,7 @@
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (t = 0; t < i.length; t++) {
-                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                r = i[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -191,7 +191,7 @@
         var r = {};
         for (var t in e) {
             if ({}.hasOwnProperty.call(e, t)) {
-                if (n.includes(t)) continue;
+                if (-1 !== n.indexOf(t)) continue;
                 r[t] = e[t];
             }
         }
@@ -278,7 +278,7 @@
  * @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 {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,11 +290,11 @@
  * @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.themeDensity, s = r.loader, p = s === void 0 ? "scriptjs" : s, v = M(r, [ "useGlobalLayerStack", "pageTitle", "theme", "themeDensity", "loader" ]);
+        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 m = v.hideChrome, f = v.themeFamily, h = f === void 0 ? "enterprise" : f, y = v.hideAppBar, b = v.hideSplunkBar, g = v.SplunkBarFallback, k = g === void 0 ? C : g, E = v.AppBarFallback, j = E === void 0 ? q : E, x = v.lazyLoadLayout, B = x === void 0 ? false : x, O = v.onLayoutComplete, P = v.onLayoutStart;
+        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 L = document.createElement("div");
         P === null || P === void 0 ? void 0 : P({
@@ -312,7 +312,7 @@
         var z;
         if (B) {
             // render the React app immediately without waiting for layout API
-            if (!m) {
+            if (!f) {
                 document.body.appendChild(L);
                 z = n( a().createElement(a().Fragment, null, !b &&  a().createElement(k, null), !y &&  a().createElement(j, null)), L);
                 // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
@@ -362,11 +362,11 @@
                 document.body.appendChild(t);
             }
             if (B) {
-                if (!m) {
+                if (!f) {
                     // replace placeholder nav bar with real nav bar
                     z.unmount(L);
                     var a = document.querySelector(R);
-                    var o = (!m && !b ? w : 0) + (!m && !y ? S : 0);
+                    var o = (!f && !b ? w : 0) + (!f && !y ? S : 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.height = "auto";
@@ -383,7 +383,7 @@
                 }), 30);
             }
         }), {
-            loader: p
+            loader: s
         });
     }
     /* harmony default export */    const N = K;
@@ -408,7 +408,7 @@
  * @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 {String} [options.theme = 'light'] - Used to theme UI elements. Ex. "light" or "dark".
  * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
  * Change this only if the default loader does not work for your application.

package/CHANGELOG.md

@@ -1,17 +1,22 @@
 Change Log
 ============
 
+8.1.0 - September 2, 2025
+----------
+New Features:
+* `react-page` now provides Typescript type defitions (SUI-8002).
+
 8.0.0 - June 3, 2025
 ----------
 * Includes all changes from `8.0.0-beta` and `8.0.0-rc` releases.
 
 8.0.0-rc.2 - May 28, 2025
 ----------
-* Release candidate 2
+* Release candidate 2.
 
 8.0.0-rc.1 - May 14, 2025
 ----------
-* Release candidate 1
+* Release candidate 1.
 
 8.0.0-beta.4 - May 7, 2025
 ----------
@@ -28,7 +33,7 @@ New Features:
 
 8.0.0-beta.2 - March 5, 2025
 ----------
-* Public release of `8.0.0-beta.1`
+* Public release of `8.0.0-beta.1`.
 
 8.0.0-beta.1 - February 20, 2025
 ----------

package/Loading.d.ts

@@ -0,0 +1,19 @@
+export default Loading;
+declare function Loading({ AppBarFallback, hideAppBar, hideChrome, hideSplunkBar, SplunkBarFallback, }: {
+    AppBarFallback?: import("styled-components").StyledComponent<"div", any, {}, never>;
+    hideAppBar: any;
+    hideChrome: any;
+    hideSplunkBar: any;
+    SplunkBarFallback?: import("styled-components").StyledComponent<"div", any, {}, never>;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Loading {
+    export { propTypes };
+}
+declare namespace propTypes {
+    let hideAppBar: PropTypes.Requireable<boolean>;
+    let hideChrome: PropTypes.Requireable<boolean>;
+    let hideSplunkBar: PropTypes.Requireable<boolean>;
+    let AppBarFallback: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+    let SplunkBarFallback: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+}
+import PropTypes from 'prop-types';

package/LoadingStyles.d.ts

@@ -0,0 +1,7 @@
+export const Main: import("styled-components").StyledComponent<"div", any, import("@splunk/themes").OptionalThemedProps<import("@splunk/themes").AnyTheme>, never>;
+export const SplunkBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const AppBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const AppBody: import("styled-components").StyledComponent<"div", any, import("@splunk/themes").OptionalThemedProps<import("@splunk/themes").AnyTheme>, never>;
+export const Dot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const APPBAR_HEIGHT: 45;
+export const SPLUNKBAR_HEIGHT: 34;

package/baseLayout.d.ts

@@ -0,0 +1,46 @@
+export default layout;
+/**
+ * Renders a React element into the Layout API.
+ * @public
+ * @param {element} element - A React element.
+ * @param {element} render - A render function that returns an unmount() function.
+ * @param {object} [options]
+ * @param {string} [options.pageTitle] - Changes the page title.
+ * @param {Boolean} [options.hideAppBar = false] - Hides the app bar.
+ * @param {Boolean} [options.hideAppsList = false] - Hides the app list in
+ * the Splunk bar.
+ * @param {Boolean} [options.hideChrome = false] - Renders only the main content, hiding
+ * the Splunk bar, app bar, and footer.
+ * @param {Boolean} [options.hideFooter = false] - Hides the footer.
+ * @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 {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".
+ * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
+ * Change this only if the default loader does not work for your application.
+ * @param {Boolean} [options.lazyLoadLayout = false] - Prioritizes loading the React element and lazily fetches and compiles the layout API (navigation bar).
+ * @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.
+ */
+declare function layout(element: any, render: any, { useGlobalLayerStack, pageTitle, theme, themeDensity, loader, ...layoutAPIOptions }?: {
+    pageTitle?: string;
+    hideAppBar?: boolean;
+    hideAppsList?: boolean;
+    hideChrome?: boolean;
+    hideFooter?: boolean;
+    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.d.ts

@@ -0,0 +1,50 @@
+export default layout;
+/**
+ * Renders a React element into the Layout API.
+ * @public
+ * @param {element} element - A React element.
+ * @param {object} [options]
+ * @param {string} [options.pageTitle] - Changes the page title.
+ * @param {Boolean} [options.hideAppBar = false] - Hides the app bar.
+ * @param {Boolean} [options.hideAppsList = false] - Hides the app list in
+ * the Splunk bar.
+ * @param {Boolean} [options.hideChrome = false] - Renders only the main content, hiding
+ * the Splunk bar, app bar, and footer.
+ * @param {Boolean} [options.hideFooter = false] - Hides the footer.
+ * @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 {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".
+ * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
+ * Change this only if the default loader does not work for your application.
+ * @param {Boolean} [options.lazyLoadLayout = false] - Prioritizes loading the React element and lazily fetches and compiles the layout API (navigation bar).
+ * @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
+ */
+declare function layout(element: any, options?: {
+    pageTitle?: string;
+    hideAppBar?: boolean;
+    hideAppsList?: boolean;
+    hideChrome?: boolean;
+    hideFooter?: boolean;
+    hideSplunkBar?: boolean;
+    layout?: string;
+    useGlobalLayerStack?: boolean;
+    theme?: string;
+    themeFamily?: string;
+    themeDensity?: string;
+    loader?: string;
+    lazyLoadLayout?: boolean;
+    SplunkBarFallback?: any;
+    AppBarFallback?: any;
+    onLayoutComplete?: Function;
+    onLayoutStart?: Function;
+}): void;
+import { AppBar } from './LoadingStyles';
+import { SplunkBar } from './LoadingStyles';
+export { AppBar, SplunkBar };

package/index.js

@@ -148,10 +148,10 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
     const j = require("@splunk/react-ui/Layer");
     // CONCATENATED MODULE: external "@splunk/splunk-utils/url"
-    const B = require("@splunk/splunk-utils/url");
+    const x = require("@splunk/splunk-utils/url");
     // CONCATENATED MODULE: external "@splunk/themes/SplunkThemeProvider"
-    const q = require("@splunk/themes/SplunkThemeProvider");
-    var x =  e.n(q);
+    const B = require("@splunk/themes/SplunkThemeProvider");
+    var q =  e.n(B);
     // CONCATENATED MODULE: external "prop-types"
     const O = require("prop-types");
     var P =  e.n(O);
@@ -183,7 +183,7 @@
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (t = 0; t < i.length; t++) {
-                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                r = i[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -193,7 +193,7 @@
         var r = {};
         for (var t in e) {
             if ({}.hasOwnProperty.call(e, t)) {
-                if (n.includes(t)) continue;
+                if (-1 !== n.indexOf(t)) continue;
                 r[t] = e[t];
             }
         }
@@ -212,7 +212,7 @@
  */    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, B.createStaticURL)(i);
+        var o = (0, x.createStaticURL)(i);
         if (a === "scriptjs") {
             E()(o, (function() {
                 // eslint-disable-next-line no-underscore-dangle
@@ -261,7 +261,7 @@
  */    function N(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(x(), a, e)) :  w().createElement(x(), a, e);
+        var i = t ?  w().createElement(j.LayerStackGlobalProvider, null,  w().createElement(q(), a, e)) :  w().createElement(q(), a, e);
         return n(i, r);
     }
     /**
@@ -280,7 +280,7 @@
  * @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 {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".
@@ -296,7 +296,7 @@
         if (i) {
             document.title = i;
         }
-        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, B = p.lazyLoadLayout, q = B === void 0 ? false : B, O = p.onLayoutComplete, P = p.onLayoutStart;
+        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 A = document.createElement("div");
         var F = document.createElement("div");
         P === null || P === void 0 ? void 0 : P({
@@ -312,7 +312,7 @@
         };
         var T;
         var z;
-        if (q) {
+        if (B) {
             // render the React app immediately without waiting for layout API
             if (!s) {
                 document.body.appendChild(F);
@@ -333,7 +333,7 @@
             T = N(e, n, A, a, _);
         } else {
             document.body.appendChild(A);
-            T = n( w().createElement(x(), _,  w().createElement(H, p)), A);
+            T = n( w().createElement(q(), _,  w().createElement(H, p)), A);
         }
         R(l, (function(r) {
             var t;
@@ -363,7 +363,7 @@
                 t = document.createElement("div");
                 document.body.appendChild(t);
             }
-            if (q) {
+            if (B) {
                 if (!s) {
                     // replace placeholder nav bar with real nav bar
                     z.unmount(F);
@@ -413,7 +413,7 @@
  * @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 {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".

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@splunk/react-page",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "Load React components into the latest layout from Splunk Enterprise",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
+  "main": "index.js",
+  "types": "types/index.d.ts",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack",
+    "build": "cross-env NODE_ENV=production webpack && yarn types:build",
     "docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
     "docs:publish": "eval $(splunk-docs-package docs) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
     "docs:publish:external": "eval $(splunk-docs-package docs-external --suffix=public) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
@@ -18,22 +20,24 @@
     "start": "cross-env NODE_ENV=development webpack --watch",
     "stylelint": "stylelint \"src/**/*.{js,jsx}\" --config stylelint.config.js",
     "test:cypress": "node src/tests/run-cypress-tests.js 8.0.3",
-    "test:cypress:ci": "node src/tests/run-cypress-tests.js"
+    "test:cypress:ci": "node src/tests/run-cypress-tests.js",
+    "types:build": "tsc",
+    "types:start": "yarn types:build --watch"
   },
   "dependencies": {
-    "@splunk/react-ui": "^5.0.0",
-    "@splunk/splunk-utils": "^3.2.0",
-    "@splunk/themes": "^1.0.0",
-    "@splunk/ui-utils": "^1.9.0",
+    "@splunk/react-ui": "^5.3.0",
+    "@splunk/splunk-utils": "^3.3.0",
+    "@splunk/themes": "^1.2.1",
+    "@splunk/ui-utils": "^1.10.0",
     "prop-types": "^15.6.2",
     "scriptjs": "^2.5.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.0",
+    "@babel/core": "^7.28.0",
+    "@babel/eslint-parser": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "^1.0.0",
+    "@splunk/react-docs": "^1.3.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/webpack-configs": "^7.0.2",
     "babel-loader": "^8.3.0",
@@ -55,7 +59,7 @@
     "stylelint": "^15.11.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1",
+    "webpack-dev-server": "^5.2.2",
     "webpack-merge": "^5.9.0"
   },
   "peerDependencies": {