@splunk/react-page 7.1.0 → 7.2.0

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 Change Log
 ============
 
+7.2.0 - April 1, 2025
+----------
+New Features:
+* Added support for `themeFamily` and `themeDensity` options (SPL-273100).
+
 7.1.0 - July 8, 2024
 ----------
 New Features:

package/index.js

@@ -61,9 +61,9 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        AppBar: () => /* reexport */ y,
-        SplunkBar: () => /* reexport */ b,
-        default: () => /* binding */ X
+        AppBar: () => /* reexport */ b,
+        SplunkBar: () => /* reexport */ y,
+        default: () => /* binding */ W
     });
     // CONCATENATED MODULE: external "react-dom"
     const r = require("react-dom");
@@ -116,108 +116,92 @@
         return e;
     }
     function s(e, n) {
-        if (!n) {
-            n = e.slice(0);
-        }
-        return Object.freeze(Object.defineProperties(e, {
+        return n || (n = e.slice(0)), Object.freeze(Object.defineProperties(e, {
             raw: {
                 value: Object.freeze(n)
             }
         }));
     }
     var v = 45;
-    var f = 34;
-    var h = (0, t.keyframes)(p());
-    var m = a().div(d(), i.variables.backgroundColorPage);
-    var b = a().div(c(), (0, i.pick)({
+    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
-    }), f);
-    var y = a().div(u(), (0, i.pick)({
+    }), 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(), h, i.variables.neutral500, (0, i.pick)({
+    var k = a().div(o(), f, i.variables.neutral500, (0, i.pick)({
         prisma: i.variables.spacingMedium,
-        enterprise: i.variables.spacingHalf
+        enterprise: i.variables.spacingSmall
     }));
     // CONCATENATED MODULE: external "react"
     const S = require("react");
-    var j =  e.n(S);
+    var w =  e.n(S);
     // CONCATENATED MODULE: external "scriptjs"
-    const w = require("scriptjs");
-    var C =  e.n(w);
+    const C = require("scriptjs");
+    var E =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
-    const B = require("@splunk/react-ui/Layer");
+    const j = require("@splunk/react-ui/Layer");
     // CONCATENATED MODULE: external "@splunk/splunk-utils/url"
-    const E = require("@splunk/splunk-utils/url");
+    const B = require("@splunk/splunk-utils/url");
     // CONCATENATED MODULE: external "@splunk/themes/SplunkThemeProvider"
-    const x = require("@splunk/themes/SplunkThemeProvider");
-    var q =  e.n(x);
+    const q = require("@splunk/themes/SplunkThemeProvider");
+    var x =  e.n(q);
     // CONCATENATED MODULE: external "prop-types"
     const O = require("prop-types");
-    var A =  e.n(O);
+    var P =  e.n(O);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const P = require("@splunk/react-ui/ScreenReaderContent");
-    var F =  e.n(P);
+    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");
     // CONCATENATED MODULE: ./src/Loading.jsx
     var _ = {
-        hideAppBar: A().bool,
-        hideChrome: A().bool,
-        hideSplunkBar: A().bool,
-        AppBarFallback: A().elementType,
-        SplunkBarFallback: A().elementType
-    };
-    var T = {
-        hideAppBar: false,
-        hideChrome: false,
-        hideSplunkBar: false,
-        AppBarFallback: y,
-        SplunkBarFallback: b
+        hideAppBar: P().bool,
+        hideChrome: P().bool,
+        hideSplunkBar: P().bool,
+        AppBarFallback: P().elementType,
+        SplunkBarFallback: P().elementType
     };
-    function H(e) {
-        var n = e.hideAppBar, r = e.hideChrome, t = e.hideSplunkBar, a = e.SplunkBarFallback, i = e.AppBarFallback;
+    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;
         
-        return j().createElement(m, null, !r && !t &&  j().createElement(a, null), !r && !n &&  j().createElement(i, null),  j().createElement(g, null,  j().createElement(k, null),  j().createElement(k, null),  j().createElement(k, null),  j().createElement(F(), null, (0, 
+        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"))));
     }
-    H.propTypes = _;
-    H.defaultProps = T;
-    /* harmony default export */    const M = H;
+    T.propTypes = _;
+    /* harmony default export */    const H = T;
     // CONCATENATED MODULE: ./src/baseLayout.jsx
-    function z(e, n) {
-        if (e == null) return {};
-        var r = G(e, n);
-        var t, a;
+    function M(e, n) {
+        if (null == e) return {};
+        var r, t, a = z(e, n);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (a = 0; a < i.length; a++) {
-                t = i[a];
-                if (n.indexOf(t) >= 0) continue;
-                if (!Object.prototype.propertyIsEnumerable.call(e, t)) continue;
-                r[t] = e[t];
+            for (t = 0; t < i.length; t++) {
+                r = i[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
-        return r;
+        return a;
     }
-    function G(e, n) {
-        if (e == null) return {};
+    function z(e, n) {
+        if (null == e) return {};
         var r = {};
-        var t = Object.keys(e);
-        var a, i;
-        for (i = 0; i < t.length; i++) {
-            a = t[i];
-            if (n.indexOf(a) >= 0) continue;
-            r[a] = e[a];
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
+            }
         }
         return r;
     }
-    var I = "build/api/layout.js";
-    var R = "build/api/layout-dark.js";
-    var U = 'header[data-view="splunkjs/mvc/headerview"]';
+    var G = "build/api/layout.js";
+    var I = "build/api/layout-dark.js";
+    var D = 'header[data-view="splunkjs/mvc/headerview"]';
     /**
  * Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
  *
@@ -225,12 +209,12 @@
  * @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 N(e, n) {
+ */    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" ? R : I;
-        var o = (0, E.createStaticURL)(i);
+        var i = e === "dark" ? I : G;
+        var o = (0, B.createStaticURL)(i);
         if (a === "scriptjs") {
-            C()(o, (function() {
+            E()(o, (function() {
                 // eslint-disable-next-line no-underscore-dangle
                 n(window.__splunk_layout__);
             }));
@@ -250,7 +234,7 @@
  * @param {HTMLDivElement} headerContainer
  * @param {object} [options]
  * @private
- */    function D(e) {
+ */    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];
@@ -274,10 +258,10 @@
  * @param {boolean} useGlobalLayerStack
  * @param {object} splunkTheme
  * @private
- */    function J(e, n, r) {
+ */    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 ?  j().createElement(B.LayerStackGlobalProvider, null,  j().createElement(q(), a, e)) :  j().createElement(q(), a, e);
+        var i = t ?  w().createElement(j.LayerStackGlobalProvider, null,  w().createElement(x(), a, e)) :  w().createElement(x(), a, e);
         return n(i, r);
     }
     /**
@@ -298,74 +282,76 @@
  * 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) {
+ */    function J(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.loader, c = u === void 0 ? "scriptjs" : u, d = z(r, [ "useGlobalLayerStack", "pageTitle", "theme", "loader" ]);
+        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 p = d.hideChrome, s = d.hideAppBar, h = d.hideSplunkBar, m = d.SplunkBarFallback, g = m === void 0 ? b : m, k = d.AppBarFallback, S = k === void 0 ? y : k, w = d.lazyLoadLayout, C = w === void 0 ? false : w, B = d.onLayoutComplete, E = d.onLayoutStart;
-        var x = document.createElement("div");
-        var O = document.createElement("div");
-        E === null || E === void 0 ? void 0 : E({
-            headerContainer: O,
-            bodyContainer: x
+        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 A = document.createElement("div");
+        var F = document.createElement("div");
+        P === null || P === void 0 ? void 0 : P({
+            headerContainer: F,
+            bodyContainer: A
         });
- // The "theme" in enterprise used to be "enterprise" instead of "light"...
-                var A = l === "light" || l === "enterprise" ? "light" : "dark";
-        var P = {
-            family: "enterprise",
-            colorScheme: A,
-            density: "comfortable"
+        // The "theme" in enterprise used to be "enterprise" instead of "light"...
+                var L = l === "light" || l === "enterprise" ? "light" : "dark";
+        var _ = {
+            family: h,
+            colorScheme: L,
+            density: u || (h === "prisma" ? "compact" : "comfortable")
         };
-        var F;
-        var L;
-        if (C) {
+        var T;
+        var z;
+        if (q) {
             // render the React app immediately without waiting for layout API
-            if (!p) {
-                document.body.appendChild(O);
-                L = n( j().createElement(j().Fragment, null, !h &&  j().createElement(g, null), !s &&  j().createElement(S, null)), O);
- // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
-                                var _ = O.offsetHeight;
-                var T = D(O, {
-                    hideSplunkBar: h,
-                    hideAppBar: s,
-                    headerHeight: _,
-                    AppBarFallback: S,
-                    SplunkBarFallback: g
+            if (!s) {
+                document.body.appendChild(F);
+                z = n( w().createElement(w().Fragment, null, !k &&  w().createElement(C, null), !g &&  w().createElement(j, null)), F);
+                // 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, {
+                    hideSplunkBar: k,
+                    hideAppBar: g,
+                    headerHeight: G,
+                    AppBarFallback: j,
+                    SplunkBarFallback: C
                 });
-                O.style.height = "".concat(_, "px");
-                O.style.background = "".concat(T);
+                F.style.height = "".concat(G, "px");
+                F.style.background = "".concat(I);
             }
-            document.body.appendChild(x);
-            F = J(e, n, x, a, P);
+            document.body.appendChild(A);
+            T = N(e, n, A, a, _);
         } else {
-            document.body.appendChild(x);
-            F = n( j().createElement(q(), P,  j().createElement(M, d)), x);
+            document.body.appendChild(A);
+            T = n( w().createElement(x(), _,  w().createElement(H, p)), A);
         }
-        N(l, (function(r) {
+        R(l, (function(r) {
             var t;
             if (r) {
-                t = r.create(d).getContainerElement();
-                if (d.layout === "fixed") {
+                t = r.create(p).getContainerElement();
+                if (p.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
+                    // 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
+                    // 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";
@@ -377,34 +363,34 @@
                 t = document.createElement("div");
                 document.body.appendChild(t);
             }
-            if (C) {
-                if (!p) {
+            if (q) {
+                if (!s) {
                     // replace placeholder nav bar with real nav bar
-                    L.unmount(O);
-                    var i = document.querySelector(U);
-                    var o = (!p && !h ? f : 0) + (!p && !s ? v : 0);
- // set a min-height for basic nav bar components and auto height for any additional components like global banner
-                                        O.style.minHeight = "".concat(o, "px");
-                    O.style.height = "auto";
-                    O.appendChild(i);
+                    z.unmount(F);
+                    var i = document.querySelector(D);
+                    var o = (!s && !k ? m : 0) + (!s && !g ? v : 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);
                 }
-                t.appendChild(x);
-                B === null || B === void 0 ? void 0 : B();
+                t.appendChild(A);
+                O === null || O === void 0 ? void 0 : O();
             } else {
                 setTimeout((function() {
-                    F.unmount(x);
-                    F = J(e, n, x, a, P);
-                    t.appendChild(x);
-                    B === null || B === void 0 ? void 0 : B();
+                    T.unmount(A);
+                    T = N(e, n, A, a, _);
+                    t.appendChild(A);
+                    O === null || O === void 0 ? void 0 : O();
                 }), 30);
             }
         }), {
-            loader: c
+            loader: d
         });
     }
-    /* harmony default export */    const Q = K;
+    /* harmony default export */    const K = J;
     // CONCATENATED MODULE: ./src/index.jsx
-    var V = function e(n, t) {
+    var Q = function e(n, t) {
         (0, r.render)(n, t);
         return {
             unmount: function e() {
@@ -429,6 +415,8 @@
  * 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).
@@ -436,9 +424,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 W(e, n) {
-        Q(e, V, n);
+ */    function V(e, n) {
+        K(e, Q, n);
     }
-    /* harmony default export */    const X = W;
+    /* harmony default export */    const W = V;
     module.exports = n;
     /******/})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-page",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Load React components into the latest layout from Splunk Enterprise",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -21,37 +21,38 @@
     "test:cypress:ci": "node src/tests/run-cypress-tests.js"
   },
   "dependencies": {
-    "@splunk/react-ui": "^4.33.0",
-    "@splunk/splunk-utils": "^3.1.0",
-    "@splunk/themes": "^0.19.0",
-    "@splunk/ui-utils": "^1.6.0",
+    "@splunk/react-ui": "^4.44.0",
+    "@splunk/splunk-utils": "^3.2.0",
+    "@splunk/themes": "^0.23.0",
+    "@splunk/ui-utils": "^1.8.0",
     "prop-types": "^15.6.2",
     "scriptjs": "^2.5.8"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.0",
+    "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.0",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/eslint-config": "^4.0.0",
-    "@splunk/stylelint-config": "^4.0.0",
+    "@splunk/eslint-config": "^5.0.0",
+    "@splunk/react-docs": "1.0.0-beta.21",
+    "@splunk/stylelint-config": "^5.0.0",
     "@splunk/webpack-configs": "^7.0.2",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-imports": "^2.0.0",
     "cross-env": "^6.0.3",
     "cypress": "^12.17.1",
-    "eslint": "^7.14.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^6.15.0",
+    "eslint": "^8.57.1",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-webpack": "^0.13.4",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-import": "^2.30.1",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "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",
     "styled-components": "^5.3.10",
-    "stylelint": "^13.0.0",
+    "stylelint": "^15.11.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",