@vkontakte/vkui 6.0.2 → 6.1.0

package/dist/cjs/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":["DateInput","sizeYClassNames","none","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","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","React","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","isMatch","parse","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useDateInput","sizeY","useAdaptivity","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","after","IconButton","hoverMode","label","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","Text","onKeyDown","InputLike","onElementSelect","InputLikeDivider","Fragment","Popper","targetRef","offsetByMainAxis","placement","autoUpdateOnTargetResize","Calendar","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":["DateInput","sizeYClassNames","none","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","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","React","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","isMatch","parse","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useDateInput","sizeY","useAdaptivity","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","after","IconButton","hoverMode","label","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","Text","onKeyDown","normalize","Component","InputLike","onElementSelect","InputLikeDivider","Fragment","Popper","targetRef","offsetByMainAxis","placement","autoUpdateOnTargetResize","Calendar","onClose"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/dist/cjs/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/cjs/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/cjs/components/DatePicker/DatePicker.js

@@ -12,6 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _object_spread = require("@swc/helpers/_/_object_spread");
 const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _range = require("../../helpers/range");
@@ -94,49 +95,62 @@ const DatePickerCustom = (_param)=>{
             label: String(value),
             value: value
         }));
-    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_RootComponent.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.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.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.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__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "vkuiDatePicker__container",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "vkuiDatePicker__day",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, {
+                            name: "day",
+                            value: day,
+                            options: dayOptions,
+                            placeholder: dayPlaceholder,
+                            popupDirection: popupDirection,
+                            onChange: onSelectChange,
+                            disabled: disabled
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "vkuiDatePicker__month",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, {
+                            className: "vkuiDatePicker__monthSelect",
+                            name: "month",
+                            value: month,
+                            options: monthOptions,
+                            placeholder: monthPlaceholder,
+                            popupDirection: popupDirection,
+                            onChange: onSelectChange,
+                            disabled: disabled
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                        className: "vkuiDatePicker__year",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CustomSelect.CustomSelect, {
+                            name: "year",
+                            value: year,
+                            options: yearOptions,
+                            placeholder: yearPlaceholder,
+                            popupDirection: popupDirection,
+                            onChange: onSelectChange,
+                            disabled: disabled
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                type: "hidden",
+                name: name,
+                value: convertToInputFormat({
+                    day,
+                    month,
+                    year
+                })
+            })
+        ]
     }));
 };
 const DatePickerNative = (_param)=>{
@@ -175,7 +189,7 @@ const DatePickerNative = (_param)=>{
         onDateChange
     ]);
     const inputProps = restProps;
-    return /*#__PURE__*/ _react.createElement(_Input.Input, _object_spread._(_object_spread_props._(_object_spread._({}, inputProps), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Input.Input, _object_spread._(_object_spread_props._(_object_spread._({}, inputProps), {
         type: "date",
         onChange: onStringChange,
         min: convertToInputFormat(min),
@@ -199,7 +213,7 @@ const DatePicker = (_param)=>{
         props
     ]);
     const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;
-    return /*#__PURE__*/ _react.createElement(Cmp, _object_spread_props._(_object_spread._({}, props, value), {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Cmp, _object_spread_props._(_object_spread._({}, props, value), {
         onDateChange: onDateChange
     }));
 };

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

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

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

@@ -19,5 +19,5 @@ export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTML
 /**
  * @see https://vkcom.github.io/VKUI/#/DateRangeInput
  */
-export declare const DateRangeInput: ({ shouldDisableDate, disableFuture, disablePast, value, onChange, calendarPlacement, style, className, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, changeDayLabel, changeMonthLabel, changeYearLabel, changeStartDayLabel, changeStartMonthLabel, changeStartYearLabel, changeEndDayLabel, changeEndMonthLabel, changeEndYearLabel, clearFieldLabel, showCalendarLabel, prevMonthIcon, nextMonthIcon, disableCalendar, ...props }: DateRangeInputProps) => React.JSX.Element;
+export declare const DateRangeInput: ({ shouldDisableDate, disableFuture, disablePast, value, onChange, calendarPlacement, style, className, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, changeDayLabel, changeMonthLabel, changeYearLabel, changeStartDayLabel, changeStartMonthLabel, changeStartYearLabel, changeEndDayLabel, changeEndMonthLabel, changeEndYearLabel, clearFieldLabel, showCalendarLabel, prevMonthIcon, nextMonthIcon, disableCalendar, ...props }: DateRangeInputProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DateRangeInput.d.ts.map

package/dist/cjs/components/DateRangeInput/DateRangeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangeInput/DateRangeInput.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,EAAiB,kBAAkB,EAAiB,MAAM,gCAAgC,CAAC;AAClG,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAenE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,EAC3E,IAAI,CACF,kBAAkB,EAChB,aAAa,GACb,eAAe,GACf,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,eAAe,GACf,eAAe,CAClB,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,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA0CD;;GAEG;AACH,eAAO,MAAM,cAAc,kfAkCxB,mBAAmB,sBA+MrB,CAAC"}
+{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangeInput/DateRangeInput.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,EAAiB,kBAAkB,EAAiB,MAAM,gCAAgC,CAAC;AAClG,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAenE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,EAC3E,IAAI,CACF,kBAAkB,EAChB,aAAa,GACb,eAAe,GACf,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,eAAe,GACf,eAAe,CAClB,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,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA0CD;;GAEG;AACH,eAAO,MAAM,cAAc,kfAkCxB,mBAAmB,4CA+MrB,CAAC"}

package/dist/cjs/components/DateRangeInput/DateRangeInput.js

@@ -10,7 +10,9 @@ Object.defineProperty(exports, "DateRangeInput", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _object_spread = require("@swc/helpers/_/_object_spread");
+const _object_spread_props = require("@swc/helpers/_/_object_spread_props");
 const _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _icons = require("@vkontakte/icons");
 const _vkjs = require("@vkontakte/vkjs");
@@ -197,90 +199,132 @@ const DateRangeInput = (_param)=>{
         value,
         removeFocusFromField
     ]);
-    return /*#__PURE__*/ _react.createElement(_FormField.FormField, _object_spread._({
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_FormField.FormField, _object_spread_props._(_object_spread._({
         style: style,
         className: (0, _vkjs.classNames)(sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         getRootRef: handleRootRef,
-        after: value ? /*#__PURE__*/ _react.createElement(_IconButton.IconButton, {
+        after: value ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_IconButton.IconButton, {
             hoverMode: "opacity",
-            onClick: clear
-        }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, clearFieldLabel), /*#__PURE__*/ _react.createElement(_icons.Icon16Clear, null)) : /*#__PURE__*/ _react.createElement(_IconButton.IconButton, {
+            onClick: clear,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                    children: clearFieldLabel
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_icons.Icon16Clear, {})
+            ]
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_IconButton.IconButton, {
             hoverMode: "opacity",
-            onClick: openCalendar
-        }, /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, showCalendarLabel), /*#__PURE__*/ _react.createElement(_icons.Icon20CalendarOutline, null)),
+            onClick: openCalendar,
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                    children: showCalendarLabel
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_icons.Icon20CalendarOutline, {})
+            ]
+        }),
         disabled: disabled,
         onClick: (0, _callMultiple.callMultiple)(handleFieldEnter, onClick),
         onFocus: (0, _callMultiple.callMultiple)(handleFieldEnter, onFocus)
-    }, props), /*#__PURE__*/ _react.createElement("input", {
-        type: "hidden",
-        name: name,
-        value: value ? `${value[0] ? (0, _date.format)(value[0], 'DD.MM.YYYY') : ''} - ${value[1] ? (0, _date.format)(value[1], 'DD.MM.YYYY') : ''}` : ''
-    }), /*#__PURE__*/ _react.createElement(_Text.Text, {
-        className: "vkuiDateInput__input",
-        onKeyDown: handleKeyDown
-    }, /*#__PURE__*/ _react.createElement(_InputLike.InputLike, {
-        length: 2,
-        getRootRef: daysStartRef,
-        index: 0,
-        onElementSelect: setFocusedElement,
-        value: internalValue[0],
-        label: changeStartDayLabel
-    }), /*#__PURE__*/ _react.createElement(_InputLikeDivider.InputLikeDivider, null, "."), /*#__PURE__*/ _react.createElement(_InputLike.InputLike, {
-        length: 2,
-        getRootRef: monthsStartRef,
-        index: 1,
-        onElementSelect: setFocusedElement,
-        value: internalValue[1],
-        label: changeStartMonthLabel
-    }), /*#__PURE__*/ _react.createElement(_InputLikeDivider.InputLikeDivider, null, "."), /*#__PURE__*/ _react.createElement(_InputLike.InputLike, {
-        length: 4,
-        getRootRef: yearsStartRef,
-        index: 2,
-        onElementSelect: setFocusedElement,
-        value: internalValue[2],
-        label: changeStartYearLabel
-    }), /*#__PURE__*/ _react.createElement(_InputLikeDivider.InputLikeDivider, null, ' — '), /*#__PURE__*/ _react.createElement(_InputLike.InputLike, {
-        length: 2,
-        getRootRef: daysEndRef,
-        index: 3,
-        onElementSelect: setFocusedElement,
-        value: internalValue[3],
-        label: changeEndDayLabel
-    }), /*#__PURE__*/ _react.createElement(_InputLikeDivider.InputLikeDivider, null, "."), /*#__PURE__*/ _react.createElement(_InputLike.InputLike, {
-        length: 2,
-        getRootRef: monthsEndRef,
-        index: 4,
-        onElementSelect: setFocusedElement,
-        value: internalValue[4],
-        label: changeEndMonthLabel
-    }), /*#__PURE__*/ _react.createElement(_InputLikeDivider.InputLikeDivider, null, "."), /*#__PURE__*/ _react.createElement(_InputLike.InputLike, {
-        length: 4,
-        getRootRef: yearsEndRef,
-        index: 5,
-        onElementSelect: setFocusedElement,
-        value: internalValue[5],
-        label: changeEndYearLabel
-    })), open && !disableCalendar && /*#__PURE__*/ _react.createElement(_Popper.Popper, {
-        targetRef: rootRef,
-        offsetByMainAxis: 8,
-        placement: calendarPlacement
-    }, /*#__PURE__*/ _react.createElement(_CalendarRange.CalendarRange, {
-        value: value,
-        onChange: onCalendarChange,
-        disablePast: disablePast,
-        disableFuture: disableFuture,
-        shouldDisableDate: shouldDisableDate,
-        onClose: closeCalendar,
-        getRootRef: calendarRef,
-        disablePickers: disablePickers,
-        prevMonthLabel: prevMonthLabel,
-        nextMonthLabel: nextMonthLabel,
-        changeMonthLabel: changeMonthLabel,
-        changeYearLabel: changeYearLabel,
-        changeDayLabel: changeDayLabel,
-        prevMonthIcon: prevMonthIcon,
-        nextMonthIcon: nextMonthIcon
-    })));
+    }, props), {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                type: "hidden",
+                name: name,
+                value: value ? `${value[0] ? (0, _date.format)(value[0], 'DD.MM.YYYY') : ''} - ${value[1] ? (0, _date.format)(value[1], 'DD.MM.YYYY') : ''}` : ''
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.Text, {
+                className: "vkuiDateInput__input",
+                onKeyDown: handleKeyDown,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLike.InputLike, {
+                        length: 2,
+                        getRootRef: daysStartRef,
+                        index: 0,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[0],
+                        label: changeStartDayLabel
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
+                        children: "."
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLike.InputLike, {
+                        length: 2,
+                        getRootRef: monthsStartRef,
+                        index: 1,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[1],
+                        label: changeStartMonthLabel
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
+                        children: "."
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLike.InputLike, {
+                        length: 4,
+                        getRootRef: yearsStartRef,
+                        index: 2,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[2],
+                        label: changeStartYearLabel
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
+                        children: ' — '
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLike.InputLike, {
+                        length: 2,
+                        getRootRef: daysEndRef,
+                        index: 3,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[3],
+                        label: changeEndDayLabel
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
+                        children: "."
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLike.InputLike, {
+                        length: 2,
+                        getRootRef: monthsEndRef,
+                        index: 4,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[4],
+                        label: changeEndMonthLabel
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
+                        children: "."
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLike.InputLike, {
+                        length: 4,
+                        getRootRef: yearsEndRef,
+                        index: 5,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[5],
+                        label: changeEndYearLabel
+                    })
+                ]
+            }),
+            open && !disableCalendar && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Popper.Popper, {
+                targetRef: rootRef,
+                offsetByMainAxis: 8,
+                placement: calendarPlacement,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CalendarRange.CalendarRange, {
+                    value: value,
+                    onChange: onCalendarChange,
+                    disablePast: disablePast,
+                    disableFuture: disableFuture,
+                    shouldDisableDate: shouldDisableDate,
+                    onClose: closeCalendar,
+                    getRootRef: calendarRef,
+                    disablePickers: disablePickers,
+                    prevMonthLabel: prevMonthLabel,
+                    nextMonthLabel: nextMonthLabel,
+                    changeMonthLabel: changeMonthLabel,
+                    changeYearLabel: changeYearLabel,
+                    changeDayLabel: changeDayLabel,
+                    prevMonthIcon: prevMonthIcon,
+                    nextMonthIcon: nextMonthIcon
+                })
+            })
+        ]
+    }));
 };
 
 //# sourceMappingURL=DateRangeInput.js.map