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

package/Chip.js

@@ -24,11 +24,11 @@
     /******/    (() => {
         /******/ // define getter functions for harmony exports
         /******/ e.d = (r, a) => {
-            /******/ for (var o in a) {
-                /******/ if (e.o(a, o) && !e.o(r, o)) {
-                    /******/ Object.defineProperty(r, o, {
+            /******/ for (var n in a) {
+                /******/ if (e.o(a, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: a[o]
+                        get: a[n]
                     });
                     /******/                }
                 /******/            }
@@ -65,10 +65,10 @@
     });
     // CONCATENATED MODULE: external "react"
     const a = require("react");
-    var o =  e.n(a);
+    var n =  e.n(a);
     // CONCATENATED MODULE: external "lodash/omit"
-    const n = require("lodash/omit");
-    var i =  e.n(n);
+    const o = require("lodash/omit");
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "prop-types"
     const t = require("prop-types");
     var l =  e.n(t);
@@ -76,19 +76,19 @@
     const s = require("@splunk/react-icons/Cross");
     var c =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
-    const u = require("@splunk/react-icons/enterprise/Close");
-    var p =  e.n(u);
+    const p = require("@splunk/react-icons/enterprise/Close");
+    var u =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
     const d = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/color"
-    const v = require("@splunk/ui-utils/color");
+    const f = require("@splunk/ui-utils/color");
     // CONCATENATED MODULE: external "@splunk/ui-utils/format"
-    const f = require("@splunk/ui-utils/format");
+    const v = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: external "@splunk/themes"
     const b = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const m = require("@splunk/react-ui/ScreenReaderContent");
-    var g =  e.n(m);
+    const g = require("@splunk/react-ui/ScreenReaderContent");
+    var m =  e.n(g);
     // CONCATENATED MODULE: external "styled-components"
     const h = require("styled-components");
     var C =  e.n(h);
@@ -144,8 +144,8 @@
             compact: (0, h.css)([ "height:calc(", " - 6px);padding:2px 4px;" ], b.variables.inputHeight)
         },
         prisma: {
-            comfortable: (0, h.css)([ "height:calc(", " - 8px);padding:7px 7px;font-size:", ";" ], b.variables.inputHeight, b.variables.fontSizeSmall),
-            compact: (0, h.css)([ "height:calc(", " - 8px);padding:3px 7px;font-size:", ";" ], b.variables.inputHeight, b.variables.fontSizeSmall)
+            comfortable: (0, h.css)([ "height:calc(", " - 6px);padding:4px 7px;font-size:", ";" ], b.variables.inputHeight, b.variables.fontSizeSmall),
+            compact: (0, h.css)([ "height:calc(", " - 6px);padding:2px 7px;font-size:", ";" ], b.variables.inputHeight, b.variables.fontSizeSmall)
         }
     }), (function(e) {
         var r = e.$disabled;
@@ -155,7 +155,10 @@
                     dark: "rgba(0, 0, 0, 0.15)",
                     light: "rgba(0, 0, 0, 0.05)"
                 },
-                prisma: b.variables.interactiveColorBackgroundDisabled
+                prisma: {
+                    light: "rgba(0, 0, 0, 0.1)",
+                    dark: "rgba(255, 255, 255, 0.15)"
+                }
             },
             info: {
                 enterprise: b.mixins.colorWithAlpha(b.variables.infoColorL10, .3),
@@ -171,17 +174,26 @@
             },
             error: {
                 enterprise: b.mixins.colorWithAlpha(b.variables.errorColorL10, .3),
-                prisma: b.variables.interactiveColorBackgroundDisabled
+                prisma: {
+                    light: "rgba(0, 0, 0, 0.1)",
+                    dark: "rgba(255, 255, 255, 0.15)"
+                }
             },
             outline: {
-                prisma: b.variables.interactiveColorBackgroundDisabled
+                prisma: {
+                    light: "rgba(0, 0, 0, 0.1)",
+                    dark: "rgba(255, 255, 255, 0.15)"
+                }
             },
             custom: {
                 enterprise: {
                     dark: "rgba(0, 0, 0, 0.15)",
                     light: "rgba(0, 0, 0, 0.05)"
                 },
-                prisma: b.variables.interactiveColorBackgroundDisabled
+                prisma: {
+                    light: "rgba(0, 0, 0, 0.1)",
+                    dark: "rgba(255, 255, 255, 0.15)"
+                }
             }
         }));
     }));
@@ -206,15 +218,15 @@
             }
         }), (function(e) {
             var r = e.$icon, a = e.$removable;
-            var o = (0, h.css)([ "grid-template-columns:1fr;" ]);
+            var n = (0, h.css)([ "grid-template-columns:1fr;" ]);
             if (r && a) {
-                o = (0, h.css)([ "grid-template-columns:0fr 1fr 0fr;" ]);
+                n = (0, h.css)([ "grid-template-columns:0fr 1fr 0fr;" ]);
             } else if (r) {
-                o = (0, h.css)([ "grid-template-columns:0fr 1fr;" ]);
+                n = (0, h.css)([ "grid-template-columns:0fr 1fr;" ]);
             } else if (a) {
-                o = (0, h.css)([ "grid-template-columns:1fr 0fr;" ]);
+                n = (0, h.css)([ "grid-template-columns:1fr 0fr;" ]);
             }
-            return o;
+            return n;
         }))
     }));
     var O = C().div.withConfig({
@@ -236,8 +248,8 @@
                 return a || b.variables.contentColorDefault;
             },
             prisma: function e(r) {
-                var a = r.$foregroundColor, o = r.$appearance;
-                return a || (o === "default" || o === "outline" ? b.variables.contentColorDefault : b.variables.contentColorInverted);
+                var a = r.$foregroundColor, n = r.$appearance;
+                return a || (n === "default" || n === "outline" ? b.variables.contentColorDefault : b.variables.contentColorInverted);
             }
         }
     }));
@@ -250,12 +262,12 @@
         true: b.variables.contentColorDisabled,
         false: {
             enterprise: function e(r) {
-                var a = r.$appearance, o = r.$foregroundColor;
-                return o || (a === "default" || a === "outline" ? b.variables.contentColorDefault : b.variables.gray30);
+                var a = r.$appearance, n = r.$foregroundColor;
+                return n || (a === "default" || a === "outline" ? b.variables.contentColorDefault : b.variables.gray30);
             },
             prisma: function e(r) {
-                var a = r.$appearance, o = r.$foregroundColor;
-                return o || (a === "default" || a === "outline" ? b.variables.contentColorActive : b.variables.contentColorInverted);
+                var a = r.$appearance, n = r.$foregroundColor;
+                return n || (a === "default" || a === "outline" ? b.variables.contentColorActive : b.variables.contentColorInverted);
             }
         }
     }));
@@ -271,8 +283,8 @@
             true: b.variables.contentColorDisabled,
             false: {
                 enterprise: function e(r) {
-                    var a = r.$foregroundColor, o = r.$appearance;
-                    return a || (o === "default" || o === "outline" ? b.variables.textGray : b.variables.gray30);
+                    var a = r.$foregroundColor, n = r.$appearance;
+                    return a || (n === "default" || n === "outline" ? b.variables.textGray : b.variables.gray30);
                 }
             }
         })),
@@ -286,7 +298,7 @@
         componentId: "sc-1sd3tsh-6"
     })([ "", " flex:0 1 auto;line-height:16px;cursor:pointer;&:focus{", ";}&:not([disabled]):hover{", ";}", ";" ], x, (0, 
     b.pick)({
-        enterprise: (0, h.css)([ "box-shadow:", ";color:", ";" ], b.variables.focusShadow, b.variables.linkColor),
+        enterprise: (0, h.css)([ "box-shadow:", ";color:", ";" ], b.variables.focusShadow, b.variables.contentColorLink),
         prisma: (0, h.css)([ "color:", ";", "{background-color:", ";box-shadow:0 0 0 3px ", ";}" ], b.variables.contentColorActive, /* sc-sel */ _, b.variables.interactiveColorOverlayHover, b.variables.focusColor)
     }), (0, b.pick)({
         enterprise: (0, h.css)([ "background-color:", ";", "{color:", ";}" ], (0, b.pickVariant)("$appearance", {
@@ -304,7 +316,7 @@
             }
         }), /* sc-sel */ _, (function(e) {
             var r = e.$foregroundColor;
-            return r || b.variables.linkColor;
+            return r || b.variables.contentColorLink;
         })),
         prisma: (0, h.css)([ "", "{background-color:", ";color:", ";}" ], /* sc-sel */ _, b.variables.interactiveColorOverlayHover, (function(e) {
             var r = e.$appearance, a = e.$foregroundColor;
@@ -318,20 +330,20 @@
         return q = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var a = arguments[r];
-                for (var o in a) {
-                    ({}).hasOwnProperty.call(a, o) && (e[o] = a[o]);
+                for (var n in a) {
+                    ({}).hasOwnProperty.call(a, n) && (e[n] = a[n]);
                 }
             }
             return e;
         }, q.apply(null, arguments);
     }
     function E(e, r) {
-        return z(e) || L(e, r) || D(e, r) || j();
+        return z(e) || D(e, r) || L(e, r) || j();
     }
     function j() {
         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 D(e, r) {
+    function L(e, r) {
         if (e) {
             if ("string" == typeof e) return A(e, r);
             var a = {}.toString.call(e).slice(8, -1);
@@ -340,28 +352,28 @@
     }
     function A(e, r) {
         (null == r || r > e.length) && (r = e.length);
-        for (var a = 0, o = Array(r); a < r; a++) {
-            o[a] = e[a];
+        for (var a = 0, n = Array(r); a < r; a++) {
+            n[a] = e[a];
         }
-        return o;
+        return n;
     }
-    function L(e, r) {
+    function D(e, r) {
         var a = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != a) {
-            var o, n, i, t, l = [], s = !0, c = !1;
+            var n, o, i, t, l = [], s = !0, c = !1;
             try {
                 if (i = (a = a.call(e)).next, 0 === r) {
                     if (Object(a) !== a) return;
                     s = !1;
-                } else for (;!(s = (o = i.call(a)).done) && (l.push(o.value), l.length !== r); s = !0) {
+                } else for (;!(s = (n = i.call(a)).done) && (l.push(n.value), l.length !== r); s = !0) {
                 }
             } catch (e) {
-                c = !0, n = e;
+                c = !0, o = e;
             } finally {
                 try {
                     if (!s && null != a["return"] && (t = a["return"](), Object(t) !== t)) return;
                 } finally {
-                    if (c) throw n;
+                    if (c) throw o;
                 }
             }
             return l;
@@ -370,29 +382,29 @@
     function z(e) {
         if (Array.isArray(e)) return e;
     }
-    function B(e, r) {
+    function H(e, r) {
         if (null == e) return {};
-        var a, o, n = H(e, r);
+        var a, n, o = N(e, r);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < i.length; o++) {
-                a = i[o], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (n[a] = e[a]);
+            for (n = 0; n < i.length; n++) {
+                a = i[n], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (o[a] = e[a]);
             }
         }
-        return n;
+        return o;
     }
-    function H(e, r) {
+    function N(e, r) {
         if (null == e) return {};
         var a = {};
-        for (var o in e) {
-            if ({}.hasOwnProperty.call(e, o)) {
-                if (r.includes(o)) continue;
-                a[o] = e[o];
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (r.includes(n)) continue;
+                a[n] = e[n];
             }
         }
         return a;
     }
-    /** @public */    var N = {
+    /** @public */    var P = {
         appearance: l().oneOf([ "info", "success", "warning", "error", "outline" ]),
         backgroundColor: l().string,
         children: l().node.isRequired,
@@ -404,31 +416,31 @@
         /** Includes this value in `onRequestRemove` callbacks. */
         value: l().any
     };
-    function P(e) {
+    function T(e) {
         return !!e.onRequestRemove;
     }
-    function T(e) {
-        var r = e.appearance, a = e.backgroundColor, o = e.disabled, n = e.foregroundColor, i = e.icon, t = B(e, [ "appearance", "backgroundColor", "disabled", "foregroundColor", "icon" ]);
+    function V(e) {
+        var r = e.appearance, a = e.backgroundColor, n = e.disabled, o = e.foregroundColor, i = e.icon, t = H(e, [ "appearance", "backgroundColor", "disabled", "foregroundColor", "icon" ]);
  // Validate that the color being rendered into the CSS is restricted to only values that are of CSS type <color>.
-                var l = n && (0, v.isCSSColor)(n) ? n : undefined;
-        var s = a && (0, v.isCSSColor)(a) ? a : undefined;
+                var l = o && (0, f.isCSSColor)(o) ? o : undefined;
+        var s = a && (0, f.isCSSColor)(a) ? a : undefined;
         var c = {
             "data-test": "chip",
             $appearance: r || (s ? "custom" : "default"),
             $backgroundColor: s,
             $foregroundColor: l,
-            disabled: o,
+            disabled: n,
             icon: i
         };
         return [ c, t ];
     }
-    function V(e) {
-        var r = T(e), n = E(r, 2), t = n[0], l = n[1];
-        var s = t.$appearance, u = t.$foregroundColor, v = t.disabled, m = v === void 0 ? false : v, h = t.icon, C = B(t, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
-        var y = l.children, $ = l.elementRef, x = l.onRequestRemove, k = l.value, S = B(l, [ "children", "elementRef", "onRequestRemove", "value" ]);
-        var j = (0, b.useSplunkTheme)(), D = j.isEnterprise;
+    function B(e) {
+        var r = V(e), o = E(r, 2), t = o[0], l = o[1];
+        var s = t.$appearance, p = t.$foregroundColor, f = t.disabled, g = f === void 0 ? false : f, h = t.icon, C = H(t, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
+        var y = l.children, $ = l.elementRef, x = l.onRequestRemove, k = l.value, S = H(l, [ "children", "elementRef", "onRequestRemove", "value" ]);
+        var j = (0, b.useSplunkTheme)(), L = j.isEnterprise;
         var A = typeof y === "string";
-        var L = A ? (0, f.sprintf)((0, d._)("Remove %(children)s"), {
+        var D = A ? (0, v.sprintf)((0, d._)("Remove %(children)s"), {
             children: y
         }) : (0, d._)("Remove");
         var z = (0, a.useCallback)((function(e) {
@@ -437,59 +449,59 @@
             });
         }), [ x, k ]);
         
-        return o().createElement(I, q({
+        return n().createElement(I, q({
             $appearance: s,
-            $disabled: m,
-            $foregroundColor: u,
+            $disabled: g,
+            $foregroundColor: p,
             "data-test-value": k,
-            disabled: m,
+            disabled: g,
             elementRef: $,
             onClick: z
-        }, C, i()(S, Object.keys(N))),  o().createElement(w, {
+        }, C, i()(S, Object.keys(P))),  n().createElement(w, {
             $icon: !!h,
             $removable: true
-        },  o().createElement(g(), null, L), h &&  o().createElement(O, {
+        },  n().createElement(m(), null, D), h &&  n().createElement(O, {
             $appearance: s,
-            $disabled: m,
-            $foregroundColor: u
-        }, h),  o().createElement(R, {
+            $disabled: g,
+            $foregroundColor: p
+        }, h),  n().createElement(R, {
             "data-test": "label",
             "aria-hidden": A ? true : undefined,
             $appearance: s,
-            $disabled: m,
-            $foregroundColor: u
-        }, y),  o().createElement(_, {
+            $disabled: g,
+            $foregroundColor: p
+        }, y),  n().createElement(_, {
             $appearance: s,
-            $disabled: m,
-            $foregroundColor: u
-        }, D ?  o().createElement(p(), {
+            $disabled: g,
+            $foregroundColor: p
+        }, L ?  n().createElement(u(), {
             "data-test": "cross",
             hideDefaultTooltip: true,
             screenReaderText: null,
             size: .85
-        }) :  o().createElement(c(), {
+        }) :  n().createElement(c(), {
             "data-test": "cross",
             height: "20px",
             width: "20px"
         }))));
     }
     function M(e) {
-        var r = T(e), a = E(r, 2), n = a[0], t = a[1];
-        var l = n.$appearance, s = n.$foregroundColor, c = n.disabled, u = n.icon, p = B(n, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
-        var d = t.children, v = t.elementRef, f = B(t, [ "children", "elementRef" ]);
+        var r = V(e), a = E(r, 2), o = a[0], t = a[1];
+        var l = o.$appearance, s = o.$foregroundColor, c = o.disabled, p = o.icon, u = H(o, [ "$appearance", "$foregroundColor", "disabled", "icon" ]);
+        var d = t.children, f = t.elementRef, v = H(t, [ "children", "elementRef" ]);
         
-        return o().createElement(S, q({
+        return n().createElement(S, q({
             $appearance: l,
             $disabled: c !== null && c !== void 0 ? c : false,
-            ref: v
-        }, p, i()(f, Object.keys(N))),  o().createElement(w, {
-            $icon: !!u,
+            ref: f
+        }, u, i()(v, Object.keys(P))),  n().createElement(w, {
+            $icon: !!p,
             $removable: false
-        }, u &&  o().createElement(O, {
+        }, p &&  n().createElement(O, {
             $appearance: l,
             $disabled: c !== null && c !== void 0 ? c : false,
             $foregroundColor: s
-        }, u),  o().createElement(R, {
+        }, p),  n().createElement(R, {
             "data-test": "label",
             $appearance: l,
             $disabled: c !== null && c !== void 0 ? c : false,
@@ -498,9 +510,9 @@
     }
     function W(e) {
         // @docs-props-type ChipPropsBase
-        return P(e) ?  o().createElement(V, e) :  o().createElement(M, e);
+        return T(e) ?  n().createElement(B, e) :  n().createElement(M, e);
     }
-    W.propTypes = N;
+    W.propTypes = P;
     /* harmony default export */    const X = W;
     // ChipInteractiveProps and ChipNonInteractiveProps are exported for Storybook
         // CONCATENATED MODULE: ./src/Chip/index.ts