@dnb/eufemia 9.29.0 → 9.31.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 type { SliderProps, ValueTypes } from './types';
-import { ISpacingProps } from '../../shared/interfaces';
-export type { SliderProps, ValueTypes };
-declare function Slider(localProps: SliderProps & ISpacingProps): JSX.Element;
+import type { SliderAllProps } from './types';
+export * from './types';
+declare function Slider(localProps: SliderAllProps): JSX.Element;
 export default Slider;

package/cjs/components/slider/Slider.js

@@ -1,8 +1,15 @@
 "use strict";
 
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.keys.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {};
 exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
@@ -11,6 +18,20 @@ var _SliderProvider = require("./SliderProvider");
 
 var _SliderInstance2 = require("./SliderInstance");
 
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+
 var _SliderInstance;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/cjs/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/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");
 
@@ -71,7 +71,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 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); }
 
-var percentToValue = function percentToValue(percent, min, max) {
+var percentToValue = function percentToValue(percent, min, max, isReverse) {
   if (typeof min === 'string') {
     min = parseFloat(min);
   }
@@ -80,7 +80,13 @@ 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;
 };
 
 exports.percentToValue = percentToValue;
@@ -127,7 +133,7 @@ var getMousePosition = function getMousePosition(event) {
 
 exports.getMousePosition = getMousePosition;
 
-var calculatePercent = function calculatePercent(node, event, isVertical, isReverted) {
+var calculatePercent = function calculatePercent(node, event, isVertical) {
   var _node$getBoundingClie2 = node.getBoundingClientRect(),
       width = _node$getBoundingClie2.width,
       height = _node$getBoundingClie2.height;
@@ -142,7 +148,7 @@ var calculatePercent = function calculatePercent(node, event, isVertical, isReve
 
   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));
 };
 
 exports.calculatePercent = calculatePercent;
@@ -211,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, isReverse && 'dnb-slider--reverse', 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", "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 }; }
 
@@ -74,7 +72,8 @@ var defaultProps = {
   subtractTitle: '−',
   min: 0,
   max: 100,
-  value: -1
+  value: -1,
+  multiThumbBehavior: 'swap'
 };
 
 var SliderContext = _react.default.createContext(null);
@@ -84,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
@@ -113,7 +112,10 @@ 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,
@@ -135,20 +137,32 @@ function SliderProvider(localProps) {
       value = _React$useState4[0],
       setValue = _React$useState4[1];
 
-  var _React$useState5 = _react.default.useState('initial'),
+  var _React$useState5 = _react.default.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.default.useRef(_value);
+
+  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);
 
@@ -175,24 +189,57 @@ function SliderProvider(localProps) {
     return currentIndex;
   };
 
+  var updateValue = function updateValue(value) {
+    setValue(value);
+    realtimeValue.current = value;
+  };
+
   var emitChange = function emitChange(event, rawValue) {
     if (disabled || (0, _componentHelper.isTrue)(skeleton)) {
       return;
     }
 
-    var currentValue = (0, _SliderHelpers.roundValue)(rawValue, step);
-
-    if (currentValue > -1 && rawValue !== value) {
-      var newValue = currentValue;
+    var numberValue = (0, _SliderHelpers.roundValue)(rawValue, step);
+    var multiValues = numberValue;
 
+    if (numberValue > -1) {
       if (isMulti) {
-        var currentIndex = getAndUpdateCurrentIndex(currentValue);
-        newValue = (0, _SliderHelpers.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 = (0, _SliderHelpers.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,
@@ -200,40 +247,45 @@ function SliderProvider(localProps) {
         };
 
         if (numberFormat) {
-          obj.number = (0, _SliderHelpers.formatNumber)(currentValue, numberFormat);
+          obj.number = (0, _SliderHelpers.getFormattedNumber)(numberValue, numberFormat).number;
         }
 
         (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onChange', obj);
       }
 
-      setValue(newValue);
+      updateValue(multiValues);
     }
   };
 
   _react.default.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.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);
@@ -244,6 +296,7 @@ function SliderProvider(localProps) {
       isMulti: isMulti,
       isReverse: isReverse,
       isVertical: isVertical,
+      shouldAnimate: shouldAnimate,
       value: value,
       values: values,
       setValue: setValue,
@@ -257,8 +310,8 @@ function SliderProvider(localProps) {
       emitChange: emitChange,
       allProps: allProps,
       trackRef: trackRef,
-      setJumpedState: setJumpedState,
-      jumpedTimeout: jumpedTimeout
+      setShouldAnimate: setShouldAnimate,
+      animationTimeout: animationTimeout
     }
   }, localProps.children);
 }