@splunk/react-page 7.2.0 → 8.0.0-beta.3

package/18.js

@@ -0,0 +1,424 @@
+/******/ (() => {
+    // webpackBootstrap
+    /******/ "use strict";
+    /******/ // The require scope
+    /******/    var e = {};
+    /******/
+    /************************************************************************/
+    /******/ /* webpack/runtime/compat get default export */
+    /******/    (() => {
+        /******/ // getDefaultExport function for compatibility with non-harmony modules
+        /******/ e.n = n => {
+            /******/ var r = n && n.__esModule ? 
+            /******/ () => n["default"]
+            /******/ : () => n
+            /******/;
+            e.d(r, {
+                a: r
+            });
+            /******/            return r;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (n, r) => {
+            /******/ for (var t in r) {
+                /******/ if (e.o(r, t) && !e.o(n, t)) {
+                    /******/ Object.defineProperty(n, t, {
+                        enumerable: true,
+                        get: r[t]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/hasOwnProperty shorthand */
+    /******/    (() => {
+        /******/ e.o = (e, n) => Object.prototype.hasOwnProperty.call(e, n)
+        /******/;
+    })();
+    /******/
+    /******/ /* webpack/runtime/make namespace object */
+    /******/    (() => {
+        /******/ // define __esModule on exports
+        /******/ e.r = e => {
+            /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                    value: "Module"
+                });
+                /******/            }
+            /******/            Object.defineProperty(e, "__esModule", {
+                value: true
+            });
+            /******/        };
+        /******/    })();
+    /******/
+    /************************************************************************/    var n = {};
+    // ESM COMPAT FLAG
+        e.r(n);
+    // EXPORTS
+        e.d(n, {
+        default: () => /* binding */ W
+    });
+    // CONCATENATED MODULE: external "react-dom/client"
+    const r = require("react-dom/client");
+    // 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 s = require("styled-components");
+    var p =  e.n(s);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const v = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/LoadingStyles.js
+    function m() {
+        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() {
+            return e;
+        };
+        return e;
+    }
+    function f() {
+        var e = k([ "\n    color: ", ";\n    padding-top: 30vh;\n    text-align: center;\n    min-height: 400px;\n" ]);
+        f = function n() {
+            return e;
+        };
+        return e;
+    }
+    function h() {
+        var e = k([ "\n    background-color: ", ";\n    min-height: ", "px;\n" ]);
+        h = function n() {
+            return e;
+        };
+        return e;
+    }
+    function y() {
+        var e = k([ "\n    padding: 0;\n    background-color: ", ";\n    height: ", "px;\n" ]);
+        y = 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() {
+            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() {
+            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, s.keyframes)(g());
+    var j = p().div(b(), v.variables.backgroundColorPage);
+    var C = p().div(y(), (0, v.pick)({
+        prisma: v.variables.backgroundColorSection,
+        enterprise: v.variables.gray20
+    }), w);
+    var q = p().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)({
+        prisma: v.variables.spacingMedium,
+        enterprise: v.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
+    };
+    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;
+        
+        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, 
+        _._)("Loading"))));
+    }
+    T.propTypes = A;
+    /* harmony default export */    const H = T;
+    // CONCATENATED MODULE: ./src/baseLayout.jsx
+    function M(e, n) {
+        if (null == e) return {};
+        var r, t, a = z(e, n);
+        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]);
+            }
+        }
+        return a;
+    }
+    function z(e, n) {
+        if (null == e) return {};
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
+            }
+        }
+        return r;
+    }
+    var G = "build/api/layout.js";
+    var I = "build/api/layout-dark.js";
+    var R = 'header[data-view="splunkjs/mvc/headerview"]';
+    /**
+ * Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
+ *
+ * @param {Function} callback - A callback invoked with the layout module once resolved.
+ * @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);
+            } 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
+ *
+ * @param {HTMLDivElement} headerContainer
+ * @param {object} [options]
+ * @private
+ */    function U(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;
+        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 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 o;
+    }
+    /**
+ * renders body element and attaches it to container node in DOM
+ *
+ * @param {element} element
+ * @param {element} render - A render function that returns an unmount() function.
+ * @param {HTMLDivElement} container
+ * @param {boolean} useGlobalLayerStack
+ * @param {object} splunkTheme
+ * @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);
+    }
+    /**
+ * 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.
+ */    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" ]);
+        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 = document.createElement("div");
+        var L = document.createElement("div");
+        P === null || P === void 0 ? void 0 : P({
+            headerContainer: L,
+            bodyContainer: F
+        });
+        // The "theme" in enterprise used to be "enterprise" instead of "light"...
+                var _ = u === "light" || u === "enterprise" ? "light" : "dark";
+        var A = {
+            family: h,
+            colorScheme: _,
+            density: c || (h === "prisma" ? "compact" : "comfortable")
+        };
+        var T;
+        var z;
+        if (B) {
+            // render the React app immediately without waiting for layout API
+            if (!m) {
+                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
+                                var G = L.offsetHeight;
+                var I = U(L, {
+                    hideSplunkBar: b,
+                    hideAppBar: y,
+                    headerHeight: G,
+                    AppBarFallback: j,
+                    SplunkBarFallback: k
+                });
+                L.style.height = "".concat(G, "px");
+                L.style.background = "".concat(I);
+            }
+            document.body.appendChild(F);
+            T = J(e, n, F, i, A);
+        } else {
+            document.body.appendChild(F);
+            T = n( a().createElement(d(), A,  a().createElement(H, v)), F);
+        }
+        D(u, (function(r) {
+            var t;
+            if (r) {
+                t = r.create(v).getContainerElement();
+                if (v.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
+                    if (!t.style.flex || t.style.flex === "1 0 0px") {
+                        t.style.flex = "1 0 0%";
+                    }
+                    // all elements in the hierarchy must have 'overflow: hidden' for children
+                    // to support scrolling correctly.
+                                        if (!t.style.overflow) {
+                        t.style.overflow = "hidden";
+                    }
+                    // splunk hijacks the width of the body when printing, so we have to force width to the size
+                    // of the viewport so that things print at the correct width
+                                        if (!t.style.width) {
+                        t.style.width = "100vw";
+                    }
+                }
+            } else {
+                // eslint-disable-next-line no-console
+                console.error("Unable to load layout.");
+                t = document.createElement("div");
+                document.body.appendChild(t);
+            }
+            if (B) {
+                if (!m) {
+                    // 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);
+                    // 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";
+                    L.appendChild(a);
+                }
+                t.appendChild(F);
+                O === null || O === void 0 ? void 0 : O();
+            } else {
+                setTimeout((function() {
+                    T.unmount(F);
+                    T = J(e, n, F, i, A);
+                    t.appendChild(F);
+                    O === null || O === void 0 ? void 0 : O();
+                }), 30);
+            }
+        }), {
+            loader: p
+        });
+    }
+    /* harmony default export */    const N = K;
+    // CONCATENATED MODULE: ./src/18.jsx
+    var Q = function e(n, t) {
+        var a = (0, r.createRoot)(t);
+        a.render(n);
+        return a;
+    };
+    /**
+ * 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.
+ */    function V(e, n) {
+        N(e, Q, n);
+    }
+    /* harmony default export */    const W = V;
+    module.exports = n;
+    /******/})();

package/CHANGELOG.md

@@ -1,15 +1,31 @@
 Change Log
 ============
 
+8.0.0-beta.3 - April 2, 2025
+----------
+* Includes changes from `7.2.0`.
+
 7.2.0 - April 1, 2025
 ----------
 New Features:
 * Added support for `themeFamily` and `themeDensity` options (SPL-273100).
 
+8.0.0-beta.2 - March 5, 2025
+----------
+* Public release of `8.0.0-beta.1`
+
+8.0.0-beta.1 - February 20, 2025
+----------
+New Features:
+* Added support for using the `createRoot` API if the consuming application is using `react-dom@18`.
+
+API Changes:
+* `react` and `react-dom` peer dependencies are now `"^16.8.0 || ^17.0.0 || ^18.0.0"`.
+
 7.1.0 - July 8, 2024
 ----------
 New Features:
-* Added a new `onLayoutStart` callback (SPL-254150). 
+* Added a new `onLayoutStart` callback (SPL-254150).
 * `AppBar` and `SplunkBar` default placeholder elements are now exported (SPL-254150).
 
 API Changes:
@@ -17,7 +33,7 @@ API Changes:
 
 7.0.0 - February 6, 2024
 ----------
-API Changes: 
+API Changes:
 * `@splunk/splunk-utils` dependency has been updated to `3.0.0`.
   * `3.0.0` no longer supports Search V1 for some endpoints and has had the fallback behavior for older versions of Splunk removed (SUI-5957).
   * `react-page` does not use these endpoints directly but apps leveraging `react-page` and search endpoints should use search V2. See the `@splunk/splunk-utils` CHANGELOG and [Semantic API Versioning](https://docs.splunk.com/Documentation/Splunk/9.1.2/RESTREF/RESTsearch#Semantic_API_versioning) for more details.

package/README.md

@@ -29,3 +29,13 @@ import MyPage from 'pages/MyPage';
 
 layout(<MyPage />, { pageTitle: 'A React Page', hideFooter: true, layout: 'fixed' });
 ```
+
+### React 18
+To use the new [createRoot](https://react.dev/reference/react-dom/client/createRoot#createroot) functionality introducted in React 18, use the `'@splunk/react-page/18'` import instead of `@splunk/react-page`.
+
+```js
+import layout from '@splunk/react-page/18';
+import MyPage from 'pages/MyPage';
+
+layout(<MyPage />, { pageTitle: 'A React Page', hideFooter: true, layout: 'fixed' });
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-page",
-  "version": "7.2.0",
+  "version": "8.0.0-beta.3",
   "description": "Load React components into the latest layout from Splunk Enterprise",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -21,9 +21,9 @@
     "test:cypress:ci": "node src/tests/run-cypress-tests.js"
   },
   "dependencies": {
-    "@splunk/react-ui": "^4.44.0",
+    "@splunk/react-ui": "5.0.0-beta.3",
     "@splunk/splunk-utils": "^3.2.0",
-    "@splunk/themes": "^0.23.0",
+    "@splunk/themes": "1.0.0-beta.3",
     "@splunk/ui-utils": "^1.8.0",
     "prop-types": "^15.6.2",
     "scriptjs": "^2.5.8"
@@ -33,7 +33,7 @@
     "@babel/eslint-parser": "^7.16.0",
     "@splunk/babel-preset": "^4.0.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "1.0.0-beta.21",
+    "@splunk/react-docs": "1.0.0-beta.21.v5.2",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/webpack-configs": "^7.0.2",
     "babel-loader": "^8.3.0",
@@ -49,8 +49,8 @@
     "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "execa": "^4.0.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "styled-components": "^5.3.10",
     "stylelint": "^15.11.0",
     "webpack": "^5.88.2",
@@ -59,8 +59,8 @@
     "webpack-merge": "^5.9.0"
   },
   "peerDependencies": {
-    "react": "^16.8",
-    "react-dom": "^16.8",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "styled-components": "^5.3.10"
   },
   "engines": {