@splunk/react-page 6.3.0 → 6.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/lib/index.js +373 -500
  3. package/package.json +12 -14
package/CHANGELOG.md CHANGED
@@ -1,6 +1,16 @@
1
1
  Change Log
2
2
  ============
3
3
 
4
+ 6.3.2 - October 11, 2023
5
+ ----------
6
+ Bug Fixes:
7
+ * This package should now load correctly in Webpack 4 environments (SUI-5802).
8
+
9
+ 6.3.1 - October 4, 2023
10
+ ----------
11
+ Bug Fixes:
12
+ * Background color of header will not flicker when fallback components are replaced with layout.
13
+
4
14
  6.3.0 - August 1, 2023
5
15
  ----------
6
16
  New Features:
package/lib/index.js CHANGED
@@ -1,367 +1,269 @@
1
- module.exports =
2
- /******/ (function(modules) { // webpackBootstrap
3
- /******/ // The module cache
4
- /******/ var installedModules = {};
5
- /******/
6
- /******/ // The require function
7
- /******/ function __webpack_require__(moduleId) {
8
- /******/
9
- /******/ // Check if module is in cache
10
- /******/ if(installedModules[moduleId]) {
11
- /******/ return installedModules[moduleId].exports;
12
- /******/ }
13
- /******/ // Create a new module (and put it into the cache)
14
- /******/ var module = installedModules[moduleId] = {
15
- /******/ i: moduleId,
16
- /******/ l: false,
17
- /******/ exports: {}
18
- /******/ };
19
- /******/
20
- /******/ // Execute the module function
21
- /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
22
- /******/
23
- /******/ // Flag the module as loaded
24
- /******/ module.l = true;
25
- /******/
26
- /******/ // Return the exports of the module
27
- /******/ return module.exports;
28
- /******/ }
29
- /******/
30
- /******/
31
- /******/ // expose the modules object (__webpack_modules__)
32
- /******/ __webpack_require__.m = modules;
33
- /******/
34
- /******/ // expose the module cache
35
- /******/ __webpack_require__.c = installedModules;
36
- /******/
37
- /******/ // define getter function for harmony exports
38
- /******/ __webpack_require__.d = function(exports, name, getter) {
39
- /******/ if(!__webpack_require__.o(exports, name)) {
40
- /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
41
- /******/ }
42
- /******/ };
43
- /******/
44
- /******/ // define __esModule on exports
45
- /******/ __webpack_require__.r = function(exports) {
46
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
47
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
48
- /******/ }
49
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
50
- /******/ };
51
- /******/
52
- /******/ // create a fake namespace object
53
- /******/ // mode & 1: value is a module id, require it
54
- /******/ // mode & 2: merge all properties of value into the ns
55
- /******/ // mode & 4: return value when already ns object
56
- /******/ // mode & 8|1: behave like require
57
- /******/ __webpack_require__.t = function(value, mode) {
58
- /******/ if(mode & 1) value = __webpack_require__(value);
59
- /******/ if(mode & 8) return value;
60
- /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
61
- /******/ var ns = Object.create(null);
62
- /******/ __webpack_require__.r(ns);
63
- /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
64
- /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
65
- /******/ return ns;
66
- /******/ };
67
- /******/
68
- /******/ // getDefaultExport function for compatibility with non-harmony modules
69
- /******/ __webpack_require__.n = function(module) {
70
- /******/ var getter = module && module.__esModule ?
71
- /******/ function getDefault() { return module['default']; } :
72
- /******/ function getModuleExports() { return module; };
73
- /******/ __webpack_require__.d(getter, 'a', getter);
74
- /******/ return getter;
75
- /******/ };
76
- /******/
77
- /******/ // Object.prototype.hasOwnProperty.call
78
- /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
79
- /******/
80
- /******/ // __webpack_public_path__
81
- /******/ __webpack_require__.p = "";
82
- /******/
83
- /******/
84
- /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 11);
86
- /******/ })
87
- /************************************************************************/
88
- /******/ ([
89
- /* 0 */
90
- /***/ (function(module, exports) {
91
-
92
- module.exports = require("react");
93
-
94
- /***/ }),
95
- /* 1 */
96
- /***/ (function(module, exports) {
97
-
98
- module.exports = require("@splunk/themes");
99
-
100
- /***/ }),
101
- /* 2 */
102
- /***/ (function(module, exports) {
103
-
104
- module.exports = require("styled-components");
105
-
106
- /***/ }),
107
- /* 3 */
108
- /***/ (function(module, exports) {
109
-
110
- module.exports = require("prop-types");
111
-
112
- /***/ }),
113
- /* 4 */
114
- /***/ (function(module, exports) {
115
-
116
- module.exports = require("@splunk/themes/SplunkThemeProvider");
117
-
118
- /***/ }),
119
- /* 5 */
120
- /***/ (function(module, exports) {
121
-
122
- module.exports = require("react-dom");
123
-
124
- /***/ }),
125
- /* 6 */
126
- /***/ (function(module, exports) {
127
-
128
- module.exports = require("scriptjs");
129
-
130
- /***/ }),
131
- /* 7 */
132
- /***/ (function(module, exports) {
133
-
134
- module.exports = require("@splunk/react-ui/Layer");
135
-
136
- /***/ }),
137
- /* 8 */
138
- /***/ (function(module, exports) {
139
-
140
- module.exports = require("@splunk/splunk-utils/url");
141
-
142
- /***/ }),
143
- /* 9 */
144
- /***/ (function(module, exports) {
145
-
146
- module.exports = require("@splunk/react-ui/ScreenReaderContent");
147
-
148
- /***/ }),
149
- /* 10 */
150
- /***/ (function(module, exports) {
151
-
152
- module.exports = require("@splunk/ui-utils/i18n");
153
-
154
- /***/ }),
155
- /* 11 */
156
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
157
-
158
- "use strict";
159
- // ESM COMPAT FLAG
160
- __webpack_require__.r(__webpack_exports__);
161
-
162
- // EXTERNAL MODULE: external "react-dom"
163
- var external_react_dom_ = __webpack_require__(5);
164
-
165
- // EXTERNAL MODULE: external "react"
166
- var external_react_ = __webpack_require__(0);
167
- var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
168
-
169
- // EXTERNAL MODULE: external "scriptjs"
170
- var external_scriptjs_ = __webpack_require__(6);
171
- var external_scriptjs_default = /*#__PURE__*/__webpack_require__.n(external_scriptjs_);
172
-
173
- // EXTERNAL MODULE: external "@splunk/react-ui/Layer"
174
- var Layer_ = __webpack_require__(7);
175
-
176
- // EXTERNAL MODULE: external "@splunk/splunk-utils/url"
177
- var url_ = __webpack_require__(8);
178
-
179
- // EXTERNAL MODULE: external "@splunk/themes/SplunkThemeProvider"
180
- var SplunkThemeProvider_ = __webpack_require__(4);
181
- var SplunkThemeProvider_default = /*#__PURE__*/__webpack_require__.n(SplunkThemeProvider_);
182
-
183
- // EXTERNAL MODULE: external "styled-components"
184
- var external_styled_components_ = __webpack_require__(2);
185
- var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
186
-
187
- // EXTERNAL MODULE: external "@splunk/themes"
188
- var themes_ = __webpack_require__(1);
189
-
190
- // CONCATENATED MODULE: ./src/LoadingStyles.js
191
- function _templateObject6() {
192
- var data = _taggedTemplateLiteral(["\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"]);
193
-
194
- _templateObject6 = function _templateObject6() {
195
- return data;
196
- };
197
-
198
- return data;
199
- }
200
-
201
- function _templateObject5() {
202
- var data = _taggedTemplateLiteral(["\n color: ", ";\n padding-top: 30vh;\n text-align: center;\n min-height: 400px;\n"]);
203
-
204
- _templateObject5 = function _templateObject5() {
205
- return data;
206
- };
207
-
208
- return data;
209
- }
210
-
211
- function _templateObject4() {
212
- var data = _taggedTemplateLiteral(["\n background-color: ", ";\n min-height: ", "px;\n"]);
213
-
214
- _templateObject4 = function _templateObject4() {
215
- return data;
216
- };
217
-
218
- return data;
219
- }
220
-
221
- function _templateObject3() {
222
- var data = _taggedTemplateLiteral(["\n padding: 0;\n background-color: ", ";\n height: ", "px;\n"]);
223
-
224
- _templateObject3 = function _templateObject3() {
225
- return data;
226
- };
227
-
228
- return data;
229
- }
230
-
231
- function _templateObject2() {
232
- var data = _taggedTemplateLiteral(["\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"]);
233
-
234
- _templateObject2 = function _templateObject2() {
235
- return data;
236
- };
237
-
238
- return data;
239
- }
240
-
241
- function _templateObject() {
242
- var data = _taggedTemplateLiteral(["\n 0% {\n opacity: 0.2;\n }\n\n 20% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0.2;\n }\n"]);
243
-
244
- _templateObject = function _templateObject() {
245
- return data;
246
- };
247
-
248
- return data;
249
- }
250
-
251
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
252
-
253
-
254
-
255
- var APPBAR_HEIGHT = 45;
256
- var SPLUNKBAR_HEIGHT = 34;
257
- var blink = Object(external_styled_components_["keyframes"])(_templateObject());
258
- var Main = external_styled_components_default.a.div(_templateObject2(), themes_["variables"].backgroundColorPage);
259
- var SplunkBar = external_styled_components_default.a.div(_templateObject3(), Object(themes_["pick"])({
260
- prisma: themes_["variables"].backgroundColorSection,
261
- enterprise: themes_["variables"].gray20
262
- }), SPLUNKBAR_HEIGHT);
263
- var AppBar = external_styled_components_default.a.div(_templateObject4(), Object(themes_["pick"])({
264
- prisma: themes_["variables"].backgroundColorPopup,
265
- enterprise: themes_["variables"].gray30
266
- }), APPBAR_HEIGHT);
267
- var AppBody = external_styled_components_default.a.div(_templateObject5(), themes_["variables"].contentColorInverted);
268
- var Dot = external_styled_components_default.a.div(_templateObject6(), blink, themes_["variables"].neutral500, Object(themes_["pick"])({
269
- prisma: themes_["variables"].spacingMedium,
270
- enterprise: themes_["variables"].spacingHalf
271
- }));
272
-
273
- // EXTERNAL MODULE: external "prop-types"
274
- var external_prop_types_ = __webpack_require__(3);
275
- var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
276
-
277
- // EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
278
- var ScreenReaderContent_ = __webpack_require__(9);
279
- var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
280
-
281
- // EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
282
- var i18n_ = __webpack_require__(10);
283
-
284
- // CONCATENATED MODULE: ./src/Loading.jsx
285
-
286
-
287
-
288
-
289
-
290
- var propTypes = {
291
- hideAppBar: external_prop_types_default.a.bool,
292
- hideChrome: external_prop_types_default.a.bool,
293
- hideSplunkBar: external_prop_types_default.a.bool,
294
- AppBarFallback: external_prop_types_default.a.elementType,
295
- SplunkBarFallback: external_prop_types_default.a.elementType
296
- };
297
- var defaultProps = {
298
- hideAppBar: false,
299
- hideChrome: false,
300
- hideSplunkBar: false,
301
- AppBarFallback: AppBar,
302
- SplunkBarFallback: SplunkBar
303
- };
304
-
305
- function Loading(_ref) {
306
- var hideAppBar = _ref.hideAppBar,
307
- hideChrome = _ref.hideChrome,
308
- hideSplunkBar = _ref.hideSplunkBar,
309
- SplunkBarFallback = _ref.SplunkBarFallback,
310
- AppBarFallback = _ref.AppBarFallback;
311
- return /*#__PURE__*/external_react_default.a.createElement(Main, null, !hideChrome && !hideSplunkBar && /*#__PURE__*/external_react_default.a.createElement(SplunkBarFallback, null), !hideChrome && !hideAppBar && /*#__PURE__*/external_react_default.a.createElement(AppBarFallback, null), /*#__PURE__*/external_react_default.a.createElement(AppBody, null, /*#__PURE__*/external_react_default.a.createElement(Dot, null), /*#__PURE__*/external_react_default.a.createElement(Dot, null), /*#__PURE__*/external_react_default.a.createElement(Dot, null), /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Object(i18n_["_"])('Loading'))));
312
- }
313
-
314
- Loading.propTypes = propTypes;
315
- Loading.defaultProps = defaultProps;
316
- /* harmony default export */ var src_Loading = (Loading);
317
- // CONCATENATED MODULE: ./src/baseLayout.jsx
318
- 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; }
319
-
320
- 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; }
321
-
322
-
323
-
324
-
325
-
326
-
327
-
328
-
329
- var LIGHT_LAYOUT = 'build/api/layout.js';
330
- var DARK_LAYOUT = 'build/api/layout-dark.js';
331
- var HEADER_SELECTOR = 'header[data-view="splunkjs/mvc/headerview"]';
332
- /**
1
+ /******/ (() => {
2
+ // webpackBootstrap
3
+ /******/ "use strict";
4
+ /******/ // The require scope
5
+ /******/ var e = {};
6
+ /******/
7
+ /************************************************************************/
8
+ /******/ /* webpack/runtime/compat get default export */
9
+ /******/ (() => {
10
+ /******/ // getDefaultExport function for compatibility with non-harmony modules
11
+ /******/ e.n = n => {
12
+ /******/ var r = n && n.__esModule ?
13
+ /******/ () => n["default"]
14
+ /******/ : () => n
15
+ /******/;
16
+ e.d(r, {
17
+ a: r
18
+ });
19
+ /******/ return r;
20
+ /******/ };
21
+ /******/ })();
22
+ /******/
23
+ /******/ /* webpack/runtime/define property getters */
24
+ /******/ (() => {
25
+ /******/ // define getter functions for harmony exports
26
+ /******/ e.d = (n, r) => {
27
+ /******/ for (var t in r) {
28
+ /******/ if (e.o(r, t) && !e.o(n, t)) {
29
+ /******/ Object.defineProperty(n, t, {
30
+ enumerable: true,
31
+ get: r[t]
32
+ });
33
+ /******/ }
34
+ /******/ }
35
+ /******/ };
36
+ /******/ })();
37
+ /******/
38
+ /******/ /* webpack/runtime/hasOwnProperty shorthand */
39
+ /******/ (() => {
40
+ /******/ e.o = (e, n) => Object.prototype.hasOwnProperty.call(e, n)
41
+ /******/;
42
+ })();
43
+ /******/
44
+ /******/ /* webpack/runtime/make namespace object */
45
+ /******/ (() => {
46
+ /******/ // define __esModule on exports
47
+ /******/ e.r = e => {
48
+ /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
49
+ /******/ Object.defineProperty(e, Symbol.toStringTag, {
50
+ value: "Module"
51
+ });
52
+ /******/ }
53
+ /******/ Object.defineProperty(e, "__esModule", {
54
+ value: true
55
+ });
56
+ /******/ };
57
+ /******/ })();
58
+ /******/
59
+ /************************************************************************/ var n = {};
60
+ // ESM COMPAT FLAG
61
+ e.r(n);
62
+ // EXPORTS
63
+ e.d(n, {
64
+ default: () => /* binding */ X
65
+ });
66
+ // CONCATENATED MODULE: external "react-dom"
67
+ const r = require("react-dom");
68
+ // CONCATENATED MODULE: external "react"
69
+ const t = require("react");
70
+ var a = e.n(t);
71
+ // CONCATENATED MODULE: external "scriptjs"
72
+ const i = require("scriptjs");
73
+ var o = e.n(i);
74
+ // CONCATENATED MODULE: external "@splunk/react-ui/Layer"
75
+ const l = require("@splunk/react-ui/Layer");
76
+ // CONCATENATED MODULE: external "@splunk/splunk-utils/url"
77
+ const u = require("@splunk/splunk-utils/url");
78
+ // CONCATENATED MODULE: external "@splunk/themes/SplunkThemeProvider"
79
+ const c = require("@splunk/themes/SplunkThemeProvider");
80
+ var d = e.n(c);
81
+ // CONCATENATED MODULE: external "styled-components"
82
+ const p = require("styled-components");
83
+ var s = e.n(p);
84
+ // CONCATENATED MODULE: external "@splunk/themes"
85
+ const v = require("@splunk/themes");
86
+ // CONCATENATED MODULE: ./src/LoadingStyles.js
87
+ function f() {
88
+ 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" ]);
89
+ f = function n() {
90
+ return e;
91
+ };
92
+ return e;
93
+ }
94
+ function m() {
95
+ var e = k([ "\n color: ", ";\n padding-top: 30vh;\n text-align: center;\n min-height: 400px;\n" ]);
96
+ m = function n() {
97
+ return e;
98
+ };
99
+ return e;
100
+ }
101
+ function h() {
102
+ var e = k([ "\n background-color: ", ";\n min-height: ", "px;\n" ]);
103
+ h = function n() {
104
+ return e;
105
+ };
106
+ return e;
107
+ }
108
+ function b() {
109
+ var e = k([ "\n padding: 0;\n background-color: ", ";\n height: ", "px;\n" ]);
110
+ b = function n() {
111
+ return e;
112
+ };
113
+ return e;
114
+ }
115
+ function y() {
116
+ 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" ]);
117
+ y = function n() {
118
+ return e;
119
+ };
120
+ return e;
121
+ }
122
+ function g() {
123
+ 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" ]);
124
+ g = function n() {
125
+ return e;
126
+ };
127
+ return e;
128
+ }
129
+ function k(e, n) {
130
+ if (!n) {
131
+ n = e.slice(0);
132
+ }
133
+ return Object.freeze(Object.defineProperties(e, {
134
+ raw: {
135
+ value: Object.freeze(n)
136
+ }
137
+ }));
138
+ }
139
+ var S = 45;
140
+ var j = 34;
141
+ var w = (0, p.keyframes)(g());
142
+ var E = s().div(y(), v.variables.backgroundColorPage);
143
+ var C = s().div(b(), (0, v.pick)({
144
+ prisma: v.variables.backgroundColorSection,
145
+ enterprise: v.variables.gray20
146
+ }), j);
147
+ var B = s().div(h(), (0, v.pick)({
148
+ prisma: v.variables.backgroundColorPopup,
149
+ enterprise: v.variables.gray30
150
+ }), S);
151
+ var x = s().div(m(), v.variables.contentColorInverted);
152
+ var q = s().div(f(), w, v.variables.neutral500, (0, v.pick)({
153
+ prisma: v.variables.spacingMedium,
154
+ enterprise: v.variables.spacingHalf
155
+ }));
156
+ // CONCATENATED MODULE: external "prop-types"
157
+ const O = require("prop-types");
158
+ var A = e.n(O);
159
+ // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
160
+ const P = require("@splunk/react-ui/ScreenReaderContent");
161
+ var F = e.n(P);
162
+ // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
163
+ const _ = require("@splunk/ui-utils/i18n");
164
+ // CONCATENATED MODULE: ./src/Loading.jsx
165
+ var L = {
166
+ hideAppBar: A().bool,
167
+ hideChrome: A().bool,
168
+ hideSplunkBar: A().bool,
169
+ AppBarFallback: A().elementType,
170
+ SplunkBarFallback: A().elementType
171
+ };
172
+ var T = {
173
+ hideAppBar: false,
174
+ hideChrome: false,
175
+ hideSplunkBar: false,
176
+ AppBarFallback: B,
177
+ SplunkBarFallback: C
178
+ };
179
+ function H(e) {
180
+ var n = e.hideAppBar, r = e.hideChrome, t = e.hideSplunkBar, i = e.SplunkBarFallback, o = e.AppBarFallback;
181
+
182
+ return a().createElement(E, null, !r && !t && a().createElement(i, null), !r && !n && a().createElement(o, null), a().createElement(x, null, a().createElement(q, null), a().createElement(q, null), a().createElement(q, null), a().createElement(F(), null, (0,
183
+ _._)("Loading"))));
184
+ }
185
+ H.propTypes = L;
186
+ H.defaultProps = T;
187
+ /* harmony default export */ const M = H;
188
+ // CONCATENATED MODULE: ./src/baseLayout.jsx
189
+ function z(e, n) {
190
+ if (e == null) return {};
191
+ var r = G(e, n);
192
+ var t, a;
193
+ if (Object.getOwnPropertySymbols) {
194
+ var i = Object.getOwnPropertySymbols(e);
195
+ for (a = 0; a < i.length; a++) {
196
+ t = i[a];
197
+ if (n.indexOf(t) >= 0) continue;
198
+ if (!Object.prototype.propertyIsEnumerable.call(e, t)) continue;
199
+ r[t] = e[t];
200
+ }
201
+ }
202
+ return r;
203
+ }
204
+ function G(e, n) {
205
+ if (e == null) return {};
206
+ var r = {};
207
+ var t = Object.keys(e);
208
+ var a, i;
209
+ for (i = 0; i < t.length; i++) {
210
+ a = t[i];
211
+ if (n.indexOf(a) >= 0) continue;
212
+ r[a] = e[a];
213
+ }
214
+ return r;
215
+ }
216
+ var I = "build/api/layout.js";
217
+ var R = "build/api/layout-dark.js";
218
+ var U = 'header[data-view="splunkjs/mvc/headerview"]';
219
+ /**
333
220
  * Loads the layout from the server, using requirejs if available on the window and scriptjs if not.
334
221
  *
335
222
  * @param {Function} callback - A callback invoked with the layout module once resolved.
336
223
  * @param {object} [options]
337
224
  * @param {String} [options.loader = 'scriptjs'] - Configures the loader used for the loading the layout - available loaders are "scriptjs" and "requirejs".
338
225
  * @private
339
- */
340
-
341
- function getLayoutApi(theme, callback) {
342
- var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
343
- _ref$loader = _ref.loader,
344
- loader = _ref$loader === void 0 ? 'scriptjs' : _ref$loader;
345
-
346
- var themedLayout = theme === 'dark' ? DARK_LAYOUT : LIGHT_LAYOUT;
347
- var url = Object(url_["createStaticURL"])(themedLayout);
348
-
349
- if (loader === 'scriptjs') {
350
- external_scriptjs_default()(url, function () {
351
- // eslint-disable-next-line no-underscore-dangle
352
- callback(window.__splunk_layout__);
353
- });
354
- } else if (loader === 'requirejs') {
355
- if (window.requirejs) {
356
- window.requirejs([url], callback);
357
- } else {
358
- throw new Error('Error in react-page: options.loader = "requirejs" was set but window.requirejs does not exist.');
226
+ */ function N(e, n) {
227
+ var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}, t = r.loader, a = t === void 0 ? "scriptjs" : t;
228
+ var i = e === "dark" ? R : I;
229
+ var l = (0, u.createStaticURL)(i);
230
+ if (a === "scriptjs") {
231
+ o()(l, (function() {
232
+ // eslint-disable-next-line no-underscore-dangle
233
+ n(window.__splunk_layout__);
234
+ }));
235
+ } else if (a === "requirejs") {
236
+ if (window.requirejs) {
237
+ window.requirejs([ l ], n);
238
+ } else {
239
+ throw new Error('Error in react-page: options.loader = "requirejs" was set but window.requirejs does not exist.');
240
+ }
241
+ } else {
242
+ throw new Error('Invalid options.loader configuration: must be "scriptjs" or "requirejs".');
243
+ }
359
244
  }
360
- } else {
361
- throw new Error('Invalid options.loader configuration: must be "scriptjs" or "requirejs".');
362
- }
363
- }
364
- /**
245
+ /**
246
+ * Computes the background css of the header container during lazy loading
247
+ *
248
+ * @param {HTMLDivElement} headerContainer
249
+ * @param {object} [options]
250
+ * @private
251
+ */ function D(e) {
252
+ var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
253
+ var r = n.hideSplunkBar, t = n.hideAppBar, a = n.headerHeight;
254
+ var i = e.children[0];
255
+ var o = i && getComputedStyle(i).backgroundColor;
256
+ if (!(r || t)) {
257
+ // compute background color to be same as both fallback components
258
+ var l = i === null || i === void 0 ? void 0 : i.offsetHeight;
259
+ var u = e.children[1];
260
+ var c = u && getComputedStyle(u).backgroundColor;
261
+ var d = Math.round(l / a * 100);
262
+ return "linear-gradient(\n ".concat(o, " 0%,\n ").concat(o, " ").concat(d, "%,\n ").concat(c, " ").concat(d, "%,\n ").concat(c, " 100%\n )");
263
+ }
264
+ return o;
265
+ }
266
+ /**
365
267
  * renders body element and attaches it to container node in DOM
366
268
  *
367
269
  * @param {element} element
@@ -370,16 +272,13 @@ function getLayoutApi(theme, callback) {
370
272
  * @param {boolean} useGlobalLayerStack
371
273
  * @param {object} splunkTheme
372
274
  * @private
373
- */
374
-
375
-
376
- function renderBody(element, render, container) {
377
- var useGlobalLayerStack = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
378
- var splunkTheme = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
379
- 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);
380
- return render(wrappedElement, container);
381
- }
382
- /**
275
+ */ function J(e, n, r) {
276
+ var t = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
277
+ var i = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
278
+ var o = t ? a().createElement(l.LayerStackGlobalProvider, null, a().createElement(d(), i, e)) : a().createElement(d(), i, e);
279
+ return n(o, r);
280
+ }
281
+ /**
383
282
  * Renders a React element into the Layout API.
384
283
  * @public
385
284
  * @param {element} element - A React element.
@@ -403,130 +302,109 @@ function renderBody(element, render, container) {
403
302
  * @param {element} [options.SplunkBarFallback = SplunkBar] - A React element used as a placeholder for the splunk bar while the navigation bar is loading.
404
303
  * @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
405
304
  * @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
406
- */
407
-
408
-
409
- function layout(element, render) {
410
- var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
411
-
412
- var _ref2$useGlobalLayerS = _ref2.useGlobalLayerStack,
413
- useGlobalLayerStack = _ref2$useGlobalLayerS === void 0 ? true : _ref2$useGlobalLayerS,
414
- pageTitle = _ref2.pageTitle,
415
- _ref2$theme = _ref2.theme,
416
- theme = _ref2$theme === void 0 ? 'light' : _ref2$theme,
417
- _ref2$loader = _ref2.loader,
418
- loader = _ref2$loader === void 0 ? 'scriptjs' : _ref2$loader,
419
- layoutAPIOptions = _objectWithoutProperties(_ref2, ["useGlobalLayerStack", "pageTitle", "theme", "loader"]);
420
-
421
- if (pageTitle) {
422
- document.title = pageTitle;
423
- }
424
-
425
- var hideChrome = layoutAPIOptions.hideChrome,
426
- hideAppBar = layoutAPIOptions.hideAppBar,
427
- hideSplunkBar = layoutAPIOptions.hideSplunkBar,
428
- _layoutAPIOptions$Spl = layoutAPIOptions.SplunkBarFallback,
429
- SplunkBarFallback = _layoutAPIOptions$Spl === void 0 ? SplunkBar : _layoutAPIOptions$Spl,
430
- _layoutAPIOptions$App = layoutAPIOptions.AppBarFallback,
431
- AppBarFallback = _layoutAPIOptions$App === void 0 ? AppBar : _layoutAPIOptions$App,
432
- _layoutAPIOptions$laz = layoutAPIOptions.lazyLoadLayout,
433
- lazyLoadLayout = _layoutAPIOptions$laz === void 0 ? false : _layoutAPIOptions$laz,
434
- onLayoutComplete = layoutAPIOptions.onLayoutComplete;
435
- var bodyContainer = document.createElement('div');
436
- var headerContainer = document.createElement('div'); // The "theme" in enterprise used to be "enterprise" instead of "light"...
437
-
438
- var colorScheme = theme === 'light' || theme === 'enterprise' ? 'light' : 'dark';
439
- var splunkTheme = {
440
- family: 'enterprise',
441
- colorScheme: colorScheme,
442
- density: 'comfortable'
443
- };
444
- var bodyRoot;
445
- var headerRoot;
446
-
447
- if (lazyLoadLayout) {
448
- // render the React app immediately without waiting for layout API
449
- document.body.appendChild(headerContainer);
450
- 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
451
-
452
- var headerHeight = headerContainer.offsetHeight;
453
- headerContainer.style.cssText = "height: ".concat(headerHeight, "px");
454
- document.body.appendChild(bodyContainer);
455
- bodyRoot = renderBody(element, render, bodyContainer, useGlobalLayerStack, splunkTheme);
456
- } else {
457
- document.body.appendChild(bodyContainer);
458
- bodyRoot = render( /*#__PURE__*/external_react_default.a.createElement(SplunkThemeProvider_default.a, splunkTheme, /*#__PURE__*/external_react_default.a.createElement(src_Loading, layoutAPIOptions)), bodyContainer);
459
- }
460
-
461
- getLayoutApi(theme, function (layoutApi) {
462
- var containerEl;
463
-
464
- if (layoutApi) {
465
- containerEl = layoutApi.create(layoutAPIOptions).getContainerElement();
466
-
467
- if (layoutAPIOptions.layout === 'fixed') {
468
- // the above create method adds flex: 1 0 0
469
- // IE 11 disregards 0px shorthand for flex-basis component.
470
- // flex-basis 0% is better than 0px because css minification can remove px
471
- if (!containerEl.style.flex || containerEl.style.flex === '1 0 0px') {
472
- containerEl.style.flex = '1 0 0%';
473
- } // all elements in the hierarchy must have 'overflow: hidden' for children
474
- // to support scrolling correctly.
475
-
476
-
477
- if (!containerEl.style.overflow) {
478
- containerEl.style.overflow = 'hidden';
479
- } // splunk hijacks the width of the body when printing, so we have to force width to the size
480
- // of the viewport so that things print at the correct width
481
-
482
-
483
- if (!containerEl.style.width) {
484
- containerEl.style.width = '100vw';
305
+ */ function K(e, n) {
306
+ var r = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
307
+ var t = r.useGlobalLayerStack, i = t === void 0 ? true : t, o = r.pageTitle, l = r.theme, u = l === void 0 ? "light" : l, c = r.loader, p = c === void 0 ? "scriptjs" : c, s = z(r, [ "useGlobalLayerStack", "pageTitle", "theme", "loader" ]);
308
+ if (o) {
309
+ document.title = o;
485
310
  }
486
- }
487
- } else {
488
- // eslint-disable-next-line no-console
489
- console.error('Unable to load layout.');
490
- containerEl = document.createElement('div');
491
- document.body.appendChild(containerEl);
492
- }
493
-
494
- if (lazyLoadLayout) {
495
- // replace placeholder nav bar with real nav bar
496
- headerRoot.unmount(headerContainer);
497
- var header = document.querySelector(HEADER_SELECTOR);
498
- var containerHeight = (!hideChrome && !hideSplunkBar ? SPLUNKBAR_HEIGHT : 0) + (!hideChrome && !hideAppBar ? APPBAR_HEIGHT : 0);
499
- headerContainer.style.cssText = "height: ".concat(containerHeight, "px");
500
- headerContainer.appendChild(header);
501
- containerEl.appendChild(bodyContainer);
502
- onLayoutComplete === null || onLayoutComplete === void 0 ? void 0 : onLayoutComplete();
503
- } else {
504
- setTimeout(function () {
505
- bodyRoot.unmount(bodyContainer);
506
- bodyRoot = renderBody(element, render, bodyContainer, useGlobalLayerStack, splunkTheme);
507
- containerEl.appendChild(bodyContainer);
508
- onLayoutComplete === null || onLayoutComplete === void 0 ? void 0 : onLayoutComplete();
509
- }, 30);
510
- }
511
- }, {
512
- loader: loader
513
- });
514
- }
515
-
516
- /* harmony default export */ var baseLayout = (layout);
517
- // CONCATENATED MODULE: ./src/index.jsx
518
-
519
-
520
-
521
- var src_renderShim = function renderShim(elementToRender, container) {
522
- Object(external_react_dom_["render"])(elementToRender, container);
523
- return {
524
- unmount: function unmount() {
525
- return Object(external_react_dom_["unmountComponentAtNode"])(container);
311
+ var v = s.hideChrome, f = s.hideAppBar, m = s.hideSplunkBar, h = s.SplunkBarFallback, b = h === void 0 ? C : h, y = s.AppBarFallback, g = y === void 0 ? B : y, k = s.lazyLoadLayout, w = k === void 0 ? false : k, E = s.onLayoutComplete;
312
+ var x = document.createElement("div");
313
+ var q = document.createElement("div");
314
+ // The "theme" in enterprise used to be "enterprise" instead of "light"...
315
+ var O = u === "light" || u === "enterprise" ? "light" : "dark";
316
+ var A = {
317
+ family: "enterprise",
318
+ colorScheme: O,
319
+ density: "comfortable"
320
+ };
321
+ var P;
322
+ var F;
323
+ if (w) {
324
+ // render the React app immediately without waiting for layout API
325
+ if (!v) {
326
+ document.body.appendChild(q);
327
+ F = n( a().createElement(a().Fragment, null, !m && a().createElement(b, null), !f && a().createElement(g, null)), q);
328
+ // explicitly set height and background of header container to avoid layout and color shift when fallback gets replaced
329
+ var _ = q.offsetHeight;
330
+ var L = D(q, {
331
+ hideSplunkBar: m,
332
+ hideAppBar: f,
333
+ headerHeight: _,
334
+ AppBarFallback: g,
335
+ SplunkBarFallback: b
336
+ });
337
+ q.style.height = "".concat(_, "px");
338
+ q.style.background = "".concat(L);
339
+ }
340
+ document.body.appendChild(x);
341
+ P = J(e, n, x, i, A);
342
+ } else {
343
+ document.body.appendChild(x);
344
+ P = n( a().createElement(d(), A, a().createElement(M, s)), x);
345
+ }
346
+ N(u, (function(r) {
347
+ var t;
348
+ if (r) {
349
+ t = r.create(s).getContainerElement();
350
+ if (s.layout === "fixed") {
351
+ // the above create method adds flex: 1 0 0
352
+ // IE 11 disregards 0px shorthand for flex-basis component.
353
+ // flex-basis 0% is better than 0px because css minification can remove px
354
+ if (!t.style.flex || t.style.flex === "1 0 0px") {
355
+ t.style.flex = "1 0 0%";
356
+ }
357
+ // all elements in the hierarchy must have 'overflow: hidden' for children
358
+ // to support scrolling correctly.
359
+ if (!t.style.overflow) {
360
+ t.style.overflow = "hidden";
361
+ }
362
+ // splunk hijacks the width of the body when printing, so we have to force width to the size
363
+ // of the viewport so that things print at the correct width
364
+ if (!t.style.width) {
365
+ t.style.width = "100vw";
366
+ }
367
+ }
368
+ } else {
369
+ // eslint-disable-next-line no-console
370
+ console.error("Unable to load layout.");
371
+ t = document.createElement("div");
372
+ document.body.appendChild(t);
373
+ }
374
+ if (w) {
375
+ if (!v) {
376
+ // replace placeholder nav bar with real nav bar
377
+ F.unmount(q);
378
+ var a = document.querySelector(U);
379
+ var o = (!v && !m ? j : 0) + (!v && !f ? S : 0);
380
+ q.style.height = "".concat(o, "px");
381
+ q.appendChild(a);
382
+ }
383
+ t.appendChild(x);
384
+ E === null || E === void 0 ? void 0 : E();
385
+ } else {
386
+ setTimeout((function() {
387
+ P.unmount(x);
388
+ P = J(e, n, x, i, A);
389
+ t.appendChild(x);
390
+ E === null || E === void 0 ? void 0 : E();
391
+ }), 30);
392
+ }
393
+ }), {
394
+ loader: p
395
+ });
526
396
  }
527
- };
528
- };
529
- /**
397
+ /* harmony default export */ const Q = K;
398
+ // CONCATENATED MODULE: ./src/index.jsx
399
+ var V = function e(n, t) {
400
+ (0, r.render)(n, t);
401
+ return {
402
+ unmount: function e() {
403
+ return (0, r.unmountComponentAtNode)(t);
404
+ }
405
+ };
406
+ };
407
+ /**
530
408
  * Renders a React element into the Layout API.
531
409
  * @public
532
410
  * @param {element} element - A React element.
@@ -549,14 +427,9 @@ var src_renderShim = function renderShim(elementToRender, container) {
549
427
  * @param {element} [options.SplunkBarFallback = SplunkBar] - A React element used as a placeholder for the splunk bar while the navigation bar is loading.
550
428
  * @param {element} [options.AppBarFallback = AppBar] - A React element used as a placeholder for the app bar while the navigation bar is loading.
551
429
  * @param {function} [options.onLayoutComplete] - A callback function which executes after layout API is fetched and compiled.
552
- */
553
-
554
-
555
- function src_layout(element, options) {
556
- baseLayout(element, src_renderShim, options);
557
- }
558
-
559
- /* harmony default export */ var src = __webpack_exports__["default"] = (src_layout);
560
-
561
- /***/ })
562
- /******/ ]);
430
+ */ function W(e, n) {
431
+ Q(e, V, n);
432
+ }
433
+ /* harmony default export */ const X = W;
434
+ module.exports = n;
435
+ /******/})();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@splunk/react-page",
3
- "version": "6.3.0",
3
+ "version": "6.3.2",
4
4
  "description": "Load React components into the latest layout from Splunk Enterprise",
5
5
  "main": "lib/index.js",
6
6
  "license": "Apache-2.0",
@@ -8,8 +8,8 @@
8
8
  "scripts": {
9
9
  "build": "cross-env NODE_ENV=production webpack",
10
10
  "docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
11
- "docs:publish": "cicd-publish-docs docs --force",
12
- "docs:publish:external": "cicd-publish-docs docs-external --force --suffix=public",
11
+ "docs:publish": "eval $(splunk-docs-package docs) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
12
+ "docs:publish:external": "eval $(splunk-docs-package docs-external --suffix=public) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
13
13
  "docs:start": "webpack serve --config docs.gen.webpack.config.js",
14
14
  "eslint": "eslint src --ext \".js,.jsx\"",
15
15
  "eslint:fix": "eslint src --ext \".js, .jsx\" --fix",
@@ -22,9 +22,9 @@
22
22
  "test:cypress:ci": "node src/tests/run-cypress-tests.js"
23
23
  },
24
24
  "dependencies": {
25
- "@splunk/react-ui": "^4.19.0",
25
+ "@splunk/react-ui": "^4.21.1",
26
26
  "@splunk/splunk-utils": "^2.3.4",
27
- "@splunk/themes": "^0.16.1",
27
+ "@splunk/themes": "^0.16.3",
28
28
  "@splunk/ui-utils": "^1.6.0",
29
29
  "prop-types": "^15.6.2",
30
30
  "scriptjs": "^2.5.8"
@@ -32,19 +32,18 @@
32
32
  "devDependencies": {
33
33
  "@babel/core": "^7.2.0",
34
34
  "@splunk/babel-preset": "^4.0.0",
35
- "@splunk/cicd-tools": "^0.5.0",
36
35
  "@splunk/eslint-config": "^4.0.0",
37
36
  "@splunk/stylelint-config": "^4.0.0",
38
- "@splunk/webpack-configs": "^6.0.0",
37
+ "@splunk/webpack-configs": "^7.0.1",
39
38
  "babel-eslint": "^10.1.0",
40
- "babel-loader": "^8.0.4",
39
+ "babel-loader": "^8.3.0",
41
40
  "babel-plugin-transform-imports": "^2.0.0",
42
41
  "cross-env": "^6.0.3",
43
42
  "cypress": "^12.17.1",
44
43
  "eslint": "^7.14.0",
45
44
  "eslint-config-airbnb": "^18.2.1",
46
45
  "eslint-config-prettier": "^6.15.0",
47
- "eslint-import-resolver-webpack": "^0.13.0",
46
+ "eslint-import-resolver-webpack": "^0.13.4",
48
47
  "eslint-plugin-import": "^2.22.1",
49
48
  "eslint-plugin-jsx-a11y": "^6.4.1",
50
49
  "eslint-plugin-react": "^7.21.5",
@@ -52,13 +51,12 @@
52
51
  "execa": "^4.0.0",
53
52
  "react": "^16.12.0",
54
53
  "react-dom": "^16.12.0",
55
- "style-loader": "^0.23.1",
56
54
  "styled-components": "^5.3.10",
57
55
  "stylelint": "^13.0.0",
58
- "webpack": "^4.16.2",
59
- "webpack-cli": "^4.9.2",
60
- "webpack-dev-server": "^4.7.4",
61
- "webpack-merge": "^4.1.3"
56
+ "webpack": "^5.88.2",
57
+ "webpack-cli": "^5.1.4",
58
+ "webpack-dev-server": "^4.15.1",
59
+ "webpack-merge": "^5.9.0"
62
60
  },
63
61
  "peerDependencies": {
64
62
  "react": "^16.8",