@megafon/ui-core 5.8.0 → 5.9.0

package/dist/es/components/Sliders/SliderRatio/SliderRatio.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
+import { ValueType } from './types';
+import './SliderRatio.less';
+export interface ISliderRatio {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Список значений */
+    values: ValueType[];
+    /** Индекс текущего значения */
+    index?: number;
+    /** Лейбл */
+    label?: string;
+    /** Тип выводимого значения */
+    displayValueType?: DisplayValueType;
+    /** Префикс для выводимого значения слева */
+    displayLeftValuePrefix?: string;
+    /** Префикс для выводимого значения справа */
+    displayRightValuePrefix?: string;
+    /** Единица измерения выводимого значения слева */
+    displayLeftValueUnit?: string;
+    /** Единица измерения выводимого значения справа */
+    displayRightValueUnit?: string;
+    /** Переводит компонент в контролируемое состояние */
+    isControlled?: boolean;
+    /** Переводит компонент в выключенное состояние */
+    disabled?: boolean;
+    /** Включает отображение шкалы */
+    showScale?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        leftInput?: Record<string, string>;
+        rightInput?: Record<string, string>;
+        rangeInput?: Record<string, string>;
+        scale?: Record<string, string>;
+    };
+    /** Обработчик изменения значения */
+    onChange?: (index: number) => void;
+}
+declare const SliderRatio: React.FC<ISliderRatio>;
+export default SliderRatio;

package/dist/es/components/Sliders/SliderRatio/SliderRatio.js

@@ -0,0 +1,206 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.array.find-index.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.values.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import SliderDisplayValue, { DisplayValue } from "../components/SliderDisplayValue/SliderDisplayValue";
+import { getTrackSize } from "../helpers";
+import { findClosestValue, getIndexByRangeValue, getRangeStepValue, inputReducer, getRangeValueByPageX } from "./helpers";
+import { KeyValueEnum } from "./types";
+import "./SliderRatio.css";
+var THUMB_SIZE = 24;
+var MIN_RANGE_VALUE = 0;
+var MAX_RANGE_VALUE = 100;
+var cn = cnCreate('mfui-slider-ratio');
+
+var SliderRatio = function SliderRatio(_ref) {
+  var className = _ref.className,
+      label = _ref.label,
+      _ref$displayValueType = _ref.displayValueType,
+      displayValueType = _ref$displayValueType === void 0 ? DisplayValue.LINE : _ref$displayValueType,
+      displayLeftValuePrefix = _ref.displayLeftValuePrefix,
+      displayRightValuePrefix = _ref.displayRightValuePrefix,
+      displayLeftValueUnit = _ref.displayLeftValueUnit,
+      displayRightValueUnit = _ref.displayRightValueUnit,
+      values = _ref.values,
+      _ref$index = _ref.index,
+      outerIndex = _ref$index === void 0 ? 0 : _ref$index,
+      _ref$isControlled = _ref.isControlled,
+      isControlled = _ref$isControlled === void 0 ? false : _ref$isControlled,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$showScale = _ref.showScale,
+      showScale = _ref$showScale === void 0 ? false : _ref$showScale,
+      dataAttrs = _ref.dataAttrs,
+      onChange = _ref.onChange;
+
+  var _a, _b;
+
+  var stepCount = values.length - 1;
+
+  var _React$useState = React.useState(outerIndex),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      innerIndex = _React$useState2[0],
+      setInnerIndex = _React$useState2[1];
+
+  var _React$useReducer = React.useReducer(inputReducer, {
+    left: null,
+    right: null
+  }),
+      _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
+      rawInputValue = _React$useReducer2[0],
+      dispatchRawInputValue = _React$useReducer2[1];
+
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      rawRangeValue = _React$useState4[0],
+      setRawRangeValue = _React$useState4[1];
+
+  var currentIndex = isControlled ? outerIndex : innerIndex;
+  var rangeValue = rawRangeValue !== null && rawRangeValue !== void 0 ? rawRangeValue : getRangeStepValue(stepCount, currentIndex);
+  var leftInputValue = (_a = rawInputValue.left) !== null && _a !== void 0 ? _a : values[currentIndex].leftValue;
+  var rightInputValue = (_b = rawInputValue.right) !== null && _b !== void 0 ? _b : values[currentIndex].rightValue;
+  var trackSize = getTrackSize(rangeValue, MIN_RANGE_VALUE, MAX_RANGE_VALUE);
+
+  var handleInputChange = function handleInputChange(key) {
+    return function (e) {
+      var targetValue = e.target.value;
+      var closestValue = findClosestValue(values, Number(targetValue), key);
+      var newIndex = values.findIndex(function (value) {
+        return value[key] === closestValue;
+      });
+      setRawRangeValue(null);
+      !isControlled && setInnerIndex(newIndex);
+      dispatchRawInputValue({
+        type: key,
+        value: targetValue
+      });
+    };
+  };
+
+  var handleRangeInputChange = function handleRangeInputChange(e) {
+    setRawRangeValue(Number(e.target.value));
+  };
+
+  var handleRangeInputPointerUp = function handleRangeInputPointerUp() {
+    var newIndex = getIndexByRangeValue(rangeValue, stepCount);
+    setRawRangeValue(null);
+    !isControlled && setInnerIndex(newIndex);
+    newIndex !== currentIndex && (onChange === null || onChange === void 0 ? void 0 : onChange(newIndex));
+  };
+
+  var handleRangeTrackClick = function handleRangeTrackClick(e) {
+    var currentTarget = e.currentTarget;
+    var newRangeValue = getRangeValueByPageX(e.pageX, currentTarget, THUMB_SIZE);
+    var newIndex = getIndexByRangeValue(newRangeValue, stepCount);
+    setRawRangeValue(null);
+    !isControlled && setInnerIndex(newIndex);
+    newIndex !== currentIndex && (onChange === null || onChange === void 0 ? void 0 : onChange(newIndex));
+  };
+
+  var handleInputBlur = function handleInputBlur(key) {
+    return function () {
+      onChange === null || onChange === void 0 ? void 0 : onChange(currentIndex);
+      dispatchRawInputValue({
+        type: key,
+        value: null
+      });
+    };
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      disabled: disabled
+    }, [className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    style: {
+      '--thumbSize': "".concat(THUMB_SIZE, "px")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('head')
+  }, !!label && /*#__PURE__*/React.createElement("div", {
+    className: cn('label')
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: cn('display-values')
+  }, /*#__PURE__*/React.createElement(SliderDisplayValue, {
+    value: leftInputValue,
+    displayValueType: displayValueType,
+    displayValuePrefix: displayLeftValuePrefix,
+    displayValueUnit: displayLeftValueUnit,
+    disabled: disabled,
+    onChange: handleInputChange(KeyValueEnum.LEFT),
+    onBlur: handleInputBlur(KeyValueEnum.LEFT),
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
+    }
+  }), /*#__PURE__*/React.createElement(SliderDisplayValue, {
+    value: rightInputValue,
+    displayValueType: displayValueType,
+    displayValuePrefix: displayRightValuePrefix,
+    displayValueUnit: displayRightValueUnit,
+    disabled: disabled,
+    onChange: handleInputChange(KeyValueEnum.RIGHT),
+    onBlur: handleInputBlur(KeyValueEnum.RIGHT),
+    dataAttrs: {
+      input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rightInput
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: cn('range-container')
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: cn('range-input'),
+    type: "range",
+    value: rangeValue,
+    min: MIN_RANGE_VALUE,
+    max: MAX_RANGE_VALUE,
+    onChange: handleRangeInputChange,
+    onPointerUp: handleRangeInputPointerUp,
+    disabled: disabled,
+    style: {
+      backgroundSize: "".concat(trackSize, "% 100%")
+    }
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.rangeInput))), /*#__PURE__*/React.createElement("div", {
+    className: cn('range-track'),
+    onClick: disabled ? undefined : handleRangeTrackClick
+  }), showScale && /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('scale')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.scale)), values.map(function (_, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('scale-item'),
+      key: i
+    });
+  }))));
+};
+
+SliderRatio.propTypes = {
+  className: PropTypes.string,
+  values: PropTypes.arrayOf(PropTypes.shape({
+    leftValue: PropTypes.number.isRequired,
+    rightValue: PropTypes.number.isRequired
+  }).isRequired).isRequired,
+  index: PropTypes.number,
+  label: PropTypes.string,
+  displayValueType: PropTypes.oneOf(Object.values(DisplayValue)),
+  displayLeftValuePrefix: PropTypes.string,
+  displayRightValuePrefix: PropTypes.string,
+  displayLeftValueUnit: PropTypes.string,
+  displayRightValueUnit: PropTypes.string,
+  isControlled: PropTypes.bool,
+  disabled: PropTypes.bool,
+  showScale: PropTypes.bool,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    leftInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    rightInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    rangeInput: PropTypes.objectOf(PropTypes.string.isRequired),
+    scale: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  onChange: PropTypes.func
+};
+export default SliderRatio;

package/dist/es/components/Sliders/SliderRatio/helpers.d.ts

@@ -0,0 +1,15 @@
+import { KeyValueEnum, ValueType } from './types';
+export declare const inputReducer: (state: {
+    left: string | null;
+    right: string | null;
+}, action: {
+    type: KeyValueEnum;
+    value: string | null;
+}) => {
+    left: string | null;
+    right: string | null;
+};
+export declare const getRangeValueByPageX: (pageX: number, trackInnerNode: HTMLDivElement, thumbSize: number) => number;
+export declare const getRangeStepValue: (valuesCount: number, index: number) => number;
+export declare const getIndexByRangeValue: (rangeValue: number, valuesCount: number) => number;
+export declare const findClosestValue: (values: ValueType[], target: number, key: KeyValueEnum) => number;

package/dist/es/components/Sliders/SliderRatio/helpers.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.reduce.js";
+import { KeyValueEnum } from "./types";
+export var inputReducer = function inputReducer(state, action) {
+  if (action.type === KeyValueEnum.LEFT) {
+    return _extends(_extends({}, state), {
+      left: action.value
+    });
+  }
+
+  return _extends(_extends({}, state), {
+    right: action.value
+  });
+};
+export var getRangeValueByPageX = function getRangeValueByPageX(pageX, trackInnerNode, thumbSize) {
+  var clickPosition = pageX - (trackInnerNode.getBoundingClientRect().left + thumbSize / 2);
+  var clickPositionPercent = clickPosition * 100 / (trackInnerNode.offsetWidth - thumbSize);
+  return Math.round(clickPositionPercent);
+};
+export var getRangeStepValue = function getRangeStepValue(valuesCount, index) {
+  var step = 100 / valuesCount;
+  return step * index;
+};
+export var getIndexByRangeValue = function getIndexByRangeValue(rangeValue, valuesCount) {
+  var step = 100 / valuesCount;
+  return Math.round(rangeValue / step);
+};
+export var findClosestValue = function findClosestValue(values, target, key) {
+  return values.reduce(function (closest, value) {
+    return Math.abs(value[key] - target) > Math.abs(closest - target) ? closest : value[key];
+  }, values[0][key]);
+};

package/dist/es/components/Sliders/SliderRatio/types.d.ts

@@ -0,0 +1,8 @@
+export declare enum KeyValueEnum {
+    LEFT = "leftValue",
+    RIGHT = "rightValue"
+}
+export declare type ValueType = {
+    [KeyValueEnum.LEFT]: number;
+    [KeyValueEnum.RIGHT]: number;
+};

package/dist/es/components/Sliders/SliderRatio/types.js

@@ -0,0 +1,6 @@
+export var KeyValueEnum;
+
+(function (KeyValueEnum) {
+  KeyValueEnum["LEFT"] = "leftValue";
+  KeyValueEnum["RIGHT"] = "rightValue";
+})(KeyValueEnum || (KeyValueEnum = {}));

package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.css

@@ -0,0 +1,83 @@
+.mfui-slider-display-value {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  max-width: 45%;
+  color: var(--content);
+  font-weight: 400;
+  background-color: var(--base);
+}
+.mfui-slider-display-value_interactive {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-width: 90px;
+  padding: 7px 16px;
+  border: 1px solid var(--spbSky2);
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: text;
+}
+.mfui-slider-display-value_interactive.mfui-slider-display-value:hover,
+.mfui-slider-display-value_interactive.mfui-slider-display-value_focus {
+  border-color: var(--content);
+}
+.mfui-slider-display-value_disabled {
+  border-color: var(--spbSky0);
+  color: var(--spbSky3);
+  background-color: var(--spbSky0);
+  cursor: default;
+}
+.mfui-slider-display-value_disabled.mfui-slider-display-value_interactive:hover {
+  border-color: var(--spbSky0);
+}
+.mfui-slider-display-value__box {
+  overflow: hidden;
+}
+.mfui-slider-display-value__line {
+  font-weight: 500;
+}
+.mfui-slider-display-value__unit {
+  margin-left: 4px;
+}
+.mfui-slider-display-value_interactive .mfui-slider-display-value__line {
+  height: 0;
+  visibility: hidden;
+  opacity: 0;
+}
+.mfui-slider-display-value__prefix {
+  margin-right: 4px;
+  color: var(--spbSky3);
+}
+.mfui-slider-display-value__input {
+  display: block;
+  width: 10px;
+  min-width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+  font-weight: 400;
+  background-color: transparent;
+  outline: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  cursor: text;
+  opacity: 1;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  caret-color: var(--brandGreen);
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-slider-display-value__input::-webkit-outer-spin-button,
+.mfui-slider-display-value__input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+.mfui-slider-display-value__input[type='number'] {
+  -moz-appearance: textfield;
+}

package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import './SliderDisplayValue.less';
+export declare const DisplayValue: {
+    readonly LINE: "line";
+    readonly INPUT: "input";
+};
+export declare type DisplayValueType = typeof DisplayValue[keyof typeof DisplayValue];
+export interface ISliderDisplayValue {
+    className?: string;
+    value: string | number;
+    displayValueType?: DisplayValueType;
+    displayValuePrefix?: string;
+    displayValueUnit?: string;
+    disabled?: boolean;
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+    };
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur: () => void;
+}
+declare const SliderDisplayValue: React.FC<ISliderDisplayValue>;
+export default SliderDisplayValue;

package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.object.values.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./SliderDisplayValue.css";
+export var DisplayValue = {
+  LINE: 'line',
+  INPUT: 'input'
+};
+var cn = cnCreate('mfui-slider-display-value');
+
+var SliderDisplayValue = function SliderDisplayValue(_ref) {
+  var className = _ref.className,
+      value = _ref.value,
+      displayValueType = _ref.displayValueType,
+      displayValuePrefix = _ref.displayValuePrefix,
+      displayValueUnit = _ref.displayValueUnit,
+      disabled = _ref.disabled,
+      dataAttrs = _ref.dataAttrs,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isFocused = _React$useState2[0],
+      setIsFocused = _React$useState2[1];
+
+  var isDisplayValueInput = displayValueType === DisplayValue.INPUT;
+
+  var handleInputBlur = function handleInputBlur() {
+    setIsFocused(false);
+    onBlur();
+  };
+
+  var handleInputFocus = function handleInputFocus() {
+    setIsFocused(true);
+  };
+
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    React.createElement("label", _extends({
+      className: cn({
+        interactive: isDisplayValueInput,
+        focus: isFocused,
+        disabled: disabled
+      }, [className])
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!displayValuePrefix && /*#__PURE__*/React.createElement("div", {
+      className: cn('prefix')
+    }, displayValuePrefix), /*#__PURE__*/React.createElement("div", {
+      className: cn('box')
+    }, isDisplayValueInput && /*#__PURE__*/React.createElement("input", _extends({
+      className: cn('input'),
+      type: "number",
+      value: value,
+      onChange: onChange,
+      onBlur: handleInputBlur,
+      onFocus: handleInputFocus,
+      disabled: disabled
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input))), /*#__PURE__*/React.createElement("div", {
+      className: cn('line')
+    }, value)), !!displayValueUnit && /*#__PURE__*/React.createElement("div", {
+      className: cn('unit')
+    }, displayValueUnit))
+  );
+};
+
+SliderDisplayValue.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  displayValueType: PropTypes.oneOf(Object.values(DisplayValue)),
+  displayValueUnit: PropTypes.string,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    input: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+export default SliderDisplayValue;

package/dist/es/components/Sliders/components/SliderScale/SliderScale.css

@@ -0,0 +1,15 @@
+.mfui-slider-scale {
+  font-size: 12px;
+  line-height: 18px;
+  position: relative;
+  height: 18px;
+  margin: 8px 12px 0 12px;
+}
+.mfui-slider-scale_disabled {
+  color: var(--spbSky3);
+}
+.mfui-slider-scale__item {
+  position: absolute;
+  translate: -50% 0;
+  white-space: nowrap;
+}

package/dist/es/components/Sliders/components/SliderScale/SliderScale.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import './SliderScale.less';
+export declare const Scale: {
+    readonly BASE: "base";
+    readonly INTERVAL: "interval";
+};
+export declare type ScaleType = typeof Scale[keyof typeof Scale];
+export interface ISliderScale {
+    minValue: number;
+    maxValue: number;
+    scale?: ScaleType;
+    customScale?: string[];
+    disabled?: boolean;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const SliderScale: React.FC<ISliderScale>;
+export default SliderScale;

package/dist/es/components/Sliders/components/SliderScale/SliderScale.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.values.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import { getIntervalScale } from "./helpers";
+import "./SliderScale.css";
+export var Scale = {
+  BASE: 'base',
+  INTERVAL: 'interval'
+};
+var cn = cnCreate('mfui-slider-scale');
+
+var SliderScale = function SliderScale(_ref) {
+  var minValue = _ref.minValue,
+      maxValue = _ref.maxValue,
+      _ref$scale = _ref.scale,
+      scale = _ref$scale === void 0 ? 'base' : _ref$scale,
+      customScale = _ref.customScale,
+      disabled = _ref.disabled,
+      dataAttrs = _ref.dataAttrs;
+  var builtInScale = scale === Scale.BASE ? [minValue, maxValue] : getIntervalScale(minValue, maxValue);
+  var currentScale = customScale || builtInScale;
+  var leftOffset = 100 / (currentScale.length - 1);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      disabled: disabled
+    })
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), currentScale.map(function (item, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('item'),
+      style: {
+        left: "calc(".concat(leftOffset * i, "%)")
+      },
+      key: i
+    }, item);
+  }));
+};
+
+SliderScale.propTypes = {
+  minValue: PropTypes.number.isRequired,
+  maxValue: PropTypes.number.isRequired,
+  scale: PropTypes.oneOf(Object.values(Scale)),
+  customScale: PropTypes.arrayOf(PropTypes.string.isRequired),
+  disabled: PropTypes.bool,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+export default SliderScale;

package/dist/es/components/Sliders/components/SliderScale/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const getIntervalScale: (minValue: number, maxValue: number) => number[];
+export default getIntervalScale;

package/dist/es/components/Sliders/components/SliderScale/helpers.js

@@ -0,0 +1,39 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.string.iterator.js";
+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";
+import "core-js/modules/es.array.reduce.js";
+import "core-js/modules/es.array.concat.js";
+var SCALE_MAX_LENGTH = 10;
+var SCALE_SEGMENT_COUNT = 9;
+var SCALE_WITHOUT_EDGE_LENGTH = SCALE_MAX_LENGTH - 2;
+export var getIntervalScale = function getIntervalScale(minValue, maxValue) {
+  var valueDifference = maxValue - minValue;
+
+  if (valueDifference < SCALE_MAX_LENGTH) {
+    return Array.from({
+      length: valueDifference + 1
+    }, function (_, i) {
+      return minValue + i;
+    });
+  }
+
+  var interval = valueDifference / SCALE_SEGMENT_COUNT;
+  var midItems = Array.from(Array(SCALE_WITHOUT_EDGE_LENGTH).keys());
+
+  var _midItems$reduce = midItems.reduce(function (acc) {
+    return {
+      current: acc.current + interval,
+      items: [].concat(_toConsumableArray(acc.items), [Math.round(acc.current + interval)])
+    };
+  }, {
+    current: minValue,
+    items: []
+  }),
+      items = _midItems$reduce.items;
+
+  return [minValue].concat(_toConsumableArray(items), [maxValue]);
+};
+export default getIntervalScale;

package/dist/es/components/Sliders/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const getRangeValue: (value: string | number, minValue: number, maxValue: number, step: number) => number;
+export declare const getTrackSize: (value: number | undefined, minValue: number, maxValue: number) => number;

package/dist/es/components/Sliders/helpers.js

@@ -0,0 +1,33 @@
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.number.to-fixed.js";
+export var getRangeValue = function getRangeValue(value, minValue, maxValue, step) {
+  var numberValue = Number(value);
+
+  if (numberValue < minValue) {
+    return minValue;
+  }
+
+  if (numberValue > maxValue) {
+    return maxValue;
+  }
+
+  var valueDifference = maxValue - minValue;
+  var expectedStepCount = valueDifference / step;
+  var receivedStepCount = valueDifference / numberValue;
+  var stepPosition = Math.round(expectedStepCount / receivedStepCount);
+  return step * stepPosition;
+};
+export var getTrackSize = function getTrackSize() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var minValue = arguments.length > 1 ? arguments[1] : undefined;
+  var maxValue = arguments.length > 2 ? arguments[2] : undefined;
+  var valueDifference = maxValue - minValue;
+
+  if (valueDifference <= 0) {
+    return 0;
+  }
+
+  var finalValue = value - minValue;
+  var percent = finalValue * 100 / valueDifference;
+  return Number(percent.toFixed(3));
+};