@splunk/react-ui 4.43.0 → 4.44.0

package/Slider.js

@@ -108,7 +108,10 @@
     var O = w().div.withConfig({
         displayName: "SliderStyles__StyledInput",
         componentId: "sc-16ooit4-1"
-    })([ "flex:1 0 0;vertical-align:middle;position:relative;cursor:default;height:", ";max-width:100%;" ], m.variables.inputHeight);
+    })([ "flex:1 0 0;vertical-align:middle;position:relative;cursor:default;height:", ";max-width:100%;", "" ], m.variables.inputHeight, (function(e) {
+        var r = e.$disabled;
+        return r && (0, x.css)([ "cursor:not-allowed;" ]);
+    }));
     var _ = "1px";
     var B = w().div.withConfig({
         displayName: "SliderStyles__StyledSliderBar",
@@ -156,7 +159,7 @@
     var j = w().button.withConfig({
         displayName: "SliderStyles__StyledSliderThumb",
         componentId: "sc-16ooit4-3"
-    })([ "", ";display:block;position:absolute;cursor:pointer;width:", "px;height:", "px;border-radius:", ";border-width:0;background-color:", ";margin-left:-8px;top:", ";left:", "%;&:hover:not([disabled]){outline:0;z-index:1;", "}&:focus:not([disabled]),&:active{outline:0;box-shadow:", ";z-index:1;", "}&[disabled]{cursor:not-allowed;background-color:", ";}", "" ], m.mixins.reset("inline"), E, E, (0, 
+    })([ "", ";display:block;position:absolute;cursor:pointer;width:", "px;height:", "px;border-radius:", ";border-width:0;background-color:", ";margin-left:-8px;top:", ";left:", "%;&:hover:not([disabled]){outline:0;z-index:1;", "}&:focus:not([disabled]),&:active:not([disabled]){outline:0;box-shadow:", ";z-index:1;", "}&[disabled]{cursor:not-allowed;background-color:", ";}", "" ], m.mixins.reset("inline"), E, E, (0, 
     m.pick)({
         enterprise: "9px",
         prisma: "10px"
@@ -203,24 +206,24 @@
         enterprise: "18px",
         prisma: "24px"
     }));
-    var q = (0, x.css)([ "flex:0 0 auto;line-height:", ";", "" ], m.variables.inputHeight, (function(e) {
+    var $ = (0, x.css)([ "flex:0 0 auto;line-height:", ";", "" ], m.variables.inputHeight, (function(e) {
         var r = e.$disabled;
         return r && (0, x.css)([ "color:", ";" ], (0, m.pick)({
             enterprise: m.variables.textDisabledColor,
             prisma: m.variables.contentColorDisabled
         }));
     }));
-    var D = w()(T()).withConfig({
+    var q = w()(T()).withConfig({
         displayName: "SliderStyles__StyledMinLabelBox",
         componentId: "sc-16ooit4-5"
-    })([ "", ";margin-right:", ";text-align:right;" ], q, (0, m.pick)({
+    })([ "", ";margin-right:", ";text-align:right;" ], $, (0, m.pick)({
         enterprise: "15px",
         prisma: "16px"
     }));
-    var $ = w()(T()).withConfig({
+    var D = w()(T()).withConfig({
         displayName: "SliderStyles__StyledMaxLabelBox",
         componentId: "sc-16ooit4-6"
-    })([ "", ";margin-left:", ";text-align:left;" ], q, (0, m.pick)({
+    })([ "", ";margin-left:", ";text-align:left;" ], $, (0, m.pick)({
         enterprise: "15px",
         prisma: "16px"
     }));
@@ -631,7 +634,7 @@
             value: function e() {
                 var r = this;
                 var i = this.props, a = i.describedBy, o = i.disabled, l = i.displayValue, s = i.elementRef, u = i.error, c = i.inline, p = i.labelledBy, f = i.max, m = i.maxLabel, b = i.min, y = i.minLabel, x = i.required, w = i.step, k = i.stepMarks, S = i.splunkTheme;
-                var C = this.state, T = C.isFocused, _ = C.selected, q = C.sliderBar;
+                var C = this.state, T = C.isFocused, _ = C.selected, $ = C.sliderBar;
                 var N = this.getValue();
                 var L = ae({
                     value: N,
@@ -639,10 +642,10 @@
                     max: f
                 });
                 var R = k === "focus" && T || k === "always";
-                var F = R && q ? ie({
+                var F = R && $ ? ie({
                     max: f,
                     min: b,
-                    sliderBar: q,
+                    sliderBar: $,
                     step: w,
                     thumbWidth: E(S)
                 }) : undefined;
@@ -662,11 +665,12 @@
                     target: window,
                     eventType: "mousemove",
                     listener: this.handleMouseMove
-                })), y !== null &&  n().createElement(D, {
+                })), y !== null &&  n().createElement(q, {
                     "data-test": "min-label",
                     $disabled: o
                 }, y || b),  n().createElement(O, {
-                    onClick: o ? undefined : this.handleClick
+                    onClick: o ? undefined : this.handleClick,
+                    $disabled: o
                 },  n().createElement(B, {
                     "aria-required": x,
                     "data-test": "bar",
@@ -701,7 +705,7 @@
                     anchor: this.sliderThumb,
                     appearance: "inverted",
                     align: "center"
-                },  n().createElement(P, null, l || N))), m !== null &&  n().createElement($, {
+                },  n().createElement(P, null, l || N))), m !== null &&  n().createElement(D, {
                     "data-test": "max-label",
                     $disabled: o
                 }, m || f));

package/StaticContent.js

@@ -61,7 +61,7 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ y
+        default: () => /* reexport */ v
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
@@ -70,15 +70,15 @@
     const i = require("prop-types");
     var a =  e.n(i);
     // CONCATENATED MODULE: external "styled-components"
-    const o = require("styled-components");
-    var l =  e.n(o);
+    const l = require("styled-components");
+    var o =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
     const s = require("@splunk/react-ui/Box");
     var c =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/themes"
     const p = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/StaticContent/StaticContentStyles.ts
-    var u = l()(c()).withConfig({
+    var u = o()(c()).withConfig({
         displayName: "StaticContentStyles__StyledBox",
         componentId: "sxqyrp-0"
     })([ "", ";position:relative;margin:0;font-weight:", ";word-wrap:break-word;min-height:", ";padding:", ";[data-inline] + &[data-inline]{margin-left:", ";}" ], p.mixins.reset("flex"), p.variables.fontWeightSemiBold, p.variables.inputHeight, (0, 
@@ -109,7 +109,7 @@
     }
     function d(e, r) {
         if (null == e) return {};
-        var n, t, i = m(e, r);
+        var n, t, i = b(e, r);
         if (Object.getOwnPropertySymbols) {
             var a = Object.getOwnPropertySymbols(e);
             for (t = 0; t < a.length; t++) {
@@ -118,7 +118,7 @@
         }
         return i;
     }
-    function m(e, r) {
+    function b(e, r) {
         if (null == e) return {};
         var n = {};
         for (var t in e) {
@@ -129,29 +129,31 @@
         }
         return n;
     }
-    var v = {
+    var m = {
         children: a().node,
         elementRef: a().oneOfType([ a().func, a().object ]),
         inline: a().bool,
-        size: a().oneOf([ "small", "medium" ])
+        size: a().oneOf([ "small", "medium" ]),
+        labelledBy: a().string
     };
     /**
  * This component is intended for use in a control group, either to display a static value or
  * between two controls.
- */    function b(e) {
-        var r = e.children, i = e.inline, a = i === void 0 ? false : i, o = e.size, l = d(e, [ "children", "inline", "size" ]);
+ */    function y(e) {
+        var r = e.children, i = e.inline, a = i === void 0 ? false : i, l = e.labelledBy, o = e.size, s = d(e, [ "children", "inline", "labelledBy", "size" ]);
         // @docs-props-type StaticContentPropsBase
                 (0, n.useEffect)((function() {
             if (false) {}
         }), [ o ]);
         
         return t().createElement(u, f({
+            "aria-labelledby": l,
             "data-test": "static-content",
             inline: a
-        }, l), r);
+        }, s), r);
     }
-    b.propTypes = v;
-    /* harmony default export */    const y = b;
+    y.propTypes = m;
+    /* harmony default export */    const v = y;
     // CONCATENATED MODULE: ./src/StaticContent/index.ts
     module.exports = r;
     /******/})();

package/Table.js

@@ -386,7 +386,7 @@
                     return (0, z.createDOMID)();
                 })) : undefined;
             }));
-        }), []);
+        }), [ w ]);
         w.forEach((function(e, r) {
             if (e) {
                 if (false) {}
@@ -1424,6 +1424,10 @@
                     width: u
                 });
             }
+            if (n === "enter") {
+                e.preventDefault();
+ // SUI-7320: prevent sorting and dropdown opening
+                        }
         }), [ i, c, t, x, s ]);
         var be = (0, n.useCallback)((function(e) {
             if (s === "auto") {
@@ -5041,19 +5045,24 @@
             return l;
         };
         var Je = function e(r) {
-            var o = (t === null || t === void 0 ? void 0 : t.filter(n.isValidElement)) || [];
+            var i = (t === null || t === void 0 ? void 0 : t.filter(n.isValidElement).length) > 0;
+            var a = false;
             n.Children.toArray(r === null || r === void 0 ? void 0 : r.props.children).filter(n.isValidElement).forEach((function(e, t) {
-                var r;
-                var o = e.key || ((r = e.props) === null || r === void 0 ? void 0 : r.dataId) || t + 1;
+                var r, o, i;
+                var l = e.key || ((r = e.props) === null || r === void 0 ? void 0 : r.dataId) || t + 1;
+                if (((o = e.props) === null || o === void 0 ? void 0 : o.actionPrimary) || ((i = e.props) === null || i === void 0 ? void 0 : i.actionsSecondary)) {
+                    a = true;
+                }
                 je.push( (0, n.cloneElement)(e, {
                     index: t,
-                    dataId: o
+                    dataId: l
                 }));
-                Ie.push(o);
+                Ie.push(l);
             }));
+            var l = i || a || !!o;
             
             return (0, n.cloneElement)(r, {
-                actions: o.length > 0,
+                actions: l,
                 movableColumns: !!b,
                 onRequestMoveRow: h,
                 primaryColumnIndex: j,

package/Tree.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "4.43.0",
+  "version": "4.44.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -44,7 +44,7 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@splunk/react-icons": "^4.12.0",
+    "@splunk/react-icons": "^4.13.0",
     "@splunk/themes": "^0.23.0",
     "@splunk/ui-utils": "^1.8.0",
     "commonmark": "^0.30.0",

package/types/src/Date/Date.d.ts

@@ -70,9 +70,10 @@ interface DatePropsBase {
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     /** @private */
     splunkTheme: AnyTheme;
-    /** Setting this value makes the property controlled. An onChange callback is required.
+    /**
+     * Setting this value makes the property controlled. An onChange callback is required.
      *
-     * The value must be in the format 'YYYY-MM-DD'. To simplify creation of these strings,
+     * The value must be "" or in the format 'YYYY-MM-DD'. To simplify creation of these strings,
      * Date provides a Moment.js formatting string:
      * ```
      * moment().format(Date.momentFormat);

package/types/src/Number/Number.d.ts

@@ -6,6 +6,7 @@ import { ClassComponentProps } from '../utils/types';
 type NumberChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>, data: {
     name?: string;
     value?: number;
+    reason: 'input' | 'stepButton';
 }) => void;
 /** @public */
 type NumberBlurHandler = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>, data: {

package/types/src/Slider/Slider.d.ts

@@ -44,7 +44,7 @@ interface SliderPropsBase {
     /** The maximum value of the Slider input. */
     max?: number;
     /**
-     * The label shown to the left of the slider. Defaults to the max value.
+     * The label shown to the right of the slider. Defaults to the max value.
      * Set to null to remove.
      */
     maxLabel?: React.ReactNode;

package/types/src/StaticContent/StaticContent.d.ts

@@ -15,19 +15,21 @@ interface StaticContentPropsBase {
      * The small size will align with small Text, Select and other controls.
      * @themeNotes Supported by the `enterprise` theme only. */
     size?: 'small' | 'medium';
+    labelledBy?: string;
 }
 type StaticContentProps = ComponentProps<StaticContentPropsBase, 'div'>;
 /**
  * This component is intended for use in a control group, either to display a static value or
  * between two controls.
  */
-declare function StaticContent({ children, inline, size, ...otherProps }: StaticContentProps): JSX.Element;
+declare function StaticContent({ children, inline, labelledBy, size, ...otherProps }: StaticContentProps): JSX.Element;
 declare namespace StaticContent {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         elementRef: PropTypes.Requireable<object>;
         inline: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<string>;
+        labelledBy: PropTypes.Requireable<string>;
     };
 }
 export default StaticContent;