@splunk/react-page 5.2.1 → 6.0.2

package/CHANGELOG.md

@@ -1,6 +1,23 @@
 Change Log
 ============
 
+6.0.2 - September 6, 2022
+----------
+* Fixes an issue where an external requirejs dependency would fail loading Splunk Core APIs.
+
+6.0.1 - August 2, 2022
+----------
+* Fix backwards compatibility issue to support default theme of "enterprise".
+
+6.0.0 - June 29, 2022
+----------
+API Changes:
+* `loadingThemeOverride` option has been removed and replaced with `theme`.
+* The Layout API now renders the appropriate `SplunkThemeProvider` so you don't have to.
+Notes:
+* The `layout` API can now be themed with a light or dark theme.
+* To determine the user's current theme preference for the layout API, use the `getUserTheme` function available in versions 2.2.0 and above of `@splunk/splunk-utils/themes`.
+
 5.2.1 - April 5, 2022
 ----------
 API Changes:
@@ -10,7 +27,7 @@ API Changes:
 
   `styled-components@5.2.0` changed how selectors like `& + &` are compiled; [styled-components PR#3236](https://github.com/styled-components/styled-components/pull/3236).
   This breaks styles that worked in previous versions of styled-components; [styled-components issue #3265](https://github.com/styled-components/styled-components/issues/3265).
-  
+
   **Until noted otherwise in a future release of `@splunk/react-page` do not use `styled-components@^5.2.0` with` @splunk/react-page`**.
 
 5.2.0 - February 23, 2022

package/lib/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 12);
+/******/ 	return __webpack_require__(__webpack_require__.s = 11);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -113,13 +113,13 @@ module.exports = require("react-dom");
 /* 4 */
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("@splunk/themes/SplunkThemeProvider");
 
 /***/ }),
 /* 5 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/splunk-utils/themes");
+module.exports = require("prop-types");
 
 /***/ }),
 /* 6 */
@@ -143,22 +143,16 @@ module.exports = require("@splunk/splunk-utils/url");
 /* 9 */
 /***/ (function(module, exports) {
 
-module.exports = require("@splunk/themes/SplunkThemeProvider");
-
-/***/ }),
-/* 10 */
-/***/ (function(module, exports) {
-
 module.exports = require("@splunk/react-ui/ScreenReaderContent");
 
 /***/ }),
-/* 11 */
+/* 10 */
 /***/ (function(module, exports) {
 
 module.exports = require("@splunk/ui-utils/i18n");
 
 /***/ }),
-/* 12 */
+/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -183,29 +177,26 @@ var Layer_ = __webpack_require__(7);
 var url_ = __webpack_require__(8);
 
 // EXTERNAL MODULE: external "@splunk/themes/SplunkThemeProvider"
-var SplunkThemeProvider_ = __webpack_require__(9);
+var SplunkThemeProvider_ = __webpack_require__(4);
 var SplunkThemeProvider_default = /*#__PURE__*/__webpack_require__.n(SplunkThemeProvider_);
 
-// EXTERNAL MODULE: external "@splunk/splunk-utils/themes"
-var themes_ = __webpack_require__(5);
-
 // EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(4);
+var external_prop_types_ = __webpack_require__(5);
 var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
 
 // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(10);
+var ScreenReaderContent_ = __webpack_require__(9);
 var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
 
 // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
-var i18n_ = __webpack_require__(11);
+var i18n_ = __webpack_require__(10);
 
 // EXTERNAL MODULE: external "styled-components"
 var external_styled_components_ = __webpack_require__(2);
 var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
 
 // EXTERNAL MODULE: external "@splunk/themes"
-var external_splunk_themes_ = __webpack_require__(1);
+var themes_ = __webpack_require__(1);
 
 // CONCATENATED MODULE: ./src/LoadingStyles.js
 function _templateObject6() {
@@ -273,19 +264,19 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 
 var blink = Object(external_styled_components_["keyframes"])(_templateObject());
-var Main = external_styled_components_default.a.div(_templateObject2(), external_splunk_themes_["variables"].backgroundColorPage);
-var SplunkBar = external_styled_components_default.a.div(_templateObject3(), Object(external_splunk_themes_["pick"])({
-  prisma: external_splunk_themes_["variables"].backgroundColorSection,
-  enterprise: external_splunk_themes_["variables"].gray20
+var Main = external_styled_components_default.a.div(_templateObject2(), themes_["variables"].backgroundColorPage);
+var SplunkBar = external_styled_components_default.a.div(_templateObject3(), Object(themes_["pick"])({
+  prisma: themes_["variables"].backgroundColorSection,
+  enterprise: themes_["variables"].gray20
 }));
-var AppBar = external_styled_components_default.a.div(_templateObject4(), Object(external_splunk_themes_["pick"])({
-  prisma: external_splunk_themes_["variables"].backgroundColorPopup,
-  enterprise: external_splunk_themes_["variables"].gray30
+var AppBar = external_styled_components_default.a.div(_templateObject4(), Object(themes_["pick"])({
+  prisma: themes_["variables"].backgroundColorPopup,
+  enterprise: themes_["variables"].gray30
 }));
-var AppBody = external_styled_components_default.a.div(_templateObject5(), external_splunk_themes_["variables"].contentColorInverted);
-var Dot = external_styled_components_default.a.div(_templateObject6(), blink, external_splunk_themes_["variables"].neutral500, Object(external_splunk_themes_["pick"])({
-  prisma: external_splunk_themes_["variables"].spacingMedium,
-  enterprise: external_splunk_themes_["variables"].spacingHalf
+var AppBody = external_styled_components_default.a.div(_templateObject5(), themes_["variables"].contentColorInverted);
+var Dot = external_styled_components_default.a.div(_templateObject6(), blink, themes_["variables"].neutral500, Object(themes_["pick"])({
+  prisma: themes_["variables"].spacingMedium,
+  enterprise: themes_["variables"].spacingHalf
 }));
 
 // CONCATENATED MODULE: ./src/Loading.jsx
@@ -327,7 +318,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 
 
-
+var LIGHT_LAYOUT = 'build/api/layout.js';
+var DARK_LAYOUT = 'build/api/layout-dark.js';
 /**
  * Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
  *
@@ -335,17 +327,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * @private
  */
 
-function getLayoutApi(callback) {
-  var url = Object(url_["createStaticURL"])('build/api/layout.js');
-
-  if (window.requirejs) {
-    window.requirejs([url], callback);
-  } else {
-    external_scriptjs_default()(url, function () {
-      // eslint-disable-next-line no-underscore-dangle
-      callback(window.__splunk_layout__);
-    });
-  }
+function getLayoutApi(theme, callback) {
+  var themedLayout = theme === 'dark' ? DARK_LAYOUT : LIGHT_LAYOUT;
+  var url = Object(url_["createStaticURL"])(themedLayout);
+  external_scriptjs_default()(url, function () {
+    // eslint-disable-next-line no-underscore-dangle
+    callback(window.__splunk_layout__);
+  });
 }
 /**
  * Renders a React element into the Layout API.
@@ -362,9 +350,8 @@ function getLayoutApi(callback) {
  * @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 {string} [options.loadingThemeOverride] - Allows the theme provided by Splunk Enterprise to the loading screen
- * to be overridden with `enterprise` or `enterpriseDark`.
  * @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".
  */
 
 
@@ -373,20 +360,26 @@ function layout(element) {
 
   var _ref$useGlobalLayerSt = _ref.useGlobalLayerStack,
       useGlobalLayerStack = _ref$useGlobalLayerSt === void 0 ? true : _ref$useGlobalLayerSt,
-      loadingThemeOverride = _ref.loadingThemeOverride,
       pageTitle = _ref.pageTitle,
-      layoutAPIOptions = _objectWithoutProperties(_ref, ["useGlobalLayerStack", "loadingThemeOverride", "pageTitle"]);
-
-  var loadingContainer = document.createElement('div');
-  var loadingTheme = Object(themes_["getThemeOptions"])(loadingThemeOverride || Object(themes_["defaultTheme"])());
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'light' : _ref$theme,
+      layoutAPIOptions = _objectWithoutProperties(_ref, ["useGlobalLayerStack", "pageTitle", "theme"]);
 
   if (pageTitle) {
     document.title = pageTitle;
   }
 
+  var loadingContainer = document.createElement('div'); // The "theme" in enterprise used to be "enterprise" instead of "light"...
+
+  var colorScheme = theme === 'light' || theme === 'enterprise' ? 'light' : 'dark';
+  var splunkTheme = {
+    family: 'enterprise',
+    colorScheme: colorScheme,
+    density: 'comfortable'
+  };
   document.body.appendChild(loadingContainer);
-  Object(external_react_dom_["render"])( /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, loadingTheme, /*#__PURE__*/external_react_default.a.createElement(src_Loading, layoutAPIOptions)), loadingContainer);
-  getLayoutApi(function (layoutApi) {
+  Object(external_react_dom_["render"])( /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, /*#__PURE__*/external_react_default.a.createElement(src_Loading, layoutAPIOptions)), loadingContainer);
+  getLayoutApi(theme, function (layoutApi) {
     var containerEl;
 
     if (layoutApi) {
@@ -422,7 +415,7 @@ function layout(element) {
     setTimeout(function () {
       Object(external_react_dom_["unmountComponentAtNode"])(loadingContainer);
       loadingContainer.parentNode.removeChild(loadingContainer);
-      var wrappedElement = useGlobalLayerStack ? /*#__PURE__*/external_react_default.a.createElement(Layer_["LayerStackGlobalProvider"], null, element) : element;
+      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, containerEl);
     }, 30);
   });

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@splunk/react-page",
-  "version": "5.2.1",
+  "version": "6.0.2",
   "description": "Load React components into the latest layout from Splunk Enterprise",
   "main": "lib/index.js",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --bail",
+    "build": "cross-env NODE_ENV=production webpack",
+    "docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
+    "docs:publish": "cicd-publish-docs docs --force",
+    "docs:start": "webpack serve --config docs.gen.webpack.config.js",
     "eslint": "eslint src --ext \".js,.jsx\"",
     "eslint:fix": "eslint src --ext \".js, .jsx\" --fix",
     "eslint:ci": "yarn run eslint -- -f junit -o test-reports/lint-results.xml",
@@ -22,16 +25,17 @@
     "test:cypress:ci": "echo TODO: SUI-3442"
   },
   "dependencies": {
-    "@splunk/react-ui": "^4.6.0",
-    "@splunk/splunk-utils": "^2.1.0",
-    "@splunk/themes": "^0.10.1",
-    "@splunk/ui-utils": "^1.4.0",
+    "@splunk/react-ui": "^4.12.0",
+    "@splunk/splunk-utils": "^2.2.2",
+    "@splunk/themes": "^0.13.0",
+    "@splunk/ui-utils": "^1.5.0",
     "prop-types": "^15.6.2",
     "scriptjs": "^2.5.8"
   },
   "devDependencies": {
     "@babel/core": "^7.2.0",
     "@splunk/babel-preset": "^3.0.0",
+    "@splunk/cicd-tools": "^0.4.0",
     "@splunk/eslint-config": "^4.0.0",
     "@splunk/stylelint-config": "^4.0.0",
     "@splunk/wdio-functional-test-runner": "^10.1.0",
@@ -54,7 +58,8 @@
     "styled-components": "5.1.1",
     "stylelint": "^13.0.0",
     "webpack": "^4.16.2",
-    "webpack-cli": "^3.1.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^4.1.3"
   },
   "peerDependencies": {