@splunk/react-ui 5.7.0 → 5.8.0

package/Accordion.js

@@ -200,19 +200,19 @@
         }, q.apply(null, arguments);
     }
     function M(e, n) {
-        return V(e) || _(e, n) || R(e, n) || k();
+        return V(e) || _(e, n) || T(e, n) || k();
     }
     function k() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function R(e, n) {
+    function T(e, n) {
         if (e) {
-            if ("string" == typeof e) return T(e, n);
+            if ("string" == typeof e) return R(e, n);
             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) ? T(e, n) : void 0;
+            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) ? R(e, n) : void 0;
         }
     }
-    function T(e, n) {
+    function R(e, n) {
         (null == n || n > e.length) && (n = e.length);
         for (var r = 0, t = Array(n); r < n; r++) {
             t[r] = e[r];
@@ -324,7 +324,7 @@
         return t().createElement(b, q({
             "data-test": "accordion",
             "data-test-open-panel-id": P,
-            elementRef: o
+            ref: o
         }, p),  t().createElement(f.Provider, {
             value: S
         }, I));

package/Box.js

@@ -61,27 +61,66 @@
         e.r(n);
     // EXPORTS
         e.d(n, {
-        default: () => /* reexport */ v
+        default: () => /* reexport */ h
     });
     // CONCATENATED MODULE: external "react"
     const t = require("react");
     var r =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const l = require("prop-types");
-    var i =  e.n(l);
+    const a = require("prop-types");
+    var o =  e.n(a);
     // CONCATENATED MODULE: external "styled-components"
-    const o = require("styled-components");
-    var a =  e.n(o);
+    const i = require("styled-components");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/themes"
     const f = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Box/BoxStyles.ts
-    var d = a().div.withConfig({
+    var d = l().div.withConfig({
         displayName: "BoxStyles__Styled",
         componentId: "sc-1h4b5f6-0"
     })([ "", ";align-items:stretch;align-content:stretch;flex-flow:row nowrap;flex-grow:0;flex-shrink:0;justify-content:flex-start;width:auto;max-width:100%;&[data-inline]{display:inline-block;vertical-align:middle;}&[data-flex]{display:flex;}&[data-flex][data-inline]{display:inline-flex;}" ], f.mixins.reset("block"));
+    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+    /**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+    function s(e, n) {
+        if (e) {
+            if (typeof e === "function") {
+                e(n);
+            } else {
+                // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+                // the intention here is to signal "we will take care of setting 'current', not you".
+                e.current = n;
+ // eslint-disable-line no-param-reassign
+                        }
+        }
+    }
+    // CONCATENATED MODULE: ./src/utils/useDeprecate.tsx
+    var c = "is deprecated and will be removed in the next major version.";
+    var u = function e(n) {
+        var t = n.additionalMessage, r = t === void 0 ? "" : t, a = n.componentName;
+        useEffect((function() {
+            if (false) {}
+        }), [ r, a ]);
+    };
+    var p = function e(n) {
+        var r = n.additionalMessage, a = r === void 0 ? "" : r, o = n.componentName, i = n.propName, l = n.propValue;
+        (0, t.useEffect)((function() {
+            if (false) {}
+        }), [ a, o, i, l ]);
+    };
+    var v = function e(n) {
+        var t = n.additionalMessage, r = t === void 0 ? "" : t, a = n.componentName, o = n.deprecatedPropValue, i = n.propName, l = n.propValue;
+        useEffect((function() {
+            if (false) {}
+        }), [ r, a, i, l, o ]);
+    };
     // CONCATENATED MODULE: ./src/Box/Box.tsx
-    function s() {
-        return s = Object.assign ? Object.assign.bind() : function(e) {
+    function m() {
+        return m = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var t = arguments[n];
                 for (var r in t) {
@@ -89,20 +128,20 @@
                 }
             }
             return e;
-        }, s.apply(null, arguments);
+        }, m.apply(null, arguments);
     }
-    function c(e, n) {
+    function y(e, n) {
         if (null == e) return {};
-        var t, r, l = u(e, n);
+        var t, r, a = b(e, n);
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (r = 0; r < i.length; r++) {
-                t = i[r], -1 === n.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (l[t] = e[t]);
+            var o = Object.getOwnPropertySymbols(e);
+            for (r = 0; r < o.length; r++) {
+                t = o[r], -1 === n.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (a[t] = e[t]);
             }
         }
-        return l;
+        return a;
     }
-    function u(e, n) {
+    function b(e, n) {
         if (null == e) return {};
         var t = {};
         for (var r in e) {
@@ -113,28 +152,38 @@
         }
         return t;
     }
-    var p = {
-        children: i().node,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        flex: i().bool,
-        inline: i().bool
+    var g = {
+        children: o().node,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        flex: o().bool,
+        inline: o().bool
     };
     /**
  * Box is a utility component to normalize and abstract common layout styles.
- */    function y(e) {
-        var n = e.children, t = e.elementRef, l = e.flex, i = l === void 0 ? false : l, o = e.tag, a = o === void 0 ? "div" : o, f = e.inline, u = f === void 0 ? false : f, p = c(e, [ "children", "elementRef", "flex", "tag", "inline" ]);
+ */    var x =  r().forwardRef((function(e, n) {
+        var a = e.children, o = e.elementRef, i = e.flex, l = i === void 0 ? false : i, f = e.tag, c = f === void 0 ? "div" : f, u = e.inline, v = u === void 0 ? false : u, b = y(e, [ "children", "elementRef", "flex", "tag", "inline" ]);
         // @docs-props-type BoxPropsBase
-                
-        return r().createElement(d, s({
-            as: a,
-            ref: t
-        }, p, {
-            "data-inline": u || undefined,
-            "data-flex": i || undefined
-        }), n);
-    }
-    y.propTypes = p;
-    /* harmony default export */    const v = y;
+                p({
+            additionalMessage: "Use `ref` instead.",
+            componentName: "Box",
+            propName: "elementRef",
+            propValue: o
+        });
+        var g = (0, t.useCallback)((function(e) {
+            s(o, e);
+            s(n, e);
+        }), [ o, n ]);
+        
+        return r().createElement(d, m({
+            as: c,
+            ref: g
+        }, b, {
+            "data-inline": v || undefined,
+            "data-flex": l || undefined
+        }), a);
+    }));
+    x.propTypes = g;
+    /* harmony default export */    const h = x;
     // CONCATENATED MODULE: ./src/Box/index.ts
     module.exports = n;
     /******/})();

package/CHANGELOG.md

@@ -1,6 +1,40 @@
 Change Log
 ============
 
+5.8.0 - February 10, 2026
+----------
+New Features:
+* `TransitionOpen` now supports setting either open or close animation to `none` using the `animation` prop (SUI-8438).
+* `useKeyPress` now supports an optional configuration param with the following properties (SUI-8593):
+    * `enabled` allows the hook to be conditionally used
+    * `eventType` allows specifying `keyup` or `keydown` for controlling which events trigger the hook
+* `SidePanel` now has a `dockLayout` prop that supports new `'container'` and `'inline'` layouts (SUI-8585).
+* `Select` now supports `"dimmed"` and `"disabled"` values for the `disabled` prop (SUI-8521).
+* `SidePanel` now supports setting initial and return focus using `initialFocus` and `returnFocus` props (SUI-8604).
+* New `Drawer` component (SUI-8411).
+* `Modal` now supports `closeOnClickAway` to allow dismissal by clicking outside the modal (SUI-8542).
+
+Bug Fixes:
+* `StepBar` vertical layout now wraps long words to prevent container overflow (SUI-8481).
+* `JSONTree` with `overflow="scroll"` now renders newlines rather than collapsing them (SUI-6199).
+* `ComboBox.Option`, `Multiselect.Option`, `Search.Option`, and `Select.Option` are no longer keyboard navigable when `disabled` (SUI-8547).
+* `Multiselect` now safely handles document access in server-side rendering environments (SUI-8541).
+* `Popover` now maintains its width when resizing window (SUI-8136).
+* `Tooltip` added to `Menu.Item` when `truncate={true}` to display the full text on hover. (SUI-6219)
+* `DefinitionList`'s spacing is now consistent across `layout="auto"`, `layout="fixed"`, and `layout="stacked"` (SUI-8539).
+* `Multiselect` Compact `Clear all` no longer leaves some items selected when options are loaded incrementally via `onScrollBottom` (SUI-5132).
+* `Paginator` now displays correct page buttons when `numPageLinks` has a value of `3` (SUI-7709).
+* `ControlGroup`'s focus ring now renders above error messages (SUI-8613).
+* `Multiselect` now prevents removal of chips for disabled Options (SUI-8597).
+
+Docs:
+* LLM-optimized documentation (docs-llm) is now included (SUI-8228).
+
+5.7.1 - January 6, 2026
+----------
+Bug Fixes:
+* `TransitionOpen` now adjusts to change in content size (SUI-8518).
+
 5.7.0 - December 10, 2025
 ----------
 New Features:

package/CollapsiblePanel.js

@@ -186,8 +186,8 @@
     const T = require("lodash/omit");
     var M =  e.n(T);
     // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroupContext.tsx
-    var R =  (0, t.createContext)({});
-    /* harmony default export */    const B = R;
+    var B =  (0, t.createContext)({});
+    /* harmony default export */    const R = B;
     // CONCATENATED MODULE: ./src/CollapsiblePanel/SingleOpenPanelGroup.tsx
     function L() {
         return L = Object.assign ? Object.assign.bind() : function(e) {
@@ -322,8 +322,8 @@
         return r().createElement(k, L({
             "data-test": "single-open-panel-group",
             "data-test-open-panel-id": u,
-            elementRef: l
-        }, M().apply(void 0, [ d ].concat(W(Object.keys(Z))))),  r().createElement(B.Provider, {
+            ref: l
+        }, M().apply(void 0, [ d ].concat(W(Object.keys(Z))))),  r().createElement(R.Provider, {
             value: S
         }, h));
     }
@@ -480,8 +480,8 @@
     function ge(e) {
         var n = e.innerBodyStyles, a = e.actions, l = e.appearance, o = l === void 0 ? "default" : l, s = e.children, u = e.defaultOpen, f = u === void 0 ? undefined : u, b = e.description, v = e.disabled, y = e.elementRef, m = e.headingLevel, g = e.onChange, h = e.open, S = e.overflow, O = S === void 0 ? "auto" : S, C = e.panelId, P = e.renderChildrenWhenCollapsed, k = e.title, I = e.inset, T = I === void 0 ? true : I, M = ve(e, [ "innerBodyStyles", "actions", "appearance", "children", "defaultOpen", "description", "disabled", "elementRef", "headingLevel", "onChange", "open", "overflow", "panelId", "renderChildrenWhenCollapsed", "title", "inset" ]);
         // @docs-props-type CollapsiblePanelPropsBase
-                var R = (0, t.useContext)(B);
-        var L = Object.keys(R).length !== 0;
+                var B = (0, t.useContext)(R);
+        var L = Object.keys(B).length !== 0;
         var W = c()({
             componentName: "CollapsiblePanel",
             /* eslint-disable-next-line prefer-rest-params */
@@ -502,10 +502,10 @@
        * SingleOpenPanelGroup already takes into account if it is controlled or not in determining openPanelId
        * so context.openPanelId is used for both the controlled and uncontrolled case.
        */
-                return R.openPanelId === C;
+                return B.openPanelId === C;
             }
             return W ? h : Y;
-        }), [ R.openPanelId, L, W, h, Y, C ]);
+        }), [ B.openPanelId, L, W, h, Y, C ]);
         // SUI-7877 Must initialize openPanel with value to avoid re-render animation bug
                 var ie = (0, t.useState)(oe), se = ce(ie, 2), ue = se[0], de = se[1];
         (0, t.useEffect)((function() {
@@ -532,12 +532,12 @@
                 reason: "toggleClick",
                 action: t
             });
-            (n = R.onChange) === null || n === void 0 ? void 0 : n.call(R, e, {
+            (n = B.onChange) === null || n === void 0 ? void 0 : n.call(B, e, {
                 panelId: C,
                 reason: "toggleClick",
                 action: t
             });
-        }), [ R, W, ue, g, C ]);
+        }), [ B, W, ue, g, C ]);
         var fe = (0, t.useCallback)((function() {
             ae(false);
         }), []);
@@ -563,7 +563,7 @@
         
         return r().createElement(w, re({
             "data-test": "collapsible-panel",
-            elementRef: y,
+            ref: y,
             $appearance: o
         }, M), a != null ?  r().createElement(x, {
             $appearance: o,

package/ComboBox.js

@@ -128,8 +128,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/ComboBox/Option.tsx
-    function q() {
-        return q = Object.assign ? Object.assign.bind() : function(e) {
+    function E() {
+        return E = Object.assign ? Object.assign.bind() : function(e) {
             for (var n = 1; n < arguments.length; n++) {
                 var r = arguments[n];
                 for (var t in r) {
@@ -137,9 +137,9 @@
                 }
             }
             return e;
-        }, q.apply(null, arguments);
+        }, E.apply(null, arguments);
     }
-    function E(e, n) {
+    function q(e, n) {
         if (null == e) return {};
         var r, t, o = x(e, n);
         if (Object.getOwnPropertySymbols) {
@@ -182,7 +182,7 @@
     /**
  * An option within a `ComboBox`.
  */    function D(e) {
-        var n = e.active, o = e.description, a = e.descriptionPosition, i = a === void 0 ? "bottom" : a, l = e.disabled, u = e.elementRef, c = e.icon, s = e.label, f = e.matchRanges, p = e.onClick, v = e.truncate, b = e.value, m = E(e, [ "active", "description", "descriptionPosition", "disabled", "elementRef", "icon", "label", "matchRanges", "onClick", "truncate", "value" ]);
+        var n = e.active, o = e.description, a = e.descriptionPosition, i = a === void 0 ? "bottom" : a, l = e.disabled, u = e.elementRef, c = e.icon, s = e.label, f = e.matchRanges, p = e.onClick, v = e.truncate, b = e.value, m = q(e, [ "active", "description", "descriptionPosition", "disabled", "elementRef", "icon", "label", "matchRanges", "onClick", "truncate", "value" ]);
         // @docs-props-type OptionPropsBase
                 var y = (0, r.useCallback)((function(e) {
             if (!l) {
@@ -196,7 +196,7 @@
         }), [ u ]);
         var h = s === undefined ? b : s;
         
-        return t().createElement(d.Item, q({
+        return t().createElement(d.Item, E({
             active: n,
             "data-test": "option",
             "data-test-value": b,
@@ -403,7 +403,7 @@
  * `ComboBox` allows the user to select a predefined string or enter a new value. Unlike `Select`
  * and `Multiselect`, `Option` value must always be a string.
  */    function ne(e) {
-        var n = e.animateLoading, o = e.append, a = e.children, i = e.controlledFilter, l = e.defaultPlacement, u = l === void 0 ? "vertical" : l, s = e.defaultValue, f = e.describedBy, d = e.disabled, p = e.elementRef, y = e.error, h = e.footerMessage, S = e.inline, q = e.inputId, E = e.inputRef, x = e.isLoadingOptions, B = e.labelledBy, D = e.loadingMessage, I = e.menuStyle, L = I === void 0 ? Z : I, V = e.name, z = e.noOptionsMessage, F = e.onBlur, _ = e.onChange, N = e.onClose, W = e.onFocus, U = e.onKeyDown, X = e.onOpen, $ = e.onScroll, G = e.onScrollBottom, ne = e.onSelect, re = e.placeholder, te = re === void 0 ? ee : re, oe = e.prepend, ae = e.value, ie = e.virtualization, le = Y(e, [ "animateLoading", "append", "children", "controlledFilter", "defaultPlacement", "defaultValue", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onBlur", "onChange", "onClose", "onFocus", "onKeyDown", "onOpen", "onScroll", "onScrollBottom", "onSelect", "placeholder", "prepend", "value", "virtualization" ]);
+        var n = e.animateLoading, o = e.append, a = e.children, i = e.controlledFilter, l = e.defaultPlacement, u = l === void 0 ? "vertical" : l, s = e.defaultValue, f = e.describedBy, d = e.disabled, p = e.elementRef, y = e.error, h = e.footerMessage, S = e.inline, E = e.inputId, q = e.inputRef, x = e.isLoadingOptions, B = e.labelledBy, D = e.loadingMessage, I = e.menuStyle, L = I === void 0 ? Z : I, V = e.name, z = e.noOptionsMessage, F = e.onBlur, _ = e.onChange, N = e.onClose, W = e.onFocus, U = e.onKeyDown, X = e.onOpen, $ = e.onScroll, G = e.onScrollBottom, ne = e.onSelect, re = e.placeholder, te = re === void 0 ? ee : re, oe = e.prepend, ae = e.value, ie = e.virtualization, le = Y(e, [ "animateLoading", "append", "children", "controlledFilter", "defaultPlacement", "defaultValue", "describedBy", "disabled", "elementRef", "error", "footerMessage", "inline", "inputId", "inputRef", "isLoadingOptions", "labelledBy", "loadingMessage", "menuStyle", "name", "noOptionsMessage", "onBlur", "onChange", "onClose", "onFocus", "onKeyDown", "onOpen", "onScroll", "onScrollBottom", "onSelect", "placeholder", "prepend", "value", "virtualization" ]);
         // @docs-props-type ComboBoxPropsBase
                 var ue = O()({
             componentName: "ComboBox",
@@ -415,7 +415,7 @@
         var ye = (0, r.useState)(false), ge = K(ye, 2), he = ge[0], Oe = ge[1];
         var Se = (0, r.useState)(null), ke = K(Se, 2), Ce = ke[0], we = ke[1];
         var Pe = (0, r.useState)(), je = K(Pe, 2), Re = je[0], Me = je[1];
-        var qe = (0, r.useState)(s || ""), Ee = K(qe, 2), xe = Ee[0], Be = Ee[1];
+        var Ee = (0, r.useState)(s || ""), qe = K(Ee, 2), xe = qe[0], Be = qe[1];
         var De = k()(fe);
         var Ae = (0, r.useRef)();
         var Ie = (0, r.useRef)(0);
@@ -450,8 +450,8 @@
         }), [ a, Fe, Re ]);
         var _e = (0, r.useCallback)((function(e) {
             we(e);
-            M(E, e);
-        }), [ E ]);
+            M(q, e);
+        }), [ q ]);
         var Ne = (0, r.useCallback)((function(e) {
             me(e);
             M(p, e);
@@ -544,29 +544,30 @@
                     // ignore non-Option items such as Headings and Dividers
                     return n;
                 }
-                var a = Ie.current === fe;
+                var a = n.props.label !== undefined ? n.props.label : n.props.value;
+                var l = n.props.matchRanges;
+                var c = !i && e && (o || t > 0) ? (0, C.keywordLocations)(a, u) || undefined : undefined;
+                var s = {
+                    onClick: Ye,
+                    matchRanges: l || c
+                };
+                if (n.props.disabled) {
+                    
+                    return (0, r.cloneElement)(n, s);
+                }
+                var f = Ie.current === fe;
                 Ie.current += 1;
-                var l = n.props.label !== undefined ? n.props.label : n.props.value;
-                var c = n.props.matchRanges;
-                var s = !i && e && (o || t > 0) ? (0, C.keywordLocations)(l, u) || undefined : undefined;
-                if (a) {
-                    if (!n.props.disabled) {
-                        Ae.current = n.props.value;
-                    }
+                if (f) {
+                    Ae.current = n.props.value;
                     
-                    return (0, r.cloneElement)(n, {
+                    return (0, r.cloneElement)(n, H(H({}, s), {}, {
                         elementRef: We,
                         id: He,
-                        onClick: Ye,
-                        matchRanges: c || s,
                         active: true
-                    });
+                    }));
                 }
                 
-                return (0, r.cloneElement)(n, {
-                    onClick: Ye,
-                    matchRanges: c || s
-                });
+                return (0, r.cloneElement)(n, s);
             }));
         }), [ fe, He, a, i, Ke, Fe, We, Ye, Re ]);
         var Ze = (0, r.useCallback)((function(e) {
@@ -590,6 +591,9 @@
                     break;
 
                   case "ArrowDown":
+                    if (n <= 0) {
+                        break;
+                    }
                     de((function(e) {
                         return Math.min(e + 1, n - 1);
                     }));
@@ -666,7 +670,7 @@
             elementRef: Ne,
             error: y,
             inline: S,
-            inputId: q,
+            inputId: E,
             inputRef: _e,
             labelledBy: B,
             name: V,