@splunk/react-page 6.2.0 → 6.3.0

package/CHANGELOG.md

@@ -1,6 +1,11 @@
 Change Log
 ============
 
+6.3.0 - August 1, 2023
+----------
+New Features:
+* `options.onLayoutComplete` parameter supports a callback function which executes after layout API is fetched and compiled.
+
 6.2.0 - July 27, 2023
 ----------
 New Features:

package/lib/index.js

@@ -107,19 +107,19 @@ module.exports = require("styled-components");
 /* 3 */
 /***/ (function(module, exports) {
 
-module.exports = require("react-dom");
+module.exports = require("prop-types");
 
 /***/ }),
 /* 4 */
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("@splunk/themes/SplunkThemeProvider");
 
 /***/ }),
 /* 5 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/SplunkThemeProvider");
+module.exports = require("react-dom");
 
 /***/ }),
 /* 6 */
@@ -159,13 +159,13 @@ module.exports = require("@splunk/ui-utils/i18n");
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
+// EXTERNAL MODULE: external "react-dom"
+var external_react_dom_ = __webpack_require__(5);
+
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(0);
 var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
 
-// EXTERNAL MODULE: external "react-dom"
-var external_react_dom_ = __webpack_require__(3);
-
 // EXTERNAL MODULE: external "scriptjs"
 var external_scriptjs_ = __webpack_require__(6);
 var external_scriptjs_default = /*#__PURE__*/__webpack_require__.n(external_scriptjs_);
@@ -177,7 +177,7 @@ var Layer_ = __webpack_require__(7);
 var url_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/themes/SplunkThemeProvider"
-var SplunkThemeProvider_ = __webpack_require__(5);
+var SplunkThemeProvider_ = __webpack_require__(4);
 var SplunkThemeProvider_default = /*#__PURE__*/__webpack_require__.n(SplunkThemeProvider_);
 
 // EXTERNAL MODULE: external "styled-components"
@@ -271,7 +271,7 @@ var Dot = external_styled_components_default.a.div(_templateObject6(), blink, th
 }));
 
 // EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(4);
+var external_prop_types_ = __webpack_require__(3);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
@@ -314,7 +314,7 @@ function Loading(_ref) {
 Loading.propTypes = propTypes;
 Loading.defaultProps = defaultProps;
 /* harmony default export */ var src_Loading = (Loading);
-// CONCATENATED MODULE: ./src/index.jsx
+// CONCATENATED MODULE: ./src/baseLayout.jsx
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -326,7 +326,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-
 var LIGHT_LAYOUT = 'build/api/layout.js';
 var DARK_LAYOUT = 'build/api/layout-dark.js';
 var HEADER_SELECTOR = 'header[data-view="splunkjs/mvc/headerview"]';
@@ -366,6 +365,7 @@ function getLayoutApi(theme, callback) {
  * 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
@@ -373,16 +373,17 @@ function getLayoutApi(theme, callback) {
  */
 
 
-function renderBody(element, container) {
-  var useGlobalLayerStack = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var splunkTheme = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+function renderBody(element, render, container) {
+  var useGlobalLayerStack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var splunkTheme = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
   var wrappedElement = useGlobalLayerStack ? /*#__PURE__*/external_react_default.a.createElement(Layer_["LayerStackGlobalProvider"], null, /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, element)) : /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, element);
-  Object(external_react_dom_["render"])(wrappedElement, container);
+  return render(wrappedElement, container);
 }
 /**
  * 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.
@@ -401,11 +402,12 @@ function renderBody(element, container) {
  * @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 layout(element) {
-  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function layout(element, render) {
+  var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
   var _ref2$useGlobalLayerS = _ref2.useGlobalLayerStack,
       useGlobalLayerStack = _ref2$useGlobalLayerS === void 0 ? true : _ref2$useGlobalLayerS,
@@ -428,7 +430,8 @@ function layout(element) {
       _layoutAPIOptions$App = layoutAPIOptions.AppBarFallback,
       AppBarFallback = _layoutAPIOptions$App === void 0 ? AppBar : _layoutAPIOptions$App,
       _layoutAPIOptions$laz = layoutAPIOptions.lazyLoadLayout,
-      lazyLoadLayout = _layoutAPIOptions$laz === void 0 ? false : _layoutAPIOptions$laz;
+      lazyLoadLayout = _layoutAPIOptions$laz === void 0 ? false : _layoutAPIOptions$laz,
+      onLayoutComplete = layoutAPIOptions.onLayoutComplete;
   var bodyContainer = document.createElement('div');
   var headerContainer = document.createElement('div'); // The "theme" in enterprise used to be "enterprise" instead of "light"...
 
@@ -438,19 +441,21 @@ function layout(element) {
     colorScheme: colorScheme,
     density: 'comfortable'
   };
+  var bodyRoot;
+  var headerRoot;
 
   if (lazyLoadLayout) {
     // render the React app immediately without waiting for layout API
     document.body.appendChild(headerContainer);
-    Object(external_react_dom_["render"])( /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, !hideChrome && !hideSplunkBar && /*#__PURE__*/external_react_default.a.createElement(SplunkBarFallback, null), !hideChrome && !hideAppBar && /*#__PURE__*/external_react_default.a.createElement(AppBarFallback, null)), headerContainer); // explicitly set height of header container to avoid layout shift when fallback gets replaced
+    headerRoot = render( /*#__PURE__*/external_react_default.a.createElement(external_react_default.a.Fragment, null, !hideChrome && !hideSplunkBar && /*#__PURE__*/external_react_default.a.createElement(SplunkBarFallback, null), !hideChrome && !hideAppBar && /*#__PURE__*/external_react_default.a.createElement(AppBarFallback, null)), headerContainer); // explicitly set height of header container to avoid layout shift when fallback gets replaced
 
     var headerHeight = headerContainer.offsetHeight;
     headerContainer.style.cssText = "height: ".concat(headerHeight, "px");
     document.body.appendChild(bodyContainer);
-    renderBody(element, bodyContainer, useGlobalLayerStack, splunkTheme);
+    bodyRoot = renderBody(element, render, bodyContainer, useGlobalLayerStack, splunkTheme);
   } else {
     document.body.appendChild(bodyContainer);
-    Object(external_react_dom_["render"])( /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, /*#__PURE__*/external_react_default.a.createElement(src_Loading, layoutAPIOptions)), bodyContainer);
+    bodyRoot = render( /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, /*#__PURE__*/external_react_default.a.createElement(src_Loading, layoutAPIOptions)), bodyContainer);
   }
 
   getLayoutApi(theme, function (layoutApi) {
@@ -488,17 +493,19 @@ function layout(element) {
 
     if (lazyLoadLayout) {
       // replace placeholder nav bar with real nav bar
-      Object(external_react_dom_["unmountComponentAtNode"])(headerContainer);
+      headerRoot.unmount(headerContainer);
       var header = document.querySelector(HEADER_SELECTOR);
       var containerHeight = (!hideChrome && !hideSplunkBar ? SPLUNKBAR_HEIGHT : 0) + (!hideChrome && !hideAppBar ? APPBAR_HEIGHT : 0);
       headerContainer.style.cssText = "height: ".concat(containerHeight, "px");
       headerContainer.appendChild(header);
       containerEl.appendChild(bodyContainer);
+      onLayoutComplete === null || onLayoutComplete === void 0 ? void 0 : onLayoutComplete();
     } else {
       setTimeout(function () {
-        Object(external_react_dom_["unmountComponentAtNode"])(bodyContainer);
-        renderBody(element, bodyContainer, useGlobalLayerStack, splunkTheme);
+        bodyRoot.unmount(bodyContainer);
+        bodyRoot = renderBody(element, render, bodyContainer, useGlobalLayerStack, splunkTheme);
         containerEl.appendChild(bodyContainer);
+        onLayoutComplete === null || onLayoutComplete === void 0 ? void 0 : onLayoutComplete();
       }, 30);
     }
   }, {
@@ -506,7 +513,50 @@ function layout(element) {
   });
 }
 
-/* harmony default export */ var src = __webpack_exports__["default"] = (layout);
+/* harmony default export */ var baseLayout = (layout);
+// CONCATENATED MODULE: ./src/index.jsx
+
+
+
+var src_renderShim = function renderShim(elementToRender, container) {
+  Object(external_react_dom_["render"])(elementToRender, container);
+  return {
+    unmount: function unmount() {
+      return Object(external_react_dom_["unmountComponentAtNode"])(container);
+    }
+  };
+};
+/**
+ * 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 src_layout(element, options) {
+  baseLayout(element, src_renderShim, options);
+}
+
+/* harmony default export */ var src = __webpack_exports__["default"] = (src_layout);
 
 /***/ })
 /******/ ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-page",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "Load React components into the latest layout from Splunk Enterprise",
   "main": "lib/index.js",
   "license": "Apache-2.0",
@@ -22,7 +22,7 @@
     "test:cypress:ci": "node src/tests/run-cypress-tests.js"
   },
   "dependencies": {
-    "@splunk/react-ui": "^4.18.0",
+    "@splunk/react-ui": "^4.19.0",
     "@splunk/splunk-utils": "^2.3.4",
     "@splunk/themes": "^0.16.1",
     "@splunk/ui-utils": "^1.6.0",