@megafon/ui-core 7.6.1 → 7.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/es/components/Search/Search.d.ts +4 -0
  2. package/dist/es/components/Search/Search.js +4 -2
  3. package/dist/es/components/Select/Select.d.ts +3 -1
  4. package/dist/es/components/Select/Select.js +9 -1
  5. package/dist/es/components/Sliders/Slider/Slider.css +1 -1
  6. package/dist/es/components/Sliders/Slider/Slider.d.ts +2 -4
  7. package/dist/es/components/Sliders/Slider/Slider.js +6 -5
  8. package/dist/es/components/Sliders/SliderRange/SliderRange.css +1 -1
  9. package/dist/es/components/Sliders/SliderRange/SliderRange.d.ts +2 -4
  10. package/dist/es/components/Sliders/SliderRange/SliderRange.js +13 -15
  11. package/dist/es/components/Sliders/SliderRatio/SliderRatio.css +1 -1
  12. package/dist/es/components/Sliders/SliderRatio/SliderRatio.d.ts +1 -2
  13. package/dist/es/components/Sliders/SliderRatio/SliderRatio.js +14 -16
  14. package/dist/es/index.d.ts +0 -1
  15. package/dist/es/index.js +0 -1
  16. package/dist/lib/components/Search/Search.d.ts +4 -0
  17. package/dist/lib/components/Search/Search.js +4 -2
  18. package/dist/lib/components/Select/Select.d.ts +3 -1
  19. package/dist/lib/components/Select/Select.js +9 -1
  20. package/dist/lib/components/Sliders/Slider/Slider.css +1 -1
  21. package/dist/lib/components/Sliders/Slider/Slider.d.ts +2 -4
  22. package/dist/lib/components/Sliders/Slider/Slider.js +6 -5
  23. package/dist/lib/components/Sliders/SliderRange/SliderRange.css +1 -1
  24. package/dist/lib/components/Sliders/SliderRange/SliderRange.d.ts +2 -4
  25. package/dist/lib/components/Sliders/SliderRange/SliderRange.js +13 -15
  26. package/dist/lib/components/Sliders/SliderRatio/SliderRatio.css +1 -1
  27. package/dist/lib/components/Sliders/SliderRatio/SliderRatio.d.ts +1 -2
  28. package/dist/lib/components/Sliders/SliderRatio/SliderRatio.js +14 -16
  29. package/dist/lib/index.d.ts +0 -1
  30. package/dist/lib/index.js +0 -7
  31. package/package.json +3 -3
  32. package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.css +0 -1
  33. package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.d.ts +0 -23
  34. package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.js +0 -78
  35. package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.css +0 -1
  36. package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.d.ts +0 -23
  37. package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.js +0 -86
package/dist/es/components/Search/Search.d.ts CHANGED
@@ -79,6 +79,8 @@ export interface ISearchProps {
79
79
  label?: string;
80
80
  input?: string;
81
81
  listItemTitle?: string;
82
+ list?: string;
83
+ listInner?: string;
82
84
  control?: string;
83
85
  icon?: string;
84
86
  submitButton?: string;
@@ -103,6 +105,8 @@ export interface ISearchProps {
103
105
  minTextareaHeight?: MinTextareaHeightType;
104
106
  /** Показать хендлер для ресайза текстового поля */
105
107
  showResizer?: boolean;
108
+ /** Ref обработчик */
109
+ inputRef?: (node: HTMLInputElement | HTMLTextAreaElement) => void;
106
110
  /** Обработчик изменения поля */
107
111
  onChange?: (value: string) => void;
108
112
  /** Обработчик нажатия на enter */
package/dist/es/components/Search/Search.js CHANGED
@@ -100,6 +100,7 @@ var Search = function Search(_ref) {
100
100
  _ref$minTextareaHeigh = _ref.minTextareaHeight,
101
101
  minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.ONE_ROW : _ref$minTextareaHeigh,
102
102
  showResizer = _ref.showResizer,
103
+ inputRef = _ref.inputRef,
103
104
  onChange = _ref.onChange,
104
105
  onSubmit = _ref.onSubmit,
105
106
  onBlur = _ref.onBlur,
@@ -155,6 +156,7 @@ var Search = function Search(_ref) {
155
156
  return;
156
157
  }
157
158
  fieldRef.current = node;
159
+ inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
158
160
  };
159
161
  var textareaResize = React.useCallback(function () {
160
162
  if (!isTextarea || !fieldRef.current || !containerRef.current || isTextareaResized) {
@@ -415,10 +417,10 @@ var Search = function Search(_ref) {
415
417
  };
416
418
  var renderList = function renderList() {
417
419
  return /*#__PURE__*/React.createElement("div", {
418
- className: cn('list'),
420
+ className: cn('list', [classes === null || classes === void 0 ? void 0 : classes.list]),
419
421
  ref: listRef
420
422
  }, /*#__PURE__*/React.createElement("div", {
421
- className: cn('list-inner')
423
+ className: cn('list-inner', [classes === null || classes === void 0 ? void 0 : classes.listInner])
422
424
  }, items.map(function (_ref2, i) {
423
425
  var itemValue = _ref2.value,
424
426
  searchView = _ref2.searchView,
package/dist/es/components/Select/Select.d.ts CHANGED
@@ -84,6 +84,8 @@ export interface ISelectProps<T extends SelectItemValueType> {
84
84
  listItemTitle?: Record<string, string>;
85
85
  notFound?: Record<string, string>;
86
86
  };
87
+ /** Ref обработчик */
88
+ inputRef?: (node: HTMLDivElement) => void;
87
89
  /** Обработчик выбора элемента селекта */
88
90
  onSelect?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement> | null, dataItem?: ISelectItem<T>) => void;
89
91
  /** Обработчик при открытом селекте */
@@ -91,5 +93,5 @@ export interface ISelectProps<T extends SelectItemValueType> {
91
93
  /** Обработчик при закрытом селекте */
92
94
  onClosed?: () => void;
93
95
  }
94
- declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, onClosed, onOpened, onSelect, }: ISelectProps<T>) => JSX.Element;
96
+ declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, inputRef, onClosed, onOpened, onSelect, }: ISelectProps<T>) => JSX.Element;
95
97
  export default Select;
package/dist/es/components/Select/Select.js CHANGED
@@ -75,6 +75,7 @@ var Select = function Select(_ref) {
75
75
  currentValue = _ref.currentValue,
76
76
  _ref$shortList = _ref.shortList,
77
77
  shortList = _ref$shortList === void 0 ? false : _ref$shortList,
78
+ inputRef = _ref.inputRef,
78
79
  onClosed = _ref.onClosed,
79
80
  onOpened = _ref.onOpened,
80
81
  onSelect = _ref.onSelect;
@@ -94,6 +95,13 @@ var Select = function Select(_ref) {
94
95
  var currentIndex = itemsList.findIndex(function (elem) {
95
96
  return elem.value === currentValue;
96
97
  });
98
+ var getFieldNode = function getFieldNode(node) {
99
+ if (!node) {
100
+ return;
101
+ }
102
+ selectNode.current = node;
103
+ inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
104
+ };
97
105
  var handleClickOutside = useCallback(function (e) {
98
106
  var _a;
99
107
  if (e.target instanceof Node && ((_a = selectNode.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) || !isOpened) {
@@ -384,7 +392,7 @@ var Select = function Select(_ref) {
384
392
  valid: verification === Verification.VALID,
385
393
  error: verification === Verification.ERROR
386
394
  }, [className, classes.root]),
387
- ref: selectNode
395
+ ref: getFieldNode
388
396
  }), /*#__PURE__*/React.createElement("div", {
389
397
  className: cn('inner')
390
398
  }, /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
package/dist/es/components/Sliders/Slider/Slider.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-slider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider__head{display:grid;font-size:15px;font-weight:500;grid-template-columns:auto 55%;line-height:24px;margin-bottom:8px}.mfui-slider__display-value{margin-left:auto}.mfui-slider__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--spbSky0);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;height:12px;margin:6px 0;outline:none}.mfui-slider__range-input:focus{outline:none}.mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider_disabled .mfui-slider__head{color:var(--spbSky3)}.mfui-slider_disabled .mfui-slider__range-input{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky1)),to(var(--spbSky1)));background-image:linear-gradient(var(--spbSky1),var(--spbSky1));cursor:default}.mfui-slider_disabled .mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-slider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider__head{display:grid;font-size:15px;font-weight:500;grid-template-columns:auto 55%;line-height:24px;margin-bottom:8px}.mfui-slider__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--spbSky0);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;height:12px;margin:6px 0;outline:none}.mfui-slider__range-input:focus{outline:none}.mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider_disabled .mfui-slider__head{color:var(--spbSky3)}.mfui-slider_disabled .mfui-slider__range-input{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky1)),to(var(--spbSky1)));background-image:linear-gradient(var(--spbSky1),var(--spbSky1));cursor:default}.mfui-slider_disabled .mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}
package/dist/es/components/Sliders/Slider/Slider.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  import * as React from 'react';
2
- import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
3
- import { ScaleType } from '../components/SliderScale/SliderScale';
4
2
  import './Slider.scss';
5
3
  export interface ISlider {
6
4
  /** Дополнительный класс корневого элемента */
@@ -14,7 +12,7 @@ export interface ISlider {
14
12
  /** Лейбл */
15
13
  label?: string;
16
14
  /** Тип выводимого значения */
17
- displayValueType?: DisplayValueType;
15
+ displayValueType?: 'input' | 'line';
18
16
  /** Единица измерения выводимого значения */
19
17
  displayValueUnit?: string;
20
18
  /** Переводит компонент в контролируемое состояние */
@@ -22,7 +20,7 @@ export interface ISlider {
22
20
  /** Шаг */
23
21
  step?: number;
24
22
  /** Тип встроенной шкалы */
25
- scale?: ScaleType;
23
+ scale?: 'interval' | 'base';
26
24
  /** Кастомная шкала */
27
25
  customScale?: string[];
28
26
  /** Переводит компонент в выключенное состояние */
package/dist/es/components/Sliders/Slider/Slider.js CHANGED
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import * as React from 'react';
4
4
  import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
5
- import SliderDisplayValue from "../components/SliderDisplayValue/SliderDisplayValue";
5
+ import ValueField from "../../ValueField/ValueField";
6
6
  import SliderScale from "../components/SliderScale/SliderScale";
7
7
  import { getRangeValue, getTrackSize, removeFirstZeros } from "../helpers";
8
8
  import "./Slider.css";
@@ -58,11 +58,12 @@ var Slider = function Slider(_ref) {
58
58
  className: cn('head')
59
59
  }, !!label && /*#__PURE__*/React.createElement("div", {
60
60
  className: cn('label')
61
- }, label), !!displayValueType && /*#__PURE__*/React.createElement(SliderDisplayValue, {
62
- className: cn('display-value'),
61
+ }, label), !!displayValueType && /*#__PURE__*/React.createElement(ValueField, {
62
+ isControlled: true,
63
+ position: "right",
63
64
  value: rawInputValue !== null && rawInputValue !== void 0 ? rawInputValue : rangeValue,
64
- displayValueType: displayValueType,
65
- displayValueUnit: displayValueUnit,
65
+ fieldType: displayValueType,
66
+ valueUnit: displayValueUnit,
66
67
  disabled: disabled,
67
68
  onChange: handleInputChange(false),
68
69
  onBlur: handleInputBlur,
package/dist/es/components/Sliders/SliderRange/SliderRange.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-slider-range{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-range__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-range__display-value_left{margin-right:auto}.mfui-slider-range__display-value_right{margin-left:auto}.mfui-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-slider-range__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;height:0;margin:0;outline:none;pointer-events:none;position:absolute;top:50%;width:100%}.mfui-slider-range__range-input_left{z-index:1}.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over{z-index:3}.mfui-slider-range__range-input_right{z-index:2}.mfui-slider-range__range-input:focus{outline:none}.mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-track{background-color:var(--spbSky0);border-radius:100px;cursor:pointer;height:100%;left:0;padding:0 12px;position:absolute;right:0;z-index:0}.mfui-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-slider-range_disabled .mfui-slider-range__head{color:var(--spbSky3)}.mfui-slider-range_disabled .mfui-slider-range__range-track{cursor:default}.mfui-slider-range_disabled .mfui-slider-range__range-input{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky1)),to(var(--spbSky1)));background-image:linear-gradient(var(--spbSky1),var(--spbSky1));cursor:default}.mfui-slider-range_disabled .mfui-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-slider-range{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-range__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-slider-range__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;height:0;margin:0;outline:none;pointer-events:none;position:absolute;top:50%;width:100%}.mfui-slider-range__range-input_left{z-index:1}.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over{z-index:3}.mfui-slider-range__range-input_right{z-index:2}.mfui-slider-range__range-input:focus{outline:none}.mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-track{background-color:var(--spbSky0);border-radius:100px;cursor:pointer;height:100%;left:0;padding:0 12px;position:absolute;right:0;z-index:0}.mfui-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-slider-range_disabled .mfui-slider-range__head{color:var(--spbSky3)}.mfui-slider-range_disabled .mfui-slider-range__range-track{cursor:default}.mfui-slider-range_disabled .mfui-slider-range__range-input{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky1)),to(var(--spbSky1)));background-image:linear-gradient(var(--spbSky1),var(--spbSky1));cursor:default}.mfui-slider-range_disabled .mfui-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}
package/dist/es/components/Sliders/SliderRange/SliderRange.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  import * as React from 'react';
2
- import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
3
- import { ScaleType } from '../components/SliderScale/SliderScale';
4
2
  import './SliderRange.scss';
5
3
  export interface ISliderRange {
6
4
  /** Дополнительный класс корневого элемента */
@@ -16,7 +14,7 @@ export interface ISliderRange {
16
14
  /** Лейбл */
17
15
  label?: string;
18
16
  /** Тип выводимого значения */
19
- displayValueType?: DisplayValueType;
17
+ displayValueType?: 'input' | 'line';
20
18
  /** Префикс для выводимого значения слева */
21
19
  displayLeftValuePrefix?: string;
22
20
  /** Префикс для выводимого значения справа */
@@ -28,7 +26,7 @@ export interface ISliderRange {
28
26
  /** Шаг */
29
27
  step?: number;
30
28
  /** Тип встроенной шкалы */
31
- scale?: ScaleType;
29
+ scale?: 'interval' | 'base';
32
30
  /** Кастомная шкала */
33
31
  customScale?: string[];
34
32
  /** Переводит компонент в выключенное состояние */
package/dist/es/components/Sliders/SliderRange/SliderRange.js CHANGED
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import * as React from 'react';
4
4
  import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
5
- import SliderDisplayValue from "../components/SliderDisplayValue/SliderDisplayValue";
5
+ import ValueField from "../../ValueField/ValueField";
6
6
  import SliderScale from "../components/SliderScale/SliderScale";
7
7
  import { getRangeValue, removeFirstZeros } from "../helpers";
8
8
  import { getTrackSize, getRangeValueByPageX, checkForThumbAtEndOfTrack } from "./helpers";
@@ -126,28 +126,26 @@ var SliderRange = function SliderRange(_ref) {
126
126
  className: cn('label')
127
127
  }, label), !!displayValueType && /*#__PURE__*/React.createElement("div", {
128
128
  className: cn('display-values')
129
- }, /*#__PURE__*/React.createElement(SliderDisplayValue, {
130
- className: cn('display-value', {
131
- left: true
132
- }),
129
+ }, /*#__PURE__*/React.createElement(ValueField, {
130
+ isControlled: true,
131
+ position: "left",
133
132
  value: rawLeftInputValue !== null && rawLeftInputValue !== void 0 ? rawLeftInputValue : leftRangeValue,
134
- displayValueType: displayValueType,
135
- displayValuePrefix: displayLeftValuePrefix,
136
- displayValueUnit: displayValueUnit,
133
+ fieldType: displayValueType,
134
+ valuePrefix: displayLeftValuePrefix,
135
+ valueUnit: displayValueUnit,
137
136
  disabled: disabled,
138
137
  onChange: handleLeftInputChange(false),
139
138
  onBlur: handleInputBlur(true),
140
139
  dataAttrs: {
141
140
  input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
142
141
  }
143
- }), /*#__PURE__*/React.createElement(SliderDisplayValue, {
144
- className: cn('display-value', {
145
- right: true
146
- }),
142
+ }), /*#__PURE__*/React.createElement(ValueField, {
143
+ isControlled: true,
144
+ position: "right",
147
145
  value: rawRightInputValue !== null && rawRightInputValue !== void 0 ? rawRightInputValue : rightRangeValue,
148
- displayValueType: displayValueType,
149
- displayValuePrefix: displayRightValuePrefix,
150
- displayValueUnit: displayValueUnit,
146
+ fieldType: displayValueType,
147
+ valuePrefix: displayRightValuePrefix,
148
+ valueUnit: displayValueUnit,
151
149
  disabled: disabled,
152
150
  onChange: handleRightInputChange(false),
153
151
  onBlur: handleInputBlur(false),
package/dist/es/components/Sliders/SliderRatio/SliderRatio.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-slider-ratio{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-ratio__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-ratio__display-value_left{margin-right:auto}.mfui-slider-ratio__display-value_right{margin-left:auto}.mfui-slider-ratio__range-container{position:relative;width:100%}.mfui-slider-ratio__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--brandPurple);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;display:block;height:12px;margin:6px 0;outline:none;pointer-events:none;position:relative;width:100%;z-index:1}.mfui-slider-ratio__range-input:focus{outline:none}.mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-slider-ratio__scale{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;left:calc(var(--thumbSize)/2);position:absolute;right:calc(var(--thumbSize)/2);top:0;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.mfui-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-slider-ratio_disabled .mfui-slider-ratio__head{color:var(--spbSky3)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input{background-color:var(--spbSky1);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky0)),to(var(--spbSky0)));background-image:linear-gradient(var(--spbSky0),var(--spbSky0));cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track{cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__scale{display:none}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-slider-ratio{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-ratio__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-ratio__range-container{position:relative;width:100%}.mfui-slider-ratio__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--brandPurple);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;display:block;height:12px;margin:6px 0;outline:none;pointer-events:none;position:relative;width:100%;z-index:1}.mfui-slider-ratio__range-input:focus{outline:none}.mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-slider-ratio__scale{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;left:calc(var(--thumbSize)/2);position:absolute;right:calc(var(--thumbSize)/2);top:0;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.mfui-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-slider-ratio_disabled .mfui-slider-ratio__head{color:var(--spbSky3)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input{background-color:var(--spbSky1);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky0)),to(var(--spbSky0)));background-image:linear-gradient(var(--spbSky0),var(--spbSky0));cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track{cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__scale{display:none}
package/dist/es/components/Sliders/SliderRatio/SliderRatio.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
3
2
  import { ValueType } from './types';
4
3
  import './SliderRatio.scss';
5
4
  export interface ISliderRatio {
@@ -12,7 +11,7 @@ export interface ISliderRatio {
12
11
  /** Лейбл */
13
12
  label?: string;
14
13
  /** Тип выводимого значения */
15
- displayValueType?: DisplayValueType;
14
+ displayValueType?: 'input' | 'line';
16
15
  /** Префикс для выводимого значения слева */
17
16
  displayLeftValuePrefix?: string;
18
17
  /** Префикс для выводимого значения справа */
package/dist/es/components/Sliders/SliderRatio/SliderRatio.js CHANGED
@@ -8,7 +8,7 @@ import "core-js/modules/es.object.to-string.js";
8
8
  import "core-js/modules/web.dom-collections.iterator.js";
9
9
  import * as React from 'react';
10
10
  import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
11
- import SliderDisplayValue, { DisplayValue } from "../components/SliderDisplayValue/SliderDisplayValue";
11
+ import ValueField from "../../ValueField/ValueField";
12
12
  import { getTrackSize, removeFirstZeros } from "../helpers";
13
13
  import { findClosestValue, getIndexByRangeValue, getRangeStepValue, inputReducer, getRangeValueByPageX } from "./helpers";
14
14
  import { KeyValueEnum } from "./types";
@@ -21,7 +21,7 @@ var SliderRatio = function SliderRatio(_ref) {
21
21
  var className = _ref.className,
22
22
  label = _ref.label,
23
23
  _ref$displayValueType = _ref.displayValueType,
24
- displayValueType = _ref$displayValueType === void 0 ? DisplayValue.LINE : _ref$displayValueType,
24
+ displayValueType = _ref$displayValueType === void 0 ? 'line' : _ref$displayValueType,
25
25
  displayLeftValuePrefix = _ref.displayLeftValuePrefix,
26
26
  displayRightValuePrefix = _ref.displayRightValuePrefix,
27
27
  displayLeftValueUnit = _ref.displayLeftValueUnit,
@@ -141,28 +141,26 @@ var SliderRatio = function SliderRatio(_ref) {
141
141
  className: cn('label')
142
142
  }, label), /*#__PURE__*/React.createElement("div", {
143
143
  className: cn('display-values')
144
- }, /*#__PURE__*/React.createElement(SliderDisplayValue, {
145
- className: cn('display-value', {
146
- left: true
147
- }),
144
+ }, /*#__PURE__*/React.createElement(ValueField, {
145
+ isControlled: true,
146
+ position: "left",
148
147
  value: leftInputValue,
149
- displayValueType: displayValueType,
150
- displayValuePrefix: displayLeftValuePrefix,
151
- displayValueUnit: displayLeftValueUnit,
148
+ fieldType: displayValueType,
149
+ valuePrefix: displayLeftValuePrefix,
150
+ valueUnit: displayLeftValueUnit,
152
151
  disabled: disabled,
153
152
  onChange: handleInputChange(KeyValueEnum.LEFT),
154
153
  onBlur: handleInputBlur(KeyValueEnum.LEFT),
155
154
  dataAttrs: {
156
155
  input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
157
156
  }
158
- }), /*#__PURE__*/React.createElement(SliderDisplayValue, {
159
- className: cn('display-value', {
160
- right: true
161
- }),
157
+ }), /*#__PURE__*/React.createElement(ValueField, {
158
+ isControlled: true,
159
+ position: "right",
162
160
  value: rightInputValue,
163
- displayValueType: displayValueType,
164
- displayValuePrefix: displayRightValuePrefix,
165
- displayValueUnit: displayRightValueUnit,
161
+ fieldType: displayValueType,
162
+ valuePrefix: displayRightValuePrefix,
163
+ valueUnit: displayRightValueUnit,
166
164
  disabled: disabled,
167
165
  onChange: handleInputChange(KeyValueEnum.RIGHT),
168
166
  onBlur: handleInputBlur(KeyValueEnum.RIGHT),
package/dist/es/index.d.ts CHANGED
@@ -53,7 +53,6 @@ export { default as Select } from './components/Select/Select';
53
53
  export { default as Selector } from './components/Selector/Selector';
54
54
  export { default as selectReducer } from './components/Select/reducer/selectReducer';
55
55
  export { default as Slider } from './components/Sliders/Slider/Slider';
56
- export { default as SliderDisplayValue } from './components/Sliders/components/SliderDisplayValue/SliderDisplayValue';
57
56
  export { default as SliderRange } from './components/Sliders/SliderRange/SliderRange';
58
57
  export { default as SliderRatio } from './components/Sliders/SliderRatio/SliderRatio';
59
58
  export { default as SliderScale } from './components/Sliders/components/SliderScale/SliderScale';
package/dist/es/index.js CHANGED
@@ -53,7 +53,6 @@ export { default as Select } from "./components/Select/Select";
53
53
  export { default as Selector } from "./components/Selector/Selector";
54
54
  export { default as selectReducer } from "./components/Select/reducer/selectReducer";
55
55
  export { default as Slider } from "./components/Sliders/Slider/Slider";
56
- export { default as SliderDisplayValue } from "./components/Sliders/components/SliderDisplayValue/SliderDisplayValue";
57
56
  export { default as SliderRange } from "./components/Sliders/SliderRange/SliderRange";
58
57
  export { default as SliderRatio } from "./components/Sliders/SliderRatio/SliderRatio";
59
58
  export { default as SliderScale } from "./components/Sliders/components/SliderScale/SliderScale";
package/dist/lib/components/Search/Search.d.ts CHANGED
@@ -79,6 +79,8 @@ export interface ISearchProps {
79
79
  label?: string;
80
80
  input?: string;
81
81
  listItemTitle?: string;
82
+ list?: string;
83
+ listInner?: string;
82
84
  control?: string;
83
85
  icon?: string;
84
86
  submitButton?: string;
@@ -103,6 +105,8 @@ export interface ISearchProps {
103
105
  minTextareaHeight?: MinTextareaHeightType;
104
106
  /** Показать хендлер для ресайза текстового поля */
105
107
  showResizer?: boolean;
108
+ /** Ref обработчик */
109
+ inputRef?: (node: HTMLInputElement | HTMLTextAreaElement) => void;
106
110
  /** Обработчик изменения поля */
107
111
  onChange?: (value: string) => void;
108
112
  /** Обработчик нажатия на enter */
package/dist/lib/components/Search/Search.js CHANGED
@@ -109,6 +109,7 @@ var Search = function Search(_ref) {
109
109
  _ref$minTextareaHeigh = _ref.minTextareaHeight,
110
110
  minTextareaHeight = _ref$minTextareaHeigh === void 0 ? MinTextareaHeight.ONE_ROW : _ref$minTextareaHeigh,
111
111
  showResizer = _ref.showResizer,
112
+ inputRef = _ref.inputRef,
112
113
  onChange = _ref.onChange,
113
114
  onSubmit = _ref.onSubmit,
114
115
  onBlur = _ref.onBlur,
@@ -164,6 +165,7 @@ var Search = function Search(_ref) {
164
165
  return;
165
166
  }
166
167
  fieldRef.current = node;
168
+ inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
167
169
  };
168
170
  var textareaResize = React.useCallback(function () {
169
171
  if (!isTextarea || !fieldRef.current || !containerRef.current || isTextareaResized) {
@@ -424,10 +426,10 @@ var Search = function Search(_ref) {
424
426
  };
425
427
  var renderList = function renderList() {
426
428
  return /*#__PURE__*/React.createElement("div", {
427
- className: cn('list'),
429
+ className: cn('list', [classes === null || classes === void 0 ? void 0 : classes.list]),
428
430
  ref: listRef
429
431
  }, /*#__PURE__*/React.createElement("div", {
430
- className: cn('list-inner')
432
+ className: cn('list-inner', [classes === null || classes === void 0 ? void 0 : classes.listInner])
431
433
  }, items.map(function (_ref2, i) {
432
434
  var itemValue = _ref2.value,
433
435
  searchView = _ref2.searchView,
package/dist/lib/components/Select/Select.d.ts CHANGED
@@ -84,6 +84,8 @@ export interface ISelectProps<T extends SelectItemValueType> {
84
84
  listItemTitle?: Record<string, string>;
85
85
  notFound?: Record<string, string>;
86
86
  };
87
+ /** Ref обработчик */
88
+ inputRef?: (node: HTMLDivElement) => void;
87
89
  /** Обработчик выбора элемента селекта */
88
90
  onSelect?: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement> | null, dataItem?: ISelectItem<T>) => void;
89
91
  /** Обработчик при открытом селекте */
@@ -91,5 +93,5 @@ export interface ISelectProps<T extends SelectItemValueType> {
91
93
  /** Обработчик при закрытом селекте */
92
94
  onClosed?: () => void;
93
95
  }
94
- declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, onClosed, onOpened, onSelect, }: ISelectProps<T>) => JSX.Element;
96
+ declare const Select: <T extends SelectItemValueType>({ type, disabled, verification, noticeText, label, labelId, required, className, classes, dataAttrs, notFoundText, items, placeholder, currentValue, shortList, inputRef, onClosed, onOpened, onSelect, }: ISelectProps<T>) => JSX.Element;
95
97
  export default Select;
package/dist/lib/components/Select/Select.js CHANGED
@@ -84,6 +84,7 @@ var Select = function Select(_ref) {
84
84
  currentValue = _ref.currentValue,
85
85
  _ref$shortList = _ref.shortList,
86
86
  shortList = _ref$shortList === void 0 ? false : _ref$shortList,
87
+ inputRef = _ref.inputRef,
87
88
  onClosed = _ref.onClosed,
88
89
  onOpened = _ref.onOpened,
89
90
  onSelect = _ref.onSelect;
@@ -103,6 +104,13 @@ var Select = function Select(_ref) {
103
104
  var currentIndex = itemsList.findIndex(function (elem) {
104
105
  return elem.value === currentValue;
105
106
  });
107
+ var getFieldNode = function getFieldNode(node) {
108
+ if (!node) {
109
+ return;
110
+ }
111
+ selectNode.current = node;
112
+ inputRef === null || inputRef === void 0 ? void 0 : inputRef(node);
113
+ };
106
114
  var handleClickOutside = (0, _react.useCallback)(function (e) {
107
115
  var _a;
108
116
  if (e.target instanceof Node && ((_a = selectNode.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) || !isOpened) {
@@ -393,7 +401,7 @@ var Select = function Select(_ref) {
393
401
  valid: verification === Verification.VALID,
394
402
  error: verification === Verification.ERROR
395
403
  }, [className, classes.root]),
396
- ref: selectNode
404
+ ref: getFieldNode
397
405
  }), /*#__PURE__*/React.createElement("div", {
398
406
  className: cn('inner')
399
407
  }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.control), {
package/dist/lib/components/Sliders/Slider/Slider.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-slider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider__head{display:grid;font-size:15px;font-weight:500;grid-template-columns:auto 55%;line-height:24px;margin-bottom:8px}.mfui-slider__display-value{margin-left:auto}.mfui-slider__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--spbSky0);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;height:12px;margin:6px 0;outline:none}.mfui-slider__range-input:focus{outline:none}.mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider_disabled .mfui-slider__head{color:var(--spbSky3)}.mfui-slider_disabled .mfui-slider__range-input{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky1)),to(var(--spbSky1)));background-image:linear-gradient(var(--spbSky1),var(--spbSky1));cursor:default}.mfui-slider_disabled .mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-slider{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider__head{display:grid;font-size:15px;font-weight:500;grid-template-columns:auto 55%;line-height:24px;margin-bottom:8px}.mfui-slider__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--spbSky0);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;height:12px;margin:6px 0;outline:none}.mfui-slider__range-input:focus{outline:none}.mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:24px;width:24px}.mfui-slider__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider_disabled .mfui-slider__head{color:var(--spbSky3)}.mfui-slider_disabled .mfui-slider__range-input{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky1)),to(var(--spbSky1)));background-image:linear-gradient(var(--spbSky1),var(--spbSky1));cursor:default}.mfui-slider_disabled .mfui-slider__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}.mfui-slider_disabled .mfui-slider__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:24px;width:24px}
package/dist/lib/components/Sliders/Slider/Slider.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  import * as React from 'react';
2
- import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
3
- import { ScaleType } from '../components/SliderScale/SliderScale';
4
2
  import './Slider.scss';
5
3
  export interface ISlider {
6
4
  /** Дополнительный класс корневого элемента */
@@ -14,7 +12,7 @@ export interface ISlider {
14
12
  /** Лейбл */
15
13
  label?: string;
16
14
  /** Тип выводимого значения */
17
- displayValueType?: DisplayValueType;
15
+ displayValueType?: 'input' | 'line';
18
16
  /** Единица измерения выводимого значения */
19
17
  displayValueUnit?: string;
20
18
  /** Переводит компонент в контролируемое состояние */
@@ -22,7 +20,7 @@ export interface ISlider {
22
20
  /** Шаг */
23
21
  step?: number;
24
22
  /** Тип встроенной шкалы */
25
- scale?: ScaleType;
23
+ scale?: 'interval' | 'base';
26
24
  /** Кастомная шкала */
27
25
  customScale?: string[];
28
26
  /** Переводит компонент в выключенное состояние */
package/dist/lib/components/Sliders/Slider/Slider.js CHANGED
@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
  var _uiHelpers = require("@megafon/ui-helpers");
12
- var _SliderDisplayValue = _interopRequireDefault(require("../components/SliderDisplayValue/SliderDisplayValue"));
12
+ var _ValueField = _interopRequireDefault(require("../../ValueField/ValueField"));
13
13
  var _SliderScale = _interopRequireDefault(require("../components/SliderScale/SliderScale"));
14
14
  var _helpers = require("../helpers");
15
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -67,11 +67,12 @@ var Slider = function Slider(_ref) {
67
67
  className: cn('head')
68
68
  }, !!label && /*#__PURE__*/React.createElement("div", {
69
69
  className: cn('label')
70
- }, label), !!displayValueType && /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
71
- className: cn('display-value'),
70
+ }, label), !!displayValueType && /*#__PURE__*/React.createElement(_ValueField["default"], {
71
+ isControlled: true,
72
+ position: "right",
72
73
  value: rawInputValue !== null && rawInputValue !== void 0 ? rawInputValue : rangeValue,
73
- displayValueType: displayValueType,
74
- displayValueUnit: displayValueUnit,
74
+ fieldType: displayValueType,
75
+ valueUnit: displayValueUnit,
75
76
  disabled: disabled,
76
77
  onChange: handleInputChange(false),
77
78
  onBlur: handleInputBlur,
package/dist/lib/components/Sliders/SliderRange/SliderRange.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-slider-range{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-range__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-range__display-value_left{margin-right:auto}.mfui-slider-range__display-value_right{margin-left:auto}.mfui-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-slider-range__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;height:0;margin:0;outline:none;pointer-events:none;position:absolute;top:50%;width:100%}.mfui-slider-range__range-input_left{z-index:1}.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over{z-index:3}.mfui-slider-range__range-input_right{z-index:2}.mfui-slider-range__range-input:focus{outline:none}.mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-track{background-color:var(--spbSky0);border-radius:100px;cursor:pointer;height:100%;left:0;padding:0 12px;position:absolute;right:0;z-index:0}.mfui-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-slider-range_disabled .mfui-slider-range__head{color:var(--spbSky3)}.mfui-slider-range_disabled .mfui-slider-range__range-track{cursor:default}.mfui-slider-range_disabled .mfui-slider-range__range-input{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky1)),to(var(--spbSky1)));background-image:linear-gradient(var(--spbSky1),var(--spbSky1));cursor:default}.mfui-slider-range_disabled .mfui-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-slider-range{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-range__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-range__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-range__range-container{cursor:pointer;height:12px;margin:6px 0;position:relative}.mfui-slider-range__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;height:0;margin:0;outline:none;pointer-events:none;position:absolute;top:50%;width:100%}.mfui-slider-range__range-input_left{z-index:1}.mfui-slider-range__range-input_left.mfui-slider-range__range-input_over{z-index:3}.mfui-slider-range__range-input_right{z-index:2}.mfui-slider-range__range-input:focus{outline:none}.mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range__range-track{background-color:var(--spbSky0);border-radius:100px;cursor:pointer;height:100%;left:0;padding:0 12px;position:absolute;right:0;z-index:0}.mfui-slider-range__range-track-inner{height:100%;position:relative;width:100%}.mfui-slider-range__range-track-segment{background-color:var(--brandGreen);border-radius:100px;height:100%;position:absolute}.mfui-slider-range_disabled .mfui-slider-range__head{color:var(--spbSky3)}.mfui-slider-range_disabled .mfui-slider-range__range-track{cursor:default}.mfui-slider-range_disabled .mfui-slider-range__range-input{background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky1)),to(var(--spbSky1)));background-image:linear-gradient(var(--spbSky1),var(--spbSky1));cursor:default}.mfui-slider-range_disabled .mfui-slider-range__range-track-segment{background-color:var(--spbSky1)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-range_disabled .mfui-slider-range__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}
package/dist/lib/components/Sliders/SliderRange/SliderRange.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  import * as React from 'react';
2
- import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
3
- import { ScaleType } from '../components/SliderScale/SliderScale';
4
2
  import './SliderRange.scss';
5
3
  export interface ISliderRange {
6
4
  /** Дополнительный класс корневого элемента */
@@ -16,7 +14,7 @@ export interface ISliderRange {
16
14
  /** Лейбл */
17
15
  label?: string;
18
16
  /** Тип выводимого значения */
19
- displayValueType?: DisplayValueType;
17
+ displayValueType?: 'input' | 'line';
20
18
  /** Префикс для выводимого значения слева */
21
19
  displayLeftValuePrefix?: string;
22
20
  /** Префикс для выводимого значения справа */
@@ -28,7 +26,7 @@ export interface ISliderRange {
28
26
  /** Шаг */
29
27
  step?: number;
30
28
  /** Тип встроенной шкалы */
31
- scale?: ScaleType;
29
+ scale?: 'interval' | 'base';
32
30
  /** Кастомная шкала */
33
31
  customScale?: string[];
34
32
  /** Переводит компонент в выключенное состояние */
package/dist/lib/components/Sliders/SliderRange/SliderRange.js CHANGED
@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var React = _interopRequireWildcard(require("react"));
11
11
  var _uiHelpers = require("@megafon/ui-helpers");
12
- var _SliderDisplayValue = _interopRequireDefault(require("../components/SliderDisplayValue/SliderDisplayValue"));
12
+ var _ValueField = _interopRequireDefault(require("../../ValueField/ValueField"));
13
13
  var _SliderScale = _interopRequireDefault(require("../components/SliderScale/SliderScale"));
14
14
  var _helpers = require("../helpers");
15
15
  var _helpers2 = require("./helpers");
@@ -135,28 +135,26 @@ var SliderRange = function SliderRange(_ref) {
135
135
  className: cn('label')
136
136
  }, label), !!displayValueType && /*#__PURE__*/React.createElement("div", {
137
137
  className: cn('display-values')
138
- }, /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
139
- className: cn('display-value', {
140
- left: true
141
- }),
138
+ }, /*#__PURE__*/React.createElement(_ValueField["default"], {
139
+ isControlled: true,
140
+ position: "left",
142
141
  value: rawLeftInputValue !== null && rawLeftInputValue !== void 0 ? rawLeftInputValue : leftRangeValue,
143
- displayValueType: displayValueType,
144
- displayValuePrefix: displayLeftValuePrefix,
145
- displayValueUnit: displayValueUnit,
142
+ fieldType: displayValueType,
143
+ valuePrefix: displayLeftValuePrefix,
144
+ valueUnit: displayValueUnit,
146
145
  disabled: disabled,
147
146
  onChange: handleLeftInputChange(false),
148
147
  onBlur: handleInputBlur(true),
149
148
  dataAttrs: {
150
149
  input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
151
150
  }
152
- }), /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
153
- className: cn('display-value', {
154
- right: true
155
- }),
151
+ }), /*#__PURE__*/React.createElement(_ValueField["default"], {
152
+ isControlled: true,
153
+ position: "right",
156
154
  value: rawRightInputValue !== null && rawRightInputValue !== void 0 ? rawRightInputValue : rightRangeValue,
157
- displayValueType: displayValueType,
158
- displayValuePrefix: displayRightValuePrefix,
159
- displayValueUnit: displayValueUnit,
155
+ fieldType: displayValueType,
156
+ valuePrefix: displayRightValuePrefix,
157
+ valueUnit: displayValueUnit,
160
158
  disabled: disabled,
161
159
  onChange: handleRightInputChange(false),
162
160
  onBlur: handleInputBlur(false),
package/dist/lib/components/Sliders/SliderRatio/SliderRatio.css CHANGED
@@ -1 +1 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-slider-ratio{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-ratio__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-ratio__display-value_left{margin-right:auto}.mfui-slider-ratio__display-value_right{margin-left:auto}.mfui-slider-ratio__range-container{position:relative;width:100%}.mfui-slider-ratio__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--brandPurple);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;display:block;height:12px;margin:6px 0;outline:none;pointer-events:none;position:relative;width:100%;z-index:1}.mfui-slider-ratio__range-input:focus{outline:none}.mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-slider-ratio__scale{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;left:calc(var(--thumbSize)/2);position:absolute;right:calc(var(--thumbSize)/2);top:0;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.mfui-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-slider-ratio_disabled .mfui-slider-ratio__head{color:var(--spbSky3)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input{background-color:var(--spbSky1);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky0)),to(var(--spbSky0)));background-image:linear-gradient(var(--spbSky0),var(--spbSky0));cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track{cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__scale{display:none}
1
+ h1,h2,h3,h4,h5{margin:0}.mfui-slider-ratio{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-slider-ratio__head{font-size:15px;font-weight:500;line-height:24px;margin-bottom:8px}.mfui-slider-ratio__display-values{display:grid;grid-template-columns:45% 45%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:8px;width:100%}.mfui-slider-ratio__range-container{position:relative;width:100%}.mfui-slider-ratio__range-input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--brandPurple);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--brandGreen)),to(var(--brandGreen)));background-image:linear-gradient(var(--brandGreen),var(--brandGreen));background-repeat:no-repeat;border-radius:100px;cursor:pointer;display:block;height:12px;margin:6px 0;outline:none;pointer-events:none;position:relative;width:100%;z-index:1}.mfui-slider-ratio__range-input:focus{outline:none}.mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-image:url(i/thumb.png);background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio__range-input::-webkit-slider-runnable-track{-webkit-appearance:none;background:transparent;border:none;-webkit-box-shadow:none;box-shadow:none}.mfui-slider-ratio__range-input::-moz-range-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-input::-ms-track{-webkit-appearance:none;background:transparent;border:none;box-shadow:none}.mfui-slider-ratio__range-track{cursor:pointer;height:100%;position:absolute;top:0;width:100%;z-index:0}.mfui-slider-ratio__scale{bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;left:calc(var(--thumbSize)/2);position:absolute;right:calc(var(--thumbSize)/2);top:0;z-index:2;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;pointer-events:none}.mfui-slider-ratio__scale-item{background-color:var(--stcWhite);border-radius:50%;height:4px;width:4px}.mfui-slider-ratio__scale-item:first-child{margin-left:-2px}.mfui-slider-ratio__scale-item:last-child{margin-right:-2px}.mfui-slider-ratio_disabled .mfui-slider-ratio__head{color:var(--spbSky3)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input{background-color:var(--spbSky1);background-image:-webkit-gradient(linear,left top,left bottom,from(var(--spbSky0)),to(var(--spbSky0)));background-image:linear-gradient(var(--spbSky0),var(--spbSky0));cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-webkit-slider-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;-webkit-box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:0 2px 6px rgba(0,0,0,.16);-webkit-box-shadow:none;box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-moz-range-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-input::-ms-thumb{-webkit-appearance:none;background-color:var(--stcWhite);background-color:var(--spbSky2);background-image:url(i/thumb.png);background-image:none;background-repeat:no-repeat;background-size:100% 100%;border:none;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.16);box-shadow:none;height:var(--thumbSize);pointer-events:auto;width:var(--thumbSize)}.mfui-slider-ratio_disabled .mfui-slider-ratio__range-track{cursor:default}.mfui-slider-ratio_disabled .mfui-slider-ratio__scale{display:none}
package/dist/lib/components/Sliders/SliderRatio/SliderRatio.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import { DisplayValueType } from '../components/SliderDisplayValue/SliderDisplayValue';
3
2
  import { ValueType } from './types';
4
3
  import './SliderRatio.scss';
5
4
  export interface ISliderRatio {
@@ -12,7 +11,7 @@ export interface ISliderRatio {
12
11
  /** Лейбл */
13
12
  label?: string;
14
13
  /** Тип выводимого значения */
15
- displayValueType?: DisplayValueType;
14
+ displayValueType?: 'input' | 'line';
16
15
  /** Префикс для выводимого значения слева */
17
16
  displayLeftValuePrefix?: string;
18
17
  /** Префикс для выводимого значения справа */
package/dist/lib/components/Sliders/SliderRatio/SliderRatio.js CHANGED
@@ -15,7 +15,7 @@ require("core-js/modules/es.object.to-string.js");
15
15
  require("core-js/modules/web.dom-collections.iterator.js");
16
16
  var React = _interopRequireWildcard(require("react"));
17
17
  var _uiHelpers = require("@megafon/ui-helpers");
18
- var _SliderDisplayValue = _interopRequireWildcard(require("../components/SliderDisplayValue/SliderDisplayValue"));
18
+ var _ValueField = _interopRequireDefault(require("../../ValueField/ValueField"));
19
19
  var _helpers = require("../helpers");
20
20
  var _helpers2 = require("./helpers");
21
21
  var _types = require("./types");
@@ -30,7 +30,7 @@ var SliderRatio = function SliderRatio(_ref) {
30
30
  var className = _ref.className,
31
31
  label = _ref.label,
32
32
  _ref$displayValueType = _ref.displayValueType,
33
- displayValueType = _ref$displayValueType === void 0 ? _SliderDisplayValue.DisplayValue.LINE : _ref$displayValueType,
33
+ displayValueType = _ref$displayValueType === void 0 ? 'line' : _ref$displayValueType,
34
34
  displayLeftValuePrefix = _ref.displayLeftValuePrefix,
35
35
  displayRightValuePrefix = _ref.displayRightValuePrefix,
36
36
  displayLeftValueUnit = _ref.displayLeftValueUnit,
@@ -150,28 +150,26 @@ var SliderRatio = function SliderRatio(_ref) {
150
150
  className: cn('label')
151
151
  }, label), /*#__PURE__*/React.createElement("div", {
152
152
  className: cn('display-values')
153
- }, /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
154
- className: cn('display-value', {
155
- left: true
156
- }),
153
+ }, /*#__PURE__*/React.createElement(_ValueField["default"], {
154
+ isControlled: true,
155
+ position: "left",
157
156
  value: leftInputValue,
158
- displayValueType: displayValueType,
159
- displayValuePrefix: displayLeftValuePrefix,
160
- displayValueUnit: displayLeftValueUnit,
157
+ fieldType: displayValueType,
158
+ valuePrefix: displayLeftValuePrefix,
159
+ valueUnit: displayLeftValueUnit,
161
160
  disabled: disabled,
162
161
  onChange: handleInputChange(_types.KeyValueEnum.LEFT),
163
162
  onBlur: handleInputBlur(_types.KeyValueEnum.LEFT),
164
163
  dataAttrs: {
165
164
  input: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.leftInput
166
165
  }
167
- }), /*#__PURE__*/React.createElement(_SliderDisplayValue["default"], {
168
- className: cn('display-value', {
169
- right: true
170
- }),
166
+ }), /*#__PURE__*/React.createElement(_ValueField["default"], {
167
+ isControlled: true,
168
+ position: "right",
171
169
  value: rightInputValue,
172
- displayValueType: displayValueType,
173
- displayValuePrefix: displayRightValuePrefix,
174
- displayValueUnit: displayRightValueUnit,
170
+ fieldType: displayValueType,
171
+ valuePrefix: displayRightValuePrefix,
172
+ valueUnit: displayRightValueUnit,
175
173
  disabled: disabled,
176
174
  onChange: handleInputChange(_types.KeyValueEnum.RIGHT),
177
175
  onBlur: handleInputBlur(_types.KeyValueEnum.RIGHT),
package/dist/lib/index.d.ts CHANGED
@@ -53,7 +53,6 @@ export { default as Select } from './components/Select/Select';
53
53
  export { default as Selector } from './components/Selector/Selector';
54
54
  export { default as selectReducer } from './components/Select/reducer/selectReducer';
55
55
  export { default as Slider } from './components/Sliders/Slider/Slider';
56
- export { default as SliderDisplayValue } from './components/Sliders/components/SliderDisplayValue/SliderDisplayValue';
57
56
  export { default as SliderRange } from './components/Sliders/SliderRange/SliderRange';
58
57
  export { default as SliderRatio } from './components/Sliders/SliderRatio/SliderRatio';
59
58
  export { default as SliderScale } from './components/Sliders/components/SliderScale/SliderScale';
package/dist/lib/index.js CHANGED
@@ -315,12 +315,6 @@ Object.defineProperty(exports, "Slider", {
315
315
  return _Slider["default"];
316
316
  }
317
317
  });
318
- Object.defineProperty(exports, "SliderDisplayValue", {
319
- enumerable: true,
320
- get: function get() {
321
- return _SliderDisplayValue["default"];
322
- }
323
- });
324
318
  Object.defineProperty(exports, "SliderRange", {
325
319
  enumerable: true,
326
320
  get: function get() {
@@ -538,7 +532,6 @@ var _Select = _interopRequireDefault(require("./components/Select/Select"));
538
532
  var _Selector = _interopRequireDefault(require("./components/Selector/Selector"));
539
533
  var _selectReducer = _interopRequireDefault(require("./components/Select/reducer/selectReducer"));
540
534
  var _Slider = _interopRequireDefault(require("./components/Sliders/Slider/Slider"));
541
- var _SliderDisplayValue = _interopRequireDefault(require("./components/Sliders/components/SliderDisplayValue/SliderDisplayValue"));
542
535
  var _SliderRange = _interopRequireDefault(require("./components/Sliders/SliderRange/SliderRange"));
543
536
  var _SliderRatio = _interopRequireDefault(require("./components/Sliders/SliderRatio/SliderRatio"));
544
537
  var _SliderScale = _interopRequireDefault(require("./components/Sliders/components/SliderScale/SliderScale"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "7.6.1",
3
+ "version": "7.7.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -50,7 +50,7 @@
50
50
  "@babel/preset-env": "^7.8.6",
51
51
  "@babel/preset-react": "^7.8.3",
52
52
  "@babel/preset-typescript": "^7.8.3",
53
- "@megafon/ui-icons": "^3.4.0",
53
+ "@megafon/ui-icons": "^3.5.0",
54
54
  "@svgr/core": "^2.4.1",
55
55
  "@testing-library/jest-dom": "^6.5.0",
56
56
  "@testing-library/react": "^16.0.1",
@@ -104,5 +104,5 @@
104
104
  "simplebar-react": "^3.2.5",
105
105
  "swiper": "^11.1.1"
106
106
  },
107
- "gitHead": "2590ce49ccafa95751c3121f9168eccd8b12eaf8"
107
+ "gitHead": "a573f87db1256b45a663aa9acc352edc61a58004"
108
108
  }
package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.css DELETED
@@ -1 +0,0 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-slider-display-value{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-slider-display-value_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.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{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--spbSky3);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;opacity:0;visibility:hidden}.mfui-slider-display-value__prefix{color:var(--spbSky3);margin-right:4px}.mfui-slider-display-value__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;cursor:text;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-slider-display-value__input::-webkit-inner-spin-button,.mfui-slider-display-value__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-slider-display-value__input[type=number]{-moz-appearance:textfield}
package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.d.ts DELETED
@@ -1,23 +0,0 @@
1
- import * as React from 'react';
2
- import './SliderDisplayValue.scss';
3
- export declare const DisplayValue: {
4
- readonly LINE: "line";
5
- readonly INPUT: "input";
6
- };
7
- export type DisplayValueType = (typeof DisplayValue)[keyof typeof DisplayValue];
8
- export interface ISliderDisplayValue {
9
- className?: string;
10
- value: string | number;
11
- displayValueType?: DisplayValueType;
12
- displayValuePrefix?: string;
13
- displayValueUnit?: string;
14
- disabled?: boolean;
15
- dataAttrs?: {
16
- root?: Record<string, string>;
17
- input?: Record<string, string>;
18
- };
19
- onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
20
- onBlur: () => void;
21
- }
22
- declare const SliderDisplayValue: React.FC<ISliderDisplayValue>;
23
- export default SliderDisplayValue;
package/dist/es/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.js DELETED
@@ -1,78 +0,0 @@
1
- import _extends from "@babel/runtime/helpers/extends";
2
- import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
- import "core-js/modules/es.array.includes.js";
4
- import * as React from 'react';
5
- import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
6
- import "./SliderDisplayValue.css";
7
- export var DisplayValue = {
8
- LINE: 'line',
9
- INPUT: 'input'
10
- };
11
- var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
12
- var cn = cnCreate('mfui-slider-display-value');
13
- var SliderDisplayValue = function SliderDisplayValue(_ref) {
14
- var className = _ref.className,
15
- value = _ref.value,
16
- displayValueType = _ref.displayValueType,
17
- displayValuePrefix = _ref.displayValuePrefix,
18
- displayValueUnit = _ref.displayValueUnit,
19
- disabled = _ref.disabled,
20
- dataAttrs = _ref.dataAttrs,
21
- onChange = _ref.onChange,
22
- onBlur = _ref.onBlur;
23
- var inputRef = React.useRef(null);
24
- var _React$useState = React.useState(false),
25
- _React$useState2 = _slicedToArray(_React$useState, 2),
26
- isFocused = _React$useState2[0],
27
- setIsFocused = _React$useState2[1];
28
- var isDisplayValueInput = displayValueType === DisplayValue.INPUT;
29
- var handleInputBlur = function handleInputBlur() {
30
- setIsFocused(false);
31
- onBlur();
32
- };
33
- var handleInputFocus = function handleInputFocus() {
34
- setIsFocused(true);
35
- };
36
- var handleKeyDown = function handleKeyDown(e) {
37
- var _a;
38
- if (e.key === 'Enter') {
39
- (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
40
- onBlur();
41
- return;
42
- }
43
- if (charsAllowedByNumberInput.includes(e.key)) {
44
- e.preventDefault();
45
- }
46
- };
47
- return (
48
- /*#__PURE__*/
49
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
50
- React.createElement("label", _extends({
51
- className: cn({
52
- interactive: isDisplayValueInput,
53
- focus: isFocused,
54
- disabled: disabled
55
- }, [className])
56
- }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!displayValuePrefix && /*#__PURE__*/React.createElement("div", {
57
- className: cn('prefix')
58
- }, displayValuePrefix), /*#__PURE__*/React.createElement("div", {
59
- className: cn('box')
60
- }, isDisplayValueInput && /*#__PURE__*/React.createElement("input", _extends({
61
- className: cn('input'),
62
- type: "number",
63
- value: value,
64
- onChange: onChange,
65
- onBlur: handleInputBlur,
66
- onFocus: handleInputFocus,
67
- onKeyDown: handleKeyDown,
68
- disabled: disabled
69
- }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
70
- ref: inputRef
71
- })), /*#__PURE__*/React.createElement("div", {
72
- className: cn('line')
73
- }, value)), !!displayValueUnit && /*#__PURE__*/React.createElement("div", {
74
- className: cn('unit')
75
- }, displayValueUnit))
76
- );
77
- };
78
- export default SliderDisplayValue;
package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.css DELETED
@@ -1 +0,0 @@
1
- h1,h2,h3,h4,h5{margin:0}.mfui-slider-display-value{color:var(--content);display:-webkit-box;display:-ms-flexbox;display:flex;font-weight:400;max-width:100%}.mfui-slider-display-value_interactive{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--base);border:1px solid var(--spbSky2);border-radius:12px;cursor:text;min-width:90px;overflow:hidden;padding:7px 16px}.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{background-color:var(--spbSky0);border-color:var(--spbSky0);color:var(--spbSky3);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;opacity:0;visibility:hidden}.mfui-slider-display-value__prefix{color:var(--spbSky3);margin-right:4px}.mfui-slider-display-value__input{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;caret-color:var(--brandGreen);color:inherit;cursor:text;display:block;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin:0;min-width:100%;opacity:1;outline:none;padding:0;width:10px}.mfui-slider-display-value__input::-webkit-inner-spin-button,.mfui-slider-display-value__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mfui-slider-display-value__input[type=number]{-moz-appearance:textfield}
package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.d.ts DELETED
@@ -1,23 +0,0 @@
1
- import * as React from 'react';
2
- import './SliderDisplayValue.scss';
3
- export declare const DisplayValue: {
4
- readonly LINE: "line";
5
- readonly INPUT: "input";
6
- };
7
- export type DisplayValueType = (typeof DisplayValue)[keyof typeof DisplayValue];
8
- export interface ISliderDisplayValue {
9
- className?: string;
10
- value: string | number;
11
- displayValueType?: DisplayValueType;
12
- displayValuePrefix?: string;
13
- displayValueUnit?: string;
14
- disabled?: boolean;
15
- dataAttrs?: {
16
- root?: Record<string, string>;
17
- input?: Record<string, string>;
18
- };
19
- onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
20
- onBlur: () => void;
21
- }
22
- declare const SliderDisplayValue: React.FC<ISliderDisplayValue>;
23
- export default SliderDisplayValue;
package/dist/lib/components/Sliders/components/SliderDisplayValue/SliderDisplayValue.js DELETED
@@ -1,86 +0,0 @@
1
- "use strict";
2
-
3
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports["default"] = exports.DisplayValue = void 0;
8
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
- require("core-js/modules/es.array.includes.js");
11
- var React = _interopRequireWildcard(require("react"));
12
- var _uiHelpers = require("@megafon/ui-helpers");
13
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
15
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
16
- var DisplayValue = exports.DisplayValue = {
17
- LINE: 'line',
18
- INPUT: 'input'
19
- };
20
- var charsAllowedByNumberInput = ['e', 'E', '+', '-'];
21
- var cn = (0, _uiHelpers.cnCreate)('mfui-slider-display-value');
22
- var SliderDisplayValue = function SliderDisplayValue(_ref) {
23
- var className = _ref.className,
24
- value = _ref.value,
25
- displayValueType = _ref.displayValueType,
26
- displayValuePrefix = _ref.displayValuePrefix,
27
- displayValueUnit = _ref.displayValueUnit,
28
- disabled = _ref.disabled,
29
- dataAttrs = _ref.dataAttrs,
30
- onChange = _ref.onChange,
31
- onBlur = _ref.onBlur;
32
- var inputRef = React.useRef(null);
33
- var _React$useState = React.useState(false),
34
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
35
- isFocused = _React$useState2[0],
36
- setIsFocused = _React$useState2[1];
37
- var isDisplayValueInput = displayValueType === DisplayValue.INPUT;
38
- var handleInputBlur = function handleInputBlur() {
39
- setIsFocused(false);
40
- onBlur();
41
- };
42
- var handleInputFocus = function handleInputFocus() {
43
- setIsFocused(true);
44
- };
45
- var handleKeyDown = function handleKeyDown(e) {
46
- var _a;
47
- if (e.key === 'Enter') {
48
- (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
49
- onBlur();
50
- return;
51
- }
52
- if (charsAllowedByNumberInput.includes(e.key)) {
53
- e.preventDefault();
54
- }
55
- };
56
- return /*#__PURE__*/(
57
- // eslint-disable-next-line jsx-a11y/label-has-associated-control
58
- React.createElement("label", (0, _extends2["default"])({
59
- className: cn({
60
- interactive: isDisplayValueInput,
61
- focus: isFocused,
62
- disabled: disabled
63
- }, [className])
64
- }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), !!displayValuePrefix && /*#__PURE__*/React.createElement("div", {
65
- className: cn('prefix')
66
- }, displayValuePrefix), /*#__PURE__*/React.createElement("div", {
67
- className: cn('box')
68
- }, isDisplayValueInput && /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
69
- className: cn('input'),
70
- type: "number",
71
- value: value,
72
- onChange: onChange,
73
- onBlur: handleInputBlur,
74
- onFocus: handleInputFocus,
75
- onKeyDown: handleKeyDown,
76
- disabled: disabled
77
- }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input), {
78
- ref: inputRef
79
- })), /*#__PURE__*/React.createElement("div", {
80
- className: cn('line')
81
- }, value)), !!displayValueUnit && /*#__PURE__*/React.createElement("div", {
82
- className: cn('unit')
83
- }, displayValueUnit))
84
- );
85
- };
86
- var _default = exports["default"] = SliderDisplayValue;