@splunk/react-ui 5.6.0 → 5.7.1

package/Menu.js

@@ -103,11 +103,11 @@
         componentId: "sc-4kc053-1"
     })([ "", ";display:flex;align-self:flex-start;align-items:center;float:right;padding-left:", ";max-width:50%;min-height:20px;text-align:right;" ], y, p.variables.spacingLarge);
     var w = (0, c.css)([ "", " flex:0 0 auto;& > svg{height:20px;}" ], p.mixins.reset("inline-flex"));
-    var O = u().div.withConfig({
+    var k = u().div.withConfig({
         displayName: "ItemStyles__StyledItemSelectedAdornment",
         componentId: "sc-4kc053-2"
     })([ "", ";padding-left:", ";align-items:flex-start;color:", ";" ], w, p.variables.spacingLarge, p.variables.contentColorActive);
-    var k = u().span.withConfig({
+    var O = u().span.withConfig({
         displayName: "ItemStyles__StyledItemAdornment",
         componentId: "sc-4kc053-3"
     })([ "", ";", " padding-right:", ";align-items:center;color:", ";" ], w, (function(e) {
@@ -139,7 +139,7 @@
         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);
+    }), p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, p.variables.contentColorDisabled, /* sc-sel */ h, /* sc-sel */ S, /* sc-sel */ k, /* sc-sel */ O, p.variables.contentColorDisabled);
     var I = u().span.withConfig({
         displayName: "ItemStyles__StyledInnerWrapper",
         componentId: "sc-4kc053-6"
@@ -426,7 +426,7 @@
         openInNewContext: l().oneOfType([ l().bool, l().string ]),
         /** @private */
         preventFocus: l().bool,
-        role: l().oneOf([ "menuitem", "menuitemradio", "menuitemcheckbox", "listboxitem", "option" ]),
+        role: l().oneOf([ "menuitem", "menuitemradio", "menuitemcheckbox", "listboxitem", "link", "option" ]),
         selectable: l().bool,
         selectableAppearance: l().oneOf([ "checkmark", "checkbox" ]),
         selected: l().oneOfType([ l().bool, l().oneOf([ "some" ]) ]),
@@ -497,7 +497,7 @@
         }
         var Q = l && c === "right";
         var U = l && !Q;
-        var Y = q && N === "checkmark" &&  n().createElement(O, null,  n().createElement(ne(), {
+        var Y = q && N === "checkmark" &&  n().createElement(k, null,  n().createElement(ne(), {
             "data-test": "selected-checkmark",
             inline: true
         }));
@@ -531,7 +531,7 @@
             checked: q === "some" ? "indeterminate" : q,
             disabled: !!u,
             inert: true
-        }), $ &&  n().createElement(k, null, $),  n().createElement(E, {
+        }), $ &&  n().createElement(O, null, $),  n().createElement(E, {
             $descriptionBottom: !!U,
             $truncate: R !== null && R !== void 0 ? R : false
         },  n().createElement(_, {
@@ -541,7 +541,7 @@
             "data-test": "description"
         }, l), Q &&  n().createElement(S, {
             "data-test": "description"
-        }, l)), d &&  n().createElement(k, {
+        }, l)), d &&  n().createElement(O, {
             endAdornment: d
         }, d), Y));
     }
@@ -551,18 +551,18 @@
     // only for styled components using Item
         // CONCATENATED MODULE: external "@splunk/react-ui/Scroll"
     const we = require("@splunk/react-ui/Scroll");
-    var Oe =  e.n(we);
+    var ke =  e.n(we);
     // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
-    var ke = (0, c.css)([ "border-top:1px solid ", ";" ], p.variables.borderColor);
-    var xe = (0, c.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;padding:", " 0;&:focus{outline:0;box-shadow:", ";background:", ";}& + &{", "}" ], p.mixins.reset("block"), p.variables.backgroundColorPopup, p.variables.borderRadius, p.variables.spacingSmall, p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, ke);
+    var Oe = (0, c.css)([ "border-top:1px solid ", ";" ], p.variables.borderColor);
+    var xe = (0, c.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;padding:", " 0;&:focus{outline:0;box-shadow:", ";background:", ";}& + &{", "}" ], p.mixins.reset("block"), p.variables.backgroundColorPopup, p.variables.borderRadius, p.variables.spacingSmall, p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, Oe);
     var Ce = u().div.withConfig({
         displayName: "MenuStyles__Styled",
         componentId: "sc-1olffp9-0"
     })([ "", "" ], xe);
-    var Ie = u()(Oe()).withConfig({
+    var Ie = u()(ke()).withConfig({
         displayName: "MenuStyles__StyledScroll",
         componentId: "sc-1olffp9-1"
-    })([ "", " ", " + &,& + ", "{", "}" ], xe, /* sc-sel */ Ce, /* sc-sel */ Ce, ke);
+    })([ "", " ", " + &,& + ", "{", "}" ], xe, /* sc-sel */ Ce, /* sc-sel */ Ce, Oe);
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.

package/Multiselect.js

@@ -130,6 +130,9 @@
         description: i().string,
         descriptionPosition: i().oneOf([ "right", "bottom" ]),
         disabled: i().bool,
+        /**
+   * @private Undocumented due to limitations in supporting in compact `Multiselect` (see SUI-8286 notes for more info).
+   */
         elementRef: i().oneOfType([ i().func, i().object ]),
         hidden: i().bool,
         icon: i().node,

package/Slider.js

@@ -782,6 +782,7 @@
             onFocus: ge,
             ref: Ce,
             role: "slider",
+            type: "button",
             disabled: i,
             $thumbPosition: Ve,
             $stepWidth: Be,

package/TransitionOpen.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = t => {
-            /******/ var r = t && t.__esModule ? 
+            /******/ var n = t && t.__esModule ? 
             /******/ () => t["default"]
             /******/ : () => t
             /******/;
-            e.d(r, {
-                a: r
+            e.d(n, {
+                a: n
             });
-            /******/            return r;
+            /******/            return n;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (t, r) => {
-            /******/ for (var n in r) {
-                /******/ if (e.o(r, n) && !e.o(t, n)) {
-                    /******/ Object.defineProperty(t, n, {
+        /******/ e.d = (t, n) => {
+            /******/ for (var r in n) {
+                /******/ if (e.o(n, r) && !e.o(t, r)) {
+                    /******/ Object.defineProperty(t, r, {
                         enumerable: true,
-                        get: r[n]
+                        get: n[r]
                     });
                     /******/                }
                 /******/            }
@@ -64,8 +64,8 @@
         default: () => /* reexport */ H
     });
     // CONCATENATED MODULE: external "react"
-    const r = require("react");
-    var n =  e.n(r);
+    const n = require("react");
+    var r =  e.n(n);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
     var i =  e.n(o);
@@ -128,9 +128,9 @@
     function g() {
         return g = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
-                var r = arguments[t];
-                for (var n in r) {
-                    ({}).hasOwnProperty.call(r, n) && (e[n] = r[n]);
+                var n = arguments[t];
+                for (var r in n) {
+                    ({}).hasOwnProperty.call(n, r) && (e[r] = n[r]);
                 }
             }
             return e;
@@ -145,32 +145,32 @@
     function j(e, t) {
         if (e) {
             if ("string" == typeof e) return w(e, t);
-            var r = {}.toString.call(e).slice(8, -1);
-            return "Object" === r && e.constructor && (r = e.constructor.name), "Map" === r || "Set" === r ? Array.from(e) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? w(e, t) : void 0;
+            var n = {}.toString.call(e).slice(8, -1);
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? w(e, t) : void 0;
         }
     }
     function w(e, t) {
         (null == t || t > e.length) && (t = e.length);
-        for (var r = 0, n = Array(t); r < t; r++) {
-            n[r] = e[r];
+        for (var n = 0, r = Array(t); n < t; n++) {
+            r[n] = e[n];
         }
-        return n;
+        return r;
     }
     function P(e, t) {
-        var r = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
-        if (null != r) {
-            var n, o, i, a, u = [], l = !0, s = !1;
+        var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != n) {
+            var r, o, i, a, u = [], l = !0, s = !1;
             try {
-                if (i = (r = r.call(e)).next, 0 === t) {
-                    if (Object(r) !== r) return;
+                if (i = (n = n.call(e)).next, 0 === t) {
+                    if (Object(n) !== n) return;
                     l = !1;
-                } else for (;!(l = (n = i.call(r)).done) && (u.push(n.value), u.length !== t); l = !0) {
+                } else for (;!(l = (r = i.call(n)).done) && (u.push(r.value), u.length !== t); l = !0) {
                 }
             } catch (e) {
                 s = !0, o = e;
             } finally {
                 try {
-                    if (!l && null != r["return"] && (a = r["return"](), Object(a) !== a)) return;
+                    if (!l && null != n["return"] && (a = n["return"](), Object(a) !== a)) return;
                 } finally {
                     if (s) throw o;
                 }
@@ -181,56 +181,56 @@
     function k(e) {
         if (Array.isArray(e)) return e;
     }
-    function F(e, t) {
+    function x(e, t) {
         if (null == e) return {};
-        var r, n, o = x(e, t);
+        var n, r, o = C(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < i.length; n++) {
-                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (o[r] = e[r]);
+            for (r = 0; r < i.length; r++) {
+                n = i[r], -1 === t.indexOf(n) && {}.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
             }
         }
         return o;
     }
-    function x(e, t) {
+    function C(e, t) {
         if (null == e) return {};
-        var r = {};
-        for (var n in e) {
-            if ({}.hasOwnProperty.call(e, n)) {
-                if (-1 !== t.indexOf(n)) continue;
-                r[n] = e[n];
+        var n = {};
+        for (var r in e) {
+            if ({}.hasOwnProperty.call(e, r)) {
+                if (-1 !== t.indexOf(r)) continue;
+                n[r] = e[r];
             }
         }
-        return r;
+        return n;
     }
-    function C(e, t) {
-        var r = Object.keys(e);
+    function F(e, t) {
+        var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
-            var n = Object.getOwnPropertySymbols(e);
-            t && (n = n.filter((function(t) {
+            var r = Object.getOwnPropertySymbols(e);
+            t && (r = r.filter((function(t) {
                 return Object.getOwnPropertyDescriptor(e, t).enumerable;
-            }))), r.push.apply(r, n);
+            }))), n.push.apply(n, r);
         }
-        return r;
+        return n;
     }
     function N(e) {
         for (var t = 1; t < arguments.length; t++) {
-            var r = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? C(Object(r), !0).forEach((function(t) {
-                A(e, t, r[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : C(Object(r)).forEach((function(t) {
-                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t));
+            var n = null != arguments[t] ? arguments[t] : {};
+            t % 2 ? F(Object(n), !0).forEach((function(t) {
+                A(e, t, n[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : F(Object(n)).forEach((function(t) {
+                Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
             }));
         }
         return e;
     }
-    function A(e, t, r) {
+    function A(e, t, n) {
         return (t = T(t)) in e ? Object.defineProperty(e, t, {
-            value: r,
+            value: n,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : e[t] = r, e;
+        }) : e[t] = n, e;
     }
     function T(e) {
         var t = E(e, "string");
@@ -238,10 +238,10 @@
     }
     function E(e, t) {
         if ("object" != h(e) || !e) return e;
-        var r = e[Symbol.toPrimitive];
-        if (void 0 !== r) {
-            var n = r.call(e, t || "default");
-            if ("object" != h(n)) return n;
+        var n = e[Symbol.toPrimitive];
+        if (void 0 !== n) {
+            var r = n.call(e, t || "default");
+            if ("object" != h(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
@@ -266,40 +266,40 @@
         takeFocus: i().bool
     };
     var q = function e(t) {
-        var r;
+        var n;
         switch (t) {
           case "slideFromTop":
           case "slideFromBottom":
           case "expandHeight":
           case "none":
-            r = "height";
+            n = "height";
             break;
 
           case "slideFromLeft":
           case "slideFromRight":
           case "expandWidth":
-            r = "width";
+            n = "width";
             break;
 
           default:
  // Intentionally left empty.
                 }
-        return r;
+        return n;
     };
     var M = function e(t) {
-        var r = t.animation, n = t.open, o = t.value;
+        var n = t.animation, r = t.open, o = t.value;
         var i = {
-            value: n ? o : 0
+            value: r ? o : 0
         };
         var a = {
-            value: n ? 0 : o
+            value: r ? 0 : o
         };
         var u = {
             precision: 1
         };
  // Only use precision when not using transform, otherwise transform animation will break
         // Expansion doesn't require a valid value; the subsequent render animates it.
-                if (r === "expandWidth" || r === "expandHeight" || r === "none") {
+                if (n === "expandWidth" || n === "expandHeight" || n === "none") {
             return {
                 to: i,
                 config: u
@@ -309,7 +309,7 @@
                 if (!o) {
             return null;
         }
-        if (r !== "slideFromTop" && r !== "slideFromLeft") {
+        if (n !== "slideFromTop" && n !== "slideFromLeft") {
             // Return the standard transition if not using a transform.
             return {
                 to: i,
@@ -319,9 +319,9 @@
         }
         // The top and left directions require an additional transform of their inner content to match the outer dimension animation.
         // This is needed to achieve a clipping effect from the outer div, rather than the consumer providing their own.
-                var l = r === "slideFromTop" ? "Y" : "X";
-        var s = "translate".concat(l, "(").concat(n ? 0 : -o, "px)");
-        var c = "translate".concat(l, "(").concat(n ? -o : 0, "px)");
+                var l = n === "slideFromTop" ? "Y" : "X";
+        var s = "translate".concat(l, "(").concat(r ? 0 : -o, "px)");
+        var c = "translate".concat(l, "(").concat(r ? -o : 0, "px)");
         return {
             to: N({
                 transform: s
@@ -331,21 +331,21 @@
             }, a)
         };
     };
-    var W = function e(t) {
-        var r = t.animation, n = t.el, o = t.takeFocusProp;
+    var _ = function e(t) {
+        var n = t.animation, r = t.el, o = t.takeFocusProp;
         var i = 0;
-        if (n) {
+        if (r) {
             if (o) {
-                (0, s.takeFocus)(n, "container");
+                (0, s.takeFocus)(r, "container");
             }
-            var a = q(r);
+            var a = q(n);
             switch (a) {
               case "height":
-                i = n.offsetHeight;
+                i = r.offsetHeight;
                 break;
 
               case "width":
-                i = n.offsetWidth;
+                i = r.offsetWidth;
                 break;
 
               default:
@@ -354,24 +354,26 @@
         }
         return i;
     };
-    var _ = {};
     var R = {};
+    var W = {};
     function D(e) {
-        var t = e.animation, o = t === void 0 ? "expandHeight" : t, i = e.animateOnMount, u = e.children, f = e.className, d = e.elementRef, m = e.id, p = e.innerClassName, h = e.innerStyle, S = h === void 0 ? _ : h, j = e.onAnimationEnd, w = e.onAnimationStart, P = e.open, k = e.outerClassName, x = e.outerId, C = e.outerStyle, T = C === void 0 ? R : C, E = e.renderChildrenWhenCollapsed, I = e.retainFocus, D = e.takeFocus, H = F(e, [ "animation", "animateOnMount", "children", "className", "elementRef", "id", "innerClassName", "innerStyle", "onAnimationEnd", "onAnimationStart", "open", "outerClassName", "outerId", "outerStyle", "renderChildrenWhenCollapsed", "retainFocus", "takeFocus" ]);
+        var t = e.animation, o = t === void 0 ? "expandHeight" : t, i = e.animateOnMount, u = e.children, f = e.className, d = e.elementRef, m = e.id, p = e.innerClassName, h = e.innerStyle, S = h === void 0 ? R : h, j = e.onAnimationEnd, w = e.onAnimationStart, P = e.open, k = e.outerClassName, C = e.outerId, F = e.outerStyle, T = F === void 0 ? W : F, E = e.renderChildrenWhenCollapsed, I = e.retainFocus, D = e.takeFocus, H = x(e, [ "animation", "animateOnMount", "children", "className", "elementRef", "id", "innerClassName", "innerStyle", "onAnimationEnd", "onAnimationStart", "open", "outerClassName", "outerId", "outerStyle", "renderChildrenWhenCollapsed", "retainFocus", "takeFocus" ]);
         // @docs-props-type TransitionOpenPropsBase
                 var L = l()(P);
-        var $ = (0, r.useRef)(true);
-        var B = (0, r.useState)(i ? P : false), K = O(B, 2), U = K[0], X = K[1];
-        var Y = (0, r.useState)(null), z = O(Y, 2), G = z[0], J = z[1];
-        var Q = (0, r.useState)(0), V = O(Q, 2), Z = V[0], ee = V[1];
-        (0, r.useEffect)((function() {
+        var $ = (0, n.useRef)(true);
+        var B = (0, n.useState)(i ? P : false), K = O(B, 2), U = K[0], X = K[1];
+        var Y = (0, n.useState)(null), z = O(Y, 2), G = z[0], J = z[1];
+        var Q = (0, n.useState)(0), V = O(Q, 2), Z = V[0], ee = V[1];
+        var te = (0, n.useState)(P), ne = O(te, 2), re = ne[0], oe = ne[1];
+        (0, n.useLayoutEffect)((function() {
             // prevOpen starts undefined, and we don't want to make the comparison in that situation
             if (L !== undefined && P !== L) {
                 X(true);
+                oe(P);
             }
         }), [ P, L ]);
         // equivalent to componentDidMount and componentWillUnmount
-                (0, r.useEffect)((function() {
+                (0, n.useEffect)((function() {
             // we need to set this to true on every mount because React.StrictMode will call the effect twice
             // and we need to ensure that allowAnimationUpdates is true while the component is mounted
             $.current = true;
@@ -379,70 +381,68 @@
                 $.current = false;
             };
         }), []);
-        var te = (0, r.useCallback)((function(e) {
+        var ie = (0, n.useCallback)((function(e) {
             J(e);
-            ee(W({
+            ee(_({
                 animation: o,
                 el: e,
                 takeFocusProp: D
             }));
             b(d, e);
         }), [ o, D, d ]);
-        var re = (0, r.useCallback)((function() {
+        var ae = (0, n.useCallback)((function() {
             w === null || w === void 0 ? void 0 : w();
         }), [ w ]);
-        var ne = (0, r.useCallback)((function() {
+        var ue = (0, n.useCallback)((function() {
             if ($.current) {
                 X(false);
             }
             j === null || j === void 0 ? void 0 : j();
         }), [ j ]);
-        var oe = (0, r.useCallback)((function(e) {
+        var le = (0, n.useCallback)((function(e) {
             if (G) {
                 (0, s.handleTab)(G, e);
             }
         }), [ G ]);
-        var ie = (0, a.useAnimation)(N(N({}, M({
+        var se = (0, a.useAnimation)(N(N({}, M({
             animation: o,
-            open: P,
+            open: re,
             value: Z
         })), {}, {
             immediate: o === "none",
-            onRest: ne,
-            onStart: re
-        })), ae = ie.value, ue = ie.transform;
-        var le;
-        /* to avoid setting and unsetting dimension which causes flickering
-     we always set the dimension if it is a slide animation
-     else only set it when animating || renderChildrenWhenCollapsed */        if (o.startsWith("slideFrom") || U || E) {
-            le = q(o);
+            onRest: ue,
+            onStart: ae
+        })), ce = se.value, fe = se.transform;
+        var de;
+        if (U || E) {
+            de = q(o);
         }
         // if renderChildrenWhenCollapsed is true, we hide the content by setting the height of the wrapper to 0
-                var se = E && !P && !U ? 0 : ae;
-        var ce = (0, r.useMemo)((function() {
-            return N(N({}, T), le && A({}, le, se));
-        }), [ le, se, T ]);
-        var fe = (0, r.useMemo)((function() {
+                var me = E && !re && !U ? 0 : ce;
+        var pe = (0, n.useMemo)((function() {
+            return N(N({}, T), de && A({}, de, me));
+        }), [ de, me, T ]);
+        var ve = (0, n.useMemo)((function() {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return N(N({}, S), {}, {
-                transform: ue
+                transform: fe
             });
-        }), [ S, ue ]);
+        }), [ S, fe ]);
         
-        return n().createElement(v, {
-            $hideOverflow: !P || U || false,
+        return r().createElement(v, {
+            $hideOverflow: !re || U || false,
             className: (0, c.toClassName)(f, k),
-            style: ce,
-            id: x
-        }, (P || U || E) &&  n().createElement(y, g({
+            style: pe,
+            id: C
+        }, (re || U || E) &&  r().createElement(y, g({
             "data-test": "transition-open"
         }, H, {
-            ref: te,
+            ref: ie,
             tabIndex: -1,
             className: p,
             id: m,
-            onKeyDown: I ? oe : undefined,
-            style: fe
+            onKeyDown: I ? le : undefined,
+            style: ve
         }), u));
     }
     D.propTypes = I;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.6.0",
+  "version": "5.7.1",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -45,7 +45,7 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.6.0",
+    "@splunk/react-icons": "^5.7.0",
     "@splunk/themes": "^1.4.1",
     "@splunk/ui-utils": "^1.12.0",
     "decimal.js-light": "^2.5.1",
@@ -63,7 +63,7 @@
     "@babel/core": "^7.28.0",
     "@babel/plugin-transform-runtime": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "^1.2.0",
+    "@splunk/docs-gen": "^1.3.0",
     "@splunk/eslint-config": "^5.0.0",
     "@splunk/react-docs": "^1.4.0",
     "@splunk/stylelint-config": "^5.0.0",

package/types/src/Button/Button.d.ts

@@ -50,11 +50,11 @@ interface ButtonPropsBase {
      * its container.  */
     inline?: boolean;
     /**
-     * Displays the chevron-down icon to indicate that the button behaves as a menu.
+     * Uses interactive styling and adds the chevron-down icon to indicate menu behavior.
      *
-     * To meet accessibility requirements, this prop should be used together with the `Dropdown` component.
-     *
-     * If `Dropdown` is not used, this prop should be used together with `aria-controls` and `aria-expanded`.
+     * **Accessibility:** This prop should be used with the `Dropdown` component, which manages
+     * the required `aria-controls` and `aria-expanded` attributes. If not using `Dropdown`,
+     * you must manually provide these ARIA attributes.
      */
     isMenu?: boolean;
     /**

package/types/src/ButtonSimple/ButtonSimple.d.ts

@@ -28,9 +28,7 @@ interface ButtonSimplePropsBase {
      */
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
     /**
-     * Converts the component from an action element (Button) into a control element (toggle).
-     * When `isMenu` is set to `true`, the styles of the default or subtle appearances are overridden
-     * to adapt the Button for use as a toggle for Dropdown/Select.
+     * Uses interactive styling for menu toggle behavior.
      */
     isMenu?: boolean;
     /** Opens the 'to' link in a new tab. */

package/types/src/Card/Header.d.ts

@@ -30,6 +30,10 @@ interface HeaderPropsBase {
      * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLDivElement>;
+    /**
+     * The icon to show before the title.
+     */
+    icon?: React.ReactNode;
     /**
      * Used as the subheading.
      */
@@ -57,7 +61,7 @@ type HeaderProps = ComponentProps<HeaderWithActions | HeaderWithActionsRenderPro
 /**
  * A styled container for `Card` header content.
  */
-declare function Header({ actions, actionPrimary, actionsSecondary, anchor, children, subtitle, title, truncateTitle, ...otherProps }: HeaderProps): React.JSX.Element;
+declare function Header({ actions, actionPrimary, actionsSecondary, anchor, children, icon, subtitle, title, truncateTitle, ...otherProps }: HeaderProps): React.JSX.Element;
 declare namespace Header {
     var propTypes: {
         actionPrimary: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -65,6 +69,7 @@ declare namespace Header {
         anchor: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         elementRef: PropTypes.Requireable<object>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         truncateTitle: PropTypes.Requireable<boolean>;

package/types/src/Card/docs/examples/Icon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name Card with icon
+ * @description A Card can have an icon in the header.
+ */
+declare function WithIcon(): React.JSX.Element;
+export default WithIcon;

package/types/src/Multiselect/Option.d.ts

@@ -30,6 +30,7 @@ interface OptionPropsBase {
      */
     disabled?: boolean;
     /**
+     * @private Undocumented due to limitations in supporting in compact `Multiselect` (see SUI-8286 notes for more info).
      * A React ref which is set to the DOM element when the component mounts, and null when it unmounts.
      */
     elementRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
@@ -99,6 +100,9 @@ declare namespace Option {
         description: PropTypes.Requireable<string>;
         descriptionPosition: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
+        /**
+         * @private Undocumented due to limitations in supporting in compact `Multiselect` (see SUI-8286 notes for more info).
+         */
         elementRef: PropTypes.Requireable<object>;
         hidden: PropTypes.Requireable<boolean>;
         icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;