@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/cssm/components/DatePicker/DatePicker.js

@@ -1,207 +1,168 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "min", "max", "dayPlaceholder", "monthPlaceholder", "yearPlaceholder", "popupDirection", "defaultValue", "monthNames", "day", "month", "year", "onDateChange", "disabled", "className"],
-  _excluded2 = ["min", "max", "dayPlaceholder", "monthPlaceholder", "yearPlaceholder", "popupDirection", "defaultValue", "day", "month", "year", "onDateChange"],
-  _excluded3 = ["defaultValue"];
 import * as React from 'react';
 import { classNames, leadingZero } from '@vkontakte/vkjs';
 import { range } from '../../helpers/range';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { Input } from '../Input/Input';
-import "./DatePicker.module.css";
-var DefaultMonths = ['Января', 'Февраля', 'Марта', 'Апреля', 'Мая', 'Июня', 'Июля', 'Августа', 'Сентября', 'Октября', 'Ноября', 'Декабря'];
+import styles from './DatePicker.module.css';
+const DefaultMonths = [
+    'Января',
+    'Февраля',
+    'Марта',
+    'Апреля',
+    'Мая',
+    'Июня',
+    'Июля',
+    'Августа',
+    'Сентября',
+    'Октября',
+    'Ноября',
+    'Декабря'
+];
 // Переводим state к формату гг-мм-дд
-function convertToInputFormat(_ref) {
-  var _ref$day = _ref.day,
-    day = _ref$day === void 0 ? 0 : _ref$day,
-    _ref$month = _ref.month,
-    month = _ref$month === void 0 ? 0 : _ref$month,
-    _ref$year = _ref.year,
-    year = _ref$year === void 0 ? 0 : _ref$year;
-  return "".concat(year, "-").concat(leadingZero(month), "-").concat(leadingZero(day));
+function convertToInputFormat({ day =0 , month =0 , year =0  }) {
+    return `${year}-${leadingZero(month)}-${leadingZero(day)}`;
 }
-
 // Переводим дату формата гг-мм-дд к объекту
 function parseInputDate(date) {
-  var splited = date.split('-');
-  return {
-    day: Number(splited[2]),
-    month: Number(splited[1]),
-    year: Number(splited[0])
-  };
+    const splited = date.split('-');
+    return {
+        day: Number(splited[2]),
+        month: Number(splited[1]),
+        year: Number(splited[0])
+    };
 }
 function getMonthMaxDay(month, year) {
-  return month ? new Date(year || 2016, month, 0).getDate() : 31;
+    return month ? new Date(year || 2016, month, 0).getDate() : 31;
 }
-var DatePickerCustom = function DatePickerCustom(_ref2) {
-  var name = _ref2.name,
-    _ref2$min = _ref2.min,
-    min = _ref2$min === void 0 ? {
-      day: 0,
-      month: 0,
-      year: 0
-    } : _ref2$min,
-    _ref2$max = _ref2.max,
-    max = _ref2$max === void 0 ? {
-      day: 31,
-      month: 12,
-      year: 2100
-    } : _ref2$max,
-    dayPlaceholder = _ref2.dayPlaceholder,
-    monthPlaceholder = _ref2.monthPlaceholder,
-    yearPlaceholder = _ref2.yearPlaceholder,
-    popupDirection = _ref2.popupDirection,
-    defaultValue = _ref2.defaultValue,
-    monthNames = _ref2.monthNames,
-    _ref2$day = _ref2.day,
-    day = _ref2$day === void 0 ? 0 : _ref2$day,
-    _ref2$month = _ref2.month,
-    month = _ref2$month === void 0 ? 0 : _ref2$month,
-    _ref2$year = _ref2.year,
-    year = _ref2$year === void 0 ? 0 : _ref2$year,
-    onDateChange = _ref2.onDateChange,
-    disabled = _ref2.disabled,
-    className = _ref2.className,
-    restProps = _objectWithoutProperties(_ref2, _excluded);
-  var onSelectChange = function onSelectChange(e) {
-    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(_defineProperty({
-      day: day,
-      month: month,
-      year: year
-    }, e.target.name, Number(e.target.value)));
-  };
-  var dayOptions = range(1, getMonthMaxDay(month, year)).map(function (value) {
-    return {
-      label: String(value),
-      value: value
-    };
-  });
-  var monthOptions = (monthNames || DefaultMonths).map(function (name, index) {
-    return {
-      label: name,
-      value: index + 1
-    };
-  });
-  var yearOptions = range(max.year, min.year).map(function (value) {
-    return {
-      label: String(value),
-      value: value
+const DatePickerCustom = ({ name , min ={
+    day: 0,
+    month: 0,
+    year: 0
+} , max ={
+    day: 31,
+    month: 12,
+    year: 2100
+} , dayPlaceholder , monthPlaceholder , yearPlaceholder , popupDirection , defaultValue , monthNames , day =0 , month =0 , year =0 , onDateChange , disabled , className , ...restProps })=>{
+    const onSelectChange = (e)=>{
+        onDateChange?.({
+            day,
+            month,
+            year,
+            [e.target.name]: Number(e.target.value)
+        });
     };
-  });
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames("vkuiDatePicker", className)
-  }, restProps), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiDatePicker__container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiDatePicker__day"
-  }, /*#__PURE__*/React.createElement(CustomSelect, {
-    name: "day",
-    value: day,
-    options: dayOptions,
-    placeholder: dayPlaceholder,
-    popupDirection: popupDirection,
-    onChange: onSelectChange,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiDatePicker__month"
-  }, /*#__PURE__*/React.createElement(CustomSelect, {
-    className: "vkuiDatePicker__monthSelect",
-    name: "month",
-    value: month,
-    options: monthOptions,
-    placeholder: monthPlaceholder,
-    popupDirection: popupDirection,
-    onChange: onSelectChange,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiDatePicker__year"
-  }, /*#__PURE__*/React.createElement(CustomSelect, {
-    name: "year",
-    value: year,
-    options: yearOptions,
-    placeholder: yearPlaceholder,
-    popupDirection: popupDirection,
-    onChange: onSelectChange,
-    disabled: disabled
-  }))), /*#__PURE__*/React.createElement("input", {
-    type: "hidden",
-    name: name,
-    value: convertToInputFormat({
-      day: day,
-      month: month,
-      year: year
-    })
-  }));
+    const dayOptions = range(1, getMonthMaxDay(month, year)).map((value)=>({
+            label: String(value),
+            value
+        }));
+    const monthOptions = (monthNames || DefaultMonths).map((name, index)=>({
+            label: name,
+            value: index + 1
+        }));
+    const yearOptions = range(max.year, min.year).map((value)=>({
+            label: String(value),
+            value: value
+        }));
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['DatePicker'], className),
+        ...restProps
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['DatePicker__container']
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['DatePicker__day']
+    }, /*#__PURE__*/ React.createElement(CustomSelect, {
+        name: "day",
+        value: day,
+        options: dayOptions,
+        placeholder: dayPlaceholder,
+        popupDirection: popupDirection,
+        onChange: onSelectChange,
+        disabled: disabled
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: styles['DatePicker__month']
+    }, /*#__PURE__*/ React.createElement(CustomSelect, {
+        className: styles['DatePicker__monthSelect'],
+        name: "month",
+        value: month,
+        options: monthOptions,
+        placeholder: monthPlaceholder,
+        popupDirection: popupDirection,
+        onChange: onSelectChange,
+        disabled: disabled
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: styles['DatePicker__year']
+    }, /*#__PURE__*/ React.createElement(CustomSelect, {
+        name: "year",
+        value: year,
+        options: yearOptions,
+        placeholder: yearPlaceholder,
+        popupDirection: popupDirection,
+        onChange: onSelectChange,
+        disabled: disabled
+    }))), /*#__PURE__*/ React.createElement("input", {
+        type: "hidden",
+        name: name,
+        value: convertToInputFormat({
+            day,
+            month,
+            year
+        })
+    }));
 };
-var DatePickerNative = function DatePickerNative(_ref3) {
-  var _ref3$min = _ref3.min,
-    min = _ref3$min === void 0 ? {
-      day: 0,
-      month: 0,
-      year: 0
-    } : _ref3$min,
-    _ref3$max = _ref3.max,
-    max = _ref3$max === void 0 ? {
-      day: 31,
-      month: 12,
-      year: 2100
-    } : _ref3$max,
-    dayPlaceholder = _ref3.dayPlaceholder,
-    monthPlaceholder = _ref3.monthPlaceholder,
-    yearPlaceholder = _ref3.yearPlaceholder,
-    popupDirection = _ref3.popupDirection,
-    defaultValue = _ref3.defaultValue,
-    day = _ref3.day,
-    month = _ref3.month,
-    year = _ref3.year,
-    onDateChange = _ref3.onDateChange,
-    restProps = _objectWithoutProperties(_ref3, _excluded2);
-  var defProps = day && month && year ? {
-    defaultValue: convertToInputFormat({
-      day: day,
-      month: month,
-      year: year
-    })
-  } : {};
-  var onStringChange = React.useCallback(function (e) {
-    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(parseInputDate(e.currentTarget.value));
-  }, [onDateChange]);
-  return /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
-    type: "date",
-    onChange: onStringChange,
-    min: convertToInputFormat(min),
-    max: convertToInputFormat(max)
-  }, defProps));
+const DatePickerNative = ({ min ={
+    day: 0,
+    month: 0,
+    year: 0
+} , max ={
+    day: 31,
+    month: 12,
+    year: 2100
+} , dayPlaceholder , monthPlaceholder , yearPlaceholder , popupDirection , defaultValue , day , month , year , onDateChange , ...restProps })=>{
+    const defProps = day && month && year ? {
+        defaultValue: convertToInputFormat({
+            day,
+            month,
+            year
+        })
+    } : {};
+    const onStringChange = React.useCallback((e)=>{
+        onDateChange?.(parseInputDate(e.currentTarget.value));
+    }, [
+        onDateChange
+    ]);
+    return /*#__PURE__*/ React.createElement(Input, {
+        ...restProps,
+        type: "date",
+        onChange: onStringChange,
+        min: convertToInputFormat(min),
+        max: convertToInputFormat(max),
+        ...defProps
+    });
 };
-
 /**
  * @see https://vkcom.github.io/VKUI/#/DatePicker
- */
-export var DatePicker = function DatePicker(_ref4) {
-  var defaultValue = _ref4.defaultValue,
-    props = _objectWithoutProperties(_ref4, _excluded3);
-  var hasPointer = useAdaptivityHasPointer();
-  var _React$useState = React.useState(function () {
-      return {
-        day: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.day) || 0,
-        month: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.month) || 0,
-        year: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.year) || 0
-      };
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    value = _React$useState2[0],
-    setValue = _React$useState2[1];
-  var onDateChange = React.useCallback(function (update) {
-    setValue(update);
-    props.onDateChange && props.onDateChange(_objectSpread({}, update));
-  }, [props]);
-  var Cmp = hasPointer ? DatePickerCustom : DatePickerNative;
-  return /*#__PURE__*/React.createElement(Cmp, _extends({}, props, value, {
-    onDateChange: onDateChange
-  }));
+ */ export const DatePicker = ({ defaultValue , ...props })=>{
+    const hasPointer = useAdaptivityHasPointer();
+    const [value, setValue] = React.useState(()=>({
+            day: defaultValue?.day || 0,
+            month: defaultValue?.month || 0,
+            year: defaultValue?.year || 0
+        }));
+    const onDateChange = React.useCallback((update)=>{
+        setValue(update);
+        props.onDateChange && props.onDateChange({
+            ...update
+        });
+    }, [
+        props
+    ]);
+    const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;
+    return /*#__PURE__*/ React.createElement(Cmp, {
+        ...props,
+        ...value,
+        onDateChange: onDateChange
+    });
 };
+
 //# sourceMappingURL=DatePicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["React","classNames","leadingZero","range","useAdaptivityHasPointer","CustomSelect","Input","DefaultMonths","convertToInputFormat","day","month","year","parseInputDate","date","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","defaultValue","monthNames","onDateChange","disabled","className","restProps","onSelectChange","e","target","value","dayOptions","map","label","String","monthOptions","index","yearOptions","DatePickerNative","defProps","onStringChange","useCallback","currentTarget","DatePicker","props","hasPointer","useState","setValue","update","Cmp"],"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, leadingZero } from '@vkontakte/vkjs';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input } from '../Input/Input';\nimport styles from './DatePicker.module.css';\n\nconst DefaultMonths: string[] = [\n  'Января',\n  'Февраля',\n  'Марта',\n  'Апреля',\n  'Мая',\n  'Июня',\n  'Июля',\n  'Августа',\n  'Сентября',\n  'Октября',\n  'Ноября',\n  'Декабря',\n];\n\nexport type DatePickerDateFormat = {\n  day: number;\n  month: number;\n  year: number;\n};\n\nexport interface DatePickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {\n  min?: DatePickerDateFormat;\n  max?: DatePickerDateFormat;\n  name?: string;\n  defaultValue?: DatePickerDateFormat;\n  popupDirection?: 'top' | 'bottom';\n  monthNames?: string[];\n  dayPlaceholder?: string;\n  monthPlaceholder?: string;\n  yearPlaceholder?: string;\n  onDateChange?: (value: DatePickerDateFormat) => void;\n  disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat({ day = 0, month = 0, year = 0 }: Partial<DatePickerDateFormat>) {\n  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n  const splited = date.split('-');\n\n  return {\n    day: Number(splited[2]),\n    month: Number(splited[1]),\n    year: Number(splited[0]),\n  };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n  return month ? new Date(year || 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n  name,\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  defaultValue,\n  monthNames,\n  day = 0,\n  month = 0,\n  year = 0,\n  onDateChange,\n  disabled,\n  className,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n    onDateChange?.({\n      day,\n      month,\n      year,\n      [e.target.name]: Number(e.target.value),\n    });\n  };\n  const dayOptions = range(1, getMonthMaxDay(month, year)).map((value) => ({\n    label: String(value),\n    value,\n  }));\n  const monthOptions = (monthNames || DefaultMonths).map((name, index) => ({\n    label: name,\n    value: index + 1,\n  }));\n  const yearOptions = range(max.year, min.year).map((value) => ({\n    label: String(value),\n    value: value,\n  }));\n  return (\n    <div className={classNames(styles['DatePicker'], className)} {...restProps}>\n      <div className={styles['DatePicker__container']}>\n        <div className={styles['DatePicker__day']}>\n          <CustomSelect\n            name=\"day\"\n            value={day}\n            options={dayOptions}\n            placeholder={dayPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__month']}>\n          <CustomSelect\n            className={styles['DatePicker__monthSelect']}\n            name=\"month\"\n            value={month}\n            options={monthOptions}\n            placeholder={monthPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__year']}>\n          <CustomSelect\n            name=\"year\"\n            value={year}\n            options={yearOptions}\n            placeholder={yearPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n      </div>\n      <input type=\"hidden\" name={name} value={convertToInputFormat({ day, month, year })} />\n    </div>\n  );\n};\n\nconst DatePickerNative = ({\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  defaultValue,\n  day,\n  month,\n  year,\n  onDateChange,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const defProps =\n    day && month && year ? { defaultValue: convertToInputFormat({ day, month, year }) } : {};\n  const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      onDateChange?.(parseInputDate(e.currentTarget.value));\n    },\n    [onDateChange],\n  );\n  return (\n    <Input\n      {...restProps}\n      type=\"date\"\n      onChange={onStringChange}\n      min={convertToInputFormat(min)}\n      max={convertToInputFormat(max)}\n      {...defProps}\n    />\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ defaultValue, ...props }: DatePickerProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(() => ({\n    day: defaultValue?.day || 0,\n    month: defaultValue?.month || 0,\n    year: defaultValue?.year || 0,\n  }));\n\n  const onDateChange = React.useCallback(\n    (update: DatePickerDateFormat) => {\n      setValue(update);\n      props.onDateChange && props.onDateChange({ ...update });\n    },\n    [props],\n  );\n\n  const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n  return <Cmp {...props} {...value} onDateChange={onDateChange} />;\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, leadingZero } from '@vkontakte/vkjs';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input } from '../Input/Input';\nimport styles from './DatePicker.module.css';\n\nconst DefaultMonths: string[] = [\n  'Января',\n  'Февраля',\n  'Марта',\n  'Апреля',\n  'Мая',\n  'Июня',\n  'Июля',\n  'Августа',\n  'Сентября',\n  'Октября',\n  'Ноября',\n  'Декабря',\n];\n\nexport type DatePickerDateFormat = {\n  day: number;\n  month: number;\n  year: number;\n};\n\nexport interface DatePickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {\n  min?: DatePickerDateFormat;\n  max?: DatePickerDateFormat;\n  name?: string;\n  defaultValue?: DatePickerDateFormat;\n  popupDirection?: 'top' | 'bottom';\n  monthNames?: string[];\n  dayPlaceholder?: string;\n  monthPlaceholder?: string;\n  yearPlaceholder?: string;\n  onDateChange?: (value: DatePickerDateFormat) => void;\n  disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat({ day = 0, month = 0, year = 0 }: Partial<DatePickerDateFormat>) {\n  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n  const splited = date.split('-');\n\n  return {\n    day: Number(splited[2]),\n    month: Number(splited[1]),\n    year: Number(splited[0]),\n  };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n  return month ? new Date(year || 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n  name,\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  defaultValue,\n  monthNames,\n  day = 0,\n  month = 0,\n  year = 0,\n  onDateChange,\n  disabled,\n  className,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n    onDateChange?.({\n      day,\n      month,\n      year,\n      [e.target.name]: Number(e.target.value),\n    });\n  };\n  const dayOptions = range(1, getMonthMaxDay(month, year)).map((value) => ({\n    label: String(value),\n    value,\n  }));\n  const monthOptions = (monthNames || DefaultMonths).map((name, index) => ({\n    label: name,\n    value: index + 1,\n  }));\n  const yearOptions = range(max.year, min.year).map((value) => ({\n    label: String(value),\n    value: value,\n  }));\n  return (\n    <div className={classNames(styles['DatePicker'], className)} {...restProps}>\n      <div className={styles['DatePicker__container']}>\n        <div className={styles['DatePicker__day']}>\n          <CustomSelect\n            name=\"day\"\n            value={day}\n            options={dayOptions}\n            placeholder={dayPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__month']}>\n          <CustomSelect\n            className={styles['DatePicker__monthSelect']}\n            name=\"month\"\n            value={month}\n            options={monthOptions}\n            placeholder={monthPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__year']}>\n          <CustomSelect\n            name=\"year\"\n            value={year}\n            options={yearOptions}\n            placeholder={yearPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n      </div>\n      <input type=\"hidden\" name={name} value={convertToInputFormat({ day, month, year })} />\n    </div>\n  );\n};\n\nconst DatePickerNative = ({\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  defaultValue,\n  day,\n  month,\n  year,\n  onDateChange,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const defProps =\n    day && month && year ? { defaultValue: convertToInputFormat({ day, month, year }) } : {};\n  const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      onDateChange?.(parseInputDate(e.currentTarget.value));\n    },\n    [onDateChange],\n  );\n  return (\n    <Input\n      {...restProps}\n      type=\"date\"\n      onChange={onStringChange}\n      min={convertToInputFormat(min)}\n      max={convertToInputFormat(max)}\n      {...defProps}\n    />\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ defaultValue, ...props }: DatePickerProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(() => ({\n    day: defaultValue?.day || 0,\n    month: defaultValue?.month || 0,\n    year: defaultValue?.year || 0,\n  }));\n\n  const onDateChange = React.useCallback(\n    (update: DatePickerDateFormat) => {\n      setValue(update);\n      props.onDateChange && props.onDateChange({ ...update });\n    },\n    [props],\n  );\n\n  const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n  return <Cmp {...props} {...value} onDateChange={onDateChange} />;\n};\n"],"names":["React","classNames","leadingZero","range","useAdaptivityHasPointer","CustomSelect","Input","styles","DefaultMonths","convertToInputFormat","day","month","year","parseInputDate","date","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","defaultValue","monthNames","onDateChange","disabled","className","restProps","onSelectChange","e","target","value","dayOptions","map","label","String","monthOptions","index","yearOptions","div","options","placeholder","onChange","input","type","DatePickerNative","defProps","onStringChange","useCallback","currentTarget","DatePicker","props","hasPointer","setValue","useState","update","Cmp"],"mappings":"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"}