@splunk/react-ui 4.43.0 → 4.44.1

package/CHANGELOG.md

@@ -1,6 +1,27 @@
 Change Log
 ============
 
+4.44.1 - April 10, 2025
+----------
+Bug Fixes:
+* `Combobox` and `Multiselect` no longer call `onOpen` after selecting a value (SUI-7624).
+
+4.44.0 - April 1, 2025
+----------
+New Features:
+* `Number`'s `onChange` handler now includes a `reason` property in callback data (SUI-7401).
+* `Date` does not render 'Invalid value' for empty strings when controlled (SUI-5993).
+* `Date` does not revert value for empty strings when uncontrolled (SUI-5993).
+
+Bug Fixes:
+* `StaticContent` supports new prop `labelledBy` (SUI-5326).
+* `Clickable` now displays the `not-allowed` cursor when disabled (SUI-7297).
+* `Table` now renders dynamically added expansionRows (SUI-7403).
+* `ButtonGroup`'s `role` has changed from `menubar` to `group`. Child `Button`'s `role`s have changed from `menuitem` to `button`. See the migration guide for details (SUI-6551).
+* `Table`'s resize handler no longer triggers sorting or opening dropdown when `enter` key is pressed (SUI-7320).
+* `Slider`'s disabled state now prevents the appearance of thumb focus when active and displays `not-allowed` cursor on the entire input (SUI-7498).
+* `Table`'s stripe rows now extend all the way across the table for rows without actions (SUI-7232).
+
 4.43.0 - March 4, 2025
 ----------
 New Features:

package/Clickable.js

@@ -92,7 +92,7 @@
     var v = d().a.withConfig({
         displayName: "ClickableStyles__StyledA",
         componentId: "sc-7al1vw-0"
-    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], b.mixins.reset("inline"), b.variables.contentColorDisabled);
+    })([ "", " cursor:pointer;&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";}&::-moz-focus-inner{border:0;padding:0;}" ], b.mixins.reset("inline"), b.variables.contentColorDisabled);
     // CONCATENATED MODULE: ./src/Clickable/NavigationProvider.tsx
     /** @public */
     var y = {

package/ComboBox.js

@@ -654,7 +654,7 @@
             }));
             pe(ue(i), "handleInputClick", (function(e) {
                 e.stopPropagation();
-                if (!i.state.open && !i.props.disabled) {
+                if (!i.props.disabled) {
                     i.open();
                 }
             }));
@@ -807,13 +807,15 @@
             key: "open",
             value: function e() {
                 var t = this;
-                this.setState({
-                    open: true,
-                    activeIndex: 0
-                }, (function() {
-                    var e, n;
-                    (e = (n = t.props).onOpen) === null || e === void 0 ? void 0 : e.call(n);
-                }));
+                if (!this.state.open) {
+                    this.setState({
+                        open: true,
+                        activeIndex: 0
+                    }, (function() {
+                        var e, n;
+                        (e = (n = t.props).onOpen) === null || e === void 0 ? void 0 : e.call(n);
+                    }));
+                }
             }
         }, {
             key: "close",

package/Date.js

@@ -94,12 +94,12 @@
     const m = require("@splunk/themes");
     // CONCATENATED MODULE: external "styled-components"
     const g = require("styled-components");
-    var O =  e.n(g);
+    var C =  e.n(g);
     // CONCATENATED MODULE: external "@splunk/react-ui/Text"
-    const C = require("@splunk/react-ui/Text");
-    var x =  e.n(C);
+    const O = require("@splunk/react-ui/Text");
+    var x =  e.n(O);
     // CONCATENATED MODULE: ./src/Date/DateStyles.ts
-    var k = O()(x()).withConfig({
+    var k = C()(x()).withConfig({
         displayName: "DateStyles__StyledText",
         componentId: "kacgdc-0"
     })([ "cursor:", ";&[data-inline]{flex-basis:", ";width:", ";}" ], (0, m.pickVariant)("$disabled", {
@@ -115,7 +115,7 @@
         },
         prisma: "150px"
     }));
-    var w = O().div.withConfig({
+    var w = C().div.withConfig({
         displayName: "DateStyles__IconContainer",
         componentId: "kacgdc-1"
     })([ "align-items:center;color:", ";display:flex;padding:", ";pointer-events:none;" ], (0, 
@@ -322,6 +322,9 @@
  * @type string
  */    var N = "YYYY-MM-DD";
     var Z = function e(t) {
+        if (t === "") {
+            return;
+        }
         if (!p()(t, N).isValid()) {
             // eslint-disable-next-line no-console
             console.error('Invalid date string value "'.concat(t, '" provided to Moment.'));
@@ -340,10 +343,15 @@
             B(F(r), "calendarRef",  a().createRef());
             B(F(r), "openWithFocus", false);
             B(F(r), "applyTextChange", (function(e) {
-                var t = p()(r.state.tempTextInputDate, "l", r.props.locale);
-                if (t.isValid()) {
+                var t = r.state.tempTextInputDate;
+                var n = p()(t, "l", r.props.locale);
+                if (t === "") {
+                    r.handleDateChange(e, {
+                        value: ""
+                    }, "textInput");
+                } else if (n.isValid()) {
                     r.handleDateChange(e, {
-                        value: t.format(N)
+                        value: n.format(N)
                     }, "textInput");
                 } else {
                     r.setState({
@@ -445,7 +453,11 @@
                 }
             }));
             r.controlledExternally = i()(e, "value");
-            var o = r.isControlled() ? e.value : e.defaultValue || p()().locale(e.locale).format(N);
+            /**
+     * TODO(SUI-7412): defaultValue will be set to current if date gets empty string.
+     * Changing this would be a breaking change but this should be changed in epic/five
+     * to have consistent behavior for empty-string between controlled and uncontrolled
+     */            var o = r.isControlled() ? e.value : e.defaultValue || p()().locale(e.locale).format(N);
             r.state = {
                 anchor: null,
                 calendarOpen: false,
@@ -479,7 +491,15 @@
         }, {
             key: "getTextInputValue",
             value: function e() {
-                return this.state.tempTextInputDate === undefined ? p()(this.getValue(), N, this.props.locale).format("l") : this.state.tempTextInputDate;
+                var t = this.state.tempTextInputDate;
+                if (t === undefined) {
+                    var n = this.getValue();
+                    if (n === undefined || n === "") {
+                        return "";
+                    }
+                    return p()(this.getValue(), N, this.props.locale).format("l");
+                }
+                return t;
             }
         }, {
             key: "isControlled",
@@ -521,7 +541,7 @@
                         highlightToday: r,
                         locale: l,
                         onChange: this.handleDateChange,
-                        value: c
+                        value: c === "" ? undefined : c
                     }));
                 }
                 

package/DualListbox.js

@@ -281,7 +281,7 @@
             })),
             prisma: (0, _.css)([ "color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";box-shadow:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";}}" ], N.variables.contentColorActive, N.variables.interactiveColorOverlayHover, N.variables.interactiveColorBorderHover, N.variables.hoverShadow, N.variables.interactiveColorOverlayActive, N.variables.interactiveColorOverlayActive)
         }),
-        true: (0, _.css)([ "border-color:", ";color:", ";cursor:not-allowed;" ], (0, N.pick)({
+        true: (0, _.css)([ "border-color:", ";color:", ";" ], (0, N.pick)({
             prisma: N.variables.interactiveColorBorderDisabled
         }), (0, N.pick)({
             enterprise: N.variables.textDisabledColor,

package/MIGRATION.mdx

@@ -5,6 +5,27 @@ import Table from '@splunk/react-ui/Table';
 
 This document lists migration guidance for new features and breaking changes.
 
+## 4.44.0 
+
+### `ButtonGroup` role changed to `group`
+
+### Change
+
+`ButtonGroup`'s `role` has changed from `menubar` to `group`.
+Child `Button`'s `role`s have changed from `menuitem` to `button`.
+
+#### Context
+
+`ButtonGroup` did not implement the correct keyboard behavior for a menu bar.
+This created an unexpected user experience for keyboard and screen reader users.
+
+#### Migration steps
+
+If `role="group"` is not desired: 
+* consider using `RadioBar` which supports `role="menubar"`
+* implement either the [Menubar](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) or [Toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) pattern according to WCAG guidelines using `ButtonGroup`
+* contact the Design System team to make a feature request based on your use case.
+
 ## 4.40.0
 
 ### Deprecated `Select`'s `appearance="primary"` value
@@ -228,7 +249,7 @@ For Enterprise themes:
 
 For Prisma themes:
 * the `"flat"` appearance can be replaced by `"secondary"` or `"subtle"` depending on the context in which it appears.
-* the `"toggle"` appearance can be replaced with `"default"`.
+* the `"toggle"` appearance can be replaced with `"secondary"`.
 
 ### Deprecated `CollapsiblePanel`'s `titleWithActions` prop
 

package/Menu.js

@@ -368,7 +368,7 @@
     var ce = d()(te()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-4"
-    })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}", " ", "}&:focus{outline:0;box-shadow:", ";", "}&[disabled],&[aria-disabled='true']{color:", ";cursor:not-allowed;", ",", "{color:inherit;}", "{cursor:not-allowed;color:", ";}", "}", "" ], (0, 
+    })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}", " ", "}&:focus{outline:0;box-shadow:", ";", "}&[disabled],&[aria-disabled='true']{color:", ";", ",", "{color:inherit;}", "{color:", ";}", "}", "" ], (0, 
     m.pick)({
         prisma: m.variables.contentColorActive,
         enterprise: {

package/Multiselect.js

@@ -2560,16 +2560,18 @@
                                 }));
                 tn(Yr(a), "open", (function(e) {
                     var t = e.resetFilterKeyword;
-                    a.setState((function(e) {
-                        return {
-                            filterKeyword: t ? "" : e.filterKeyword,
-                            hasFocus: true,
-                            open: true
-                        };
-                    }), (function() {
-                        var e, t;
-                        (e = (t = a.props).onOpen) === null || e === void 0 ? void 0 : e.call(t);
-                    }));
+                    if (!a.state.open) {
+                        a.setState((function(e) {
+                            return {
+                                filterKeyword: t ? "" : e.filterKeyword,
+                                hasFocus: true,
+                                open: true
+                            };
+                        }), (function() {
+                            var e, t;
+                            (e = (t = a.props).onOpen) === null || e === void 0 ? void 0 : e.call(t);
+                        }));
+                    }
                 }));
                 tn(Yr(a), "handleInputFocus", (function(e) {
                     if (a.state.filterKeyword !== "") {