@splunk/react-ui 5.3.0 → 5.4.0

package/ButtonSimple.js

@@ -61,8 +61,8 @@
         r.r(e);
     // EXPORTS
         r.d(e, {
-        buttonMixin: () => /* reexport */ g,
-        default: () => /* reexport */ h
+        buttonMixin: () => /* reexport */ f,
+        default: () => /* reexport */ A
     });
     // CONCATENATED MODULE: external "react"
     const o = require("react");
@@ -79,8 +79,8 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const s = require("@splunk/themes");
     // CONCATENATED MODULE: external "lodash/merge"
-    const v = require("lodash/merge");
-    var b =  r.n(v);
+    const b = require("lodash/merge");
+    var v =  r.n(b);
     // CONCATENATED MODULE: ./src/ButtonSimple/mixin.ts
     function u(r) {
         "@babel/helpers - typeof";
@@ -100,9 +100,9 @@
         var i;
         var c;
         var l;
-        var d = s.variables.contentColorActive;
-        var v;
-        var b = s.variables.contentColorDisabled;
+        var d = s.variables.actionColorContentSecondary;
+        var b;
+        var v = s.variables.actionColorContentSecondaryDisabled;
         var u;
         switch (r) {
           case "primary":
@@ -111,8 +111,8 @@
                 o = s.variables.actionColorBackgroundPrimaryActive;
                 a = s.variables.actionColorBackgroundPrimaryDisabled;
                 t = s.variables.actionColorBackgroundPrimaryHover;
-                d = s.variables.contentColorInverted;
-                b = s.variables.contentColorInverted;
+                d = s.variables.actionColorContentPrimary;
+                v = s.variables.actionColorContentPrimaryDisabled;
                 break;
             }
 
@@ -122,8 +122,8 @@
                 o = s.variables.actionColorBackgroundDestructiveActive;
                 a = s.variables.actionColorBackgroundDestructiveDisabled;
                 t = s.variables.actionColorBackgroundDestructiveHover;
-                d = s.variables.contentColorInverted;
-                b = s.variables.contentColorInverted;
+                d = s.variables.actionColorContentDestructive;
+                v = s.variables.actionColorContentDestructiveDisabled;
                 break;
             }
 
@@ -137,8 +137,8 @@
                 o = s.variables.actionColorBackgroundDestructiveSecondaryActive;
                 a = s.variables.actionColorBackgroundDestructiveSecondaryDisabled;
                 t = s.variables.actionColorBackgroundDestructiveSecondaryHover;
-                d = s.variables.contentColorNegative;
-                b = s.variables.contentColorNegativeWeak;
+                d = s.variables.actionColorContentDestructiveSecondary;
+                v = s.variables.actionColorContentDestructiveSecondaryDisabled;
                 break;
             }
 
@@ -153,20 +153,20 @@
             break;
 
           case "subtle":
-            v = s.variables.contentColorAccentStrong;
-            u = s.variables.contentColorAccentStrong;
             o = s.variables.actionColorBackgroundSubtleActive;
             t = s.variables.actionColorBackgroundSubtleHover;
+            b = s.variables.actionColorContentSubtleActive;
+            u = s.variables.actionColorContentSubtleHover;
             break;
 
           case "standalone":
-            d = s.variables.contentColorAccent;
-            v = s.variables.contentColorAccentStrong;
-            b = s.variables.contentColorAccentWeak;
-            u = s.variables.contentColorAccentStrong;
             e = s.variables.actionColorBackgroundSubtle;
             o = s.variables.actionColorBackgroundSubtleActive;
             t = s.variables.actionColorBackgroundSubtleHover;
+            d = s.variables.actionColorContentStandalone;
+            b = s.variables.actionColorContentStandaloneActive;
+            v = s.variables.actionColorContentStandaloneDisabled;
+            u = s.variables.actionColorContentStandaloneHover;
             break;
 
           default:
@@ -181,13 +181,13 @@
             borderColorDisabled: c,
             borderColorHover: l,
             color: d,
-            colorActive: v,
-            colorDisabled: b,
+            colorActive: b,
+            colorDisabled: v,
             colorHover: u
         };
         return p;
     }
-    function f(r, e) {
+    function C(r, e) {
         var o = typeof r === "string" && p.includes(r) ? r : undefined;
         var a = {};
         if (o && e !== undefined) {
@@ -196,50 +196,50 @@
             a = r;
         }
         var t = y(o);
-        var n = b()(t, a), c = n.background, l = n.backgroundActive, d = n.backgroundDisabled, v = n.backgroundDisabledSelected, f = n.backgroundHover, g = n.borderColor, C = n.borderColorActive, k = n.borderColorDisabled, S = n.borderColorHover, m = n.color, B = n.colorActive, A = n.colorDisabled, D = n.colorHover;
-        var h = c != null && c !== "transparent";
+        var n = v()(t, a), c = n.background, l = n.backgroundActive, d = n.backgroundDisabled, b = n.backgroundDisabledSelected, C = n.backgroundHover, f = n.borderColor, g = n.borderColorActive, S = n.borderColorDisabled, k = n.borderColorHover, m = n.color, D = n.colorActive, B = n.colorDisabled, h = n.colorHover;
+        var A = c != null && c !== "transparent";
         return function() {
-            return (0, i.css)([ "border:", " solid ", ";border-radius:", ";", " ", " cursor:pointer;position:relative;font-weight:", ";&:focus,&:hover{z-index:3;}&:focus{box-shadow:", ";}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";border-color:", ";color:", ";transition:none;}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";", "}" ], s.variables.inputBorderWidth, g, s.variables.borderRadius, (function(r) {
+            return (0, i.css)([ "border:", " solid ", ";border-radius:", ";", " ", " cursor:pointer;position:relative;font-weight:", ";&:focus,&:hover{z-index:3;}&:focus{box-shadow:", ";}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";border-color:", ";color:", ";transition:none;}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";", "}" ], s.variables.inputBorderWidth, f, s.variables.borderRadius, (function(r) {
                 var e = r.$append;
                 return e && (0, i.css)([ "border-top-right-radius:0.1px;border-bottom-right-radius:0.1px;border-right:none;" ]);
             }), (function(r) {
                 var e = r.$prepend;
                 return e && (0, i.css)([ "border-top-left-radius:0.1px;border-bottom-left-radius:0.1px;" ]);
-            }), s.variables.fontWeightSemiBold, s.variables.focusShadow, c, m, f, S, D, l, C, B, k, A, (function(r) {
+            }), s.variables.fontWeightSemiBold, s.variables.focusShadow, c, m, C, k, h, l, g, D, S, B, (function(r) {
                 var e = r.$selected;
-                return h && (0, i.css)([ "background-color:", ";" ], e ? v : d);
+                return A && (0, i.css)([ "background-color:", ";" ], e ? b : d);
             }));
         };
     }
-    /* harmony default export */    const g = f;
+    /* harmony default export */    const f = C;
     // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimpleStyles.ts
-    var C = {
+    var g = {
         borderColor: s.variables.interactiveColorAccentError,
         borderColorActive: s.variables.interactiveColorAccentError,
         borderColorHover: s.mixins.overlayColors(s.variables.interactiveColorAccentError, s.variables.interactiveColorBorderHover)
     };
-    var k = c()(d()).withConfig({
+    var S = c()(d()).withConfig({
         displayName: "ButtonSimpleStyles__StyledClickable",
         componentId: "vlarwe-0"
     })([ "", " align-items:center;justify-content:center;&:not([disabled],[aria-disabled='true']){", "}", "" ], s.mixins.reset("flex"), (function(r) {
         var e = r.$error;
         return e && (0, i.css)([ "", "" ], (0, s.pickVariant)("$variant", {
-            default: g("secondary", C),
-            secondary: g("secondary", C),
-            subtle: g("subtle", C)
+            default: f("secondary", g),
+            secondary: f("secondary", g),
+            subtle: f("subtle", g)
         }));
     }), (0, s.pickVariant)("$variant", {
-        default: g("secondary"),
-        primary: g("primary"),
-        secondary: g("secondary"),
-        subtle: g("subtle"),
-        destructive: g("destructive"),
-        destructiveSecondary: g("destructiveSecondary"),
-        standalone: g("standalone")
+        default: f("secondary"),
+        primary: f("primary"),
+        secondary: f("secondary"),
+        subtle: f("subtle"),
+        destructive: f("destructive"),
+        destructiveSecondary: f("destructiveSecondary"),
+        standalone: f("standalone")
     }));
     // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimple.tsx
-    function S() {
-        return S = Object.assign ? Object.assign.bind() : function(r) {
+    function k() {
+        return k = Object.assign ? Object.assign.bind() : function(r) {
             for (var e = 1; e < arguments.length; e++) {
                 var o = arguments[e];
                 for (var a in o) {
@@ -247,11 +247,11 @@
                 }
             }
             return r;
-        }, S.apply(null, arguments);
+        }, k.apply(null, arguments);
     }
     function m(r, e) {
         if (null == r) return {};
-        var o, a, t = B(r, e);
+        var o, a, t = D(r, e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(r);
             for (a = 0; a < n.length; a++) {
@@ -260,7 +260,7 @@
         }
         return t;
     }
-    function B(r, e) {
+    function D(r, e) {
         if (null == r) return {};
         var o = {};
         for (var a in r) {
@@ -271,7 +271,7 @@
         }
         return o;
     }
-    var A = {
+    var B = {
         action: n().string,
         appearance: n().oneOf([ "default", "secondary", "primary", "destructive", "destructiveSecondary", "subtle", "standalone" ]),
         append: n().bool,
@@ -284,11 +284,11 @@
         prepend: n().bool,
         to: n().string
     };
-    var D =  a().forwardRef((function(r, e) {
-        var o = r.appearance, t = o === void 0 ? "default" : o, n = r.append, i = r.children, c = r.disabled, l = r.error, d = r.isMenu, s = r.prepend, v = m(r, [ "appearance", "append", "children", "disabled", "error", "isMenu", "prepend" ]);
+    var h =  a().forwardRef((function(r, e) {
+        var o = r.appearance, t = o === void 0 ? "default" : o, n = r.append, i = r.children, c = r.disabled, l = r.error, d = r.isMenu, s = r.prepend, b = m(r, [ "appearance", "append", "children", "disabled", "error", "isMenu", "prepend" ]);
         // @docs-props-type ButtonSimplePropsBase
                 
-        return a().createElement(k, S({
+        return a().createElement(S, k({
             "aria-invalid": l,
             "data-test": "button-simple",
             disabled: c,
@@ -298,10 +298,10 @@
             $error: l,
             $isMenu: d,
             ref: e
-        }, v), i);
+        }, b), i);
     }));
-    D.propTypes = A;
-    /* harmony default export */    const h = D;
+    h.propTypes = B;
+    /* harmony default export */    const A = h;
     // only for styled-components that wrap ButtonSimple
         // CONCATENATED MODULE: ./src/ButtonSimple/index.ts
     module.exports = e;

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 Change Log
 ============
 
+5.4.0 - October 7, 2025
+----------
+New Features:
+* `Switch` supports new `describedBy` prop to associate `ControlGroup`'s help component to the toggle (SUI-6140).
+* `StepBar` now supports vertical layout with new `orientation` prop (SUI-8210).
+
+Bug Fixes:
+* `CollapsiblePanel` actions are properly justified to the end (SUI-8173).
+* `Menu.Item` no longer throws invalid prop warning caused by default `selectableAppearance` value (SUI-8195).
+* Table's layout was breaking when any of its `HeadCell`s had a `width` value of `undefined` (SUI-8064).
+* `Popover`'s arrow no longer occasionally separates from the content when the browser is zoomed (SUI-7977).
+* `Avatar`'s initials no longer become misaligned if browser is zoomed in Safari  (SUI-8186).
+* `Popover` will no longer briefly render in an incorrect position when resized (SUI-8062).
+* `SlidingPanels` now has animation when rendering in React 16.8 (SUI-8124).
+* `Slider` now shows step marks in minimum value state (SUI-7960).
+
 5.3.0 - September 2, 2025
 ----------
 New Features:

package/CardLayout.js

@@ -67,21 +67,21 @@
     const t = require("react");
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var o =  e.n(i);
+    const o = require("prop-types");
+    var i =  e.n(o);
     // CONCATENATED MODULE: external "styled-components"
     const a = require("styled-components");
     var c =  e.n(a);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const l = require("@splunk/themes");
+    const u = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/CardLayout/CardLayoutStyles.ts
-    var u = c().div.withConfig({
+    var l = c().div.withConfig({
         displayName: "CardLayoutStyles__Styled",
         componentId: "sc-18kz7zm-0"
-    })([ "", ";", " ", "" ], l.mixins.reset("flex"), (function(e) {
+    })([ "", ";", " ", "" ], u.mixins.reset("flex"), (function(e) {
         var r = e.$wrapCards;
         return r && (0, a.css)([ "flex-wrap:wrap;" ]);
-    }), (0, l.pickVariant)("$alignCards", {
+    }), (0, u.pickVariant)("$alignCards", {
         center: (0, a.css)([ "justify-content:center;" ]),
         right: (0, a.css)([ "justify-content:flex-end;" ])
     }));
@@ -94,8 +94,8 @@
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
         }, f(e);
     }
-    function d() {
-        return d = Object.assign ? Object.assign.bind() : function(e) {
+    function s() {
+        return s = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var t = arguments[r];
                 for (var n in t) {
@@ -103,9 +103,9 @@
                 }
             }
             return e;
-        }, d.apply(null, arguments);
+        }, s.apply(null, arguments);
     }
-    function s(e, r) {
+    function d(e, r) {
         var t = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var n = Object.getOwnPropertySymbols(e);
@@ -118,9 +118,9 @@
     function p(e) {
         for (var r = 1; r < arguments.length; r++) {
             var t = null != arguments[r] ? arguments[r] : {};
-            r % 2 ? s(Object(t), !0).forEach((function(r) {
+            r % 2 ? d(Object(t), !0).forEach((function(r) {
                 y(e, r, t[r]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : s(Object(t)).forEach((function(r) {
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : d(Object(t)).forEach((function(r) {
                 Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
             }));
         }
@@ -148,18 +148,18 @@
         }
         return ("string" === r ? String : Number)(e);
     }
-    function g(e, r) {
+    function v(e, r) {
         if (null == e) return {};
-        var t, n, i = v(e, r);
+        var t, n, o = g(e, r);
         if (Object.getOwnPropertySymbols) {
-            var o = Object.getOwnPropertySymbols(e);
-            for (n = 0; n < o.length; n++) {
-                t = o[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                t = i[n], -1 === r.indexOf(t) && {}.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
             }
         }
-        return i;
+        return o;
     }
-    function v(e, r) {
+    function g(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -171,35 +171,38 @@
         return t;
     }
     var O = {
-        alignCards: o().oneOf([ "left", "center", "right" ]),
-        cardMaxWidth: o().oneOfType([ o().number, o().string ]),
-        cardMinWidth: o().oneOfType([ o().number, o().string ]),
-        cardWidth: o().oneOfType([ o().number, o().string ]),
-        children: o().node,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        gutterSize: o().number,
-        wrapCards: o().bool
+        alignCards: i().oneOf([ "left", "center", "right" ]),
+        cardMaxWidth: i().oneOfType([ i().number, i().string ]),
+        cardMinWidth: i().oneOfType([ i().number, i().string ]),
+        cardWidth: i().oneOfType([ i().number, i().string ]),
+        children: i().node,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        gutterSize: i().number,
+        wrapCards: i().bool
     };
     function h(e) {
-        var r = e.alignCards, i = r === void 0 ? "left" : r, o = e.cardMaxWidth, a = e.cardMinWidth, c = e.cardWidth, l = e.children, f = e.elementRef, s = e.gutterSize, y = s === void 0 ? 10 : s, b = e.style, m = e.wrapCards, v = m === void 0 ? true : m, O = g(e, [ "alignCards", "cardMaxWidth", "cardMinWidth", "cardWidth", "children", "elementRef", "gutterSize", "style", "wrapCards" ]);
+        var r = e.alignCards, o = r === void 0 ? "left" : r, i = e.cardMaxWidth, a = e.cardMinWidth, c = e.cardWidth, u = e.children, f = e.elementRef, d = e.gutterSize, y = d === void 0 ? 10 : d, b = e.style, m = e.wrapCards, g = m === void 0 ? true : m, O = v(e, [ "alignCards", "cardMaxWidth", "cardMinWidth", "cardWidth", "children", "elementRef", "gutterSize", "style", "wrapCards" ]);
  // @docs-props-type CardLayoutPropsBase
-                var h = t.Children.toArray(l).filter(t.isValidElement).map((function(e) {
+                var h = t.Children.toArray(u).filter(t.isValidElement).map((function(e) {
             
             return (0, t.cloneElement)(e, {
                 minWidth: c || a || undefined,
-                maxWidth: c || o || undefined,
+                maxWidth: c || i || undefined,
                 margin: y / 2
             });
         }));
+        var j = (0, t.useMemo)((function() {
+            return p({
+                padding: y / 2
+            }, b);
+        }), [ y, b ]);
         
-        return n().createElement(u, d({
+        return n().createElement(l, s({
             "data-test": "card-layout",
-            $alignCards: i,
-            $wrapCards: v,
+            $alignCards: o,
+            $wrapCards: g,
             ref: f,
-            style: p({
-                padding: y / 2
-            }, b)
+            style: j
         }, O), h);
     }
     h.propTypes = O;

package/Clickable.js

@@ -190,8 +190,8 @@
         navigationLabel: c().string,
         to: c().oneOfType([ c().string, c().oneOf([ undefined ]) ])
     };
-    function L(e) {
-        return e !== undefined;
+    function L(e, n) {
+        return e !== "button" && n !== undefined;
     }
     /**
  * `Clickable` renders as a `button` element, or as an `a` element if the `to` prop is set
@@ -212,7 +212,7 @@
             k(n, e);
         }), [ l, n ]);
         // memoizing this result causes TS to lose track of the type guard established by isLinkCheck
-                var j = L(v);
+                var j = L(f, v);
         // 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
@@ -253,8 +253,7 @@
                 h === null || h === void 0 ? void 0 : h(e, t);
             }
         }), [ i, I, j, u, c, O, h, s, v ]);
-        // Only set the href attribute when enabled and therefore using an <a> tag
-                if (j && f !== "button") {
+        if (j) {
             if (a) {
                 
                 return t().createElement(b, C({
@@ -294,7 +293,7 @@
             ref: x,
             type: "button",
             disabled: a === "disabled",
-            onClick: c && !a ? R : undefined
+            onClick: !a ? R : undefined
         }, d()(p, "disabled")), i);
     }));
     I.propTypes = j;