@splunk/react-ui 4.21.1 → 4.22.0

package/Slider.js

@@ -68,10 +68,10 @@
     var n =  e.n(r);
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
-    var o =  e.n(i);
+    var a =  e.n(i);
     // CONCATENATED MODULE: external "decimal.js-light"
-    const a = require("decimal.js-light");
-    var s =  e.n(a);
+    const o = require("decimal.js-light");
+    var s =  e.n(o);
     // CONCATENATED MODULE: external "lodash/has"
     const l = require("lodash/has");
     var u =  e.n(l);
@@ -105,44 +105,44 @@
         displayName: "SliderStyles__StyledBox",
         componentId: "sc-16ooit4-0"
     })([ "", ";flex:1 1 auto;&[data-inline]{width:300px;}" ], h.mixins.reset("block"));
-    var E = x().div.withConfig({
+    var V = x().div.withConfig({
         displayName: "SliderStyles__StyledInput",
         componentId: "sc-16ooit4-1"
     })([ "flex:1 0 0;vertical-align:middle;position:relative;cursor:default;height:", ";max-width:100%;" ], h.variables.inputHeight);
-    var B = "1px";
-    var $ = function e(t) {
+    var E = "1px";
+    var O = function e(t) {
         var r = t.$error;
         return (0, h.pick)({
             enterprise: h.variables.gray45,
             prisma: r ? h.variables.accentColorNegative : h.variables.contentColorActive
         });
     };
-    var V = (0, h.pick)({
+    var B = (0, h.pick)({
         enterprise: {
             dark: h.variables.gray20,
             light: h.variables.gray96
         },
         prisma: h.variables.neutral100
     });
-    var _ = (0, h.pick)({
+    var $ = (0, h.pick)({
         enterprise: h.variables.gray80,
         prisma: h.variables.interactiveColorBorder
     });
-    var O = function e(t) {
+    var _ = function e(t) {
         var r = t.$error, n = t.$position, i = t.$stepMarksWidth;
-        /* stylelint-disable indentation */        return i !== undefined ? (0, k.css)([ "background-image:linear-gradient( to right,", ",", " ", ",transparent ", ",transparent 100% ),repeating-linear-gradient( to right,", ",", " ", ",transparent ", ",transparent ", "% ),linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], $({
+        /* stylelint-disable indentation */        return i !== undefined ? (0, k.css)([ "background-image:linear-gradient( to right,", ",", " ", ",transparent ", ",transparent 100% ),repeating-linear-gradient( to right,", ",", " ", ",transparent ", ",transparent ", "% ),linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], O({
             $error: r
-        }), $({
+        }), O({
             $error: r
-        }), B, B, V, V, B, B, i, $({
+        }), E, E, B, B, E, E, i, O({
             $error: r
-        }), $({
+        }), O({
             $error: r
-        }), n, _, n, _) : (0, k.css)([ "background-image:linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], $({
+        }), n, $, n, $) : (0, k.css)([ "background-image:linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], O({
             $error: r
-        }), $({
+        }), O({
             $error: r
-        }), n, _, n, _);
+        }), n, $, n, $);
         /* stylelint-enable indentation */    };
     var P = x().div.withConfig({
         displayName: "SliderStyles__StyledSliderBar",
@@ -159,7 +159,7 @@
         return t ? (0, k.css)([ "background-color:", ";" ], (0, h.pick)({
             enterprise: h.variables.gray92,
             prisma: h.variables.contentColorDisabled
-        })) : O({
+        })) : _({
             $error: r,
             $position: n,
             $stepMarksWidth: i
@@ -307,8 +307,8 @@
         return function r() {
             var n = Q(e), i;
             if (t) {
-                var o = Q(this).constructor;
-                i = Reflect.construct(n, arguments, o);
+                var a = Q(this).constructor;
+                i = Reflect.construct(n, arguments, a);
             } else {
                 i = n.apply(this, arguments);
             }
@@ -358,27 +358,27 @@
         return e;
     }
     var Z = {
-        defaultValue: o().number,
-        describedBy: o().string,
-        disabled: o().bool,
-        displayValue: o().string,
-        elementRef: o().oneOfType([ o().func, o().object ]),
-        error: o().bool,
-        inline: o().bool,
-        labelledBy: o().string,
-        max: o().number,
-        maxLabel: o().node,
-        min: o().number,
-        minLabel: o().node,
-        name: o().string,
-        onChange: o().func,
+        defaultValue: a().number,
+        describedBy: a().string,
+        disabled: a().bool,
+        displayValue: a().string,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        error: a().bool,
+        inline: a().bool,
+        labelledBy: a().string,
+        max: a().number,
+        maxLabel: a().node,
+        min: a().number,
+        minLabel: a().node,
+        name: a().string,
+        onChange: a().func,
         /** @private. */
-        required: o().bool,
-        step: o().number,
-        stepMarks: o().oneOf([ "focus", "always", "never" ]),
+        required: a().bool,
+        step: a().number,
+        stepMarks: a().oneOf([ "focus", "always", "never" ]),
         /** @private */
-        splunkTheme: o().object,
-        value: o().number
+        splunkTheme: a().object,
+        value: a().number
     };
     var ee = {
         disabled: false,
@@ -438,20 +438,27 @@
                     showTooltip: true
                 });
             }));
+            Y(G(n), "getValueOffset", (function(e, t) {
+                var r = n.props, i = r.min, a = r.step;
+                var o = new (s())(e).minus(i).modulo(a).toNumber();
+                if (o > 0) {
+                    return t === "forward" ? a - o : o;
+                }
+                return a;
+            }));
             Y(G(n), "handleKeyDown", (function(e) {
                 var t = n.getValue();
                 if (t !== undefined) {
-                    var r = n.props.step;
                     if ((0, v.keycode)(e.nativeEvent) === "right") {
-                        t = n.checkValueBounds(t + r);
+                        t = n.checkValueBounds(t + n.getValueOffset(t, "forward"));
                     } else if ((0, v.keycode)(e.nativeEvent) === "left") {
-                        t = n.checkValueBounds(t - r);
+                        t = n.checkValueBounds(t - n.getValueOffset(t, "backward"));
                     } else if ((0, v.keycode)(e.nativeEvent) === "up") {
                         e.preventDefault();
-                        t = n.checkValueBounds(t + r);
+                        t = n.checkValueBounds(t + n.getValueOffset(t, "forward"));
                     } else if ((0, v.keycode)(e.nativeEvent) === "down") {
                         e.preventDefault();
-                        t = n.checkValueBounds(t - r);
+                        t = n.checkValueBounds(t - n.getValueOffset(t, "backward"));
                     } else {
                         return;
                     }
@@ -516,8 +523,12 @@
                 return e / 100 * t + n.props.min;
             }));
             Y(G(n), "roundValueToStep", (function(e) {
-                var t = n.props.step;
-                return new (s())(e).div(t).todp(0).mul(t).toNumber();
+                var t = n.props, r = t.step, i = t.min, a = t.max;
+ // Handles if the max is in between steps but val is larger than the halfway point between last step mark and max
+                                if (e > a - (a - i) % r / 2) {
+                    return a;
+                }
+                return new (s())(e).minus(i).div(r).todp(0).mul(r).add(i).toNumber();
             }));
             Y(G(n), "valueToPosition", (function(e) {
                 if (e === undefined) {
@@ -555,12 +566,12 @@
             value: function e(t, r) {
                 var n = r.value;
                 var i = this.getValue();
-                var o = this.props.name;
+                var a = this.props.name;
                 if (i !== n) {
-                    var a, s;
-                    (a = (s = this.props).onChange) === null || a === void 0 ? void 0 : a.call(s, t, {
+                    var o, s;
+                    (o = (s = this.props).onChange) === null || o === void 0 ? void 0 : o.call(s, t, {
                         value: n,
-                        name: o
+                        name: a
                     });
                     if (!this.isControlled()) {
                         this.setState({
@@ -588,14 +599,14 @@
             value: function e() {
                 // don't render stepMarks if they are too small i.e. stepWidth is less than SliderThumb divided by 2
                 // in that case, undefined is returned
-                var t = this.props, r = t.max, n = t.min, i = t.step, o = t.splunkTheme;
-                var a = this.state.sliderBar;
-                if (a === null) {
+                var t = this.props, r = t.max, n = t.min, i = t.step, a = t.splunkTheme;
+                var o = this.state.sliderBar;
+                if (o === null) {
                     return undefined;
                 }
                 var s = Math.round((r - n) / i);
-                var l = a.getBoundingClientRect();
-                var u = j(o);
+                var l = o.getBoundingClientRect();
+                var u = j(a);
                 return l.width / s > u / 2 ? this.stepWidthInPercentage() : undefined;
             }
         }, {
@@ -607,21 +618,21 @@
             key: "render",
             value: function e() {
                 var t = this;
-                var i = this.props, o = i.describedBy, a = i.disabled, s = i.displayValue, l = i.elementRef, u = i.error, c = i.inline, d = i.labelledBy, v = i.max, h = i.maxLabel, m = i.min, y = i.minLabel, k = i.required, x = i.stepMarks;
+                var i = this.props, a = i.describedBy, o = i.disabled, s = i.displayValue, l = i.elementRef, u = i.error, c = i.inline, d = i.labelledBy, v = i.max, h = i.maxLabel, m = i.min, y = i.minLabel, k = i.required, x = i.stepMarks;
                 var w = this.state, S = w.isFocused, T = w.selected, C = w.sliderBar;
-                var B = this.getValue();
-                var $ = this.valueToPosition(B);
-                var V = x === "focus" && S || x === "always";
-                var _ = V && C ? this.stepMarksWidth() : undefined;
-                var O = f()(this.props, p()(r.propTypes));
+                var E = this.getValue();
+                var O = this.valueToPosition(E);
+                var B = x === "focus" && S || x === "always";
+                var $ = B && C ? this.stepMarksWidth() : undefined;
+                var _ = f()(this.props, p()(r.propTypes));
                 /* eslint-disable jsx-a11y/no-static-element-interactions */                
                 return n().createElement(M, L({
                     "data-test": "slider",
-                    "data-test-value": B,
+                    "data-test-value": E,
                     elementRef: l,
                     flex: true,
                     inline: c
-                }, O), T &&  n().createElement(n().Fragment, null,  n().createElement(b(), {
+                }, _), T &&  n().createElement(n().Fragment, null,  n().createElement(b(), {
                     target: window,
                     eventType: "mouseup",
                     listener: this.handleMouseUp
@@ -631,46 +642,46 @@
                     listener: this.handleMouseMove
                 })), y !== null &&  n().createElement(R, {
                     "data-test": "min-label",
-                    $disabled: a
-                }, y || m),  n().createElement(E, {
-                    onClick: a ? undefined : this.handleClick
+                    $disabled: o
+                }, y || m),  n().createElement(V, {
+                    onClick: o ? undefined : this.handleClick
                 },  n().createElement(P, {
                     "aria-required": k,
                     "data-test": "bar",
-                    $disabled: a,
+                    $disabled: o,
                     ref: this.handleMount,
                     $error: u,
-                    $position: $,
-                    $stepMarksWidth: _
+                    $position: O,
+                    $stepMarksWidth: $
                 }),  n().createElement(q, {
-                    "aria-describedby": o,
+                    "aria-describedby": a,
                     "aria-labelledby": d,
                     "aria-invalid": u,
                     "aria-valuemax": v,
                     "aria-valuemin": m,
-                    "aria-valuenow": B,
+                    "aria-valuenow": E,
                     "data-test": "handle",
                     onBlur: this.handleBlur,
                     onMouseEnter: this.handleMouseEnter,
                     onMouseLeave: this.handleMouseLeave,
-                    onKeyDown: a ? undefined : this.handleKeyDown,
-                    onMouseDown: a ? undefined : this.handleMouseDown,
+                    onKeyDown: o ? undefined : this.handleKeyDown,
+                    onMouseDown: o ? undefined : this.handleMouseDown,
                     onFocus: this.handleFocus,
                     ref: function e(r) {
                         t.sliderThumb = r;
                     },
                     role: "slider",
-                    disabled: a,
+                    disabled: o,
                     $error: u,
-                    $position: $
+                    $position: O
                 }),  n().createElement(g(), {
                     open: this.state.showTooltip,
                     anchor: this.sliderThumb,
                     appearance: "inverted",
                     align: "center"
-                },  n().createElement(D, null, s || B))), h !== null &&  n().createElement(F, {
+                },  n().createElement(D, null, s || E))), h !== null &&  n().createElement(F, {
                     "data-test": "max-label",
-                    $disabled: a
+                    $disabled: o
                 }, h || v));
                 /* eslint-enable jsx-a11y/no-static-element-interactions */            }
         } ]);