@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/DateRangeInput/DateRangeInput.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["shouldDisableDate", "disableFuture", "disablePast", "value", "onChange", "calendarPlacement", "style", "className", "closeOnChange", "disablePickers", "getRootRef", "name", "autoFocus", "disabled", "onClick", "onFocus", "prevMonthAriaLabel", "nextMonthAriaLabel", "changeDayAriaLabel", "changeMonthAriaLabel", "changeYearAriaLabel", "changeStartDayAriaLabel", "changeStartMonthAriaLabel", "changeStartYearAriaLabel", "changeEndDayAriaLabel", "changeEndMonthAriaLabel", "changeEndYearAriaLabel", "clearFieldAriaLabel", "showCalendarAriaLabel", "prevMonthIcon", "nextMonthIcon", "disableCalendar"];
 import * as React from 'react';
 import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
@@ -17,259 +13,233 @@ import { IconButton } from '../IconButton/IconButton';
 import { InputLike } from '../InputLike/InputLike';
 import { InputLikeDivider } from '../InputLike/InputLikeDivider';
 import { Popper } from '../Popper/Popper';
-import "./DateRangeInput.module.css";
-import "../DateInput/DateInput.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiDateRangeInput--sizeY-none"
-}, SizeType.COMPACT, "vkuiDateRangeInput--sizeY-compact");
-var elementsConfig = function elementsConfig(index) {
-  var length = 2;
-  var min = 1;
-  var max = 0;
-  switch (index) {
-    case 0:
-    case 3:
-      max = 31;
-      break;
-    case 1:
-    case 4:
-      max = 12;
-      break;
-    case 2:
-    case 5:
-      max = 2100;
-      min = 1900;
-      length = 4;
-      break;
-  }
-  return {
-    length: length,
-    min: min,
-    max: max
-  };
+import styles from './DateRangeInput.module.css';
+import dateInputStyles from '../DateInput/DateInput.module.css';
+const sizeYClassNames = {
+    none: styles['DateRangeInput--sizeY-none'],
+    [SizeType.COMPACT]: styles['DateRangeInput--sizeY-compact']
 };
-var getInternalValue = function getInternalValue(value) {
-  var newValue = ['', '', '', '', '', ''];
-  if (value !== null && value !== void 0 && value[0]) {
-    newValue[0] = String(value[0].getDate()).padStart(2, '0');
-    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');
-    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');
-  }
-  if (value !== null && value !== void 0 && value[1]) {
-    newValue[3] = String(value[1].getDate()).padStart(2, '0');
-    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');
-    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');
-  }
-  return newValue;
-};
-
-/**
- * @see https://vkcom.github.io/VKUI/#/DateRangeInput
- */
-export var DateRangeInput = function DateRangeInput(_ref) {
-  var shouldDisableDate = _ref.shouldDisableDate,
-    disableFuture = _ref.disableFuture,
-    disablePast = _ref.disablePast,
-    value = _ref.value,
-    onChange = _ref.onChange,
-    _ref$calendarPlacemen = _ref.calendarPlacement,
-    calendarPlacement = _ref$calendarPlacemen === void 0 ? 'bottom-start' : _ref$calendarPlacemen,
-    style = _ref.style,
-    className = _ref.className,
-    _ref$closeOnChange = _ref.closeOnChange,
-    closeOnChange = _ref$closeOnChange === void 0 ? true : _ref$closeOnChange,
-    disablePickers = _ref.disablePickers,
-    getRootRef = _ref.getRootRef,
-    name = _ref.name,
-    autoFocus = _ref.autoFocus,
-    disabled = _ref.disabled,
-    onClick = _ref.onClick,
-    onFocus = _ref.onFocus,
-    prevMonthAriaLabel = _ref.prevMonthAriaLabel,
-    nextMonthAriaLabel = _ref.nextMonthAriaLabel,
-    changeDayAriaLabel = _ref.changeDayAriaLabel,
-    changeMonthAriaLabel = _ref.changeMonthAriaLabel,
-    changeYearAriaLabel = _ref.changeYearAriaLabel,
-    _ref$changeStartDayAr = _ref.changeStartDayAriaLabel,
-    changeStartDayAriaLabel = _ref$changeStartDayAr === void 0 ? 'Изменить день начала' : _ref$changeStartDayAr,
-    _ref$changeStartMonth = _ref.changeStartMonthAriaLabel,
-    changeStartMonthAriaLabel = _ref$changeStartMonth === void 0 ? 'Изменить месяц начала' : _ref$changeStartMonth,
-    _ref$changeStartYearA = _ref.changeStartYearAriaLabel,
-    changeStartYearAriaLabel = _ref$changeStartYearA === void 0 ? 'Изменить год начала' : _ref$changeStartYearA,
-    _ref$changeEndDayAria = _ref.changeEndDayAriaLabel,
-    changeEndDayAriaLabel = _ref$changeEndDayAria === void 0 ? 'Изменить день окончания' : _ref$changeEndDayAria,
-    _ref$changeEndMonthAr = _ref.changeEndMonthAriaLabel,
-    changeEndMonthAriaLabel = _ref$changeEndMonthAr === void 0 ? 'Изменить месяц окончания' : _ref$changeEndMonthAr,
-    _ref$changeEndYearAri = _ref.changeEndYearAriaLabel,
-    changeEndYearAriaLabel = _ref$changeEndYearAri === void 0 ? 'Изменить год окончания' : _ref$changeEndYearAri,
-    _ref$clearFieldAriaLa = _ref.clearFieldAriaLabel,
-    clearFieldAriaLabel = _ref$clearFieldAriaLa === void 0 ? 'Очистить поле' : _ref$clearFieldAriaLa,
-    _ref$showCalendarAria = _ref.showCalendarAriaLabel,
-    showCalendarAriaLabel = _ref$showCalendarAria === void 0 ? 'Показать календарь' : _ref$showCalendarAria,
-    prevMonthIcon = _ref.prevMonthIcon,
-    nextMonthIcon = _ref.nextMonthIcon,
-    _ref$disableCalendar = _ref.disableCalendar,
-    disableCalendar = _ref$disableCalendar === void 0 ? false : _ref$disableCalendar,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var daysStartRef = React.useRef(null);
-  var monthsStartRef = React.useRef(null);
-  var yearsStartRef = React.useRef(null);
-  var daysEndRef = React.useRef(null);
-  var monthsEndRef = React.useRef(null);
-  var yearsEndRef = React.useRef(null);
-  var onInternalValueChange = React.useCallback(function (internalValue) {
-    var isStartValid = true;
-    var isEndValid = true;
-    for (var i = 0; i <= 2; i += 1) {
-      if (internalValue[i].length < elementsConfig(i).length) {
-        isStartValid = false;
-      }
-    }
-    for (var _i = 3; _i <= 5; _i += 1) {
-      if (internalValue[_i].length < elementsConfig(_i).length) {
-        isEndValid = false;
-      }
-    }
-    var formattedStartValue = "".concat(internalValue[0], ".").concat(internalValue[1], ".").concat(internalValue[2]);
-    var formattedEndValue = "".concat(internalValue[3], ".").concat(internalValue[4], ".").concat(internalValue[5]);
-    var mask = 'dd.MM.yyyy';
-    if (!isMatch(formattedStartValue, mask)) {
-      isStartValid = false;
-    }
-    if (!isMatch(formattedEndValue, mask)) {
-      isEndValid = false;
+const elementsConfig = (index)=>{
+    let length = 2;
+    let min = 1;
+    let max = 0;
+    switch(index){
+        case 0:
+        case 3:
+            max = 31;
+            break;
+        case 1:
+        case 4:
+            max = 12;
+            break;
+        case 2:
+        case 5:
+            max = 2100;
+            min = 1900;
+            length = 4;
+            break;
     }
-    if (!isStartValid && !isEndValid) {
-      return;
-    }
-    var valueExists = Array.isArray(value);
-    var now = new Date();
-    var start = isStartValid ? parse(formattedStartValue, mask, valueExists && (value === null || value === void 0 ? void 0 : value[0]) || now) : null;
-    var end = isEndValid ? parse(formattedEndValue, mask, valueExists && (value === null || value === void 0 ? void 0 : value[1]) || now) : null;
-    if (start && end && isAfter(end, start)) {
-      onChange === null || onChange === void 0 ? void 0 : onChange([start, end]);
+    return {
+        length,
+        min,
+        max
+    };
+};
+const getInternalValue = (value)=>{
+    const newValue = [
+        '',
+        '',
+        '',
+        '',
+        '',
+        ''
+    ];
+    if (value?.[0]) {
+        newValue[0] = String(value[0].getDate()).padStart(2, '0');
+        newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');
+        newValue[2] = String(value[0].getFullYear()).padStart(4, '0');
     }
-  }, [onChange, value]);
-  var refs = React.useMemo(function () {
-    return [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef];
-  }, [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef]);
-  var _useDateInput = useDateInput({
-      maxElement: 5,
-      refs: refs,
-      autoFocus: autoFocus,
-      disabled: disabled,
-      elementsConfig: elementsConfig,
-      onChange: onChange,
-      onInternalValueChange: onInternalValueChange,
-      getInternalValue: getInternalValue,
-      value: value
-    }),
-    rootRef = _useDateInput.rootRef,
-    calendarRef = _useDateInput.calendarRef,
-    open = _useDateInput.open,
-    openCalendar = _useDateInput.openCalendar,
-    closeCalendar = _useDateInput.closeCalendar,
-    internalValue = _useDateInput.internalValue,
-    handleKeyDown = _useDateInput.handleKeyDown,
-    setFocusedElement = _useDateInput.setFocusedElement,
-    handleFieldEnter = _useDateInput.handleFieldEnter,
-    clear = _useDateInput.clear,
-    removeFocusFromField = _useDateInput.removeFocusFromField;
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var handleRootRef = useExternRef(rootRef, getRootRef);
-  var onCalendarChange = React.useCallback(function (newValue) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    if (closeOnChange && newValue !== null && newValue !== void 0 && newValue[1] && newValue[1] !== (value === null || value === void 0 ? void 0 : value[1])) {
-      removeFocusFromField();
+    if (value?.[1]) {
+        newValue[3] = String(value[1].getDate()).padStart(2, '0');
+        newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');
+        newValue[5] = String(value[1].getFullYear()).padStart(4, '0');
     }
-  }, [onChange, closeOnChange, value, removeFocusFromField]);
-  return /*#__PURE__*/React.createElement(FormField, _extends({
-    style: style,
-    className: classNames("vkuiDateRangeInput", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
-    getRootRef: handleRootRef,
-    after: value ? /*#__PURE__*/React.createElement(IconButton, {
-      hoverMode: "opacity",
-      "aria-label": clearFieldAriaLabel,
-      onClick: clear
-    }, /*#__PURE__*/React.createElement(Icon16Clear, null)) : /*#__PURE__*/React.createElement(IconButton, {
-      hoverMode: "opacity",
-      "aria-label": showCalendarAriaLabel,
-      onClick: openCalendar
-    }, /*#__PURE__*/React.createElement(Icon20CalendarOutline, null)),
-    disabled: disabled,
-    onClick: callMultiple(handleFieldEnter, onClick),
-    onFocus: callMultiple(handleFieldEnter, onFocus)
-  }, props), /*#__PURE__*/React.createElement("input", {
-    type: "hidden",
-    name: name,
-    value: value ? "".concat(value[0] ? format(value[0], 'DD.MM.YYYY') : '', " - ").concat(value[1] ? format(value[1], 'DD.MM.YYYY') : '') : ''
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "vkuiDateInput__input",
-    onKeyDown: handleKeyDown
-  }, /*#__PURE__*/React.createElement(InputLike, {
-    length: 2,
-    getRootRef: daysStartRef,
-    index: 0,
-    onElementSelect: setFocusedElement,
-    value: internalValue[0],
-    "aria-label": changeStartDayAriaLabel
-  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/React.createElement(InputLike, {
-    length: 2,
-    getRootRef: monthsStartRef,
-    index: 1,
-    onElementSelect: setFocusedElement,
-    value: internalValue[1],
-    "aria-label": changeStartMonthAriaLabel
-  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/React.createElement(InputLike, {
-    length: 4,
-    getRootRef: yearsStartRef,
-    index: 2,
-    onElementSelect: setFocusedElement,
-    value: internalValue[2],
-    "aria-label": changeStartYearAriaLabel
-  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, ' — '), /*#__PURE__*/React.createElement(InputLike, {
-    length: 2,
-    getRootRef: daysEndRef,
-    index: 3,
-    onElementSelect: setFocusedElement,
-    value: internalValue[3],
-    "aria-label": changeEndDayAriaLabel
-  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/React.createElement(InputLike, {
-    length: 2,
-    getRootRef: monthsEndRef,
-    index: 4,
-    onElementSelect: setFocusedElement,
-    value: internalValue[4],
-    "aria-label": changeEndMonthAriaLabel
-  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/React.createElement(InputLike, {
-    length: 4,
-    getRootRef: yearsEndRef,
-    index: 5,
-    onElementSelect: setFocusedElement,
-    value: internalValue[5],
-    "aria-label": changeEndYearAriaLabel
-  })), open && !disableCalendar && /*#__PURE__*/React.createElement(Popper, {
-    targetRef: rootRef,
-    offsetDistance: 8,
-    placement: calendarPlacement
-  }, /*#__PURE__*/React.createElement(CalendarRange, {
-    value: value,
-    onChange: onCalendarChange,
-    disablePast: disablePast,
-    disableFuture: disableFuture,
-    shouldDisableDate: shouldDisableDate,
-    onClose: closeCalendar,
-    getRootRef: calendarRef,
-    disablePickers: disablePickers,
-    prevMonthAriaLabel: prevMonthAriaLabel,
-    nextMonthAriaLabel: nextMonthAriaLabel,
-    changeMonthAriaLabel: changeMonthAriaLabel,
-    changeYearAriaLabel: changeYearAriaLabel,
-    changeDayAriaLabel: changeDayAriaLabel,
-    prevMonthIcon: prevMonthIcon,
-    nextMonthIcon: nextMonthIcon
-  })));
+    return newValue;
+};
+/**
+ * @see https://vkcom.github.io/VKUI/#/DateRangeInput
+ */ export const DateRangeInput = ({ shouldDisableDate , disableFuture , disablePast , value , onChange , calendarPlacement ='bottom-start' , style , className , closeOnChange =true , disablePickers , getRootRef , name , autoFocus , disabled , onClick , onFocus , prevMonthAriaLabel , nextMonthAriaLabel , changeDayAriaLabel , changeMonthAriaLabel , changeYearAriaLabel , changeStartDayAriaLabel ='Изменить день начала' , changeStartMonthAriaLabel ='Изменить месяц начала' , changeStartYearAriaLabel ='Изменить год начала' , changeEndDayAriaLabel ='Изменить день окончания' , changeEndMonthAriaLabel ='Изменить месяц окончания' , changeEndYearAriaLabel ='Изменить год окончания' , clearFieldAriaLabel ='Очистить поле' , showCalendarAriaLabel ='Показать календарь' , prevMonthIcon , nextMonthIcon , disableCalendar =false , ...props })=>{
+    const daysStartRef = React.useRef(null);
+    const monthsStartRef = React.useRef(null);
+    const yearsStartRef = React.useRef(null);
+    const daysEndRef = React.useRef(null);
+    const monthsEndRef = React.useRef(null);
+    const yearsEndRef = React.useRef(null);
+    const onInternalValueChange = React.useCallback((internalValue)=>{
+        let isStartValid = true;
+        let isEndValid = true;
+        for(let i = 0; i <= 2; i += 1){
+            if (internalValue[i].length < elementsConfig(i).length) {
+                isStartValid = false;
+            }
+        }
+        for(let i = 3; i <= 5; i += 1){
+            if (internalValue[i].length < elementsConfig(i).length) {
+                isEndValid = false;
+            }
+        }
+        const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;
+        const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;
+        const mask = 'dd.MM.yyyy';
+        if (!isMatch(formattedStartValue, mask)) {
+            isStartValid = false;
+        }
+        if (!isMatch(formattedEndValue, mask)) {
+            isEndValid = false;
+        }
+        if (!isStartValid && !isEndValid) {
+            return;
+        }
+        const valueExists = Array.isArray(value);
+        const now = new Date();
+        const start = isStartValid ? parse(formattedStartValue, mask, valueExists && value?.[0] || now) : null;
+        const end = isEndValid ? parse(formattedEndValue, mask, valueExists && value?.[1] || now) : null;
+        if (start && end && isAfter(end, start)) {
+            onChange?.([
+                start,
+                end
+            ]);
+        }
+    }, [
+        onChange,
+        value
+    ]);
+    const refs = React.useMemo(()=>[
+            daysStartRef,
+            monthsStartRef,
+            yearsStartRef,
+            daysEndRef,
+            monthsEndRef,
+            yearsEndRef
+        ], [
+        daysStartRef,
+        monthsStartRef,
+        yearsStartRef,
+        daysEndRef,
+        monthsEndRef,
+        yearsEndRef
+    ]);
+    const { rootRef , calendarRef , open , openCalendar , closeCalendar , internalValue , handleKeyDown , setFocusedElement , handleFieldEnter , clear , removeFocusFromField  } = useDateInput({
+        maxElement: 5,
+        refs,
+        autoFocus,
+        disabled,
+        elementsConfig,
+        onChange,
+        onInternalValueChange,
+        getInternalValue,
+        value
+    });
+    const { sizeY ='none'  } = useAdaptivity();
+    const handleRootRef = useExternRef(rootRef, getRootRef);
+    const onCalendarChange = React.useCallback((newValue)=>{
+        onChange?.(newValue);
+        if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {
+            removeFocusFromField();
+        }
+    }, [
+        onChange,
+        closeOnChange,
+        value,
+        removeFocusFromField
+    ]);
+    return /*#__PURE__*/ React.createElement(FormField, {
+        style: style,
+        className: classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
+        getRootRef: handleRootRef,
+        after: value ? /*#__PURE__*/ React.createElement(IconButton, {
+            hoverMode: "opacity",
+            "aria-label": clearFieldAriaLabel,
+            onClick: clear
+        }, /*#__PURE__*/ React.createElement(Icon16Clear, null)) : /*#__PURE__*/ React.createElement(IconButton, {
+            hoverMode: "opacity",
+            "aria-label": showCalendarAriaLabel,
+            onClick: openCalendar
+        }, /*#__PURE__*/ React.createElement(Icon20CalendarOutline, null)),
+        disabled: disabled,
+        onClick: callMultiple(handleFieldEnter, onClick),
+        onFocus: callMultiple(handleFieldEnter, onFocus),
+        ...props
+    }, /*#__PURE__*/ React.createElement("input", {
+        type: "hidden",
+        name: name,
+        value: value ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${value[1] ? format(value[1], 'DD.MM.YYYY') : ''}` : ''
+    }), /*#__PURE__*/ React.createElement("span", {
+        className: dateInputStyles['DateInput__input'],
+        onKeyDown: handleKeyDown
+    }, /*#__PURE__*/ React.createElement(InputLike, {
+        length: 2,
+        getRootRef: daysStartRef,
+        index: 0,
+        onElementSelect: setFocusedElement,
+        value: internalValue[0],
+        "aria-label": changeStartDayAriaLabel
+    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
+        length: 2,
+        getRootRef: monthsStartRef,
+        index: 1,
+        onElementSelect: setFocusedElement,
+        value: internalValue[1],
+        "aria-label": changeStartMonthAriaLabel
+    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
+        length: 4,
+        getRootRef: yearsStartRef,
+        index: 2,
+        onElementSelect: setFocusedElement,
+        value: internalValue[2],
+        "aria-label": changeStartYearAriaLabel
+    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, ' — '), /*#__PURE__*/ React.createElement(InputLike, {
+        length: 2,
+        getRootRef: daysEndRef,
+        index: 3,
+        onElementSelect: setFocusedElement,
+        value: internalValue[3],
+        "aria-label": changeEndDayAriaLabel
+    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
+        length: 2,
+        getRootRef: monthsEndRef,
+        index: 4,
+        onElementSelect: setFocusedElement,
+        value: internalValue[4],
+        "aria-label": changeEndMonthAriaLabel
+    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
+        length: 4,
+        getRootRef: yearsEndRef,
+        index: 5,
+        onElementSelect: setFocusedElement,
+        value: internalValue[5],
+        "aria-label": changeEndYearAriaLabel
+    })), open && !disableCalendar && /*#__PURE__*/ React.createElement(Popper, {
+        targetRef: rootRef,
+        offsetDistance: 8,
+        placement: calendarPlacement
+    }, /*#__PURE__*/ React.createElement(CalendarRange, {
+        value: value,
+        onChange: onCalendarChange,
+        disablePast: disablePast,
+        disableFuture: disableFuture,
+        shouldDisableDate: shouldDisableDate,
+        onClose: closeCalendar,
+        getRootRef: calendarRef,
+        disablePickers: disablePickers,
+        prevMonthAriaLabel: prevMonthAriaLabel,
+        nextMonthAriaLabel: nextMonthAriaLabel,
+        changeMonthAriaLabel: changeMonthAriaLabel,
+        changeYearAriaLabel: changeYearAriaLabel,
+        changeDayAriaLabel: changeDayAriaLabel,
+        prevMonthIcon: prevMonthIcon,
+        nextMonthIcon: nextMonthIcon
+    })));
 };
+
 //# sourceMappingURL=DateRangeInput.js.map

package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.js","names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","changeDayAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeStartDayAriaLabel","changeStartMonthAriaLabel","changeStartYearAriaLabel","changeEndDayAriaLabel","changeEndMonthAriaLabel","changeEndYearAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","maxElement","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","REGULAR"],"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateRangeInput--sizeY-compact'],\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'changeDayAriaLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  changeStartDayAriaLabel?: string;\n  changeStartMonthAriaLabel?: string;\n  changeStartYearAriaLabel?: string;\n  changeEndDayAriaLabel?: string;\n  changeEndMonthAriaLabel?: string;\n  changeEndYearAriaLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeDayAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeStartDayAriaLabel = 'Изменить день начала',\n  changeStartMonthAriaLabel = 'Изменить месяц начала',\n  changeStartYearAriaLabel = 'Изменить год начала',\n  changeEndDayAriaLabel = 'Изменить день окончания',\n  changeEndMonthAriaLabel = 'Изменить месяц окончания',\n  changeEndYearAriaLabel = 'Изменить год окончания',\n  clearFieldAriaLabel = 'Очистить поле',\n  showCalendarAriaLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateRangeInputProps) => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'dd.MM.yyyy';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue?: Array<Date | null> | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['DateRangeInput'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={\n          value\n            ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${\n                value[1] ? format(value[1], 'DD.MM.YYYY') : ''\n              }`\n            : ''\n        }\n      />\n      <span className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeStartDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeStartMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeStartYearAriaLabel}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          aria-label={changeEndDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          aria-label={changeEndMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          aria-label={changeEndYearAriaLabel}\n        />\n      </span>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,WAAW,EAAEC,qBAAqB,QAAQ,kBAAkB;AACrE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAEC,KAAK,QAAQ,gBAAgB;AAGhE,SAASC,aAAa,QAA4B,gCAAgC;AAClF,SAASC,SAAS,QAAwB,wBAAwB;AAClE,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,MAAM,QAAQ,kBAAkB;AAAC;AAAA;AAI1C,IAAMC,eAAe;EACnBC,IAAI;AAAsC,GACzCb,QAAQ,CAACc,OAAO,sCAClB;AAoCD,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,KAAa,EAAK;EACxC,IAAIC,MAAM,GAAG,CAAC;EACd,IAAIC,GAAG,GAAG,CAAC;EACX,IAAIC,GAAG,GAAG,CAAC;EAEX,QAAQH,KAAK;IACX,KAAK,CAAC;IACN,KAAK,CAAC;MACJG,GAAG,GAAG,EAAE;MACR;IACF,KAAK,CAAC;IACN,KAAK,CAAC;MACJA,GAAG,GAAG,EAAE;MACR;IACF,KAAK,CAAC;IACN,KAAK,CAAC;MACJA,GAAG,GAAG,IAAI;MACVD,GAAG,GAAG,IAAI;MACVD,MAAM,GAAG,CAAC;MACV;EAAM;EAGV,OAAO;IAAEA,MAAM,EAANA,MAAM;IAAEC,GAAG,EAAHA,GAAG;IAAEC,GAAG,EAAHA;EAAI,CAAC;AAC7B,CAAC;AAED,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,KAAkC,EAAK;EAC/D,IAAMC,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;EACzC,IAAID,KAAK,aAALA,KAAK,eAALA,KAAK,CAAG,CAAC,CAAC,EAAE;IACdC,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACG,OAAO,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IACzDH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACK,QAAQ,EAAE,GAAG,CAAC,CAAC,CAACD,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IAC9DH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACM,WAAW,EAAE,CAAC,CAACF,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAC/D;EACA,IAAIJ,KAAK,aAALA,KAAK,eAALA,KAAK,CAAG,CAAC,CAAC,EAAE;IACdC,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACG,OAAO,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IACzDH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACK,QAAQ,EAAE,GAAG,CAAC,CAAC,CAACD,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IAC9DH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACM,WAAW,EAAE,CAAC,CAACF,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAC/D;EACA,OAAOH,QAAQ;AACjB,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMM,cAAc,GAAG,SAAjBA,cAAc,OAkCA;EAAA,IAjCzBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,aAAa,QAAbA,aAAa;IACbC,WAAW,QAAXA,WAAW;IACXV,KAAK,QAALA,KAAK;IACLW,QAAQ,QAARA,QAAQ;IAAA,6BACRC,iBAAiB;IAAjBA,iBAAiB,sCAAG,cAAc;IAClCC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IAAA,0BACTC,aAAa;IAAbA,aAAa,mCAAG,IAAI;IACpBC,cAAc,QAAdA,cAAc;IACdC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,kBAAkB,QAAlBA,kBAAkB;IAClBC,kBAAkB,QAAlBA,kBAAkB;IAClBC,kBAAkB,QAAlBA,kBAAkB;IAClBC,oBAAoB,QAApBA,oBAAoB;IACpBC,mBAAmB,QAAnBA,mBAAmB;IAAA,6BACnBC,uBAAuB;IAAvBA,uBAAuB,sCAAG,sBAAsB;IAAA,6BAChDC,yBAAyB;IAAzBA,yBAAyB,sCAAG,uBAAuB;IAAA,6BACnDC,wBAAwB;IAAxBA,wBAAwB,sCAAG,qBAAqB;IAAA,6BAChDC,qBAAqB;IAArBA,qBAAqB,sCAAG,yBAAyB;IAAA,6BACjDC,uBAAuB;IAAvBA,uBAAuB,sCAAG,0BAA0B;IAAA,6BACpDC,sBAAsB;IAAtBA,sBAAsB,sCAAG,wBAAwB;IAAA,6BACjDC,mBAAmB;IAAnBA,mBAAmB,sCAAG,eAAe;IAAA,6BACrCC,qBAAqB;IAArBA,qBAAqB,sCAAG,oBAAoB;IAC5CC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IAAA,4BACbC,eAAe;IAAfA,eAAe,qCAAG,KAAK;IACpBC,KAAK;EAER,IAAMC,YAAY,GAAGpE,KAAK,CAACqE,MAAM,CAAkB,IAAI,CAAC;EACxD,IAAMC,cAAc,GAAGtE,KAAK,CAACqE,MAAM,CAAkB,IAAI,CAAC;EAC1D,IAAME,aAAa,GAAGvE,KAAK,CAACqE,MAAM,CAAkB,IAAI,CAAC;EACzD,IAAMG,UAAU,GAAGxE,KAAK,CAACqE,MAAM,CAAkB,IAAI,CAAC;EACtD,IAAMI,YAAY,GAAGzE,KAAK,CAACqE,MAAM,CAAkB,IAAI,CAAC;EACxD,IAAMK,WAAW,GAAG1E,KAAK,CAACqE,MAAM,CAAkB,IAAI,CAAC;EAEvD,IAAMM,qBAAqB,GAAG3E,KAAK,CAAC4E,WAAW,CAC7C,UAACC,aAAuB,EAAK;IAC3B,IAAIC,YAAY,GAAG,IAAI;IACvB,IAAIC,UAAU,GAAG,IAAI;IACrB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,IAAI,CAAC,EAAEA,CAAC,IAAI,CAAC,EAAE;MAC9B,IAAIH,aAAa,CAACG,CAAC,CAAC,CAACxD,MAAM,GAAGF,cAAc,CAAC0D,CAAC,CAAC,CAACxD,MAAM,EAAE;QACtDsD,YAAY,GAAG,KAAK;MACtB;IACF;IACA,KAAK,IAAIE,EAAC,GAAG,CAAC,EAAEA,EAAC,IAAI,CAAC,EAAEA,EAAC,IAAI,CAAC,EAAE;MAC9B,IAAIH,aAAa,CAACG,EAAC,CAAC,CAACxD,MAAM,GAAGF,cAAc,CAAC0D,EAAC,CAAC,CAACxD,MAAM,EAAE;QACtDuD,UAAU,GAAG,KAAK;MACpB;IACF;IACA,IAAME,mBAAmB,aAAMJ,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,CAAE;IACzF,IAAMK,iBAAiB,aAAML,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,CAAE;IACvF,IAAMM,IAAI,GAAG,YAAY;IAEzB,IAAI,CAACxE,OAAO,CAACsE,mBAAmB,EAAEE,IAAI,CAAC,EAAE;MACvCL,YAAY,GAAG,KAAK;IACtB;IACA,IAAI,CAACnE,OAAO,CAACuE,iBAAiB,EAAEC,IAAI,CAAC,EAAE;MACrCJ,UAAU,GAAG,KAAK;IACpB;IAEA,IAAI,CAACD,YAAY,IAAI,CAACC,UAAU,EAAE;MAChC;IACF;IAEA,IAAMK,WAAW,GAAGC,KAAK,CAACC,OAAO,CAAC1D,KAAK,CAAC;IACxC,IAAM2D,GAAG,GAAG,IAAIC,IAAI,EAAE;IACtB,IAAMC,KAAK,GAAGX,YAAY,GACtBlE,KAAK,CAACqE,mBAAmB,EAAEE,IAAI,EAAGC,WAAW,KAAIxD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,CAAC,CAAC,KAAK2D,GAAG,CAAC,GACpE,IAAI;IACR,IAAMG,GAAG,GAAGX,UAAU,GAClBnE,KAAK,CAACsE,iBAAiB,EAAEC,IAAI,EAAGC,WAAW,KAAIxD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,CAAC,CAAC,KAAK2D,GAAG,CAAC,GAClE,IAAI;IACR,IAAIE,KAAK,IAAIC,GAAG,IAAIhF,OAAO,CAACgF,GAAG,EAAED,KAAK,CAAC,EAAE;MACvClD,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG,CAACkD,KAAK,EAAEC,GAAG,CAAC,CAAC;IAC1B;EACF,CAAC,EACD,CAACnD,QAAQ,EAAEX,KAAK,CAAC,CAClB;EAED,IAAM+D,IAAI,GAAG3F,KAAK,CAAC4F,OAAO,CACxB;IAAA,OAAM,CAACxB,YAAY,EAAEE,cAAc,EAAEC,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,WAAW,CAAC;EAAA,GAC1F,CAACN,YAAY,EAAEE,cAAc,EAAEC,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,WAAW,CAAC,CACrF;EAED,oBAYIrE,YAAY,CAAC;MACfwF,UAAU,EAAE,CAAC;MACbF,IAAI,EAAJA,IAAI;MACJ5C,SAAS,EAATA,SAAS;MACTC,QAAQ,EAARA,QAAQ;MACR1B,cAAc,EAAdA,cAAc;MACdiB,QAAQ,EAARA,QAAQ;MACRoC,qBAAqB,EAArBA,qBAAqB;MACrBhD,gBAAgB,EAAhBA,gBAAgB;MAChBC,KAAK,EAALA;IACF,CAAC,CAAC;IArBAkE,OAAO,iBAAPA,OAAO;IACPC,WAAW,iBAAXA,WAAW;IACXC,IAAI,iBAAJA,IAAI;IACJC,YAAY,iBAAZA,YAAY;IACZC,aAAa,iBAAbA,aAAa;IACbrB,aAAa,iBAAbA,aAAa;IACbsB,aAAa,iBAAbA,aAAa;IACbC,iBAAiB,iBAAjBA,iBAAiB;IACjBC,gBAAgB,iBAAhBA,gBAAgB;IAChBC,KAAK,iBAALA,KAAK;IACLC,oBAAoB,iBAApBA,oBAAoB;EAatB,qBAA2BnG,aAAa,EAAE;IAAA,sCAAlCoG,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAMC,aAAa,GAAGnG,YAAY,CAACwF,OAAO,EAAEjD,UAAU,CAAC;EAEvD,IAAM6D,gBAAgB,GAAG1G,KAAK,CAAC4E,WAAW,CACxC,UAAC/C,QAAyC,EAAK;IAC7CU,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGV,QAAQ,CAAC;IACpB,IAAIc,aAAa,IAAId,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAG,CAAC,CAAC,IAAIA,QAAQ,CAAC,CAAC,CAAC,MAAKD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,CAAC,CAAC,GAAE;MAChE2E,oBAAoB,EAAE;IACxB;EACF,CAAC,EACD,CAAChE,QAAQ,EAAEI,aAAa,EAAEf,KAAK,EAAE2E,oBAAoB,CAAC,CACvD;EAED,oBACE,oBAAC,SAAS;IACR,KAAK,EAAE9D,KAAM;IACb,SAAS,EAAEtC,UAAU,uBAEnBqG,KAAK,KAAKjG,QAAQ,CAACoG,OAAO,IAAIxF,eAAe,CAACqF,KAAK,CAAC,EACpD9D,SAAS,CACT;IACF,UAAU,EAAE+D,aAAc;IAC1B,KAAK,EACH7E,KAAK,gBACH,oBAAC,UAAU;MAAC,SAAS,EAAC,SAAS;MAAC,cAAYkC,mBAAoB;MAAC,OAAO,EAAEwC;IAAM,gBAC9E,oBAAC,WAAW,OAAG,CACJ,gBAEb,oBAAC,UAAU;MAAC,SAAS,EAAC,SAAS;MAAC,cAAYvC,qBAAsB;MAAC,OAAO,EAAEkC;IAAa,gBACvF,oBAAC,qBAAqB,OAAG,CAG9B;IACD,QAAQ,EAAEjD,QAAS;IACnB,OAAO,EAAExC,YAAY,CAAC6F,gBAAgB,EAAEpD,OAAO,CAAE;IACjD,OAAO,EAAEzC,YAAY,CAAC6F,gBAAgB,EAAEnD,OAAO;EAAE,GAC7CiB,KAAK,gBAET;IACE,IAAI,EAAC,QAAQ;IACb,IAAI,EAAErB,IAAK;IACX,KAAK,EACHlB,KAAK,aACEA,KAAK,CAAC,CAAC,CAAC,GAAGnB,MAAM,CAACmB,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,gBAC/CA,KAAK,CAAC,CAAC,CAAC,GAAGnB,MAAM,CAACmB,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,IAEhD;EACL,EACD,eACF;IAAM,SAAS,wBAAsC;IAAC,SAAS,EAAEuE;EAAc,gBAC7E,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAE/B,YAAa;IACzB,KAAK,EAAE,CAAE;IACT,eAAe,EAAEgC,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYrB;EAAwB,EACpC,eACF,oBAAC,gBAAgB,QAAC,GAAC,CAAmB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,cAAe;IAC3B,KAAK,EAAE,CAAE;IACT,eAAe,EAAE8B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYpB;EAA0B,EACtC,eACF,oBAAC,gBAAgB,QAAC,GAAC,CAAmB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,aAAc;IAC1B,KAAK,EAAE,CAAE;IACT,eAAe,EAAE6B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYnB;EAAyB,EACrC,eACF,oBAAC,gBAAgB,QAAE,KAAK,CAAoB,eAC5C,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,UAAW;IACvB,KAAK,EAAE,CAAE;IACT,eAAe,EAAE4B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYlB;EAAsB,EAClC,eACF,oBAAC,gBAAgB,QAAC,GAAC,CAAmB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,YAAa;IACzB,KAAK,EAAE,CAAE;IACT,eAAe,EAAE2B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYjB;EAAwB,EACpC,eACF,oBAAC,gBAAgB,QAAC,GAAC,CAAmB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,WAAY;IACxB,KAAK,EAAE,CAAE;IACT,eAAe,EAAE0B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYhB;EAAuB,EACnC,CACG,EACNmC,IAAI,IAAI,CAAC9B,eAAe,iBACvB,oBAAC,MAAM;IAAC,SAAS,EAAE4B,OAAQ;IAAC,cAAc,EAAE,CAAE;IAAC,SAAS,EAAEtD;EAAkB,gBAC1E,oBAAC,aAAa;IACZ,KAAK,EAAEZ,KAAM;IACb,QAAQ,EAAE8E,gBAAiB;IAC3B,WAAW,EAAEpE,WAAY;IACzB,aAAa,EAAED,aAAc;IAC7B,iBAAiB,EAAED,iBAAkB;IACrC,OAAO,EAAE8D,aAAc;IACvB,UAAU,EAAEH,WAAY;IACxB,cAAc,EAAEnD,cAAe;IAC/B,kBAAkB,EAAEO,kBAAmB;IACvC,kBAAkB,EAAEC,kBAAmB;IACvC,oBAAoB,EAAEE,oBAAqB;IAC3C,mBAAmB,EAAEC,mBAAoB;IACzC,kBAAkB,EAAEF,kBAAmB;IACvC,aAAa,EAAEW,aAAc;IAC7B,aAAa,EAAEC;EAAc,EAC7B,CAEL,CACS;AAEhB,CAAC"}
+{"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateRangeInput--sizeY-compact'],\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'changeDayAriaLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  changeStartDayAriaLabel?: string;\n  changeStartMonthAriaLabel?: string;\n  changeStartYearAriaLabel?: string;\n  changeEndDayAriaLabel?: string;\n  changeEndMonthAriaLabel?: string;\n  changeEndYearAriaLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeDayAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeStartDayAriaLabel = 'Изменить день начала',\n  changeStartMonthAriaLabel = 'Изменить месяц начала',\n  changeStartYearAriaLabel = 'Изменить год начала',\n  changeEndDayAriaLabel = 'Изменить день окончания',\n  changeEndMonthAriaLabel = 'Изменить месяц окончания',\n  changeEndYearAriaLabel = 'Изменить год окончания',\n  clearFieldAriaLabel = 'Очистить поле',\n  showCalendarAriaLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateRangeInputProps) => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'dd.MM.yyyy';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue?: Array<Date | null> | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={\n          value\n            ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${\n                value[1] ? format(value[1], 'DD.MM.YYYY') : ''\n              }`\n            : ''\n        }\n      />\n      <span className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeStartDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeStartMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeStartYearAriaLabel}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          aria-label={changeEndDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          aria-label={changeEndMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          aria-label={changeEndYearAriaLabel}\n        />\n      </span>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","styles","dateInputStyles","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","changeDayAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeStartDayAriaLabel","changeStartMonthAriaLabel","changeStartYearAriaLabel","changeEndDayAriaLabel","changeEndMonthAriaLabel","changeEndYearAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","maxElement","sizeY","handleRootRef","onCalendarChange","REGULAR","after","hoverMode","aria-label","input","type","span","onKeyDown","onElementSelect","targetRef","offsetDistance","placement","onClose"],"mappings":"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"}

package/dist/cssm/components/Div/Div.js

@@ -1,20 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "getRootRef", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import "./Div.module.css";
+import styles from './Div.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Div
- */
-export var Div = function Div(_ref) {
-  var children = _ref.children,
-    getRootRef = _ref.getRootRef,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
-    ref: getRootRef,
-    className: classNames("vkuiDiv", className)
-  }), children);
+ */ export const Div = ({ children , getRootRef , className , ...restProps })=>{
+    return /*#__PURE__*/ React.createElement("div", {
+        ...restProps,
+        ref: getRootRef,
+        className: classNames(styles['Div'], className)
+    }, children);
 };
+
 //# sourceMappingURL=Div.js.map

package/dist/cssm/components/Div/Div.js.map

@@ -1 +1 @@
-{"version":3,"file":"Div.js","names":["React","classNames","Div","children","getRootRef","className","restProps"],"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Div.module.css';\n\nexport interface DivProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = ({ children, getRootRef, className, ...restProps }: DivProps) => {\n  return (\n    <div {...restProps} ref={getRootRef} className={classNames(styles['Div'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAQ7C;AACA;AACA;AACA,OAAO,IAAMC,GAAG,GAAG,SAANA,GAAG,OAAoE;EAAA,IAA9DC,QAAQ,QAARA,QAAQ;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACjE,oBACE,wCAASA,SAAS;IAAE,GAAG,EAAEF,UAAW;IAAC,SAAS,EAAEH,UAAU,YAAgBI,SAAS;EAAE,IAClFF,QAAQ,CACL;AAEV,CAAC"}
+{"version":3,"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Div.module.css';\n\nexport interface DivProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = ({ children, getRootRef, className, ...restProps }: DivProps) => {\n  return (\n    <div {...restProps} ref={getRootRef} className={classNames(styles['Div'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","Div","children","getRootRef","className","restProps","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,mBAAmB;AAMtC;;CAEC,GACD,OAAO,MAAMC,MAAM,CAAC,EAAEC,SAAQ,EAAEC,WAAU,EAAEC,UAAS,EAAE,GAAGC,WAAqB,GAAK;IAClF,qBACE,oBAACC;QAAK,GAAGD,SAAS;QAAEE,KAAKJ;QAAYC,WAAWL,WAAWC,MAAM,CAAC,MAAM,EAAEI;OACvEF;AAGP,EAAE"}