@vkontakte/vkui 6.7.3 → 6.7.4

package/dist/cjs/components/Clickable/useState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/useState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Позволяет управлять activated-состоянием извне\n   */\n  activated?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n\n  /**\n   * Позволяет родительскому компоненту\n   * иметь hovered-cостояние при наведении\n   * на любой дочерний элемент.\n   * По умолчанию состояние hovered у родителя сбрасывается.\n   *\n   * Присваивается родителькому компоненту.\n   *\n   * @example\n   * <Tappable hasHoverWithChildren>\n   *   <IconButton />\n   *   <IconButton />\n   *   <IconButton />\n   * </Tappable>\n   */\n  hasHoverWithChildren?: boolean;\n\n  /**\n   * Позволяет родительскому компоненту показывать hovered-состояние при наведении\n   * на текущий дочерний компонент.\n   *\n   * Присваивается дочернему компоненту.\n   *\n   * @example\n   * <Tappable>\n   *   <IconButton unlockParentHover />\n   *   <IconButton unlockParentHover />\n   *   <IconButton />\n   * </Tappable>\n   */\n  unlockParentHover?: boolean;\n\n  /**\n   * Длительность показа `activated`-состояния\n   */\n  activeEffectDelay?: number;\n\n  /**\n   * Стиль подсветки active-состояния\n   */\n  activeClassName?: string;\n\n  /**\n   * Стиль подсветки hover-состояния\n   */\n  hoverClassName?: string;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nconst ACTIVE_DELAY = 70;\n\ninterface UseHoverProps extends Pick<StateProps, 'hovered' | 'hasHover'> {\n  /**\n   * Блокирование активации состояний\n   */\n  lockState: boolean;\n  setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет наведением на компонент, игнорирует тач события\n */\nfunction useHover({ hovered, hasHover = true, lockState, setParentStateLock }: UseHoverProps) {\n  const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);\n\n  const prevIsHoveredRef = React.useRef<boolean | undefined>(undefined);\n\n  const handleHover = React.useCallback(\n    (isHover: boolean) => {\n      setHoveredStateLocal(isHover);\n\n      const isHovered = calculateStateValue({\n        hasState: hasHover,\n        isLocked: lockState,\n        stateValueControlled: Boolean(hovered),\n        stateValueLocal: isHover,\n      });\n\n      // проверка сделана чтобы реже вызывать обновление состояния\n      // контекста родителя\n      if (isHovered !== prevIsHoveredRef.current) {\n        prevIsHoveredRef.current = isHovered;\n        setParentStateLock(isHovered);\n      }\n    },\n    [setParentStateLock, hasHover, hovered, lockState],\n  );\n\n  const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n    if (e.pointerType === 'touch') {\n      return;\n    }\n\n    handleHover(true);\n  };\n\n  const onPointerLeave = () => {\n    handleHover(false);\n  };\n\n  const isHovered = calculateStateValue({\n    hasState: hasHover,\n    isLocked: lockState,\n    stateValueControlled: Boolean(hovered),\n    stateValueLocal: hoveredStateLocal,\n  });\n\n  return {\n    isHovered,\n    onPointerEnter: hasHover ? onPointerEnter : noop,\n    onPointerLeave: hasHover ? onPointerLeave : noop,\n  };\n}\n\ninterface UseActiveProps extends Pick<StateProps, 'activated' | 'activeEffectDelay' | 'hasActive'> {\n  /**\n   * Блокирование активации состояний\n   */\n  lockStateRef: React.MutableRefObject<boolean>;\n  setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет активацией компонента\n */\nfunction useActive({\n  activated,\n  activeEffectDelay,\n  hasActive = true,\n  lockStateRef,\n  setParentStateLock,\n}: UseActiveProps) {\n  // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,\n  // если установка отложена c помощью delay, то и вызов будет отложен\n  const [activatedState, setActivated] = useStateWithDelay<boolean>(false, 0, setParentStateLock);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n  const onPointerDown = () => {\n    if (lockStateRef.current) {\n      return;\n    }\n\n    setActivated(true, ACTIVE_DELAY);\n    // намеренно выставляем lock, так как setActivated вызов отложен\n    // а у отложенного setActivated setParentStateLock тоже вызовится отложенно\n    // родитель сейчас тоже обработает это же событие PointerDown\n    // если мы не залочим activatedState у родителя сейчас, то родитель выставит active состояние\n    setParentStateLock(true);\n  };\n\n  const onPointerCancel: React.PointerEventHandler = (e) => {\n    if (pointersUp.has(e.pointerId)) {\n      pointersUp.delete(e.pointerId);\n      return;\n    }\n\n    setActivated(false);\n  };\n\n  const onPointerUp: React.PointerEventHandler = (e) => {\n    pointersUp.add(e.pointerId);\n\n    if (lockStateRef.current) {\n      return;\n    }\n\n    setActivated(true);\n    setActivated(false, activeEffectDelay);\n  };\n\n  const isActivated = calculateStateValue({\n    hasState: hasActive,\n    isLocked: lockStateRef.current,\n    stateValueControlled: Boolean(activated),\n    stateValueLocal: activatedState,\n  });\n\n  return {\n    isActivated,\n    onPointerLeave: hasActive ? onPointerCancel : noop,\n    onPointerDown: hasActive ? onPointerDown : noop,\n    onPointerCancel: hasActive ? onPointerCancel : noop,\n    onPointerUp: hasActive ? onPointerUp : noop,\n  };\n}\n\ninterface ClickableLockStateContextInterface {\n  lockHoverStateBubbling?: (v: boolean) => void;\n  lockActiveStateBubbling?: (v: boolean) => void;\n}\n\nexport const ClickableLockStateContext: React.Context<ClickableLockStateContextInterface> =\n  React.createContext<ClickableLockStateContextInterface>({\n    lockHoverStateBubbling: undefined,\n    lockActiveStateBubbling: undefined,\n  });\n\n/**\n * Блокирует стейт на всплытие\n */\nfunction useLockState(\n  setParentStateLockBubbling: (v: boolean) => void,\n): readonly [boolean, (v: boolean) => void, (...args: any[]) => void] {\n  const [lockState, setLockState] = React.useState(false);\n\n  const setStateLockBubblingImmediate = React.useCallback(\n    (isLock: boolean) => {\n      setLockState(isLock);\n      setParentStateLockBubbling(isLock);\n    },\n    [setParentStateLockBubbling],\n  );\n\n  return [lockState, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\nfunction useLockRef(\n  setParentStateLockBubbling: (v: boolean) => void,\n): readonly [React.MutableRefObject<boolean>, (v: boolean) => void, (...args: any[]) => void] {\n  const lockStateRef = React.useRef(false);\n\n  const setStateLockBubblingImmediate = React.useCallback(\n    (isLock: boolean) => {\n      lockStateRef.current = isLock;\n      setParentStateLockBubbling(isLock);\n    },\n    [setParentStateLockBubbling],\n  );\n\n  return [lockStateRef, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\n/**\n * Управляет состоянием компонента\n */\nexport function useState({\n  hovered,\n  hasHover,\n  hasActive,\n  unlockParentHover,\n  ...restProps\n}: StateProps): {\n  stateClassName: string;\n  setLockHoverBubblingImmediate: (...args: any[]) => void;\n  setLockActiveBubblingImmediate: (...args: any[]) => void;\n} {\n  const { lockHoverStateBubbling = noop, lockActiveStateBubbling = noop } =\n    React.useContext(ClickableLockStateContext);\n\n  const [lockHoverState, setParentStateLockHoverBubbling, setLockHoverBubblingImmediate] =\n    useLockState(unlockParentHover ? noop : lockHoverStateBubbling);\n  const [lockActiveStateRef, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] =\n    useLockRef(lockActiveStateBubbling);\n\n  const { isHovered, ...hoverEvent } = useHover({\n    hasHover,\n    hovered,\n    lockState: lockHoverState,\n    setParentStateLock: setParentStateLockHoverBubbling,\n  });\n\n  const { isActivated, ...activeEvent } = useActive({\n    ...restProps,\n    lockStateRef: lockActiveStateRef,\n    setParentStateLock: setParentStateLockActiveBubbling,\n  });\n\n  const stateClassName = classNames(\n    isHovered && restProps.hoverClassName,\n    isActivated && restProps.activeClassName,\n  );\n  const handlers = mergeCalls(hoverEvent, activeEvent);\n\n  return {\n    stateClassName,\n    setLockHoverBubblingImmediate,\n    setLockActiveBubblingImmediate,\n    ...handlers,\n  };\n}\n\n// Общая функция для определения конечного состояния active/hovered\nfunction calculateStateValue({\n  hasState,\n  isLocked,\n  stateValueControlled,\n  stateValueLocal,\n}: {\n  hasState: boolean;\n  isLocked: boolean;\n  stateValueControlled: boolean;\n  stateValueLocal: boolean;\n}): boolean {\n  return hasState && !isLocked && (stateValueControlled || stateValueLocal);\n}\n"],"names":["ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","ACTIVE_DELAY","useHover","hovered","hasHover","lockState","setParentStateLock","hoveredStateLocal","setHoveredStateLocal","React","prevIsHoveredRef","useRef","undefined","handleHover","useCallback","isHover","isHovered","calculateStateValue","hasState","isLocked","stateValueControlled","Boolean","stateValueLocal","current","onPointerEnter","e","pointerType","onPointerLeave","noop","useActive","activated","activeEffectDelay","hasActive","lockStateRef","activatedState","setActivated","useStateWithDelay","pointersUp","useMemo","Set","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","isActivated","createContext","lockHoverStateBubbling","lockActiveStateBubbling","useLockState","setParentStateLockBubbling","setLockState","setStateLockBubblingImmediate","isLock","useLockRef","unlockParentHover","restProps","useContext","lockHoverState","setParentStateLockHoverBubbling","setLockHoverBubblingImmediate","lockActiveStateRef","setParentStateLockActiveBubbling","setLockActiveBubblingImmediate","hoverEvent","activeEvent","stateClassName","classNames","hoverClassName","activeClassName","handlers","mergeCalls"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Clickable/useState.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n  /**\n   * Указывает, должен ли компонент реагировать на hover-состояние\n   */\n  hasHover?: boolean;\n  /**\n   * Позволяет управлять hovered-состоянием извне\n   */\n  hovered?: boolean;\n  /**\n   * Позволяет управлять activated-состоянием извне\n   */\n  activated?: boolean;\n  /**\n   * Указывает, должен ли компонент реагировать на active-состояние\n   */\n  hasActive?: boolean;\n\n  /**\n   * Позволяет родительскому компоненту\n   * иметь hovered-cостояние при наведении\n   * на любой дочерний элемент.\n   * По умолчанию состояние hovered у родителя сбрасывается.\n   *\n   * Присваивается родителькому компоненту.\n   *\n   * @example\n   * <Tappable hasHoverWithChildren>\n   *   <IconButton />\n   *   <IconButton />\n   *   <IconButton />\n   * </Tappable>\n   */\n  hasHoverWithChildren?: boolean;\n\n  /**\n   * Позволяет родительскому компоненту показывать hovered-состояние при наведении\n   * на текущий дочерний компонент.\n   *\n   * Присваивается дочернему компоненту.\n   *\n   * @example\n   * <Tappable>\n   *   <IconButton unlockParentHover />\n   *   <IconButton unlockParentHover />\n   *   <IconButton />\n   * </Tappable>\n   */\n  unlockParentHover?: boolean;\n\n  /**\n   * Длительность показа `activated`-состояния\n   */\n  activeEffectDelay?: number;\n\n  /**\n   * Стиль подсветки active-состояния\n   */\n  activeClassName?: string;\n\n  /**\n   * Стиль подсветки hover-состояния\n   */\n  hoverClassName?: string;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nconst ACTIVE_DELAY = 70;\n\ninterface UseHoverProps extends Pick<StateProps, 'hovered' | 'hasHover'> {\n  /**\n   * Блокирование активации состояний\n   */\n  lockState: boolean;\n  setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет наведением на компонент, игнорирует тач события\n */\nfunction useHover({ hovered, hasHover = true, lockState, setParentStateLock }: UseHoverProps) {\n  const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);\n\n  const prevIsHoveredRef = React.useRef<boolean | undefined>(undefined);\n\n  const handleHover = React.useCallback(\n    (isHover: boolean) => {\n      setHoveredStateLocal(isHover);\n\n      const isHovered =\n        hovered ??\n        calculateStateValue({\n          hasState: hasHover,\n          isLocked: lockState,\n          stateValueLocal: isHover,\n        });\n\n      // проверка сделана чтобы реже вызывать обновление состояния\n      // контекста родителя\n      if (isHovered !== prevIsHoveredRef.current) {\n        prevIsHoveredRef.current = isHovered;\n        setParentStateLock(isHovered);\n      }\n    },\n    [setParentStateLock, hasHover, hovered, lockState],\n  );\n\n  const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n    if (e.pointerType === 'touch') {\n      return;\n    }\n\n    handleHover(true);\n  };\n\n  const onPointerLeave = () => {\n    handleHover(false);\n  };\n\n  const isHovered =\n    hovered ??\n    calculateStateValue({\n      hasState: hasHover,\n      isLocked: lockState,\n      stateValueLocal: hoveredStateLocal,\n    });\n\n  return {\n    isHovered,\n    onPointerEnter: hasHover ? onPointerEnter : noop,\n    onPointerLeave: hasHover ? onPointerLeave : noop,\n  };\n}\n\ninterface UseActiveProps extends Pick<StateProps, 'activated' | 'activeEffectDelay' | 'hasActive'> {\n  /**\n   * Блокирование активации состояний\n   */\n  lockStateRef: React.MutableRefObject<boolean>;\n  setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет активацией компонента\n */\nfunction useActive({\n  activated,\n  activeEffectDelay,\n  hasActive = true,\n  lockStateRef,\n  setParentStateLock,\n}: UseActiveProps) {\n  // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,\n  // если установка отложена c помощью delay, то и вызов будет отложен\n  const [activatedState, setActivated] = useStateWithDelay<boolean>(false, 0, setParentStateLock);\n\n  // Список нажатий которые не требуется отменять\n  const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n  const onPointerDown = () => {\n    if (lockStateRef.current) {\n      return;\n    }\n\n    setActivated(true, ACTIVE_DELAY);\n    // намеренно выставляем lock, так как setActivated вызов отложен\n    // а у отложенного setActivated setParentStateLock тоже вызовится отложенно\n    // родитель сейчас тоже обработает это же событие PointerDown\n    // если мы не залочим activatedState у родителя сейчас, то родитель выставит active состояние\n    setParentStateLock(true);\n  };\n\n  const onPointerCancel: React.PointerEventHandler = (e) => {\n    if (pointersUp.has(e.pointerId)) {\n      pointersUp.delete(e.pointerId);\n      return;\n    }\n\n    setActivated(false);\n  };\n\n  const onPointerUp: React.PointerEventHandler = (e) => {\n    pointersUp.add(e.pointerId);\n\n    if (lockStateRef.current) {\n      return;\n    }\n\n    setActivated(true);\n    setActivated(false, activeEffectDelay);\n  };\n\n  const isActivated =\n    activated ??\n    calculateStateValue({\n      hasState: hasActive,\n      isLocked: lockStateRef.current,\n      stateValueLocal: activatedState,\n    });\n\n  return {\n    isActivated,\n    onPointerLeave: hasActive ? onPointerCancel : noop,\n    onPointerDown: hasActive ? onPointerDown : noop,\n    onPointerCancel: hasActive ? onPointerCancel : noop,\n    onPointerUp: hasActive ? onPointerUp : noop,\n  };\n}\n\ninterface ClickableLockStateContextInterface {\n  lockHoverStateBubbling?: (v: boolean) => void;\n  lockActiveStateBubbling?: (v: boolean) => void;\n}\n\nexport const ClickableLockStateContext: React.Context<ClickableLockStateContextInterface> =\n  React.createContext<ClickableLockStateContextInterface>({\n    lockHoverStateBubbling: undefined,\n    lockActiveStateBubbling: undefined,\n  });\n\n/**\n * Блокирует стейт на всплытие\n */\nfunction useLockState(\n  setParentStateLockBubbling: (v: boolean) => void,\n): readonly [boolean, (v: boolean) => void, (...args: any[]) => void] {\n  const [lockState, setLockState] = React.useState(false);\n\n  const setStateLockBubblingImmediate = React.useCallback(\n    (isLock: boolean) => {\n      setLockState(isLock);\n      setParentStateLockBubbling(isLock);\n    },\n    [setParentStateLockBubbling],\n  );\n\n  return [lockState, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\nfunction useLockRef(\n  setParentStateLockBubbling: (v: boolean) => void,\n): readonly [React.MutableRefObject<boolean>, (v: boolean) => void, (...args: any[]) => void] {\n  const lockStateRef = React.useRef(false);\n\n  const setStateLockBubblingImmediate = React.useCallback(\n    (isLock: boolean) => {\n      lockStateRef.current = isLock;\n      setParentStateLockBubbling(isLock);\n    },\n    [setParentStateLockBubbling],\n  );\n\n  return [lockStateRef, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\n/**\n * Управляет состоянием компонента\n */\nexport function useState({\n  hovered,\n  hasHover,\n  activated,\n  hasActive,\n  activeEffectDelay,\n  unlockParentHover,\n  hoverClassName,\n  activeClassName,\n}: StateProps): {\n  stateClassName: string;\n  setLockHoverBubblingImmediate: (...args: any[]) => void;\n  setLockActiveBubblingImmediate: (...args: any[]) => void;\n} {\n  const { lockHoverStateBubbling = noop, lockActiveStateBubbling = noop } =\n    React.useContext(ClickableLockStateContext);\n\n  const [lockHoverState, setParentStateLockHoverBubbling, setLockHoverBubblingImmediate] =\n    useLockState(unlockParentHover ? noop : lockHoverStateBubbling);\n  const [lockActiveStateRef, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] =\n    useLockRef(lockActiveStateBubbling);\n\n  const { isHovered, ...hoverEvent } = useHover({\n    hasHover,\n    hovered,\n    lockState: lockHoverState,\n    setParentStateLock: setParentStateLockHoverBubbling,\n  });\n\n  const { isActivated, ...activeEvent } = useActive({\n    activated,\n    hasActive,\n    activeEffectDelay,\n    lockStateRef: lockActiveStateRef,\n    setParentStateLock: setParentStateLockActiveBubbling,\n  });\n\n  const stateClassName = classNames(isHovered && hoverClassName, isActivated && activeClassName);\n  const handlers = mergeCalls(hoverEvent, activeEvent);\n\n  return {\n    stateClassName,\n    setLockHoverBubblingImmediate,\n    setLockActiveBubblingImmediate,\n    ...handlers,\n  };\n}\n\n// Общая функция для определения конечного состояния active/hovered\nfunction calculateStateValue({\n  hasState,\n  isLocked,\n  stateValueLocal,\n}: {\n  hasState: boolean;\n  isLocked: boolean;\n  stateValueLocal: boolean;\n}): boolean {\n  return hasState && !isLocked && stateValueLocal;\n}\n"],"names":["ClickableLockStateContext","DEFAULT_ACTIVE_EFFECT_DELAY","useState","ACTIVE_DELAY","useHover","hovered","hasHover","lockState","setParentStateLock","hoveredStateLocal","setHoveredStateLocal","React","prevIsHoveredRef","useRef","undefined","handleHover","useCallback","isHover","isHovered","calculateStateValue","hasState","isLocked","stateValueLocal","current","onPointerEnter","e","pointerType","onPointerLeave","noop","useActive","activated","activeEffectDelay","hasActive","lockStateRef","activatedState","setActivated","useStateWithDelay","pointersUp","useMemo","Set","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","isActivated","createContext","lockHoverStateBubbling","lockActiveStateBubbling","useLockState","setParentStateLockBubbling","setLockState","setStateLockBubblingImmediate","isLock","useLockRef","unlockParentHover","hoverClassName","activeClassName","useContext","lockHoverState","setParentStateLockHoverBubbling","setLockHoverBubblingImmediate","lockActiveStateRef","setParentStateLockActiveBubbling","setLockActiveBubblingImmediate","hoverEvent","activeEvent","stateClassName","classNames","handlers","mergeCalls"],"mappings":"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"}

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

@@ -1,18 +1,27 @@
 import * as React from 'react';
 import type { PlacementWithAuto } from '../../lib/floating';
 import type { HasRootRef } from '../../types';
-import { type CalendarProps } from '../Calendar/Calendar';
+import { type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';
 import { type FormFieldProps } from '../FormField/FormField';
 import '../InputLike/InputLike.module.css';
-export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>, Pick<CalendarProps, 'disablePast' | 'disableFuture' | 'enableTime' | 'shouldDisableDate' | 'onChange' | 'value' | 'doneButtonText' | 'weekStartsOn' | 'disablePickers' | 'changeHoursLabel' | 'changeMinutesLabel' | 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'changeDayLabel' | 'showNeighboringMonth' | 'size' | 'viewDate' | 'onHeaderChange' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'minDateTime' | 'maxDateTime' | 'renderDayContent'>, HasRootRef<HTMLDivElement>, Omit<FormFieldProps, 'maxHeight'> {
+export type DateInputPropsTestsProps = {
+    dayFieldTestId?: string;
+    monthFieldTestId?: string;
+    yearFieldTestId?: string;
+    hourFieldTestId?: string;
+    minuteFieldTestId?: string;
+};
+export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>, Pick<CalendarProps, 'disablePast' | 'disableFuture' | 'enableTime' | 'shouldDisableDate' | 'onChange' | 'value' | 'doneButtonText' | 'weekStartsOn' | 'disablePickers' | 'changeHoursLabel' | 'changeMinutesLabel' | 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'changeDayLabel' | 'showNeighboringMonth' | 'size' | 'viewDate' | 'onHeaderChange' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'minDateTime' | 'maxDateTime' | 'renderDayContent'>, HasRootRef<HTMLDivElement>, Omit<FormFieldProps, 'maxHeight'>, DateInputPropsTestsProps {
+    calendarTestsProps?: CalendarTestsProps;
     calendarPlacement?: PlacementWithAuto;
     closeOnChange?: boolean;
     clearFieldLabel?: string;
     showCalendarLabel?: string;
     disableCalendar?: boolean;
+    onCalendarOpenChanged?: (opened: boolean) => void;
 }
 /**
  * @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, renderDayContent, ...props }: DateInputProps) => React.ReactNode;
+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, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, ...props }: DateInputProps) => React.ReactNode;
 //# sourceMappingURL=DateInput.d.ts.map

package/dist/cjs/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,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAMxE,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,GACb,kBAAkB,CACrB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;IACnC,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,kjBAyCnB,cAAc,KAAG,KAAK,CAAC,SAuMzB,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAMxE,OAAO,mCAAmC,CAAC;AAQ3C,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,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,GACb,kBAAkB,CACrB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,wBAAwB;IAC1B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,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;IAC1B,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACnD;AA0CD;;GAEG;AACH,eAAO,MAAM,SAAS,orBAgDnB,cAAc,KAAG,KAAK,CAAC,SAiNzB,CAAC"}

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

@@ -16,6 +16,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _icons = require("@vkontakte/icons");
 const _vkjs = require("@vkontakte/vkjs");
+const _datefns = require("date-fns");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
 const _useDateInput = require("../../hooks/useDateInput");
 const _useExternRef = require("../../hooks/useExternRef");
@@ -79,7 +80,7 @@ const getInternalValue = (value)=>{
     return newValue;
 };
 const DateInput = (_param)=>{
-    var { enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value, onChange, calendarPlacement = 'bottom-start', style, className, doneButtonText, closeOnChange = true, 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 = false, renderDayContent } = _param, props = _object_without_properties._(_param, [
+    var { enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value, onChange, calendarPlacement = 'bottom-start', style, className, doneButtonText, closeOnChange = true, 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 = false, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId } = _param, props = _object_without_properties._(_param, [
         "enableTime",
         "shouldDisableDate",
         "disableFuture",
@@ -118,7 +119,14 @@ const DateInput = (_param)=>{
         "prevMonthIcon",
         "nextMonthIcon",
         "disableCalendar",
-        "renderDayContent"
+        "renderDayContent",
+        "onCalendarOpenChanged",
+        "calendarTestsProps",
+        "dayFieldTestId",
+        "monthFieldTestId",
+        "yearFieldTestId",
+        "hourFieldTestId",
+        "minuteFieldTestId"
     ]);
     const daysRef = _react.useRef(null);
     const monthsRef = _react.useRef(null);
@@ -139,7 +147,8 @@ const DateInput = (_param)=>{
             mask += ' HH:mm';
         }
         if ((0, _date.isMatch)(formattedValue, mask)) {
-            onChange === null || onChange === void 0 ? void 0 : onChange((0, _date.parse)(formattedValue, mask, value !== null && value !== void 0 ? value : new Date()));
+            const now = new Date();
+            onChange === null || onChange === void 0 ? void 0 : onChange((0, _date.parse)(formattedValue, mask, value !== null && value !== void 0 ? value : enableTime ? (0, _datefns.startOfMinute)(now) : (0, _datefns.startOfDay)(now)));
         }
     }, [
         enableTime,
@@ -169,7 +178,8 @@ const DateInput = (_param)=>{
         onChange,
         onInternalValueChange,
         getInternalValue,
-        value
+        value,
+        onCalendarOpenChanged
     });
     const { sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
     const handleRootRef = (0, _useExternRef.useExternRef)(rootRef, getRootRef);
@@ -224,7 +234,8 @@ const DateInput = (_param)=>{
                         index: 0,
                         onElementSelect: setFocusedElement,
                         value: internalValue[0],
-                        label: changeDayLabel
+                        label: changeDayLabel,
+                        "data-testid": dayFieldTestId
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
                         children: "."
@@ -235,7 +246,8 @@ const DateInput = (_param)=>{
                         index: 1,
                         onElementSelect: setFocusedElement,
                         value: internalValue[1],
-                        label: changeMonthLabel
+                        label: changeMonthLabel,
+                        "data-testid": monthFieldTestId
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
                         children: "."
@@ -246,7 +258,8 @@ const DateInput = (_param)=>{
                         index: 2,
                         onElementSelect: setFocusedElement,
                         value: internalValue[2],
-                        label: changeYearLabel
+                        label: changeYearLabel,
+                        "data-testid": yearFieldTestId
                     }),
                     enableTime && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
                         children: [
@@ -260,7 +273,8 @@ const DateInput = (_param)=>{
                                 index: 3,
                                 onElementSelect: setFocusedElement,
                                 value: internalValue[3],
-                                label: changeHoursLabel
+                                label: changeHoursLabel,
+                                "data-testid": hourFieldTestId
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
                                 children: ":"
@@ -271,7 +285,8 @@ const DateInput = (_param)=>{
                                 index: 4,
                                 onElementSelect: setFocusedElement,
                                 value: internalValue[4],
-                                label: changeMinutesLabel
+                                label: changeMinutesLabel,
+                                "data-testid": minuteFieldTestId
                             })
                         ]
                     })
@@ -282,7 +297,7 @@ const DateInput = (_param)=>{
                 offsetByMainAxis: 8,
                 placement: calendarPlacement,
                 autoUpdateOnTargetResize: true,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Calendar.Calendar, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Calendar.Calendar, _object_spread._({
                     value: value,
                     onChange: onCalendarChange,
                     enableTime: enableTime,
@@ -311,7 +326,7 @@ const DateInput = (_param)=>{
                     nextMonthIcon: nextMonthIcon,
                     minDateTime: minDateTime,
                     maxDateTime: maxDateTime
-                })
+                }, calendarTestsProps))
             })
         ]
     }));

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 type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps } from '../Calendar/Calendar';\nimport { FormField, type 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      | 'renderDayContent'\n    >,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'> {\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  renderDayContent,\n  ...props\n}: DateInputProps): React.ReactNode => {\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.yyyy'T'HH: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            renderDayContent={renderDayContent}\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","compact","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","renderDayContent","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"],"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 { startOfDay, startOfMinute } from 'date-fns';\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 type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';\nimport { FormField, type 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 type DateInputPropsTestsProps = {\n  dayFieldTestId?: string;\n  monthFieldTestId?: string;\n  yearFieldTestId?: string;\n  hourFieldTestId?: string;\n  minuteFieldTestId?: string;\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      | 'renderDayContent'\n    >,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'>,\n    DateInputPropsTestsProps {\n  calendarTestsProps?: CalendarTestsProps;\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldLabel?: string;\n  showCalendarLabel?: string;\n  disableCalendar?: boolean;\n  onCalendarOpenChanged?: (opened: boolean) => void;\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  renderDayContent,\n  onCalendarOpenChanged,\n  calendarTestsProps,\n  dayFieldTestId,\n  monthFieldTestId,\n  yearFieldTestId,\n  hourFieldTestId,\n  minuteFieldTestId,\n  ...props\n}: DateInputProps): React.ReactNode => {\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        const now = new Date();\n        onChange?.(\n          parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),\n        );\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    onCalendarOpenChanged,\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.yyyy'T'HH: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          data-testid={dayFieldTestId}\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          data-testid={monthFieldTestId}\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          data-testid={yearFieldTestId}\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              data-testid={hourFieldTestId}\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              data-testid={minuteFieldTestId}\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            renderDayContent={renderDayContent}\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            {...calendarTestsProps}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["DateInput","sizeYClassNames","none","compact","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","renderDayContent","onCalendarOpenChanged","calendarTestsProps","dayFieldTestId","monthFieldTestId","yearFieldTestId","hourFieldTestId","minuteFieldTestId","props","daysRef","React","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","isMatch","now","Date","parse","startOfMinute","startOfDay","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","data-testid","InputLikeDivider","Fragment","Popper","targetRef","offsetByMainAxis","placement","autoUpdateOnTargetResize","Calendar","onClose"],"mappings":"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"}

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

@@ -1,11 +1,22 @@
 import * as React from 'react';
 import type { PlacementWithAuto } from '../../lib/floating';
 import type { HasRootRef } from '../../types';
-import { type CalendarRangeProps } from '../CalendarRange/CalendarRange';
+import { type CalendarRangeProps, type CalendarRangeTestsProps } from '../CalendarRange/CalendarRange';
 import { type FormFieldProps } from '../FormField/FormField';
-export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>, Pick<CalendarRangeProps, 'disablePast' | 'disableFuture' | 'shouldDisableDate' | 'onChange' | 'value' | 'weekStartsOn' | 'disablePickers' | 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'changeDayLabel' | 'prevMonthIcon' | 'nextMonthIcon' | 'renderDayContent'>, HasRootRef<HTMLDivElement>, Omit<FormFieldProps, 'maxHeight'> {
+type DateTestsProps = {
+    day?: string;
+    month?: string;
+    year?: string;
+};
+export type DateRangeInputTestsProps = {
+    startDateTestsProps?: DateTestsProps;
+    endDateTestsProps?: DateTestsProps;
+};
+export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>, Pick<CalendarRangeProps, 'disablePast' | 'disableFuture' | 'shouldDisableDate' | 'onChange' | 'value' | 'weekStartsOn' | 'disablePickers' | 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'changeDayLabel' | 'prevMonthIcon' | 'nextMonthIcon' | 'renderDayContent'>, HasRootRef<HTMLDivElement>, Omit<FormFieldProps, 'maxHeight'>, DateRangeInputTestsProps {
+    calendarTestsProps?: CalendarRangeTestsProps;
     calendarPlacement?: PlacementWithAuto;
     closeOnChange?: boolean;
+    onCalendarOpenChanged?: (opened: boolean) => void;
     clearFieldLabel?: string;
     showCalendarLabel?: string;
     changeStartDayLabel?: string;
@@ -19,5 +30,6 @@ 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, renderDayContent, ...props }: DateRangeInputProps) => React.ReactNode;
+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, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps, ...props }: DateRangeInputProps) => React.ReactNode;
+export {};
 //# 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;AAS/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAEL,KAAK,kBAAkB,EAExB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAexE,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,GACf,kBAAkB,CACrB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;IACnC,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,ogBAmCxB,mBAAmB,KAAG,KAAK,CAAC,SAgN9B,CAAC"}
+{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAE7B,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAexE,KAAK,cAAc,GAAG;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,mBAAmB,CAAC,EAAE,cAAc,CAAC;IACrC,iBAAiB,CAAC,EAAE,cAAc,CAAC;CACpC,CAAC;AAEF,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,GACf,kBAAkB,CACrB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,wBAAwB;IAC1B,kBAAkB,CAAC,EAAE,uBAAuB,CAAC;IAC7C,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,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,ulBAuCxB,mBAAmB,KAAG,KAAK,CAAC,SAwN9B,CAAC"}

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

@@ -82,7 +82,7 @@ const getInternalValue = (value)=>{
     return newValue;
 };
 const DateRangeInput = (_param)=>{
-    var { shouldDisableDate, disableFuture, disablePast, value, onChange, calendarPlacement = 'bottom-start', style, className, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'Изменить день', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeStartDayLabel = 'Изменить день начала', changeStartMonthLabel = 'Изменить месяц начала', changeStartYearLabel = 'Изменить год начала', changeEndDayLabel = 'Изменить день окончания', changeEndMonthLabel = 'Изменить месяц окончания', changeEndYearLabel = 'Изменить год окончания', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', prevMonthIcon, nextMonthIcon, disableCalendar = false, renderDayContent } = _param, props = _object_without_properties._(_param, [
+    var { shouldDisableDate, disableFuture, disablePast, value, onChange, calendarPlacement = 'bottom-start', style, className, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'Изменить день', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeStartDayLabel = 'Изменить день начала', changeStartMonthLabel = 'Изменить месяц начала', changeStartYearLabel = 'Изменить год начала', changeEndDayLabel = 'Изменить день окончания', changeEndMonthLabel = 'Изменить месяц окончания', changeEndYearLabel = 'Изменить год окончания', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', prevMonthIcon, nextMonthIcon, disableCalendar = false, onCalendarOpenChanged, renderDayContent, calendarTestsProps, startDateTestsProps, endDateTestsProps } = _param, props = _object_without_properties._(_param, [
         "shouldDisableDate",
         "disableFuture",
         "disablePast",
@@ -115,7 +115,11 @@ const DateRangeInput = (_param)=>{
         "prevMonthIcon",
         "nextMonthIcon",
         "disableCalendar",
-        "renderDayContent"
+        "onCalendarOpenChanged",
+        "renderDayContent",
+        "calendarTestsProps",
+        "startDateTestsProps",
+        "endDateTestsProps"
     ]);
     const daysStartRef = _react.useRef(null);
     const monthsStartRef = _react.useRef(null);
@@ -186,7 +190,8 @@ const DateRangeInput = (_param)=>{
         onChange,
         onInternalValueChange,
         getInternalValue,
-        value
+        value,
+        onCalendarOpenChanged
     });
     const { sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
     const handleRootRef = (0, _useExternRef.useExternRef)(rootRef, getRootRef);
@@ -244,7 +249,8 @@ const DateRangeInput = (_param)=>{
                         index: 0,
                         onElementSelect: setFocusedElement,
                         value: internalValue[0],
-                        label: changeStartDayLabel
+                        label: changeStartDayLabel,
+                        "data-testid": startDateTestsProps === null || startDateTestsProps === void 0 ? void 0 : startDateTestsProps.day
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
                         children: "."
@@ -255,7 +261,8 @@ const DateRangeInput = (_param)=>{
                         index: 1,
                         onElementSelect: setFocusedElement,
                         value: internalValue[1],
-                        label: changeStartMonthLabel
+                        label: changeStartMonthLabel,
+                        "data-testid": startDateTestsProps === null || startDateTestsProps === void 0 ? void 0 : startDateTestsProps.month
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
                         children: "."
@@ -266,7 +273,8 @@ const DateRangeInput = (_param)=>{
                         index: 2,
                         onElementSelect: setFocusedElement,
                         value: internalValue[2],
-                        label: changeStartYearLabel
+                        label: changeStartYearLabel,
+                        "data-testid": startDateTestsProps === null || startDateTestsProps === void 0 ? void 0 : startDateTestsProps.year
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
                         children: ' — '
@@ -277,7 +285,8 @@ const DateRangeInput = (_param)=>{
                         index: 3,
                         onElementSelect: setFocusedElement,
                         value: internalValue[3],
-                        label: changeEndDayLabel
+                        label: changeEndDayLabel,
+                        "data-testid": endDateTestsProps === null || endDateTestsProps === void 0 ? void 0 : endDateTestsProps.day
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
                         children: "."
@@ -288,7 +297,8 @@ const DateRangeInput = (_param)=>{
                         index: 4,
                         onElementSelect: setFocusedElement,
                         value: internalValue[4],
-                        label: changeEndMonthLabel
+                        label: changeEndMonthLabel,
+                        "data-testid": endDateTestsProps === null || endDateTestsProps === void 0 ? void 0 : endDateTestsProps.month
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_InputLikeDivider.InputLikeDivider, {
                         children: "."
@@ -299,7 +309,8 @@ const DateRangeInput = (_param)=>{
                         index: 5,
                         onElementSelect: setFocusedElement,
                         value: internalValue[5],
-                        label: changeEndYearLabel
+                        label: changeEndYearLabel,
+                        "data-testid": endDateTestsProps === null || endDateTestsProps === void 0 ? void 0 : endDateTestsProps.year
                     })
                 ]
             }),
@@ -307,7 +318,7 @@ const DateRangeInput = (_param)=>{
                 targetRef: rootRef,
                 offsetByMainAxis: 8,
                 placement: calendarPlacement,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CalendarRange.CalendarRange, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CalendarRange.CalendarRange, _object_spread._({
                     value: value,
                     onChange: onCalendarChange,
                     disablePast: disablePast,
@@ -324,7 +335,7 @@ const DateRangeInput = (_param)=>{
                     prevMonthIcon: prevMonthIcon,
                     nextMonthIcon: nextMonthIcon,
                     renderDayContent: renderDayContent
-                })
+                }, calendarTestsProps))
             })
         ]
     }));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isAfter } from 'date-fns';\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 type { HasRootRef } from '../../types';\nimport {\n  CalendarRange,\n  type CalendarRangeProps,\n  type DateRangeType,\n} from '../CalendarRange/CalendarRange';\nimport { FormField, type 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 { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  compact: styles['DateRangeInput--sizeY-compact'],\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'changeDayLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'renderDayContent'\n    >,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'> {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldLabel?: string;\n  showCalendarLabel?: string;\n  changeStartDayLabel?: string;\n  changeStartMonthLabel?: string;\n  changeStartYearLabel?: string;\n  changeEndDayLabel?: string;\n  changeEndMonthLabel?: string;\n  changeEndYearLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeDayLabel = 'Изменить день',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeStartDayLabel = 'Изменить день начала',\n  changeStartMonthLabel = 'Изменить месяц начала',\n  changeStartYearLabel = 'Изменить год начала',\n  changeEndDayLabel = 'Изменить день окончания',\n  changeEndMonthLabel = 'Изменить месяц окончания',\n  changeEndYearLabel = 'Изменить год окончания',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  renderDayContent,\n  ...props\n}: DateRangeInputProps): React.ReactNode => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'dd.MM.yyyy';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue: DateRangeType | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" onClick={clear}>\n            <VisuallyHidden>{clearFieldLabel}</VisuallyHidden>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" onClick={openCalendar}>\n            <VisuallyHidden>{showCalendarLabel}</VisuallyHidden>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={\n          value\n            ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${\n                value[1] ? format(value[1], 'dd.MM.yyyy') : ''\n              }`\n            : ''\n        }\n      />\n      <Text className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          label={changeStartDayLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          label={changeStartMonthLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          label={changeStartYearLabel}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          label={changeEndDayLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          label={changeEndMonthLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          label={changeEndYearLabel}\n        />\n      </Text>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetByMainAxis={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            changeDayLabel={changeDayLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n            renderDayContent={renderDayContent}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["DateRangeInput","sizeYClassNames","none","compact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","shouldDisableDate","disableFuture","disablePast","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","renderDayContent","props","daysStartRef","React","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","isMatch","valueExists","Array","isArray","now","Date","start","parse","end","isAfter","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useDateInput","maxElement","sizeY","useAdaptivity","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","after","IconButton","hoverMode","VisuallyHidden","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","Text","onKeyDown","InputLike","onElementSelect","label","InputLikeDivider","Popper","targetRef","offsetByMainAxis","placement","CalendarRange","onClose"],"mappings":";;;;+BA6GaA;;;eAAAA;;;;;;;;iEA7GU;uBAC4B;sBACxB;yBACH;+BACM;8BACD;8BACA;8BACA;sBACU;+BAOhC;2BACwC;4BACpB;2BACD;kCACO;wBACV;sBACF;gCACU;AAI/B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAqCA,MAAMC,iBAAiB,CAACC;IACtB,IAAIC,SAAS;IACb,IAAIC,MAAM;IACV,IAAIC,MAAM;IAEV,OAAQH;QACN,KAAK;QACL,KAAK;YACHG,MAAM;YACN;QACF,KAAK;QACL,KAAK;YACHA,MAAM;YACN;QACF,KAAK;QACL,KAAK;YACHA,MAAM;YACND,MAAM;YACND,SAAS;YACT;IACJ;IAEA,OAAO;QAAEA;QAAQC;QAAKC;IAAI;AAC5B;AAEA,MAAMC,mBAAmB,CAACC;IACxB,MAAMC,WAAW;QAAC;QAAI;QAAI;QAAI;QAAI;QAAI;KAAG;IACzC,IAAID,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,EAAE;QACdC,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACG,OAAO,IAAIC,QAAQ,CAAC,GAAG;QACrDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACK,QAAQ,KAAK,GAAGD,QAAQ,CAAC,GAAG;QAC1DH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACM,WAAW,IAAIF,QAAQ,CAAC,GAAG;IAC3D;IACA,IAAIJ,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,EAAE;QACdC,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACG,OAAO,IAAIC,QAAQ,CAAC,GAAG;QACrDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACK,QAAQ,KAAK,GAAGD,QAAQ,CAAC,GAAG;QAC1DH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,KAAK,CAAC,EAAE,CAACM,WAAW,IAAIF,QAAQ,CAAC,GAAG;IAC3D;IACA,OAAOH;AACT;AAKO,MAAMX,iBAAiB;QAAC,EAC7BiB,iBAAiB,EACjBC,aAAa,EACbC,WAAW,EACXT,KAAK,EACLU,QAAQ,EACRC,oBAAoB,cAAc,EAClCC,KAAK,EACLC,SAAS,EACTC,gBAAgB,IAAI,EACpBC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,iBAAiB,kBAAkB,EACnCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,eAAe,EAChCC,mBAAmB,gBAAgB,EACnCC,kBAAkB,cAAc,EAChCC,sBAAsB,sBAAsB,EAC5CC,wBAAwB,uBAAuB,EAC/CC,uBAAuB,qBAAqB,EAC5CC,oBAAoB,yBAAyB,EAC7CC,sBAAsB,0BAA0B,EAChDC,qBAAqB,wBAAwB,EAC7CC,kBAAkB,eAAe,EACjCC,oBAAoB,oBAAoB,EACxCC,aAAa,EACbC,aAAa,EACbC,kBAAkB,KAAK,EACvBC,gBAAgB,EAEI,WADjBC;QAjCHhC;QACAC;QACAC;QACAT;QACAU;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAeC,OAAMC,MAAM,CAAkB;IACnD,MAAMC,iBAAiBF,OAAMC,MAAM,CAAkB;IACrD,MAAME,gBAAgBH,OAAMC,MAAM,CAAkB;IACpD,MAAMG,aAAaJ,OAAMC,MAAM,CAAkB;IACjD,MAAMI,eAAeL,OAAMC,MAAM,CAAkB;IACnD,MAAMK,cAAcN,OAAMC,MAAM,CAAkB;IAElD,MAAMM,wBAAwBP,OAAMQ,WAAW,CAC7C,CAACC;QACC,IAAIC,eAAe;QACnB,IAAIC,aAAa;QACjB,IAAK,IAAIC,IAAI,GAAGA,KAAK,GAAGA,KAAK,EAAG;YAC9B,IAAIH,aAAa,CAACG,EAAE,CAACzD,MAAM,GAAGF,eAAe2D,GAAGzD,MAAM,EAAE;gBACtDuD,eAAe;YACjB;QACF;QACA,IAAK,IAAIE,IAAI,GAAGA,KAAK,GAAGA,KAAK,EAAG;YAC9B,IAAIH,aAAa,CAACG,EAAE,CAACzD,MAAM,GAAGF,eAAe2D,GAAGzD,MAAM,EAAE;gBACtDwD,aAAa;YACf;QACF;QACA,MAAME,sBAAsB,CAAC,EAAEJ,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC;QACzF,MAAMK,oBAAoB,CAAC,EAAEL,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC;QACvF,MAAMM,OAAO;QAEb,IAAI,CAACC,IAAAA,aAAO,EAACH,qBAAqBE,OAAO;YACvCL,eAAe;QACjB;QACA,IAAI,CAACM,IAAAA,aAAO,EAACF,mBAAmBC,OAAO;YACrCJ,aAAa;QACf;QAEA,IAAI,CAACD,gBAAgB,CAACC,YAAY;YAChC;QACF;QAEA,MAAMM,cAAcC,MAAMC,OAAO,CAAC5D;QAClC,MAAM6D,MAAM,IAAIC;QAChB,MAAMC,QAAQZ,eACVa,IAAAA,WAAK,EAACV,qBAAqBE,MAAM,AAACE,gBAAe1D,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,KAAK6D,OAChE;QACJ,MAAMI,MAAMb,aACRY,IAAAA,WAAK,EAACT,mBAAmBC,MAAM,AAACE,gBAAe1D,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,KAAK6D,OAC9D;QACJ,IAAIE,SAASE,OAAOC,IAAAA,gBAAO,EAACD,KAAKF,QAAQ;YACvCrD,qBAAAA,+BAAAA,SAAW;gBAACqD;gBAAOE;aAAI;QACzB;IACF,GACA;QAACvD;QAAUV;KAAM;IAGnB,MAAMmE,OAAO1B,OAAM2B,OAAO,CACxB,IAAM;YAAC5B;YAAcG;YAAgBC;YAAeC;YAAYC;YAAcC;SAAY,EAC1F;QAACP;QAAcG;QAAgBC;QAAeC;QAAYC;QAAcC;KAAY;IAGtF,MAAM,EACJsB,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,YAAY,EACZC,aAAa,EACbvB,aAAa,EACbwB,aAAa,EACbC,iBAAiB,EACjBC,gBAAgB,EAChBC,KAAK,EACLC,oBAAoB,EACrB,GAAGC,IAAAA,0BAAY,EAAC;QACfC,YAAY;QACZb;QACAjD;QACAC;QACAzB;QACAgB;QACAsC;QACAjD;QACAC;IACF;IAEA,MAAM,EAAEiF,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMC,gBAAgBC,IAAAA,0BAAY,EAACf,SAASrD;IAE5C,MAAMqE,mBAAmB5C,OAAMQ,WAAW,CACxC,CAAChD;QACCS,qBAAAA,+BAAAA,SAAWT;QACX,IAAIa,kBAAiBb,qBAAAA,+BAAAA,QAAU,CAAC,EAAE,KAAIA,QAAQ,CAAC,EAAE,MAAKD,kBAAAA,4BAAAA,KAAO,CAAC,EAAE,GAAE;YAChE8E;QACF;IACF,GACA;QAACpE;QAAUI;QAAed;QAAO8E;KAAqB;IAGxD,qBACE,sBAACQ,oBAAS;QACR1E,OAAOA;QACPC,WAAW0E,IAAAA,gBAAU,EAACN,UAAU,aAAa1F,eAAe,CAAC0F,MAAM,EAAEpE;QACrEG,YAAYmE;QACZK,OACExF,sBACE,sBAACyF,sBAAU;YAACC,WAAU;YAAUtE,SAASyD;;8BACvC,qBAACc,8BAAc;8BAAE1D;;8BACjB,qBAAC2D,kBAAW;;2BAGd,sBAACH,sBAAU;YAACC,WAAU;YAAUtE,SAASoD;;8BACvC,qBAACmB,8BAAc;8BAAEzD;;8BACjB,qBAAC2D,4BAAqB;;;QAI5B1E,UAAUA;QACVC,SAAS0E,IAAAA,0BAAY,EAAClB,kBAAkBxD;QACxCC,SAASyE,IAAAA,0BAAY,EAAClB,kBAAkBvD;OACpCkB;;0BAEJ,qBAACwD;gBACCC,MAAK;gBACL/E,MAAMA;gBACNjB,OACEA,QACI,CAAC,EAAEA,KAAK,CAAC,EAAE,GAAGiG,IAAAA,YAAM,EAACjG,KAAK,CAAC,EAAE,EAAE,gBAAgB,GAAG,GAAG,EACnDA,KAAK,CAAC,EAAE,GAAGiG,IAAAA,YAAM,EAACjG,KAAK,CAAC,EAAE,EAAE,gBAAgB,GAC7C,CAAC,GACF;;0BAGR,sBAACkG,UAAI;gBAACrF,SAAS;gBAAuCsF,WAAWzB;;kCAC/D,qBAAC0B,oBAAS;wBACRxG,QAAQ;wBACRoB,YAAYwB;wBACZ7C,OAAO;wBACP0G,iBAAiB1B;wBACjB3E,OAAOkD,aAAa,CAAC,EAAE;wBACvBoD,OAAO3E;;kCAET,qBAAC4E,kCAAgB;kCAAC;;kCAClB,qBAACH,oBAAS;wBACRxG,QAAQ;wBACRoB,YAAY2B;wBACZhD,OAAO;wBACP0G,iBAAiB1B;wBACjB3E,OAAOkD,aAAa,CAAC,EAAE;wBACvBoD,OAAO1E;;kCAET,qBAAC2E,kCAAgB;kCAAC;;kCAClB,qBAACH,oBAAS;wBACRxG,QAAQ;wBACRoB,YAAY4B;wBACZjD,OAAO;wBACP0G,iBAAiB1B;wBACjB3E,OAAOkD,aAAa,CAAC,EAAE;wBACvBoD,OAAOzE;;kCAET,qBAAC0E,kCAAgB;kCAAE;;kCACnB,qBAACH,oBAAS;wBACRxG,QAAQ;wBACRoB,YAAY6B;wBACZlD,OAAO;wBACP0G,iBAAiB1B;wBACjB3E,OAAOkD,aAAa,CAAC,EAAE;wBACvBoD,OAAOxE;;kCAET,qBAACyE,kCAAgB;kCAAC;;kCAClB,qBAACH,oBAAS;wBACRxG,QAAQ;wBACRoB,YAAY8B;wBACZnD,OAAO;wBACP0G,iBAAiB1B;wBACjB3E,OAAOkD,aAAa,CAAC,EAAE;wBACvBoD,OAAOvE;;kCAET,qBAACwE,kCAAgB;kCAAC;;kCAClB,qBAACH,oBAAS;wBACRxG,QAAQ;wBACRoB,YAAY+B;wBACZpD,OAAO;wBACP0G,iBAAiB1B;wBACjB3E,OAAOkD,aAAa,CAAC,EAAE;wBACvBoD,OAAOtE;;;;YAGVuC,QAAQ,CAAClC,iCACR,qBAACmE,cAAM;gBAACC,WAAWpC;gBAASqC,kBAAkB;gBAAGC,WAAWhG;0BAC1D,cAAA,qBAACiG,4BAAa;oBACZ5G,OAAOA;oBACPU,UAAU2E;oBACV5E,aAAaA;oBACbD,eAAeA;oBACfD,mBAAmBA;oBACnBsG,SAASpC;oBACTzD,YAAYsD;oBACZvD,gBAAgBA;oBAChBO,gBAAgBA;oBAChBC,gBAAgBA;oBAChBE,kBAAkBA;oBAClBC,iBAAiBA;oBACjBF,gBAAgBA;oBAChBW,eAAeA;oBACfC,eAAeA;oBACfE,kBAAkBA;;;;;AAM9B"}
+{"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isAfter } from 'date-fns';\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 type { HasRootRef } from '../../types';\nimport {\n  CalendarRange,\n  type CalendarRangeProps,\n  type CalendarRangeTestsProps,\n  type DateRangeType,\n} from '../CalendarRange/CalendarRange';\nimport { FormField, type 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 { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  compact: styles['DateRangeInput--sizeY-compact'],\n};\n\ntype DateTestsProps = {\n  day?: string;\n  month?: string;\n  year?: string;\n};\n\nexport type DateRangeInputTestsProps = {\n  startDateTestsProps?: DateTestsProps;\n  endDateTestsProps?: DateTestsProps;\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'changeDayLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'renderDayContent'\n    >,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'>,\n    DateRangeInputTestsProps {\n  calendarTestsProps?: CalendarRangeTestsProps;\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  onCalendarOpenChanged?: (opened: boolean) => void;\n  clearFieldLabel?: string;\n  showCalendarLabel?: string;\n  changeStartDayLabel?: string;\n  changeStartMonthLabel?: string;\n  changeStartYearLabel?: string;\n  changeEndDayLabel?: string;\n  changeEndMonthLabel?: string;\n  changeEndYearLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeDayLabel = 'Изменить день',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeStartDayLabel = 'Изменить день начала',\n  changeStartMonthLabel = 'Изменить месяц начала',\n  changeStartYearLabel = 'Изменить год начала',\n  changeEndDayLabel = 'Изменить день окончания',\n  changeEndMonthLabel = 'Изменить месяц окончания',\n  changeEndYearLabel = 'Изменить год окончания',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  onCalendarOpenChanged,\n  renderDayContent,\n  calendarTestsProps,\n  startDateTestsProps,\n  endDateTestsProps,\n  ...props\n}: DateRangeInputProps): React.ReactNode => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'dd.MM.yyyy';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n    onCalendarOpenChanged,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue: DateRangeType | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" onClick={clear}>\n            <VisuallyHidden>{clearFieldLabel}</VisuallyHidden>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" onClick={openCalendar}>\n            <VisuallyHidden>{showCalendarLabel}</VisuallyHidden>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={\n          value\n            ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${\n                value[1] ? format(value[1], 'dd.MM.yyyy') : ''\n              }`\n            : ''\n        }\n      />\n      <Text className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          label={changeStartDayLabel}\n          data-testid={startDateTestsProps?.day}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          label={changeStartMonthLabel}\n          data-testid={startDateTestsProps?.month}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          label={changeStartYearLabel}\n          data-testid={startDateTestsProps?.year}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          label={changeEndDayLabel}\n          data-testid={endDateTestsProps?.day}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          label={changeEndMonthLabel}\n          data-testid={endDateTestsProps?.month}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          label={changeEndYearLabel}\n          data-testid={endDateTestsProps?.year}\n        />\n      </Text>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetByMainAxis={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            changeDayLabel={changeDayLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n            renderDayContent={renderDayContent}\n            {...calendarTestsProps}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["DateRangeInput","sizeYClassNames","none","compact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","shouldDisableDate","disableFuture","disablePast","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","onCalendarOpenChanged","renderDayContent","calendarTestsProps","startDateTestsProps","endDateTestsProps","props","daysStartRef","React","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","isMatch","valueExists","Array","isArray","now","Date","start","parse","end","isAfter","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useDateInput","maxElement","sizeY","useAdaptivity","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","after","IconButton","hoverMode","VisuallyHidden","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","Text","onKeyDown","InputLike","onElementSelect","label","data-testid","day","InputLikeDivider","month","year","Popper","targetRef","offsetByMainAxis","placement","CalendarRange","onClose"],"mappings":"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"}