@splunk/react-ui 5.2.0 → 5.4.0

package/Menu.js

@@ -61,10 +61,10 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Divider: () => /* reexport */ $,
+        Divider: () => /* reexport */ R,
         Heading: () => /* reexport */ Z,
         Item: () => /* reexport */ Se,
-        MenuContext: () => /* reexport */ A,
+        MenuContext: () => /* reexport */ N,
         default: () => /* reexport */ qe
     });
     // CONCATENATED MODULE: external "react"
@@ -86,11 +86,11 @@
     var v =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/themes"
     const p = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const f = require("@splunk/react-ui/Clickable");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Checkbox"
+    const f = require("@splunk/react-ui/Checkbox");
     var m =  e.n(f);
-    // CONCATENATED MODULE: external "@splunk/react-ui/NonInteractiveCheckbox"
-    const b = require("@splunk/react-ui/NonInteractiveCheckbox");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const b = require("@splunk/react-ui/Clickable");
     var g =  e.n(b);
     // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
     var y = (0, c.css)([ "", " overflow:inherit;white-space:inherit;text-overflow:inherit;" ], p.mixins.typography("smallBody"));
@@ -114,11 +114,11 @@
         var t = e.endAdornment;
         return t && (0, c.css)([ "padding-left:", ";" ], p.variables.spacingSmall);
     }), p.variables.spacingSmall, p.variables.contentColorMuted);
-    var x = u()(g()).withConfig({
-        displayName: "ItemStyles__StyledNonInteractiveCheckbox",
+    var x = u()(m()).withConfig({
+        displayName: "ItemStyles__StyledCheckbox",
         componentId: "sc-4kc053-4"
     })([ "min-height:0;padding-right:", ";" ], p.variables.spacingSmall);
-    var C = u()(m()).withConfig({
+    var C = u()(g()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-5"
     })([ "line-height:", ";display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;min-height:", ";padding:", " ", ";", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}&:active{background:", ";}", "}&:focus{outline:0;box-shadow:", ";background:", ";}&[disabled],&[aria-disabled='true']{color:", ";", ",", ",", ",", "{color:", ";}}" ], p.variables.lineHeightSpacious, p.variables.contentColorActive, p.variables.inputHeight, p.variables.spacingXSmall, p.variables.spacingLarge, (function(e) {
@@ -126,18 +126,19 @@
         return t && !r && (0, c.css)([ "box-shadow:", ";" ], p.variables.focusShadowInset);
     }), (function(e) {
         var t = e.$active;
-        return t && (0, c.css)([ "background:", ";font-weight:", ";" ], p.variables.neutral100, p.variables.fontWeightBold);
+        return t && (0, c.css)([ "background:", ";font-weight:", ";" ], p.variables.interactiveColorOverlayActive, p.variables.fontWeightBold);
     }), (function(e) {
         var t = e.$isSelectable, r = e.$selectableAppearance, n = e.$selected;
         return t && !n && r === "checkmark" && // Adds whitespace to right to reserve space for checkmark for selectable Items
         // spacingLarge x 3 = padding-left + icon size + padding-right
         (0, c.css)([ "padding-right:calc(", " * 3);" ], p.variables.spacingLarge);
     }), p.variables.interactiveColorOverlayHover, (function(e) {
-        var t = e.$selected;
-        return t && (0, c.css)([ "background:", ";" ], p.mixins.overlayColors(p.variables.interactiveColorOverlaySelected, p.variables.interactiveColorOverlayHover));
+        var t = e.$active;
+        return t && (0, c.css)([ "background:", ";" ], p.mixins.overlayColors(p.variables.interactiveColorOverlayActive, p.variables.interactiveColorOverlayHover));
     }), p.variables.interactiveColorOverlayActive, (function(e) {
-        var t = e.$selected;
-        return t && (0, c.css)([ "background:", ";font-weight:", ";" ], p.variables.interactiveColorOverlaySelected, p.variables.fontWeightSemiBold);
+        var t = e.$selected, r = e.$active;
+        return t && (0, c.css)([ "font-weight:", ";", "" ], p.variables.fontWeightSemiBold, r && (0, 
+        c.css)([ "font-weight:", ";" ], p.variables.fontWeightBold));
     }), p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, p.variables.contentColorDisabled, /* sc-sel */ h, /* sc-sel */ S, /* sc-sel */ O, /* sc-sel */ k, p.variables.contentColorDisabled);
     var I = u().span.withConfig({
         displayName: "ItemStyles__StyledInnerWrapper",
@@ -170,7 +171,7 @@
     })([ "float:right;padding-left:", ";color:", ";" ], p.variables.spacingSmall, p.variables.contentColorDefault);
     // CONCATENATED MODULE: ./src/Menu/DividerStyles.ts
     // Adds margin if direct sibling is a Menu.Item to provide spacing between Divider and Item
-    var N = u()(v()).withConfig({
+    var A = u()(v()).withConfig({
         displayName: "DividerStyles__Styled",
         componentId: "l3zfh3-0"
     })([ "", " + &,& + ", "{margin-block-start:", ";}" ], C, C, p.variables.spacingSmall);
@@ -179,7 +180,7 @@
         role: "menu",
         preventFocus: false
     });
-    /* harmony default export */    const A = D;
+    /* harmony default export */    const N = D;
     // CONCATENATED MODULE: ./src/Menu/Divider.tsx
     function T() {
         return T = Object.assign ? Object.assign.bind() : function(e) {
@@ -195,23 +196,22 @@
     var q = {};
     /**
  * A non-interactive menu item used to visually separate groups of items in the menu.
- */    function R(e) {
+ */    function $(e) {
         var t = T({}, e);
-        // @docs-props-type DividerPropsBase
-                var a = (0, r.useContext)(A), i = a.role;
+        var a = (0, r.useContext)(N), i = a.role;
         
-        return n().createElement(N, T({
+        return n().createElement(A, T({
             "aria-hidden": i === "listbox",
             "data-test": "divider",
             role: "separator"
         }, t));
     }
-    R.propTypes = q;
-    /* Remove the item if it is the first item after filtering */    R.filterFirst = true;
-    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    R.filterConsecutive = true;
-    /* Remove the item if it is the last item after filtering. */    R.filterLast = true;
-    /* Tag the item as Divider */    R.as = "Divider";
-    /* harmony default export */    const $ = R;
+    $.propTypes = q;
+    /* Remove the item if it is the first item after filtering */    $.filterFirst = true;
+    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    $.filterConsecutive = true;
+    /* Remove the item if it is the last item after filtering. */    $.filterLast = true;
+    /* Tag the item as Divider */    $.as = "Divider";
+    /* harmony default export */    const R = $;
     // CONCATENATED MODULE: external "@splunk/react-ui/Heading"
     const H = require("@splunk/react-ui/Heading");
     var F =  e.n(H);
@@ -318,7 +318,8 @@
  * A non-interactive `Menu` item used to separate and label groups of `Menu` items.
  */    function Y(e) {
         var t = e.children, a = e.outerStyle, i = e.title, o = J(e, [ "children", "outerStyle", "title" ]);
-        var l = (0, r.useContext)(A), s = l.role;
+        // @docs-props-type HeadingPropsBase
+                var l = (0, r.useContext)(N), s = l.role;
         var c = (0, r.useMemo)((function() {
             return z(z({}, a), {}, {
                 margin: 0
@@ -435,108 +436,114 @@
     };
     var ye = (0, se._)("(Opens new window)");
     function he(e) {
-        var t = e.active, a = e.children, o = e.description, l = e.descriptionPosition, s = l === void 0 ? "bottom" : l, c = e.disabled, u = e.endAdornment, d = e.elementRef, v = e.hasSubmenu, p = e.itemKey, f = e.matchRanges, m = e.onClick, b = e.onFocus, g = e.openInNewContext, y = e.role, w = e.selectable, N = e.selectableAppearance, D = N === void 0 ? "checkmark" : N, T = e.selected, q = e.startAdornment, R = e.to, $ = e.truncate, H = me(e, [ "active", "children", "description", "descriptionPosition", "disabled", "endAdornment", "elementRef", "hasSubmenu", "itemKey", "matchRanges", "onClick", "onFocus", "openInNewContext", "role", "selectable", "selectableAppearance", "selected", "startAdornment", "to", "truncate" ]);
+        var t;
+        var a = e.active, o = e.children, l = e.description, s = e.descriptionPosition, c = s === void 0 ? "bottom" : s, u = e.disabled, d = e.endAdornment, v = e.elementRef, p = e.hasSubmenu, f = e.itemKey, m = e.matchRanges, b = e.onClick, g = e.onFocus, y = e.openInNewContext, w = e.role, A = e.selectable, D = e.selectableAppearance, T = D === void 0 ? "checkmark" : D, q = e.selected, $ = e.startAdornment, R = e.to, H = e.truncate, F = me(e, [ "active", "children", "description", "descriptionPosition", "disabled", "endAdornment", "elementRef", "hasSubmenu", "itemKey", "matchRanges", "onClick", "onFocus", "openInNewContext", "role", "selectable", "selectableAppearance", "selected", "startAdornment", "to", "truncate" ]);
         // @docs-props-type ItemPropsBase
-                var F = (0, r.useContext)(A), M = F.preventFocus;
+                var M = (0, r.useContext)(N), L = M.preventFocus;
+ // Use arguments[0] (raw props) to check if `selectableAppearance` was explicitly passed by the caller.
+        // This prevents the default value from incorrectly triggering the dev warning.
+        // eslint-disable-next-line prefer-rest-params
+                var K = (t = arguments[0]) === null || t === void 0 ? void 0 : t.selectableAppearance;
         (0, r.useEffect)((function() {
             if (false) {}
-        }), [ $, s, f, a, T, w, D ]);
-        var L = (0, r.useCallback)((function(e) {
-            b === null || b === void 0 ? void 0 : b(e, {
-                itemKey: p
+        }), [ H, c, m, o, q, A, T, K ]);
+        var B = (0, r.useCallback)((function(e) {
+            g === null || g === void 0 ? void 0 : g(e, {
+                itemKey: f
             });
-        }), [ p, b ]);
-        var K = (0, r.useCallback)((function(e) {
-            if (M) {
+        }), [ f, g ]);
+        var W = (0, r.useCallback)((function(e) {
+            if (L) {
                 e.preventDefault();
             }
-        }), [ M ]);
-        var B = (0, r.useMemo)((function() {
-            if (!f || !te()(a)) {
-                return a;
+        }), [ L ]);
+        var z = (0, r.useMemo)((function() {
+            if (!m || !te()(o)) {
+                return o;
             }
             var e = [];
             // before first match. May be empty string.
-                        e.push(a.substring(0, f[0].start));
-            f.forEach((function(t, r) {
+                        e.push(o.substring(0, m[0].start));
+            m.forEach((function(t, r) {
                 e.push(
                 
                 // eslint-disable-next-line react/no-array-index-key
                 n().createElement(P, {
                     key: r,
                     "data-test": "match"
-                }, a.substring(t.start, t.end)));
-                if (r < f.length - 1) {
-                    e.push(a.substring(t.end, f[r + 1].start));
+                }, o.substring(t.start, t.end)));
+                if (r < m.length - 1) {
+                    e.push(o.substring(t.end, m[r + 1].start));
                 } else {
-                    e.push(a.substring(t.end, a.length));
+                    e.push(o.substring(t.end, o.length));
                 }
             }));
             return e;
-        }), [ a, f ]);
-        var W = T === true || T === "some";
-        var z = w || W;
-        var V = y || {
+        }), [ o, m ]);
+        var V = q === true || q === "some";
+        var X = A || V;
+        var G = w || {
             nonselectable: "menuitem",
             checkmark: "menuitemradio",
             checkbox: "menuitemcheckbox"
-        }[z ? D : "nonselectable"];
-        var X = {
-            "aria-haspopup": v ? true : undefined
+        }[X ? T : "nonselectable"];
+        var J = {
+            "aria-haspopup": p ? true : undefined
         };
-        if (V === "menuitemradio" || V === "menuitemcheckbox") {
-            X["aria-checked"] = T === "some" ? "mixed" : W;
-        } else if (V === "option") {
-            X["aria-selected"] = W;
+        if (G === "menuitemradio" || G === "menuitemcheckbox") {
+            J["aria-checked"] = q === "some" ? "mixed" : V;
+        } else if (G === "option") {
+            J["aria-selected"] = V;
         }
-        var G = o && s === "right";
-        var J = o && !G;
-        var Q = T && D === "checkmark" &&  n().createElement(O, null,  n().createElement(ne(), {
+        var Q = l && c === "right";
+        var U = l && !Q;
+        var Y = q && T === "checkmark" &&  n().createElement(O, null,  n().createElement(ne(), {
             "data-test": "selected-checkmark",
             inline: true
         }));
-        var U = false;
-        var Y;
-        if (g) {
-            U = true;
-            Y = typeof g === "string" ? g : ye;
+        var Z = false;
+        var ee;
+        if (y) {
+            Z = true;
+            ee = typeof y === "string" ? y : ye;
         }
         
         return n().createElement(C, fe({
-            $active: t,
-            $isSelectable: z,
-            $preventFocus: M || false,
-            $selectableAppearance: D !== null && D !== void 0 ? D : false,
-            $selected: W,
-            "data-has-icon": !!q || !!u,
+            $active: a,
+            $isSelectable: X,
+            $preventFocus: L || false,
+            $selectableAppearance: T !== null && T !== void 0 ? T : false,
+            $selected: V,
+            "data-has-icon": !!$ || !!d,
             "data-test": "item",
-            "data-test-selected": z ? W : null,
-            disabled: c,
-            elementRef: d,
-            onClick: m,
-            onFocus: L,
-            onMouseDown: K,
-            openInNewContext: U,
-            role: V,
-            tabIndex: M ? -1 : undefined,
+            "data-test-selected": X ? V : null,
+            disabled: u,
+            elementRef: v,
+            onClick: b,
+            onFocus: B,
+            onMouseDown: W,
+            openInNewContext: Z,
+            role: G,
+            tabIndex: L ? -1 : undefined,
             to: R,
-            title: $ && te()(a) ? a : undefined
-        }, X, i()(H, "onFocus")), v &&  n().createElement(j, null,  n().createElement(ie(), null)),  n().createElement(I, null, w && D === "checkbox" &&  n().createElement(x, {
-            disabled: !!c,
-            selected: T
-        }), q &&  n().createElement(k, null, q),  n().createElement(E, {
-            $descriptionBottom: !!J,
-            $truncate: $ !== null && $ !== void 0 ? $ : false
+            title: H && te()(o) ? o : undefined
+        }, J, i()(F, "onFocus")), p &&  n().createElement(j, null,  n().createElement(ie(), null)),  n().createElement(I, null, A && T === "checkbox" &&  n().createElement(x, {
+            checked: q === "some" ? "indeterminate" : q,
+            disabled: !!u,
+            inert: true
+        }), $ &&  n().createElement(k, null, $),  n().createElement(E, {
+            $descriptionBottom: !!U,
+            $truncate: H !== null && H !== void 0 ? H : false
         },  n().createElement(_, {
-            $truncate: $ !== null && $ !== void 0 ? $ : false,
+            $truncate: H !== null && H !== void 0 ? H : false,
             "data-test": "label"
-        }, B, g &&  n().createElement(n().Fragment, null,  n().createElement(pe, null),  n().createElement(le(), null, Y))), J &&  n().createElement(h, {
+        }, z, y &&  n().createElement(n().Fragment, null,  n().createElement(pe, null),  n().createElement(le(), null, ee))), U &&  n().createElement(h, {
             "data-test": "description"
-        }, o), G &&  n().createElement(S, {
+        }, l), Q &&  n().createElement(S, {
             "data-test": "description"
-        }, o)), u &&  n().createElement(k, {
-            endAdornment: u
-        }, u), Q));
+        }, l)), d &&  n().createElement(k, {
+            endAdornment: d
+        }, d), Y));
     }
     he.propTypes = ge;
     he.as = "Item";
@@ -609,7 +616,7 @@
         }
         return r;
     }
-    var Ne = {
+    var Ae = {
         children: l().node,
         elementRef: l().oneOfType([ l().func, l().object ]),
         focusMode: l().oneOf([ "roving", "normal", "never" ]),
@@ -624,7 +631,7 @@
             enableHomeEnd: true
         };
     };
-    var Ae = function e(t) {
+    var Ne = function e(t) {
         var r = t.key;
  // Handle special case for tab navigation
                 if (r === "Tab" && (0, s.isTabKey)(t)) {
@@ -635,7 +642,7 @@
     function Te(e) {
         var t = e.children, a = e.elementRef, o = e.focusMode, l = o === void 0 ? "roving" : o, c = e.stopScrollPropagation, u = Pe(e, [ "children", "elementRef", "focusMode", "stopScrollPropagation" ]);
         // @docs-props-type MenuPropsBase
-                var d = (0, r.useContext)(A), v = d.role, p = v === void 0 ? "menu" : v;
+                var d = (0, r.useContext)(N), v = d.role, p = v === void 0 ? "menu" : v;
         var f = (0, r.useRef)(null);
         var m = r.Children.toArray(t).filter(r.isValidElement).reduce((function(e, t, r, n) {
             /* Filter out initial Dividers
@@ -670,7 +677,7 @@
             if (e.nativeEvent.metaKey) {
                 return;
             }
-            var t = Ae(e);
+            var t = Ne(e);
             var r = t === "Tab" || t === "tabShift";
             var n = t === "Enter";
             // Allow default behavior for the enter key.
@@ -709,13 +716,13 @@
             stopScrollPropagation: true
         }, i()(u, "tagName")), m) :  n().createElement(Ce, _e({}, w, {
             ref: b
-        }, u),  n().createElement(A.Provider, {
+        }, u),  n().createElement(N.Provider, {
             value: h()
         }, m));
     }
-    Te.propTypes = Ne;
+    Te.propTypes = Ae;
     Te.Item = Se;
-    Te.Divider = $;
+    Te.Divider = R;
     Te.Heading = Z;
     /* harmony default export */    const qe = Te;
     // CONCATENATED MODULE: ./src/Menu/index.ts

package/Modal.js

@@ -216,9 +216,9 @@
     var B = g().div.withConfig({
         displayName: "FooterStyles__StyledDiv",
         componentId: "yszcmv-0"
-    })([ "flex:0 0 auto;padding:", " ", ";background-color:", ";& > button{min-width:80px;}", "" ], w.variables.spacingLarge, w.variables.spacingXLarge, w.variables.backgroundColorDialog, (0, 
+    })([ "flex:0 0 auto;padding:", " ", ";background-color:", ";& >:is(button,a){min-width:80px;}", "" ], w.variables.spacingLarge, w.variables.spacingXLarge, w.variables.backgroundColorDialog, (0, 
     w.pickVariant)("$layout", {
-        auto: (0, m.css)([ "display:flex;align-items:center;justify-content:flex-end;gap:", ";& > *:is(button,*){flex:0 0 auto;}& >:not(button){margin-right:auto;}&:has(button + button + button) > button:first-of-type{margin-right:auto;}" ], w.variables.spacingSmall),
+        auto: (0, m.css)([ "display:flex;align-items:center;justify-content:flex-end;gap:", ";& > *:is(button,a,*){flex:0 0 auto;}& >:not(button,a){margin-right:auto;}&:has(:is(button,a) +:is(button,a) +:is(button,a)) >:is(button,a):first-child{margin-right:auto;}" ], w.variables.spacingSmall),
         none: (0, m.css)([ "text-align:right;" ])
     }));
     // CONCATENATED MODULE: ./src/Modal/ModalContext.tsx
@@ -368,7 +368,7 @@
  * A styled container for `Modal` header content.
  */    function le(e) {
         var r = e.children, o = e.icon, i = e.hideCloseButton, a = i === void 0 ? false : i, l = e.title, u = e.subtitle, c = ne(e, [ "children", "icon", "hideCloseButton", "title", "subtitle" ]);
-        // @docs-props-type StepPropsBase
+        // @docs-props-type HeaderPropsBase
                 var s = (0, t.useContext)(N), f = s.titleId, d = s.subtitleId, p = s.divider, v = s.onRequestClose;
         var b = p === "both" || p === "header";
         var y =  (0, t.isValidElement)(o) &&  (0, t.cloneElement)(o, {