@splunk/react-ui 5.2.0 → 5.3.0

package/Code.js

@@ -934,8 +934,8 @@
                                     return;
                                 }
                                 var m = g[f];
-                                var h = m.inside;
-                                var v = !!m.lookbehind;
+                                var v = m.inside;
+                                var h = !!m.lookbehind;
                                 var E = !!m.greedy;
                                 var b = m.alias;
                                 if (E && !m.pattern.global) {
@@ -961,7 +961,7 @@
  // this is the to parameter of removeBetween
                                                                         var N;
                                     if (E) {
-                                        N = o(S, T, e, v);
+                                        N = o(S, T, e, h);
                                         if (!N || N.index >= e.length) {
                                             break;
                                         }
@@ -991,7 +991,7 @@
                                                                                 I = e.slice(T, k);
                                         N.index -= T;
                                     } else {
-                                        N = o(S, 0, I, v);
+                                        N = o(S, 0, I, h);
                                         if (!N) {
                                             continue;
                                         }
@@ -1011,7 +1011,7 @@
                                         T += w.length;
                                     }
                                     p(t, P, O);
-                                    var _ = new s(d, h ? i.tokenize(F, h) : F, b, F);
+                                    var _ = new s(d, v ? i.tokenize(F, v) : F, b, F);
                                     A = c(t, P, _);
                                     if (C) {
                                         c(t, A, C);
@@ -2249,7 +2249,7 @@
                 n.r(r);
         // EXPORTS
                 n.d(r, {
-            default: () => /* reexport */ re
+            default: () => /* reexport */ ae
         });
         // EXTERNAL MODULE: external "react"
                 var e = n(9497);
@@ -2273,31 +2273,36 @@
         const f = require("prop-types");
         var m =  n.n(f);
         // CONCATENATED MODULE: external "styled-components"
-        const h = require("styled-components");
-        var v =  n.n(h);
+        const v = require("styled-components");
+        var h =  n.n(v);
         // CONCATENATED MODULE: external "@splunk/themes"
         const E = require("@splunk/themes");
         // CONCATENATED MODULE: ./src/Code/CodeStyles.ts
-        var b = "1.429em";
-        var y = v().pre.withConfig({
-            displayName: "CodeStyles__StyledPre",
-            componentId: "sc-1eq4k68-0"
-        })([ "", ";", ";line-height:", ";position:relative;gap:", ";text-align:left;tab-size:4;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;hyphens:none;overflow-x:auto;&:focus-visible{box-shadow:", ";}", "" ], E.mixins.reset("grid"), E.mixins.typography("monoBody"), b, E.variables.spacingMedium, E.variables.focusShadow, (function(e) {
-            var t = e.$showLineNumbers, n = e.$counterReset;
-            return t && (0, h.css)([ "grid-template-columns:min-content auto;counter-reset:linenumber ", ";" ], n);
-        }));
-        var S = v().code.withConfig({
+        var b = "lineHeightSpacious";
+        var y = "spacingLarge";
+        var S = h().code.withConfig({
             displayName: "CodeStyles__StyledCode",
-            componentId: "sc-1eq4k68-1"
+            componentId: "sc-1eq4k68-0"
         })([ "font-family:", ";position:relative;z-index:1;", ";" ], E.variables.monoFontFamily, (function(e) {
             var t = e.$isPlaintext;
-            return !t && (0, h.css)([ "color:", ";" ], E.variables.syntaxTeal);
+            return !t && (0, v.css)([ "color:", ";" ], E.variables.syntaxTeal);
         }));
-        var A = v().span.withConfig({
+        var A = h().pre.withConfig({
+            displayName: "CodeStyles__StyledPre",
+            componentId: "sc-1eq4k68-1"
+        })([ "", ";", ";line-height:", ";position:relative;text-align:left;tab-size:4;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;hyphens:none;overflow-x:auto;&:focus-visible{box-shadow:", ";}", " ", ";" ], E.mixins.reset("grid"), E.mixins.typography("monoBody"), E.variables[b], E.variables.focusShadow, (function(e) {
+            var t = e.$showLineNumbers, n = e.$counterReset;
+            return t && (0, v.css)([ "grid-template-columns:min-content auto;counter-reset:linenumber ", ";" ], n);
+        }), (function(e) {
+            var t = e.$containerAppearance;
+            return t === "none" ? (0, v.css)([ "gap:", ";" ], E.variables.spacingMedium) : (0, 
+            v.css)([ "background-color:", ";border-radius:", ";", "{margin:", ";}" ], E.variables.neutral50, E.variables.borderRadius, /* sc-sel */ S, E.variables[y]);
+        }));
+        var T = h().span.withConfig({
             displayName: "CodeStyles__StyledIndent",
             componentId: "sc-1eq4k68-2"
         })([ "&:not(:last-child){background-image:linear-gradient( to left,", " 1px,transparent 1px,transparent );}" ], E.variables.syntaxGray);
-        var T = {
+        var I = {
             comment: E.variables.syntaxGray,
             prolog: E.variables.syntaxGray,
             doctype: E.variables.syntaxGray,
@@ -2328,12 +2333,12 @@
             important: E.variables.syntaxOrange,
             variable: E.variables.syntaxOrange
         };
-        var I = v().span.withConfig({
+        var O = h().span.withConfig({
             displayName: "CodeStyles__StyledToken",
             componentId: "sc-1eq4k68-3"
         })([ "color:", ";cursor:", ";opacity:", ";font-style:", ";font-weight:", ";" ], (function(e) {
             var t = e.partType;
-            return T[t];
+            return I[t];
         }), (function(e) {
             var t = e.partType;
             return t === "entity" ? "help" : null;
@@ -2348,38 +2353,39 @@
             return t === "important" || t === "bold" ? E.variables.fontWeightBold : null;
         }));
         // CONCATENATED MODULE: ./src/Code/LineHighlightsStyles.ts
-        var O = v().div.withConfig({
+        var N = h().div.withConfig({
             displayName: "LineHighlightsStyles__StyledLineHighlight",
             componentId: "sc-1x2b02z-0"
-        })([ "position:absolute;left:0;height:1lh;background:", ";border-left:2px solid ", ";pointer-events:none;line-height:inherit;top:", ";width:", "px;" ], E.variables.notificationColorInfoWeak, E.variables.notificationColorInfo, (function(e) {
-            var t = e.$lineNum;
-            return "calc(".concat(t - 1, "  * ").concat(b, ")");
-        }), (function(e) {
+        })([ "position:absolute;left:0;height:1lh;background:", ";border-left:2px solid ", ";pointer-events:none;line-height:inherit;width:", "px;", ";" ], E.variables.notificationColorInfoWeak, E.variables.notificationColorInfo, (function(e) {
             var t = e.$width;
             return t;
+        }), (function(e) {
+            var t = e.$containerAppearance, n = e.$lineNum;
+            return t === "none" ? (0, v.css)([ "top:calc(", " * ", "em);" ], n - 1, E.variables[b]) : (0, 
+            v.css)([ "top:calc( ", " * ", "em + ", " );" ], n - 1, E.variables[b], E.variables[y]);
         }));
         // CONCATENATED MODULE: ./src/Code/LineHighlights.tsx
-        function N(e, t) {
-            return F(e) || L(e, t) || R(e, t) || x();
+        function x(e, t) {
+            return w(e) || F(e, t) || k(e, t) || R();
         }
-        function x() {
+        function R() {
             throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         }
-        function R(e, t) {
+        function k(e, t) {
             if (e) {
-                if ("string" == typeof e) return k(e, t);
+                if ("string" == typeof e) return L(e, t);
                 var n = {}.toString.call(e).slice(8, -1);
-                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? k(e, t) : void 0;
+                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? L(e, t) : void 0;
             }
         }
-        function k(e, t) {
+        function L(e, t) {
             (null == t || t > e.length) && (t = e.length);
             for (var n = 0, r = Array(t); n < t; n++) {
                 r[n] = e[n];
             }
             return r;
         }
-        function L(e, t) {
+        function F(e, t) {
             var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != n) {
                 var r, a, i, s, o = [], l = !0, u = !1;
@@ -2401,21 +2407,21 @@
                 return o;
             }
         }
-        function F(e) {
+        function w(e) {
             if (Array.isArray(e)) return e;
         }
         // parseHighlightLines will turn a string like "2,4-5" into an array of ranges like [[2, 2], [4, 5]]
-                var w = function e(t) {
+                var C = function e(t) {
             return t.replace(/\s+/g, "").split(",").filter(Boolean).map((function(e) {
-                var t = e.split("-").map(Number), n = N(t, 2), r = n[0], a = n[1];
+                var t = e.split("-").map(Number), n = x(t, 2), r = n[0], a = n[1];
                 return [ r, a || r ];
             }));
         };
         // Flatten the array of ranges into a single array of line numbers
         // example: [[2, 2], [4, 5]] will become [2, 4, 5]
-                var C = function e(t) {
+                var D = function e(t) {
             var n = t.map((function(e) {
-                var t = N(e, 2), n = t[0], r = t[1];
+                var t = x(e, 2), n = t[0], r = t[1];
                 return Array.from({
                     length: r - n + 1
                 }, (function(e, t) {
@@ -2427,37 +2433,45 @@
             return Array.from(new Set(n));
  // Remove duplicates
                 };
-        var D = function e(n) {
-            var r = n.highlight, a = n.width;
-            var i = w(r);
-            var s = C(i);
+        var P = function e(n) {
+            var r = n.containerAppearance, a = n.highlight, i = n.width;
+            var s = C(a);
+            var o = D(s);
             
-            return t().createElement(t().Fragment, null, s.map((function(e) {
+            return t().createElement(t().Fragment, null, o.map((function(e) {
                 
-                return t().createElement(O, {
+                return t().createElement(N, {
                     key: e,
                     className: "line-highlight",
                     "aria-hidden": "true",
+                    $containerAppearance: r,
                     $lineNum: e,
-                    $width: a
+                    $width: i
                 });
             })));
         };
-        /* harmony default export */        const P = D;
+        /* harmony default export */        const _ = P;
         // CONCATENATED MODULE: ./src/Code/LineNumbersStyles.ts
-        var _ = v().span.withConfig({
+        var $ = h().span.withConfig({
             displayName: "LineNumbersStyles__StyledLineNumberRows",
             componentId: "sc-1h4k3dh-0"
-        })([ "pointer-events:none;user-select:none;border-right:1px solid ", ";z-index:1;& > span{display:block;counter-increment:linenumber;&::before{display:block;content:counter(linenumber);color:", ";padding-inline-end:", ";text-align:right;}}" ], E.variables.borderColor, E.variables.syntaxGray, E.variables.spacingSmall);
+        })([ "pointer-events:none;user-select:none;", ";& > span{display:block;counter-increment:linenumber;position:relative;z-index:1;&::before{display:block;content:counter(linenumber);color:", ";text-align:right;", "}}" ], (function(e) {
+            var t = e.$containerAppearance;
+            return t === "none" ? (0, v.css)([ "border-right:1px solid ", ";z-index:1;" ], E.variables.borderColor) : (0, 
+            v.css)([ "padding:", ";background-color:", ";" ], E.variables[y], E.variables.neutral200);
+        }), E.variables.contentColorDefault, (function(e) {
+            var t = e.$containerAppearance;
+            return t === "none" && (0, v.css)([ "padding-inline-end:", ";" ], E.variables.spacingSmall);
+        }));
         // CONCATENATED MODULE: ./src/Code/LineNumbers.tsx
-        function $(e) {
-            var n = e.value, r = n === void 0 ? "" : n;
+        function U(e) {
+            var n = e.containerAppearance, r = n === void 0 ? "none" : n, a = e.value, i = a === void 0 ? "" : a;
             // Use a regex to see how many lines there are in the value, then output an
             // empty span for each line.  The numbers themselves are handled by the CSS counter.
-                        var a = r.match(/\n(?!$)/g);
-            var i = a ? a.length + 1 : 1;
-            var s = Array.from({
-                length: i
+                        var s = i.match(/\n(?!$)/g);
+            var o = s ? s.length + 1 : 1;
+            var l = Array.from({
+                length: o
             }, (function(e, n) {
                 
                 return t().createElement("span", {
@@ -2465,16 +2479,17 @@
                 });
             }));
             
-            return t().createElement(_, {
+            return t().createElement($, {
+                $containerAppearance: r,
                 "aria-hidden": true
-            }, s);
+            }, l);
         }
-        /* harmony default export */        const U = $;
+        /* harmony default export */        const M = U;
         // EXTERNAL MODULE: ./src/useResizeObserver/index.ts + 1 modules
-                var M = n(6283);
+                var B = n(6283);
         // EXTERNAL MODULE: ./src/Code/prism/prism.empty
-                var B = n(74);
-        var G =  n.n(B);
+                var G = n(74);
+        var j =  n.n(G);
         // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
         /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -2482,7 +2497,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-        function j(e, t) {
+        function H(e, t) {
             if (e) {
                 if (typeof e === "function") {
                     e(t);
@@ -2495,8 +2510,8 @@
             }
         }
         // CONCATENATED MODULE: ./src/Code/Code.tsx
-        function H() {
-            return H = Object.assign ? Object.assign.bind() : function(e) {
+        function z() {
+            return z = Object.assign ? Object.assign.bind() : function(e) {
                 for (var t = 1; t < arguments.length; t++) {
                     var n = arguments[t];
                     for (var r in n) {
@@ -2504,29 +2519,29 @@
                     }
                 }
                 return e;
-            }, H.apply(null, arguments);
+            }, z.apply(null, arguments);
         }
-        function z(e, t) {
-            return K(e) || q(e, t) || X(e, t) || Y();
+        function Y(e, t) {
+            return V(e) || K(e, t) || W(e, t) || X();
         }
-        function Y() {
+        function X() {
             throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
         }
-        function X(e, t) {
+        function W(e, t) {
             if (e) {
-                if ("string" == typeof e) return W(e, t);
+                if ("string" == typeof e) return q(e, t);
                 var n = {}.toString.call(e).slice(8, -1);
-                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? W(e, t) : void 0;
+                return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? q(e, t) : void 0;
             }
         }
-        function W(e, t) {
+        function q(e, t) {
             (null == t || t > e.length) && (t = e.length);
             for (var n = 0, r = Array(t); n < t; n++) {
                 r[n] = e[n];
             }
             return r;
         }
-        function q(e, t) {
+        function K(e, t) {
             var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != n) {
                 var r, a, i, s, o = [], l = !0, u = !1;
@@ -2548,12 +2563,12 @@
                 return o;
             }
         }
-        function K(e) {
+        function V(e) {
             if (Array.isArray(e)) return e;
         }
-        function V(e, t) {
+        function Z(e, t) {
             if (null == e) return {};
-            var n, r, a = Z(e, t);
+            var n, r, a = Q(e, t);
             if (Object.getOwnPropertySymbols) {
                 var i = Object.getOwnPropertySymbols(e);
                 for (r = 0; r < i.length; r++) {
@@ -2562,7 +2577,7 @@
             }
             return a;
         }
-        function Z(e, t) {
+        function Q(e, t) {
             if (null == e) return {};
             var n = {};
             for (var r in e) {
@@ -2577,73 +2592,74 @@
         // auto formatting. The import below points to an empty file which is replaced at build
         // time, see ./prism/build-isolated-prism.js for details.
         // typed as 'prismjs'
-                var Q = [ "bash", "clike", "css", "html", "json", "javascript", "js", "jsx", "typescript", "ts", "tsx", "markup", "mathml", "plain", "plaintext", "splunk-spl", "sql", "svg", "text", "txt", "xml", "yaml", "yml" ];
-        function J(e) {
+                var J = [ "bash", "clike", "css", "html", "json", "javascript", "js", "jsx", "typescript", "ts", "tsx", "markup", "mathml", "plain", "plaintext", "splunk-spl", "sql", "svg", "text", "txt", "xml", "yaml", "yml" ];
+        function ee(e) {
             return [ "plain", "plaintext", "text", "txt" ].includes(e);
         }
-        function ee(e, t) {
-            if (J(t)) {
-                return G().tokenize(e, {});
+        function te(e, t) {
+            if (ee(t)) {
+                return j().tokenize(e, {});
             }
-            return G().tokenize(e, G().languages[t]);
+            return j().tokenize(e, j().languages[t]);
         }
-        var te = {
+        var ne = {
+            containerAppearance: m().oneOf([ "none", "section" ]),
             elementRef: m().oneOfType([ m().func, m().object ]),
             indentChars: m().number,
-            language: m().oneOf(Q),
-            languageFallback: m().oneOf(Q),
+            language: m().oneOf(J),
+            languageFallback: m().oneOf(J),
             lineHighlights: m().string,
             lineNumberStart: m().number,
             showIndentGuide: m().bool,
             showLineNumbers: m().bool,
             value: m().string
         };
-        function ne(n) {
-            var r = n.elementRef, a = n.indentChars, s = a === void 0 ? 4 : a, l = n.language, c = n.languageFallback, d = c === void 0 ? "javascript" : c, f = n.lineHighlights, m = n.lineNumberStart, h = n.showIndentGuide, v = h === void 0 ? true : h, E = n.showLineNumbers, b = n.value, T = b === void 0 ? "" : b, O = V(n, [ "elementRef", "indentChars", "language", "languageFallback", "lineHighlights", "lineNumberStart", "showIndentGuide", "showLineNumbers", "value" ]);
+        function re(n) {
+            var r = n.containerAppearance, a = r === void 0 ? "none" : r, s = n.elementRef, l = n.indentChars, c = l === void 0 ? 4 : l, d = n.language, f = n.languageFallback, m = f === void 0 ? "javascript" : f, v = n.lineHighlights, h = n.lineNumberStart, E = n.showIndentGuide, b = E === void 0 ? true : E, y = n.showLineNumbers, I = n.value, N = I === void 0 ? "" : I, x = Z(n, [ "containerAppearance", "elementRef", "indentChars", "language", "languageFallback", "lineHighlights", "lineNumberStart", "showIndentGuide", "showLineNumbers", "value" ]);
             // @docs-props-type CodePropsBase
-                        var N = (0, e.useRef)(null);
-            var x = (0, e.useState)(undefined), R = z(x, 2), k = R[0], L = R[1];
-            var F = (0, M["default"])(N), w = F.width, C = F.height;
-            var D = (0, e.useCallback)((function(e) {
-                j(N, e);
-                j(r, e);
-            }), [ r ]);
+                        var R = (0, e.useRef)(null);
+            var k = (0, e.useState)(undefined), L = Y(k, 2), F = L[0], w = L[1];
+            var C = (0, B["default"])(R), D = C.width, P = C.height;
+            var $ = (0, e.useCallback)((function(e) {
+                H(R, e);
+                H(s, e);
+            }), [ s ]);
             (0, e.useEffect)((function() {
-                var e = N.current;
+                var e = R.current;
                 if (e) {
-                    var t = e.scrollHeight > Math.round(C);
-                    var n = e.scrollWidth > Math.round(w);
+                    var t = e.scrollHeight > Math.round(P);
+                    var n = e.scrollWidth > Math.round(D);
                     var r = t || n;
-                    L(r ? 0 : undefined);
+                    w(r ? 0 : undefined);
                 }
-            }), [ N, w, C ]);
-            var _ = p()(" ", s);
-            var $ = function e(n) {
-                var r = Math.floor(n / s);
-                var a = n % s;
+            }), [ R, D, P ]);
+            var U = p()(" ", c);
+            var G = function e(n) {
+                var r = Math.floor(n / c);
+                var a = n % c;
                 var i = g()(r, (function(e) {
                     
-                    return t().createElement(A, {
+                    return t().createElement(T, {
                         key: e.toString()
-                    }, _);
+                    }, U);
                 }));
                 if (a) {
                     i.push(p()(" ", a));
                 }
                 return i;
             };
-            var B = u()(Q, l) > -1;
+            var j = u()(J, d) > -1;
             (0, e.useEffect)((function() {
                 // a fix for SUI-5425, where the Markdown component doesn't pass a valid language in some circumstances
                 if (false) {}
-            }), [ B, l, d ]);
-            var G = B && l ? l : d;
-            var Y = ee(T, G);
-            var X = J(G);
-            var W = function e(n) {
+            }), [ j, d, m ]);
+            var X = j && d ? d : m;
+            var W = te(N, X);
+            var q = ee(X);
+            var K = function e(n) {
                 return i()(n).map((function(n, r) {
                     if (typeof n === "string") {
-                        if (!v) {
+                        if (!b) {
                             return n;
                         }
                         var a = n.split("\n");
@@ -2658,7 +2674,7 @@
                             } else {
                                 a.push( t().createElement("span", {
                                     key: "".concat(r.toString(), ":").concat(n.toString())
-                                }, $(i[1].length)), i[2]);
+                                }, G(i[1].length)), i[2]);
                             }
                             return a;
                         })));
@@ -2666,33 +2682,36 @@
                     var i = typeof n.content === "string" ? n.content : e(n.content);
                     
                     // eslint-disable-next-line react/no-array-index-key
-                    return t().createElement(I, {
+                    return t().createElement(O, {
                         "data-part-type": n.type,
                         partType: n.type,
                         key: r.toString()
                     }, i);
                 }));
             };
-            var q = W(Y);
+            var V = K(W);
             
-            return t().createElement(y, H({
+            return t().createElement(A, z({
                 "data-test": "code",
-                ref: D,
-                tabIndex: k,
-                $showLineNumbers: E,
-                $counterReset: m && m - 1
-            }, O), E &&  t().createElement(U, {
-                value: T
+                ref: $,
+                tabIndex: F,
+                $containerAppearance: a,
+                $showLineNumbers: y,
+                $counterReset: h && h - 1
+            }, x), y &&  t().createElement(M, {
+                containerAppearance: a,
+                value: N
             }),  t().createElement(S, {
-                className: "language-".concat(G),
-                $isPlaintext: X
-            }, q), f &&  t().createElement(P, {
-                width: w,
-                highlight: f
+                className: "language-".concat(X),
+                $isPlaintext: q
+            }, V), v &&  t().createElement(_, {
+                containerAppearance: a,
+                width: D,
+                highlight: v
             }));
         }
-        ne.propTypes = te;
-        /* harmony default export */        const re = ne;
+        re.propTypes = ne;
+        /* harmony default export */        const ae = re;
     }) // CONCATENATED MODULE: ./src/Code/index.ts
     ();
     module.exports = r;