@splunk/react-page 5.1.0 → 6.0.0

package/CHANGELOG.md

@@ -1,6 +1,32 @@
 Change Log
 ============
 
+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:
+* Pinned `styled-components@5.1.1` to avoid breaking changes introduced in `styled-components@5.2.0`.
+
+  **`@splunk/react-page` is incompatible with styled-components version(s) `^5.2.0`**.
+
+  `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
+----------
+Notes:
+* Remove IE browser testing from functional tests.
+
 5.1.0 - September 8, 2021
 ----------
 New Features:

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,8 +327,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * @private
  */
 
-function getLayoutApi(callback) {
-  var url = Object(url_["createStaticURL"])('build/api/layout.js');
+function getLayoutApi(theme, callback) {
+  var themedLayout = theme === 'dark' ? DARK_LAYOUT : LIGHT_LAYOUT;
+  var url = Object(url_["createStaticURL"])(themedLayout);
 
   if (window.requirejs) {
     window.requirejs([url], callback);
@@ -362,9 +355,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 +365,24 @@ 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');
+  var splunkTheme = {
+    family: 'enterprise',
+    colorScheme: theme,
+    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 +418,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,6 +1,6 @@
 {
   "name": "@splunk/react-page",
-  "version": "5.1.0",
+  "version": "6.0.0",
   "description": "Load React components into the latest layout from Splunk Enterprise",
   "main": "lib/index.js",
   "license": "Apache-2.0",
@@ -17,13 +17,15 @@
     "test:functional:prepare": "node src/tests/helpers/prepare_environment.js 8.0.3",
     "test:functional": "yarn run test:functional:prepare && splunk-wdio-functional-test-runner functional.local.conf.js",
     "test:functional:ci": "yarn run test:functional:prepare && splunk-wdio-functional-test-runner functional.ci.conf.js",
-    "test:functional:cloud": "yarn run test:functional:prepare && splunk-wdio-functional-test-runner functional.cloud.conf.js"
+    "test:functional:cloud": "yarn run test:functional:prepare && splunk-wdio-functional-test-runner functional.cloud.conf.js",
+    "test:cypress": "echo TODO: SUI-3442",
+    "test:cypress:ci": "echo TODO: SUI-3442"
   },
   "dependencies": {
-    "@splunk/react-ui": "^4.3.0",
-    "@splunk/splunk-utils": "^2.1.0",
-    "@splunk/themes": "^0.9.0",
-    "@splunk/ui-utils": "^1.4.0",
+    "@splunk/react-ui": "^4.10.0",
+    "@splunk/splunk-utils": "^2.2.0",
+    "@splunk/themes": "^0.11.0",
+    "@splunk/ui-utils": "^1.5.0",
     "prop-types": "^15.6.2",
     "scriptjs": "^2.5.8"
   },
@@ -49,7 +51,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "style-loader": "^0.23.1",
-    "styled-components": "^5.1.1",
+    "styled-components": "5.1.1",
     "stylelint": "^13.0.0",
     "webpack": "^4.16.2",
     "webpack-cli": "^3.1.0",
@@ -58,7 +60,7 @@
   "peerDependencies": {
     "react": "^16.8",
     "react-dom": "^16.8",
-    "styled-components": "^5.1"
+    "styled-components": "5.1.1"
   },
   "engines": {
     "node": ">=6"