@vkontakte/vkui 8.1.2 → 8.2.0

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

@@ -1,61 +1,121 @@
 '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";
+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";
 import styles from "./CalendarTime.module.css";
-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);
+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: styles.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/cssm/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","styles","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","picker","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;AAC9E,OAAOC,YAAY,4BAA4B;AAE/C,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,GAAGzB,SAA6B0B;IAEjE,MAAMC,SAAS1B,MAAM2B,WAAW,CAAC;QAC/BH,cAAcC;IAChB,GAAG,EAAE;IAEL,MAAMG,YAAY5B,MAAM2B,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,WAAWjC,OAAOkC,MAAM;kBAC3B,cAAA,KAACrC;YAAmBsC,SAAQ;sBAC1B,cAAA,KAACrC;gBACCK,OAAOQ,gBAAgBR;gBACvBS,SAASA;gBACTC,UAAUW;gBACVY,qBAAqB;gBACrBC,UAAU;gBACVC,UAAUrC;gBACVsC,eAAeZ;gBACfT,gBAAgBA;gBAChBsB,cAAc,CAAC,EAAEC,UAAUC,cAAc,EAAE,GAAGC,aAAa,iBACzD,KAAC5C;wBAAoB,GAAG4C,WAAW;wBAAEC,UAAU;kCAC5CF;;gBAGLG,WAAW;oBACTC,OAAO;wBACL,cAAc9B;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","styles","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","picker","slotProps","input","labels"],"mappings":"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"}

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

@@ -0,0 +1,113 @@
+'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";
+import styles from "./CalendarTime.module.css";
+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') ? styles.inputPopUp : styles.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(styles.popper, popperPlacement.includes('top') ? styles.popperTop : styles.popperBottom),
+                sameWidth: true,
+                autoUpdateOnTargetResize: true,
+                flipMiddlewareFallbackAxisSideDirection: "none",
+                offsetByMainAxis: 0,
+                children: /*#__PURE__*/ _jsx(CustomScrollView, {
+                    tabIndex: -1,
+                    className: styles.customScroll,
+                    children: labelsElements
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ComboBox.js.map

package/dist/cssm/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","styles","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","inputPopUp","inputPopDown","type","opened","targetRef","placement","onPlacementChange","popper","popperTop","popperBottom","sameWidth","autoUpdateOnTargetResize","flipMiddlewareFallbackAxisSideDirection","offsetByMainAxis","tabIndex","customScroll"],"mappings":"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"}

package/dist/cssm/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";
 import styles from "./CardScroll.module.css";
@@ -17,8 +16,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)=>{
@@ -31,6 +30,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/cssm/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","styles","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","host","withPaddings","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","in"],"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","styles","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","host","withPaddings","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","in"],"mappings":"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"}

package/dist/cssm/components/CarouselBase/CarouselBase.js

@@ -287,7 +287,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() {
@@ -299,6 +300,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,