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

package/Avatar.js

@@ -0,0 +1,478 @@
+/******/ (() => {
+    // webpackBootstrap
+    /******/ "use strict";
+    /******/ // The require scope
+    /******/    var e = {};
+    /******/
+    /************************************************************************/
+    /******/ /* webpack/runtime/compat get default export */
+    /******/    (() => {
+        /******/ // getDefaultExport function for compatibility with non-harmony modules
+        /******/ e.n = r => {
+            /******/ var t = r && r.__esModule ? 
+            /******/ () => r["default"]
+            /******/ : () => r
+            /******/;
+            e.d(t, {
+                a: t
+            });
+            /******/            return t;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (r, t) => {
+            /******/ for (var n in t) {
+                /******/ if (e.o(t, n) && !e.o(r, n)) {
+                    /******/ Object.defineProperty(r, n, {
+                        enumerable: true,
+                        get: t[n]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/hasOwnProperty shorthand */
+    /******/    (() => {
+        /******/ e.o = (e, r) => Object.prototype.hasOwnProperty.call(e, r)
+        /******/;
+    })();
+    /******/
+    /******/ /* webpack/runtime/make namespace object */
+    /******/    (() => {
+        /******/ // define __esModule on exports
+        /******/ e.r = e => {
+            /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                    value: "Module"
+                });
+                /******/            }
+            /******/            Object.defineProperty(e, "__esModule", {
+                value: true
+            });
+            /******/        };
+        /******/    })();
+    /******/
+    /************************************************************************/    var r = {};
+    // ESM COMPAT FLAG
+        e.r(r);
+    // EXPORTS
+        e.d(r, {
+        default: () => /* reexport */ Y,
+        getInitials: () => /* reexport */ h
+    });
+    // CONCATENATED MODULE: external "react"
+    const t = require("react");
+    var n =  e.n(t);
+    // CONCATENATED MODULE: external "prop-types"
+    const o = require("prop-types");
+    var i =  e.n(o);
+    // CONCATENATED MODULE: external "lodash/omit"
+    const a = require("lodash/omit");
+    var l =  e.n(a);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const u = require("@splunk/themes");
+    // CONCATENATED MODULE: external "styled-components"
+    const c = require("styled-components");
+    var s =  e.n(c);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const f = require("@splunk/react-ui/Clickable");
+    var d =  e.n(f);
+    // CONCATENATED MODULE: ./src/Avatar/AvatarStyles.ts
+    var v = (0, c.css)([ "", ";align-items:center;justify-content:center;border-radius:50%;font-weight:normal;overflow:visible;vertical-align:middle;position:relative;background-color:", ";", ";& > img{object-fit:cover;height:100%;width:100%;border-radius:50%;}" ], u.mixins.reset("inline-flex"), (function(e) {
+        var r = e.$backgroundColor;
+        return r;
+    }), (function(e) {
+        var r = e.$size;
+        if (typeof r === "string") {
+            if (r === "small") {
+                return (0, c.css)([ "height:24px;width:24px;" ]);
+            }
+            if (r === "medium") {
+                return (0, c.css)([ "height:32px;width:32px;" ]);
+            }
+            if (r === "large") {
+                return (0, c.css)([ "height:48px;width:48px;" ]);
+            }
+        }
+        return (0, c.css)([ "height:", ";width:", ";" ], r, r);
+    }));
+    var b = s().div.withConfig({
+        displayName: "AvatarStyles__Styled",
+        componentId: "sc-1t4nch-0"
+    })([ "", "" ], v);
+    var y = s()(d()).withConfig({
+        displayName: "AvatarStyles__StyledClickable",
+        componentId: "sc-1t4nch-1"
+    })([ "", " cursor:pointer;position:relative;border:1px solid transparent;border-radius:50%;:hover{border-color:", ";}:focus{box-shadow:", ";z-index:1;}:active{border-color:", ";}" ], v, u.variables.actionColorBorderSecondaryHover, u.variables.focusShadow, u.variables.actionColorBorderSecondaryActive);
+    var p = s().svg.withConfig({
+        displayName: "AvatarStyles__StyledSVG",
+        componentId: "sc-1t4nch-2"
+    })([ "position:absolute;top:0;left:0;border-radius:50%;" ]);
+    var m = s().text.withConfig({
+        displayName: "AvatarStyles__StyledText",
+        componentId: "sc-1t4nch-3"
+    })([ "", ";text-transform:capitalize;text-anchor:middle;dominant-baseline:middle;alignment-baseline:middle;fill:", ";transform:translate(50%,54%);" ], u.mixins.typography({
+        weight: "bold"
+    }), (function(e) {
+        var r = e.$textColor;
+        return r;
+    }));
+    // CONCATENATED MODULE: ./src/Avatar/getInitials.ts
+    /**
+ * Returns a suitable set of initials for a name. Uses the first character of each
+ * name segment and omits middle segments if the segment count is greater than three.
+ * @param {string} name - The full name.
+ * @returns {string} Limited to three characters. Empty if `name` is empty.
+ * @public
+ */
+    function g(e) {
+        var r = (e.match(/[^\s-]+/g) || []).map((function(e) {
+            return e[0];
+        })).join("");
+        return r.length > 3 ? "".concat(r[0]).concat(r[r.length - 1]) : r;
+    }
+    /* harmony default export */    const h = g;
+    // CONCATENATED MODULE: external "@splunk/ui-utils/color"
+    const O = require("@splunk/ui-utils/color");
+    // CONCATENATED MODULE: ./src/utils/determineTextBrightness.ts
+    function S(e, r) {
+        return k(e) || C(e, r) || j(e, r) || w();
+    }
+    function w() {
+        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 j(e, r) {
+        if (e) {
+            if ("string" == typeof e) return x(e, r);
+            var t = {}.toString.call(e).slice(8, -1);
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? x(e, r) : void 0;
+        }
+    }
+    function x(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var t = 0, n = Array(r); t < r; t++) {
+            n[t] = e[t];
+        }
+        return n;
+    }
+    function C(e, r) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var n, o, i, a, l = [], u = !0, c = !1;
+            try {
+                if (i = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
+                    u = !1;
+                } else for (;!(u = (n = i.call(t)).done) && (l.push(n.value), l.length !== r); u = !0) {
+                }
+            } catch (e) {
+                c = !0, o = e;
+            } finally {
+                try {
+                    if (!u && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
+                } finally {
+                    if (c) throw o;
+                }
+            }
+            return l;
+        }
+    }
+    function k(e) {
+        if (Array.isArray(e)) return e;
+    }
+    var P = "lightText";
+    var A = "darkText";
+    function E(e) {
+        var r = S(e, 3), t = r[0], n = r[1], o = r[2];
+        var i = (t * 299 + n * 587 + o * 114) / 1e3;
+ // formula from https://www.w3.org/TR/AERT/#color-contrast
+                return i > 125 ? A : P;
+    }
+    /**
+ * Determines if light or dark text should be used over a specific background color by determining the color brightness of a
+ * supplied background color.
+ * @param isLight - True if colorScheme is light. False if colorScheme is dark.
+ * @param backgroundColor - accepts hex color, rgb, rgba, common color keywords
+ * @returns DARK_TEXT or LIGHT_TEXT
+ *
+ * Some things to watch out for:
+ * 1. determineTextBrightness helps you come close to accessible contrast, but it is not guaranteed to always work.
+ * It might fail say for a color that is in the middle in terms of brightness/ near the borderline of the cutoff.
+ * For example if a background color has a text brightness of 124 when the cutoff is determined by: brightness > 125 ? DARK_TEXT : LIGHT_TEXT
+ * 2. If you use a color that is not black for dark text or white for light text that would decrease the likelihood that it would pass contrast with the background color
+ * if you use determineTextBrightness to decide whether to use dark or light text.
+ */    function T(e, r) {
+        if (typeof r === "string") {
+            if ((0, O.isValidHexColor)(r)) {
+                // hex
+                var t = r;
+                if (t.length === 3 || t.length === 4) {
+                    // shorthand hex
+                    t = (0, O.expandShortHandHex)(t);
+                }
+                var n = (0, O.hexToRgb)(t);
+                if (n != null) {
+                    return E(n);
+                }
+            } else if (r.includes(",")) {
+                if ((0, O.isValidRgb)(r)) {
+                    // rgb
+                    var o = r.replace(/[^\d,]/g, "").split(",").slice(0, 3);
+                    var i = o.map((function(e) {
+                        return parseInt(e, 10);
+                    })), a = S(i, 3), l = a[0], u = a[1], c = a[2];
+                    return E([ l, u, c ]);
+                }
+            } else if (O.extendedColorKeywords.includes(r.toLowerCase())) {
+                // named color
+                var s = (0, O.namedColorToHex)(r.toLowerCase());
+                if (s != null) {
+                    var f = (0, O.hexToRgb)(s);
+                    if (f != null) {
+                        return E(f);
+                    }
+                }
+            }
+        }
+        // TODO: Need to add support for auto text color to work with theme variable background color (SUI-5706).
+        /**
+   * We know the backgroundColor defaults to variables.neutral200 so to save on computing we hard code the text brightness.
+   * TODO: Convert theme variable color variables.neutral200 to rgb dynamically and memoize it (SUI-5731).
+   */
+        // backgroundColor is either not provided or an accepted representation of color
+                return e ? A : P;
+    }
+    // CONCATENATED MODULE: ./src/Avatar/Avatar.tsx
+    function I(e) {
+        "@babel/helpers - typeof";
+        return I = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+            return typeof e;
+        } : function(e) {
+            return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+        }, I(e);
+    }
+    function _(e, r) {
+        var t = Object.keys(e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(e);
+            r && (n = n.filter((function(r) {
+                return Object.getOwnPropertyDescriptor(e, r).enumerable;
+            }))), t.push.apply(t, n);
+        }
+        return t;
+    }
+    function R(e) {
+        for (var r = 1; r < arguments.length; r++) {
+            var t = null != arguments[r] ? arguments[r] : {};
+            r % 2 ? _(Object(t), !0).forEach((function(r) {
+                z(e, r, t[r]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : _(Object(t)).forEach((function(r) {
+                Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+            }));
+        }
+        return e;
+    }
+    function z(e, r, t) {
+        return (r = q(r)) in e ? Object.defineProperty(e, r, {
+            value: t,
+            enumerable: !0,
+            configurable: !0,
+            writable: !0
+        }) : e[r] = t, e;
+    }
+    function q(e) {
+        var r = $(e, "string");
+        return "symbol" == I(r) ? r : r + "";
+    }
+    function $(e, r) {
+        if ("object" != I(e) || !e) return e;
+        var t = e[Symbol.toPrimitive];
+        if (void 0 !== t) {
+            var n = t.call(e, r || "default");
+            if ("object" != I(n)) return n;
+            throw new TypeError("@@toPrimitive must return a primitive value.");
+        }
+        return ("string" === r ? String : Number)(e);
+    }
+    function H() {
+        return H = Object.assign ? Object.assign.bind() : function(e) {
+            for (var r = 1; r < arguments.length; r++) {
+                var t = arguments[r];
+                for (var n in t) {
+                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
+                }
+            }
+            return e;
+        }, H.apply(null, arguments);
+    }
+    function M(e, r) {
+        return L(e) || B(e, r) || D(e, r) || N();
+    }
+    function N() {
+        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) {
+        if (e) {
+            if ("string" == typeof e) return V(e, r);
+            var t = {}.toString.call(e).slice(8, -1);
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? V(e, r) : void 0;
+        }
+    }
+    function V(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var t = 0, n = Array(r); t < r; t++) {
+            n[t] = e[t];
+        }
+        return n;
+    }
+    function B(e, r) {
+        var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != t) {
+            var n, o, i, a, l = [], u = !0, c = !1;
+            try {
+                if (i = (t = t.call(e)).next, 0 === r) {
+                    if (Object(t) !== t) return;
+                    u = !1;
+                } else for (;!(u = (n = i.call(t)).done) && (l.push(n.value), l.length !== r); u = !0) {
+                }
+            } catch (e) {
+                c = !0, o = e;
+            } finally {
+                try {
+                    if (!u && null != t["return"] && (a = t["return"](), Object(a) !== a)) return;
+                } finally {
+                    if (c) throw o;
+                }
+            }
+            return l;
+        }
+    }
+    function L(e) {
+        if (Array.isArray(e)) return e;
+    }
+    function U(e, r) {
+        if (null == e) return {};
+        var t, n, o = G(e, r);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                t = i[n], r.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+            }
+        }
+        return o;
+    }
+    function G(e, r) {
+        if (null == e) return {};
+        var t = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (r.includes(n)) continue;
+                t[n] = e[n];
+            }
+        }
+        return t;
+    }
+    /** @public */    var K = {
+        backgroundColor: i().oneOfType([ i().string, i().func ]),
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        image: i().node,
+        initials: i().string.isRequired,
+        label: i().string.isRequired,
+        onClick: i().func,
+        size: i().oneOfType([ i().oneOf([ "small", "medium", "large" ]), i().string ]),
+        to: i().string,
+        /** @private */
+        textColor: i().oneOfType([ i().oneOf([ "auto" ]), i().string, i().func ]),
+        value: i().string
+    };
+    function F(e) {
+        return !!e.onClick || !!e.to;
+    }
+    function J(e) {
+        var r = e.backgroundColor, t = e.initials, n = e.label, o = e.size, i = U(e, [ "backgroundColor", "initials", "label", "size" ]);
+        var a = r == null ? u.variables.neutral200 : r;
+        var l = {
+            "aria-label": n,
+            "data-test": "avatar",
+            $backgroundColor: a,
+            $initials: t,
+            $size: o
+        };
+        return [ l, i ];
+    }
+    function Q(e) {
+        var r = J(e), o = M(r, 2), i = o[0], a = o[1];
+        var u = a.children, c = a.elementRef, s = a.value, f = a.onClick, d = a.to, v = U(a, [ "children", "elementRef", "value", "onClick", "to" ]);
+        var b = (0, t.useCallback)((function(e) {
+            f === null || f === void 0 ? void 0 : f(e, {
+                value: s
+            });
+        }), [ f, s ]);
+        
+        return n().createElement(y, H({
+            elementRef: c,
+            onClick: b,
+            to: d
+        }, i, l()(v, Object.keys(K))), u);
+    }
+    function W(e) {
+        var r = J(e), t = M(r, 2), o = t[0], i = t[1];
+        var a = i.children, u = i.elementRef, c = U(i, [ "children", "elementRef" ]);
+        
+        return n().createElement(b, H({
+            ref: u
+        }, o, l()(c, Object.keys(K))), a);
+    }
+    function X(e) {
+        var r = e.backgroundColor, o = e.textColor, i = o === void 0 ? "auto" : o, a = e.initials, l = e.image, c = e.size, s = c === void 0 ? "medium" : c, f = U(e, [ "backgroundColor", "textColor", "initials", "image", "size" ]);
+        // @docs-props-type AvatarPropsBase
+                var d = (0, u.useSplunkTheme)(), v = d.isLight;
+        var b = i;
+        if (i === "auto") {
+            var y = T(v, r);
+            b = y === A ? u.variables.black : u.variables.white;
+        }
+        var g =  n().createElement(p, {
+            viewBox: "0 0 32 32"
+        },  n().createElement(m, {
+            "data-test": "initials",
+            $textColor: b
+        }, a));
+        var h = l !== null && l !== void 0 ? l : g;
+        var O = (0, t.useState)("loading"), S = M(O, 2), w = S[0], j = S[1];
+        if ( (0, t.isValidElement)(l)) {
+            if (l.type === "img") {
+                var x = l.props, C = x.src, k = x.alt, P = x.onError, E = U(x, [ "src", "alt", "onError" ]);
+                var I =  n().createElement("img", H({
+                    src: C,
+                    alt: k,
+                    onError: function e() {
+                        j("error");
+                        if (P) {
+                            P();
+                        }
+                    }
+                }, E));
+                h = I;
+            }
+        }
+        // fallback to initials if img fails to load
+                var _ = w !== "error" ? h : g;
+        var z = R({
+            backgroundColor: r,
+            size: s,
+            initials: a,
+            image: l,
+            textColor: i
+        }, f);
+        return F(z) ?  n().createElement(Q, z, _) :  n().createElement(W, z, _);
+    }
+    X.propTypes = K;
+    /* harmony default export */    const Y = X;
+    // CONCATENATED MODULE: ./src/Avatar/index.ts
+    module.exports = r;
+    /******/})();

package/Box.js

@@ -70,15 +70,15 @@
     const l = require("prop-types");
     var i =  e.n(l);
     // CONCATENATED MODULE: external "styled-components"
-    const a = require("styled-components");
-    var o =  e.n(a);
+    const o = require("styled-components");
+    var a =  e.n(o);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const d = require("@splunk/themes");
+    const f = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Box/BoxStyles.ts
-    var f = o().div.withConfig({
+    var d = a().div.withConfig({
         displayName: "BoxStyles__Styled",
         componentId: "sc-1h4b5f6-0"
-    })([ "", ";align-items:stretch;align-content:stretch;flex-flow:row nowrap;flex-grow:0;flex-shrink:0;justify-content:flex-start;width:auto;max-width:100%;@media all and (-ms-high-contrast:none){max-width:calc(100% - 0.01px);}&[data-inline]{display:inline-block;vertical-align:middle;}&[data-flex]{display:flex;}&[data-flex][data-inline]{display:inline-flex;}" ], d.mixins.reset("block"));
+    })([ "", ";align-items:stretch;align-content:stretch;flex-flow:row nowrap;flex-grow:0;flex-shrink:0;justify-content:flex-start;width:auto;max-width:100%;&[data-inline]{display:inline-block;vertical-align:middle;}&[data-flex]{display:flex;}&[data-flex][data-inline]{display:inline-flex;}" ], f.mixins.reset("block"));
     // CONCATENATED MODULE: ./src/Box/Box.tsx
     function s() {
         return s = Object.assign ? Object.assign.bind() : function(e) {
@@ -122,10 +122,10 @@
     /**
  * Box is a utility component to normalize and abstract common layout styles.
  */    function y(e) {
-        var n = e.children, t = e.elementRef, l = e.flex, i = l === void 0 ? false : l, a = e.tag, o = a === void 0 ? "div" : a, d = e.inline, u = d === void 0 ? false : d, p = c(e, [ "children", "elementRef", "flex", "tag", "inline" ]);
+        var n = e.children, t = e.elementRef, l = e.flex, i = l === void 0 ? false : l, o = e.tag, a = o === void 0 ? "div" : o, f = e.inline, u = f === void 0 ? false : f, p = c(e, [ "children", "elementRef", "flex", "tag", "inline" ]);
         
-        return r().createElement(f, s({
-            as: o,
+        return r().createElement(d, s({
+            as: a,
             ref: t
         }, p, {
             "data-inline": u || undefined,