@dnb/eufemia 9.30.0 → 9.32.0

package/cjs/components/skeleton/Skeleton.js

@@ -127,7 +127,7 @@ var Skeleton = function (_React$PureComponent) {
     value: function getProps() {
       var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
       var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.context;
-      return (0, _componentHelper.extendPropsWithContext)(props, Skeleton.defaultProps, {
+      return (0, _componentHelper.extendPropsWithContextInClassComponent)(props, Skeleton.defaultProps, {
         skeleton: context.Skeleton || context.skeleton,
         style_type: context.skeleton_style_type,
         no_animation: context.skeleton_no_animation

package/cjs/components/slider/Slider.d.ts

@@ -3,8 +3,7 @@
  *
  */
 /// <reference types="react" />
-import { ISpacingProps } from '../../shared/interfaces';
-import type { SliderProps } from './types';
+import type { SliderAllProps } from './types';
 export * from './types';
-declare function Slider(localProps: SliderProps & ISpacingProps): JSX.Element;
+declare function Slider(localProps: SliderAllProps): JSX.Element;
 export default Slider;

package/cjs/components/slider/SliderHelpers.d.ts

@@ -1,5 +1,5 @@
-import { formatOptionParams, formatValue, formatReturnType } from '../number-format/NumberUtils';
-import type { ValueTypes } from './types';
+import { formatReturnValue } from '../number-format/NumberUtils';
+import type { NumberFormatTypes, ValueTypes } from './types';
 export declare const percentToValue: (percent: number, min: number, max: number, isReverse: boolean) => number;
 export declare const roundToStep: (number: number, step: number) => number;
 export declare const getOffset: (node: HTMLElement) => {
@@ -19,5 +19,7 @@ export declare const createMockDiv: ({ width, height }: {
 }) => HTMLDivElement;
 export declare const getUpdatedValues: (value: Array<number>, index: number, newValue: number) => ValueTypes;
 export declare const closestIndex: (goal: number, array: Array<number>) => number;
-export declare const formatNumber: (value: formatValue, opts?: formatOptionParams) => formatReturnType;
-export declare const getHumanNumber: (value: number, numberFormat: formatOptionParams) => string;
+export declare const getFormattedNumber: (value: number, numberFormat: NumberFormatTypes) => formatReturnValue | {
+    number: string;
+    aria: string;
+};

package/cjs/components/slider/SliderHelpers.js

@@ -37,7 +37,7 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.roundValue = exports.roundToStep = exports.percentToValue = exports.getUpdatedValues = exports.getOffset = exports.getMousePosition = exports.getHumanNumber = exports.formatNumber = exports.createMockDiv = exports.closestIndex = exports.clamp = exports.calculatePercent = void 0;
+exports.roundValue = exports.roundToStep = exports.percentToValue = exports.getUpdatedValues = exports.getOffset = exports.getMousePosition = exports.getFormattedNumber = exports.createMockDiv = exports.closestIndex = exports.clamp = exports.calculatePercent = void 0;
 
 require("core-js/modules/es.parse-float.js");
 
@@ -217,29 +217,25 @@ var closestIndex = function closestIndex(goal, array) {
 
 exports.closestIndex = closestIndex;
 
-var formatNumber = function formatNumber(value) {
-  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+var getFormattedNumber = function getFormattedNumber(value, numberFormat) {
+  if (numberFormat) {
+    if (typeof numberFormat === 'function') {
+      var number = numberFormat(value);
+      return {
+        number: number,
+        aria: number
+      };
+    }
 
-  if (opts) {
-    return (0, _NumberUtils.format)(value, opts);
+    return (0, _NumberUtils.format)(value, _objectSpread(_objectSpread({}, numberFormat || {}), {}, {
+      returnAria: true
+    }));
   }
 
-  return value;
-};
-
-exports.formatNumber = formatNumber;
-
-var getHumanNumber = function getHumanNumber(value, numberFormat) {
-  var num = value;
-
-  var _ref3 = numberFormat ? formatNumber(num, _objectSpread(_objectSpread({}, numberFormat || {}), {}, {
-    returnAria: true
-  })) : {
-    aria: null
-  },
-      humanNumber = _ref3.aria;
-
-  return String(humanNumber || value);
+  return {
+    aria: null,
+    number: null
+  };
 };
 
-exports.getHumanNumber = getHumanNumber;
+exports.getFormattedNumber = getFormattedNumber;

package/cjs/components/slider/SliderInstance.js

@@ -55,6 +55,7 @@ function SliderInstance() {
       isVertical = _useSliderProps.isVertical,
       showButtons = _useSliderProps.showButtons,
       showStatus = _useSliderProps.showStatus,
+      shouldAnimate = _useSliderProps.shouldAnimate,
       allProps = _useSliderProps.allProps;
 
   var id = allProps.id,
@@ -71,7 +72,7 @@ function SliderInstance() {
       disabled = allProps.disabled,
       className = allProps.className;
   var mainParams = {
-    className: (0, _classnames.default)("dnb-slider dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(allProps), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', !showButtons && 'dnb-slider--no-buttons', (0, _componentHelper.isTrue)(stretch) && 'dnb-slider--stretch', label && labelDirection && "dnb-slider__label--".concat(labelDirection), showStatus && 'dnb-slider__form-status', status && "dnb-slider__status--".concat(statusState))
+    className: (0, _classnames.default)("dnb-slider dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(allProps), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', shouldAnimate && 'dnb-slider__state--animate', !showButtons && 'dnb-slider--no-buttons', (0, _componentHelper.isTrue)(stretch) && 'dnb-slider--stretch', label && labelDirection && "dnb-slider__label--".concat(labelDirection), showStatus && 'dnb-slider__form-status', status && "dnb-slider__status--".concat(statusState))
   };
   var subtractButton = showButtons ? _SubtractButton || (_SubtractButton = _react.default.createElement(SubtractButton, null)) : null;
   var addButton = showButtons ? _AddButton || (_AddButton = _react.default.createElement(AddButton, null)) : null;
@@ -138,13 +139,13 @@ function SubtractButton() {
     subtractParams['aria-hidden'] = attributes['aria-hidden'];
   }
 
-  var humanNumber = (0, _SliderHelpers.getHumanNumber)(value, numberFormat);
+  var humanNumber = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat);
   return _react.default.createElement(_Button.default, _extends({
     className: "dnb-slider__button dnb-slider__button--subtract",
     variant: "secondary",
     icon: "subtract",
     size: "small",
-    "aria-label": subtractTitle === null || subtractTitle === void 0 ? void 0 : subtractTitle.replace('%s', humanNumber),
+    "aria-label": subtractTitle === null || subtractTitle === void 0 ? void 0 : subtractTitle.replace('%s', humanNumber.aria || String(value)),
     on_click: onSubtractClickHandler,
     disabled: disabled,
     skeleton: skeleton
@@ -176,13 +177,13 @@ function AddButton() {
     addParams['aria-hidden'] = attributes['aria-hidden'];
   }
 
-  var humanNumber = (0, _SliderHelpers.getHumanNumber)(value, numberFormat);
+  var humanNumber = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat);
   return _react.default.createElement(_Button.default, _extends({
     className: "dnb-slider__button dnb-slider__button--add",
     variant: "secondary",
     icon: "add",
     size: "small",
-    "aria-label": addTitle === null || addTitle === void 0 ? void 0 : addTitle.replace('%s', humanNumber),
+    "aria-label": addTitle === null || addTitle === void 0 ? void 0 : addTitle.replace('%s', humanNumber.aria || String(value)),
     on_click: onAddClickHandler,
     disabled: disabled,
     skeleton: skeleton

package/cjs/components/slider/SliderProvider.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { SliderProps, SliderContextTypes } from './types';
+import type { SliderAllProps, SliderContextTypes } from './types';
 export declare const SliderContext: React.Context<SliderContextTypes>;
-export declare function SliderProvider(localProps: SliderProps): JSX.Element;
+export declare function SliderProvider(localProps: SliderAllProps): JSX.Element;

package/cjs/components/slider/SliderProvider.js

@@ -38,8 +38,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _FormRowHelpers = require("../../components/form-row/FormRowHelpers");
 
-var _hooks = require("../../shared/hooks");
-
 var _componentHelper = require("../../shared/component-helper");
 
 var _Context = _interopRequireDefault(require("../../shared/Context"));
@@ -48,7 +46,7 @@ var _SliderHelpers = require("./SliderHelpers");
 
 var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps");
 
-var _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatusId", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "skeleton", "max", "min", "disabled", "className", "id", "onInit", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
+var _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatusId", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "tooltip", "alwaysShowTooltip", "skeleton", "max", "min", "disabled", "className", "id", "onInit", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -85,7 +83,7 @@ exports.SliderContext = SliderContext;
 function SliderProvider(localProps) {
   var context = _react.default.useContext(_Context.default);
 
-  var allProps = (0, _withSnakeCaseProps.convertSnakeCaseProps)((0, _hooks.usePropsWithContext)(localProps, defaultProps, {
+  var allProps = (0, _withSnakeCaseProps.convertSnakeCaseProps)((0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
   }, context === null || context === void 0 ? void 0 : context.getTranslation(localProps).Slider, (0, _FormRowHelpers.includeValidProps)(context === null || context === void 0 ? void 0 : context.FormRow, {
     vertical: null
@@ -116,6 +114,8 @@ function SliderProvider(localProps) {
       hideButtons = allProps.hideButtons,
       multiThumbBehavior = allProps.multiThumbBehavior,
       numberFormat = allProps.numberFormat,
+      tooltip = allProps.tooltip,
+      alwaysShowTooltip = allProps.alwaysShowTooltip,
       skeleton = allProps.skeleton,
       max = allProps.max,
       min = allProps.min,
@@ -137,22 +137,32 @@ function SliderProvider(localProps) {
       value = _React$useState4[0],
       setValue = _React$useState4[1];
 
+  var _React$useState5 = _react.default.useState(_value),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      externValue = _React$useState6[0],
+      updateExternValue = _React$useState6[1];
+
   var realtimeValue = _react.default.useRef(_value);
 
-  var _React$useState5 = _react.default.useState('initial'),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      thumbState = _React$useState6[0],
-      setThumbState = _React$useState6[1];
+  var _React$useState7 = _react.default.useState('initial'),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      thumbState = _React$useState8[0],
+      setThumbState = _React$useState8[1];
 
   var thumbIndex = _react.default.useRef(-1);
 
-  var _React$useState7 = _react.default.useState((0, _componentHelper.isTrue)(_vertical)),
-      _React$useState8 = _slicedToArray(_React$useState7, 1),
-      isVertical = _React$useState8[0];
+  var _React$useState9 = _react.default.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      shouldAnimate = _React$useState10[0],
+      updateAnimateState = _React$useState10[1];
 
-  var _React$useState9 = _react.default.useState(isVertical ? !(0, _componentHelper.isTrue)(_reverse) : (0, _componentHelper.isTrue)(_reverse)),
-      _React$useState10 = _slicedToArray(_React$useState9, 1),
-      isReverse = _React$useState10[0];
+  var _React$useState11 = _react.default.useState((0, _componentHelper.isTrue)(_vertical)),
+      _React$useState12 = _slicedToArray(_React$useState11, 1),
+      isVertical = _React$useState12[0];
+
+  var _React$useState13 = _react.default.useState(isVertical ? !(0, _componentHelper.isTrue)(_reverse) : (0, _componentHelper.isTrue)(_reverse)),
+      _React$useState14 = _slicedToArray(_React$useState13, 1),
+      isReverse = _React$useState14[0];
 
   var isMulti = Array.isArray(value);
 
@@ -237,7 +247,7 @@ function SliderProvider(localProps) {
         };
 
         if (numberFormat) {
-          obj.number = (0, _SliderHelpers.formatNumber)(numberValue, numberFormat);
+          obj.number = (0, _SliderHelpers.getFormattedNumber)(numberValue, numberFormat).number;
         }
 
         (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onChange', obj);
@@ -250,27 +260,32 @@ function SliderProvider(localProps) {
   _react.default.useEffect(function () {
     if (isMulti) {
       var hasChanged = _value.some(function (val, i) {
-        return val !== value[i];
+        return val !== externValue[i];
       });
 
       if (hasChanged) {
         updateValue(_value);
+        updateExternValue(_value);
       }
-    } else {
+    } else if (_value !== externValue) {
       updateValue(_value);
+      updateExternValue(_value);
     }
   }, [_value, isMulti]);
 
   var trackRef = _react.default.useRef();
 
-  var jumpedTimeout = _react.default.useRef();
+  var animationTimeout = _react.default.useRef();
 
-  var setJumpedState = function setJumpedState() {
-    setThumbState('jumped');
-    clearTimeout(jumpedTimeout.current);
-    jumpedTimeout.current = setTimeout(function () {
-      return setThumbState('normal');
-    }, 100);
+  var setShouldAnimate = function setShouldAnimate(state) {
+    updateAnimateState(state);
+    clearTimeout(animationTimeout.current);
+
+    if (state) {
+      animationTimeout.current = setTimeout(function () {
+        return updateAnimateState(false);
+      }, 250);
+    }
   };
 
   var showStatus = (0, _componentHelper.getStatusState)(status);
@@ -281,6 +296,7 @@ function SliderProvider(localProps) {
       isMulti: isMulti,
       isReverse: isReverse,
       isVertical: isVertical,
+      shouldAnimate: shouldAnimate,
       value: value,
       values: values,
       setValue: setValue,
@@ -294,8 +310,8 @@ function SliderProvider(localProps) {
       emitChange: emitChange,
       allProps: allProps,
       trackRef: trackRef,
-      setJumpedState: setJumpedState,
-      jumpedTimeout: jumpedTimeout
+      setShouldAnimate: setShouldAnimate,
+      animationTimeout: animationTimeout
     }
   }, localProps.children);
 }

package/cjs/components/slider/SliderThumb.js

@@ -1,16 +1,20 @@
 "use strict";
 
-require("core-js/modules/es.object.keys.js");
-
 require("core-js/modules/es.symbol.js");
 
-require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
 
-require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.function.name.js");
 
-require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.array.from.js");
 
-require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.object.assign.js");
 
@@ -33,9 +37,11 @@ var _componentHelper = require("../../shared/component-helper");
 
 var _Button = _interopRequireDefault(require("../button/Button"));
 
+var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
+
 var _useSliderEvents2 = require("./hooks/useSliderEvents");
 
-var _useSliderProps2 = require("./hooks/useSliderProps");
+var _useSliderProps3 = require("./hooks/useSliderProps");
 
 var _SliderHelpers = require("./SliderHelpers");
 
@@ -43,21 +49,45 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function SliderThumb() {
-  var _useSliderProps = (0, _useSliderProps2.useSliderProps)(),
-      values = _useSliderProps.values,
-      thumbIndex = _useSliderProps.thumbIndex,
-      isVertical = _useSliderProps.isVertical,
-      isReverse = _useSliderProps.isReverse,
-      showStatus = _useSliderProps.showStatus,
-      attributes = _useSliderProps.attributes,
-      allProps = _useSliderProps.allProps;
+  var _useSliderProps = (0, _useSliderProps3.useSliderProps)(),
+      values = _useSliderProps.values;
+
+  return _react.default.createElement(_react.default.Fragment, null, values.map(function (value, i) {
+    return _react.default.createElement(Thumb, {
+      key: i,
+      value: value,
+      currentIndex: i
+    });
+  }));
+}
+
+function Thumb(_ref) {
+  var value = _ref.value,
+      currentIndex = _ref.currentIndex;
+
+  var _useSliderProps2 = (0, _useSliderProps3.useSliderProps)(),
+      thumbIndex = _useSliderProps2.thumbIndex,
+      isVertical = _useSliderProps2.isVertical,
+      isReverse = _useSliderProps2.isReverse,
+      showStatus = _useSliderProps2.showStatus,
+      attributes = _useSliderProps2.attributes,
+      allProps = _useSliderProps2.allProps,
+      shouldAnimate = _useSliderProps2.shouldAnimate;
 
   var id = allProps.id,
       label = allProps.label,
@@ -67,21 +97,43 @@ function SliderThumb() {
       skeleton = allProps.skeleton,
       disabled = allProps.disabled,
       suffix = allProps.suffix,
-      numberFormat = allProps.numberFormat;
+      numberFormat = allProps.numberFormat,
+      tooltip = allProps.tooltip,
+      alwaysShowTooltip = allProps.alwaysShowTooltip;
+  var index = thumbIndex.current;
+  var percent = (0, _SliderHelpers.clamp)((value - min) * 100 / (max - min));
+
+  if (isReverse) {
+    percent = 100 - percent;
+  }
+
+  var style = _defineProperty({
+    zIndex: index === currentIndex ? 4 : 3
+  }, "".concat(isVertical ? 'top' : 'left'), "".concat(percent, "%"));
+
+  var _getFormattedNumber = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat),
+      number = _getFormattedNumber.number,
+      aria = _getFormattedNumber.aria;
+
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showTooltip = _React$useState2[0],
+      setShowTooltip = _React$useState2[1];
+
+  var onMouseEnterHandler = function onMouseEnterHandler() {
+    setShowTooltip(true);
+  };
+
+  var onMouseLeaveHandler = function onMouseLeaveHandler() {
+    setShowTooltip(false);
+  };
 
   var _useSliderEvents = (0, _useSliderEvents2.useSliderEvents)(),
       onThumbMouseDownHandler = _useSliderEvents.onThumbMouseDownHandler,
       onThumbMouseUpHandler = _useSliderEvents.onThumbMouseUpHandler,
-      onThumbBlurHandler = _useSliderEvents.onThumbBlurHandler,
-      onThumbFocusHandler = _useSliderEvents.onThumbFocusHandler,
       onHelperChangeHandler = _useSliderEvents.onHelperChangeHandler,
       onHelperFocusHandler = _useSliderEvents.onHelperFocusHandler;
 
-  var thumbParams = _objectSpread({
-    onBlur: onThumbBlurHandler,
-    onFocus: onThumbFocusHandler
-  }, attributes);
-
   var helperParams = {};
 
   if (label) {
@@ -92,51 +144,58 @@ function SliderThumb() {
     helperParams['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(helperParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
   }
 
-  (0, _componentHelper.validateDOMAttributes)(null, helperParams);
+  var thumbParams = attributes;
+
+  if (tooltip) {
+    thumbParams.onMouseEnter = onMouseEnterHandler;
+    thumbParams.onMouseLeave = onMouseLeaveHandler;
+    thumbParams.onTouchStart = onMouseEnterHandler;
+    thumbParams.onTouchEnd = onMouseLeaveHandler;
+    helperParams.onBlur = onMouseLeaveHandler;
+
+    helperParams.onFocus = function (event) {
+      onHelperFocusHandler(event);
+      onMouseEnterHandler();
+    };
+  }
+
   (0, _componentHelper.validateDOMAttributes)(allProps, thumbParams);
-  return _react.default.createElement(_react.default.Fragment, null, values.map(function (value, i) {
-    var index = thumbIndex.current;
-    var percent = (0, _SliderHelpers.clamp)((value - min) * 100 / (max - min));
-
-    if (isReverse) {
-      percent = 100 - percent;
-    }
-
-    var style = _defineProperty({
-      zIndex: index === i ? 4 : 3
-    }, "".concat(isVertical ? 'top' : 'left'), "".concat(percent, "%"));
-
-    var humanNumber = (0, _SliderHelpers.getHumanNumber)(value, numberFormat);
-    return _react.default.createElement(_react.default.Fragment, {
-      key: i
-    }, _react.default.createElement("span", {
-      className: "dnb-slider__thumb",
-      style: style
-    }, _react.default.createElement("input", _extends({
-      type: "range",
-      className: "dnb-slider__button-helper",
-      min: min,
-      max: max,
-      step: step,
-      value: value,
-      disabled: disabled,
-      onChange: onHelperChangeHandler,
-      onFocus: onHelperFocusHandler,
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-valuenow": value,
-      "aria-valuetext": humanNumber ? humanNumber : undefined,
-      "aria-orientation": isVertical ? 'vertical' : 'horizontal',
-      "data-index": i
-    }, helperParams)), _react.default.createElement(_Button.default, _extends({
-      element: "span",
-      type: "",
-      variant: "secondary",
-      disabled: disabled,
-      skeleton: skeleton,
-      "data-index": i,
-      onMouseDown: onThumbMouseDownHandler,
-      onMouseUp: onThumbMouseUpHandler
-    }, thumbParams))));
-  }));
+
+  var elemRef = _react.default.useRef();
+
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", {
+    className: "dnb-slider__thumb",
+    style: style,
+    ref: elemRef
+  }, _react.default.createElement("input", _extends({
+    type: "range",
+    className: "dnb-slider__button-helper",
+    min: min,
+    max: max,
+    step: step,
+    value: value,
+    disabled: disabled,
+    onChange: onHelperChangeHandler,
+    onFocus: onHelperFocusHandler,
+    onMouseDown: onThumbMouseDownHandler,
+    onMouseUp: onThumbMouseUpHandler,
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-valuenow": value,
+    "aria-valuetext": aria ? aria : undefined,
+    "aria-orientation": isVertical ? 'vertical' : 'horizontal',
+    "data-index": currentIndex
+  }, helperParams)), _react.default.createElement(_Button.default, _extends({
+    element: "span",
+    type: "",
+    variant: "secondary",
+    disabled: disabled,
+    skeleton: skeleton
+  }, thumbParams)), tooltip && _react.default.createElement(_Tooltip.default, {
+    key: "group-".concat(currentIndex),
+    targetElement: elemRef,
+    animatePosition: shouldAnimate,
+    active: showTooltip || alwaysShowTooltip,
+    hideDelay: 300
+  }, number || value, shouldAnimate)));
 }

package/cjs/components/slider/SliderTrack.js

@@ -43,15 +43,14 @@ function SliderMainTrack(_ref) {
       value = _useSliderProps.value,
       allProps = _useSliderProps.allProps,
       trackRef = _useSliderProps.trackRef,
-      jumpedTimeout = _useSliderProps.jumpedTimeout,
-      thumbState = _useSliderProps.thumbState;
+      animationTimeout = _useSliderProps.animationTimeout;
 
   var id = allProps.id,
       numberFormat = allProps.numberFormat,
       onInit = allProps.onInit;
 
   var _useSliderEvents = (0, _useSliderEvents2.useSliderEvents)(),
-      onTrackClickHandler = _useSliderEvents.onTrackClickHandler,
+      onTrackMouseUpHandler = _useSliderEvents.onTrackMouseUpHandler,
       onThumbMouseDownHandler = _useSliderEvents.onThumbMouseDownHandler,
       removeEvents = _useSliderEvents.removeEvents;
 
@@ -63,7 +62,7 @@ function SliderMainTrack(_ref) {
       };
 
       if (numberFormat) {
-        obj.number = (0, _SliderHelpers.formatNumber)(value, numberFormat);
+        obj.number = (0, _SliderHelpers.getFormattedNumber)(value, numberFormat);
       }
 
       (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onInit', obj);
@@ -71,21 +70,20 @@ function SliderMainTrack(_ref) {
 
     return function () {
       removeEvents();
-      clearTimeout(jumpedTimeout.current);
+      clearTimeout(animationTimeout.current);
     };
   }, []);
 
   var trackParams = {
-    className: 'dnb-slider__track' + (thumbState ? " dnb-slider__state--".concat(thumbState) : ""),
-    onTouchStart: onTrackClickHandler,
+    onTouchStart: onTrackMouseUpHandler,
     onTouchStartCapture: onThumbMouseDownHandler,
-    onMouseDown: onTrackClickHandler,
+    onMouseDown: onTrackMouseUpHandler,
     onMouseDownCapture: onThumbMouseDownHandler
   };
-  (0, _componentHelper.validateDOMAttributes)(null, trackParams);
   return _react.default.createElement("span", _extends({
     id: id,
-    ref: trackRef
+    ref: trackRef,
+    className: "dnb-slider__track"
   }, trackParams), children);
 }
 

package/cjs/components/slider/hooks/useSliderEvents.d.ts

@@ -2,9 +2,7 @@ import React from 'react';
 export declare function useSliderEvents(): {
     onThumbMouseDownHandler: (event: React.SyntheticEvent) => void;
     onThumbMouseUpHandler: () => void;
-    onTrackClickHandler: (event: MouseEvent | TouchEvent) => void;
-    onThumbFocusHandler: () => void;
-    onThumbBlurHandler: () => void;
+    onTrackMouseUpHandler: (event: MouseEvent | TouchEvent) => void;
     onHelperChangeHandler: (event: React.FormEvent<HTMLInputElement>) => void;
     onHelperFocusHandler: (event: React.FormEvent<HTMLInputElement>) => void;
     removeEvents: () => void;