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

package/MessageBar.js

@@ -24,11 +24,11 @@
     /******/    (() => {
         /******/ // define getter functions for harmony exports
         /******/ e.d = (r, a) => {
-            /******/ for (var s in a) {
-                /******/ if (e.o(a, s) && !e.o(r, s)) {
-                    /******/ Object.defineProperty(r, s, {
+            /******/ for (var i in a) {
+                /******/ if (e.o(a, i) && !e.o(r, i)) {
+                    /******/ Object.defineProperty(r, i, {
                         enumerable: true,
-                        get: a[s]
+                        get: a[i]
                     });
                     /******/                }
                 /******/            }
@@ -61,324 +61,214 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ se
+        default: () => /* reexport */ P
     });
     // CONCATENATED MODULE: external "react"
     const a = require("react");
-    var s =  e.n(a);
+    var i =  e.n(a);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var n =  e.n(i);
+    const s = require("prop-types");
+    var n =  e.n(s);
+    // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
+    const t = require("@splunk/react-icons/CheckCircle");
+    var o =  e.n(t);
     // CONCATENATED MODULE: external "@splunk/react-icons/Cross"
-    const o = require("@splunk/react-icons/Cross");
-    var t =  e.n(o);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
-    const l = require("@splunk/react-icons/enterprise/Close");
+    const l = require("@splunk/react-icons/Cross");
     var c =  e.n(l);
-    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const p = require("@splunk/react-ui/ScreenReaderContent");
-    var d =  e.n(p);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const u = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const v = require("@splunk/ui-utils/i18n");
-    // CONCATENATED MODULE: external "styled-components"
-    const b = require("styled-components");
-    var g =  e.n(b);
-    // CONCATENATED MODULE: external "@splunk/react-icons/CheckCircle"
-    const h = require("@splunk/react-icons/CheckCircle");
-    var y =  e.n(h);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationCircle"
-    const m = require("@splunk/react-icons/ExclamationCircle");
-    var k =  e.n(m);
+    const p = require("@splunk/react-icons/ExclamationCircle");
+    var d =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
-    const f = require("@splunk/react-icons/InformationCircle");
-    var x =  e.n(f);
+    const u = require("@splunk/react-icons/InformationCircle");
+    var b =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationTriangle"
-    const C = require("@splunk/react-icons/ExclamationTriangle");
-    var w =  e.n(C);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Error"
-    const S = require("@splunk/react-icons/enterprise/Error");
-    var _ =  e.n(S);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/InfoCircle"
-    const I = require("@splunk/react-icons/enterprise/InfoCircle");
-    var z =  e.n(I);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Success"
-    const q = require("@splunk/react-icons/enterprise/Success");
-    var E =  e.n(q);
-    // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Warning"
-    const O = require("@splunk/react-icons/enterprise/Warning");
-    var B =  e.n(O);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const M = require("@splunk/react-ui/Box");
-    var j =  e.n(M);
+    const v = require("@splunk/react-icons/ExclamationTriangle");
+    var g =  e.n(v);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+    const f = require("@splunk/react-ui/ScreenReaderContent");
+    var h =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const x = require("@splunk/ui-utils/i18n");
+    // CONCATENATED MODULE: external "styled-components"
+    const y = require("styled-components");
+    var k =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const N = require("@splunk/react-ui/Clickable");
-    var R =  e.n(N);
+    const m = require("@splunk/react-ui/Clickable");
+    var w =  e.n(m);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const C = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/MessageBar/MessageBarStyles.ts
-    var T = g().div.withConfig({
+    var O = k().div.withConfig({
         displayName: "MessageBarStyles__MessageBarContent",
         componentId: "sc-1uyhzza-0"
-    })([ "", ";color:inherit;padding:0 8px;text-align:center;margin-right:auto;& a,& button[data-test='link']{display:inline-block;color:inherit;text-decoration:underline;text-underline-position:under;padding:0 3px 2px 3px;&:not([disabled]):focus{border-radius:", ";outline:0;", ";}}" ], u.mixins.reset("inline"), u.variables.borderRadius, (0, 
-    u.pick)({
+    })([ "", ";color:inherit;padding:0 8px;text-align:center;margin-right:auto;& a,& button[data-test='link']{display:inline-block;color:inherit;text-decoration:underline;text-underline-position:under;padding:0 3px 2px 3px;&:not([disabled],[aria-disabled='true']){&:hover,&:active,&:focus{color:", ";text-decoration:underline;text-decoration-thickness:2px;}}&:not([disabled]):focus{border-radius:", ";outline:0;", ";}}" ], C.mixins.reset("inline"), C.variables.contentColorLink, C.variables.borderRadius, (0, 
+    C.pick)({
         enterprise: {
-            dark: (0, b.css)([ "box-shadow:0 0 0 2px ", ";" ], u.variables.gray80),
-            light: (0, b.css)([ "box-shadow:0 0 0 2px ", ";" ], u.variables.gray25)
+            dark: (0, y.css)([ "box-shadow:0 0 0 2px ", ";" ], C.variables.gray80),
+            light: (0, y.css)([ "box-shadow:0 0 0 2px ", ";" ], C.variables.gray25)
         },
         prisma: {
-            light: (0, u.pickVariant)("$type", {
-                info: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
-                warning: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
-                error: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white),
-                success: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white)
+            light: (0, C.pickVariant)("$type", {
+                info: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
+                warning: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
+                error: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white),
+                success: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white)
             }),
-            dark: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black)
+            dark: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black)
         }
     }));
-    var W = g()(R()).withConfig({
+    var q = k()(w()).withConfig({
         displayName: "MessageBarStyles__MessageBarCloseWrapper",
         componentId: "sc-1uyhzza-1"
-    })([ "", ";border:1px solid transparent;border-radius:", ";color:inherit;cursor:pointer;padding:", ";", " &:hover,&:focus{background:", ";border:1px solid;border-color:", ";color:", ";}&:active{", ";}", "" ], u.mixins.reset("flex"), u.variables.borderRadius, (0, 
-    u.pick)({
-        enterprise: u.variables.spacingXSmall,
+    })([ "", ";border:1px solid transparent;border-radius:", ";color:inherit;cursor:pointer;padding:", ";", " &:hover,&:focus{background:", ";border:1px solid;border-color:", ";color:", ";}&:active{", ";}", "" ], C.mixins.reset("flex"), C.variables.borderRadius, (0, 
+    C.pick)({
+        enterprise: C.variables.spacingXSmall,
         prisma: "3px"
-    }), (0, u.pick)({
-        enterprise: (0, b.css)([ "margin-top:1px;" ])
-    }), (0, u.pick)({
-        prisma: u.variables.interactiveColorOverlayHover,
+    }), (0, C.pick)({
+        enterprise: (0, y.css)([ "margin-top:1px;" ])
+    }), (0, C.pick)({
+        prisma: C.variables.interactiveColorOverlayHover,
         enterprise: {
-            dark: u.variables.gray30,
-            light: u.variables.gray92
+            dark: C.variables.gray30,
+            light: C.variables.gray92
         }
-    }), (0, u.pick)({
+    }), (0, C.pick)({
         prisma: "inherit",
-        enterprise: u.variables.gray80
-    }), (0, u.pick)({
+        enterprise: C.variables.gray80
+    }), (0, C.pick)({
         enterprise: {
-            dark: u.variables.gray96,
-            light: u.variables.contentColorLink
+            dark: C.variables.gray96,
+            light: C.variables.contentColorLink
         }
-    }), (0, u.pick)({
-        prisma: (0, b.css)([ "background:", ";" ], u.variables.interactiveColorOverlayActive),
-        enterprise: (0, b.css)([ "box-shadow:", ";" ], u.variables.focusShadow)
-    }), (0, u.pick)({
-        prisma: (0, b.css)([ "&:focus{border-radius:", ";", ";}" ], u.variables.borderRadius, (0, 
-        u.pick)({
-            light: (0, u.pickVariant)("$type", {
-                info: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
-                warning: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black),
-                error: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white),
-                success: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.white)
+    }), (0, C.pick)({
+        prisma: (0, y.css)([ "background:", ";" ], C.variables.interactiveColorOverlayActive),
+        enterprise: (0, y.css)([ "box-shadow:", ";" ], C.variables.focusShadow)
+    }), (0, C.pick)({
+        prisma: (0, y.css)([ "&:focus{border-radius:", ";", ";}" ], C.variables.borderRadius, (0, 
+        C.pick)({
+            light: (0, C.pickVariant)("$type", {
+                info: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
+                warning: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black),
+                error: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white),
+                success: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.white)
             }),
-            dark: (0, b.css)([ "box-shadow:0 0 0 3px ", ";" ], u.variables.black)
+            dark: (0, y.css)([ "box-shadow:0 0 0 3px ", ";" ], C.variables.black)
         }))
     }));
-    var $ = (0, b.css)([ "margin-left:auto;" ]);
-    var P = g()(y()).withConfig({
-        displayName: "MessageBarStyles__StyledCheckCircleIcon",
+    var S = k().span.withConfig({
+        displayName: "MessageBarStyles__StyledIcon",
         componentId: "sc-1uyhzza-2"
-    })([ "", "" ], $);
-    var A = g()(k()).withConfig({
-        displayName: "MessageBarStyles__StyledExclamationCircleIcon",
-        componentId: "sc-1uyhzza-3"
-    })([ "", "" ], $);
-    var L = g()(x()).withConfig({
-        displayName: "MessageBarStyles__StyledInformationCircleIcon",
-        componentId: "sc-1uyhzza-4"
-    })([ "", "" ], $);
-    var V = g()(w()).withConfig({
-        displayName: "MessageBarStyles__StyledExclamationTriangleIcon",
-        componentId: "sc-1uyhzza-5"
-    })([ "", "" ], $);
-    var D = g()(_()).withConfig({
-        displayName: "MessageBarStyles__StyledEnterpriseErrorIcon",
-        componentId: "sc-1uyhzza-6"
-    })([ "", " color:", ";" ], $, u.variables.errorColor);
-    var H = g()(z()).withConfig({
-        displayName: "MessageBarStyles__StyledEnterpriseInfoCircleIcon",
-        componentId: "sc-1uyhzza-7"
-    })([ "", " color:", ";" ], $, u.variables.infoColor);
-    var X = g()(E()).withConfig({
-        displayName: "MessageBarStyles__StyledEnterpriseSuccessIcon",
-        componentId: "sc-1uyhzza-8"
-    })([ "", " color:", ";" ], $, u.variables.successColor);
-    var F = g()(B()).withConfig({
-        displayName: "MessageBarStyles__StyledEnterpriseWarningIcon",
-        componentId: "sc-1uyhzza-9"
-    })([ "", " color:", ";" ], $, u.variables.warningColor);
-    var G = g()(j()).withConfig({
+    })([ "width:20px;height:20px;margin-left:auto;fill:", ";" ], (0, C.pickVariant)("$type", {
+        info: C.variables.notificationColorInfo,
+        success: C.variables.notificationColorPositive,
+        warning: C.variables.notificationColorCaution,
+        error: C.variables.notificationColorNegative
+    }));
+    var _ = k().div.withConfig({
         displayName: "MessageBarStyles__MessageBarWrapper",
-        componentId: "sc-1uyhzza-10"
-    })([ "", ";display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:", ";", ";word-wrap:break-word;color:", ";", ";" ], u.mixins.reset("block"), u.variables.spacingSmall, (function(e) {
+        componentId: "sc-1uyhzza-3"
+    })([ "", ";display:flex;align-items:center;justify-content:center;min-height:40px;margin-bottom:", ";", ";word-wrap:break-word;color:", ";background-color:", ";" ], C.mixins.reset("block"), C.variables.spacingSmall, (function(e) {
         var r = e.$hasCloseButton;
-        return r ? (0, b.css)([ "", "" ], (0, u.pick)({
-            prisma: (0, b.css)([ "padding:0 8px 0 32px;" ]),
-            enterprise: (0, b.css)([ "padding:0 8px 0 38px;" ])
-        })) : (0, b.css)([ "", "" ], (0, u.pick)({
-            prisma: (0, b.css)([ "padding:0 33px 0 32px;" ]),
-            enterprise: (0, b.css)([ "padding:0 26px 0 32px;" ])
+        return r ? (0, y.css)([ "", "" ], (0, C.pick)({
+            prisma: (0, y.css)([ "padding:0 8px 0 32px;" ]),
+            enterprise: (0, y.css)([ "padding:0 8px 0 38px;" ])
+        })) : (0, y.css)([ "", "" ], (0, C.pick)({
+            prisma: (0, y.css)([ "padding:0 33px 0 32px;" ]),
+            enterprise: (0, y.css)([ "padding:0 26px 0 32px;" ])
         }));
-    }), (0, u.pick)({
-        prisma: (0, u.pickVariant)("$type", {
-            info: {
-                light: u.variables.contentColorActive,
-                dark: u.variables.contentColorInverted
-            },
-            success: u.variables.contentColorInverted,
-            warning: u.variables.black,
-            error: u.variables.contentColorInverted
-        }),
-        enterprise: {
-            dark: u.variables.gray96,
-            light: u.variables.gray25
-        }
-    }), (0, u.pickVariant)("$type", {
-        info: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
-            prisma: {
-                dark: u.variables.white,
-                light: u.variables.neutral200
-            },
-            enterprise: {
-                dark: u.mixins.colorWithAlpha(u.variables.infoColor, .5),
-                light: u.variables.infoColorL50
-            }
-        })),
-        success: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
-            prisma: u.variables.statusColorNormal,
-            enterprise: {
-                dark: u.mixins.colorWithAlpha(u.variables.successColor, .5),
-                light: u.variables.successColorL50
-            }
-        })),
-        warning: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
-            prisma: u.variables.statusColorMedium,
-            enterprise: {
-                dark: u.mixins.colorWithAlpha(u.variables.warningColor, .5),
-                light: u.variables.warningColorL50
-            }
-        })),
-        error: (0, b.css)([ "background-color:", ";" ], (0, u.pick)({
-            prisma: u.variables.statusColorHigh,
-            enterprise: {
-                dark: u.mixins.colorWithAlpha(u.variables.errorColor, .5),
-                light: u.variables.errorColorL50
-            }
-        }))
+    }), C.variables.contentColorActive, (0, C.pickVariant)("$type", {
+        info: C.variables.notificationColorInfoWeak,
+        success: C.variables.notificationColorPositiveWeak,
+        warning: C.variables.notificationColorCautionWeak,
+        error: C.variables.notificationColorNegativeWeak
     }));
     // CONCATENATED MODULE: ./src/MessageBar/MessageBar.tsx
-    function J() {
-        return J = Object.assign ? Object.assign.bind() : function(e) {
+    function j() {
+        return j = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var a = arguments[r];
-                for (var s in a) {
-                    ({}).hasOwnProperty.call(a, s) && (e[s] = a[s]);
+                for (var i in a) {
+                    ({}).hasOwnProperty.call(a, i) && (e[i] = a[i]);
                 }
             }
             return e;
-        }, J.apply(null, arguments);
+        }, j.apply(null, arguments);
     }
-    function K(e, r) {
+    function R(e, r) {
         if (null == e) return {};
-        var a, s, i = Q(e, r);
+        var a, i, s = z(e, r);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
-            for (s = 0; s < n.length; s++) {
-                a = n[s], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (i[a] = e[a]);
+            for (i = 0; i < n.length; i++) {
+                a = n[i], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (s[a] = e[a]);
             }
         }
-        return i;
+        return s;
     }
-    function Q(e, r) {
+    function z(e, r) {
         if (null == e) return {};
         var a = {};
-        for (var s in e) {
-            if ({}.hasOwnProperty.call(e, s)) {
-                if (r.includes(s)) continue;
-                a[s] = e[s];
+        for (var i in e) {
+            if ({}.hasOwnProperty.call(e, i)) {
+                if (r.includes(i)) continue;
+                a[i] = e[i];
             }
         }
         return a;
     }
-    var U = {
+    var B = {
         children: n().node.isRequired,
         onRequestClose: n().func,
         type: n().oneOf([ "info", "success", "warning", "error" ]).isRequired
     };
-    var Y = Object.freeze({
-        info: (0, v._)("Info"),
-        warning: (0, v._)("Warning"),
-        error: (0, v._)("Alert"),
-        success: (0, v._)("Success")
-    });
-    var Z = Object.freeze({
-        info: H,
-        warning: F,
-        error: D,
-        success: X
+    var E = Object.freeze({
+        info: (0, x._)("Info"),
+        warning: (0, x._)("Warning"),
+        error: (0, x._)("Alert"),
+        success: (0, x._)("Success")
     });
-    var ee = Object.freeze({
-        info: L,
-        warning: V,
-        error: A,
-        success: P
+    var I = Object.freeze({
+        info: b(),
+        warning: g(),
+        error: d(),
+        success: o()
     });
-    var re = "24px";
-    function ae(e) {
-        var r = e.children, a = e.type, i = e.onRequestClose, n = K(e, [ "children", "type", "onRequestClose" ]);
+    function M(e) {
+        var r = e.children, a = e.elementRef, s = e.onRequestClose, n = e.type, t = R(e, [ "children", "elementRef", "onRequestClose", "type" ]);
         // @docs-props-type MessageBarPropsBase
-                var o = (0, u.useSplunkTheme)(), l = o.isEnterprise;
-        var p = l && a === "error" ? "22px" : re;
-        var b = l && a === "warning" ? "21px" : re;
-        var g;
-        if (l) {
-            var h = Z[a];
-            g =  s().createElement(h, {
-                height: b,
-                width: p,
-                hideDefaultTooltip: true,
-                screenReaderText: null,
-                "aria-hidden": true,
-                "data-test": "icon"
-            });
-        } else {
-            var y = ee[a];
-            g =  s().createElement(y, {
-                height: re,
-                width: re,
-                variant: "filled",
-                "aria-hidden": true,
-                "data-test": "icon"
-            });
-        }
+                var o = I[n];
+        var l = E[n];
         
-        return s().createElement(G, J({
-            $type: a,
+        return i().createElement(_, j({
+            ref: a,
+            $type: n,
             "data-test": "message-bar",
-            "data-test-type": a
-        }, n, {
+            "data-test-type": n
+        }, t, {
             role: "region",
-            $hasCloseButton: Boolean(i)
-        }), g,  s().createElement(d(), null, Y[a]),  s().createElement(T, {
-            $type: a,
+            $hasCloseButton: Boolean(s)
+        }),  i().createElement(S, {
+            as: o,
+            $type: n,
+            variant: "filled",
+            "aria-hidden": true,
+            "data-test": "icon"
+        }),  i().createElement(h(), null, l),  i().createElement(O, {
+            $type: n,
             "data-test": "content"
-        }, r), i &&  s().createElement(W, {
-            $type: a,
-            onClick: i
-        }, l ?  s().createElement(c(), {
-            height: "12px",
-            hideDefaultTooltip: true,
-            screenReaderText: null,
-            width: "12px"
-        }) :  s().createElement(t(), {
+        }, r), s &&  i().createElement(q, {
+            $type: n,
+            onClick: s
+        },  i().createElement(c(), {
             height: "19px",
             style: {
                 margin: -.5
             },
             width: "19px"
-        }),  s().createElement(d(), null, (0, v._)("Close"))));
+        }),  i().createElement(h(), null, (0, x._)("Close"))));
     }
-    ae.propTypes = U;
-    /* harmony default export */    const se = ae;
+    M.propTypes = B;
+    /* harmony default export */    const P = M;
     // CONCATENATED MODULE: ./src/MessageBar/index.ts
     module.exports = r;
     /******/})();