@vkontakte/vkui 4.27.2 → 4.29.0

package/dist/cjs/components/CustomSelectOption/CustomSelectOption.d.ts

@@ -2,14 +2,43 @@ import * as React from "react";
 import { HasRootRef } from "../../types";
 import "./CustomSelectOption.css";
 export interface CustomSelectOptionProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+    /**
+     * Вставляет основной контент.
+     */
     option?: any;
-    selected?: boolean;
-    focused?: boolean;
-    hovered?: boolean;
+    /**
+     * Добавляет описание под основным блоком.
+     */
+    description?: React.ReactNode;
+    /**
+     * Вставляет элемент в начало блока перед основным контентом.
+     * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.
+     */
     before?: React.ReactNode;
+    /**
+     * Вставляет элемент в конец блока после основного контента.
+     * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.
+     */
     after?: React.ReactNode;
-    description?: React.ReactNode;
+    /**
+     * Позволяет создавать вложенность.
+     */
+    hierarchy?: number;
+    /**
+     * Включает состояние выбранного элемента списка.
+     */
+    selected?: boolean;
+    /**
+     * Включает состояние наведения.
+     */
+    hovered?: boolean;
+    /**
+     * Включает состояние фокуса.
+     */
+    focused?: boolean;
+    /**
+     * Блокирует весь блок.
+     */
     disabled?: boolean;
 }
-declare const CustomSelectOption: React.FC<CustomSelectOptionProps>;
-export default CustomSelectOption;
+export declare const CustomSelectOption: React.FC<CustomSelectOptionProps>;

package/dist/cjs/components/CustomSelectOption/CustomSelectOption.js

@@ -2,36 +2,44 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CustomSelectOption = void 0;
 
 var _jsxRuntime = require("../../lib/jsxRuntime");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var React = _interopRequireWildcard(require("react"));
+
 var _icons = require("@vkontakte/icons");
 
 var _classNames = require("../../lib/classNames");
 
 var _utils = require("../../lib/utils");
 
-var _Text = _interopRequireDefault(require("../Typography/Text/Text"));
+var _Paragraph = require("../Typography/Paragraph/Paragraph");
 
-var _Caption = _interopRequireDefault(require("../Typography/Caption/Caption"));
+var _Caption = require("../Typography/Caption/Caption");
 
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 
 var _warnOnce = require("../../lib/warnOnce");
 
-var _excluded = ["children", "hovered", "selected", "before", "after", "option", "description", "disabled"];
+var _excluded = ["children", "hierarchy", "hovered", "selected", "before", "after", "option", "description", "disabled", "style"];
 var warn = (0, _warnOnce.warnOnce)("CustomSelectOption");
 
 var CustomSelectOption = function CustomSelectOption(_ref) {
   var children = _ref.children,
+      _ref$hierarchy = _ref.hierarchy,
+      hierarchy = _ref$hierarchy === void 0 ? 0 : _ref$hierarchy,
       hovered = _ref.hovered,
       selected = _ref.selected,
       before = _ref.before,
@@ -39,48 +47,48 @@ var CustomSelectOption = function CustomSelectOption(_ref) {
       option = _ref.option,
       description = _ref.description,
       disabled = _ref.disabled,
+      styleProp = _ref.style,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var title = typeof children === "string" ? children : undefined;
 
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
       sizeY = _useAdaptivity.sizeY;
 
+  var style = React.useMemo(function () {
+    return hierarchy > 0 ? (0, _objectSpread2.default)({
+      "--custom-select-option-hierarchy-level": hierarchy
+    }, styleProp) : styleProp;
+  }, [hierarchy, styleProp]);
+
   if (!!option && process.env.NODE_ENV === "development") {
     warn("Свойство option было добавлено по ошибке и будет удалено в 5.0.0.");
   }
 
-  return (0, _jsxRuntime.createScopedElement)(_Text.default, (0, _extends2.default)({}, restProps, {
+  return (0, _jsxRuntime.createScopedElement)(_Paragraph.Paragraph, (0, _extends2.default)({}, restProps, {
     Component: "div",
-    weight: "regular",
     role: "option",
     title: title,
     "aria-disabled": disabled,
     "aria-selected": selected,
-    vkuiClass: (0, _classNames.classNames)("CustomSelectOption", "CustomSelectOption--sizeY-".concat(sizeY), {
-      "CustomSelectOption--hover": hovered && !disabled,
-      "CustomSelectOption--selected": selected,
-      "CustomSelectOption--disabled": disabled
-    })
+    vkuiClass: (0, _classNames.classNames)("CustomSelectOption", "CustomSelectOption--sizeY-".concat(sizeY), hovered && !disabled && "CustomSelectOption--hover", selected && "CustomSelectOption--selected", // Note: пустой класс
+    disabled && "CustomSelectOption--disabled", hierarchy > 0 && "CustomSelectOption--hierarchy"),
+    style: style
   }), (0, _utils.hasReactNode)(before) && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "CustomSelectOption__before"
   }, before), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "CustomSelectOption__main"
   }, (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "CustomSelectOption__children"
-  }, children), (0, _utils.hasReactNode)(description) && (0, _jsxRuntime.createScopedElement)(_Caption.default, {
-    level: "1",
-    weight: "regular",
+  }, children), (0, _utils.hasReactNode)(description) && (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
     vkuiClass: "CustomSelectOption__description"
   }, description)), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "CustomSelectOption__after"
   }, (0, _utils.hasReactNode)(after) && (0, _jsxRuntime.createScopedElement)("div", {
-    className: "CustomSelectOption__afterIn"
+    vkuiClass: "CustomSelectOption__afterIn"
   }, after), selected && (0, _jsxRuntime.createScopedElement)(_icons.Icon16Done, {
     vkuiClass: "CustomSelectOption__selectedIcon"
   })));
-}; // eslint-disable-next-line import/no-default-export
-
+};
 
-var _default = CustomSelectOption;
-exports.default = _default;
+exports.CustomSelectOption = CustomSelectOption;
 //# sourceMappingURL=CustomSelectOption.js.map

package/dist/cjs/components/CustomSelectOption/CustomSelectOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"names":["warn","CustomSelectOption","children","hovered","selected","before","after","option","description","disabled","restProps","title","undefined","sizeY","process","env","NODE_ENV"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;AAgBA,IAAMA,IAAI,GAAG,wBAAS,oBAAT,CAAb;;AAEA,IAAMC,kBAAqD,GAAG,SAAxDA,kBAAwD,OAU/B;AAAA,MAT7BC,QAS6B,QAT7BA,QAS6B;AAAA,MAR7BC,OAQ6B,QAR7BA,OAQ6B;AAAA,MAP7BC,QAO6B,QAP7BA,QAO6B;AAAA,MAN7BC,MAM6B,QAN7BA,MAM6B;AAAA,MAL7BC,KAK6B,QAL7BA,KAK6B;AAAA,MAJ7BC,MAI6B,QAJ7BA,MAI6B;AAAA,MAH7BC,WAG6B,QAH7BA,WAG6B;AAAA,MAF7BC,QAE6B,QAF7BA,QAE6B;AAAA,MAD1BC,SAC0B;AAC7B,MAAMC,KAAK,GAAG,OAAOT,QAAP,KAAoB,QAApB,GAA+BA,QAA/B,GAA0CU,SAAxD;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AAEA,MAAI,CAAC,CAACN,MAAF,IAAYO,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzC,EAAwD;AACtDhB,IAAAA,IAAI,CAAC,mEAAD,CAAJ;AACD;;AAED,SACE,qCAAC,aAAD,6BACMU,SADN;AAEE,IAAA,SAAS,EAAC,KAFZ;AAGE,IAAA,MAAM,EAAC,SAHT;AAIE,IAAA,IAAI,EAAC,QAJP;AAKE,IAAA,KAAK,EAAEC,KALT;AAME,qBAAeF,QANjB;AAOE,qBAAeL,QAPjB;AAQE,IAAA,SAAS,EAAE,4BACT,oBADS,sCAEoBS,KAFpB,GAGT;AACE,mCAA6BV,OAAO,IAAI,CAACM,QAD3C;AAEE,sCAAgCL,QAFlC;AAGE,sCAAgCK;AAHlC,KAHS;AARb,MAkBG,yBAAaJ,MAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAA6CA,MAA7C,CAnBJ,EAqBE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KAA+CH,QAA/C,CADF,EAEG,yBAAaM,WAAb,KACC,qCAAC,gBAAD;AACE,IAAA,KAAK,EAAC,GADR;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKGA,WALH,CAHJ,CArBF,EAiCE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,yBAAaF,KAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8CA,KAA9C,CAFJ,EAIGF,QAAQ,IACP,qCAAC,iBAAD;AAAY,IAAA,SAAS,EAAC;AAAtB,IALJ,CAjCF,CADF;AA4CD,CA9DD,C,CAgEA;;;eACeH,kB","sourcesContent":["import * as React from \"react\";\nimport { Icon16Done } from \"@vkontakte/icons\";\nimport { classNames } from \"../../lib/classNames\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport Text from \"../Typography/Text/Text\";\nimport Caption from \"../Typography/Caption/Caption\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./CustomSelectOption.css\";\n\nexport interface CustomSelectOptionProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  option?: any;\n  selected?: boolean;\n  focused?: boolean;\n  hovered?: boolean;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  description?: React.ReactNode;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce(\"CustomSelectOption\");\n\nconst CustomSelectOption: React.FC<CustomSelectOptionProps> = ({\n  children,\n  hovered,\n  selected,\n  before,\n  after,\n  option,\n  description,\n  disabled,\n  ...restProps\n}: CustomSelectOptionProps) => {\n  const title = typeof children === \"string\" ? children : undefined;\n  const { sizeY } = useAdaptivity();\n\n  if (!!option && process.env.NODE_ENV === \"development\") {\n    warn(\"Свойство option было добавлено по ошибке и будет удалено в 5.0.0.\");\n  }\n\n  return (\n    <Text\n      {...restProps}\n      Component=\"div\"\n      weight=\"regular\"\n      role=\"option\"\n      title={title}\n      aria-disabled={disabled}\n      aria-selected={selected}\n      vkuiClass={classNames(\n        \"CustomSelectOption\",\n        `CustomSelectOption--sizeY-${sizeY}`,\n        {\n          \"CustomSelectOption--hover\": hovered && !disabled,\n          \"CustomSelectOption--selected\": selected,\n          \"CustomSelectOption--disabled\": disabled,\n        }\n      )}\n    >\n      {hasReactNode(before) && (\n        <div vkuiClass=\"CustomSelectOption__before\">{before}</div>\n      )}\n      <div vkuiClass=\"CustomSelectOption__main\">\n        <div vkuiClass=\"CustomSelectOption__children\">{children}</div>\n        {hasReactNode(description) && (\n          <Caption\n            level=\"1\"\n            weight=\"regular\"\n            vkuiClass=\"CustomSelectOption__description\"\n          >\n            {description}\n          </Caption>\n        )}\n      </div>\n      <div vkuiClass=\"CustomSelectOption__after\">\n        {hasReactNode(after) && (\n          <div className=\"CustomSelectOption__afterIn\">{after}</div>\n        )}\n        {selected && (\n          <Icon16Done vkuiClass=\"CustomSelectOption__selectedIcon\" />\n        )}\n      </div>\n    </Text>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default CustomSelectOption;\n"],"file":"CustomSelectOption.js"}
+{"version":3,"sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"names":["warn","CustomSelectOption","children","hierarchy","hovered","selected","before","after","option","description","disabled","styleProp","style","restProps","title","undefined","sizeY","React","useMemo","process","env","NODE_ENV"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;AA8CA,IAAMA,IAAI,GAAG,wBAAS,oBAAT,CAAb;;AAEO,IAAMC,kBAAqD,GAAG,SAAxDA,kBAAwD,OAYtC;AAAA,MAX7BC,QAW6B,QAX7BA,QAW6B;AAAA,4BAV7BC,SAU6B;AAAA,MAV7BA,SAU6B,+BAVjB,CAUiB;AAAA,MAT7BC,OAS6B,QAT7BA,OAS6B;AAAA,MAR7BC,QAQ6B,QAR7BA,QAQ6B;AAAA,MAP7BC,MAO6B,QAP7BA,MAO6B;AAAA,MAN7BC,KAM6B,QAN7BA,KAM6B;AAAA,MAL7BC,MAK6B,QAL7BA,MAK6B;AAAA,MAJ7BC,WAI6B,QAJ7BA,WAI6B;AAAA,MAH7BC,QAG6B,QAH7BA,QAG6B;AAAA,MAFtBC,SAEsB,QAF7BC,KAE6B;AAAA,MAD1BC,SAC0B;AAC7B,MAAMC,KAAK,GAAG,OAAOZ,QAAP,KAAoB,QAApB,GAA+BA,QAA/B,GAA0Ca,SAAxD;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,MAAMJ,KAAK,GAAGK,KAAK,CAACC,OAAN,CACZ;AAAA,WACEf,SAAS,GAAG,CAAZ;AAEM,gDAA0CA;AAFhD,OAGSQ,SAHT,IAKIA,SANN;AAAA,GADY,EAQZ,CAACR,SAAD,EAAYQ,SAAZ,CARY,CAAd;;AAWA,MAAI,CAAC,CAACH,MAAF,IAAYW,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzC,EAAwD;AACtDrB,IAAAA,IAAI,CAAC,mEAAD,CAAJ;AACD;;AAED,SACE,qCAAC,oBAAD,6BACMa,SADN;AAEE,IAAA,SAAS,EAAC,KAFZ;AAGE,IAAA,IAAI,EAAC,QAHP;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,qBAAeJ,QALjB;AAME,qBAAeL,QANjB;AAOE,IAAA,SAAS,EAAE,4BACT,oBADS,sCAEoBW,KAFpB,GAGTZ,OAAO,IAAI,CAACM,QAAZ,IAAwB,2BAHf,EAITL,QAAQ,IAAI,8BAJH,EAImC;AAC5CK,IAAAA,QAAQ,IAAI,8BALH,EAMTP,SAAS,GAAG,CAAZ,IAAiB,+BANR,CAPb;AAeE,IAAA,KAAK,EAAES;AAfT,MAiBG,yBAAaN,MAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAA6CA,MAA7C,CAlBJ,EAoBE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KAA+CJ,QAA/C,CADF,EAEG,yBAAaO,WAAb,KACC,qCAAC,gBAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KACGA,WADH,CAHJ,CApBF,EA4BE;AAAK,IAAA,SAAS,EAAC;AAAf,KACG,yBAAaF,KAAb,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8CA,KAA9C,CAFJ,EAIGF,QAAQ,IACP,qCAAC,iBAAD;AAAY,IAAA,SAAS,EAAC;AAAtB,IALJ,CA5BF,CADF;AAuCD,CArEM","sourcesContent":["import * as React from \"react\";\nimport { Icon16Done } from \"@vkontakte/icons\";\nimport { classNames } from \"../../lib/classNames\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Paragraph } from \"../Typography/Paragraph/Paragraph\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { HasRootRef } from \"../../types\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./CustomSelectOption.css\";\n\nexport interface CustomSelectOptionProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Вставляет основной контент.\n   */\n  option?: any;\n  /**\n   * Добавляет описание под основным блоком.\n   */\n  description?: React.ReactNode;\n  /**\n   * Вставляет элемент в начало блока перед основным контентом.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  before?: React.ReactNode;\n  /**\n   * Вставляет элемент в конец блока после основного контента.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  after?: React.ReactNode;\n  /**\n   * Позволяет создавать вложенность.\n   */\n  hierarchy?: number;\n  /**\n   * Включает состояние выбранного элемента списка.\n   */\n  selected?: boolean;\n  /**\n   * Включает состояние наведения.\n   */\n  hovered?: boolean;\n  /**\n   * Включает состояние фокуса.\n   */\n  focused?: boolean;\n  /**\n   * Блокирует весь блок.\n   */\n  disabled?: boolean;\n}\n\nconst warn = warnOnce(\"CustomSelectOption\");\n\nexport const CustomSelectOption: React.FC<CustomSelectOptionProps> = ({\n  children,\n  hierarchy = 0,\n  hovered,\n  selected,\n  before,\n  after,\n  option,\n  description,\n  disabled,\n  style: styleProp,\n  ...restProps\n}: CustomSelectOptionProps) => {\n  const title = typeof children === \"string\" ? children : undefined;\n  const { sizeY } = useAdaptivity();\n  const style = React.useMemo(\n    () =>\n      hierarchy > 0\n        ? {\n            \"--custom-select-option-hierarchy-level\": hierarchy,\n            ...styleProp,\n          }\n        : styleProp,\n    [hierarchy, styleProp]\n  );\n\n  if (!!option && process.env.NODE_ENV === \"development\") {\n    warn(\"Свойство option было добавлено по ошибке и будет удалено в 5.0.0.\");\n  }\n\n  return (\n    <Paragraph\n      {...restProps}\n      Component=\"div\"\n      role=\"option\"\n      title={title}\n      aria-disabled={disabled}\n      aria-selected={selected}\n      vkuiClass={classNames(\n        \"CustomSelectOption\",\n        `CustomSelectOption--sizeY-${sizeY}`,\n        hovered && !disabled && \"CustomSelectOption--hover\",\n        selected && \"CustomSelectOption--selected\", // Note: пустой класс\n        disabled && \"CustomSelectOption--disabled\",\n        hierarchy > 0 && \"CustomSelectOption--hierarchy\"\n      )}\n      style={style}\n    >\n      {hasReactNode(before) && (\n        <div vkuiClass=\"CustomSelectOption__before\">{before}</div>\n      )}\n      <div vkuiClass=\"CustomSelectOption__main\">\n        <div vkuiClass=\"CustomSelectOption__children\">{children}</div>\n        {hasReactNode(description) && (\n          <Caption vkuiClass=\"CustomSelectOption__description\">\n            {description}\n          </Caption>\n        )}\n      </div>\n      <div vkuiClass=\"CustomSelectOption__after\">\n        {hasReactNode(after) && (\n          <div vkuiClass=\"CustomSelectOption__afterIn\">{after}</div>\n        )}\n        {selected && (\n          <Icon16Done vkuiClass=\"CustomSelectOption__selectedIcon\" />\n        )}\n      </div>\n    </Paragraph>\n  );\n};\n"],"file":"CustomSelectOption.js"}

package/dist/cjs/components/DateInput/DateInput.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { CalendarProps } from "../Calendar/Calendar";
+import { Placement } from "../Popper/Popper";
+import { HasRootRef } from "../../types";
+import "./DateInput.css";
+export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, "value" | "onChange" | "size">, Pick<CalendarProps, "disablePast" | "disableFuture" | "enableTime" | "shouldDisableDate" | "onChange" | "value" | "doneButtonText" | "weekStartsOn" | "disablePickers" | "changeHoursAriaLabel" | "changeMinutesAriaLabel" | "prevMonthAriaLabel" | "nextMonthAriaLabel" | "changeMonthAriaLabel" | "changeYearAriaLabel" | "changeDayAriaLabel" | "showNeighboringMonth" | "size">, HasRootRef<HTMLDivElement> {
+    calendarPlacement?: Placement;
+    closeOnChange?: boolean;
+    clearFieldAriaLabel?: string;
+    showCalendarAriaLabel?: string;
+}
+export declare const DateInput: React.FC<DateInputProps>;

package/dist/cjs/components/DateInput/DateInput.js

@@ -0,0 +1,290 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateInput = void 0;
+
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _date = require("../../lib/date");
+
+var _icons = require("@vkontakte/icons");
+
+var _Calendar = require("../Calendar/Calendar");
+
+var _Popper = require("../Popper/Popper");
+
+var _utils = require("../../lib/utils");
+
+var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+
+var _classNames = require("../../lib/classNames");
+
+var _FormField = require("../FormField/FormField");
+
+var _useDateInput2 = require("../../hooks/useDateInput");
+
+var _InputLike = require("../InputLike/InputLike");
+
+var _InputLikeDivider = require("../InputLike/InputLikeDivider");
+
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+
+var _callMultiple = require("../../lib/callMultiple");
+
+var _excluded = ["enableTime", "shouldDisableDate", "disableFuture", "disablePast", "value", "onChange", "calendarPlacement", "style", "className", "doneButtonText", "closeOnChange", "disablePickers", "getRootRef", "name", "autoFocus", "disabled", "onClick", "onFocus", "prevMonthAriaLabel", "nextMonthAriaLabel", "showNeighboringMonth", "size", "changeMonthAriaLabel", "changeYearAriaLabel", "changeDayAriaLabel", "changeHoursAriaLabel", "changeMinutesAriaLabel", "clearFieldAriaLabel", "showCalendarAriaLabel"];
+
+var elementsConfig = function elementsConfig(index) {
+  var length = 2;
+  var min = 1;
+  var max = 0;
+
+  switch (index) {
+    case 0:
+      max = 31;
+      break;
+
+    case 1:
+      max = 12;
+      break;
+
+    case 2:
+      max = 2100;
+      min = 1900;
+      length = 4;
+      break;
+
+    case 3:
+      max = 23;
+      break;
+
+    case 4:
+      max = 59;
+      break;
+  }
+
+  return {
+    length: length,
+    min: min,
+    max: max
+  };
+};
+
+var getInternalValue = function getInternalValue(value) {
+  var newValue = ["", "", "", "", ""];
+
+  if (value) {
+    newValue[0] = String(value.getDate()).padStart(2, "0");
+    newValue[1] = String(value.getMonth() + 1).padStart(2, "0");
+    newValue[2] = String(value.getFullYear()).padStart(4, "0");
+    newValue[3] = String(value.getHours()).padStart(2, "0");
+    newValue[4] = String(value.getMinutes()).padStart(2, "0");
+  }
+
+  return newValue;
+};
+
+var DateInput = function DateInput(_ref) {
+  var enableTime = _ref.enableTime,
+      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,
+      doneButtonText = _ref.doneButtonText,
+      _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,
+      showNeighboringMonth = _ref.showNeighboringMonth,
+      size = _ref.size,
+      _ref$changeMonthAriaL = _ref.changeMonthAriaLabel,
+      changeMonthAriaLabel = _ref$changeMonthAriaL === void 0 ? "Изменить месяц" : _ref$changeMonthAriaL,
+      _ref$changeYearAriaLa = _ref.changeYearAriaLabel,
+      changeYearAriaLabel = _ref$changeYearAriaLa === void 0 ? "Изменить год" : _ref$changeYearAriaLa,
+      _ref$changeDayAriaLab = _ref.changeDayAriaLabel,
+      changeDayAriaLabel = _ref$changeDayAriaLab === void 0 ? "Изменить день" : _ref$changeDayAriaLab,
+      _ref$changeHoursAriaL = _ref.changeHoursAriaLabel,
+      changeHoursAriaLabel = _ref$changeHoursAriaL === void 0 ? "Изменить час" : _ref$changeHoursAriaL,
+      _ref$changeMinutesAri = _ref.changeMinutesAriaLabel,
+      changeMinutesAriaLabel = _ref$changeMinutesAri === void 0 ? "Изменить минуту" : _ref$changeMinutesAri,
+      _ref$clearFieldAriaLa = _ref.clearFieldAriaLabel,
+      clearFieldAriaLabel = _ref$clearFieldAriaLa === void 0 ? "Очистить поле" : _ref$clearFieldAriaLa,
+      _ref$showCalendarAria = _ref.showCalendarAriaLabel,
+      showCalendarAriaLabel = _ref$showCalendarAria === void 0 ? "Показать календарь" : _ref$showCalendarAria,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var daysRef = React.useRef(null);
+  var monthsRef = React.useRef(null);
+  var yearsRef = React.useRef(null);
+  var hoursRef = React.useRef(null);
+  var minutesRef = React.useRef(null);
+  var maxElement = enableTime ? 4 : 2;
+  var onInternalValueChange = React.useCallback(function (internalValue) {
+    for (var i = 0; i <= maxElement; i += 1) {
+      if (internalValue[i].length < elementsConfig(i).length) {
+        return;
+      }
+    }
+
+    var formattedValue = "".concat(internalValue[0], ".").concat(internalValue[1], ".").concat(internalValue[2]);
+    var mask = "DD.MM.YYYY";
+
+    if (enableTime) {
+      formattedValue += " ".concat(internalValue[3], ":").concat(internalValue[4]);
+      mask += " HH:mm";
+    }
+
+    if ((0, _date.isMatch)(formattedValue, mask)) {
+      onChange === null || onChange === void 0 ? void 0 : onChange((0, _date.parse)(formattedValue, mask, value !== null && value !== void 0 ? value : new Date()));
+    }
+  }, [enableTime, maxElement, onChange, value]);
+  var refs = React.useMemo(function () {
+    return [daysRef, monthsRef, yearsRef, hoursRef, minutesRef];
+  }, [daysRef, monthsRef, yearsRef, hoursRef, minutesRef]);
+
+  var _useDateInput = (0, _useDateInput2.useDateInput)({
+    maxElement: maxElement,
+    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 = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
+
+  var onCalendarChange = React.useCallback(function (value) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+
+    if (closeOnChange && !enableTime) {
+      removeFocusFromField();
+    }
+  }, [onChange, removeFocusFromField, closeOnChange, enableTime]);
+  return (0, _jsxRuntime.createScopedElement)(_FormField.FormField, (0, _extends2.default)({
+    vkuiClass: (0, _classNames.classNames)("DateInput", "DateInput--sizeY-".concat(sizeY)),
+    style: style,
+    className: className,
+    getRootRef: (0, _utils.multiRef)(rootRef, getRootRef),
+    after: value ? (0, _jsxRuntime.createScopedElement)(_IconButton.default, {
+      hoverMode: "opacity",
+      "aria-label": clearFieldAriaLabel,
+      onClick: clear
+    }, (0, _jsxRuntime.createScopedElement)(_icons.Icon16Clear, null)) : (0, _jsxRuntime.createScopedElement)(_IconButton.default, {
+      hoverMode: "opacity",
+      "aria-label": showCalendarAriaLabel,
+      onClick: openCalendar
+    }, (0, _jsxRuntime.createScopedElement)(_icons.Icon20CalendarOutline, null)),
+    disabled: disabled,
+    onClick: (0, _callMultiple.callMultiple)(handleFieldEnter, onClick),
+    onFocus: (0, _callMultiple.callMultiple)(handleFieldEnter, onFocus)
+  }, props), (0, _jsxRuntime.createScopedElement)("input", {
+    type: "hidden",
+    name: name,
+    value: value ? (0, _date.format)(value, enableTime ? "DD.MM.YYYYTHH:mm" : "DD.MM.YYYY") : ""
+  }), (0, _jsxRuntime.createScopedElement)("span", {
+    vkuiClass: "DateInput__input",
+    onKeyDown: handleKeyDown
+  }, (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    tabIndex: 1,
+    length: 2,
+    getRootRef: daysRef,
+    index: 0,
+    onElementSelect: setFocusedElement,
+    value: internalValue[0],
+    "aria-label": changeDayAriaLabel
+  }), (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, null, "."), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 2,
+    getRootRef: monthsRef,
+    index: 1,
+    onElementSelect: setFocusedElement,
+    value: internalValue[1],
+    "aria-label": changeMonthAriaLabel
+  }), (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, null, "."), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 4,
+    getRootRef: yearsRef,
+    index: 2,
+    onElementSelect: setFocusedElement,
+    value: internalValue[2],
+    "aria-label": changeYearAriaLabel
+  }), enableTime && (0, _jsxRuntime.createScopedElement)(React.Fragment, null, (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, {
+    vkuiClass: "DateInput__input-time-divider"
+  }, " "), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 2,
+    getRootRef: hoursRef,
+    index: 3,
+    onElementSelect: setFocusedElement,
+    value: internalValue[3],
+    "aria-label": changeHoursAriaLabel
+  }), (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, null, ":"), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 2,
+    getRootRef: minutesRef,
+    index: 4,
+    onElementSelect: setFocusedElement,
+    value: internalValue[4],
+    "aria-label": changeMinutesAriaLabel
+  }))), open && (0, _jsxRuntime.createScopedElement)(_Popper.Popper, {
+    targetRef: rootRef,
+    offsetDistance: 8,
+    placement: calendarPlacement
+  }, (0, _jsxRuntime.createScopedElement)(_Calendar.Calendar, {
+    value: value,
+    onChange: onCalendarChange,
+    enableTime: enableTime,
+    disablePast: disablePast,
+    disableFuture: disableFuture,
+    shouldDisableDate: shouldDisableDate,
+    onClose: closeCalendar,
+    getRootRef: calendarRef,
+    doneButtonText: doneButtonText,
+    disablePickers: disablePickers,
+    changeHoursAriaLabel: changeHoursAriaLabel,
+    changeMinutesAriaLabel: changeMinutesAriaLabel,
+    prevMonthAriaLabel: prevMonthAriaLabel,
+    nextMonthAriaLabel: nextMonthAriaLabel,
+    changeMonthAriaLabel: changeMonthAriaLabel,
+    changeYearAriaLabel: changeYearAriaLabel,
+    changeDayAriaLabel: changeDayAriaLabel,
+    showNeighboringMonth: showNeighboringMonth,
+    size: size
+  })));
+};
+
+exports.DateInput = DateInput;
+//# sourceMappingURL=DateInput.js.map

package/dist/cjs/components/DateInput/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"names":["elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","doneButtonText","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","showNeighboringMonth","size","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","changeHoursAriaLabel","changeMinutesAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","props","daysRef","React","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","onCalendarChange"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { format, isMatch, parse } from \"../../lib/date\";\nimport { Icon16Clear, Icon20CalendarOutline } from \"@vkontakte/icons\";\nimport { Calendar, CalendarProps } from \"../Calendar/Calendar\";\nimport { Popper, Placement } from \"../Popper/Popper\";\nimport { multiRef } from \"../../lib/utils\";\nimport IconButton from \"../IconButton/IconButton\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField } from \"../FormField/FormField\";\nimport { HasRootRef } from \"../../types\";\nimport { useDateInput } from \"../../hooks/useDateInput\";\nimport { InputLike } from \"../InputLike/InputLike\";\nimport { InputLikeDivider } from \"../InputLike/InputLikeDivider\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport \"./DateInput.css\";\n\nexport interface DateInputProps\n  extends Omit<\n      React.InputHTMLAttributes<HTMLDivElement>,\n      \"value\" | \"onChange\" | \"size\"\n    >,\n    Pick<\n      CalendarProps,\n      | \"disablePast\"\n      | \"disableFuture\"\n      | \"enableTime\"\n      | \"shouldDisableDate\"\n      | \"onChange\"\n      | \"value\"\n      | \"doneButtonText\"\n      | \"weekStartsOn\"\n      | \"disablePickers\"\n      | \"changeHoursAriaLabel\"\n      | \"changeMinutesAriaLabel\"\n      | \"prevMonthAriaLabel\"\n      | \"nextMonthAriaLabel\"\n      | \"changeMonthAriaLabel\"\n      | \"changeYearAriaLabel\"\n      | \"changeDayAriaLabel\"\n      | \"showNeighboringMonth\"\n      | \"size\"\n    >,\n    HasRootRef<HTMLDivElement> {\n  calendarPlacement?: Placement;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\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      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps[\"value\"]) => {\n  const newValue = [\"\", \"\", \"\", \"\", \"\"];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, \"0\");\n    newValue[1] = String(value.getMonth() + 1).padStart(2, \"0\");\n    newValue[2] = String(value.getFullYear()).padStart(4, \"0\");\n    newValue[3] = String(value.getHours()).padStart(2, \"0\");\n    newValue[4] = String(value.getMinutes()).padStart(2, \"0\");\n  }\n  return newValue;\n};\n\nexport const DateInput: React.FC<DateInputProps> = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = \"bottom-start\",\n  style,\n  className,\n  doneButtonText,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  showNeighboringMonth,\n  size,\n  changeMonthAriaLabel = \"Изменить месяц\",\n  changeYearAriaLabel = \"Изменить год\",\n  changeDayAriaLabel = \"Изменить день\",\n  changeHoursAriaLabel = \"Изменить час\",\n  changeMinutesAriaLabel = \"Изменить минуту\",\n  clearFieldAriaLabel = \"Очистить поле\",\n  showCalendarAriaLabel = \"Показать календарь\",\n  ...props\n}) => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = \"DD.MM.YYYY\";\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += \" HH:mm\";\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        onChange?.(parse(formattedValue, mask, value ?? new Date()));\n      }\n    },\n    [enableTime, maxElement, onChange, value]\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef]\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,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY } = useAdaptivity();\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      onChange?.(value);\n      if (closeOnChange && !enableTime) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, removeFocusFromField, closeOnChange, enableTime]\n  );\n\n  return (\n    <FormField\n      vkuiClass={classNames(\"DateInput\", `DateInput--sizeY-${sizeY}`)}\n      style={style}\n      className={className}\n      getRootRef={multiRef(rootRef, getRootRef)}\n      after={\n        value ? (\n          <IconButton\n            hoverMode=\"opacity\"\n            aria-label={clearFieldAriaLabel}\n            onClick={clear}\n          >\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton\n            hoverMode=\"opacity\"\n            aria-label={showCalendarAriaLabel}\n            onClick={openCalendar}\n          >\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            ? format(value, enableTime ? \"DD.MM.YYYYTHH:mm\" : \"DD.MM.YYYY\")\n            : \"\"\n        }\n      />\n      <span vkuiClass=\"DateInput__input\" onKeyDown={handleKeyDown}>\n        <InputLike\n          tabIndex={1}\n          length={2}\n          getRootRef={daysRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeYearAriaLabel}\n        />\n        {enableTime && (\n          <React.Fragment>\n            <InputLikeDivider vkuiClass=\"DateInput__input-time-divider\">\n              {\" \"}\n            </InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={hoursRef}\n              index={3}\n              onElementSelect={setFocusedElement}\n              value={internalValue[3]}\n              aria-label={changeHoursAriaLabel}\n            />\n            <InputLikeDivider>:</InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={minutesRef}\n              index={4}\n              onElementSelect={setFocusedElement}\n              value={internalValue[4]}\n              aria-label={changeMinutesAriaLabel}\n            />\n          </React.Fragment>\n        )}\n      </span>\n      {open && (\n        <Popper\n          targetRef={rootRef}\n          offsetDistance={8}\n          placement={calendarPlacement}\n        >\n          <Calendar\n            value={value}\n            onChange={onCalendarChange}\n            enableTime={enableTime}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            doneButtonText={doneButtonText}\n            disablePickers={disablePickers}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            showNeighboringMonth={showNeighboringMonth}\n            size={size}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"file":"DateInput.js"}

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -23,13 +23,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var React = _interopRequireWildcard(require("react"));
 
-var _Input = _interopRequireDefault(require("../Input/Input"));
+var _Input = require("../Input/Input");
 
 var _withAdaptivity = require("../../hoc/withAdaptivity");
 
 var _utils = require("../../lib/utils");
 
-var _CustomSelect = _interopRequireDefault(require("../CustomSelect/CustomSelect"));
+var _CustomSelect = require("../CustomSelect/CustomSelect");
 
 var _excluded = ["name", "min", "max", "dayPlaceholder", "monthPlaceholder", "yearPlaceholder", "popupDirection", "defaultValue", "hasMouse", "monthNames", "day", "month", "year", "onDateChange", "disabled"],
     _excluded2 = ["min", "max", "dayPlaceholder", "monthPlaceholder", "yearPlaceholder", "popupDirection", "defaultValue", "hasMouse", "day", "month", "year", "onDateChange"],
@@ -135,7 +135,7 @@ var DatePickerCustom = function DatePickerCustom(_ref2) {
     vkuiClass: "DatePicker__container"
   }, (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "DatePicker__day"
-  }, (0, _jsxRuntime.createScopedElement)(_CustomSelect.default, {
+  }, (0, _jsxRuntime.createScopedElement)(_CustomSelect.CustomSelect, {
     name: "day",
     value: day,
     options: dayOptions,
@@ -145,7 +145,7 @@ var DatePickerCustom = function DatePickerCustom(_ref2) {
     disabled: disabled
   })), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "DatePicker__month"
-  }, (0, _jsxRuntime.createScopedElement)(_CustomSelect.default, {
+  }, (0, _jsxRuntime.createScopedElement)(_CustomSelect.CustomSelect, {
     vkuiClass: "DatePicker__monthSelect",
     name: "month",
     value: month,
@@ -156,7 +156,7 @@ var DatePickerCustom = function DatePickerCustom(_ref2) {
     disabled: disabled
   })), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "DatePicker__year"
-  }, (0, _jsxRuntime.createScopedElement)(_CustomSelect.default, {
+  }, (0, _jsxRuntime.createScopedElement)(_CustomSelect.CustomSelect, {
     name: "year",
     value: year,
     options: yearOptions,
@@ -209,7 +209,7 @@ var DatePickerNative = function DatePickerNative(_ref3) {
   var onStringChange = React.useCallback(function (e) {
     onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(parseInputDate(e.currentTarget.value));
   }, [onDateChange]);
-  return (0, _jsxRuntime.createScopedElement)(_Input.default, (0, _extends2.default)({}, restProps, {
+  return (0, _jsxRuntime.createScopedElement)(_Input.Input, (0, _extends2.default)({}, restProps, {
     type: "date",
     onChange: onStringChange,
     min: convertToInputFormat(min),