@vkontakte/vkui 8.1.3 → 8.2.1

package/dist/components/CalendarTime/CalendarTime.js

@@ -7,35 +7,36 @@ import { Keys, pressedKey } from "../../lib/accessibility.js";
 import { setHours, setMinutes } from "../../lib/date.js";
 import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider.js";
 import { Button } from "../Button/Button.js";
-import { CalendarTimePicker } from "./CalendarTimePicker.js";
-const hours = [];
-for(let i = 0; i < 24; i += 1){
-    hours.push({
-        value: i,
-        label: String(i).padStart(2, '0')
-    });
-}
-const minutes = [];
-for(let i = 0; i < 60; i += 1){
-    minutes.push({
-        value: i,
-        label: String(i).padStart(2, '0')
-    });
+import { CalendarTimePicker, padStartTimeValue } from "./CalendarTimePicker.js";
+const MAX_HOURS = 23;
+const MAX_MINUTES = 59;
+function generateLabels(min, max) {
+    const array = new Array(Math.ceil(max - min + 1));
+    for(let i = min; i <= max; i += 1){
+        const value = padStartTimeValue(i);
+        array[i - min] = {
+            value,
+            label: value
+        };
+    }
+    return array;
 }
-export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLabel, changeMinutesLabel, setHours: setHoursFn = setHours, setMinutes: setMinutesFn = setMinutes, isDayDisabled, doneButtonText = 'Готово', doneButtonDisabled = false, doneButtonShow = true, minutesTestId, hoursTestId, doneButtonTestId, DoneButton })=>{
+const hours = generateLabels(0, MAX_HOURS);
+const minutes = generateLabels(0, MAX_MINUTES);
+export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLabel, changeMinutesLabel, setHours: setHoursFn = setHours, setMinutes: setMinutesFn = setMinutes, doneButtonText = 'Готово', doneButtonDisabled = false, doneButtonShow = true, minutesTestId, hoursTestId, doneButtonTestId, DoneButton, isDayDisabled })=>{
     const hoursInputRef = useRef(null);
     const minutesInputRef = useRef(null);
     const doneButtonRef = useRef(null);
     const localHours = isDayDisabled ? hours.map((hour)=>{
         return {
             ...hour,
-            disabled: isDayDisabled(setHoursFn(value, hour.value), true)
+            disabled: isDayDisabled(setHoursFn(value, Number(hour.value)), true)
         };
     }) : hours;
     const localMinutes = isDayDisabled ? minutes.map((minute)=>{
         return {
             ...minute,
-            disabled: isDayDisabled(setMinutesFn(value, minute.value), true)
+            disabled: isDayDisabled(setMinutesFn(value, Number(minute.value)), true)
         };
     }) : minutes;
     const onPickerKeyDown = (e)=>{
@@ -60,14 +61,8 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
             nextStep.current?.focus();
         }
     };
-    const stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback((event, isOpen)=>{
-        if (isOpen && event.key === 'Escape') {
-            event.stopPropagation();
-        }
-    }, []);
-    const onSelectInputKeyDown = (e, isOpen)=>{
-        onPickerKeyDown(e);
-        stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen(e, isOpen);
+    const onHoursInputEnd = ()=>{
+        minutesInputRef.current?.focus();
     };
     const renderDoneButton = ()=>{
         const ButtonComponent = DoneButton ?? Button;
@@ -85,31 +80,47 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
     return /*#__PURE__*/ _jsxs("div", {
         className: classNames("vkuiCalendarTime__host", !doneButtonShow && "vkuiCalendarTime__host__withoutDone"),
         children: [
-            /*#__PURE__*/ _jsx(CalendarTimePicker, {
-                value: value,
-                getNumericValue: (v)=>v.getHours(),
-                onChange: onChange,
-                options: localHours,
-                setTime: setHoursFn,
-                onInputKeyDown: onSelectInputKeyDown,
-                inputRef: hoursInputRef,
-                inputLabel: changeHoursLabel,
-                inputTestId: hoursTestId
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "vkuiCalendarTime__divider",
-                children: ":"
-            }),
-            /*#__PURE__*/ _jsx(CalendarTimePicker, {
-                value: value,
-                getNumericValue: (v)=>v.getMinutes(),
-                onChange: onChange,
-                options: localMinutes,
-                setTime: setMinutesFn,
-                onInputKeyDown: onSelectInputKeyDown,
-                inputRef: minutesInputRef,
-                inputLabel: changeMinutesLabel,
-                inputTestId: minutesTestId
+            /*#__PURE__*/ _jsxs(AdaptivityProvider, {
+                density: "compact",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "vkuiCalendarTime__picker",
+                        children: /*#__PURE__*/ _jsx(CalendarTimePicker, {
+                            valueDate: value,
+                            value: value.getHours(),
+                            onChange: onChange,
+                            options: localHours,
+                            setTime: setHoursFn,
+                            onKeyDown: onPickerKeyDown,
+                            inputRef: hoursInputRef,
+                            inputLabel: changeHoursLabel,
+                            inputTestId: hoursTestId,
+                            maxValue: MAX_HOURS,
+                            onInputEnd: onHoursInputEnd,
+                            isDayDisabled: isDayDisabled
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "vkuiCalendarTime__divider",
+                        children: ":"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "vkuiCalendarTime__picker",
+                        children: /*#__PURE__*/ _jsx(CalendarTimePicker, {
+                            valueDate: value,
+                            value: value.getMinutes(),
+                            onChange: onChange,
+                            options: localMinutes,
+                            setTime: setMinutesFn,
+                            onKeyDown: onPickerKeyDown,
+                            inputRef: minutesInputRef,
+                            inputLabel: changeMinutesLabel,
+                            inputTestId: minutesTestId,
+                            maxValue: MAX_MINUTES,
+                            isDayDisabled: isDayDisabled
+                        })
+                    })
+                ]
             }),
             doneButtonShow && /*#__PURE__*/ _jsx("div", {
                 className: "vkuiCalendarTime__button",

package/dist/components/CalendarTime/CalendarTime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button, type ButtonProps } from '../Button/Button';\nimport { CalendarTimePicker } from './CalendarTimePicker';\nimport styles from './CalendarTime.module.css';\n\nexport type CalendarTimeTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора часа в календаре.\n   */\n  hoursTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора минут в календаре.\n   */\n  minutesTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки \"Готово\" в календаре.\n   */\n  doneButtonTestId?: string | undefined;\n};\n\nexport type CalendarDoneButtonProps = {\n  /**\n   * Кастомное отображение кнопки `\"Done\"`.\n   */\n  DoneButton?: React.ComponentType<ButtonProps> | undefined;\n  /**\n   * Текст отображаемый в кнопке `\"Done\"`.\n   */\n  doneButtonText?: string | undefined;\n  /**\n   * Управление отображением кнопки `\"Done\"`.\n   */\n  doneButtonShow?: boolean | undefined;\n  /**\n   * Блокировка взаимодействия с кнопкой \"Done\".\n   */\n  doneButtonDisabled?: boolean | undefined;\n  /**\n   * Обработки нажатия на кнопку `\"Done\"`.\n   */\n  onDoneButtonClick?: (() => void) | undefined;\n};\n\nexport interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneButtonProps {\n  /**\n   * Отображаемая дата.\n   */\n  value: Date;\n  /**\n   * Текст выпадающего списка с выбором часов. Делает его доступным для ассистивных технологий.\n   */\n  changeHoursLabel?: string | undefined;\n  /**\n   * Текст выпадающего списка с выбором минут. Делает его доступным для ассистивных технологий.\n   */\n  changeMinutesLabel?: string | undefined;\n  /**\n   * Обработчик изменения времени.\n   */\n  onChange?: ((value: Date) => void) | undefined;\n  /**\n   * Функция установки часа (для таймзонно-зависимого календаря).\n   */\n  setHours?: ((date: Date, hours: number) => Date) | undefined;\n  /**\n   * Функция установки минут (для таймзонно-зависимого календаря).\n   */\n  setMinutes?: ((date: Date, minutes: number) => Date) | undefined;\n  /**\n   * Функция для проверки блокировки выбора даты и времени.\n   */\n  isDayDisabled?: ((day: Date, withTime?: boolean) => boolean) | undefined;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n  value,\n  onChange,\n  onDoneButtonClick,\n  changeHoursLabel,\n  changeMinutesLabel,\n  setHours: setHoursFn = setHours,\n  setMinutes: setMinutesFn = setMinutes,\n  isDayDisabled,\n  doneButtonText = 'Готово',\n  doneButtonDisabled = false,\n  doneButtonShow = true,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n  DoneButton,\n}: CalendarTimeProps): React.ReactNode => {\n  const hoursInputRef = useRef<HTMLInputElement | null>(null);\n  const minutesInputRef = useRef<HTMLInputElement | null>(null);\n  const doneButtonRef = useRef<HTMLButtonElement | null>(null);\n\n  const localHours = isDayDisabled\n    ? hours.map((hour) => {\n        return { ...hour, disabled: isDayDisabled(setHoursFn(value, hour.value), true) };\n      })\n    : hours;\n\n  const localMinutes = isDayDisabled\n    ? minutes.map((minute) => {\n        return { ...minute, disabled: isDayDisabled(setMinutesFn(value, minute.value), true) };\n      })\n    : minutes;\n\n  const onPickerKeyDown = (e: React.KeyboardEvent) => {\n    const key = pressedKey(e);\n    /* Мы хотим иметь возможность быстро, по Enter перемещаться между\n     * селектами с часами и минутами, также как мы это делаем по нажатию на Tab */\n    if (key !== Keys.ENTER) {\n      return;\n    }\n\n    const steps = [hoursInputRef, minutesInputRef, doneButtonRef].filter((ref) =>\n      Boolean(ref.current),\n    );\n    const currentStepIndex = steps.findIndex((step) => step.current === e.target);\n    const nextStepIndex = currentStepIndex + 1;\n    if (nextStepIndex >= steps.length) {\n      return;\n    }\n    const nextStep = steps[nextStepIndex];\n\n    if (nextStep.current) {\n      e.preventDefault();\n      nextStep.current?.focus();\n    }\n  };\n\n  const stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen = React.useCallback(\n    (event: React.KeyboardEvent, isOpen: boolean) => {\n      if (isOpen && event.key === 'Escape') {\n        event.stopPropagation();\n      }\n    },\n    [],\n  );\n\n  const onSelectInputKeyDown = (e: React.KeyboardEvent, isOpen: boolean) => {\n    onPickerKeyDown(e);\n    stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen(e, isOpen);\n  };\n\n  const renderDoneButton = () => {\n    const ButtonComponent = DoneButton ?? Button;\n    return (\n      <ButtonComponent\n        mode=\"secondary\"\n        onClick={onDoneButtonClick}\n        size=\"l\"\n        getRootRef={doneButtonRef}\n        onKeyDown={onPickerKeyDown}\n        disabled={doneButtonDisabled}\n        data-testid={doneButtonTestId}\n      >\n        {doneButtonText}\n      </ButtonComponent>\n    );\n  };\n\n  return (\n    <div className={classNames(styles.host, !doneButtonShow && styles.host__withoutDone)}>\n      <CalendarTimePicker\n        value={value}\n        getNumericValue={(v) => v.getHours()}\n        onChange={onChange}\n        options={localHours}\n        setTime={setHoursFn}\n        onInputKeyDown={onSelectInputKeyDown}\n        inputRef={hoursInputRef}\n        inputLabel={changeHoursLabel}\n        inputTestId={hoursTestId}\n      />\n      <div className={styles.divider}>:</div>\n      <CalendarTimePicker\n        value={value}\n        getNumericValue={(v) => v.getMinutes()}\n        onChange={onChange}\n        options={localMinutes}\n        setTime={setMinutesFn}\n        onInputKeyDown={onSelectInputKeyDown}\n        inputRef={minutesInputRef}\n        inputLabel={changeMinutesLabel}\n        inputTestId={minutesTestId}\n      />\n      {doneButtonShow && (\n        <div className={styles.button}>\n          <AdaptivityProvider density=\"compact\">{renderDoneButton()}</AdaptivityProvider>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useRef","React","classNames","Keys","pressedKey","setHours","setMinutes","AdaptivityProvider","Button","CalendarTimePicker","hours","i","push","value","label","String","padStart","minutes","CalendarTime","onChange","onDoneButtonClick","changeHoursLabel","changeMinutesLabel","setHoursFn","setMinutesFn","isDayDisabled","doneButtonText","doneButtonDisabled","doneButtonShow","minutesTestId","hoursTestId","doneButtonTestId","DoneButton","hoursInputRef","minutesInputRef","doneButtonRef","localHours","map","hour","disabled","localMinutes","minute","onPickerKeyDown","e","key","ENTER","steps","filter","ref","Boolean","current","currentStepIndex","findIndex","step","target","nextStepIndex","length","nextStep","preventDefault","focus","stopPropagationOfEscapeKeyboardEventWhenSelectIsOpen","useCallback","event","isOpen","stopPropagation","onSelectInputKeyDown","renderDoneButton","ButtonComponent","mode","onClick","size","getRootRef","onKeyDown","data-testid","div","className","getNumericValue","v","getHours","options","setTime","onInputKeyDown","inputRef","inputLabel","inputTestId","getMinutes","density"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { setHours, setMinutes } from '../../lib/date';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button, type ButtonProps } from '../Button/Button';\nimport { CalendarTimePicker, padStartTimeValue } from './CalendarTimePicker';\nimport styles from './CalendarTime.module.css';\n\nconst MAX_HOURS = 23;\nconst MAX_MINUTES = 59;\n\nfunction generateLabels(\n  min: number,\n  max: number,\n): Array<{\n  value: string;\n  label: string;\n}> {\n  const array = new Array(Math.ceil(max - min + 1));\n\n  for (let i = min; i <= max; i += 1) {\n    const value = padStartTimeValue(i);\n\n    array[i - min] = { value, label: value };\n  }\n\n  return array;\n}\n\nconst hours = generateLabels(0, MAX_HOURS);\n\nconst minutes = generateLabels(0, MAX_MINUTES);\n\nexport type CalendarTimeTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора часа в календаре.\n   */\n  hoursTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора минут в календаре.\n   */\n  minutesTestId?: string | undefined;\n  /**\n   * Передает атрибут `data-testid` для кнопки \"Готово\" в календаре.\n   */\n  doneButtonTestId?: string | undefined;\n};\n\nexport type CalendarDoneButtonProps = {\n  /**\n   * Кастомное отображение кнопки `\"Done\"`.\n   */\n  DoneButton?: React.ComponentType<ButtonProps> | undefined;\n  /**\n   * Текст отображаемый в кнопке `\"Done\"`.\n   */\n  doneButtonText?: string | undefined;\n  /**\n   * Управление отображением кнопки `\"Done\"`.\n   */\n  doneButtonShow?: boolean | undefined;\n  /**\n   * Блокировка взаимодействия с кнопкой \"Done\".\n   */\n  doneButtonDisabled?: boolean | undefined;\n  /**\n   * Обработки нажатия на кнопку `\"Done\"`.\n   */\n  onDoneButtonClick?: (() => void) | undefined;\n};\n\nexport interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneButtonProps {\n  /**\n   * Отображаемая дата.\n   */\n  value: Date;\n  /**\n   * Текст выпадающего списка с выбором часов. Делает его доступным для ассистивных технологий.\n   */\n  changeHoursLabel?: string | undefined;\n  /**\n   * Текст выпадающего списка с выбором минут. Делает его доступным для ассистивных технологий.\n   */\n  changeMinutesLabel?: string | undefined;\n  /**\n   * Обработчик изменения времени.\n   */\n  onChange?: ((value: Date) => void) | undefined;\n  /**\n   * Функция установки часа (для таймзонно-зависимого календаря).\n   */\n  setHours?: ((date: Date, hours: number) => Date) | undefined;\n  /**\n   * Функция установки минут (для таймзонно-зависимого календаря).\n   */\n  setMinutes?: ((date: Date, minutes: number) => Date) | undefined;\n  /**\n   * Функция для проверки блокировки выбора даты и времени.\n   */\n  isDayDisabled?: ((day: Date, withTime?: boolean) => boolean) | undefined;\n}\n\nexport const CalendarTime = ({\n  value,\n  onChange,\n  onDoneButtonClick,\n  changeHoursLabel,\n  changeMinutesLabel,\n  setHours: setHoursFn = setHours,\n  setMinutes: setMinutesFn = setMinutes,\n  doneButtonText = 'Готово',\n  doneButtonDisabled = false,\n  doneButtonShow = true,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n  DoneButton,\n  isDayDisabled,\n}: CalendarTimeProps): React.ReactNode => {\n  const hoursInputRef = useRef<HTMLInputElement | null>(null);\n  const minutesInputRef = useRef<HTMLInputElement | null>(null);\n  const doneButtonRef = useRef<HTMLButtonElement | null>(null);\n\n  const localHours = isDayDisabled\n    ? hours.map((hour) => {\n        return { ...hour, disabled: isDayDisabled(setHoursFn(value, Number(hour.value)), true) };\n      })\n    : hours;\n\n  const localMinutes = isDayDisabled\n    ? minutes.map((minute) => {\n        return {\n          ...minute,\n          disabled: isDayDisabled(setMinutesFn(value, Number(minute.value)), true),\n        };\n      })\n    : minutes;\n\n  const onPickerKeyDown = (e: React.KeyboardEvent) => {\n    const key = pressedKey(e);\n    /* Мы хотим иметь возможность быстро, по Enter перемещаться между\n     * селектами с часами и минутами, также как мы это делаем по нажатию на Tab */\n    if (key !== Keys.ENTER) {\n      return;\n    }\n\n    const steps = [hoursInputRef, minutesInputRef, doneButtonRef].filter((ref) =>\n      Boolean(ref.current),\n    );\n    const currentStepIndex = steps.findIndex((step) => step.current === e.target);\n    const nextStepIndex = currentStepIndex + 1;\n    if (nextStepIndex >= steps.length) {\n      return;\n    }\n    const nextStep = steps[nextStepIndex];\n\n    if (nextStep.current) {\n      e.preventDefault();\n      nextStep.current?.focus();\n    }\n  };\n\n  const onHoursInputEnd = () => {\n    minutesInputRef.current?.focus();\n  };\n\n  const renderDoneButton = () => {\n    const ButtonComponent = DoneButton ?? Button;\n    return (\n      <ButtonComponent\n        mode=\"secondary\"\n        onClick={onDoneButtonClick}\n        size=\"l\"\n        getRootRef={doneButtonRef}\n        onKeyDown={onPickerKeyDown}\n        disabled={doneButtonDisabled}\n        data-testid={doneButtonTestId}\n      >\n        {doneButtonText}\n      </ButtonComponent>\n    );\n  };\n\n  return (\n    <div className={classNames(styles.host, !doneButtonShow && styles.host__withoutDone)}>\n      <AdaptivityProvider density=\"compact\">\n        <div className={styles.picker}>\n          <CalendarTimePicker\n            valueDate={value}\n            value={value.getHours()}\n            onChange={onChange}\n            options={localHours}\n            setTime={setHoursFn}\n            onKeyDown={onPickerKeyDown}\n            inputRef={hoursInputRef}\n            inputLabel={changeHoursLabel}\n            inputTestId={hoursTestId}\n            maxValue={MAX_HOURS}\n            onInputEnd={onHoursInputEnd}\n            isDayDisabled={isDayDisabled}\n          />\n        </div>\n        <div className={styles.divider}>:</div>\n        <div className={styles.picker}>\n          <CalendarTimePicker\n            valueDate={value}\n            value={value.getMinutes()}\n            onChange={onChange}\n            options={localMinutes}\n            setTime={setMinutesFn}\n            onKeyDown={onPickerKeyDown}\n            inputRef={minutesInputRef}\n            inputLabel={changeMinutesLabel}\n            inputTestId={minutesTestId}\n            maxValue={MAX_MINUTES}\n            isDayDisabled={isDayDisabled}\n          />\n        </div>\n      </AdaptivityProvider>\n      {doneButtonShow && (\n        <div className={styles.button}>\n          <AdaptivityProvider density=\"compact\">{renderDoneButton()}</AdaptivityProvider>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useRef","React","classNames","Keys","pressedKey","setHours","setMinutes","AdaptivityProvider","Button","CalendarTimePicker","padStartTimeValue","MAX_HOURS","MAX_MINUTES","generateLabels","min","max","array","Array","Math","ceil","i","value","label","hours","minutes","CalendarTime","onChange","onDoneButtonClick","changeHoursLabel","changeMinutesLabel","setHoursFn","setMinutesFn","doneButtonText","doneButtonDisabled","doneButtonShow","minutesTestId","hoursTestId","doneButtonTestId","DoneButton","isDayDisabled","hoursInputRef","minutesInputRef","doneButtonRef","localHours","map","hour","disabled","Number","localMinutes","minute","onPickerKeyDown","e","key","ENTER","steps","filter","ref","Boolean","current","currentStepIndex","findIndex","step","target","nextStepIndex","length","nextStep","preventDefault","focus","onHoursInputEnd","renderDoneButton","ButtonComponent","mode","onClick","size","getRootRef","onKeyDown","data-testid","div","className","density","valueDate","getHours","options","setTime","inputRef","inputLabel","inputTestId","maxValue","onInputEnd","getMinutes"],"mappings":"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"}

package/dist/components/CalendarTime/CalendarTimePicker.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { type SelectProps } from '../CustomSelect/CustomSelect';
-interface CalendarTimePickerProps extends Pick<SelectProps, 'onInputKeyDown'> {
-    value: Date;
-    getNumericValue: (date: Date) => number;
-    options: Array<{
-        value: number;
+export declare function padStartTimeValue(value: Pick<string, 'toString'>): string;
+interface CalendarTimePickerProps {
+    valueDate: Date;
+    options: ReadonlyArray<{
+        value: string;
         label: string;
     }>;
     onChange?: ((value: Date) => void) | undefined;
@@ -12,7 +11,12 @@ interface CalendarTimePickerProps extends Pick<SelectProps, 'onInputKeyDown'> {
     inputRef: React.Ref<HTMLInputElement>;
     inputLabel?: string | undefined;
     inputTestId?: string | undefined;
+    value: number;
+    maxValue: number;
+    onInputEnd?: () => void;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    isDayDisabled?: ((day: Date, withTime?: boolean) => boolean) | undefined;
 }
-export declare const CalendarTimePicker: ({ value, getNumericValue, options, onChange, setTime, inputRef, inputLabel, inputTestId, onInputKeyDown, }: CalendarTimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CalendarTimePicker: ({ valueDate, value, options, onChange, setTime, inputRef, inputLabel, inputTestId, maxValue, onInputEnd, onKeyDown: onKeyDownProp, isDayDisabled, }: CalendarTimePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=CalendarTimePicker.d.ts.map

package/dist/components/CalendarTime/CalendarTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarTime/CalendarTimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAkB9E,UAAU,uBAAwB,SAAQ,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC;IAC3E,KAAK,EAAE,IAAI,CAAC;IACZ,eAAe,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;IACxC,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC/C,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAGD,eAAO,MAAM,kBAAkB,GAAI,4GAUhC,uBAAuB,4CAmDzB,CAAC"}
+{"version":3,"file":"CalendarTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarTime/CalendarTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiC/B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,MAAM,CAEzE;AAkBD,UAAU,uBAAuB;IAC/B,SAAS,EAAE,IAAI,CAAC;IAChB,OAAO,EAAE,aAAa,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC/C,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;CAC1E;AAGD,eAAO,MAAM,kBAAkB,GAAI,qJAahC,uBAAuB,4CAkGzB,CAAC"}

package/dist/components/CalendarTime/CalendarTimePicker.js

@@ -1,60 +1,120 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
 import * as React from "react";
-import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider.js";
-import { CustomSelect } from "../CustomSelect/CustomSelect.js";
-import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption.js";
-const selectFilterFn = ()=>true;
-const validateValue = (value, validValues)=>{
-    const numValue = Number(value);
-    return !isNaN(numValue) && validValues.some((v)=>v.value === numValue);
-};
-/* eslint-enable jsdoc/require-jsdoc */ export const CalendarTimePicker = ({ value, getNumericValue, options, onChange, setTime, inputRef, inputLabel, inputTestId, onInputKeyDown })=>{
-    const [inputValue, setInputValue] = useState(undefined);
-    const onBlur = React.useCallback(()=>{
-        setInputValue(undefined);
+import { clamp, overflow } from "../../helpers/math.js";
+import { useBooleanState } from "../../hooks/useBooleanState.js";
+import { useExternRef } from "../../hooks/useExternRef.js";
+import { Keys } from "../../lib/accessibility.js";
+import { isActiveElement } from "../../lib/dom.js";
+import { ComboBox } from "./ComboBox.js";
+function validateValueInput(event, maxValue) {
+    if (event.target.value === '') {
+        return event.target.value;
+    }
+    const inputValue = /\d\d?/.exec(event.target.value)?.[0] || '';
+    if (event.target.value !== inputValue) {
+        return inputValue;
+    }
+    const inputValueNumber = Number(inputValue);
+    if (isNaN(inputValueNumber)) {
+        return '';
+    }
+    const resultValueNumber = clamp(inputValueNumber, 0, maxValue);
+    if (inputValueNumber === resultValueNumber) {
+        return inputValue;
+    }
+    return resultValueNumber.toString();
+}
+export function padStartTimeValue(value) {
+    return value.toString().padStart(2, '0');
+}
+function newValueOnInputKeyDown(event, maxValue) {
+    if (!(event.target instanceof HTMLInputElement)) {
+        return '';
+    }
+    switch(event.key){
+        case Keys.ARROW_UP:
+            return padStartTimeValue(overflow(Number(event.target.value) + 1, 0, maxValue));
+        case Keys.ARROW_DOWN:
+            return padStartTimeValue(overflow(Number(event.target.value) - 1, 0, maxValue));
+    }
+    return event.target.value;
+}
+/* eslint-enable jsdoc/require-jsdoc */ export const CalendarTimePicker = ({ valueDate, value, options, onChange, setTime, inputRef, inputLabel, inputTestId, maxValue, onInputEnd, onKeyDown: onKeyDownProp, isDayDisabled })=>{
+    const ref = useExternRef(inputRef);
+    const [isInputFocused, onFocus, setInputBlur] = useBooleanState(false);
+    const [editableValue, setEditableValue] = React.useState(padStartTimeValue(value));
+    const updateValue = (newValue)=>{
+        const newDate = setTime(valueDate, Number(newValue));
+        if (isDayDisabled?.(newDate, true)) {
+            return;
+        }
+        setEditableValue(newValue);
+        onChange?.(newDate);
+    };
+    // Обработка ввода
+    const onInput = (event)=>{
+        const validateValue = validateValueInput(event, maxValue);
+        updateValue(validateValue);
+        if (validateValue.length > 1 && event.target.selectionStart) {
+            onInputEnd?.();
+        }
+    };
+    // Управление числом с клавиатуры стрелками вниз/вверх.
+    const onKeyDown = (event)=>{
+        const validateValue = newValueOnInputKeyDown(event, maxValue);
+        updateValue(validateValue);
+    };
+    // Обработка каретки если время уже задано
+    const onSelectionChange = React.useCallback((event)=>{
+        if (event.target instanceof HTMLInputElement) {
+            if (event.target.value.length > 1 && isActiveElement(event.target)) {
+                event.target.select();
+            }
+        }
     }, []);
-    const _onChange = React.useCallback((_, newValue)=>onChange?.(setTime(value, Number(newValue))), [
-        onChange,
-        setTime,
-        value
+    React.useEffect(()=>{
+        const el = ref.current;
+        el?.addEventListener('selectionchange', onSelectionChange);
+        return ()=>{
+            el?.removeEventListener('selectionchange', onSelectionChange);
+        };
+    }, [
+        onSelectionChange,
+        ref
     ]);
-    const onPickerValueChange = (e)=>{
-        const numericValue = e.target.value.replace(/\D/g, '');
-        setInputValue(numericValue);
-        if (validateValue(numericValue, options)) {
-            onChange?.(setTime(value, Number(numericValue)));
-        }
+    // Обработка ухода с поля ввода
+    const onBlur = ()=>{
+        setInputBlur();
+        setEditableValue((value)=>{
+            const newValue = padStartTimeValue(value);
+            return newValue;
+        });
+    };
+    // Обработка значения при нажатии в барабане
+    const onClickOption = (newValue)=>{
+        updateValue(newValue);
     };
+    const valueAsString = padStartTimeValue(value);
+    const viewValue = isInputFocused || padStartTimeValue(editableValue) !== valueAsString ? editableValue : valueAsString;
     return /*#__PURE__*/ _jsx("div", {
         className: "vkuiCalendarTime__picker",
-        children: /*#__PURE__*/ _jsx(AdaptivityProvider, {
-            density: "compact",
-            children: /*#__PURE__*/ _jsx(CustomSelect, {
-                value: getNumericValue(value),
-                options: options,
-                onChange: _onChange,
-                forceDropdownPortal: false,
-                searchable: true,
-                filterFn: selectFilterFn,
-                onInputChange: onPickerValueChange,
-                onInputKeyDown: onInputKeyDown,
-                renderOption: ({ children: optionChildren, ...optionProps })=>/*#__PURE__*/ _jsx(CustomSelectOption, {
-                        ...optionProps,
-                        textNoWrap: true,
-                        children: optionChildren
-                    }),
-                slotProps: {
-                    input: {
-                        'aria-label': inputLabel,
-                        'data-testid': inputTestId,
-                        'value': inputValue,
-                        'getRootRef': inputRef,
-                        onBlur
-                    }
+        children: /*#__PURE__*/ _jsx(ComboBox, {
+            value: viewValue,
+            slotProps: {
+                input: {
+                    'getRootRef': ref,
+                    'aria-label': inputLabel,
+                    'data-testid': inputTestId,
+                    'onKeyDown': onKeyDownProp
                 }
-            })
+            },
+            labels: options,
+            onChange: onInput,
+            onKeyDown: onKeyDown,
+            onClickOption: onClickOption,
+            onFocus: onFocus,
+            onBlur: onBlur
         })
     });
 };

package/dist/components/CalendarTime/CalendarTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalendarTime/CalendarTimePicker.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent, useState } from 'react';\nimport * as React from 'react';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';\nimport styles from './CalendarTime.module.css';\n\nconst selectFilterFn = () => true;\n\nconst validateValue = (\n  value: string,\n  validValues: Array<{\n    value: number;\n    label: string;\n  }>,\n): boolean => {\n  const numValue = Number(value);\n  return !isNaN(numValue) && validValues.some((v) => v.value === numValue);\n};\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface CalendarTimePickerProps extends Pick<SelectProps, 'onInputKeyDown'> {\n  value: Date;\n  getNumericValue: (date: Date) => number;\n  options: Array<{\n    value: number;\n    label: string;\n  }>;\n  onChange?: ((value: Date) => void) | undefined;\n  setTime: (value: Date, time: number) => Date;\n  inputRef: React.Ref<HTMLInputElement>;\n  inputLabel?: string | undefined;\n  inputTestId?: string | undefined;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport const CalendarTimePicker = ({\n  value,\n  getNumericValue,\n  options,\n  onChange,\n  setTime,\n  inputRef,\n  inputLabel,\n  inputTestId,\n  onInputKeyDown,\n}: CalendarTimePickerProps) => {\n  const [inputValue, setInputValue] = useState<string | undefined>(undefined);\n\n  const onBlur = React.useCallback(() => {\n    setInputValue(undefined);\n  }, []);\n\n  const _onChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange?.(setTime(value, Number(newValue))),\n    [onChange, setTime, value],\n  );\n\n  const onPickerValueChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const numericValue = e.target.value.replace(/\\D/g, '');\n    setInputValue(numericValue);\n    if (validateValue(numericValue, options)) {\n      onChange?.(setTime(value, Number(numericValue)));\n    }\n  };\n\n  return (\n    <div className={styles.picker}>\n      <AdaptivityProvider density=\"compact\">\n        <CustomSelect\n          value={getNumericValue(value)}\n          options={options}\n          onChange={_onChange}\n          forceDropdownPortal={false}\n          searchable\n          filterFn={selectFilterFn}\n          onInputChange={onPickerValueChange}\n          onInputKeyDown={onInputKeyDown}\n          renderOption={({ children: optionChildren, ...optionProps }) => (\n            <CustomSelectOption {...optionProps} textNoWrap>\n              {optionChildren}\n            </CustomSelectOption>\n          )}\n          slotProps={{\n            input: {\n              'aria-label': inputLabel,\n              'data-testid': inputTestId,\n              'value': inputValue,\n              'getRootRef': inputRef,\n              onBlur,\n            },\n          }}\n        />\n      </AdaptivityProvider>\n    </div>\n  );\n};\n"],"names":["useState","React","AdaptivityProvider","CustomSelect","CustomSelectOption","selectFilterFn","validateValue","value","validValues","numValue","Number","isNaN","some","v","CalendarTimePicker","getNumericValue","options","onChange","setTime","inputRef","inputLabel","inputTestId","onInputKeyDown","inputValue","setInputValue","undefined","onBlur","useCallback","_onChange","_","newValue","onPickerValueChange","e","numericValue","target","replace","div","className","density","forceDropdownPortal","searchable","filterFn","onInputChange","renderOption","children","optionChildren","optionProps","textNoWrap","slotProps","input"],"mappings":"AAAA;;AAEA,SAA2BA,QAAQ,QAAQ,QAAQ;AACnD,YAAYC,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,YAAY,QAA0B,kCAA+B;AAC9E,SAASC,kBAAkB,QAAQ,8CAA2C;AAG9E,MAAMC,iBAAiB,IAAM;AAE7B,MAAMC,gBAAgB,CACpBC,OACAC;IAKA,MAAMC,WAAWC,OAAOH;IACxB,OAAO,CAACI,MAAMF,aAAaD,YAAYI,IAAI,CAAC,CAACC,IAAMA,EAAEN,KAAK,KAAKE;AACjE;AAgBA,qCAAqC,GAErC,OAAO,MAAMK,qBAAqB,CAAC,EACjCP,KAAK,EACLQ,eAAe,EACfC,OAAO,EACPC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,UAAU,EACVC,WAAW,EACXC,cAAc,EACU;IACxB,MAAM,CAACC,YAAYC,cAAc,GAAGxB,SAA6ByB;IAEjE,MAAMC,SAASzB,MAAM0B,WAAW,CAAC;QAC/BH,cAAcC;IAChB,GAAG,EAAE;IAEL,MAAMG,YAAY3B,MAAM0B,WAAW,CACjC,CAACE,GAAmCC,WAClCb,WAAWC,QAAQX,OAAOG,OAAOoB,aACnC;QAACb;QAAUC;QAASX;KAAM;IAG5B,MAAMwB,sBAAsB,CAACC;QAC3B,MAAMC,eAAeD,EAAEE,MAAM,CAAC3B,KAAK,CAAC4B,OAAO,CAAC,OAAO;QACnDX,cAAcS;QACd,IAAI3B,cAAc2B,cAAcjB,UAAU;YACxCC,WAAWC,QAAQX,OAAOG,OAAOuB;QACnC;IACF;IAEA,qBACE,KAACG;QAAIC,SAAS;kBACZ,cAAA,KAACnC;YAAmBoC,SAAQ;sBAC1B,cAAA,KAACnC;gBACCI,OAAOQ,gBAAgBR;gBACvBS,SAASA;gBACTC,UAAUW;gBACVW,qBAAqB;gBACrBC,UAAU;gBACVC,UAAUpC;gBACVqC,eAAeX;gBACfT,gBAAgBA;gBAChBqB,cAAc,CAAC,EAAEC,UAAUC,cAAc,EAAE,GAAGC,aAAa,iBACzD,KAAC1C;wBAAoB,GAAG0C,WAAW;wBAAEC,UAAU;kCAC5CF;;gBAGLG,WAAW;oBACTC,OAAO;wBACL,cAAc7B;wBACd,eAAeC;wBACf,SAASE;wBACT,cAAcJ;wBACdO;oBACF;gBACF;;;;AAKV,EAAE"}
+{"version":3,"sources":["../../../src/components/CalendarTime/CalendarTimePicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { clamp, overflow } from '../../helpers/math';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { Keys } from '../../lib/accessibility';\nimport { isActiveElement } from '../../lib/dom';\nimport { ComboBox } from './ComboBox';\nimport styles from './CalendarTime.module.css';\n\nfunction validateValueInput(event: React.ChangeEvent<HTMLInputElement>, maxValue: number) {\n  if (event.target.value === '') {\n    return event.target.value;\n  }\n\n  const inputValue = /\\d\\d?/.exec(event.target.value)?.[0] || '';\n  if (event.target.value !== inputValue) {\n    return inputValue;\n  }\n\n  const inputValueNumber = Number(inputValue);\n  if (isNaN(inputValueNumber)) {\n    return '';\n  }\n\n  const resultValueNumber = clamp(inputValueNumber, 0, maxValue);\n\n  if (inputValueNumber === resultValueNumber) {\n    return inputValue;\n  }\n\n  return resultValueNumber.toString();\n}\n\nexport function padStartTimeValue(value: Pick<string, 'toString'>): string {\n  return value.toString().padStart(2, '0');\n}\n\nfunction newValueOnInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>, maxValue: number) {\n  if (!(event.target instanceof HTMLInputElement)) {\n    return '';\n  }\n\n  switch (event.key) {\n    case Keys.ARROW_UP:\n      return padStartTimeValue(overflow(Number(event.target.value) + 1, 0, maxValue));\n    case Keys.ARROW_DOWN:\n      return padStartTimeValue(overflow(Number(event.target.value) - 1, 0, maxValue));\n  }\n\n  return event.target.value;\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface CalendarTimePickerProps {\n  valueDate: Date;\n  options: ReadonlyArray<{\n    value: string;\n    label: string;\n  }>;\n  onChange?: ((value: Date) => void) | undefined;\n  setTime: (value: Date, time: number) => Date;\n  inputRef: React.Ref<HTMLInputElement>;\n  inputLabel?: string | undefined;\n  inputTestId?: string | undefined;\n  value: number;\n  maxValue: number;\n  onInputEnd?: () => void;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  isDayDisabled?: ((day: Date, withTime?: boolean) => boolean) | undefined;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport const CalendarTimePicker = ({\n  valueDate,\n  value,\n  options,\n  onChange,\n  setTime,\n  inputRef,\n  inputLabel,\n  inputTestId,\n  maxValue,\n  onInputEnd,\n  onKeyDown: onKeyDownProp,\n  isDayDisabled,\n}: CalendarTimePickerProps) => {\n  const ref = useExternRef(inputRef);\n\n  const [isInputFocused, onFocus, setInputBlur] = useBooleanState(false);\n\n  const [editableValue, setEditableValue] = React.useState(padStartTimeValue(value));\n\n  const updateValue = (newValue: string) => {\n    const newDate = setTime(valueDate, Number(newValue));\n    if (isDayDisabled?.(newDate, true)) {\n      return;\n    }\n    setEditableValue(newValue);\n    onChange?.(newDate);\n  };\n\n  // Обработка ввода\n\n  const onInput = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const validateValue = validateValueInput(event, maxValue);\n    updateValue(validateValue);\n\n    if (validateValue.length > 1 && event.target.selectionStart) {\n      onInputEnd?.();\n    }\n  };\n\n  // Управление числом с клавиатуры стрелками вниз/вверх.\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    const validateValue = newValueOnInputKeyDown(event, maxValue);\n    updateValue(validateValue);\n  };\n\n  // Обработка каретки если время уже задано\n\n  const onSelectionChange = React.useCallback((event: Event) => {\n    if (event.target instanceof HTMLInputElement) {\n      if (event.target.value.length > 1 && isActiveElement(event.target)) {\n        event.target.select();\n      }\n    }\n  }, []);\n\n  React.useEffect(() => {\n    const el = ref.current;\n    el?.addEventListener('selectionchange', onSelectionChange);\n\n    return () => {\n      el?.removeEventListener('selectionchange', onSelectionChange);\n    };\n  }, [onSelectionChange, ref]);\n\n  // Обработка ухода с поля ввода\n\n  const onBlur = () => {\n    setInputBlur();\n    setEditableValue((value) => {\n      const newValue = padStartTimeValue(value);\n\n      return newValue;\n    });\n  };\n\n  // Обработка значения при нажатии в барабане\n\n  const onClickOption = (newValue: string) => {\n    updateValue(newValue);\n  };\n\n  const valueAsString = padStartTimeValue(value);\n\n  const viewValue =\n    isInputFocused || padStartTimeValue(editableValue) !== valueAsString\n      ? editableValue\n      : valueAsString;\n\n  return (\n    <div className={styles.picker}>\n      <ComboBox\n        value={viewValue}\n        slotProps={{\n          input: {\n            'getRootRef': ref,\n            'aria-label': inputLabel,\n            'data-testid': inputTestId,\n            'onKeyDown': onKeyDownProp,\n          },\n        }}\n        labels={options}\n        onChange={onInput}\n        onKeyDown={onKeyDown}\n        onClickOption={onClickOption}\n        onFocus={onFocus}\n        onBlur={onBlur}\n      />\n    </div>\n  );\n};\n"],"names":["React","clamp","overflow","useBooleanState","useExternRef","Keys","isActiveElement","ComboBox","validateValueInput","event","maxValue","target","value","inputValue","exec","inputValueNumber","Number","isNaN","resultValueNumber","toString","padStartTimeValue","padStart","newValueOnInputKeyDown","HTMLInputElement","key","ARROW_UP","ARROW_DOWN","CalendarTimePicker","valueDate","options","onChange","setTime","inputRef","inputLabel","inputTestId","onInputEnd","onKeyDown","onKeyDownProp","isDayDisabled","ref","isInputFocused","onFocus","setInputBlur","editableValue","setEditableValue","useState","updateValue","newValue","newDate","onInput","validateValue","length","selectionStart","onSelectionChange","useCallback","select","useEffect","el","current","addEventListener","removeEventListener","onBlur","onClickOption","valueAsString","viewValue","div","className","slotProps","input","labels"],"mappings":"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"}

package/dist/components/CalendarTime/ComboBox.d.ts

@@ -0,0 +1,25 @@
+import { type InputProps } from '../Input/Input';
+type Label = {
+    /**
+     * Значение.
+     */
+    value: string;
+    /**
+     * Лейбл.
+     */
+    label: string;
+    /**
+     * Disabled состояние.
+     */
+    disabled?: boolean;
+};
+type ComboBoxProps = InputProps & {
+    readonly labels?: readonly Label[] | undefined;
+    /**
+     * Нажатие на элемент.
+     */
+    onClickOption?: ((value: string) => void) | undefined;
+};
+export declare function ComboBox({ getRootRef, onBlur, onFocus, after, labels, defaultValue, slotProps, onClickOption, ...restProps }: ComboBoxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ComboBox.d.ts.map

package/dist/components/CalendarTime/ComboBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarTime/ComboBox.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIxD,KAAK,KAAK,GAAG;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAqEF,KAAK,aAAa,GAAG,UAAU,GAAG;IAEhC,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,KAAK,EAAE,GAAG,SAAS,CAAC;IAE/C;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACvD,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,UAAU,EACV,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAW,EACX,YAAY,EACZ,SAAS,EACT,aAAa,EACb,GAAG,SAAS,EACb,EAAE,aAAa,2CAuEf"}

package/dist/components/CalendarTime/ComboBox.js

@@ -0,0 +1,112 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useBooleanState } from "../../hooks/useBooleanState.js";
+import { useExternRef } from "../../hooks/useExternRef.js";
+import { callMultiple } from "../../lib/callMultiple.js";
+import { CustomScrollView } from "../CustomScrollView/CustomScrollView.js";
+import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption.js";
+import { DropdownIcon } from "../DropdownIcon/DropdownIcon.js";
+import { Input } from "../Input/Input.js";
+import { Popper } from "../Popper/Popper.js";
+function getScrollParent(node) {
+    if (!(node instanceof HTMLElement)) {
+        return null;
+    }
+    if (node.scrollHeight > node.clientHeight) {
+        return node;
+    } else {
+        return getScrollParent(node.parentNode);
+    }
+}
+function Option({ option, onClickOption, selectedValue }) {
+    const ref = React.useRef(null);
+    const selected = selectedValue === option.value;
+    React.useEffect(()=>{
+        if (!selected) {
+            return;
+        }
+        const element = ref.current;
+        const scrollElement = getScrollParent(ref.current);
+        if (!element || !scrollElement) {
+            return;
+        }
+        scrollElement.scrollTo({
+            top: element.offsetTop - scrollElement.offsetHeight / 2 + element.offsetHeight / 2
+        });
+    }, [
+        selected
+    ]);
+    return /*#__PURE__*/ _jsx(CustomSelectOption, {
+        getRootRef: ref,
+        onMouseDown: (event)=>{
+            event.preventDefault();
+        },
+        onClick: ()=>{
+            onClickOption?.(option.value);
+        },
+        selected: selected,
+        disabled: option.disabled,
+        textNoWrap: true,
+        children: option.label
+    }, option.value);
+}
+export function ComboBox({ getRootRef, onBlur, onFocus, after, labels = [], defaultValue, slotProps, onClickOption, ...restProps }) {
+    const ref = useExternRef(getRootRef);
+    const inputRef = useExternRef(slotProps?.input?.getRootRef);
+    const [focus, setFocus, setBlur] = useBooleanState(false);
+    const [popperPlacement, setPopperPlacement] = React.useState('bottom');
+    const labelsElements = focus ? labels.map((option)=>{
+        return /*#__PURE__*/ _jsx(Option, {
+            onClickOption: onClickOption,
+            selectedValue: restProps.value,
+            option: option
+        }, option.value);
+    }) : undefined;
+    /**
+   * При управлении стрелками необходима правильная очередность элементов в списке.
+   */ if (popperPlacement.includes('top')) {
+        labelsElements?.reverse();
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Input, {
+                getRootRef: ref,
+                className: focus ? popperPlacement.includes('top') ? "vkuiCalendarTime__inputPopUp" : "vkuiCalendarTime__inputPopDown" : '',
+                type: "text",
+                onFocus: callMultiple(setFocus, onFocus),
+                onBlur: callMultiple(setBlur, onBlur),
+                onClick: ()=>inputRef.current?.focus(),
+                after: after || labels && /*#__PURE__*/ _jsx(DropdownIcon, {
+                    opened: focus
+                }),
+                slotProps: {
+                    ...slotProps,
+                    input: {
+                        ...slotProps?.input,
+                        getRootRef: inputRef
+                    }
+                },
+                ...restProps
+            }),
+            focus && labels && /*#__PURE__*/ _jsx(Popper, {
+                targetRef: ref,
+                placement: popperPlacement,
+                onPlacementChange: setPopperPlacement,
+                className: classNames("vkuiCalendarTime__popper", popperPlacement.includes('top') ? "vkuiCalendarTime__popperTop" : "vkuiCalendarTime__popperBottom"),
+                sameWidth: true,
+                autoUpdateOnTargetResize: true,
+                flipMiddlewareFallbackAxisSideDirection: "none",
+                offsetByMainAxis: 0,
+                children: /*#__PURE__*/ _jsx(CustomScrollView, {
+                    tabIndex: -1,
+                    className: "vkuiCalendarTime__customScroll",
+                    children: labelsElements
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ComboBox.js.map