@splunk/react-ui 5.8.0 → 5.9.0

package/Clickable.js

@@ -63,9 +63,9 @@
         e.d(n, {
         NavigationContext: () => /* reexport */ m,
         NavigationProvider: () => /* reexport */ y,
-        default: () => /* reexport */ R,
-        isInternalLink: () => /* reexport */ S,
-        isRootRelativeLink: () => /* reexport */ P
+        default: () => /* reexport */ T,
+        isInternalLink: () => /* reexport */ j,
+        isRootRelativeLink: () => /* reexport */ S
     });
     // CONCATENATED MODULE: external "react"
     const r = require("react");
@@ -74,51 +74,93 @@
     const i = require("lodash/has");
     // CONCATENATED MODULE: external "lodash/isString"
     const a = require("lodash/isString");
-    var o =  e.n(a);
+    var l =  e.n(a);
     // CONCATENATED MODULE: external "lodash/omit"
-    const l = require("lodash/omit");
-    var d =  e.n(l);
+    const o = require("lodash/omit");
+    var d =  e.n(o);
     // CONCATENATED MODULE: external "prop-types"
     const u = require("prop-types");
-    var c =  e.n(u);
+    var s =  e.n(u);
     // CONCATENATED MODULE: external "styled-components"
-    const s = require("styled-components");
-    var f =  e.n(s);
+    const f = require("styled-components");
+    var c =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const v = require("@splunk/themes");
+    const b = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Clickable/ClickableStyles.ts
-    var b = f().a.withConfig({
+    var v = c().a.withConfig({
         displayName: "ClickableStyles__StyledA",
         componentId: "sc-7al1vw-0"
-    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{cursor:not-allowed;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;}" ], b.mixins.reset("inline"), b.variables.contentColorDisabled);
     // CONCATENATED MODULE: ./src/Clickable/NavigationProvider.tsx
     /** @public */
     var p = {
-        children: c().node,
-        onClick: c().func,
-        onLinkClick: c().func,
-        transformUrl: c().func
+        children: s().node,
+        onClick: s().func,
+        onLinkClick: s().func,
+        transformUrl: s().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, a = e.onLinkClick, l = e.transformUrl;
         // @docs-props-type NavigationProviderProps
-                var l = (0, r.useMemo)((function() {
+                var o = (0, r.useMemo)((function() {
             return {
                 onClick: i,
                 onLinkClick: a,
-                transformUrl: o
+                transformUrl: l
             };
-        }), [ i, a, o ]);
+        }), [ i, a, l ]);
         
         return t().createElement(m.Provider, {
-            value: l
+            value: o
         }, n);
     }
     y.propTypes = p;
+    // CONCATENATED MODULE: ./src/utils/disabled.ts
+    /**
+ * Normalizes the disabled prop and returns both the boolean state and normalized string value.
+ * Use this function to ensure consistent handling of disabled prop across components.
+ *
+ * @param disabled - The disabled prop value
+ * @param defaultWhenBooleanTrue - Optional normalization override for disabled={true}
+ * @returns Object with isDisabled boolean|undefined and disabledValue string
+ *
+ * TODO (SUI-8600): `disabled` prop should default to 'dimmed' for data entry components
+ */
+    function k(e) {
+        var n = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "dimmed";
+        if (e === "dimmed") {
+            return {
+                isDisabled: true,
+                disabledValue: "dimmed"
+            };
+        }
+        if (e === true) {
+            return {
+                isDisabled: true,
+                disabledValue: n
+            };
+        }
+        if (e === "disabled") {
+            return {
+                isDisabled: true,
+                disabledValue: "disabled"
+            };
+        }
+        if (e === false) {
+            return {
+                isDisabled: false,
+                disabledValue: undefined
+            };
+        }
+        return {
+            isDisabled: undefined,
+            disabledValue: undefined
+        };
+    }
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -126,7 +168,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function k(e, n) {
+    function g(e, n) {
         if (e) {
             if (typeof e === "function") {
                 e(n);
@@ -150,9 +192,9 @@
             return e;
         }, C.apply(null, arguments);
     }
-    function g(e, n) {
+    function O(e, n) {
         if (null == e) return {};
-        var r, t, i = O(e, n);
+        var r, t, i = h(e, n);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -161,7 +203,7 @@
         }
         return i;
     }
-    function O(e, n) {
+    function h(e, n) {
         if (null == e) return {};
         var r = {};
         for (var t in e) {
@@ -172,132 +214,127 @@
         }
         return r;
     }
-    var h = /^[a-z0-9]+:/;
-    var w = /^\/\//;
-    var x = /^\//;
-    var P = function e(n) {
-        return n != null && x.test(n);
-    };
+    var w = /^[a-z0-9]+:/;
+    var x = /^\/\//;
+    var P = /^\//;
     var S = function e(n) {
-        return n != null && !h.test(n) && !w.test(n);
+        return n != null && P.test(n);
+    };
+    var j = function e(n) {
+        return n != null && !w.test(n) && !x.test(n);
     };
-    var j = {
-        children: c().node,
-        disabled: c().oneOfType([ c().bool, c().oneOf([ "dimmed", "disabled" ]) ]),
-        elementRef: c().oneOfType([ c().func, c().object ]),
-        onClick: c().func,
-        openInNewContext: c().bool,
-        navigationLabel: c().string,
-        to: c().oneOfType([ c().string, c().oneOf([ undefined ]) ])
+    var L = {
+        children: s().node,
+        disabled: s().oneOfType([ s().bool, s().oneOf([ "dimmed", "disabled" ]) ]),
+        elementRef: s().oneOfType([ s().func, s().object ]),
+        onClick: s().func,
+        openInNewContext: s().bool,
+        navigationLabel: s().string,
+        to: s().oneOfType([ s().string, s().oneOf([ undefined ]) ])
     };
-    function L(e, n) {
+    function I(e, n) {
         return e !== "button" && n !== undefined;
     }
     /**
  * `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, 
+ */    var R =  t().forwardRef((function(e, 
     // SUI-7623 - needs to be specified for react-docgen versions less than 7.1.0
     n) {
-        var i = e.children, a = e.disabled, l = e.elementRef, u = e.navigationLabel, c = e.onClick, s = e.openInNewContext, f = e.tag, v = e.to, p = g(e, [ "children", "disabled", "elementRef", "navigationLabel", "onClick", "openInNewContext", "tag", "to" ]);
+        var i = e.children, a = e.disabled, o = e.elementRef, u = e.navigationLabel, s = e.onClick, f = e.openInNewContext, c = e.tag, b = e.to, p = O(e, [ "children", "disabled", "elementRef", "navigationLabel", "onClick", "openInNewContext", "tag", "to" ]);
         // @docs-props-type ClickablePropsBase
-                var y = (0, r.useContext)(m), O = y.onClick, h = y.onLinkClick, w = y.transformUrl;
+                var y = (0, r.useContext)(m), h = y.onClick, w = y.onLinkClick, x = y.transformUrl;
         (0, r.useEffect)((function() {
             if (false) {}
             // this effect only runs once
             // eslint-disable-next-line react-hooks/exhaustive-deps
                 }), []);
-        var x = (0, r.useCallback)((function(e) {
-            k(l, e);
-            k(n, e);
-        }), [ l, n ]);
+        var P = (0, r.useCallback)((function(e) {
+            g(o, e);
+            g(n, e);
+        }), [ o, n ]);
         // memoizing this result causes TS to lose track of the type guard established by isLinkCheck
-                var j = L(f, v);
+                var L = I(c, b);
         // 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 I = (0, r.useCallback)((function(e) {
-            return w != null ? w(e, {
-                isInternal: S(e),
-                isRootRelative: P(e)
+                var R = (0, r.useCallback)((function(e) {
+            return x != null ? x(e, {
+                isInternal: j(e),
+                isRootRelative: S(e)
             }) : e;
-        }), [ w ]);
-        var R = (0, r.useCallback)((function(e) {
-            if (j) {
+        }), [ x ]);
+        var T = (0, r.useCallback)((function(e) {
+            if (L) {
                 // 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) && v) {
+                if ((e.metaKey || e.ctrlKey) && b) {
                     return;
                 }
             }
-            c === null || c === void 0 ? void 0 : c(e);
-            var n = c == null && O != null;
-            if (j && (n || h != null)) {
+            s === null || s === void 0 ? void 0 : s(e);
+            var n = s == null && h != null;
+            if (L && (n || w != null)) {
                 var r = u;
-                if (!r && o()(i)) {
+                if (!r && l()(i)) {
                     r = i;
                 }
                 var t = {
-                    to: I(v),
-                    originalTo: v,
-                    openInNewContext: s,
+                    to: R(b),
+                    originalTo: b,
+                    openInNewContext: f,
                     label: r
                 };
                 if (n) {
-                    O(e, t);
+                    h(e, t);
                 }
-                h === null || h === void 0 ? void 0 : h(e, t);
+                w === null || w === void 0 ? void 0 : w(e, t);
             }
-        }), [ i, I, j, u, c, O, h, s, v ]);
-        if (j) {
-            if (a) {
+        }), [ i, R, L, u, s, h, w, f, b ]);
+        var q = k(a), D = q.isDisabled, N = q.disabledValue;
+        if (L) {
+            if (D) {
                 
-                return t().createElement(b, C({
+                return t().createElement(v, C({
                     "data-test": "clickable",
-                    "data-test-disabled": a,
-                    ref: x,
+                    "data-test-disabled": N,
+                    ref: P,
                     role: "link",
                     "aria-disabled": "true"
                 }, p), i);
             }
-            var T = s ? "_blank" : undefined;
-            var q = s && S(v) ? "noopener noreferrer" : undefined;
+            var _ = f ? "_blank" : undefined;
+            var E = f && j(b) ? "noopener noreferrer" : undefined;
             
-            return t().createElement(b, C({
+            return t().createElement(v, C({
                 "data-test": "clickable",
-                ref: x,
-                href: I(v),
-                target: T,
-                rel: q,
-                onClick: R
+                ref: P,
+                href: R(b),
+                target: _,
+                rel: E,
+                onClick: T
             }, d()(p)), i);
         }
         // button variant
-                var N = a === true || a === "dimmed" || undefined;
-        var _;
-        if (N) {
-            _ = "dimmed";
-        } else if (a === "disabled") {
-            _ = "disabled";
-        }
+                var V = a === true || a === "dimmed" || undefined;
         
-        return t().createElement(b, C({
+        return t().createElement(v, C({
             as: "button",
-            "aria-disabled": N,
+            "aria-disabled": V,
             "data-test": "clickable",
-            "data-test-disabled": _,
-            ref: x,
+            "data-test-disabled": N,
+            ref: P,
             type: "button",
             disabled: a === "disabled",
-            onClick: !a ? R : undefined
+            onClick: D ? undefined : T
         }, d()(p, "disabled")), i);
     }));
-    I.propTypes = j;
-    /* harmony default export */    const R = I;
+    R.propTypes = L;
+    /* harmony default export */    const T = R;
     // 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."