@splunk/react-ui 4.35.0 → 4.36.0

package/CHANGELOG.md

@@ -1,20 +1,36 @@
 Change Log
 ============
 
+4.36.0 - September 3, 2024
+----------
+New Features:
+* `Resize` now accepts `separator` as a value for the `appearance` prop which makes the resize button span the entire border (SUI-6600)
+
+Bug Fixes:
+* `Slider` has increased color contrast in Enterprise themes (SUI-6259).
+* `JSONTree` will no longer crash when the `json` prop changes (SUI-6182).
+* `Multiselect`'s options are no longer clickable when they are fading out (SUI-5901).
+* `Multiselect`'s options are shown again when clicking after being previously dismissed with ESC key (SUI-6128).
+* `TabBar` now correctly handles focus when `Tab` children are reordered (SUI-6599).
+
+Deprecations:
+* `ComboBox`, `ControlGroup`, and `StaticContent`'s  `size` prop has been deprecated and will be removed in the next major version. It has no effect in `@splunk/react-ui@4` and was incorrectly listed in the API documentation. (SUI-6400).
+
 4.35.0 - August 26, 2024
 ----------
 New Features:
 * `Color`'s `hideInput` prop is now supported in Enterprise themes. Defaults to `true` in Enterprise and `false` in Prisma themes, maintaining existing behavior (SUI-6458).
 * `Menu.Item` now supports a new `"dimmed"` value for the `disabled` prop (SUI-5671).
 * `ControlGroup` uses `aria-errormessage` to help associate the input with its error message (SUI-6395).
-* Refactored uses of styled-components `withComponent` functionality to increase compatibility with styled-components v6 where it will no longer be available.
+* Refactored uses of styled-components `withComponent` functionality to increase compatibility with styled-components v6 where it will no longer be available (SUI-6285).
+* `Search.Option` now supports the `onClick`, `to`, and `openInNewContext` props (SUI-5249).
 
 Bug Fixes:
 * `Button` with `inline={false}` now aligns correctly with text when set to `display: inline-block` (SUI-6472).
 * `Text`'s border now shows focus when clicked and has a cursor text when hovering over the border now (SUI-5199).
-* `Text`'s nonclickable adornments now shows focus on the input when clicked (SUI-5199).
+* `Text`'s non-clickable adornments now shows focus on the input when clicked (SUI-5199).
 * Reverted change to `CollapsiblePanel` focus shadow, now uses inset shadow:
-    * Note `@splunk/themes@0.21.0` should be used to ensure contrast requirements are met. 
+    * Note `@splunk/themes@0.21.0` should be used to ensure contrast requirements are met.
 * `Message`'s remove button styling for focus and hover states has been corrected (SUI-6520).
 
 Deprecations:

package/Calendar.js

@@ -761,7 +761,7 @@
                 return n().createElement(y.SplunkThemeProvider, {
                     density: d ? "comfortable" : i.density
                 },  n().createElement(Z, c()(u, "onChange"),  n().createElement(J(), {
-                    appearance: "pill",
+                    appearance: "subtle",
                     icon: s ?  n().createElement(L(), {
                         hideDefaultTooltip: true,
                         screenReaderText: m,
@@ -778,7 +778,7 @@
                     id: a,
                     "data-test": "header-label"
                 }, v),  n().createElement(J(), {
-                    appearance: "pill",
+                    appearance: "subtle",
                     icon: s ?  n().createElement(X(), {
                         hideDefaultTooltip: true,
                         screenReaderText: b,

package/CollapsiblePanel.js

@@ -772,7 +772,7 @@
                 }, c()(this.props, l()(n.propTypes))), g || o != null ?  r().createElement(W, {
                     $disabled: p
                 },  r().createElement(B, ue({
-                    appearance: "pill",
+                    appearance: "subtle",
                     "aria-label": (0, v._)("Panel"),
                     "aria-labelledby": x
                 }, S),  r().createElement(U, {

package/ComboBox.js

@@ -552,8 +552,7 @@
         inline: false,
         isLoadingOptions: false,
         menuStyle: {},
-        placeholder: (0, O._)("Select..."),
-        size: "medium"
+        placeholder: (0, O._)("Select...")
     };
     function pe(e, t) {
         var n = t.clientX, o = t.clientY;
@@ -821,6 +820,7 @@
             i.activeItemId = (0, g.createDOMID)("active-item");
             if (false) {}
             if (false) {}
+            if (false) {}
             return i;
         }
         te(r, [ {

package/ControlGroup.js

@@ -281,7 +281,7 @@
         return r;
     }
     function $(e, t) {
-        return z(e) || N(e, t) || G(e, t) || A();
+        return R(e) || N(e, t) || G(e, t) || A();
     }
     function A() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
@@ -324,15 +324,15 @@
         }
         return r;
     }
-    function z(e) {
+    function R(e) {
         if (Array.isArray(e)) return e;
     }
-    function R(e, t) {
+    function W(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function W(e, t) {
+    function z(e, t) {
         for (var r = 0; r < t.length; r++) {
             var n = t[r];
             n.enumerable = n.enumerable || false;
@@ -342,8 +342,8 @@
         }
     }
     function F(e, t, r) {
-        if (t) W(e.prototype, t);
-        if (r) W(e, r);
+        if (t) z(e.prototype, t);
+        if (r) z(e, r);
         return e;
     }
     function J(e, t) {
@@ -446,8 +446,7 @@
         hideLabel: false,
         labelPosition: "left",
         labelWidth: 120,
-        required: false,
-        size: "medium"
+        required: false
     };
     // Style cloned onto child elements when fill behavior set.
         var re = {
@@ -480,7 +479,7 @@
         // @docs-props-type ControlGroupPropsBase
                 function o(e) {
             var r;
-            R(this, o);
+            W(this, o);
             r = t.call(this, e);
             Z(K(r), "errorId", void 0);
             Z(K(r), "helpId", void 0);
@@ -539,6 +538,7 @@
             r.childIds = {};
             r.stackLayoutChildStyle = {};
             if (false) {}
+            if (false) {}
             return r;
         }
         F(o, [ {
@@ -572,14 +572,14 @@
             key: "render",
             value: function e() {
                 var t = this;
-                var o = this.props, i = o.children, l = o.controlsLayout, a = o.error, s = o.help, c = o.hideLabel, u = o.label, f = o.labelFor, y = o.labelPosition, h = o.labelWidth, m = o.required, v = o.size, g = o.splunkTheme, _ = o.tooltip, T = o.tooltipDefaultPlacement, D = M(o, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "size", "splunkTheme", "tooltip", "tooltipDefaultPlacement" ]);
-                var V = g.isPrisma, $ = g.isCompact;
-                var A = r.Children.toArray(i).filter(r.isValidElement);
-                var G = A.length;
-                var B = D;
-                var N = typeof a === "string";
-                var z = N && a !== "";
-                var R = N || a === true;
+                var o = this.props, i = o.children, l = o.controlsLayout, a = o.error, s = o.help, c = o.hideLabel, u = o.label, f = o.labelFor, y = o.labelPosition, h = o.labelWidth, m = o.required, v = o.splunkTheme, g = o.tooltip, _ = o.tooltipDefaultPlacement, T = M(o, [ "children", "controlsLayout", "error", "help", "hideLabel", "label", "labelFor", "labelPosition", "labelWidth", "required", "splunkTheme", "tooltip", "tooltipDefaultPlacement" ]);
+                var D = v.isPrisma, V = v.isCompact;
+                var $ = r.Children.toArray(i).filter(r.isValidElement);
+                var A = $.length;
+                var G = T;
+                var B = typeof a === "string";
+                var N = B && a !== "";
+                var R = B || a === true;
  // Clean the Children
                                 var W = function e(n, o) {
                     var i = {
@@ -589,21 +589,21 @@
                         if (o > 0) {
                             i.prepend = true;
                         }
-                        if (o < G - 1) {
+                        if (o < A - 1) {
                             i.append = true;
                         }
                         if (i.prepend || i.append) {
                             i.inline = false;
                         }
                     }
-                    if (l === "fill" && G > 1) {
+                    if (l === "fill" && A > 1) {
                         i.inline = true;
                     }
                     if (l === "stack") {
                         i.inline = false;
-                        if (o < G - 1) {
+                        if (o < A - 1) {
                             // The spread operator is used as css styles are not nested, so there is no need for a deep copy.
-                            var a = t.getStackLayoutChildStyle(V, $);
+                            var a = t.getStackLayoutChildStyle(D, V);
                             i.style = n.props.style ? q(q({}, n.props.style), a) : a;
                         }
                     }
@@ -627,7 +627,7 @@
                     } else {
                         i.labelText = u;
                     }
-                    if (G === 1 && (l === "fillJoin" || l === "fill")) {
+                    if (A === 1 && (l === "fillJoin" || l === "fill")) {
                         // Some controls like Select do not grow by default, so flexGrow is applied
                         // The spread operator is used as css styles are not nested, so there is no need for a deep copy.
                         i.style = n.props.style ? q(q({}, n.props.style), re) : re;
@@ -639,43 +639,42 @@
                             i.id = n.props.id || t.getChildID("id", o);
                         }
                     }
-                    if (z && n.props.error === true) {
+                    if (N && n.props.error === true) {
                         i["aria-errormessage"] = t.errorId;
                     }
                     
                     return (0, r.cloneElement)(n, i);
                 };
-                var F = A.map(W);
-                var J = this.getLinkedId(F);
+                var z = $.map(W);
+                var F = this.getLinkedId(z);
                 if (a) {
-                    B["aria-invalid"] = true;
+                    G["aria-invalid"] = true;
                 }
-                var H = y === "left" ? {
+                var J = y === "left" ? {
                     width: h
                 } : undefined;
-                var U = p()(h) ? "".concat(h, "px") : h;
-                var X = V ? "16px" : "20px";
-                var K = y === "left" ? {
-                    marginLeft: "calc(".concat(U, " + ").concat(X, ")")
+                var H = p()(h) ? "".concat(h, "px") : h;
+                var U = D ? "16px" : "20px";
+                var X = y === "left" ? {
+                    marginLeft: "calc(".concat(H, " + ").concat(U, ")")
                 } : undefined;
-                var Q = l === "stack" ? S : d();
-                var Y = y === "left" ? I : x;
-                var Z =  n().createElement(Y, {
-                    style: H,
+                var K = l === "stack" ? S : d();
+                var Q = y === "left" ? I : x;
+                var Y =  n().createElement(Q, {
+                    style: J,
                     $labelPosition: y
                 },  n().createElement(C, {
-                    "data-size": v,
                     "data-test": "label",
                     id: this.labelId,
-                    htmlFor: f || J,
-                    $tooltip: !!_
+                    htmlFor: f || F,
+                    $tooltip: !!g
                 }, m &&  n().createElement(P, {
                     "aria-hidden": "true"
-                }, "*"), u, !V && !c && _ &&  n().createElement("span", null, " "), !c && _ &&  n().createElement(b(), null, _)), !c && _ &&  n().createElement(k, {
+                }, "*"), u, !D && !c && g &&  n().createElement("span", null, " "), !c && g &&  n().createElement(b(), null, g)), !c && g &&  n().createElement(k, {
                     $labelPosition: y,
                     closeWhen: "notOnClick",
-                    content: _,
-                    defaultPlacement: T,
+                    content: g,
+                    defaultPlacement: _,
                     "aria-hidden": "true"
                 }));
                 
@@ -683,21 +682,21 @@
                     "data-test": "control-group",
                     "data-test-required": m,
                     $error: R
-                }, B),  n().createElement(L.Provider, {
+                }, G),  n().createElement(L.Provider, {
                     value: this.getContextValue()
-                }, c ?  n().createElement(b(), null, Z) : Z,  n().createElement(Q, {
+                }, c ?  n().createElement(b(), null, Y) : Y,  n().createElement(K, {
                     "data-test": "controls",
                     flex: l !== "none",
-                    style: K
-                }, F), s &&  n().createElement(w, {
+                    style: X
+                }, z), s &&  n().createElement(w, {
                     "data-test": "help",
                     id: this.helpId,
-                    style: K,
-                    $error: R && !z
-                }, s), z &&  n().createElement(j, {
+                    style: X,
+                    $error: R && !N
+                }, s), N &&  n().createElement(j, {
                     "data-test": "error",
                     id: this.errorId,
-                    style: K,
+                    style: X,
                     $help: !!s
                 }, a)));
             }

package/FormRows.js

@@ -284,7 +284,7 @@
             ref: t,
             onKeyDown: R
         }, h()(f, [ "onKeyDown", "onRequestRemove" ])), u && u(), o, k &&  n().createElement(B, null,  n().createElement(N, {
-            appearance: "pill",
+            appearance: "subtle",
             "aria-label": (0, a._)("Remove Row"),
             "data-test": "remove",
             disabled: m,
@@ -858,7 +858,7 @@
                     onSortEnd: this.handleSortEnd
                 }, o)), l || v &&  n().createElement(I, {
                     disabled: i,
-                    appearance: "pill",
+                    appearance: "subtle",
                     "data-test": "add-row",
                     icon:  n().createElement(b, null),
                     label: r,