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

package/Clickable.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = n => {
-            /******/ var t = n && n.__esModule ? 
+            /******/ var r = n && n.__esModule ? 
             /******/ () => n["default"]
             /******/ : () => n
             /******/;
-            e.d(t, {
-                a: t
+            e.d(r, {
+                a: r
             });
-            /******/            return t;
+            /******/            return r;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (n, t) => {
-            /******/ for (var r in t) {
-                /******/ if (e.o(t, r) && !e.o(n, r)) {
-                    /******/ Object.defineProperty(n, r, {
+        /******/ e.d = (n, r) => {
+            /******/ for (var t in r) {
+                /******/ if (e.o(r, t) && !e.o(n, t)) {
+                    /******/ Object.defineProperty(n, t, {
                         enumerable: true,
-                        get: t[r]
+                        get: r[t]
                     });
                     /******/                }
                 /******/            }
@@ -61,80 +61,64 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        NavigationContext: () => /* reexport */ h,
-        NavigationProvider: () => /* reexport */ m,
-        default: () => /* reexport */ J,
-        isInternalLink: () => /* reexport */ H,
-        isRootRelativeLink: () => /* reexport */ B
+        NavigationContext: () => /* reexport */ m,
+        NavigationProvider: () => /* reexport */ y,
+        default: () => /* reexport */ R,
+        isInternalLink: () => /* reexport */ j,
+        isRootRelativeLink: () => /* reexport */ S
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var r =  e.n(t);
+    const r = require("react");
+    var t =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
-    const o = require("prop-types");
-    var i =  e.n(o);
+    const i = require("prop-types");
+    var a =  e.n(i);
     // CONCATENATED MODULE: external "lodash/has"
-    const l = require("lodash/has");
+    const o = require("lodash/has");
     // CONCATENATED MODULE: external "lodash/isString"
-    const a = require("lodash/isString");
-    var u =  e.n(a);
+    const l = require("lodash/isString");
+    var u =  e.n(l);
     // CONCATENATED MODULE: external "lodash/omit"
     const c = require("lodash/omit");
-    var s =  e.n(c);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const f = require("@splunk/react-ui/Dropdown");
+    var d =  e.n(c);
     // CONCATENATED MODULE: external "styled-components"
-    const p = require("styled-components");
-    var d =  e.n(p);
+    const s = require("styled-components");
+    var f =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const b = require("@splunk/themes");
+    const v = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Clickable/ClickableStyles.ts
-    var v = d().a.withConfig({
+    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;}" ], b.mixins.reset("inline"), b.variables.contentColorDisabled);
+    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], v.mixins.reset("inline"), v.variables.contentColorDisabled);
     // CONCATENATED MODULE: ./src/Clickable/NavigationProvider.tsx
     /** @public */
-    var y = {
-        children: i().node,
-        onClick: i().func,
-        onLinkClick: i().func,
-        prefix: i().string,
-        transformUrl: i().func
+    var p = {
+        children: a().node,
+        onClick: a().func,
+        onLinkClick: a().func,
+        transformUrl: a().func
     };
-    var h =  r().createContext({});
+    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 m(e) {
-        var n = e.children, o = e.onClick, i = e.onLinkClick, l = e.prefix, a = e.transformUrl;
+ */    function y(e) {
+        var n = e.children, i = e.onClick, a = e.onLinkClick, o = e.transformUrl;
         // @docs-props-type NavigationProviderProps
-                var u = (0, t.useMemo)((function() {
-            var e;
-            if (a != null) {
-                if (false) {}
-                e = a;
-            } else if (l != null) {
-                if (false) {}
-                // eslint-disable-next-line default-param-last
-                                e = function e() {
-                    var n = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-                    var t = arguments.length > 1 ? arguments[1] : undefined, r = t.isInternal, o = t.isRootRelative;
-                    return l != null && r && o ? "".concat(l).concat(n) : n;
-                };
-            }
+                var l = (0, r.useMemo)((function() {
             return {
-                onClick: o,
-                onLinkClick: i,
-                transformUrl: e
+                onClick: i,
+                onLinkClick: a,
+                transformUrl: o
             };
-        }), [ o, i, l, a ]);
+        }), [ i, a, o ]);
         
-        return r().createElement(h.Provider, {
-            value: u
+        return t().createElement(m.Provider, {
+            value: l
         }, n);
     }
-    m.propTypes = y;
+    y.propTypes = p;
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -155,286 +139,166 @@
         }
     }
     // CONCATENATED MODULE: ./src/Clickable/Clickable.tsx
-    function g(e) {
-        "@babel/helpers - typeof";
-        return g = "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;
-        }, g(e);
-    }
     function C() {
         return C = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
-                var t = arguments[n];
-                for (var r in t) {
-                    ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
+                var r = arguments[n];
+                for (var t in r) {
+                    ({}).hasOwnProperty.call(r, t) && (e[t] = r[t]);
                 }
             }
             return e;
         }, C.apply(null, arguments);
     }
-    function O(e, n) {
+    function g(e, n) {
         if (null == e) return {};
-        var t, r, o = w(e, n);
+        var r, t, i = h(e, n);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (r = 0; r < i.length; r++) {
-                t = i[r], n.includes(t) || {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
+            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]);
             }
         }
-        return o;
+        return i;
     }
-    function w(e, n) {
+    function h(e, n) {
         if (null == e) return {};
-        var t = {};
-        for (var r in e) {
-            if ({}.hasOwnProperty.call(e, r)) {
-                if (n.includes(r)) continue;
-                t[r] = e[r];
+        var r = {};
+        for (var t in e) {
+            if ({}.hasOwnProperty.call(e, t)) {
+                if (n.includes(t)) continue;
+                r[t] = e[t];
             }
         }
-        return t;
-    }
-    function j(e, n) {
-        if (!(e instanceof n)) throw new TypeError("Cannot call a class as a function");
-    }
-    function P(e, n) {
-        for (var t = 0; t < n.length; t++) {
-            var r = n[t];
-            r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), 
-            Object.defineProperty(e, M(r.key), r);
-        }
-    }
-    function S(e, n, t) {
-        return n && P(e.prototype, n), t && P(e, t), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
-    }
-    function x(e, n) {
-        if ("function" != typeof n && null !== n) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(n && n.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
-            }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), n && R(e, n);
-    }
-    function R(e, n) {
-        return R = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, n) {
-            return e.__proto__ = n, e;
-        }, R(e, n);
-    }
-    function T(e) {
-        var n = N();
-        return function() {
-            var t, r = E(e);
-            if (n) {
-                var o = E(this).constructor;
-                t = Reflect.construct(r, arguments, o);
-            } else t = r.apply(this, arguments);
-            return _(this, t);
-        };
-    }
-    function _(e, n) {
-        if (n && ("object" == g(n) || "function" == typeof n)) return n;
-        if (void 0 !== n) throw new TypeError("Derived constructors may only return object or undefined");
-        return I(e);
-    }
-    function I(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
-    }
-    function N() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (N = function n() {
-            return !!e;
-        })();
-    }
-    function E(e) {
-        return E = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, E(e);
-    }
-    function L(e, n, t) {
-        return (n = M(n)) in e ? Object.defineProperty(e, n, {
-            value: t,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[n] = t, e;
+        return r;
     }
-    function M(e) {
-        var n = q(e, "string");
-        return "symbol" == g(n) ? n : n + "";
-    }
-    function q(e, n) {
-        if ("object" != g(e) || !e) return e;
-        var t = e[Symbol.toPrimitive];
-        if (void 0 !== t) {
-            var r = t.call(e, n || "default");
-            if ("object" != g(r)) return r;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
-        }
-        return ("string" === n ? String : Number)(e);
-    }
-    var U = /^[a-z0-9]+:/;
-    var D = /^\/\//;
-    var z = /^\//;
-    var B = function e(n) {
-        return n != null && z.test(n);
-    };
-    var H = function e(n) {
-        return n != null && !U.test(n) && !D.test(n);
+    var O = /^[a-z0-9]+:/;
+    var w = /^\/\//;
+    var P = /^\//;
+    var S = function e(n) {
+        return n != null && P.test(n);
     };
-    var K = {
-        /** @private */
-        allowDisabledLink: i().bool,
-        children: i().node,
-        disabled: i().oneOfType([ i().bool, i().oneOf([ "dimmed" ]) ]),
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        onClick: i().func,
-        openInNewContext: i().bool,
-        navigationLabel: i().string,
-        to: i().string
+    var j = function e(n) {
+        return n != null && !O.test(n) && !w.test(n);
     };
-    var A = {
-        disabled: false,
-        openInNewContext: false
+    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
     };
-    function F(e) {
-        return !!e.to && !e.disabled;
+    function L(e, n) {
+        return !!n && !e;
     }
     /**
  * `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 G =  function(e) {
-        x(t, e);
-        var n = T(t);
+ */    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" ]);
         // @docs-props-type ClickablePropsBase
-        // should use ClickablePropsBase but fails on refs - observe
-                function t(e) {
-            var r;
-            j(this, t);
-            r = n.call(this, e);
-            L(I(r), "el", null);
-            L(I(r), "handleMount", (function(e) {
-                r.el = e;
-                k(r.props.elementRef, e);
-            }));
-            L(I(r), "createHandleOnClick", (function() {
-                var e = r.context, n = e.onClick, t = e.onLinkClick;
-                return function(e) {
-                    if (F(r.props)) {
-                        // when user command-click on mac or ctrl-click on other platforms, and
-                        // Tag is an <a>, let the click pass through, let the <a> to achieve user's
-                        // intent of 'open in new context'
-                        // on mac, ctrl-click will be caught and open option menu even before hitting
-                        // the DOM, so we're safe to check both metaKey and ctrlKey here
-                        // without platform sniffing
-                        if ((e.metaKey || e.ctrlKey) && r.props.to) {
-                            return;
-                        }
-                    }
-                    if (r.props.onClick) {
-                        r.props.onClick(e);
-                    }
-                    var o = r.props.onClick == null && n != null;
-                    if (F(r.props) && (o || t != null)) {
-                        var i = r.props.navigationLabel;
-                        if (!i && u()(r.props.children)) {
-                            i = r.props.children;
-                        }
-                        var l = {
-                            to: r.getTransformedUrl(r.props.to),
-                            originalTo: r.props.to,
-                            openInNewContext: r.props.openInNewContext,
-                            label: i
-                        };
-                        if (o) {
-                            n(e, l);
-                        }
-                        t === null || t === void 0 ? void 0 : t(e, l);
-                    }
-                };
-            }));
-            L(I(r), "getTransformedUrl", (function(e) {
-                var n = r.context.transformUrl;
-                return n != null ? n(e, {
-                    isInternal: H(e),
-                    isRootRelative: B(e)
-                }) : e;
-            }));
+                var p = (0, r.useContext)(m), y = p.onClick, h = p.onLinkClick, O = p.transformUrl;
+        (0, r.useEffect)((function() {
             if (false) {}
-            return r;
-        }
-        S(t, [ {
-            key: "focus",
-            /**
-     * Place focus on the element.
-     */
-            // eslint-disable-next-line react/no-unused-class-component-methods
-            value: function e() {
-                var n;
-                (n = this.el) === null || n === void 0 ? void 0 : n.focus();
+            // this effect only runs once
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+                }), []);
+        var w = (0, r.useCallback)((function(e) {
+            k(o, e);
+            k(n, e);
+        }), [ o, n ]);
+        // memoizing this result causes TS to lose track of the type guard established by isLinkCheck
+                var P = L(a, 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
+                var x = (0, r.useCallback)((function(e) {
+            return O != null ? O(e, {
+                isInternal: j(e),
+                isRootRelative: S(e)
+            }) : e;
+        }), [ O ]);
+        var I = (0, r.useCallback)((function(e) {
+            if (P) {
+                // when user command-click on mac or ctrl-click on other platforms, and
+                // Tag is an <a>, let the click pass through, let the <a> to achieve user's
+                // intent of 'open in new context'
+                // on mac, ctrl-click will be caught and open option menu even before hitting
+                // the DOM, so we're safe to check both metaKey and ctrlKey here
+                // without platform sniffing
+                if ((e.metaKey || e.ctrlKey) && f) {
+                    return;
+                }
             }
-        }, {
-            key: "render",
-            value: function e() {
-                var n = this.createHandleOnClick();
-                // Only set the href attribute when enabled, and therefore using an <a> tag
-                                if (F(this.props)) {
-                    var t = this.props, o = t.children, i = t.openInNewContext, l = t.to, a = O(t, [ "children", "openInNewContext", "to" ]);
-                    var u = i ? "_blank" : undefined;
-                    var c = i && H(l) ? "noopener noreferrer" : undefined;
-                    
-                    return r().createElement(v, C({
-                        "data-test": "clickable",
-                        ref: this.handleMount,
-                        href: this.getTransformedUrl(this.props.to),
-                        target: u,
-                        rel: c,
-                        onClick: n
-                    }, s()(a, "disabled", "elementRef", "onClick")), o);
+            c === null || c === void 0 ? void 0 : c(e);
+            var n = c == null && y != null;
+            if (P && (n || h != null)) {
+                var r = l;
+                if (!r && u()(i)) {
+                    r = i;
                 }
-                if (this.props.allowDisabledLink) {
-                    var f = this.props, p = f.children, d = O(f, [ "children" ]);
-                    if (this.props.disabled && this.props.to != null) {
-                        
-                        return r().createElement(v, C({
-                            "data-test": "clickable",
-                            ref: this.handleMount,
-                            role: "link",
-                            "aria-disabled": "true"
-                        }, s()(d, "href", "to", "elementRef", "onClick", "disabled")), p);
-                    }
+                var t = {
+                    to: x(f),
+                    originalTo: f,
+                    openInNewContext: s,
+                    label: r
+                };
+                if (n) {
+                    y(e, t);
                 }
-                // button variant
-                                var b = this.props, y = b.children, h = b.onClick, m = b.disabled, k = b.type, g = O(b, [ "children", "onClick", "disabled", "type" ]);
-                
-                return r().createElement(v, C({
-                    as: "button",
-                    "aria-disabled": m === "dimmed" || undefined,
-                    "data-test": "clickable",
-                    ref: this.handleMount,
-                    type: k || "button",
-                    disabled: m === true,
-                    onClick: h && !m ? n : undefined
-                }, s()(g, "elementRef", "openInNewContext", "to")), y);
+                h === null || h === void 0 ? void 0 : h(e, t);
             }
-        } ]);
-        return t;
-    }(t.Component);
-    L(G, "contextType", h);
-    L(G, "propTypes", K);
-    L(G, "defaultProps", A);
-    L(G, f.legacyRefMode, true);
-    /* harmony default export */    const J = G;
-    // CONCATENATED MODULE: ./src/Clickable/index.ts
+        }), [ i, x, P, l, c, y, h, s, f ]);
+        // Only set the href attribute when enabled, and therefore using an <a> tag
+                if (P) {
+            var R = s ? "_blank" : undefined;
+            var q = s && j(f) ? "noopener noreferrer" : undefined;
+            
+            return t().createElement(b, C({
+                "data-test": "clickable",
+                ref: w,
+                href: x(f),
+                target: R,
+                rel: q,
+                onClick: I
+            }, d()(v)), i);
+        }
+        if (a && f != null) {
+            
+            return t().createElement(b, C({
+                "data-test": "clickable",
+                ref: w,
+                role: "link",
+                "aria-disabled": "true"
+            }, v), i);
+        }
+        // button variant
+                var N = a === true || a === "dimmed" || undefined;
+        var T;
+        if (N) {
+            T = "dimmed";
+        } else if (a === "disabled") {
+            T = "disabled";
+        }
+        
+        return t().createElement(b, C({
+            as: "button",
+            "aria-disabled": N,
+            "data-test": "clickable",
+            "data-test-disabled": T,
+            ref: w,
+            type: "button",
+            disabled: a === "disabled",
+            onClick: c && !a ? I : undefined
+        }, d()(v, "disabled")), i);
+    }));
+    I.propTypes = x;
+    /* harmony default export */    const R = I;
+    // forwardRef appears to prevent TS from inferring ClickableProps in components that import Clickable
+    // so we need to export it separately to prevent the TS build from failing with:
+    // "... has or is using name 'ClickablePropsBase' from external module "...packages/react-ui/src/Clickable/Clickable" but cannot be named."
+        // CONCATENATED MODULE: ./src/Clickable/index.ts
     module.exports = n;
     /******/})();