@vkontakte/vkui 6.0.2 → 6.1.0

package/dist/components/CustomSelectOption/CustomSelectOption.js

@@ -1,6 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon16Done } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
@@ -36,7 +37,7 @@ const sizeYClassNames = {
         styleProp
     ]);
     const hovered = hoveredProp && !disabled ? true : false;
-    return /*#__PURE__*/ React.createElement(Paragraph, _object_spread_props(_object_spread({}, restProps), {
+    return /*#__PURE__*/ _jsxs(Paragraph, _object_spread_props(_object_spread({}, restProps), {
         onClick: disabled ? undefined : onClick,
         Component: "div",
         role: "option",
@@ -44,20 +45,43 @@ const sizeYClassNames = {
         "aria-selected": selected,
         "data-hovered": hovered,
         className: classNames("vkuiCustomSelectOption", sizeY !== 'compact' && sizeYClassNames[sizeY], hovered && "vkuiCustomSelectOption--hover", disabled && "vkuiCustomSelectOption--disabled", hierarchy > 0 && "vkuiCustomSelectOption--hierarchy", className),
-        style: style
-    }), hasReactNode(before) && /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiCustomSelectOption__before"
-    }, before), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiCustomSelectOption__main"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiCustomSelectOption__children"
-    }, children), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
-        className: "vkuiCustomSelectOption__description"
-    }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, " "), description)), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiCustomSelectOption__after"
-    }, hasReactNode(after) && /*#__PURE__*/ React.createElement("div", null, after), selected && /*#__PURE__*/ React.createElement(Icon16Done, {
-        className: "vkuiCustomSelectOption__selectedIcon"
-    })));
+        style: style,
+        children: [
+            hasReactNode(before) && /*#__PURE__*/ _jsx("div", {
+                className: "vkuiCustomSelectOption__before",
+                children: before
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "vkuiCustomSelectOption__main",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "vkuiCustomSelectOption__children",
+                        children: children
+                    }),
+                    hasReactNode(description) && /*#__PURE__*/ _jsxs(Footnote, {
+                        className: "vkuiCustomSelectOption__description",
+                        children: [
+                            /*#__PURE__*/ _jsx(VisuallyHidden, {
+                                children: " "
+                            }),
+                            description
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "vkuiCustomSelectOption__after",
+                children: [
+                    hasReactNode(after) && /*#__PURE__*/ _jsx("div", {
+                        children: after
+                    }),
+                    selected && /*#__PURE__*/ _jsx(Icon16Done, {
+                        className: "vkuiCustomSelectOption__selectedIcon"
+                    })
+                ]
+            })
+        ]
+    }));
 };
 
 //# sourceMappingURL=CustomSelectOption.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Done } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['CustomSelectOption--sizeY-none'],\n  ['regular']: styles['CustomSelectOption--sizeY-regular'],\n};\n\nexport interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\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   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select), [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) или [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect), то свойство явно должно выставляться только через структуру `options`.\n   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) и [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect) не будут знать об актуальном состоянии\n   * опции.\n   */\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n  children,\n  hierarchy = 0,\n  hovered: hoveredProp,\n  selected,\n  before,\n  after,\n  description,\n  disabled,\n  style: styleProp,\n  className,\n  onClick,\n  ...restProps\n}: CustomSelectOptionProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const style = React.useMemo(\n    () =>\n      hierarchy > 0\n        ? {\n            '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,\n            ...styleProp,\n          }\n        : styleProp,\n    [hierarchy, styleProp],\n  );\n  const hovered = hoveredProp && !disabled ? true : false;\n\n  return (\n    <Paragraph\n      {...restProps}\n      onClick={disabled ? undefined : onClick}\n      Component=\"div\"\n      role=\"option\"\n      aria-disabled={disabled}\n      aria-selected={selected}\n      data-hovered={hovered}\n      className={classNames(\n        styles['CustomSelectOption'],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        hovered && styles['CustomSelectOption--hover'],\n        disabled && styles['CustomSelectOption--disabled'],\n        hierarchy > 0 && styles['CustomSelectOption--hierarchy'],\n        className,\n      )}\n      style={style}\n    >\n      {hasReactNode(before) && <div className={styles['CustomSelectOption__before']}>{before}</div>}\n      <div className={styles['CustomSelectOption__main']}>\n        <div className={styles['CustomSelectOption__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['CustomSelectOption__description']}>\n            <VisuallyHidden>&nbsp;</VisuallyHidden>\n            {description}\n          </Footnote>\n        )}\n      </div>\n      <div className={styles['CustomSelectOption__after']}>\n        {hasReactNode(after) && <div>{after}</div>}\n        {selected && <Icon16Done className={styles['CustomSelectOption__selectedIcon']} />}\n      </div>\n    </Paragraph>\n  );\n};\n"],"names":["React","Icon16Done","classNames","hasReactNode","useAdaptivity","Footnote","Paragraph","VisuallyHidden","sizeYClassNames","none","CustomSelectOption","children","hierarchy","hovered","hoveredProp","selected","before","after","description","disabled","style","styleProp","className","onClick","restProps","sizeY","useMemo","undefined","Component","role","aria-disabled","aria-selected","data-hovered","div"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AA2CA;;CAEC,GACD,OAAO,MAAMC,qBAAqB;QAAC,EACjCC,QAAQ,EACRC,YAAY,CAAC,EACbC,SAASC,WAAW,EACpBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,SAAS,EACTC,OAAO,EAEiB,WADrBC;QAXHb;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGrB;IAC3B,MAAMgB,QAAQpB,MAAM0B,OAAO,CACzB,IACEd,YAAY,IACR;YACE,yDAAyDA;WACtDS,aAELA,WACN;QAACT;QAAWS;KAAU;IAExB,MAAMR,UAAUC,eAAe,CAACK,WAAW,OAAO;IAElD,qBACE,oBAACb,mDACKkB;QACJD,SAASJ,WAAWQ,YAAYJ;QAChCK,WAAU;QACVC,MAAK;QACLC,iBAAeX;QACfY,iBAAehB;QACfiB,gBAAcnB;QACdS,WAAWpB,qCAETuB,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CZ,4CACAM,gDACAP,YAAY,0CACZU;QAEFF,OAAOA;QAENjB,aAAaa,yBAAW,oBAACiB;QAAIX,SAAS;OAAyCN,uBAChF,oBAACiB;QAAIX,SAAS;qBACZ,oBAACW;QAAIX,SAAS;OAA2CX,WACxDR,aAAae,8BACZ,oBAACb;QAASiB,SAAS;qBACjB,oBAACf,sBAAe,MACfW,6BAIP,oBAACe;QAAIX,SAAS;OACXnB,aAAac,wBAAU,oBAACgB,aAAKhB,QAC7BF,0BAAY,oBAACd;QAAWqB,SAAS;;AAI1C,EAAE"}
+{"version":3,"sources":["../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Done } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['CustomSelectOption--sizeY-none'],\n  ['regular']: styles['CustomSelectOption--sizeY-regular'],\n};\n\nexport interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\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   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select), [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) или [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect), то свойство явно должно выставляться только через структуру `options`.\n   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) и [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect) не будут знать об актуальном состоянии\n   * опции.\n   */\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n  children,\n  hierarchy = 0,\n  hovered: hoveredProp,\n  selected,\n  before,\n  after,\n  description,\n  disabled,\n  style: styleProp,\n  className,\n  onClick,\n  ...restProps\n}: CustomSelectOptionProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const style = React.useMemo(\n    () =>\n      hierarchy > 0\n        ? {\n            '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,\n            ...styleProp,\n          }\n        : styleProp,\n    [hierarchy, styleProp],\n  );\n  const hovered = hoveredProp && !disabled ? true : false;\n\n  return (\n    <Paragraph\n      {...restProps}\n      onClick={disabled ? undefined : onClick}\n      Component=\"div\"\n      role=\"option\"\n      aria-disabled={disabled}\n      aria-selected={selected}\n      data-hovered={hovered}\n      className={classNames(\n        styles['CustomSelectOption'],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        hovered && styles['CustomSelectOption--hover'],\n        disabled && styles['CustomSelectOption--disabled'],\n        hierarchy > 0 && styles['CustomSelectOption--hierarchy'],\n        className,\n      )}\n      style={style}\n    >\n      {hasReactNode(before) && <div className={styles['CustomSelectOption__before']}>{before}</div>}\n      <div className={styles['CustomSelectOption__main']}>\n        <div className={styles['CustomSelectOption__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['CustomSelectOption__description']}>\n            <VisuallyHidden>&nbsp;</VisuallyHidden>\n            {description}\n          </Footnote>\n        )}\n      </div>\n      <div className={styles['CustomSelectOption__after']}>\n        {hasReactNode(after) && <div>{after}</div>}\n        {selected && <Icon16Done className={styles['CustomSelectOption__selectedIcon']} />}\n      </div>\n    </Paragraph>\n  );\n};\n"],"names":["React","Icon16Done","classNames","hasReactNode","useAdaptivity","Footnote","Paragraph","VisuallyHidden","sizeYClassNames","none","CustomSelectOption","children","hierarchy","hovered","hoveredProp","selected","before","after","description","disabled","style","styleProp","className","onClick","restProps","sizeY","useMemo","undefined","Component","role","aria-disabled","aria-selected","data-hovered","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,MAAMC,kBAAkB;IACtBC,IAAI;IACJ,CAAC,UAAU;AACb;AA2CA;;CAEC,GACD,OAAO,MAAMC,qBAAqB;QAAC,EACjCC,QAAQ,EACRC,YAAY,CAAC,EACbC,SAASC,WAAW,EACpBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,SAAS,EACTC,OAAO,EAEiB,WADrBC;QAXHb;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGrB;IAC3B,MAAMgB,QAAQpB,MAAM0B,OAAO,CACzB,IACEd,YAAY,IACR;YACE,yDAAyDA;WACtDS,aAELA,WACN;QAACT;QAAWS;KAAU;IAExB,MAAMR,UAAUC,eAAe,CAACK,WAAW,OAAO;IAElD,qBACE,MAACb,mDACKkB;QACJD,SAASJ,WAAWQ,YAAYJ;QAChCK,WAAU;QACVC,MAAK;QACLC,iBAAeX;QACfY,iBAAehB;QACfiB,gBAAcnB;QACdS,WAAWpB,qCAETuB,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CZ,4CACAM,gDACAP,YAAY,0CACZU;QAEFF,OAAOA;;YAENjB,aAAaa,yBAAW,KAACiB;gBAAIX,SAAS;0BAAyCN;;0BAChF,MAACiB;gBAAIX,SAAS;;kCACZ,KAACW;wBAAIX,SAAS;kCAA2CX;;oBACxDR,aAAae,8BACZ,MAACb;wBAASiB,SAAS;;0CACjB,KAACf;0CAAe;;4BACfW;;;;;0BAIP,MAACe;gBAAIX,SAAS;;oBACXnB,aAAac,wBAAU,KAACgB;kCAAKhB;;oBAC7BF,0BAAY,KAACd;wBAAWqB,SAAS;;;;;;AAI1C,EAAE"}

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

@@ -14,5 +14,5 @@ export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivEl
 /**
  * @see https://vkcom.github.io/VKUI/#/DateInput
  */
-export declare const DateInput: ({ enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value, onChange, calendarPlacement, style, className, doneButtonText, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, showNeighboringMonth, size, changeMonthLabel, changeYearLabel, changeDayLabel, changeHoursLabel, changeMinutesLabel, clearFieldLabel, showCalendarLabel, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar, ...props }: DateInputProps) => React.JSX.Element;
+export declare const DateInput: ({ enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value, onChange, calendarPlacement, style, className, doneButtonText, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, showNeighboringMonth, size, changeMonthLabel, changeYearLabel, changeDayLabel, changeHoursLabel, changeMinutesLabel, clearFieldLabel, showCalendarLabel, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar, ...props }: DateInputProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DateInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAMnE,OAAO,mCAAmC,CAAC;AAQ3C,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC,EACpF,IAAI,CACF,aAAa,EACX,aAAa,GACb,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,kBAAkB,GAClB,oBAAoB,GACpB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,sBAAsB,GACtB,MAAM,GACN,UAAU,GACV,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,aAAa,GACb,aAAa,CAChB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,cAAc;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA0CD;;GAEG;AACH,eAAO,MAAM,SAAS,giBAwCnB,cAAc,sBA+LhB,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAMnE,OAAO,mCAAmC,CAAC;AAQ3C,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC,EACpF,IAAI,CACF,aAAa,EACX,aAAa,GACb,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,kBAAkB,GAClB,oBAAoB,GACpB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,sBAAsB,GACtB,MAAM,GACN,UAAU,GACV,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,aAAa,GACb,aAAa,CAChB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,cAAc;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA0CD;;GAEG;AACH,eAAO,MAAM,SAAS,giBAwCnB,cAAc,4CAsMhB,CAAC"}

package/dist/components/DateInput/DateInput.js

@@ -1,5 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
@@ -172,100 +174,136 @@ const getInternalValue = (value)=>{
         closeOnChange,
         enableTime
     ]);
-    return /*#__PURE__*/ React.createElement(FormField, _object_spread({
+    return /*#__PURE__*/ _jsxs(FormField, _object_spread_props(_object_spread({
         style: style,
         className: classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         getRootRef: handleRootRef,
-        after: value ? /*#__PURE__*/ React.createElement(IconButton, {
+        after: value ? /*#__PURE__*/ _jsx(IconButton, {
             hoverMode: "opacity",
             label: clearFieldLabel,
-            onClick: clear
-        }, /*#__PURE__*/ React.createElement(Icon16Clear, null)) : /*#__PURE__*/ React.createElement(IconButton, {
+            onClick: clear,
+            children: /*#__PURE__*/ _jsx(Icon16Clear, {})
+        }) : /*#__PURE__*/ _jsx(IconButton, {
             hoverMode: "opacity",
             label: showCalendarLabel,
-            onClick: openCalendar
-        }, /*#__PURE__*/ React.createElement(Icon20CalendarOutline, null)),
+            onClick: openCalendar,
+            children: /*#__PURE__*/ _jsx(Icon20CalendarOutline, {})
+        }),
         disabled: disabled,
         onClick: callMultiple(handleFieldEnter, onClick),
         onFocus: callMultiple(handleFieldEnter, onFocus)
-    }, props), /*#__PURE__*/ React.createElement("input", {
-        type: "hidden",
-        name: name,
-        value: value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''
-    }), /*#__PURE__*/ React.createElement(Text, {
-        className: "vkuiDateInput__input",
-        onKeyDown: handleKeyDown
-    }, /*#__PURE__*/ React.createElement(InputLike, {
-        length: 2,
-        getRootRef: daysRef,
-        index: 0,
-        onElementSelect: setFocusedElement,
-        value: internalValue[0],
-        label: changeDayLabel
-    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
-        length: 2,
-        getRootRef: monthsRef,
-        index: 1,
-        onElementSelect: setFocusedElement,
-        value: internalValue[1],
-        label: changeMonthLabel
-    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
-        length: 4,
-        getRootRef: yearsRef,
-        index: 2,
-        onElementSelect: setFocusedElement,
-        value: internalValue[2],
-        label: changeYearLabel
-    }), enableTime && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(InputLikeDivider, {
-        className: "vkuiDateInput__input--time-divider"
-    }, ' '), /*#__PURE__*/ React.createElement(InputLike, {
-        length: 2,
-        getRootRef: hoursRef,
-        index: 3,
-        onElementSelect: setFocusedElement,
-        value: internalValue[3],
-        label: changeHoursLabel
-    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, ":"), /*#__PURE__*/ React.createElement(InputLike, {
-        length: 2,
-        getRootRef: minutesRef,
-        index: 4,
-        onElementSelect: setFocusedElement,
-        value: internalValue[4],
-        label: changeMinutesLabel
-    }))), open && !disableCalendar && /*#__PURE__*/ React.createElement(Popper, {
-        targetRef: rootRef,
-        offsetByMainAxis: 8,
-        placement: calendarPlacement,
-        autoUpdateOnTargetResize: true
-    }, /*#__PURE__*/ React.createElement(Calendar, {
-        value: value,
-        onChange: onCalendarChange,
-        enableTime: enableTime,
-        disablePast: disablePast,
-        disableFuture: disableFuture,
-        shouldDisableDate: shouldDisableDate,
-        onClose: removeFocusFromField,
-        getRootRef: calendarRef,
-        doneButtonText: doneButtonText,
-        disablePickers: disablePickers,
-        changeHoursLabel: changeHoursLabel,
-        changeMinutesLabel: changeMinutesLabel,
-        prevMonthLabel: prevMonthLabel,
-        nextMonthLabel: nextMonthLabel,
-        changeMonthLabel: changeMonthLabel,
-        changeYearLabel: changeYearLabel,
-        changeDayLabel: changeDayLabel,
-        showNeighboringMonth: showNeighboringMonth,
-        size: size,
-        viewDate: viewDate,
-        onHeaderChange: onHeaderChange,
-        onNextMonth: onNextMonth,
-        onPrevMonth: onPrevMonth,
-        prevMonthIcon: prevMonthIcon,
-        nextMonthIcon: nextMonthIcon,
-        minDateTime: minDateTime,
-        maxDateTime: maxDateTime
-    })));
+    }, props), {
+        children: [
+            /*#__PURE__*/ _jsx("input", {
+                type: "hidden",
+                name: name,
+                value: value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''
+            }),
+            /*#__PURE__*/ _jsxs(Text, {
+                className: "vkuiDateInput__input",
+                onKeyDown: handleKeyDown,
+                // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей
+                // из-за чего `.Typography--normalize` перебивает стили.
+                normalize: false,
+                Component: "span" // для <span> нормализация не нужна
+                ,
+                children: [
+                    /*#__PURE__*/ _jsx(InputLike, {
+                        length: 2,
+                        getRootRef: daysRef,
+                        index: 0,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[0],
+                        label: changeDayLabel
+                    }),
+                    /*#__PURE__*/ _jsx(InputLikeDivider, {
+                        children: "."
+                    }),
+                    /*#__PURE__*/ _jsx(InputLike, {
+                        length: 2,
+                        getRootRef: monthsRef,
+                        index: 1,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[1],
+                        label: changeMonthLabel
+                    }),
+                    /*#__PURE__*/ _jsx(InputLikeDivider, {
+                        children: "."
+                    }),
+                    /*#__PURE__*/ _jsx(InputLike, {
+                        length: 4,
+                        getRootRef: yearsRef,
+                        index: 2,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[2],
+                        label: changeYearLabel
+                    }),
+                    enableTime && /*#__PURE__*/ _jsxs(React.Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(InputLikeDivider, {
+                                className: "vkuiDateInput__input--time-divider",
+                                children: ' '
+                            }),
+                            /*#__PURE__*/ _jsx(InputLike, {
+                                length: 2,
+                                getRootRef: hoursRef,
+                                index: 3,
+                                onElementSelect: setFocusedElement,
+                                value: internalValue[3],
+                                label: changeHoursLabel
+                            }),
+                            /*#__PURE__*/ _jsx(InputLikeDivider, {
+                                children: ":"
+                            }),
+                            /*#__PURE__*/ _jsx(InputLike, {
+                                length: 2,
+                                getRootRef: minutesRef,
+                                index: 4,
+                                onElementSelect: setFocusedElement,
+                                value: internalValue[4],
+                                label: changeMinutesLabel
+                            })
+                        ]
+                    })
+                ]
+            }),
+            open && !disableCalendar && /*#__PURE__*/ _jsx(Popper, {
+                targetRef: rootRef,
+                offsetByMainAxis: 8,
+                placement: calendarPlacement,
+                autoUpdateOnTargetResize: true,
+                children: /*#__PURE__*/ _jsx(Calendar, {
+                    value: value,
+                    onChange: onCalendarChange,
+                    enableTime: enableTime,
+                    disablePast: disablePast,
+                    disableFuture: disableFuture,
+                    shouldDisableDate: shouldDisableDate,
+                    onClose: removeFocusFromField,
+                    getRootRef: calendarRef,
+                    doneButtonText: doneButtonText,
+                    disablePickers: disablePickers,
+                    changeHoursLabel: changeHoursLabel,
+                    changeMinutesLabel: changeMinutesLabel,
+                    prevMonthLabel: prevMonthLabel,
+                    nextMonthLabel: nextMonthLabel,
+                    changeMonthLabel: changeMonthLabel,
+                    changeYearLabel: changeYearLabel,
+                    changeDayLabel: changeDayLabel,
+                    showNeighboringMonth: showNeighboringMonth,
+                    size: size,
+                    viewDate: viewDate,
+                    onHeaderChange: onHeaderChange,
+                    onNextMonth: onNextMonth,
+                    onPrevMonth: onPrevMonth,
+                    prevMonthIcon: prevMonthIcon,
+                    nextMonthIcon: nextMonthIcon,
+                    minDateTime: minDateTime,
+                    maxDateTime: maxDateTime
+                })
+            })
+        ]
+    }));
 };
 
 //# sourceMappingURL=DateInput.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DateInput/DateInput.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 { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\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 { Text } from '../Typography/Text/Text';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateInput--sizeY-none'],\n  ['compact']: styles['DateInput--sizeY-compact'],\n};\n\nexport interface DateInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'doneButtonText'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursLabel'\n      | 'changeMinutesLabel'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'changeDayLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'minDateTime'\n      | 'maxDateTime'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldLabel?: string;\n  showCalendarLabel?: 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      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\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  minDateTime,\n  maxDateTime,\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  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  showNeighboringMonth,\n  size,\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  changeHoursLabel = 'Изменить час',\n  changeMinutesLabel = 'Изменить минуту',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateInputProps) => {\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    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 = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\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      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" label={clearFieldLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" label={showCalendarLabel} 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={value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''}\n      />\n      <Text className={styles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          label={changeDayLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          label={changeMonthLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          label={changeYearLabel}\n        />\n        {enableTime && (\n          <React.Fragment>\n            <InputLikeDivider className={styles['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              label={changeHoursLabel}\n            />\n            <InputLikeDivider>:</InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={minutesRef}\n              index={4}\n              onElementSelect={setFocusedElement}\n              value={internalValue[4]}\n              label={changeMinutesLabel}\n            />\n          </React.Fragment>\n        )}\n      </Text>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          autoUpdateOnTargetResize\n        >\n          <Calendar\n            value={value}\n            onChange={onCalendarChange}\n            enableTime={enableTime}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={removeFocusFromField}\n            getRootRef={calendarRef}\n            doneButtonText={doneButtonText}\n            disablePickers={disablePickers}\n            changeHoursLabel={changeHoursLabel}\n            changeMinutesLabel={changeMinutesLabel}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            changeDayLabel={changeDayLabel}\n            showNeighboringMonth={showNeighboringMonth}\n            size={size}\n            viewDate={viewDate}\n            onHeaderChange={onHeaderChange}\n            onNextMonth={onNextMonth}\n            onPrevMonth={onPrevMonth}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n            minDateTime={minDateTime}\n            maxDateTime={maxDateTime}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isMatch","parse","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","sizeYClassNames","none","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","onChange","calendarPlacement","style","className","doneButtonText","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthLabel","nextMonthLabel","showNeighboringMonth","size","changeMonthLabel","changeYearLabel","changeDayLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","after","hoverMode","label","input","type","onKeyDown","onElementSelect","Fragment","targetRef","offsetByMainAxis","placement","autoUpdateOnTargetResize","onClose"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DateInput/DateInput.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 { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\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 { Text } from '../Typography/Text/Text';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateInput--sizeY-none'],\n  ['compact']: styles['DateInput--sizeY-compact'],\n};\n\nexport interface DateInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'doneButtonText'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursLabel'\n      | 'changeMinutesLabel'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'changeDayLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'minDateTime'\n      | 'maxDateTime'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldLabel?: string;\n  showCalendarLabel?: 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      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\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  minDateTime,\n  maxDateTime,\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  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  showNeighboringMonth,\n  size,\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  changeHoursLabel = 'Изменить час',\n  changeMinutesLabel = 'Изменить минуту',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateInputProps) => {\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    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 = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\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      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" label={clearFieldLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" label={showCalendarLabel} 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={value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''}\n      />\n      <Text\n        className={styles['DateInput__input']}\n        onKeyDown={handleKeyDown}\n        // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n        // из-за чего `.Typography--normalize` перебивает стили.\n        normalize={false}\n        Component=\"span\" // для <span> нормализация не нужна\n      >\n        <InputLike\n          length={2}\n          getRootRef={daysRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          label={changeDayLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          label={changeMonthLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          label={changeYearLabel}\n        />\n        {enableTime && (\n          <React.Fragment>\n            <InputLikeDivider className={styles['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              label={changeHoursLabel}\n            />\n            <InputLikeDivider>:</InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={minutesRef}\n              index={4}\n              onElementSelect={setFocusedElement}\n              value={internalValue[4]}\n              label={changeMinutesLabel}\n            />\n          </React.Fragment>\n        )}\n      </Text>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          autoUpdateOnTargetResize\n        >\n          <Calendar\n            value={value}\n            onChange={onCalendarChange}\n            enableTime={enableTime}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={removeFocusFromField}\n            getRootRef={calendarRef}\n            doneButtonText={doneButtonText}\n            disablePickers={disablePickers}\n            changeHoursLabel={changeHoursLabel}\n            changeMinutesLabel={changeMinutesLabel}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            changeDayLabel={changeDayLabel}\n            showNeighboringMonth={showNeighboringMonth}\n            size={size}\n            viewDate={viewDate}\n            onHeaderChange={onHeaderChange}\n            onNextMonth={onNextMonth}\n            onPrevMonth={onPrevMonth}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n            minDateTime={minDateTime}\n            maxDateTime={maxDateTime}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isMatch","parse","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","sizeYClassNames","none","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","onChange","calendarPlacement","style","className","doneButtonText","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthLabel","nextMonthLabel","showNeighboringMonth","size","changeMonthLabel","changeYearLabel","changeDayLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","after","hoverMode","label","input","type","onKeyDown","normalize","Component","onElementSelect","Fragment","targetRef","offsetByMainAxis","placement","autoUpdateOnTargetResize","onClose"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 export type DatePickerDateFormat = {
     day: number;
@@ -21,5 +20,5 @@ export interface DatePickerProps extends Omit<HTMLAttributesWithRootRef<HTMLDivE
 /**
  * @see https://vkcom.github.io/VKUI/#/DatePicker
  */
-export declare const DatePicker: ({ defaultValue, ...props }: DatePickerProps) => React.JSX.Element;
+export declare const DatePicker: ({ defaultValue, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAwB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqB9E,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,cAAc,GAAG,KAAK,GAAG,KAAK,CAAC;IACvF,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0ID;;GAEG;AACH,eAAO,MAAM,UAAU,+BAAgC,eAAe,sBAkBrE,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAwB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqB9E,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,cAAc,GAAG,KAAK,GAAG,KAAK,CAAC;IACvF,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0ID;;GAEG;AACH,eAAO,MAAM,UAAU,+BAAgC,eAAe,4CAkBrE,CAAC"}

package/dist/components/DatePicker/DatePicker.js

@@ -1,6 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { leadingZero } from '@vkontakte/vkjs';
 import { range } from '../../helpers/range';
@@ -83,49 +84,62 @@ const DatePickerCustom = (_param)=>{
             label: String(value),
             value: value
         }));
-    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
         baseClassName: "vkuiDatePicker"
-    }, 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,
-            month,
-            year
-        })
+    }, restProps), {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "vkuiDatePicker__container",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "vkuiDatePicker__day",
+                        children: /*#__PURE__*/ _jsx(CustomSelect, {
+                            name: "day",
+                            value: day,
+                            options: dayOptions,
+                            placeholder: dayPlaceholder,
+                            popupDirection: popupDirection,
+                            onChange: onSelectChange,
+                            disabled: disabled
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "vkuiDatePicker__month",
+                        children: /*#__PURE__*/ _jsx(CustomSelect, {
+                            className: "vkuiDatePicker__monthSelect",
+                            name: "month",
+                            value: month,
+                            options: monthOptions,
+                            placeholder: monthPlaceholder,
+                            popupDirection: popupDirection,
+                            onChange: onSelectChange,
+                            disabled: disabled
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "vkuiDatePicker__year",
+                        children: /*#__PURE__*/ _jsx(CustomSelect, {
+                            name: "year",
+                            value: year,
+                            options: yearOptions,
+                            placeholder: yearPlaceholder,
+                            popupDirection: popupDirection,
+                            onChange: onSelectChange,
+                            disabled: disabled
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                type: "hidden",
+                name: name,
+                value: convertToInputFormat({
+                    day,
+                    month,
+                    year
+                })
+            })
+        ]
     }));
 };
 const DatePickerNative = (_param)=>{
@@ -164,7 +178,7 @@ const DatePickerNative = (_param)=>{
         onDateChange
     ]);
     const inputProps = restProps;
-    return /*#__PURE__*/ React.createElement(Input, _object_spread(_object_spread_props(_object_spread({}, inputProps), {
+    return /*#__PURE__*/ _jsx(Input, _object_spread(_object_spread_props(_object_spread({}, inputProps), {
         type: "date",
         onChange: onStringChange,
         min: convertToInputFormat(min),
@@ -190,7 +204,7 @@ const DatePickerNative = (_param)=>{
         props
     ]);
     const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;
-    return /*#__PURE__*/ React.createElement(Cmp, _object_spread_props(_object_spread({}, props, value), {
+    return /*#__PURE__*/ _jsx(Cmp, _object_spread_props(_object_spread({}, props, value), {
         onDateChange: onDateChange
     }));
 };