@splunk/react-ui 4.43.0 → 5.0.0-beta.2

package/Slider.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = r => {
-            /******/ var t = r && r.__esModule ? 
+            /******/ var a = r && r.__esModule ? 
             /******/ () => r["default"]
             /******/ : () => r
             /******/;
-            e.d(t, {
-                a: t
+            e.d(a, {
+                a
             });
-            /******/            return t;
+            /******/            return a;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, t) => {
-            /******/ for (var n in t) {
-                /******/ if (e.o(t, n) && !e.o(r, n)) {
+        /******/ e.d = (r, a) => {
+            /******/ for (var n in a) {
+                /******/ if (e.o(a, n) && !e.o(r, n)) {
                     /******/ Object.defineProperty(r, n, {
                         enumerable: true,
-                        get: t[n]
+                        get: a[n]
                     });
                     /******/                }
                 /******/            }
@@ -61,659 +61,557 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ se
+        default: () => /* reexport */ Q
     });
     // CONCATENATED MODULE: external "react"
-    const t = require("react");
-    var n =  e.n(t);
+    const a = require("react");
+    var n =  e.n(a);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var a =  e.n(i);
+    const t = require("prop-types");
+    var i =  e.n(t);
     // CONCATENATED MODULE: external "decimal.js-light"
-    const o = require("decimal.js-light");
-    var l =  e.n(o);
-    // CONCATENATED MODULE: external "lodash/has"
-    const s = require("lodash/has");
-    var u =  e.n(s);
-    // CONCATENATED MODULE: external "lodash/keys"
-    const c = require("lodash/keys");
-    var d =  e.n(c);
-    // CONCATENATED MODULE: external "lodash/omit"
-    const p = require("lodash/omit");
-    var v =  e.n(p);
+    const l = require("decimal.js-light");
+    var o =  e.n(l);
     // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-    const f = require("@splunk/ui-utils/keyboard");
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const m = require("@splunk/themes");
+    const s = require("@splunk/ui-utils/keyboard");
     // CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
-    const b = require("@splunk/react-ui/EventListener");
-    var h =  e.n(b);
+    const u = require("@splunk/react-ui/EventListener");
+    var c =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const y = require("@splunk/react-ui/Popover");
-    var g =  e.n(y);
+    const d = require("@splunk/react-ui/Popover");
+    var v =  e.n(d);
+    // CONCATENATED MODULE: external "@splunk/react-ui/useControlled"
+    const p = require("@splunk/react-ui/useControlled");
+    var f =  e.n(p);
     // CONCATENATED MODULE: external "styled-components"
-    const x = require("styled-components");
-    var w =  e.n(x);
+    const m = require("styled-components");
+    var b =  e.n(m);
     // CONCATENATED MODULE: external "tinycolor2"
-    const k = require("tinycolor2");
-    var S =  e.n(k);
+    const y = require("tinycolor2");
+    var g =  e.n(y);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const C = require("@splunk/react-ui/Box");
-    var T =  e.n(C);
+    const h = require("@splunk/react-ui/Box");
+    var x =  e.n(h);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const k = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Slider/SliderStyles.ts
-    var M = w()(T()).withConfig({
+    var w = 20;
+    var S = b()(x()).withConfig({
         displayName: "SliderStyles__StyledBox",
         componentId: "sc-16ooit4-0"
-    })([ "", ";flex:1 1 auto;&[data-inline]{width:300px;}" ], m.mixins.reset("block"));
-    var O = w().div.withConfig({
+    })([ "", ";flex:1 1 auto;&[data-inline]{width:300px;}" ], k.mixins.reset("block"));
+    var C = b().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);
-    var _ = "1px";
-    var B = w().div.withConfig({
+    })([ "display:flex;align-items:center;flex:1 0 0;position:relative;cursor:default;height:", ";max-width:100%;" ], k.variables.inputHeight);
+    var O = "1px";
+    var E = b().div.withConfig({
         displayName: "SliderStyles__StyledSliderBar",
         componentId: "sc-16ooit4-2"
-    })([ "position:absolute;top:", ";left:0;height:", ";width:100%;border-radius:2.5px;", "" ], (0, 
-    m.pick)({
-        enterprise: "12px",
-        prisma: "18px"
-    }), (0, m.pick)({
-        enterprise: "5px",
-        prisma: "4px"
-    }), (function(e) {
-        var r = e.$disabled, t = e.$error, n = e.$position, i = e.$stepMarksWidth;
+    })([ "left:0;height:4px;width:100%;border-radius:2.5px;", "" ], (function(e) {
+        var r = e.$disabled, a = e.$error, n = e.$position, t = e.$stepMarksWidth;
         if (r) {
-            return (0, x.css)([ "background-color:", ";" ], (0, m.pick)({
-                enterprise: m.variables.gray92,
-                prisma: m.variables.contentColorDisabled
+            return (0, m.css)([ "background-color:", ";" ], (0, k.pick)({
+                enterprise: k.variables.gray92,
+                prisma: k.variables.contentColorDisabled
             }));
         }
-        var a = t ? m.variables.accentColorNegative : (0, m.pick)({
-            prisma: m.variables.contentColorActive,
+        var i = a ? k.variables.interactiveColorAccentError : (0, k.pick)({
+            prisma: k.variables.contentColorActive,
             enterprise: {
-                light: m.variables.gray22,
-                dark: m.variables.white
+                light: k.variables.gray22,
+                dark: k.variables.white
             }
         });
-        var o = (0, m.pick)({
+        var l = (0, k.pick)({
             enterprise: {
-                dark: m.variables.gray20,
-                light: m.variables.gray96
+                dark: k.variables.gray20,
+                light: k.variables.gray96
             },
-            prisma: m.variables.neutral100
+            prisma: k.variables.neutral100
         });
-        var l = (0, m.pick)({
-            enterprise: m.variables.gray60,
-            prisma: m.variables.interactiveColorBorder
+        var o = (0, k.pick)({
+            enterprise: k.variables.gray60,
+            prisma: k.variables.interactiveColorBorder
         });
-        return i !== undefined ? (0, x.css)([ "background-image:linear-gradient( to right,", ",", " ", ",transparent ", ",transparent 100% ),repeating-linear-gradient( to right,", ",", " ", ",transparent ", ",transparent ", "% ),linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], a, a, _, _, o, o, _, _, i, a, a, n, l, n, l) : (0, 
-        x.css)([ "background-image:linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], a, a, n, l, n, l);
+        return t !== undefined ? (0, m.css)([ "background-image:linear-gradient( to right,", ",", " ", ",transparent ", ",transparent 100% ),repeating-linear-gradient( to right,", ",", " ", ",transparent ", ",transparent ", "% ),linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], i, i, O, O, l, l, O, O, t, i, i, n, o, n, o) : (0, 
+        m.css)([ "background-image:linear-gradient( to right,", ",", " ", "%,", " ", "%,", " );" ], i, i, n, o, n, o);
     }));
-    var E = (0, m.pick)({
-        enterprise: 18,
-        prisma: 20
-    });
-    var j = w().button.withConfig({
+    var _ = b().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, 
-    m.pick)({
-        enterprise: "9px",
-        prisma: "10px"
-    }), (0, m.pick)({
+    })([ "", ";display:block;position:absolute;cursor:pointer;width:", "px;height:", "px;border-radius:10px;border-width:0;background-color:", ";margin-left:-8px;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:", ";}", "" ], k.mixins.reset("inline"), w, w, (0, 
+    k.pick)({
         enterprise: {
-            light: m.variables.gray22,
-            dark: m.variables.white
+            light: k.variables.gray22,
+            dark: k.variables.white
         },
-        prisma: m.variables.contentColorActive
-    }), (0, m.pick)({
-        enterprise: "6px",
-        prisma: "10px"
+        prisma: k.variables.contentColorActive
     }), (function(e) {
         var r = e.$position;
         return r;
-    }), (0, m.pick)({
-        enterprise: (0, x.css)([ "box-shadow:", ";" ], m.variables.focusShadow)
-    }), m.variables.focusShadow, (0, m.pick)({
-        prisma: (0, x.css)([ "background-color:", ";" ], m.mixins.overlayColors(m.variables.contentColorActive, m.variables.interactiveColorOverlayActive)),
-        enterprise: (0, x.css)([ "border-color:", ";" ], (function(e) {
-            return S()(m.variables.focusColor(e)).setAlpha(.8).toRgbString();
+    }), (0, k.pick)({
+        enterprise: (0, m.css)([ "box-shadow:", ";" ], k.variables.focusShadow)
+    }), k.variables.focusShadow, (0, k.pick)({
+        prisma: (0, m.css)([ "background-color:", ";" ], k.mixins.overlayColors(k.variables.contentColorActive, k.variables.interactiveColorOverlayActive)),
+        enterprise: (0, m.css)([ "border-color:", ";" ], (function(e) {
+            return g()(k.variables.focusColor(e)).setAlpha(.8).toRgbString();
         }))
-    }), (0, m.pick)({
-        enterprise: m.variables.gray92,
-        prisma: m.variables.neutral400
+    }), (0, k.pick)({
+        enterprise: k.variables.gray92,
+        prisma: k.variables.neutral400
     }), (function(e) {
         var r = e.$error;
-        return r && (0, x.css)([ "background-color:", ";&:focus:not([disabled]),&:active{background-color:", ";}" ], m.variables.accentColorNegative, (0, 
-        m.pick)({
-            enterprise: m.variables.errorColorD40,
-            prisma: m.mixins.overlayColors(m.variables.accentColorNegative, m.variables.interactiveColorOverlayActive)
+        return r && (0, m.css)([ "background-color:", ";&:focus:not([disabled]),&:active{background-color:", ";}" ], k.variables.interactiveColorAccentError, (0, 
+        k.pick)({
+            enterprise: k.variables.errorColorD40,
+            prisma: k.mixins.overlayColors(k.variables.interactiveColorAccentError, k.variables.interactiveColorOverlayActive)
         }));
     }));
-    var P = w().div.withConfig({
+    var B = b().div.withConfig({
         displayName: "SliderStyles__StyledPopoverContent",
         componentId: "sc-16ooit4-4"
-    })([ "padding:", ";font-size:", ";line-height:", ";" ], (0, m.pick)({
-        enterprise: m.variables.spacingSmall,
+    })([ "padding:", ";font-size:", ";line-height:", ";" ], (0, k.pick)({
+        enterprise: k.variables.spacingSmall,
         prisma: "12px 16px"
-    }), (0, m.pick)({
-        enterprise: m.variables.fontSizeSmall,
+    }), (0, k.pick)({
+        enterprise: k.variables.fontSizeSmall,
         prisma: "14px"
-    }), (0, m.pick)({
+    }), (0, k.pick)({
         enterprise: "18px",
         prisma: "24px"
     }));
-    var q = (0, x.css)([ "flex:0 0 auto;line-height:", ";", "" ], m.variables.inputHeight, (function(e) {
+    var M = (0, m.css)([ "flex:0 0 auto;line-height:", ";", "" ], k.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
+        return r && (0, m.css)([ "color:", ";" ], (0, k.pick)({
+            enterprise: k.variables.textDisabledColor,
+            prisma: k.variables.contentColorDisabled
         }));
     }));
-    var D = w()(T()).withConfig({
+    var $ = b()(x()).withConfig({
         displayName: "SliderStyles__StyledMinLabelBox",
         componentId: "sc-16ooit4-5"
-    })([ "", ";margin-right:", ";text-align:right;" ], q, (0, m.pick)({
+    })([ "", ";margin-right:", ";text-align:right;" ], M, (0, k.pick)({
         enterprise: "15px",
         prisma: "16px"
     }));
-    var $ = w()(T()).withConfig({
+    var j = b()(x()).withConfig({
         displayName: "SliderStyles__StyledMaxLabelBox",
         componentId: "sc-16ooit4-6"
-    })([ "", ";margin-left:", ";text-align:left;" ], q, (0, m.pick)({
+    })([ "", ";margin-left:", ";text-align:left;" ], M, (0, k.pick)({
         enterprise: "15px",
         prisma: "16px"
     }));
-    // CONCATENATED MODULE: ./src/Slider/Slider.tsx
-    function N(e) {
-        "@babel/helpers - typeof";
-        return N = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
-            return typeof e;
-        } : function(e) {
-            return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, N(e);
+    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+    /**
+ * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
+ *
+ * @param ref - The React callback or object ref. Can be `null` or `undefined`.
+ * @param current - The new value of the ref.
+ */
+    function q(e, r) {
+        if (e) {
+            if (typeof e === "function") {
+                e(r);
+            } else {
+                // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+                // the intention here is to signal "we will take care of setting 'current', not you".
+                e.current = r;
+ // eslint-disable-line no-param-reassign
+                        }
+        }
     }
-    function V() {
-        return V = Object.assign ? Object.assign.bind() : function(e) {
+    // CONCATENATED MODULE: ./src/Slider/Slider.tsx
+    function A() {
+        return A = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
-                var t = arguments[r];
-                for (var n in t) {
-                    ({}).hasOwnProperty.call(t, n) && (e[n] = t[n]);
+                var a = arguments[r];
+                for (var n in a) {
+                    ({}).hasOwnProperty.call(a, n) && (e[n] = a[n]);
                 }
             }
             return e;
-        }, V.apply(null, arguments);
-    }
-    function L(e, r) {
-        if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function");
-    }
-    function R(e, r) {
-        for (var t = 0; t < r.length; t++) {
-            var n = r[t];
-            n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
-            Object.defineProperty(e, G(n.key), n);
-        }
-    }
-    function F(e, r, t) {
-        return r && R(e.prototype, r), t && R(e, t), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), e;
+        }, A.apply(null, arguments);
     }
     function I(e, r) {
-        if ("function" != typeof r && null !== r) throw new TypeError("Super expression must either be null or a function");
-        e.prototype = Object.create(r && r.prototype, {
-            constructor: {
-                value: e,
-                writable: !0,
-                configurable: !0
-            }
-        }), Object.defineProperty(e, "prototype", {
-            writable: !1
-        }), r && A(e, r);
-    }
-    function A(e, r) {
-        return A = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(e, r) {
-            return e.__proto__ = r, e;
-        }, A(e, r);
-    }
-    function z(e) {
-        var r = U();
-        return function() {
-            var t, n = H(e);
-            if (r) {
-                var i = H(this).constructor;
-                t = Reflect.construct(n, arguments, i);
-            } else t = n.apply(this, arguments);
-            return W(this, t);
-        };
+        return V(e) || R(e, r) || L(e, r) || P();
     }
-    function W(e, r) {
-        if (r && ("object" == N(r) || "function" == typeof r)) return r;
-        if (void 0 !== r) throw new TypeError("Derived constructors may only return object or undefined");
-        return K(e);
+    function P() {
+        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 K(e) {
-        if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-        return e;
+    function L(e, r) {
+        if (e) {
+            if ("string" == typeof e) return N(e, r);
+            var a = {}.toString.call(e).slice(8, -1);
+            return "Object" === a && e.constructor && (a = e.constructor.name), "Map" === a || "Set" === a ? Array.from(e) : "Arguments" === a || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a) ? N(e, r) : void 0;
+        }
     }
-    function U() {
-        try {
-            var e = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (e) {}
-        return (U = function r() {
-            return !!e;
-        })();
+    function N(e, r) {
+        (null == r || r > e.length) && (r = e.length);
+        for (var a = 0, n = Array(r); a < r; a++) {
+            n[a] = e[a];
+        }
+        return n;
     }
-    function H(e) {
-        return H = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(e) {
-            return e.__proto__ || Object.getPrototypeOf(e);
-        }, H(e);
+    function R(e, r) {
+        var a = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
+        if (null != a) {
+            var n, t, i, l, o = [], s = !0, u = !1;
+            try {
+                if (i = (a = a.call(e)).next, 0 === r) {
+                    if (Object(a) !== a) return;
+                    s = !1;
+                } else for (;!(s = (n = i.call(a)).done) && (o.push(n.value), o.length !== r); s = !0) {
+                }
+            } catch (e) {
+                u = !0, t = e;
+            } finally {
+                try {
+                    if (!s && null != a["return"] && (l = a["return"](), Object(l) !== l)) return;
+                } finally {
+                    if (u) throw t;
+                }
+            }
+            return o;
+        }
     }
-    function X(e, r, t) {
-        return (r = G(r)) in e ? Object.defineProperty(e, r, {
-            value: t,
-            enumerable: !0,
-            configurable: !0,
-            writable: !0
-        }) : e[r] = t, e;
+    function V(e) {
+        if (Array.isArray(e)) return e;
     }
-    function G(e) {
-        var r = J(e, "string");
-        return "symbol" == N(r) ? r : r + "";
+    function D(e, r) {
+        if (null == e) return {};
+        var a, n, t = T(e, r);
+        if (Object.getOwnPropertySymbols) {
+            var i = Object.getOwnPropertySymbols(e);
+            for (n = 0; n < i.length; n++) {
+                a = i[n], r.includes(a) || {}.propertyIsEnumerable.call(e, a) && (t[a] = e[a]);
+            }
+        }
+        return t;
     }
-    function J(e, r) {
-        if ("object" != N(e) || !e) return e;
-        var t = e[Symbol.toPrimitive];
-        if (void 0 !== t) {
-            var n = t.call(e, r || "default");
-            if ("object" != N(n)) return n;
-            throw new TypeError("@@toPrimitive must return a primitive value.");
+    function T(e, r) {
+        if (null == e) return {};
+        var a = {};
+        for (var n in e) {
+            if ({}.hasOwnProperty.call(e, n)) {
+                if (r.includes(n)) continue;
+                a[n] = e[n];
+            }
         }
-        return ("string" === r ? String : Number)(e);
+        return a;
     }
-    /** @public */    var Q = {
-        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,
+    /** @public */    var z = {
+        defaultValue: i().number,
+        describedBy: i().string,
+        disabled: i().bool,
+        displayValue: i().string,
+        elementRef: i().oneOfType([ i().func, i().object ]),
+        error: i().bool,
+        inline: i().bool,
+        labelledBy: i().string,
+        max: i().number,
+        maxLabel: i().node,
+        min: i().number,
+        minLabel: i().node,
+        name: i().string,
+        onChange: i().func,
         /** @private. */
-        required: a().bool,
-        step: a().number,
-        stepMarks: a().oneOf([ "focus", "always", "never" ]),
-        /** @private */
-        splunkTheme: a().object,
-        value: a().number
+        required: i().bool,
+        step: i().number,
+        stepMarks: i().oneOf([ "focus", "always", "never" ]),
+        thumbRef: i().oneOfType([ i().func, i().object ]),
+        value: i().number
     };
-    var Y = {
-        min: 1,
-        max: 5,
-        step: 1,
-        stepMarks: "focus"
-    };
-    var Z = function e(r) {
-        var t = r.max, n = r.min, i = r.value;
-        if (i > t) {
-            return t;
+    var F = function e(r) {
+        var a = r.max, n = r.min, t = r.value;
+        if (t > a) {
+            return a;
         }
-        if (i < n) {
+        if (t < n) {
             return n;
         }
-        return i;
+        return t;
     };
     // If the current value is in between a step, i.e. defaultValue is not at a
     // step mark, this function handles navigating to the next correct step
-        var ee = function e(r) {
-        var t = r.direction, n = r.min, i = r.step, a = r.value;
-        var o = new (l())(a).minus(n).modulo(i).toNumber();
-        if (o > 0) {
-            return t === "forward" ? i - o : o;
+        var H = function e(r) {
+        var a = r.direction, n = r.min, t = r.step, i = r.value;
+        var l = new (o())(i).minus(n).modulo(t).toNumber();
+        if (l > 0) {
+            return a === "forward" ? t - l : l;
         }
-        return i;
+        return t;
     };
-    var re = function e(r, t) {
-        if (t === null) {
+    var W = function e(r, a) {
+        if (a === null) {
             return undefined;
         }
-        var n = t.getBoundingClientRect();
-        var i = r.clientX - n.left;
-        return Z({
+        var n = a.getBoundingClientRect();
+        var t = r.clientX - n.left;
+        return F({
             max: 100,
             min: 0,
-            value: i / n.width * 100
+            value: t / n.width * 100
         });
     };
-    var te = function e(r) {
-        var t = r.max, n = r.min, i = r.step, a = r.value;
+    var K = function e(r) {
+        var a = r.max, n = r.min, t = r.step, i = r.value;
         // Handles if the max is in between steps but val is larger than the halfway point between last step mark and max
-                if (a > t - (t - n) % i / 2) {
-            return t;
+                if (i > a - (a - n) % t / 2) {
+            return a;
         }
-        return new (l())(a).minus(n).div(i).todp(0).mul(i).add(n).toNumber();
+        return new (o())(i).minus(n).div(t).todp(0).mul(t).add(n).toNumber();
     };
-    var ne = function e(r) {
-        var t = r.position, n = r.max, i = r.min, a = r.step;
-        var o = n - i;
-        var l = t / 100 * o + i;
-        return te({
+    var U = function e(r) {
+        var a = r.position, n = r.max, t = r.min, i = r.step;
+        var l = n - t;
+        var o = a / 100 * l + t;
+        return K({
             max: n,
-            min: i,
-            step: a,
-            value: l
+            min: t,
+            step: i,
+            value: o
         });
     };
-    var ie = function e(r) {
-        var t = r.max, n = r.min, i = r.sliderBar, a = r.step, o = r.thumbWidth;
+    var X = function e(r) {
+        var a = r.max, n = r.min, t = r.sliderBar, i = r.step;
         // 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
-                if (i === null) {
+                if (t === null) {
             return undefined;
         }
-        var l = t - n;
-        var s = Math.round(l / a);
-        var u = i.getBoundingClientRect();
-        var c = a * 100 / l;
-        return u.width / s > o / 2 ? c : undefined;
+        var l = a - n;
+        var o = Math.round(l / i);
+        var s = t.getBoundingClientRect();
+        var u = i * 100 / l;
+        return s.width / o > w / 2 ? u : undefined;
     };
-    var ae = function e(r) {
-        var t = r.max, n = r.min, i = r.value;
-        if (i === undefined) {
+    var G = function e(r) {
+        var a = r.max, n = r.min, t = r.value;
+        if (t === undefined) {
             return undefined;
         }
-        var a = t - n;
-        return (i - n) / a * 100;
+        var i = a - n;
+        return (t - n) / i * 100;
     };
-    var oe =  function(e) {
-        I(t, e);
-        var r = z(t);
+    function J(e) {
+        var r = e.defaultValue, t = e.describedBy, i = e.disabled, l = e.displayValue, o = e.elementRef, u = e.error, d = e.inline, p = e.labelledBy, m = e.max, b = m === void 0 ? 5 : m, y = e.maxLabel, g = e.min, h = g === void 0 ? 1 : g, x = e.minLabel, k = e.name, w = e.onChange, O = e.required, M = e.step, P = M === void 0 ? 1 : M, L = e.stepMarks, N = L === void 0 ? "focus" : L, R = e.thumbRef, V = e.value, T = D(e, [ "defaultValue", "describedBy", "disabled", "displayValue", "elementRef", "error", "inline", "labelledBy", "max", "maxLabel", "min", "minLabel", "name", "onChange", "required", "step", "stepMarks", "thumbRef", "value" ]);
         // @docs-props-type SliderPropsBase
-                function t(e) {
-            var n;
-            L(this, t);
-            n = r.call(this, e);
-            X(K(n), "controlledExternally", void 0);
-            X(K(n), "sliderThumb", null);
-            X(K(n), "handleMount", (function(e) {
-                n.setState({
-                    sliderBar: e
+                var z = f()({
+            componentName: "Slider",
+            /* eslint-disable-next-line prefer-rest-params */
+            componentProps: arguments[0]
+        });
+        var J = (0, a.useState)(false), Q = I(J, 2), Y = Q[0], Z = Q[1];
+        var ee = (0, a.useState)(false), re = I(ee, 2), ae = re[0], ne = re[1];
+        var te = (0, a.useState)(false), ie = I(te, 2), le = ie[0], oe = ie[1];
+        var se = (0, a.useState)(null), ue = I(se, 2), ce = ue[0], de = ue[1];
+        var ve = (0, a.useState)(null), pe = I(ve, 2), fe = pe[0], me = pe[1];
+        var be = (0, a.useMemo)((function() {
+            return z ? K({
+                value: (b - h) / 2,
+                min: h,
+                max: b,
+                step: P
+            }) : r;
+        }), [ z, r, b, h, P ]);
+        var ye = (0, a.useState)(z ? V : be), ge = I(ye, 2), he = ge[0], xe = ge[1];
+        var ke = (0, a.useCallback)((function(e, r) {
+            var a = r.newValue;
+            if (he !== a) {
+                w === null || w === void 0 ? void 0 : w(e, {
+                    value: a,
+                    name: k
                 });
-            }));
-            X(K(n), "handleBlur", (function() {
-                n.setState({
-                    isFocused: false,
-                    showTooltip: false
+                if (!z) {
+                    xe(a);
+                }
+            }
+        }), [ z, k, w, he ]);
+        // handlers
+                var we = (0, a.useCallback)((function() {
+            Z(false);
+            oe(false);
+        }), []);
+        var Se = (0, a.useCallback)((function() {
+            Z(true);
+            oe(true);
+        }), []);
+        var Ce = (0, a.useCallback)((function(e) {
+            de(e);
+        }), []);
+        var Oe = (0, a.useCallback)((function(e) {
+            me(e);
+            q(R, e);
+        }), [ R ]);
+        var Ee = (0, a.useCallback)((function(e) {
+            var r = W(e, ce);
+            if (r !== undefined) {
+                var a = U({
+                    position: r,
+                    max: b,
+                    min: h,
+                    step: P
                 });
-            }));
-            X(K(n), "handleFocus", (function() {
-                n.setState({
-                    isFocused: true,
-                    showTooltip: true
+                ke(e, {
+                    newValue: a
                 });
-            }));
-            X(K(n), "handleClick", (function(e) {
-                var r = re(e, n.state.sliderBar);
-                if (r !== undefined) {
-                    var t = n.props, i = t.max, a = t.min, o = t.step;
-                    var l = ne({
-                        position: r,
-                        max: i,
-                        min: a,
-                        step: o
-                    });
-                    n.setValue(e, {
-                        value: l
-                    });
-                }
-            }));
-            X(K(n), "handleKeyDown", (function(e) {
-                var r = n.getValue();
-                if (r !== undefined) {
-                    var t = (0, f.keycode)(e.nativeEvent);
-                    var i = n.props, a = i.min, o = i.max, l = i.step;
-                    var s;
-                    var u = ee({
-                        direction: "forward",
-                        min: a,
-                        step: l,
-                        value: r
-                    });
-                    var c = ee({
-                        direction: "backward",
-                        min: a,
-                        step: l,
-                        value: r
-                    });
-                    if (t === "right") {
-                        s = r + u;
-                    } else if (t === "left") {
-                        s = r - c;
-                    } else if (t === "up") {
-                        e.preventDefault();
-                        s = r + u;
-                    } else if (t === "down") {
-                        e.preventDefault();
-                        s = r - c;
-                    } else {
-                        return;
-                    }
-                    r = Z({
-                        max: o,
-                        min: a,
-                        value: s
-                    });
-                    r = te({
-                        max: o,
-                        min: a,
-                        step: l,
-                        value: r
-                    });
-                    n.setValue(e, {
-                        value: r
-                    });
-                }
-            }));
-            X(K(n), "handleMouseDown", (function(e) {
-                e.preventDefault();
-                n.focus();
-                n.setState({
-                    selected: true,
-                    showTooltip: true
+            }
+        }), [ b, h, ke, ce, P ]);
+        var _e = (0, a.useCallback)((function(e) {
+            var r = he;
+            if (r !== undefined) {
+                var a = (0, s.keycode)(e.nativeEvent);
+                var n;
+                var t = H({
+                    direction: "forward",
+                    min: h,
+                    step: P,
+                    value: r
                 });
-            }));
-            X(K(n), "handleMouseEnter", (function() {
-                n.setState({
-                    showTooltip: true
+                var i = H({
+                    direction: "backward",
+                    min: h,
+                    step: P,
+                    value: r
                 });
-            }));
-            X(K(n), "handleMouseLeave", (function() {
-                if (!n.state.selected) {
-                    n.setState({
-                        showTooltip: false
-                    });
-                }
-            }));
-            X(K(n), "handleMouseMove", (function(e) {
-                if (n.state.selected) {
-                    var r = re(e, n.state.sliderBar);
-                    var t = n.props, i = t.max, a = t.min, o = t.step;
-                    if (r !== undefined) {
-                        var l = ne({
-                            position: r,
-                            min: a,
-                            max: i,
-                            step: o
-                        });
-                        n.setValue(e, {
-                            value: l
-                        });
-                    }
+                if (a === "right") {
+                    n = r + t;
+                } else if (a === "left") {
+                    n = r - i;
+                } else if (a === "up") {
+                    e.preventDefault();
+                    n = r + t;
+                } else if (a === "down") {
+                    e.preventDefault();
+                    n = r - i;
+                } else {
+                    return;
                 }
-            }));
-            X(K(n), "handleMouseUp", (function() {
-                n.setState({
-                    selected: false,
-                    showTooltip: false
+                r = F({
+                    max: b,
+                    min: h,
+                    value: n
+                });
+                r = K({
+                    max: b,
+                    min: h,
+                    step: P,
+                    value: r
+                });
+                ke(e, {
+                    newValue: r
                 });
-            }));
-            n.controlledExternally = u()(e, "value");
-            var i = e.defaultValue, a = e.max, o = e.min, l = e.step;
-            var s = u()(e, "defaultValue") ? i : te({
-                max: a,
-                min: o,
-                step: l,
-                value: (a - o) / 2
-            });
-            n.state = {
-                isFocused: false,
-                selected: false,
-                showTooltip: false,
-                sliderBar: null,
-                value: n.isControlled() ? undefined : s
-            };
-            if (false) {}
-            if (false) {}
-            return n;
-        }
-        F(t, [ {
-            key: "componentDidUpdate",
-            value: function e(r) {
-                if (false) {}
-                if (false) {}
             }
-        }, {
-            key: "getValue",
-            value: function e() {
-                return this.isControlled() ? this.props.value : this.state.value;
+        }), [ b, h, ke, P, he ]);
+        var Be = (0, a.useCallback)((function(e) {
+            e.preventDefault();
+            fe === null || fe === void 0 ? void 0 : fe.focus();
+            ne(true);
+            oe(true);
+        }), [ fe ]);
+        var Me = (0, a.useCallback)((function() {
+            oe(true);
+        }), []);
+        var $e = (0, a.useCallback)((function() {
+            if (!ae) {
+                oe(false);
             }
-        }, {
-            key: "setValue",
-            value: function e(r, t) {
-                var n = t.value;
-                var i = this.props.name;
-                if (this.getValue() !== n) {
-                    var a, o;
-                    (a = (o = this.props).onChange) === null || a === void 0 ? void 0 : a.call(o, r, {
-                        value: n,
-                        name: i
+        }), [ ae ]);
+        var je = (0, a.useCallback)((function(e) {
+            if (ae) {
+                var r = W(e, ce);
+                if (r !== undefined) {
+                    var a = U({
+                        position: r,
+                        min: h,
+                        max: b,
+                        step: P
+                    });
+                    ke(e, {
+                        newValue: a
                     });
-                    if (!this.isControlled()) {
-                        this.setState({
-                            value: n
-                        });
-                    }
                 }
             }
-        }, {
-            key: "focus",
-            /**
-     * Places focus on the slider.
-     */
-            value: function e() {
-                var r;
-                (r = this.sliderThumb) === null || r === void 0 ? void 0 : r.focus();
-            }
-        }, {
-            key: "isControlled",
-            value: function e() {
-                return this.controlledExternally;
-            }
-        }, {
-            key: "render",
-            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 N = this.getValue();
-                var L = ae({
-                    value: N,
-                    min: b,
-                    max: f
-                });
-                var R = k === "focus" && T || k === "always";
-                var F = R && q ? ie({
-                    max: f,
-                    min: b,
-                    sliderBar: q,
-                    step: w,
-                    thumbWidth: E(S)
-                }) : undefined;
-                var I = v()(this.props, d()(t.propTypes));
-                /* eslint-disable jsx-a11y/no-static-element-interactions */                
-                return n().createElement(M, V({
-                    "data-test": "slider",
-                    "data-test-value": N,
-                    elementRef: s,
-                    flex: true,
-                    inline: c
-                }, I), _ &&  n().createElement(n().Fragment, null,  n().createElement(h(), {
-                    target: window,
-                    eventType: "mouseup",
-                    listener: this.handleMouseUp
-                }),  n().createElement(h(), {
-                    target: window,
-                    eventType: "mousemove",
-                    listener: this.handleMouseMove
-                })), y !== null &&  n().createElement(D, {
-                    "data-test": "min-label",
-                    $disabled: o
-                }, y || b),  n().createElement(O, {
-                    onClick: o ? undefined : this.handleClick
-                },  n().createElement(B, {
-                    "aria-required": x,
-                    "data-test": "bar",
-                    $disabled: o,
-                    ref: this.handleMount,
-                    $error: u,
-                    $position: L,
-                    $stepMarksWidth: F
-                }),  n().createElement(j, {
-                    "aria-describedby": a,
-                    "aria-labelledby": p,
-                    "aria-invalid": u,
-                    "aria-valuemax": f,
-                    "aria-valuemin": b,
-                    "aria-valuenow": N,
-                    "data-test": "handle",
-                    onBlur: this.handleBlur,
-                    onMouseEnter: this.handleMouseEnter,
-                    onMouseLeave: this.handleMouseLeave,
-                    onKeyDown: o ? undefined : this.handleKeyDown,
-                    onMouseDown: o ? undefined : this.handleMouseDown,
-                    onFocus: this.handleFocus,
-                    ref: function e(t) {
-                        r.sliderThumb = t;
-                    },
-                    role: "slider",
-                    disabled: o,
-                    $error: u,
-                    $position: L
-                }),  n().createElement(g(), {
-                    open: this.state.showTooltip,
-                    anchor: this.sliderThumb,
-                    appearance: "inverted",
-                    align: "center"
-                },  n().createElement(P, null, l || N))), m !== null &&  n().createElement($, {
-                    "data-test": "max-label",
-                    $disabled: o
-                }, m || f));
-                /* eslint-enable jsx-a11y/no-static-element-interactions */            }
-        } ]);
-        return t;
-    }(t.Component);
-    X(oe, "propTypes", Q);
-    X(oe, "defaultProps", Y);
-    var le = (0, m.withSplunkTheme)(oe);
-    le.propTypes = oe.propTypes;
-    /* harmony default export */    const se = le;
+        }), [ ae, b, h, ke, ce, P ]);
+        var qe = (0, a.useCallback)((function() {
+            ne(false);
+            oe(false);
+        }), []);
+        (0, a.useEffect)((function() {
+            if (false) {}
+        }), [ b, h ]);
+        var Ae = G({
+            value: he,
+            min: h,
+            max: b
+        });
+        var Ie = N === "focus" && Y || N === "always";
+        var Pe = Ie && ce ? X({
+            max: b,
+            min: h,
+            sliderBar: ce,
+            step: P
+        }) : undefined;
+         /* eslint-disable jsx-a11y/no-static-element-interactions */
+        return n().createElement(S, A({
+            "data-test": "slider",
+            "data-test-value": he,
+            elementRef: o,
+            flex: true,
+            inline: d
+        }, T), ae &&  n().createElement(n().Fragment, null,  n().createElement(c(), {
+            target: window,
+            eventType: "mouseup",
+            listener: qe
+        }),  n().createElement(c(), {
+            target: window,
+            eventType: "mousemove",
+            listener: je
+        })), x !== null &&  n().createElement($, {
+            "data-test": "min-label",
+            $disabled: i
+        }, x || h),  n().createElement(C, {
+            onClick: i ? undefined : Ee
+        },  n().createElement(E, {
+            "aria-required": O,
+            "data-test": "bar",
+            $disabled: i,
+            ref: Ce,
+            $error: u,
+            $position: Ae,
+            $stepMarksWidth: Pe
+        }),  n().createElement(_, {
+            "aria-describedby": t,
+            "aria-labelledby": p,
+            "aria-invalid": u,
+            "aria-valuemax": b,
+            "aria-valuemin": h,
+            "aria-valuenow": he,
+            "data-test": "thumb",
+            onBlur: we,
+            onMouseEnter: Me,
+            onMouseLeave: $e,
+            onKeyDown: i ? undefined : _e,
+            onMouseDown: i ? undefined : Be,
+            onFocus: Se,
+            ref: Oe,
+            role: "slider",
+            disabled: i,
+            $error: u,
+            $position: Ae
+        }),  n().createElement(v(), {
+            open: le,
+            anchor: fe,
+            appearance: "inverted",
+            align: "center"
+        },  n().createElement(B, null, l || he))), y !== null &&  n().createElement(j, {
+            "data-test": "max-label",
+            $disabled: i
+        }, y || b));
+    }
+    J.propTypes = z;
+    /* harmony default export */    const Q = J;
     // CONCATENATED MODULE: ./src/Slider/index.ts
     module.exports = r;
     /******/})();