@vkontakte/vkui 8.1.3 → 8.2.0

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":"AAAA;;AAEA,SAASA,MAAM,QAAQ,QAAQ;AAC/B,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,EAAEC,UAAU,QAAQ,6BAA0B;AAC3D,SAASC,QAAQ,EAAEC,UAAU,QAAQ,oBAAiB;AACtD,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,MAAM,QAA0B,sBAAmB;AAC5D,SAASC,kBAAkB,QAAQ,0BAAuB;AAwE1D,MAAMC,QAGD,EAAE;AACP,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BD,MAAME,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC3D;AAEA,MAAMC,UAGD,EAAE;AACP,IAAK,IAAIN,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BM,QAAQL,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC7D;AAEA,OAAO,MAAME,eAAe,CAAC,EAC3BL,KAAK,EACLM,QAAQ,EACRC,iBAAiB,EACjBC,gBAAgB,EAChBC,kBAAkB,EAClBjB,UAAUkB,aAAalB,QAAQ,EAC/BC,YAAYkB,eAAelB,UAAU,EACrCmB,aAAa,EACbC,iBAAiB,QAAQ,EACzBC,qBAAqB,KAAK,EAC1BC,iBAAiB,IAAI,EACrBC,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChBC,UAAU,EACQ;IAClB,MAAMC,gBAAgBjC,OAAgC;IACtD,MAAMkC,kBAAkBlC,OAAgC;IACxD,MAAMmC,gBAAgBnC,OAAiC;IAEvD,MAAMoC,aAAaX,gBACff,MAAM2B,GAAG,CAAC,CAACC;QACT,OAAO;YAAE,GAAGA,IAAI;YAAEC,UAAUd,cAAcF,WAAWV,OAAOyB,KAAKzB,KAAK,GAAG;QAAM;IACjF,KACAH;IAEJ,MAAM8B,eAAef,gBACjBR,QAAQoB,GAAG,CAAC,CAACI;QACX,OAAO;YAAE,GAAGA,MAAM;YAAEF,UAAUd,cAAcD,aAAaX,OAAO4B,OAAO5B,KAAK,GAAG;QAAM;IACvF,KACAI;IAEJ,MAAMyB,kBAAkB,CAACC;QACvB,MAAMC,MAAMxC,WAAWuC;QACvB;gFAC4E,GAC5E,IAAIC,QAAQzC,KAAK0C,KAAK,EAAE;YACtB;QACF;QAEA,MAAMC,QAAQ;YAACb;YAAeC;YAAiBC;SAAc,CAACY,MAAM,CAAC,CAACC,MACpEC,QAAQD,IAAIE,OAAO;QAErB,MAAMC,mBAAmBL,MAAMM,SAAS,CAAC,CAACC,OAASA,KAAKH,OAAO,KAAKP,EAAEW,MAAM;QAC5E,MAAMC,gBAAgBJ,mBAAmB;QACzC,IAAII,iBAAiBT,MAAMU,MAAM,EAAE;YACjC;QACF;QACA,MAAMC,WAAWX,KAAK,CAACS,cAAc;QAErC,IAAIE,SAASP,OAAO,EAAE;YACpBP,EAAEe,cAAc;YAChBD,SAASP,OAAO,EAAES;QACpB;IACF;IAEA,MAAMC,uDAAuD3D,MAAM4D,WAAW,CAC5E,CAACC,OAA4BC;QAC3B,IAAIA,UAAUD,MAAMlB,GAAG,KAAK,UAAU;YACpCkB,MAAME,eAAe;QACvB;IACF,GACA,EAAE;IAGJ,MAAMC,uBAAuB,CAACtB,GAAwBoB;QACpDrB,gBAAgBC;QAChBiB,qDAAqDjB,GAAGoB;IAC1D;IAEA,MAAMG,mBAAmB;QACvB,MAAMC,kBAAkBnC,cAAcxB;QACtC,qBACE,KAAC2D;YACCC,MAAK;YACLC,SAASjD;YACTkD,MAAK;YACLC,YAAYpC;YACZqC,WAAW9B;YACXH,UAAUZ;YACV8C,eAAa1C;sBAEZL;;IAGP;IAEA,qBACE,MAACgD;QAAIC,WAAWzE,qCAAwB,CAAC0B;;0BACvC,KAACnB;gBACCI,OAAOA;gBACP+D,iBAAiB,CAACC,IAAMA,EAAEC,QAAQ;gBAClC3D,UAAUA;gBACV4D,SAAS3C;gBACT4C,SAASzD;gBACT0D,gBAAgBhB;gBAChBiB,UAAUjD;gBACVkD,YAAY9D;gBACZ+D,aAAatD;;0BAEf,KAAC4C;gBAAIC,SAAS;0BAAkB;;0BAChC,KAAClE;gBACCI,OAAOA;gBACP+D,iBAAiB,CAACC,IAAMA,EAAEQ,UAAU;gBACpClE,UAAUA;gBACV4D,SAASvC;gBACTwC,SAASxD;gBACTyD,gBAAgBhB;gBAChBiB,UAAUhD;gBACViD,YAAY7D;gBACZ8D,aAAavD;;YAEdD,gCACC,KAAC8C;gBAAIC,SAAS;0BACZ,cAAA,KAACpE;oBAAmB+E,SAAQ;8BAAWpB;;;;;AAKjD,EAAE"}
+{"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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CalendarTime/ComboBox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type Placement } from '@vkontakte/vkui-floating-ui/core';\nimport { useBooleanState } from '../../hooks/useBooleanState';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { CustomScrollView } from '../CustomScrollView/CustomScrollView';\nimport { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { Input, type InputProps } from '../Input/Input';\nimport { Popper } from '../Popper/Popper';\nimport styles from './CalendarTime.module.css';\n\ntype Label = {\n  /**\n   * Значение.\n   */\n  value: string;\n  /**\n   * Лейбл.\n   */\n  label: string;\n  /**\n   * Disabled состояние.\n   */\n  disabled?: boolean;\n};\n\ntype OptionProps = {\n  /**\n   * Выбранное значение.\n   */\n  selectedValue: string | number | readonly string[] | undefined;\n  /**\n   * Опция.\n   */\n  option: Label;\n  /**\n   * Нажатие на элемент.\n   */\n  onClickOption?: ((value: string) => void) | undefined;\n};\n\nfunction getScrollParent(node: Node | null): HTMLElement | null {\n  if (!(node instanceof HTMLElement)) {\n    return null;\n  }\n\n  if (node.scrollHeight > node.clientHeight) {\n    return node;\n  } else {\n    return getScrollParent(node.parentNode);\n  }\n}\n\nfunction Option({ option, onClickOption, selectedValue }: OptionProps) {\n  const ref = React.useRef<HTMLDivElement>(null);\n  const selected = selectedValue === option.value;\n\n  React.useEffect(() => {\n    if (!selected) {\n      return;\n    }\n\n    const element = ref.current;\n    const scrollElement = getScrollParent(ref.current);\n\n    if (!element || !scrollElement) {\n      return;\n    }\n\n    scrollElement.scrollTo({\n      top: element.offsetTop - scrollElement.offsetHeight / 2 + element.offsetHeight / 2,\n    });\n  }, [selected]);\n\n  return (\n    <CustomSelectOption\n      getRootRef={ref}\n      key={option.value}\n      onMouseDown={(event) => {\n        event.preventDefault();\n      }}\n      onClick={() => {\n        onClickOption?.(option.value);\n      }}\n      selected={selected}\n      disabled={option.disabled}\n      textNoWrap\n    >\n      {option.label}\n    </CustomSelectOption>\n  );\n}\n\ntype ComboBoxProps = InputProps & {\n  // eslint-disable-next-line jsdoc/require-jsdoc\n  readonly labels?: readonly Label[] | undefined;\n\n  /**\n   * Нажатие на элемент.\n   */\n  onClickOption?: ((value: string) => void) | undefined;\n};\n\nexport function ComboBox({\n  getRootRef,\n  onBlur,\n  onFocus,\n  after,\n  labels = [],\n  defaultValue,\n  slotProps,\n  onClickOption,\n  ...restProps\n}: ComboBoxProps) {\n  const ref = useExternRef(getRootRef);\n  const inputRef = useExternRef(slotProps?.input?.getRootRef);\n\n  const [focus, setFocus, setBlur] = useBooleanState(false);\n\n  const [popperPlacement, setPopperPlacement] = React.useState<Placement>('bottom');\n\n  const labelsElements = focus\n    ? labels.map((option) => {\n        return (\n          <Option\n            key={option.value}\n            onClickOption={onClickOption}\n            selectedValue={restProps.value}\n            option={option}\n          />\n        );\n      })\n    : undefined;\n\n  /**\n   * При управлении стрелками необходима правильная очередность элементов в списке.\n   */\n  if (popperPlacement.includes('top')) {\n    labelsElements?.reverse();\n  }\n\n  return (\n    <>\n      <Input\n        getRootRef={ref}\n        className={\n          focus ? (popperPlacement.includes('top') ? styles.inputPopUp : styles.inputPopDown) : ''\n        }\n        type=\"text\"\n        onFocus={callMultiple(setFocus, onFocus)}\n        onBlur={callMultiple(setBlur, onBlur)}\n        onClick={() => inputRef.current?.focus()}\n        after={after || (labels && <DropdownIcon opened={focus} />)}\n        slotProps={{\n          ...slotProps,\n          input: {\n            ...slotProps?.input,\n            getRootRef: inputRef,\n          },\n        }}\n        {...restProps}\n      />\n\n      {focus && labels && (\n        <Popper\n          targetRef={ref}\n          placement={popperPlacement}\n          onPlacementChange={setPopperPlacement}\n          className={classNames(\n            styles.popper,\n            popperPlacement.includes('top') ? styles.popperTop : styles.popperBottom,\n          )}\n          sameWidth\n          autoUpdateOnTargetResize\n          flipMiddlewareFallbackAxisSideDirection=\"none\"\n          offsetByMainAxis={0}\n        >\n          <CustomScrollView tabIndex={-1} className={styles.customScroll}>\n            {labelsElements}\n          </CustomScrollView>\n        </Popper>\n      )}\n    </>\n  );\n}\n"],"names":["React","classNames","useBooleanState","useExternRef","callMultiple","CustomScrollView","CustomSelectOption","DropdownIcon","Input","Popper","getScrollParent","node","HTMLElement","scrollHeight","clientHeight","parentNode","Option","option","onClickOption","selectedValue","ref","useRef","selected","value","useEffect","element","current","scrollElement","scrollTo","top","offsetTop","offsetHeight","getRootRef","onMouseDown","event","preventDefault","onClick","disabled","textNoWrap","label","ComboBox","onBlur","onFocus","after","labels","defaultValue","slotProps","restProps","inputRef","input","focus","setFocus","setBlur","popperPlacement","setPopperPlacement","useState","labelsElements","map","undefined","includes","reverse","className","type","opened","targetRef","placement","onPlacementChange","sameWidth","autoUpdateOnTargetResize","flipMiddlewareFallbackAxisSideDirection","offsetByMainAxis","tabIndex"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CardScroll.d.ts","sourceRoot":"","sources":["../../../src/components/CardScroll/CardScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAUpG,MAAM,WAAW,eACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,YAAY,EACZ,IAAI,CAAC,qBAAqB,EAAE,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;IACrF;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS,CAAC;IAC3C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;CACpD;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,+GASxB,eAAe,KAAG,KAAK,CAAC,SAmG1B,CAAC"}
+{"version":3,"file":"CardScroll.d.ts","sourceRoot":"","sources":["../../../src/components/CardScroll/CardScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAUpG,MAAM,WAAW,eACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,YAAY,EACZ,IAAI,CAAC,qBAAqB,EAAE,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;IACrF;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,SAAS,CAAC;IAC3C;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,SAAS,CAAC;CACpD;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,+GASxB,eAAe,KAAG,KAAK,CAAC,SAqG1B,CAAC"}

package/dist/components/CardScroll/CardScroll.js

@@ -3,7 +3,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useConfigDirection } from "../../hooks/useConfigDirection.js";
-import { useDOM } from "../../lib/dom.js";
 import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 const stylesSize = {
@@ -16,8 +15,8 @@ const stylesSize = {
  */ export const CardScroll = ({ children, size = 's', showArrows = true, padding = false, CardsListComponent = 'ul', prevButtonTestId, nextButtonTestId, ...restProps })=>{
     const refContainer = React.useRef(null);
     const direction = useConfigDirection();
-    const { window } = useDOM();
     const getPadding = (container)=>{
+        const window = container.ownerDocument.defaultView;
         return parseFloat(window.getComputedStyle(container).getPropertyValue('--vkui_internal--CardScroll_horizontal_padding'));
     };
     const slideOffsetFromStart = (slide)=>{
@@ -30,6 +29,7 @@ const stylesSize = {
         }
         const containerWidth = refContainer.current.offsetWidth;
         const getMarginEnd = (el)=>{
+            const window = el.ownerDocument.defaultView;
             const computedStyles = window.getComputedStyle(el);
             return parseInt(computedStyles.marginInlineEnd) || (direction === 'rtl' ? parseInt(computedStyles.marginLeft) : parseInt(computedStyles.marginRight)) || 0;
         };

package/dist/components/CardScroll/CardScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useDOM } from '../../lib/dom';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { HorizontalScroll, type HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardScroll.module.css';\n\nconst stylesSize = {\n  s: 'vkuiInternalCardScroll--size-s',\n  m: 'vkuiInternalCardScroll--size-m',\n  l: 'vkuiInternalCardScroll--size-l',\n};\n\nexport interface CardScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasComponent,\n    Pick<HorizontalScrollProps, 'showArrows' | 'prevButtonTestId' | 'nextButtonTestId'> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false | undefined;\n  /**\n   * Добавляет отступы по краям слева и справа.\n   */\n  padding?: boolean | undefined;\n  /**\n   * Позволяет поменять тег используемый для обертки над карточками.\n   */\n  CardsListComponent?: React.ElementType | undefined;\n}\n\n/**\n * @see https://vkui.io/components/card-scroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  padding = false,\n  CardsListComponent = 'ul',\n  prevButtonTestId,\n  nextButtonTestId,\n  ...restProps\n}: CardScrollProps): React.ReactNode => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const direction = useConfigDirection();\n\n  const { window } = useDOM();\n\n  const getPadding = (container: HTMLElement) => {\n    return parseFloat(\n      window!\n        .getComputedStyle(container)\n        .getPropertyValue('--vkui_internal--CardScroll_horizontal_padding'),\n    );\n  };\n\n  const slideOffsetFromStart = (slide: HTMLElement) => {\n    const containerWidth = refContainer.current?.offsetWidth || 0;\n    return direction === 'rtl'\n      ? containerWidth - slide.offsetLeft - slide.offsetWidth\n      : slide.offsetLeft;\n  };\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n\n    const getMarginEnd = (el: HTMLElement) => {\n      const computedStyles = window!.getComputedStyle(el);\n      return (\n        parseInt(computedStyles.marginInlineEnd) ||\n        (direction === 'rtl'\n          ? parseInt(computedStyles.marginLeft)\n          : parseInt(computedStyles.marginRight)) ||\n        0\n      );\n    };\n\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        slideOffsetFromStart(el) + el.offsetWidth + getMarginEnd(el) - offset >= 0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n    const padding = getPadding(refContainer.current);\n    const scrollTo = slideOffsetFromStart(slide) - (containerWidth - slide.offsetWidth) + padding;\n\n    if (scrollTo <= 2 * padding) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(refContainer.current.children, (el: HTMLElement) => {\n      return slideOffsetFromStart(el) + el.offsetWidth - offset > containerWidth;\n    }) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    const padding = getPadding(refContainer.current);\n    return slideOffsetFromStart(slide) - padding;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalCardScroll',\n        size !== false && stylesSize[size],\n        padding && styles.withPaddings,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n        prevButtonTestId={prevButtonTestId}\n        nextButtonTestId={nextButtonTestId}\n        ContentWrapperComponent={CardsListComponent}\n        contentWrapperRef={refContainer}\n        contentWrapperClassName={styles.in}\n      >\n        {children}\n      </HorizontalScroll>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","useDOM","HorizontalScroll","RootComponent","stylesSize","s","m","l","CardScroll","children","size","showArrows","padding","CardsListComponent","prevButtonTestId","nextButtonTestId","restProps","refContainer","useRef","direction","window","getPadding","container","parseFloat","getComputedStyle","getPropertyValue","slideOffsetFromStart","slide","containerWidth","current","offsetWidth","offsetLeft","getScrollToLeft","offset","getMarginEnd","el","computedStyles","parseInt","marginInlineEnd","marginLeft","marginRight","slideIndex","findIndex","scrollTo","getScrollToRight","Array","prototype","find","call","baseClassName","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { HorizontalScroll, type HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardScroll.module.css';\n\nconst stylesSize = {\n  s: 'vkuiInternalCardScroll--size-s',\n  m: 'vkuiInternalCardScroll--size-m',\n  l: 'vkuiInternalCardScroll--size-l',\n};\n\nexport interface CardScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasComponent,\n    Pick<HorizontalScrollProps, 'showArrows' | 'prevButtonTestId' | 'nextButtonTestId'> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false | undefined;\n  /**\n   * Добавляет отступы по краям слева и справа.\n   */\n  padding?: boolean | undefined;\n  /**\n   * Позволяет поменять тег используемый для обертки над карточками.\n   */\n  CardsListComponent?: React.ElementType | undefined;\n}\n\n/**\n * @see https://vkui.io/components/card-scroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  padding = false,\n  CardsListComponent = 'ul',\n  prevButtonTestId,\n  nextButtonTestId,\n  ...restProps\n}: CardScrollProps): React.ReactNode => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const direction = useConfigDirection();\n\n  const getPadding = (container: HTMLElement) => {\n    const window = container.ownerDocument.defaultView!;\n\n    return parseFloat(\n      window\n        .getComputedStyle(container)\n        .getPropertyValue('--vkui_internal--CardScroll_horizontal_padding'),\n    );\n  };\n\n  const slideOffsetFromStart = (slide: HTMLElement) => {\n    const containerWidth = refContainer.current?.offsetWidth || 0;\n    return direction === 'rtl'\n      ? containerWidth - slide.offsetLeft - slide.offsetWidth\n      : slide.offsetLeft;\n  };\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n\n    const getMarginEnd = (el: HTMLElement) => {\n      const window = el.ownerDocument.defaultView!;\n\n      const computedStyles = window.getComputedStyle(el);\n      return (\n        parseInt(computedStyles.marginInlineEnd) ||\n        (direction === 'rtl'\n          ? parseInt(computedStyles.marginLeft)\n          : parseInt(computedStyles.marginRight)) ||\n        0\n      );\n    };\n\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        slideOffsetFromStart(el) + el.offsetWidth + getMarginEnd(el) - offset >= 0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n    const padding = getPadding(refContainer.current);\n    const scrollTo = slideOffsetFromStart(slide) - (containerWidth - slide.offsetWidth) + padding;\n\n    if (scrollTo <= 2 * padding) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(refContainer.current.children, (el: HTMLElement) => {\n      return slideOffsetFromStart(el) + el.offsetWidth - offset > containerWidth;\n    }) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    const padding = getPadding(refContainer.current);\n    return slideOffsetFromStart(slide) - padding;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalCardScroll',\n        size !== false && stylesSize[size],\n        padding && styles.withPaddings,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n        prevButtonTestId={prevButtonTestId}\n        nextButtonTestId={nextButtonTestId}\n        ContentWrapperComponent={CardsListComponent}\n        contentWrapperRef={refContainer}\n        contentWrapperClassName={styles.in}\n      >\n        {children}\n      </HorizontalScroll>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","HorizontalScroll","RootComponent","stylesSize","s","m","l","CardScroll","children","size","showArrows","padding","CardsListComponent","prevButtonTestId","nextButtonTestId","restProps","refContainer","useRef","direction","getPadding","container","window","ownerDocument","defaultView","parseFloat","getComputedStyle","getPropertyValue","slideOffsetFromStart","slide","containerWidth","current","offsetWidth","offsetLeft","getScrollToLeft","offset","getMarginEnd","el","computedStyles","parseInt","marginInlineEnd","marginLeft","marginRight","slideIndex","findIndex","scrollTo","getScrollToRight","Array","prototype","find","call","baseClassName","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmC/B,OAAO,KAAK,EACV,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,YAAY,GAAI,gdAmC1B,gBAAgB,KAAG,KAAK,CAAC,SAmhB3B,CAAC"}
+{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmC/B,OAAO,KAAK,EACV,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,YAAY,GAAI,gdAmC1B,gBAAgB,KAAG,KAAK,CAAC,SAohB3B,CAAC"}

package/dist/components/CarouselBase/CarouselBase.js

@@ -286,7 +286,8 @@ export const CarouselBase = ({ bullets = false, getRootRef, children, slideWidth
                 canSlideLeft: calculateCanSlideLeft(),
                 canSlideRight: calculateCanSlideRight()
             }));
-    }, [
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
         slideIndex
     ]);
     useIsomorphicLayoutEffect(function updateIsDraggable() {
@@ -298,6 +299,7 @@ export const CarouselBase = ({ bullets = false, getRootRef, children, slideWidth
         dragDisabled
     ]);
     useMutationObserver(layerRef, initializeSlides);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     useIsomorphicLayoutEffect(initializeSlides, [
         align,
         slideWidth,