@splunk/react-ui 5.0.0-beta.2 → 5.0.0-beta.4

package/Clickable.js

@@ -72,9 +72,9 @@
     var t =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
-    var a =  e.n(i);
+    var o =  e.n(i);
     // CONCATENATED MODULE: external "lodash/has"
-    const o = require("lodash/has");
+    const a = require("lodash/has");
     // CONCATENATED MODULE: external "lodash/isString"
     const l = require("lodash/isString");
     var u =  e.n(l);
@@ -90,29 +90,29 @@
     var b = f().a.withConfig({
         displayName: "ClickableStyles__StyledA",
         componentId: "sc-7al1vw-0"
-    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], v.mixins.reset("inline"), v.variables.contentColorDisabled);
+    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], v.mixins.reset("inline"), v.variables.contentColorDisabled);
     // CONCATENATED MODULE: ./src/Clickable/NavigationProvider.tsx
     /** @public */
     var p = {
-        children: a().node,
-        onClick: a().func,
-        onLinkClick: a().func,
-        transformUrl: a().func
+        children: o().node,
+        onClick: o().func,
+        onLinkClick: o().func,
+        transformUrl: o().func
     };
     var m =  t().createContext({});
     /**
  * Used to provide an override for the `onClick` for links for single page applications so that
  * internal links can navigate without a page reload.
  */    function y(e) {
-        var n = e.children, i = e.onClick, a = e.onLinkClick, o = e.transformUrl;
+        var n = e.children, i = e.onClick, o = e.onLinkClick, a = e.transformUrl;
         // @docs-props-type NavigationProviderProps
                 var l = (0, r.useMemo)((function() {
             return {
                 onClick: i,
-                onLinkClick: a,
-                transformUrl: o
+                onLinkClick: o,
+                transformUrl: a
             };
-        }), [ i, a, o ]);
+        }), [ i, o, a ]);
         
         return t().createElement(m.Provider, {
             value: l
@@ -154,9 +154,9 @@
         if (null == e) return {};
         var r, t, i = h(e, n);
         if (Object.getOwnPropertySymbols) {
-            var a = Object.getOwnPropertySymbols(e);
-            for (t = 0; t < a.length; t++) {
-                r = a[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
+            var o = Object.getOwnPropertySymbols(e);
+            for (t = 0; t < o.length; t++) {
+                r = o[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (i[r] = e[r]);
             }
         }
         return i;
@@ -182,13 +182,13 @@
         return n != null && !O.test(n) && !w.test(n);
     };
     var x = {
-        children: a().node,
-        disabled: a().oneOfType([ a().bool, a().oneOf([ "dimmed", "disabled" ]) ]),
-        elementRef: a().oneOfType([ a().func, a().object ]),
-        onClick: a().func,
-        openInNewContext: a().bool,
-        navigationLabel: a().string,
-        to: a().string
+        children: o().node,
+        disabled: o().oneOfType([ o().bool, o().oneOf([ "dimmed", "disabled" ]) ]),
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        onClick: o().func,
+        openInNewContext: o().bool,
+        navigationLabel: o().string,
+        to: o().string
     };
     function L(e, n) {
         return !!n && !e;
@@ -197,7 +197,7 @@
  * `Clickable` renders as a `button` element, or as an `a` element if the `to` prop is set
  * and the `disabled` prop is `false`. This is called link mode.
  */    var I =  t().forwardRef((function(e, n) {
-        var i = e.children, a = e.disabled, o = e.elementRef, l = e.navigationLabel, c = e.onClick, s = e.openInNewContext, f = e.to, v = g(e, [ "children", "disabled", "elementRef", "navigationLabel", "onClick", "openInNewContext", "to" ]);
+        var i = e.children, o = e.disabled, a = e.elementRef, l = e.navigationLabel, c = e.onClick, s = e.openInNewContext, f = e.to, v = g(e, [ "children", "disabled", "elementRef", "navigationLabel", "onClick", "openInNewContext", "to" ]);
         // @docs-props-type ClickablePropsBase
                 var p = (0, r.useContext)(m), y = p.onClick, h = p.onLinkClick, O = p.transformUrl;
         (0, r.useEffect)((function() {
@@ -206,11 +206,11 @@
             // eslint-disable-next-line react-hooks/exhaustive-deps
                 }), []);
         var w = (0, r.useCallback)((function(e) {
-            k(o, e);
+            k(a, e);
             k(n, e);
-        }), [ o, n ]);
+        }), [ a, n ]);
         // memoizing this result causes TS to lose track of the type guard established by isLinkCheck
-                var P = L(a, f);
+                var P = L(o, f);
         // ideally we wouldn't need to pass "to" as "toValue" here
         // but without doing that TS thinks the return value of this is
         // string | undefined which doesn't work for usages of this function
@@ -265,7 +265,7 @@
                 onClick: I
             }, d()(v)), i);
         }
-        if (a && f != null) {
+        if (o && f != null) {
             
             return t().createElement(b, C({
                 "data-test": "clickable",
@@ -275,11 +275,11 @@
             }, v), i);
         }
         // button variant
-                var N = a === true || a === "dimmed" || undefined;
+                var N = o === true || o === "dimmed" || undefined;
         var T;
         if (N) {
             T = "dimmed";
-        } else if (a === "disabled") {
+        } else if (o === "disabled") {
             T = "disabled";
         }
         
@@ -290,8 +290,8 @@
             "data-test-disabled": T,
             ref: w,
             type: "button",
-            disabled: a === "disabled",
-            onClick: c && !a ? I : undefined
+            disabled: o === "disabled",
+            onClick: c && !o ? I : undefined
         }, d()(v, "disabled")), i);
     }));
     I.propTypes = x;

package/Code.js

@@ -60,36 +60,43 @@
  * Watches a React ref element for changes in size.
  *
  * @param ref - The React ref to observe size changes on
- */            var c = function e(t) {
-                var n = (0, a.useState)({
+ */            var c = function e(t, n) {
+                var s = (0, a.useState)({
                     width: 0,
                     height: 0
-                }), s = r(n, 2), i = s[0], o = s[1];
+                }), i = r(s, 2), o = i[0], l = i[1];
                 (0, a.useEffect)((function() {
                     var e = t.current;
                     if (typeof window !== "undefined" && window.ResizeObserver) {
-                        var n = new ResizeObserver((function(e) {
+                        var a = new ResizeObserver((function(e) {
                             if (e[0]) {
-                                var n, a;
-                                o({
-                                    width: (t === null || t === void 0 ? void 0 : (n = t.current) === null || n === void 0 ? void 0 : n.getBoundingClientRect().width) || 0,
-                                    height: (t === null || t === void 0 ? void 0 : (a = t.current) === null || a === void 0 ? void 0 : a.getBoundingClientRect().height) || 0
-                                });
+                                var a, r;
+                                var s = {
+                                    width: (t === null || t === void 0 ? void 0 : (a = t.current) === null || a === void 0 ? void 0 : a.getBoundingClientRect().width) || 0,
+                                    height: (t === null || t === void 0 ? void 0 : (r = t.current) === null || r === void 0 ? void 0 : r.getBoundingClientRect().height) || 0
+                                };
+                                l((function(e) {
+                                    if (e.height !== s.height || e.width !== s.width) {
+                                        n === null || n === void 0 ? void 0 : n(s);
+                                        return s;
+                                    }
+                                    return o;
+                                }));
                             }
                         }));
                         if (e) {
-                            n.observe(e);
+                            a.observe(e);
                         }
                         return function() {
                             if (e) {
-                                n.unobserve(e);
+                                a.unobserve(e);
                             }
                         };
                     }
                     // Return a no-op function to satisfy consistent-return rule
                                         return function() {};
                 }), [ t ]);
-                return i;
+                return o;
             };
             /* harmony default export */            const p = c;
         } // CONCATENATED MODULE: ./src/useResizeObserver/index.ts
@@ -992,22 +999,22 @@
                                     // eslint-disable-next-line no-redeclare
                                                                         var _ = E.index;
                                     var $ = E[0];
-                                    var R = w.slice(0, _);
-                                    var P = w.slice(_ + $.length);
+                                    var P = w.slice(0, _);
+                                    var R = w.slice(_ + $.length);
                                     var N = A + w.length;
                                     if (u && N > u.reach) {
                                         u.reach = N;
                                     }
                                     var C = S.prev;
-                                    if (R) {
-                                        C = c(t, C, R);
-                                        A += R.length;
+                                    if (P) {
+                                        C = c(t, C, P);
+                                        A += P.length;
                                     }
                                     p(t, C, F);
                                     var j = new i(d, v ? s.tokenize($, v) : $, b, $);
                                     S = c(t, C, j);
-                                    if (P) {
-                                        c(t, S, P);
+                                    if (R) {
+                                        c(t, S, R);
                                     }
                                     if (F > 1) {
                                         // at least one Token object was removed, so we have to do some rematching
@@ -2212,7 +2219,7 @@
                 n.r(a);
         // EXPORTS
                 n.d(a, {
-            default: () => /* reexport */ M
+            default: () => /* reexport */ z
         });
         // EXTERNAL MODULE: external "react"
                 var e = n(9497);
@@ -2247,13 +2254,16 @@
         var k = b().pre.withConfig({
             displayName: "CodeStyles__Styled",
             componentId: "sc-1eq4k68-0"
-        })([ "", ";", ";color:", ";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:", ";}" ], x.mixins.reset("block"), x.mixins.typography("monoBody", {
+        })([ "", ";", ";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:", ";}" ], x.mixins.reset("block"), x.mixins.typography("monoBody", {
             lineHeight: "spacious"
-        }), x.variables.syntaxTeal, x.variables.focusShadow);
+        }), x.variables.focusShadow);
         var S = b().code.withConfig({
             displayName: "CodeStyles__StyledCode",
             componentId: "sc-1eq4k68-1"
-        })([ "font-family:", ";" ], x.variables.monoFontFamily);
+        })([ "font-family:", ";", ";" ], x.variables.monoFontFamily, (function(e) {
+            var t = e.$isPlaintext;
+            return !t && (0, y.css)([ "color:", ";" ], x.variables.syntaxTeal);
+        }));
         var A = b().span.withConfig({
             displayName: "CodeStyles__StyledIndent",
             componentId: "sc-1eq4k68-2"
@@ -2342,26 +2352,26 @@
             }, O.apply(null, arguments);
         }
         function T(e, t) {
-            return N(e) || P(e, t) || $(e, t) || I();
+            return N(e) || R(e, t) || $(e, t) || I();
         }
         function I() {
             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 $(e, t) {
             if (e) {
-                if ("string" == typeof e) return R(e, t);
+                if ("string" == typeof e) return P(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) ? R(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) ? P(e, t) : void 0;
             }
         }
-        function R(e, t) {
+        function P(e, t) {
             (null == t || t > e.length) && (t = e.length);
             for (var n = 0, a = Array(t); n < t; n++) {
                 a[n] = e[n];
             }
             return a;
         }
-        function P(e, t) {
+        function R(e, t) {
             var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
             if (null != n) {
                 var a, r, s, i, o = [], l = !0, u = !1;
@@ -2413,13 +2423,16 @@
         // time, see ./prism/build-isolated-prism.js for details.
         // typed as 'prismjs'
                 var D = [ "bash", "clike", "css", "html", "json", "javascript", "js", "jsx", "typescript", "ts", "tsx", "markup", "mathml", "plain", "plaintext", "splunk-spl", "svg", "text", "txt", "xml", "yaml", "yml" ];
-        function L(e, t) {
-            if ([ "plain", "plaintext", "text", "txt" ].indexOf(t) >= 0) {
+        function L(e) {
+            return [ "plain", "plaintext", "text", "txt" ].includes(e);
+        }
+        function B(e, t) {
+            if (L(t)) {
                 return h().tokenize(e, {});
             }
             return h().tokenize(e, h().languages[t]);
         }
-        var B = {
+        var G = {
             elementRef: s().oneOfType([ s().func, s().object ]),
             indentChars: s().number,
             language: s().oneOf(D),
@@ -2427,12 +2440,12 @@
             showIndentGuide: s().bool,
             value: s().string
         };
-        function G(n) {
+        function M(n) {
             var a = n.elementRef, r = n.indentChars, s = r === void 0 ? 4 : r, i = n.language, l = n.languageFallback, c = l === void 0 ? "javascript" : l, d = n.showIndentGuide, f = d === void 0 ? true : d, v = n.value, h = v === void 0 ? "" : v, y = C(n, [ "elementRef", "indentChars", "language", "languageFallback", "showIndentGuide", "value" ]);
             // @docs-props-type CodePropsBase
                         var b = (0, e.useRef)(null);
             var x = (0, e.useState)(undefined), w = T(x, 2), I = w[0], $ = w[1];
-            var R = (0, _["default"])(b), P = R.width, N = R.height;
+            var P = (0, _["default"])(b), R = P.width, N = P.height;
             var j = (0, e.useCallback)((function(e) {
                 E(b, e);
                 E(a, e);
@@ -2441,34 +2454,35 @@
                 var e = b.current;
                 if (e) {
                     var t = e.scrollHeight > Math.round(N);
-                    var n = e.scrollWidth > Math.round(P);
+                    var n = e.scrollWidth > Math.round(R);
                     var a = t || n;
                     $(a ? 0 : undefined);
                 }
-            }), [ b, P, N ]);
-            var B = g()(" ", s);
-            var G = function e(n) {
+            }), [ b, R, N ]);
+            var G = g()(" ", s);
+            var M = function e(n) {
                 var a = Math.floor(n / s);
                 var r = n % s;
                 var i = m()(a, (function(e) {
                     
                     return t().createElement(A, {
                         key: e.toString()
-                    }, B);
+                    }, G);
                 }));
                 if (r) {
                     i.push(g()(" ", r));
                 }
                 return i;
             };
-            var M = p()(D, i) > -1;
+            var z = p()(D, i) > -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) {}
-            }), [ M, i, c ]);
-            var z = M && i ? i : c;
-            var H = L(h, z);
-            var q = function e(n) {
+            }), [ z, i, c ]);
+            var H = z && i ? i : c;
+            var q = B(h, H);
+            var U = L(H);
+            var Z = function e(n) {
                 return o()(n).map((function(n, a) {
                     if (typeof n === "string") {
                         if (!f) {
@@ -2486,7 +2500,7 @@
                             } else {
                                 r.push( t().createElement("span", {
                                     key: "".concat(a.toString(), ":").concat(n.toString())
-                                }, G(s[1].length)), s[2]);
+                                }, M(s[1].length)), s[2]);
                             }
                             return r;
                         })));
@@ -2501,18 +2515,19 @@
                     }, s);
                 }));
             };
-            var U = q(H);
+            var X = Z(q);
             
             return t().createElement(k, O({
                 "data-test": "code",
                 ref: j,
                 tabIndex: I
             }, y),  t().createElement(S, {
-                className: "language-".concat(z)
-            }, U));
+                className: "language-".concat(H),
+                $isPlaintext: U
+            }, X));
         }
-        G.propTypes = B;
-        /* harmony default export */        const M = G;
+        M.propTypes = G;
+        /* harmony default export */        const z = M;
     }) // CONCATENATED MODULE: ./src/Code/index.ts
     ();
     module.exports = a;