@dnb/eufemia 9.28.0 → 9.29.0

package/cjs/components/slider/SliderProvider.js

@@ -0,0 +1,264 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.from.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.index-of.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SliderContext = void 0;
+exports.SliderProvider = SliderProvider;
+
+require("core-js/modules/es.array.reverse.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+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"));
+
+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"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+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 _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; }
+
+var defaultProps = {
+  statusState: 'error',
+  addTitle: '+',
+  subtractTitle: '−',
+  min: 0,
+  max: 100,
+  value: -1
+};
+
+var SliderContext = _react.default.createContext(null);
+
+exports.SliderContext = SliderContext;
+
+function SliderProvider(localProps) {
+  var context = _react.default.useContext(_Context.default);
+
+  var allProps = (0, _withSnakeCaseProps.convertSnakeCaseProps)((0, _hooks.usePropsWithContext)(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
+  }), context === null || context === void 0 ? void 0 : context.Slider));
+
+  var _React$useState = _react.default.useState(_componentHelper.makeUniqueId),
+      _React$useState2 = _slicedToArray(_React$useState, 1),
+      _id = _React$useState2[0];
+
+  if (!allProps.id) {
+    allProps.id = _id;
+  }
+
+  var step = allProps.step,
+      label = allProps.label,
+      labelDirection = allProps.labelDirection,
+      labelSrOnly = allProps.labelSrOnly,
+      status = allProps.status,
+      statusState = allProps.statusState,
+      statusProps = allProps.statusProps,
+      statusNoAnimation = allProps.statusNoAnimation,
+      globalStatusId = allProps.globalStatusId,
+      stretch = allProps.stretch,
+      suffix = allProps.suffix,
+      title = allProps.thumbTitle,
+      subtractTitle = allProps.subtractTitle,
+      addTitle = allProps.addTitle,
+      hideButtons = allProps.hideButtons,
+      numberFormat = allProps.numberFormat,
+      skeleton = allProps.skeleton,
+      max = allProps.max,
+      min = allProps.min,
+      disabled = allProps.disabled,
+      className = allProps.className,
+      id = allProps.id,
+      onInit = allProps.onInit,
+      onChange = allProps.onChange,
+      onDragStart = allProps.onDragStart,
+      onDragEnd = allProps.onDragEnd,
+      _vertical = allProps.vertical,
+      _reverse = allProps.reverse,
+      _value = allProps.value,
+      _children = allProps.children,
+      attributes = _objectWithoutProperties(allProps, _excluded);
+
+  var _React$useState3 = _react.default.useState(_value),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      value = _React$useState4[0],
+      setValue = _React$useState4[1];
+
+  var _React$useState5 = _react.default.useState('initial'),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      thumbState = _React$useState6[0],
+      setThumbState = _React$useState6[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(isVertical ? !(0, _componentHelper.isTrue)(_reverse) : (0, _componentHelper.isTrue)(_reverse)),
+      _React$useState10 = _slicedToArray(_React$useState9, 1),
+      isReverse = _React$useState10[0];
+
+  var isMulti = Array.isArray(value);
+
+  var setThumbIndex = function setThumbIndex(index) {
+    if (!isNaN(index)) {
+      thumbIndex.current = index;
+    }
+  };
+
+  if (allProps.use_scrollwheel) {
+    (0, _componentHelper.warn)('use_scrollwheel is not supported anymore!');
+  }
+
+  var getAndUpdateCurrentIndex = function getAndUpdateCurrentIndex(currentValue) {
+    var currentIndex = null;
+
+    if (thumbIndex.current > -1) {
+      currentIndex = thumbIndex.current;
+    } else {
+      currentIndex = (0, _SliderHelpers.closestIndex)(currentValue, value);
+      setThumbIndex(currentIndex);
+    }
+
+    return currentIndex;
+  };
+
+  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;
+
+      if (isMulti) {
+        var currentIndex = getAndUpdateCurrentIndex(currentValue);
+        newValue = (0, _SliderHelpers.getUpdatedValues)(value, currentIndex, currentValue);
+      }
+
+      if (typeof onChange === 'function') {
+        var obj = {
+          value: newValue,
+          rawValue: rawValue,
+          raw_value: rawValue,
+          event: event,
+          number: null
+        };
+
+        if (numberFormat) {
+          obj.number = (0, _SliderHelpers.formatNumber)(currentValue, numberFormat);
+        }
+
+        (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onChange', obj);
+      }
+
+      setValue(newValue);
+    }
+  };
+
+  _react.default.useEffect(function () {
+    if (isMulti) {
+      var hasChanged = _value.some(function (val, i) {
+        return val !== value[i];
+      });
+
+      if (hasChanged) {
+        setValue(_value);
+      }
+    } else {
+      setValue(_value);
+    }
+  }, [_value, isMulti]);
+
+  var trackRef = _react.default.useRef();
+
+  var jumpedTimeout = _react.default.useRef();
+
+  var setJumpedState = function setJumpedState() {
+    setThumbState('jumped');
+    clearTimeout(jumpedTimeout.current);
+    jumpedTimeout.current = setTimeout(function () {
+      return setThumbState('normal');
+    }, 100);
+  };
+
+  var showStatus = (0, _componentHelper.getStatusState)(status);
+  var showButtons = !isMulti && !(0, _componentHelper.isTrue)(hideButtons);
+  var values = isMulti ? value : [value];
+  return _react.default.createElement(SliderContext.Provider, {
+    value: {
+      isMulti: isMulti,
+      isReverse: isReverse,
+      isVertical: isVertical,
+      value: value,
+      values: values,
+      setValue: setValue,
+      attributes: attributes,
+      showStatus: showStatus,
+      showButtons: showButtons,
+      thumbState: thumbState,
+      setThumbState: setThumbState,
+      thumbIndex: thumbIndex,
+      setThumbIndex: setThumbIndex,
+      emitChange: emitChange,
+      allProps: allProps,
+      trackRef: trackRef,
+      setJumpedState: setJumpedState,
+      jumpedTimeout: jumpedTimeout
+    }
+  }, localProps.children);
+}

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function SliderThumb(): JSX.Element;

package/cjs/components/slider/SliderThumb.js

@@ -0,0 +1,137 @@
+"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.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SliderThumb = SliderThumb;
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.map.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _componentHelper = require("../../shared/component-helper");
+
+var _Button = _interopRequireDefault(require("../button/Button"));
+
+var _useSliderEvents2 = require("./hooks/useSliderEvents");
+
+var _useSliderProps2 = require("./hooks/useSliderProps");
+
+var _SliderHelpers = require("./SliderHelpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _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 _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,
+      showStatus = _useSliderProps.showStatus,
+      attributes = _useSliderProps.attributes,
+      allProps = _useSliderProps.allProps;
+
+  var id = allProps.id,
+      label = allProps.label,
+      min = allProps.min,
+      max = allProps.max,
+      step = allProps.step,
+      skeleton = allProps.skeleton,
+      disabled = allProps.disabled,
+      suffix = allProps.suffix,
+      numberFormat = allProps.numberFormat;
+
+  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) {
+    helperParams['aria-labelledby'] = (0, _componentHelper.combineLabelledBy)(helperParams, label ? id + '-label' : null);
+  }
+
+  if (showStatus || suffix) {
+    helperParams['aria-describedby'] = (0, _componentHelper.combineDescribedBy)(helperParams, showStatus ? id + '-status' : null, suffix ? id + '-suffix' : null);
+  }
+
+  (0, _componentHelper.validateDOMAttributes)(null, helperParams);
+  (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));
+
+    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))));
+  }));
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function SliderMainTrack({ children, }: {
+    children: React.ReactNode | React.ReactNode[];
+}): JSX.Element;
+export declare function SliderTrackBefore(): JSX.Element;
+export declare function SliderTrackAfter(): JSX.Element;

package/cjs/components/slider/SliderTrack.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SliderMainTrack = SliderMainTrack;
+exports.SliderTrackAfter = SliderTrackAfter;
+exports.SliderTrackBefore = SliderTrackBefore;
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.sort.js");
+
+require("core-js/modules/es.array.reverse.js");
+
+require("core-js/modules/es.object.assign.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _componentHelper = require("../../shared/component-helper");
+
+var _useSliderEvents2 = require("./hooks/useSliderEvents");
+
+var _useSliderProps3 = require("./hooks/useSliderProps");
+
+var _SliderHelpers = require("./SliderHelpers");
+
+var _span;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 SliderMainTrack(_ref) {
+  var children = _ref.children;
+
+  var _useSliderProps = (0, _useSliderProps3.useSliderProps)(),
+      isMulti = _useSliderProps.isMulti,
+      value = _useSliderProps.value,
+      allProps = _useSliderProps.allProps,
+      trackRef = _useSliderProps.trackRef,
+      jumpedTimeout = _useSliderProps.jumpedTimeout,
+      thumbState = _useSliderProps.thumbState;
+
+  var id = allProps.id,
+      numberFormat = allProps.numberFormat,
+      onInit = allProps.onInit;
+
+  var _useSliderEvents = (0, _useSliderEvents2.useSliderEvents)(),
+      onTrackClickHandler = _useSliderEvents.onTrackClickHandler,
+      onThumbMouseDownHandler = _useSliderEvents.onThumbMouseDownHandler,
+      removeEvents = _useSliderEvents.removeEvents;
+
+  _react.default.useEffect(function () {
+    if (typeof onInit === 'function' && !isMulti) {
+      var obj = {
+        value: value,
+        number: null
+      };
+
+      if (numberFormat) {
+        obj.number = (0, _SliderHelpers.formatNumber)(value, numberFormat);
+      }
+
+      (0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onInit', obj);
+    }
+
+    return function () {
+      removeEvents();
+      clearTimeout(jumpedTimeout.current);
+    };
+  }, []);
+
+  var trackParams = {
+    className: 'dnb-slider__track' + (thumbState ? " dnb-slider__state--".concat(thumbState) : ""),
+    onTouchStart: onTrackClickHandler,
+    onTouchStartCapture: onThumbMouseDownHandler,
+    onMouseDown: onTrackClickHandler,
+    onMouseDownCapture: onThumbMouseDownHandler
+  };
+  (0, _componentHelper.validateDOMAttributes)(null, trackParams);
+  return _react.default.createElement("span", _extends({
+    id: id,
+    ref: trackRef
+  }, trackParams), children);
+}
+
+var trackObj = [['right', 'left'], ['bottom', 'top']];
+
+function SliderTrackBefore() {
+  var _useSliderProps2 = (0, _useSliderProps3.useSliderProps)(),
+      origValues = _useSliderProps2.values,
+      isVertical = _useSliderProps2.isVertical,
+      thumbIndex = _useSliderProps2.thumbIndex,
+      _useSliderProps2$allP = _useSliderProps2.allProps,
+      min = _useSliderProps2$allP.min,
+      max = _useSliderProps2$allP.max;
+
+  var values = origValues.sort(function (a, b) {
+    return a - b;
+  });
+  var isBetween = values.length >= 2;
+
+  if (isBetween && values[0] > values[values.length - 1]) {
+    values.reverse();
+  }
+
+  var index = thumbIndex.current;
+  var upperValue = values[isBetween ? 0 : index > -1 ? index : 0];
+  var upperPercent = isBetween ? (0, _SliderHelpers.clamp)((upperValue - min) * 100 / (max - min)) : 0;
+  var lowerValue = values[isBetween ? values.length - 1 : index > -1 ? index : 0];
+  var lowerPercent = 100 - (0, _SliderHelpers.clamp)((lowerValue - min) * 100 / (max - min));
+  var units = [trackObj[isVertical ? 1 : 0][0], trackObj[isVertical ? 1 : 0][1]];
+  var style = {};
+  style[units[0]] = "".concat(lowerPercent, "%");
+  style[units[1]] = "".concat(upperPercent, "%");
+  return _react.default.createElement("span", {
+    className: "dnb-slider__line dnb-slider__line__before",
+    style: style
+  });
+}
+
+function SliderTrackAfter() {
+  return _span || (_span = _react.default.createElement("span", {
+    className: "dnb-slider__line dnb-slider__line__after"
+  }));
+}

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

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