@splunk/react-ui 5.2.0 → 5.3.0

package/Avatar.js

@@ -115,9 +115,7 @@
     var m = s().text.withConfig({
         displayName: "AvatarStyles__StyledText",
         componentId: "sc-1t4nch-3"
-    })([ "", ";text-transform:capitalize;text-anchor:middle;dominant-baseline:middle;alignment-baseline:middle;fill:", ";transform:translate(50%,54%);" ], u.mixins.typography({
-        weight: "bold"
-    }), (function(e) {
+    })([ "font-weight:", ";text-transform:capitalize;text-anchor:middle;dominant-baseline:central;fill:", ";" ], u.variables.fontWeightBold, (function(e) {
         var r = e.$textColor;
         return r;
     }));
@@ -184,13 +182,13 @@
     function k(e) {
         if (Array.isArray(e)) return e;
     }
-    var P = "lightText";
-    var A = "darkText";
+    var A = "lightText";
+    var P = "darkText";
     function E(e) {
         var r = S(e, 3), t = r[0], n = r[1], o = r[2];
         var i = (t * 299 + n * 587 + o * 114) / 1e3;
  // formula from https://www.w3.org/TR/AERT/#color-contrast
-                return i > 125 ? A : P;
+                return i > 125 ? P : A;
     }
     /**
  * Determines if light or dark text should be used over a specific background color by determining the color brightness of a
@@ -244,7 +242,7 @@
    * TODO: Convert theme variable color variables.neutral200 to rgb dynamically and memoize it (SUI-5731).
    */
         // backgroundColor is either not provided or an accepted representation of color
-                return e ? A : P;
+                return e ? P : A;
     }
     // CONCATENATED MODULE: ./src/Avatar/Avatar.tsx
     function I(e) {
@@ -310,26 +308,26 @@
         }, H.apply(null, arguments);
     }
     function M(e, r) {
-        return L(e) || B(e, r) || D(e, r) || N();
+        return V(e) || L(e, r) || B(e, r) || N();
     }
     function N() {
         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 D(e, r) {
+    function B(e, r) {
         if (e) {
-            if ("string" == typeof e) return V(e, r);
+            if ("string" == typeof e) return D(e, r);
             var t = {}.toString.call(e).slice(8, -1);
-            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? V(e, r) : void 0;
+            return "Object" === t && e.constructor && (t = e.constructor.name), "Map" === t || "Set" === t ? Array.from(e) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? D(e, r) : void 0;
         }
     }
-    function V(e, r) {
+    function D(e, r) {
         (null == r || r > e.length) && (r = e.length);
         for (var t = 0, n = Array(r); t < r; t++) {
             n[t] = e[t];
         }
         return n;
     }
-    function B(e, r) {
+    function L(e, r) {
         var t = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != t) {
             var n, o, i, a, l = [], u = !0, c = !1;
@@ -351,12 +349,12 @@
             return l;
         }
     }
-    function L(e) {
+    function V(e) {
         if (Array.isArray(e)) return e;
     }
-    function U(e, r) {
+    function G(e, r) {
         if (null == e) return {};
-        var t, n, o = G(e, r);
+        var t, n, o = U(e, r);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
@@ -365,7 +363,7 @@
         }
         return o;
     }
-    function G(e, r) {
+    function U(e, r) {
         if (null == e) return {};
         var t = {};
         for (var n in e) {
@@ -389,24 +387,23 @@
         textColor: l().oneOfType([ l().oneOf([ "auto" ]), l().string, l().func ]),
         value: l().string
     };
-    function F(e) {
+    function W(e) {
         return !!e.onClick || !!e.to;
     }
-    function J(e) {
-        var r = e.backgroundColor, t = e.initials, n = e.label, o = e.size, i = U(e, [ "backgroundColor", "initials", "label", "size" ]);
-        var a = r == null ? u.variables.neutral200 : r;
-        var l = {
-            "aria-label": n,
+    function F(e) {
+        var r = e.backgroundColor, t = e.label, n = e.size, o = G(e, [ "backgroundColor", "label", "size" ]);
+        var i = r == null ? u.variables.neutral200 : r;
+        var a = {
+            "aria-label": t,
             "data-test": "avatar",
-            $backgroundColor: a,
-            $initials: t,
-            $size: o
+            $backgroundColor: i,
+            $size: n
         };
-        return [ l, i ];
+        return [ a, o ];
     }
-    function Q(e) {
-        var r = J(e), o = M(r, 2), a = o[0], l = o[1];
-        var u = l.children, c = l.elementRef, s = l.value, f = l.onClick, d = l.to, v = U(l, [ "children", "elementRef", "value", "onClick", "to" ]);
+    function J(e) {
+        var r = F(e), o = M(r, 2), a = o[0], l = o[1];
+        var u = l.children, c = l.elementRef, s = l.value, f = l.onClick, d = l.to, v = G(l, [ "children", "elementRef", "value", "onClick", "to" ]);
         var b = (0, t.useCallback)((function(e) {
             f === null || f === void 0 ? void 0 : f(e, {
                 value: s
@@ -419,57 +416,65 @@
             to: d
         }, a, i()(v, Object.keys(K))), u);
     }
-    function W(e) {
-        var r = J(e), t = M(r, 2), o = t[0], a = t[1];
-        var l = a.children, u = a.elementRef, c = U(a, [ "children", "elementRef" ]);
+    function Q(e) {
+        var r = F(e), t = M(r, 2), o = t[0], a = t[1];
+        var l = a.children, u = a.elementRef, c = G(a, [ "children", "elementRef" ]);
         
         return n().createElement(b, H({
             ref: u
         }, o, i()(c, Object.keys(K))), l);
     }
     function X(e) {
-        var r = e.backgroundColor, o = e.textColor, i = o === void 0 ? "auto" : o, a = e.initials, l = e.image, c = e.size, s = c === void 0 ? "medium" : c, f = U(e, [ "backgroundColor", "textColor", "initials", "image", "size" ]);
+        var r = e.backgroundColor, o = e.textColor, i = o === void 0 ? "auto" : o, a = e.initials, l = e.image, c = e.size, s = c === void 0 ? "medium" : c, f = G(e, [ "backgroundColor", "textColor", "initials", "image", "size" ]);
         // @docs-props-type AvatarPropsBase
                 var d = (0, u.useSplunkTheme)(), v = d.isLight;
         var b = i;
         if (i === "auto") {
             var y = T(v, r);
-            b = y === A ? u.variables.black : u.variables.white;
+            b = y === P ? u.variables.black : u.variables.white;
         }
-        var g =  n().createElement(p, {
+        // SVG attributes to improve rendering of text when initials are longer than 2 characters
+                var g = a.length > 2 ? {
+            textLength: "90%",
+            lengthAdjust: "spacingAndGlyphs"
+        } : {};
+        var h =  n().createElement(p, {
             viewBox: "0 0 32 32"
-        },  n().createElement(m, {
+        },  n().createElement(m, H({
             "data-test": "initials",
+            x: "50%",
+            y: "50%",
+            dy: "-0.5",
             $textColor: b
-        }, a));
-        var h = l !== null && l !== void 0 ? l : g;
-        var O = (0, t.useState)("loading"), S = M(O, 2), w = S[0], x = S[1];
+        }, g), a));
+        var O = l !== null && l !== void 0 ? l : h;
+        var S = (0, t.useState)("loading"), w = M(S, 2), x = w[0], j = w[1];
         if ( (0, t.isValidElement)(l)) {
             if (l.type === "img") {
-                var j = l.props, C = j.src, k = j.alt, P = j.onError, E = U(j, [ "src", "alt", "onError" ]);
-                var I =  n().createElement("img", H({
-                    src: C,
-                    alt: k,
+                var C = l.props, k = C.src, A = C.alt, E = C.onError, I = G(C, [ "src", "alt", "onError" ]);
+                var _ =  n().createElement("img", H({
+                    src: k,
+                    alt: A,
                     onError: function e() {
-                        x("error");
-                        if (P) {
-                            P();
+                        j("error");
+                        if (E) {
+                            E();
                         }
                     }
-                }, E));
-                h = I;
+                }, I));
+                O = _;
             }
         }
         // fallback to initials if img fails to load
-                var _ = w !== "error" ? h : g;
-        var z = R({
+                var z = x !== "error" ? O : h;
+        var q = R({
             backgroundColor: r,
             size: s,
             initials: a,
             image: l,
             textColor: i
         }, f);
-        return F(z) ?  n().createElement(Q, z, _) :  n().createElement(W, z, _);
+        return W(q) ?  n().createElement(J, q, z) :  n().createElement(Q, q, z);
     }
     X.propTypes = K;
     /* harmony default export */    const Y = X;

package/Box.js

@@ -123,7 +123,8 @@
  * 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" ]);
-        
+        // @docs-props-type BoxPropsBase
+                
         return r().createElement(d, s({
             as: a,
             ref: t

package/CHANGELOG.md

@@ -1,6 +1,36 @@
 Change Log
 ============
 
+5.3.0 - September 2, 2025
+----------
+New Features:
+* New `Checkbox` component (SUI-6373).
+* `Multiselect` and `Date` support new `append` and `prepend` props (SUI-8052).
+* `DefinitionList`'s `layout` prop now supports `"stacked"` layout (SUI-7880).
+* `Search` supports new `append` and `prepend` props (SUI-8081).
+* `File` now supports a new `inputId` prop (SUI-8031).
+* `Code` supports new `containerAppearance` prop (SUI-8158).
+
+Bug Fixes:
+* `Select` with `filter` now has visual affordance for selected + active options (SUI-8045).
+* `Multiselect` with `compact` now has visual affordance for selected + active options (SUI-8045).
+* `CollapsiblePanel`'s expand panel icon is now unified for all themes (SUI-8043).
+* `Text` password toggle icons now are consistent across all themes (SUI-8127).
+* `Modal.Footer` now correctly aligns `Button`s that render as anchor elements in `layout="auto"` (SUI-8116).
+* `DefinitionList`'s separator character now spans the full width in `layout="auto"` when the separator is a narrower character (SUI-7880).
+* `Dropdown` now closes on click when using server-side rendering (SUI-8123).
+* `TextArea`'s height was incorrect in compact mode. The height been aligned with other data entry components (SUI-8053).
+* `ControlGroup`'s label is correctly applied to `File` (SUI-8031).
+* `JSONTreeItem` now uses unique DOM `id`s by default (SUI-8159).
+* `Link` disabled state style updated to match button (SUI-8101).
+* Fixed `JSONTree`'s keyboard navigation and indent styling (SUI-8131).
+* Fixed `Avatar`'s initials being misaligned in Safari (SUI-8098).
+* Improved `Avatar`'s rendering of initials with 3 or more characters (SUI-8098).
+* `TextArea` adornments are now vertically aligned (SUI-7793).
+
+Deprecations:
+* `Switch`'s `appearance="checkbox"` prop value has been deprecated and will be removed in the next major version. See the migration guide for details (SUI-8179).
+
 5.2.0 - August 5, 2025
 ----------
 New Features:
@@ -23,6 +53,7 @@ Bug Fixes:
 * `Layer` no longer throws an error when one of its `children` becomes fullscreen (SUI-8014).
 * Improved `Table`'s truncation behavior in low string length label scenarios and improved probability of truncation ellipses showing in full (SUI-8025).
 * `Menu.Item` now enforces through TypeScript types that `selected` and `selectableAppearance` props can only be used when `selectable` is enabled (SUI‑6495).
+* `Tooltip` now supports a `pointTo` prop (SUI-8133).
 
 5.1.0 - July 2, 2025
 ----------

package/Calendar.js

@@ -163,7 +163,8 @@
     };
     function w(e) {
         var a = e.active, t = a === void 0 ? false : a, o = e.dayOfWeek, i = e.locale, u = i === void 0 ? "en_US" : i, c = e.onClick, d = e.onKeyDown, s = e.selected, v = s === void 0 ? false : s, f = e.today, y = f === void 0 ? false : f, Y = e.value, p = D(e, [ "active", "dayOfWeek", "locale", "onClick", "onKeyDown", "selected", "today", "value" ]);
-        var g = (0, r.useCallback)((function(e) {
+        // @docs-props-type DayPropsBase
+                var g = (0, r.useCallback)((function(e) {
             e.preventDefault();
             c === null || c === void 0 ? void 0 : c(e, {
                 value: Y
@@ -239,7 +240,8 @@
     };
     function E(e) {
         var a = e.displayValue, r = e.endDate, t = e.highlightToday, o = e.locale, i = e.onChange, u = e.onKeyDown, c = e.selectedDate, d = e.selectedValue, s = e.startDate, v = e.todayValue;
-        var f = l()(s).locale(o).startOf("month");
+        // @docs-props-type DateGridPropsBase
+                var f = l()(s).locale(o).startOf("month");
         var y = [];
         while (f.isSameOrBefore(r)) {
             var Y = f.format("YYYY-MM-DD");
@@ -498,7 +500,8 @@
     }
     function J(e) {
         var a = e.headingId, t = e.locale, o = t === void 0 ? "en_US" : t, i = e.onChange, u = e.value, c = L(e, [ "headingId", "locale", "onChange", "value" ]);
-        var d = (0, r.useCallback)((function(e, a) {
+        // @docs-props-type MonthHeaderPropsBase
+                var d = (0, r.useCallback)((function(e, a) {
             e.stopPropagation();
             var r = l()(u, "YYYY-MM-DD").add(a, "M").format("YYYY-MM-DD");
             i === null || i === void 0 ? void 0 : i(e, {
@@ -665,7 +668,8 @@
     };
     function ye(e) {
         var a = e.describedBy, t = e.elementRef, o = e.highlightToday, i = e.labelledBy, c = e.locale, d = c === void 0 ? "en_US" : c, s = e.mockDate, f = e.onChange, y = e.required, Y = e.value, p = Y === void 0 ? l()().format("YYYY-MM-DD") : Y, g = ie(e, [ "describedBy", "elementRef", "highlightToday", "labelledBy", "locale", "mockDate", "onChange", "required", "value" ]);
-        var b = (0, r.useState)(p), h = ae(b, 2), m = h[0], D = h[1];
+        // @docs-props-type CalendarPropsBase
+                var b = (0, r.useState)(p), h = ae(b, 2), m = h[0], D = h[1];
         var M = (0, r.useState)(s || se(d)), O = ae(M, 2), w = O[0], C = O[1];
         var k = (0, r.useState)(null), S = ae(k, 2), x = S[0], I = S[1];
         var E = (0, r.useRef)((0, u.createDOMID)("header"));

package/Checkbox.d.ts

@@ -0,0 +1,2 @@
+export { default } from './types/src/Checkbox';
+export * from './types/src/Checkbox';