@splunk/react-ui 5.2.0 → 5.3.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,12 +436,12 @@
     };
     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 = 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, A = e.selectableAppearance, D = A === void 0 ? "checkmark" : A, T = e.selected, q = e.startAdornment, $ = e.to, R = 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" ]);
         // @docs-props-type ItemPropsBase
-                var F = (0, r.useContext)(A), M = F.preventFocus;
+                var F = (0, r.useContext)(N), M = F.preventFocus;
         (0, r.useEffect)((function() {
             if (false) {}
-        }), [ $, s, f, a, T, w, D ]);
+        }), [ R, s, f, a, T, w, D ]);
         var L = (0, r.useCallback)((function(e) {
             b === null || b === void 0 ? void 0 : b(e, {
                 itemKey: p
@@ -519,16 +520,17 @@
             openInNewContext: U,
             role: V,
             tabIndex: M ? -1 : undefined,
-            to: R,
-            title: $ && te()(a) ? a : undefined
+            to: $,
+            title: R && 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, {
+            checked: T === "some" ? "indeterminate" : T,
             disabled: !!c,
-            selected: T
+            inert: true
         }), q &&  n().createElement(k, null, q),  n().createElement(E, {
             $descriptionBottom: !!J,
-            $truncate: $ !== null && $ !== void 0 ? $ : false
+            $truncate: R !== null && R !== void 0 ? R : false
         },  n().createElement(_, {
-            $truncate: $ !== null && $ !== void 0 ? $ : false,
+            $truncate: R !== null && R !== void 0 ? R : false,
             "data-test": "label"
         }, B, g &&  n().createElement(n().Fragment, null,  n().createElement(pe, null),  n().createElement(le(), null, Y))), J &&  n().createElement(h, {
             "data-test": "description"
@@ -609,7 +611,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 +626,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 +637,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 +672,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 +711,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, {