@dnb/eufemia 9.29.0 → 9.31.0

package/components/slider/SliderHelpers.d.ts

@@ -1,6 +1,6 @@
-import { formatOptionParams, formatValue, formatReturnType } from '../number-format/NumberUtils';
-import type { ValueTypes } from './types';
-export declare const percentToValue: (percent: number, min: number, max: number) => number;
+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) => {
     top: number;
@@ -10,7 +10,7 @@ export declare const getMousePosition: (event: MouseEvent & TouchEvent) => {
     x: number;
     y: number;
 };
-export declare const calculatePercent: (node: HTMLElement, event: MouseEvent | TouchEvent, isVertical: boolean, isReverted: boolean) => number;
+export declare const calculatePercent: (node: HTMLElement, event: MouseEvent | TouchEvent, isVertical: boolean) => number;
 export declare const clamp: (value: number, min?: number, max?: number) => number;
 export declare const roundValue: (value: number, step: number) => number;
 export declare const createMockDiv: ({ width, height }: {
@@ -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/components/slider/SliderHelpers.js

@@ -19,7 +19,7 @@ import "core-js/modules/es.object.get-own-property-descriptor.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
 import { format } from '../number-format/NumberUtils';
-export var percentToValue = function percentToValue(percent, min, max) {
+export var percentToValue = function percentToValue(percent, min, max, isReverse) {
   if (typeof min === 'string') {
     min = parseFloat(min);
   }
@@ -28,7 +28,13 @@ export var percentToValue = function percentToValue(percent, min, max) {
     max = parseFloat(max);
   }
 
-  return (max - min) * percent / 100 + min;
+  var num = (max - min) * percent / 100 + min;
+
+  if (isReverse) {
+    num = max + min - num;
+  }
+
+  return num;
 };
 export var roundToStep = function roundToStep(number, step) {
   return Math.round(number / step) * step;
@@ -63,7 +69,7 @@ export var getMousePosition = function getMousePosition(event) {
     y: event.pageY
   };
 };
-export var calculatePercent = function calculatePercent(node, event, isVertical, isReverted) {
+export var calculatePercent = function calculatePercent(node, event, isVertical) {
   var _node$getBoundingClie2 = node.getBoundingClientRect(),
       width = _node$getBoundingClie2.width,
       height = _node$getBoundingClie2.height;
@@ -78,7 +84,7 @@ export var calculatePercent = function calculatePercent(node, event, isVertical,
 
   var value = isVertical ? y - top : x - left;
   var onePercent = (isVertical ? height : width) / 100;
-  return Math.abs((isReverted ? 100 : 0) - clamp(value / onePercent));
+  return Math.abs(clamp(value / onePercent));
 };
 export var clamp = function clamp(value) {
   var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -129,24 +135,23 @@ export var closestIndex = function closestIndex(goal, array) {
     return num === res;
   });
 };
-export var formatNumber = function formatNumber(value) {
-  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+export var getFormattedNumber = function getFormattedNumber(value, numberFormat) {
+  if (numberFormat) {
+    if (typeof numberFormat === 'function') {
+      var number = numberFormat(value);
+      return {
+        number: number,
+        aria: number
+      };
+    }
 
-  if (opts) {
-    return format(value, opts);
+    return format(value, _objectSpread(_objectSpread({}, numberFormat || {}), {}, {
+      returnAria: true
+    }));
   }
 
-  return value;
-};
-export 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
+  };
 };

package/components/slider/SliderInstance.js

@@ -15,10 +15,10 @@ import Suffix from '../../shared/helpers/Suffix';
 import Button from '../button/Button';
 import FormLabel from '../form-label/FormLabel';
 import FormStatus from '../form-status/FormStatus';
-import { SliderMainTrack, SliderTrackAfter, SliderTrackBefore } from './SliderTrack';
+import { SliderMainTrack, SliderTrackBefore, SliderTrackAfter } from './SliderTrack';
 import { SliderThumb } from './SliderThumb';
 import { useSliderProps } from './hooks/useSliderProps';
-import { clamp, getHumanNumber } from './SliderHelpers';
+import { clamp, getFormattedNumber } from './SliderHelpers';
 export function SliderInstance() {
   var context = React.useContext(Context);
 
@@ -27,6 +27,7 @@ export function SliderInstance() {
       isVertical = _useSliderProps.isVertical,
       showButtons = _useSliderProps.showButtons,
       showStatus = _useSliderProps.showStatus,
+      shouldAnimate = _useSliderProps.shouldAnimate,
       allProps = _useSliderProps.allProps;
 
   var id = allProps.id,
@@ -43,7 +44,7 @@ export function SliderInstance() {
       disabled = allProps.disabled,
       className = allProps.className;
   var mainParams = {
-    className: classnames("dnb-slider dnb-form-component", createSkeletonClass(null, skeleton), createSpacingClasses(allProps), className, isReverse && 'dnb-slider--reverse', isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', !showButtons && 'dnb-slider--no-buttons', isTrue(stretch) && 'dnb-slider--stretch', label && labelDirection && "dnb-slider__label--".concat(labelDirection), showStatus && 'dnb-slider__form-status', status && "dnb-slider__status--".concat(statusState))
+    className: classnames("dnb-slider dnb-form-component", createSkeletonClass(null, skeleton), createSpacingClasses(allProps), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', shouldAnimate && 'dnb-slider__state--animate', !showButtons && 'dnb-slider--no-buttons', 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.createElement(SubtractButton, null)) : null;
   var addButton = showButtons ? _AddButton || (_AddButton = React.createElement(AddButton, null)) : null;
@@ -110,13 +111,13 @@ function SubtractButton() {
     subtractParams['aria-hidden'] = attributes['aria-hidden'];
   }
 
-  var humanNumber = getHumanNumber(value, numberFormat);
+  var humanNumber = getFormattedNumber(value, numberFormat);
   return React.createElement(Button, _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
@@ -148,13 +149,13 @@ function AddButton() {
     addParams['aria-hidden'] = attributes['aria-hidden'];
   }
 
-  var humanNumber = getHumanNumber(value, numberFormat);
+  var humanNumber = getFormattedNumber(value, numberFormat);
   return React.createElement(Button, _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/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/components/slider/SliderProvider.js

@@ -1,14 +1,13 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatusId", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "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"];
 import "core-js/modules/es.array.reverse.js";
 import "core-js/modules/es.object.to-string.js";
 import React from 'react';
 import { includeValidProps } from '../../components/form-row/FormRowHelpers';
-import { usePropsWithContext } from '../../shared/hooks';
-import { warn, isTrue, makeUniqueId, dispatchCustomElementEvent, getStatusState } from '../../shared/component-helper';
+import { warn, isTrue, makeUniqueId, dispatchCustomElementEvent, getStatusState, extendPropsWithContext } from '../../shared/component-helper';
 import Context from '../../shared/Context';
-import { closestIndex, formatNumber, getUpdatedValues, roundValue } from './SliderHelpers';
+import { closestIndex, getFormattedNumber, getUpdatedValues, roundValue } from './SliderHelpers';
 import { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps';
 var defaultProps = {
   statusState: 'error',
@@ -16,12 +15,13 @@ var defaultProps = {
   subtractTitle: '−',
   min: 0,
   max: 100,
-  value: -1
+  value: -1,
+  multiThumbBehavior: 'swap'
 };
 export var SliderContext = React.createContext(null);
 export function SliderProvider(localProps) {
   var context = React.useContext(Context);
-  var allProps = convertSnakeCaseProps(usePropsWithContext(localProps, defaultProps, {
+  var allProps = convertSnakeCaseProps(extendPropsWithContext(localProps, defaultProps, {
     skeleton: context === null || context === void 0 ? void 0 : context.skeleton
   }, context === null || context === void 0 ? void 0 : context.getTranslation(localProps).Slider, includeValidProps(context === null || context === void 0 ? void 0 : context.FormRow, {
     vertical: null
@@ -50,7 +50,10 @@ export function SliderProvider(localProps) {
       subtractTitle = allProps.subtractTitle,
       addTitle = allProps.addTitle,
       hideButtons = allProps.hideButtons,
+      multiThumbBehavior = allProps.multiThumbBehavior,
       numberFormat = allProps.numberFormat,
+      tooltip = allProps.tooltip,
+      alwaysShowTooltip = allProps.alwaysShowTooltip,
       skeleton = allProps.skeleton,
       max = allProps.max,
       min = allProps.min,
@@ -72,20 +75,32 @@ export function SliderProvider(localProps) {
       value = _React$useState4[0],
       setValue = _React$useState4[1];
 
-  var _React$useState5 = React.useState('initial'),
+  var _React$useState5 = React.useState(_value),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      thumbState = _React$useState6[0],
-      setThumbState = _React$useState6[1];
+      externValue = _React$useState6[0],
+      updateExternValue = _React$useState6[1];
+
+  var realtimeValue = React.useRef(_value);
+
+  var _React$useState7 = React.useState('initial'),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      thumbState = _React$useState8[0],
+      setThumbState = _React$useState8[1];
 
   var thumbIndex = React.useRef(-1);
 
-  var _React$useState7 = React.useState(isTrue(_vertical)),
-      _React$useState8 = _slicedToArray(_React$useState7, 1),
-      isVertical = _React$useState8[0];
+  var _React$useState9 = React.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      shouldAnimate = _React$useState10[0],
+      updateAnimateState = _React$useState10[1];
+
+  var _React$useState11 = React.useState(isTrue(_vertical)),
+      _React$useState12 = _slicedToArray(_React$useState11, 1),
+      isVertical = _React$useState12[0];
 
-  var _React$useState9 = React.useState(isVertical ? !isTrue(_reverse) : isTrue(_reverse)),
-      _React$useState10 = _slicedToArray(_React$useState9, 1),
-      isReverse = _React$useState10[0];
+  var _React$useState13 = React.useState(isVertical ? !isTrue(_reverse) : isTrue(_reverse)),
+      _React$useState14 = _slicedToArray(_React$useState13, 1),
+      isReverse = _React$useState14[0];
 
   var isMulti = Array.isArray(value);
 
@@ -112,24 +127,57 @@ export function SliderProvider(localProps) {
     return currentIndex;
   };
 
+  var updateValue = function updateValue(value) {
+    setValue(value);
+    realtimeValue.current = value;
+  };
+
   var emitChange = function emitChange(event, rawValue) {
     if (disabled || isTrue(skeleton)) {
       return;
     }
 
-    var currentValue = roundValue(rawValue, step);
-
-    if (currentValue > -1 && rawValue !== value) {
-      var newValue = currentValue;
+    var numberValue = roundValue(rawValue, step);
+    var multiValues = numberValue;
 
+    if (numberValue > -1) {
       if (isMulti) {
-        var currentIndex = getAndUpdateCurrentIndex(currentValue);
-        newValue = getUpdatedValues(value, currentIndex, currentValue);
+        var currentIndex = getAndUpdateCurrentIndex(numberValue);
+        var lower = realtimeValue.current[currentIndex - 1];
+        var upper = realtimeValue.current[currentIndex + 1];
+
+        if (multiThumbBehavior === 'omit') {
+          if (numberValue < lower) {
+            numberValue = lower;
+          }
+
+          if (numberValue > upper) {
+            numberValue = upper;
+          }
+        }
+
+        multiValues = getUpdatedValues(multiThumbBehavior === 'push' ? realtimeValue.current : value, currentIndex, numberValue);
+
+        if (multiThumbBehavior === 'push') {
+          if (typeof lower !== 'undefined' && numberValue < lower) {
+            multiValues[currentIndex - 1] = numberValue;
+          }
+
+          if (typeof upper !== 'undefined' && numberValue >= upper) {
+            multiValues[currentIndex + 1] = numberValue;
+          }
+        }
+
+        if (numberValue === realtimeValue.current[currentIndex]) {
+          return;
+        }
+      } else if (numberValue === realtimeValue.current) {
+        return;
       }
 
       if (typeof onChange === 'function') {
         var obj = {
-          value: newValue,
+          value: multiValues,
           rawValue: rawValue,
           raw_value: rawValue,
           event: event,
@@ -137,38 +185,43 @@ export function SliderProvider(localProps) {
         };
 
         if (numberFormat) {
-          obj.number = formatNumber(currentValue, numberFormat);
+          obj.number = getFormattedNumber(numberValue, numberFormat).number;
         }
 
         dispatchCustomElementEvent(allProps, 'onChange', obj);
       }
 
-      setValue(newValue);
+      updateValue(multiValues);
     }
   };
 
   React.useEffect(function () {
     if (isMulti) {
       var hasChanged = _value.some(function (val, i) {
-        return val !== value[i];
+        return val !== externValue[i];
       });
 
       if (hasChanged) {
-        setValue(_value);
+        updateValue(_value);
+        updateExternValue(_value);
       }
-    } else {
-      setValue(_value);
+    } else if (_value !== externValue) {
+      updateValue(_value);
+      updateExternValue(_value);
     }
   }, [_value, isMulti]);
   var trackRef = React.useRef();
-  var jumpedTimeout = React.useRef();
-
-  var setJumpedState = function setJumpedState() {
-    setThumbState('jumped');
-    clearTimeout(jumpedTimeout.current);
-    jumpedTimeout.current = setTimeout(function () {
-      return setThumbState('normal');
-    }, 100);
+  var animationTimeout = React.useRef();
+
+  var setShouldAnimate = function setShouldAnimate(state) {
+    updateAnimateState(state);
+    clearTimeout(animationTimeout.current);
+
+    if (state) {
+      animationTimeout.current = setTimeout(function () {
+        return updateAnimateState(false);
+      }, 250);
+    }
   };
 
   var showStatus = getStatusState(status);
@@ -179,6 +232,7 @@ export function SliderProvider(localProps) {
       isMulti: isMulti,
       isReverse: isReverse,
       isVertical: isVertical,
+      shouldAnimate: shouldAnimate,
       value: value,
       values: values,
       setValue: setValue,
@@ -192,8 +246,8 @@ export function SliderProvider(localProps) {
       emitChange: emitChange,
       allProps: allProps,
       trackRef: trackRef,
-      setJumpedState: setJumpedState,
-      jumpedTimeout: jumpedTimeout
+      setShouldAnimate: setShouldAnimate,
+      animationTimeout: animationTimeout
     }
   }, localProps.children);
 }

package/components/slider/SliderThumb.js

@@ -1,16 +1,6 @@
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
-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 _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; }
-
 import "core-js/modules/es.array.iterator.js";
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/web.dom-collections.iterator.js";
@@ -18,17 +8,35 @@ import "core-js/modules/es.array.map.js";
 import React from 'react';
 import { combineDescribedBy, combineLabelledBy, validateDOMAttributes } from '../../shared/component-helper';
 import Button from '../button/Button';
+import Tooltip from '../tooltip/Tooltip';
 import { useSliderEvents } from './hooks/useSliderEvents';
 import { useSliderProps } from './hooks/useSliderProps';
-import { clamp, getHumanNumber } from './SliderHelpers';
+import { clamp, getFormattedNumber } from './SliderHelpers';
 export function SliderThumb() {
   var _useSliderProps = useSliderProps(),
-      values = _useSliderProps.values,
-      thumbIndex = _useSliderProps.thumbIndex,
-      isVertical = _useSliderProps.isVertical,
-      showStatus = _useSliderProps.showStatus,
-      attributes = _useSliderProps.attributes,
-      allProps = _useSliderProps.allProps;
+      values = _useSliderProps.values;
+
+  return React.createElement(React.Fragment, null, values.map(function (value, i) {
+    return React.createElement(Thumb, {
+      key: i,
+      value: value,
+      currentIndex: i
+    });
+  }));
+}
+
+function Thumb(_ref) {
+  var value = _ref.value,
+      currentIndex = _ref.currentIndex;
+
+  var _useSliderProps2 = 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,
@@ -38,21 +46,43 @@ export 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 = 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 = getFormattedNumber(value, numberFormat),
+      number = _getFormattedNumber.number,
+      aria = _getFormattedNumber.aria;
+
+  var _React$useState = React.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 = 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) {
@@ -63,47 +93,56 @@ export function SliderThumb() {
     helperParams['aria-describedby'] = combineDescribedBy(helperParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
   }
 
-  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();
+    };
+  }
+
   validateDOMAttributes(allProps, thumbParams);
-  return React.createElement(React.Fragment, null, values.map(function (value, i) {
-    var index = thumbIndex.current;
-    var percent = clamp((value - min) * 100 / (max - min));
-
-    var style = _defineProperty({
-      zIndex: index === i ? 4 : 3
-    }, "".concat(isVertical ? 'top' : 'left'), "".concat(percent, "%"));
-
-    var humanNumber = getHumanNumber(value, numberFormat);
-    return React.createElement(React.Fragment, {
-      key: i
-    }, React.createElement("span", {
-      className: "dnb-slider__thumb",
-      style: style
-    }, React.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.createElement(Button, _extends({
-      element: "span",
-      type: "",
-      variant: "secondary",
-      disabled: disabled,
-      skeleton: skeleton,
-      "data-index": i,
-      onMouseDown: onThumbMouseDownHandler,
-      onMouseUp: onThumbMouseUpHandler
-    }, thumbParams))));
-  }));
+  var elemRef = React.useRef();
+  return React.createElement(React.Fragment, null, React.createElement("span", {
+    className: "dnb-slider__thumb",
+    style: style,
+    ref: elemRef
+  }, React.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.createElement(Button, _extends({
+    element: "span",
+    type: "",
+    variant: "secondary",
+    disabled: disabled,
+    skeleton: skeleton
+  }, thumbParams)), tooltip && React.createElement(Tooltip, {
+    key: "group-".concat(currentIndex),
+    targetElement: elemRef,
+    animatePosition: shouldAnimate,
+    active: showTooltip || alwaysShowTooltip,
+    hideDelay: 300
+  }, number || value, shouldAnimate)));
 }