@vkontakte/vkui 7.5.4 → 7.6.1

package/dist/cssm/components/CustomSelect/hooks/useFocusedOptionController.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { findIndexAfter, findIndexBefore, findSelectedIndex } from "../helpers.js";
+/* eslint-enable jsdoc/require-jsdoc */ export function useFocusedOptionController({ selectedOptionValue, filteredOptions, scrollToElement }) {
+    const [focusedOptionValue, setFocusedOptionValue] = React.useState(null);
+    const focusOptionByIndex = React.useCallback((index, scrollTo = true)=>{
+        if (index === undefined || index < 0 || index > filteredOptions.length - 1) {
+            return;
+        }
+        const option = filteredOptions[index];
+        if (!option || option.disabled) {
+            return;
+        }
+        if (scrollTo) {
+            scrollToElement(index);
+        }
+        setFocusedOptionValue(option.value);
+    }, [
+        filteredOptions,
+        scrollToElement
+    ]);
+    const resetFocusedOption = React.useCallback(()=>{
+        setFocusedOptionValue(null);
+    }, []);
+    const focusOption = React.useCallback((type)=>{
+        let index = findSelectedIndex(filteredOptions, focusedOptionValue);
+        if (type === 'next') {
+            const nextIndex = findIndexAfter(filteredOptions, index);
+            index = nextIndex === -1 ? findIndexAfter(filteredOptions) : nextIndex; // Следующий за index или первый валидный до index
+        } else if (type === 'prev') {
+            const beforeIndex = findIndexBefore(filteredOptions, index);
+            index = beforeIndex === -1 ? findIndexBefore(filteredOptions) : beforeIndex; // Предшествующий index или последний валидный после index
+        }
+        focusOptionByIndex(index);
+    }, [
+        filteredOptions,
+        focusedOptionValue,
+        focusOptionByIndex
+    ]);
+    const selectFocusedValue = React.useCallback(()=>setFocusedOptionValue(selectedOptionValue), [
+        selectedOptionValue
+    ]);
+    return {
+        focusedOptionValue,
+        setFocusedOptionValue,
+        focusOptionByIndex,
+        resetFocusedOption,
+        focusOption,
+        selectFocusedValue
+    };
+}
+
+//# sourceMappingURL=useFocusedOptionController.js.map

package/dist/cssm/components/CustomSelect/hooks/useFocusedOptionController.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/CustomSelect/hooks/useFocusedOptionController.ts"],"sourcesContent":["import { type Dispatch, type SetStateAction } from 'react';\nimport * as React from 'react';\nimport { type SelectValue } from '../../NativeSelect/NativeSelect';\nimport { type SelectProps } from '../CustomSelect';\nimport { findIndexAfter, findIndexBefore, findSelectedIndex } from '../helpers';\nimport { type CustomSelectOptionInterface } from '../types';\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface UseFocusedOptionControllerProps<OptionInterfaceT extends CustomSelectOptionInterface> {\n  filteredOptions: SelectProps<OptionInterfaceT>['options'];\n  scrollToElement: (index: number, center?: boolean) => void;\n  selectedOptionValue: SelectValue;\n}\n\nexport interface UseFocusedOptionControllerReturn {\n  focusedOptionValue: SelectValue;\n  setFocusedOptionValue: Dispatch<SetStateAction<SelectValue>>;\n  focusOptionByIndex: (index: number | undefined, scrollTo: boolean) => void;\n  resetFocusedOption: () => void;\n  focusOption: (type: 'next' | 'prev') => void;\n  selectFocusedValue: () => void;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport function useFocusedOptionController<OptionInterfaceT extends CustomSelectOptionInterface>({\n  selectedOptionValue,\n  filteredOptions,\n  scrollToElement,\n}: UseFocusedOptionControllerProps<OptionInterfaceT>): UseFocusedOptionControllerReturn {\n  const [focusedOptionValue, setFocusedOptionValue] = React.useState<SelectValue>(null);\n\n  const focusOptionByIndex = React.useCallback(\n    (index: number | undefined, scrollTo = true) => {\n      if (index === undefined || index < 0 || index > filteredOptions.length - 1) {\n        return;\n      }\n      const option = filteredOptions[index];\n\n      if (!option || option.disabled) {\n        return;\n      }\n\n      if (scrollTo) {\n        scrollToElement(index);\n      }\n\n      setFocusedOptionValue(option.value);\n    },\n    [filteredOptions, scrollToElement],\n  );\n\n  const resetFocusedOption = React.useCallback(() => {\n    setFocusedOptionValue(null);\n  }, []);\n\n  const focusOption = React.useCallback(\n    (type: 'next' | 'prev') => {\n      let index = findSelectedIndex(filteredOptions, focusedOptionValue);\n\n      if (type === 'next') {\n        const nextIndex = findIndexAfter(filteredOptions, index);\n        index = nextIndex === -1 ? findIndexAfter(filteredOptions) : nextIndex; // Следующий за index или первый валидный до index\n      } else if (type === 'prev') {\n        const beforeIndex = findIndexBefore(filteredOptions, index);\n        index = beforeIndex === -1 ? findIndexBefore(filteredOptions) : beforeIndex; // Предшествующий index или последний валидный после index\n      }\n\n      focusOptionByIndex(index);\n    },\n    [filteredOptions, focusedOptionValue, focusOptionByIndex],\n  );\n\n  const selectFocusedValue = React.useCallback(\n    () => setFocusedOptionValue(selectedOptionValue),\n    [selectedOptionValue],\n  );\n\n  return {\n    focusedOptionValue,\n    setFocusedOptionValue,\n    focusOptionByIndex,\n    resetFocusedOption,\n    focusOption,\n    selectFocusedValue,\n  };\n}\n"],"names":["React","findIndexAfter","findIndexBefore","findSelectedIndex","useFocusedOptionController","selectedOptionValue","filteredOptions","scrollToElement","focusedOptionValue","setFocusedOptionValue","useState","focusOptionByIndex","useCallback","index","scrollTo","undefined","length","option","disabled","value","resetFocusedOption","focusOption","type","nextIndex","beforeIndex","selectFocusedValue"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,cAAc,EAAEC,eAAe,EAAEC,iBAAiB,QAAQ,gBAAa;AAkBhF,qCAAqC,GAErC,OAAO,SAASC,2BAAiF,EAC/FC,mBAAmB,EACnBC,eAAe,EACfC,eAAe,EACmC;IAClD,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGT,MAAMU,QAAQ,CAAc;IAEhF,MAAMC,qBAAqBX,MAAMY,WAAW,CAC1C,CAACC,OAA2BC,WAAW,IAAI;QACzC,IAAID,UAAUE,aAAaF,QAAQ,KAAKA,QAAQP,gBAAgBU,MAAM,GAAG,GAAG;YAC1E;QACF;QACA,MAAMC,SAASX,eAAe,CAACO,MAAM;QAErC,IAAI,CAACI,UAAUA,OAAOC,QAAQ,EAAE;YAC9B;QACF;QAEA,IAAIJ,UAAU;YACZP,gBAAgBM;QAClB;QAEAJ,sBAAsBQ,OAAOE,KAAK;IACpC,GACA;QAACb;QAAiBC;KAAgB;IAGpC,MAAMa,qBAAqBpB,MAAMY,WAAW,CAAC;QAC3CH,sBAAsB;IACxB,GAAG,EAAE;IAEL,MAAMY,cAAcrB,MAAMY,WAAW,CACnC,CAACU;QACC,IAAIT,QAAQV,kBAAkBG,iBAAiBE;QAE/C,IAAIc,SAAS,QAAQ;YACnB,MAAMC,YAAYtB,eAAeK,iBAAiBO;YAClDA,QAAQU,cAAc,CAAC,IAAItB,eAAeK,mBAAmBiB,WAAW,kDAAkD;QAC5H,OAAO,IAAID,SAAS,QAAQ;YAC1B,MAAME,cAActB,gBAAgBI,iBAAiBO;YACrDA,QAAQW,gBAAgB,CAAC,IAAItB,gBAAgBI,mBAAmBkB,aAAa,0DAA0D;QACzI;QAEAb,mBAAmBE;IACrB,GACA;QAACP;QAAiBE;QAAoBG;KAAmB;IAG3D,MAAMc,qBAAqBzB,MAAMY,WAAW,CAC1C,IAAMH,sBAAsBJ,sBAC5B;QAACA;KAAoB;IAGvB,OAAO;QACLG;QACAC;QACAE;QACAS;QACAC;QACAI;IACF;AACF"}

package/dist/cssm/components/CustomSelect/hooks/useInputKeyboardController.js

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { Keys, pressedKey } from "../../../lib/accessibility.js";
+import { callMultiple } from "../../../lib/callMultiple.js";
+const KEYS_TO_PREVENT_DEFAULT = [
+    Keys.ARROW_UP,
+    Keys.ARROW_DOWN,
+    Keys.ESCAPE,
+    Keys.ENTER
+];
+/* eslint-enable jsdoc/require-jsdoc */ export function useInputKeyboardController({ opened, resetFocusedOption, focusOption, scrollBoxRef, selectFocused, onInputKeyDown, open, close }) {
+    const handleKeyDownSelect = React.useCallback((event)=>{
+        const key = pressedKey(event);
+        if (event.key.length === 1 && key !== Keys.SPACE) {
+            open();
+            resetFocusedOption();
+            return;
+        }
+        if (!key) {
+            return;
+        }
+        const areOptionsShown = ()=>scrollBoxRef.current !== null;
+        if (KEYS_TO_PREVENT_DEFAULT.includes(key)) {
+            event.preventDefault();
+        }
+        switch(key){
+            case Keys.ARROW_UP:
+                if (opened) {
+                    areOptionsShown() && focusOption('prev');
+                } else {
+                    open();
+                }
+                break;
+            case Keys.ARROW_DOWN:
+                if (opened) {
+                    areOptionsShown() && focusOption('next');
+                } else {
+                    open();
+                }
+                break;
+            case Keys.ESCAPE:
+                close();
+                break;
+            case Keys.BACKSPACE:
+            case Keys.DELETE:
+                {
+                    open();
+                    resetFocusedOption();
+                    break;
+                }
+            case Keys.ENTER:
+            case Keys.SPACE:
+                if (opened) {
+                    areOptionsShown() && selectFocused();
+                } else {
+                    open();
+                }
+                break;
+        }
+    }, [
+        scrollBoxRef,
+        opened,
+        close,
+        focusOption,
+        open,
+        resetFocusedOption,
+        selectFocused
+    ]);
+    const handleInputKeydown = React.useCallback((event)=>{
+        onInputKeyDown?.(event, opened);
+    }, [
+        opened,
+        onInputKeyDown
+    ]);
+    const _onInputKeyDown = callMultiple(handleKeyDownSelect, handleInputKeydown);
+    return _onInputKeyDown;
+}
+
+//# sourceMappingURL=useInputKeyboardController.js.map

package/dist/cssm/components/CustomSelect/hooks/useInputKeyboardController.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/CustomSelect/hooks/useInputKeyboardController.ts"],"sourcesContent":["import * as React from 'react';\nimport { Keys, pressedKey } from '../../../lib/accessibility';\nimport { callMultiple } from '../../../lib/callMultiple';\nimport { type SelectProps } from '../CustomSelect';\nimport { type UseFocusedOptionControllerReturn } from './useFocusedOptionController';\n\nconst KEYS_TO_PREVENT_DEFAULT: string[] = [Keys.ARROW_UP, Keys.ARROW_DOWN, Keys.ESCAPE, Keys.ENTER];\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface UseInputKeyboardController\n  extends Pick<UseFocusedOptionControllerReturn, 'resetFocusedOption' | 'focusOption'>,\n    Pick<SelectProps, 'onInputKeyDown'> {\n  opened: boolean;\n  scrollBoxRef: React.RefObject<HTMLDivElement | null>;\n  selectFocused: () => void;\n  open: () => void;\n  close: () => void;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport function useInputKeyboardController({\n  opened,\n  resetFocusedOption,\n  focusOption,\n  scrollBoxRef,\n  selectFocused,\n  onInputKeyDown,\n  open,\n  close,\n}: UseInputKeyboardController) {\n  const handleKeyDownSelect = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      const key = pressedKey(event);\n      if (event.key.length === 1 && key !== Keys.SPACE) {\n        open();\n        resetFocusedOption();\n        return;\n      }\n      if (!key) {\n        return;\n      }\n      const areOptionsShown = () => scrollBoxRef.current !== null;\n\n      if (KEYS_TO_PREVENT_DEFAULT.includes(key)) {\n        event.preventDefault();\n      }\n      switch (key) {\n        case Keys.ARROW_UP:\n          if (opened) {\n            areOptionsShown() && focusOption('prev');\n          } else {\n            open();\n          }\n          break;\n        case Keys.ARROW_DOWN:\n          if (opened) {\n            areOptionsShown() && focusOption('next');\n          } else {\n            open();\n          }\n          break;\n        case Keys.ESCAPE:\n          close();\n          break;\n        case Keys.BACKSPACE:\n        case Keys.DELETE: {\n          open();\n          resetFocusedOption();\n          break;\n        }\n        case Keys.ENTER:\n        case Keys.SPACE:\n          if (opened) {\n            areOptionsShown() && selectFocused();\n          } else {\n            open();\n          }\n          break;\n      }\n    },\n    [scrollBoxRef, opened, close, focusOption, open, resetFocusedOption, selectFocused],\n  );\n\n  const handleInputKeydown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      onInputKeyDown?.(event, opened);\n    },\n    [opened, onInputKeyDown],\n  );\n  const _onInputKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void = callMultiple(\n    handleKeyDownSelect,\n    handleInputKeydown,\n  );\n\n  return _onInputKeyDown;\n}\n"],"names":["React","Keys","pressedKey","callMultiple","KEYS_TO_PREVENT_DEFAULT","ARROW_UP","ARROW_DOWN","ESCAPE","ENTER","useInputKeyboardController","opened","resetFocusedOption","focusOption","scrollBoxRef","selectFocused","onInputKeyDown","open","close","handleKeyDownSelect","useCallback","event","key","length","SPACE","areOptionsShown","current","includes","preventDefault","BACKSPACE","DELETE","handleInputKeydown","_onInputKeyDown"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,UAAU,QAAQ,gCAA6B;AAC9D,SAASC,YAAY,QAAQ,+BAA4B;AAIzD,MAAMC,0BAAoC;IAACH,KAAKI,QAAQ;IAAEJ,KAAKK,UAAU;IAAEL,KAAKM,MAAM;IAAEN,KAAKO,KAAK;CAAC;AAYnG,qCAAqC,GAErC,OAAO,SAASC,2BAA2B,EACzCC,MAAM,EACNC,kBAAkB,EAClBC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,cAAc,EACdC,IAAI,EACJC,KAAK,EACsB;IAC3B,MAAMC,sBAAsBlB,MAAMmB,WAAW,CAC3C,CAACC;QACC,MAAMC,MAAMnB,WAAWkB;QACvB,IAAIA,MAAMC,GAAG,CAACC,MAAM,KAAK,KAAKD,QAAQpB,KAAKsB,KAAK,EAAE;YAChDP;YACAL;YACA;QACF;QACA,IAAI,CAACU,KAAK;YACR;QACF;QACA,MAAMG,kBAAkB,IAAMX,aAAaY,OAAO,KAAK;QAEvD,IAAIrB,wBAAwBsB,QAAQ,CAACL,MAAM;YACzCD,MAAMO,cAAc;QACtB;QACA,OAAQN;YACN,KAAKpB,KAAKI,QAAQ;gBAChB,IAAIK,QAAQ;oBACVc,qBAAqBZ,YAAY;gBACnC,OAAO;oBACLI;gBACF;gBACA;YACF,KAAKf,KAAKK,UAAU;gBAClB,IAAII,QAAQ;oBACVc,qBAAqBZ,YAAY;gBACnC,OAAO;oBACLI;gBACF;gBACA;YACF,KAAKf,KAAKM,MAAM;gBACdU;gBACA;YACF,KAAKhB,KAAK2B,SAAS;YACnB,KAAK3B,KAAK4B,MAAM;gBAAE;oBAChBb;oBACAL;oBACA;gBACF;YACA,KAAKV,KAAKO,KAAK;YACf,KAAKP,KAAKsB,KAAK;gBACb,IAAIb,QAAQ;oBACVc,qBAAqBV;gBACvB,OAAO;oBACLE;gBACF;gBACA;QACJ;IACF,GACA;QAACH;QAAcH;QAAQO;QAAOL;QAAaI;QAAML;QAAoBG;KAAc;IAGrF,MAAMgB,qBAAqB9B,MAAMmB,WAAW,CAC1C,CAACC;QACCL,iBAAiBK,OAAOV;IAC1B,GACA;QAACA;QAAQK;KAAe;IAE1B,MAAMgB,kBAAsE5B,aAC1Ee,qBACAY;IAGF,OAAOC;AACT"}

package/dist/cssm/components/CustomSelect/hooks/useInputValueController.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../../../lib/useIsomorphicLayoutEffect.js";
+import { calculateInputValueFromOptions } from "../helpers.js";
+/* eslint-enable jsdoc/require-jsdoc */ export function useInputValueController({ options, accessible, selectedValue, onInputChange: onInputChangeProp }) {
+    const [inputValue, setInputValue] = React.useState('');
+    const optionsRef = React.useRef(options);
+    useIsomorphicLayoutEffect(()=>{
+        optionsRef.current = options;
+    }, [
+        options
+    ]);
+    const resetInputValueBySelectedOption = React.useCallback(()=>{
+        setInputValue(calculateInputValueFromOptions(optionsRef.current, selectedValue));
+    }, [
+        selectedValue
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        if (accessible) {
+            resetInputValueBySelectedOption();
+        }
+    }, [
+        accessible,
+        resetInputValueBySelectedOption
+    ]);
+    const resetInputValue = React.useCallback(()=>{
+        setInputValue('');
+    }, []);
+    const onInputChange = React.useCallback((e)=>{
+        onInputChangeProp && onInputChangeProp(e);
+        setInputValue(e.target.value);
+    }, [
+        onInputChangeProp,
+        setInputValue
+    ]);
+    return {
+        inputValue,
+        resetInputValue,
+        resetInputValueBySelectedOption,
+        onInputChange
+    };
+}
+
+//# sourceMappingURL=useInputValueController.js.map

package/dist/cssm/components/CustomSelect/hooks/useInputValueController.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/CustomSelect/hooks/useInputValueController.ts"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport { type SelectValue } from '../../NativeSelect/NativeSelect';\nimport { type SelectProps } from '../CustomSelect';\nimport { calculateInputValueFromOptions } from '../helpers';\nimport { type CustomSelectOptionInterface } from '../types';\n\n/* eslint-disable jsdoc/require-jsdoc */\ntype UseInputValueControllerProps<OptionInterfaceT extends CustomSelectOptionInterface> = Pick<\n  SelectProps<OptionInterfaceT>,\n  'options' | 'onInputChange' | 'accessible'\n> & {\n  selectedValue: SelectValue;\n};\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport function useInputValueController<OptionInterfaceT extends CustomSelectOptionInterface>({\n  options,\n  accessible,\n  selectedValue,\n  onInputChange: onInputChangeProp,\n}: UseInputValueControllerProps<OptionInterfaceT>) {\n  const [inputValue, setInputValue] = React.useState('');\n  const optionsRef = React.useRef(options);\n\n  useIsomorphicLayoutEffect(() => {\n    optionsRef.current = options;\n  }, [options]);\n\n  const resetInputValueBySelectedOption = React.useCallback(() => {\n    setInputValue(calculateInputValueFromOptions(optionsRef.current, selectedValue));\n  }, [selectedValue]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (accessible) {\n      resetInputValueBySelectedOption();\n    }\n  }, [accessible, resetInputValueBySelectedOption]);\n\n  const resetInputValue = React.useCallback(() => {\n    setInputValue('');\n  }, []);\n\n  const onInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      onInputChangeProp && onInputChangeProp(e);\n      setInputValue(e.target.value);\n    },\n    [onInputChangeProp, setInputValue],\n  );\n\n  return {\n    inputValue,\n    resetInputValue,\n    resetInputValueBySelectedOption,\n    onInputChange,\n  };\n}\n"],"names":["React","useIsomorphicLayoutEffect","calculateInputValueFromOptions","useInputValueController","options","accessible","selectedValue","onInputChange","onInputChangeProp","inputValue","setInputValue","useState","optionsRef","useRef","current","resetInputValueBySelectedOption","useCallback","resetInputValue","e","target","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,4CAAyC;AAGnF,SAASC,8BAA8B,QAAQ,gBAAa;AAU5D,qCAAqC,GAErC,OAAO,SAASC,wBAA8E,EAC5FC,OAAO,EACPC,UAAU,EACVC,aAAa,EACbC,eAAeC,iBAAiB,EACe;IAC/C,MAAM,CAACC,YAAYC,cAAc,GAAGV,MAAMW,QAAQ,CAAC;IACnD,MAAMC,aAAaZ,MAAMa,MAAM,CAACT;IAEhCH,0BAA0B;QACxBW,WAAWE,OAAO,GAAGV;IACvB,GAAG;QAACA;KAAQ;IAEZ,MAAMW,kCAAkCf,MAAMgB,WAAW,CAAC;QACxDN,cAAcR,+BAA+BU,WAAWE,OAAO,EAAER;IACnE,GAAG;QAACA;KAAc;IAElBL,0BAA0B;QACxB,IAAII,YAAY;YACdU;QACF;IACF,GAAG;QAACV;QAAYU;KAAgC;IAEhD,MAAME,kBAAkBjB,MAAMgB,WAAW,CAAC;QACxCN,cAAc;IAChB,GAAG,EAAE;IAEL,MAAMH,gBAA4DP,MAAMgB,WAAW,CACjF,CAACE;QACCV,qBAAqBA,kBAAkBU;QACvCR,cAAcQ,EAAEC,MAAM,CAACC,KAAK;IAC9B,GACA;QAACZ;QAAmBE;KAAc;IAGpC,OAAO;QACLD;QACAQ;QACAF;QACAR;IACF;AACF"}

package/dist/cssm/components/CustomSelect/hooks/useScrollListController.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+/* eslint-enable jsdoc/require-jsdoc */ export function useScrollListController() {
+    const scrollBoxRef = React.useRef(null);
+    const optionsWrapperRef = React.useRef(null);
+    const scrollToElement = React.useCallback((index, center = false)=>{
+        const dropdown = scrollBoxRef.current;
+        const optionsWrapper = optionsWrapperRef.current;
+        if (!dropdown || !optionsWrapper || index < 0 || index > optionsWrapper.children.length) {
+            return;
+        }
+        const item = optionsWrapper.children[index];
+        /* istanbul ignore if: проверка для TS (ситуация, когда среди children нет элемента с index, маловероятна) */ if (!item) {
+            return;
+        }
+        const dropdownHeight = dropdown.offsetHeight;
+        const scrollTop = dropdown.scrollTop;
+        const itemTop = item.offsetTop;
+        const itemHeight = item.offsetHeight;
+        if (center) {
+            dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;
+        } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {
+            dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;
+        } else if (itemTop < scrollTop) {
+            dropdown.scrollTop = itemTop;
+        }
+    }, [
+        optionsWrapperRef,
+        scrollBoxRef
+    ]);
+    return {
+        scrollToElement,
+        scrollBoxRef,
+        optionsWrapperRef
+    };
+}
+
+//# sourceMappingURL=useScrollListController.js.map

package/dist/cssm/components/CustomSelect/hooks/useScrollListController.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/CustomSelect/hooks/useScrollListController.ts"],"sourcesContent":["import * as React from 'react';\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface UseScrollListControllerReturn {\n  scrollBoxRef: React.RefObject<HTMLDivElement | null>;\n  optionsWrapperRef: React.RefObject<HTMLDivElement | null>;\n  scrollToElement: (index: number, center?: boolean) => void;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport function useScrollListController(): UseScrollListControllerReturn {\n  const scrollBoxRef = React.useRef<HTMLDivElement | null>(null);\n  const optionsWrapperRef = React.useRef<HTMLDivElement>(null);\n\n  const scrollToElement = React.useCallback(\n    (index: number, center = false) => {\n      const dropdown = scrollBoxRef.current;\n      const optionsWrapper = optionsWrapperRef.current;\n\n      if (!dropdown || !optionsWrapper || index < 0 || index > optionsWrapper.children.length) {\n        return;\n      }\n      const item = optionsWrapper.children[index] as HTMLElement | null;\n      /* istanbul ignore if: проверка для TS (ситуация, когда среди children нет элемента с index, маловероятна) */\n      if (!item) {\n        return;\n      }\n\n      const dropdownHeight = dropdown.offsetHeight;\n      const scrollTop = dropdown.scrollTop;\n      const itemTop = item.offsetTop;\n      const itemHeight = item.offsetHeight;\n\n      if (center) {\n        dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n      } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n        dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n      } else if (itemTop < scrollTop) {\n        dropdown.scrollTop = itemTop;\n      }\n    },\n    [optionsWrapperRef, scrollBoxRef],\n  );\n\n  return { scrollToElement, scrollBoxRef, optionsWrapperRef };\n}\n"],"names":["React","useScrollListController","scrollBoxRef","useRef","optionsWrapperRef","scrollToElement","useCallback","index","center","dropdown","current","optionsWrapper","children","length","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAQ/B,qCAAqC,GAErC,OAAO,SAASC;IACd,MAAMC,eAAeF,MAAMG,MAAM,CAAwB;IACzD,MAAMC,oBAAoBJ,MAAMG,MAAM,CAAiB;IAEvD,MAAME,kBAAkBL,MAAMM,WAAW,CACvC,CAACC,OAAeC,SAAS,KAAK;QAC5B,MAAMC,WAAWP,aAAaQ,OAAO;QACrC,MAAMC,iBAAiBP,kBAAkBM,OAAO;QAEhD,IAAI,CAACD,YAAY,CAACE,kBAAkBJ,QAAQ,KAAKA,QAAQI,eAAeC,QAAQ,CAACC,MAAM,EAAE;YACvF;QACF;QACA,MAAMC,OAAOH,eAAeC,QAAQ,CAACL,MAAM;QAC3C,2GAA2G,GAC3G,IAAI,CAACO,MAAM;YACT;QACF;QAEA,MAAMC,iBAAiBN,SAASO,YAAY;QAC5C,MAAMC,YAAYR,SAASQ,SAAS;QACpC,MAAMC,UAAUJ,KAAKK,SAAS;QAC9B,MAAMC,aAAaN,KAAKE,YAAY;QAEpC,IAAIR,QAAQ;YACVC,SAASQ,SAAS,GAAGC,UAAUH,iBAAiB,IAAIK,aAAa;QACnE,OAAO,IAAIF,UAAUE,aAAaL,iBAAiBE,WAAW;YAC5DR,SAASQ,SAAS,GAAGC,UAAUH,iBAAiBK;QAClD,OAAO,IAAIF,UAAUD,WAAW;YAC9BR,SAASQ,SAAS,GAAGC;QACvB;IACF,GACA;QAACd;QAAmBF;KAAa;IAGnC,OAAO;QAAEG;QAAiBH;QAAcE;IAAkB;AAC5D"}

package/dist/cssm/components/CustomSelect/hooks/useSelectedOptionController.js

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { useStateWithPrev } from "../../../hooks/useStateWithPrev.js";
+import { NOT_SELECTED, remapFromNativeValueToSelectValue, remapFromSelectValueToNativeValue } from "../../NativeSelect/NativeSelect.js";
+/* eslint-enable jsdoc/require-jsdoc */ export function useSelectedOptionController({ value, defaultValue, isControlledOutside, allowClearButton, onChange }) {
+    const [[nativeSelectValue, prevNativeSelectValue], setNativeSelectValue] = useStateWithPrev(()=>{
+        if (value !== undefined) {
+            return remapFromSelectValueToNativeValue(value);
+        }
+        if (defaultValue !== undefined) {
+            return remapFromSelectValueToNativeValue(defaultValue);
+        }
+        return NOT_SELECTED.NATIVE;
+    });
+    const nativeSelectValueRef = React.useRef(nativeSelectValue);
+    const [selectedOptionValue, setSelectedOptionValue] = React.useState(()=>remapFromNativeValueToSelectValue(nativeSelectValue));
+    const _setNativeSelectValue = React.useCallback((newValue)=>{
+        setNativeSelectValue(newValue);
+        nativeSelectValueRef.current = newValue;
+    }, [
+        setNativeSelectValue
+    ]);
+    React.useEffect(function syncNativeSelectValueWithPropValue() {
+        if (value !== undefined) {
+            _setNativeSelectValue(remapFromSelectValueToNativeValue(value));
+        }
+    }, [
+        value,
+        _setNativeSelectValue
+    ]);
+    React.useEffect(function syncNativeSelectValueWithSelectedOptionValue() {
+        const remappedSelectedValue = remapFromSelectValueToNativeValue(selectedOptionValue);
+        if (nativeSelectValueRef.current !== remappedSelectedValue) {
+            setNativeSelectValue(remappedSelectedValue);
+        }
+    }, [
+        selectedOptionValue,
+        setNativeSelectValue
+    ]);
+    const onNativeSelectChange = (e)=>{
+        // для ситуаций, когда в опциях value это string а value/defaultValue это number
+        // и наоборот, приводим значение nativeSelectValue из стейта к строке.
+        // ведь nativeSelect всегда возвращает string в onChange, а пользователь
+        // может использовать number для опций
+        //
+        // native select всегда возвращает string в качестве value в onChange
+        // Когда селект контролируемый, то пользователь, в onChange может сохранить в свой стейт строку (например '3'), хотя
+        // в качестве value опции может использовать число (3),
+        // тогда строчное значение value ('3') из стейта пользователя
+        // будет передано в CustomSelect, и после синхронизации nativeSelectValue (3) и props.value ('3') и после клика на уже выбранную опцию (3),
+        // когда nativeSelectValue обновится на значение опции (число 3),
+        // сравнение nativeSelectValue (3) и prevNativeSelectValue ('3') может не сработать лишь из-за того, что они в разных типах.
+        const convertedNativeSelectValue = typeof nativeSelectValue === 'number' && (typeof value === 'string' || typeof prevNativeSelectValue === 'string') ? String(nativeSelectValue) : nativeSelectValue;
+        const isCalledWithSameControlledOptionValue = isControlledOutside && value === remapFromNativeValueToSelectValue(convertedNativeSelectValue);
+        const isNativeValueChanged = convertedNativeSelectValue !== prevNativeSelectValue && prevNativeSelectValue !== undefined;
+        const isTriggeredByClearButton = allowClearButton && // Проверяем, что новое значение NOT_SELECTED.NATIVE
+        nativeSelectValue === NOT_SELECTED.NATIVE && // Проверяем, что предыдущее значение не undefined(кейс с первой отрисовкой, когда предыдущего значения не было)
+        prevNativeSelectValue !== undefined && // Проверяем, что предыдущее значение не NOT_SELECTED.NATIVE(если до этого было уже сброшенное значение)
+        prevNativeSelectValue !== NOT_SELECTED.NATIVE;
+        const shouldCallOnChange = !isCalledWithSameControlledOptionValue && (isNativeValueChanged || isTriggeredByClearButton);
+        if (!shouldCallOnChange) {
+            return;
+        }
+        const remappedNativeValue = remapFromNativeValueToSelectValue(e.currentTarget.value);
+        if (e.target.value === NOT_SELECTED.NATIVE) {
+            e.target.value = '';
+        }
+        if (e.currentTarget.value === NOT_SELECTED.NATIVE) {
+            e.currentTarget.value = '';
+        }
+        onChange?.(e, remappedNativeValue);
+    };
+    return {
+        selectedOptionValue,
+        setSelectedOptionValue,
+        nativeSelectValue,
+        setNativeSelectValue: _setNativeSelectValue,
+        onNativeSelectChange
+    };
+}
+
+//# sourceMappingURL=useSelectedOptionController.js.map

package/dist/cssm/components/CustomSelect/hooks/useSelectedOptionController.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/CustomSelect/hooks/useSelectedOptionController.ts"],"sourcesContent":["import { type ChangeEvent } from 'react';\nimport * as React from 'react';\nimport { useStateWithPrev } from '../../../hooks/useStateWithPrev';\nimport {\n  type NativeSelectValue,\n  NOT_SELECTED,\n  remapFromNativeValueToSelectValue,\n  remapFromSelectValueToNativeValue,\n  type SelectValue,\n} from '../../NativeSelect/NativeSelect';\nimport { type SelectProps } from '../CustomSelect';\n\n/* eslint-disable jsdoc/require-jsdoc */\ntype UseSelectedOptionControllerProps = Pick<SelectProps, 'value' | 'defaultValue'> & {\n  isControlledOutside: boolean;\n  allowClearButton: boolean;\n  onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;\n};\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport function useSelectedOptionController({\n  value,\n  defaultValue,\n  isControlledOutside,\n  allowClearButton,\n  onChange,\n}: UseSelectedOptionControllerProps) {\n  const [[nativeSelectValue, prevNativeSelectValue], setNativeSelectValue] =\n    useStateWithPrev<NativeSelectValue>(() => {\n      if (value !== undefined) {\n        return remapFromSelectValueToNativeValue(value);\n      }\n      if (defaultValue !== undefined) {\n        return remapFromSelectValueToNativeValue(defaultValue);\n      }\n      return NOT_SELECTED.NATIVE;\n    });\n  const nativeSelectValueRef = React.useRef<NativeSelectValue>(nativeSelectValue);\n\n  const [selectedOptionValue, setSelectedOptionValue] = React.useState<SelectValue>(() =>\n    remapFromNativeValueToSelectValue(nativeSelectValue),\n  );\n\n  const _setNativeSelectValue = React.useCallback(\n    (newValue: NativeSelectValue) => {\n      setNativeSelectValue(newValue);\n      nativeSelectValueRef.current = newValue;\n    },\n    [setNativeSelectValue],\n  );\n\n  React.useEffect(\n    function syncNativeSelectValueWithPropValue() {\n      if (value !== undefined) {\n        _setNativeSelectValue(remapFromSelectValueToNativeValue(value));\n      }\n    },\n    [value, _setNativeSelectValue],\n  );\n\n  React.useEffect(\n    function syncNativeSelectValueWithSelectedOptionValue() {\n      const remappedSelectedValue = remapFromSelectValueToNativeValue(selectedOptionValue);\n      if (nativeSelectValueRef.current !== remappedSelectedValue) {\n        setNativeSelectValue(remappedSelectedValue);\n      }\n    },\n    [selectedOptionValue, setNativeSelectValue],\n  );\n\n  const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n    // для ситуаций, когда в опциях value это string а value/defaultValue это number\n    // и наоборот, приводим значение nativeSelectValue из стейта к строке.\n    // ведь nativeSelect всегда возвращает string в onChange, а пользователь\n    // может использовать number для опций\n    //\n    // native select всегда возвращает string в качестве value в onChange\n    // Когда селект контролируемый, то пользователь, в onChange может сохранить в свой стейт строку (например '3'), хотя\n    // в качестве value опции может использовать число (3),\n    // тогда строчное значение value ('3') из стейта пользователя\n    // будет передано в CustomSelect, и после синхронизации nativeSelectValue (3) и props.value ('3') и после клика на уже выбранную опцию (3),\n    // когда nativeSelectValue обновится на значение опции (число 3),\n    // сравнение nativeSelectValue (3) и prevNativeSelectValue ('3') может не сработать лишь из-за того, что они в разных типах.\n    const convertedNativeSelectValue =\n      typeof nativeSelectValue === 'number' &&\n      (typeof value === 'string' || typeof prevNativeSelectValue === 'string')\n        ? String(nativeSelectValue)\n        : nativeSelectValue;\n\n    const isCalledWithSameControlledOptionValue =\n      isControlledOutside &&\n      value === remapFromNativeValueToSelectValue(convertedNativeSelectValue);\n\n    const isNativeValueChanged =\n      convertedNativeSelectValue !== prevNativeSelectValue && prevNativeSelectValue !== undefined;\n\n    const isTriggeredByClearButton =\n      allowClearButton &&\n      // Проверяем, что новое значение NOT_SELECTED.NATIVE\n      nativeSelectValue === NOT_SELECTED.NATIVE &&\n      // Проверяем, что предыдущее значение не undefined(кейс с первой отрисовкой, когда предыдущего значения не было)\n      prevNativeSelectValue !== undefined &&\n      // Проверяем, что предыдущее значение не NOT_SELECTED.NATIVE(если до этого было уже сброшенное значение)\n      prevNativeSelectValue !== NOT_SELECTED.NATIVE;\n\n    const shouldCallOnChange =\n      !isCalledWithSameControlledOptionValue && (isNativeValueChanged || isTriggeredByClearButton);\n\n    if (!shouldCallOnChange) {\n      return;\n    }\n\n    const remappedNativeValue = remapFromNativeValueToSelectValue(e.currentTarget.value);\n\n    if (e.target.value === NOT_SELECTED.NATIVE) {\n      e.target.value = '';\n    }\n    if (e.currentTarget.value === NOT_SELECTED.NATIVE) {\n      e.currentTarget.value = '';\n    }\n\n    onChange?.(e, remappedNativeValue);\n  };\n\n  return {\n    selectedOptionValue,\n    setSelectedOptionValue,\n    nativeSelectValue,\n    setNativeSelectValue: _setNativeSelectValue,\n    onNativeSelectChange,\n  };\n}\n"],"names":["React","useStateWithPrev","NOT_SELECTED","remapFromNativeValueToSelectValue","remapFromSelectValueToNativeValue","useSelectedOptionController","value","defaultValue","isControlledOutside","allowClearButton","onChange","nativeSelectValue","prevNativeSelectValue","setNativeSelectValue","undefined","NATIVE","nativeSelectValueRef","useRef","selectedOptionValue","setSelectedOptionValue","useState","_setNativeSelectValue","useCallback","newValue","current","useEffect","syncNativeSelectValueWithPropValue","syncNativeSelectValueWithSelectedOptionValue","remappedSelectedValue","onNativeSelectChange","e","convertedNativeSelectValue","String","isCalledWithSameControlledOptionValue","isNativeValueChanged","isTriggeredByClearButton","shouldCallOnChange","remappedNativeValue","currentTarget","target"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,qCAAkC;AACnE,SAEEC,YAAY,EACZC,iCAAiC,EACjCC,iCAAiC,QAE5B,qCAAkC;AASzC,qCAAqC,GAErC,OAAO,SAASC,4BAA4B,EAC1CC,KAAK,EACLC,YAAY,EACZC,mBAAmB,EACnBC,gBAAgB,EAChBC,QAAQ,EACyB;IACjC,MAAM,CAAC,CAACC,mBAAmBC,sBAAsB,EAAEC,qBAAqB,GACtEZ,iBAAoC;QAClC,IAAIK,UAAUQ,WAAW;YACvB,OAAOV,kCAAkCE;QAC3C;QACA,IAAIC,iBAAiBO,WAAW;YAC9B,OAAOV,kCAAkCG;QAC3C;QACA,OAAOL,aAAaa,MAAM;IAC5B;IACF,MAAMC,uBAAuBhB,MAAMiB,MAAM,CAAoBN;IAE7D,MAAM,CAACO,qBAAqBC,uBAAuB,GAAGnB,MAAMoB,QAAQ,CAAc,IAChFjB,kCAAkCQ;IAGpC,MAAMU,wBAAwBrB,MAAMsB,WAAW,CAC7C,CAACC;QACCV,qBAAqBU;QACrBP,qBAAqBQ,OAAO,GAAGD;IACjC,GACA;QAACV;KAAqB;IAGxBb,MAAMyB,SAAS,CACb,SAASC;QACP,IAAIpB,UAAUQ,WAAW;YACvBO,sBAAsBjB,kCAAkCE;QAC1D;IACF,GACA;QAACA;QAAOe;KAAsB;IAGhCrB,MAAMyB,SAAS,CACb,SAASE;QACP,MAAMC,wBAAwBxB,kCAAkCc;QAChE,IAAIF,qBAAqBQ,OAAO,KAAKI,uBAAuB;YAC1Df,qBAAqBe;QACvB;IACF,GACA;QAACV;QAAqBL;KAAqB;IAG7C,MAAMgB,uBAAoE,CAACC;QACzE,gFAAgF;QAChF,sEAAsE;QACtE,wEAAwE;QACxE,sCAAsC;QACtC,EAAE;QACF,qEAAqE;QACrE,oHAAoH;QACpH,uDAAuD;QACvD,6DAA6D;QAC7D,2IAA2I;QAC3I,iEAAiE;QACjE,4HAA4H;QAC5H,MAAMC,6BACJ,OAAOpB,sBAAsB,YAC5B,CAAA,OAAOL,UAAU,YAAY,OAAOM,0BAA0B,QAAO,IAClEoB,OAAOrB,qBACPA;QAEN,MAAMsB,wCACJzB,uBACAF,UAAUH,kCAAkC4B;QAE9C,MAAMG,uBACJH,+BAA+BnB,yBAAyBA,0BAA0BE;QAEpF,MAAMqB,2BACJ1B,oBACA,oDAAoD;QACpDE,sBAAsBT,aAAaa,MAAM,IACzC,gHAAgH;QAChHH,0BAA0BE,aAC1B,wGAAwG;QACxGF,0BAA0BV,aAAaa,MAAM;QAE/C,MAAMqB,qBACJ,CAACH,yCAA0CC,CAAAA,wBAAwBC,wBAAuB;QAE5F,IAAI,CAACC,oBAAoB;YACvB;QACF;QAEA,MAAMC,sBAAsBlC,kCAAkC2B,EAAEQ,aAAa,CAAChC,KAAK;QAEnF,IAAIwB,EAAES,MAAM,CAACjC,KAAK,KAAKJ,aAAaa,MAAM,EAAE;YAC1Ce,EAAES,MAAM,CAACjC,KAAK,GAAG;QACnB;QACA,IAAIwB,EAAEQ,aAAa,CAAChC,KAAK,KAAKJ,aAAaa,MAAM,EAAE;YACjDe,EAAEQ,aAAa,CAAChC,KAAK,GAAG;QAC1B;QAEAI,WAAWoB,GAAGO;IAChB;IAEA,OAAO;QACLnB;QACAC;QACAR;QACAE,sBAAsBQ;QACtBQ;IACF;AACF"}

package/dist/cssm/components/CustomSelect/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/cssm/components/CustomSelect/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/CustomSelect/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport { type Alignment, type Side } from '../../lib/floating';\nimport { type CustomSelectOptionProps } from '../CustomSelectOption/CustomSelectOption';\nimport { type SelectValue } from '../NativeSelect/NativeSelect';\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport type MousePosition = {\n  x: React.MouseEvent['clientX'];\n  y: React.MouseEvent['clientY'];\n};\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport interface CustomSelectOptionInterface {\n  /**\n   * Значение.\n   */\n  value: Exclude<SelectValue, null>;\n  /**\n   * Отображаемый текст.\n   */\n  label: React.ReactElement | string;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n  [index: string]: any;\n}\n\nexport interface CustomSelectRenderOption<T extends CustomSelectOptionInterface>\n  extends CustomSelectOptionProps {\n  /**\n   * Данные об опции.\n   */\n  option: T;\n}\n\ntype PopupDirectionSide = Extract<Side, 'top' | 'bottom'>;\nexport type PopupDirection = PopupDirectionSide | `${PopupDirectionSide}-${Alignment}`;\n"],"names":[],"mappings":"AAqCA,WAAuF"}

package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js

@@ -22,6 +22,7 @@ overscrollBehavior, ...restProps })=>{
             className: noMaxHeight ? undefined : styles.inWithMaxHeight,
             overscrollBehavior: overscrollBehavior,
             tabIndex: -1,
+            "aria-busy": fetching,
             children: fetching ? /*#__PURE__*/ _jsx("div", {
                 className: styles.fetching,
                 children: /*#__PURE__*/ _jsx(Spinner, {

package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomSelectDropdown/CustomSelectDropdown.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasDataAttribute, HTMLAttributesWithRootRef } from '../../types';\nimport { CustomScrollView, type CustomScrollViewProps } from '../CustomScrollView/CustomScrollView';\nimport { Popper } from '../Popper/Popper';\nimport { Spinner } from '../Spinner/Spinner';\nimport styles from './CustomSelectDropdown.module.css';\n\nexport interface CustomSelectDropdownProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<CustomScrollViewProps, 'overscrollBehavior'>,\n    HasDataAttribute {\n  targetRef: React.RefObject<HTMLElement | null>;\n  placement?: Placement;\n  scrollBoxRef?: React.Ref<HTMLDivElement>;\n  fetching?: boolean;\n  offsetDistance?: number;\n  /**\n   * Ширина раскрывающегося списка зависит от контента.\n   */\n  autoWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (placement: Placement) => void;\n  /**\n   * Отключает максимальную высоту по умолчанию.\n   */\n  noMaxHeight?: boolean;\n}\n\nexport const CustomSelectDropdown = ({\n  children,\n  targetRef,\n  scrollBoxRef,\n  placement = 'bottom',\n  fetching,\n  offsetDistance = 0,\n  autoWidth = false,\n  forcePortal = true,\n  className,\n  noMaxHeight = false,\n  // CustomScrollView\n  overscrollBehavior,\n  ...restProps\n}: CustomSelectDropdownProps): React.ReactNode => {\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetByMainAxis={offsetDistance}\n      sameWidth={!autoWidth}\n      placement={placement}\n      className={classNames(\n        styles.host,\n        'vkuiInternalCustomSelectDropdown',\n        offsetDistance === 0 && (placement.includes('top') ? styles.top : styles.bottom),\n        autoWidth && classNames(styles.wide, 'vkuiInternalCustomSelectDropdown--wide'),\n        className,\n      )}\n      usePortal={forcePortal}\n      autoUpdateOnTargetResize\n      flipMiddlewareFallbackAxisSideDirection=\"none\"\n      {...restProps}\n    >\n      <CustomScrollView\n        getRootRef={scrollBoxRef}\n        className={noMaxHeight ? undefined : styles.inWithMaxHeight}\n        overscrollBehavior={overscrollBehavior}\n        tabIndex={-1}\n      >\n        {fetching ? (\n          <div className={styles.fetching}>\n            <Spinner size=\"s\" />\n          </div>\n        ) : (\n          children\n        )}\n      </CustomScrollView>\n    </Popper>\n  );\n};\n"],"names":["React","classNames","CustomScrollView","Popper","Spinner","styles","CustomSelectDropdown","children","targetRef","scrollBoxRef","placement","fetching","offsetDistance","autoWidth","forcePortal","className","noMaxHeight","overscrollBehavior","restProps","offsetByMainAxis","sameWidth","host","includes","top","bottom","wide","usePortal","autoUpdateOnTargetResize","flipMiddlewareFallbackAxisSideDirection","getRootRef","undefined","inWithMaxHeight","tabIndex","div","size"],"mappings":"AAAA,sCAAsC;AAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,gBAAgB,QAAoC,0CAAuC;AACpG,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,OAAOC,YAAY,oCAAoC;AAuBvD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,YAAY,QAAQ,EACpBC,QAAQ,EACRC,iBAAiB,CAAC,EAClBC,YAAY,KAAK,EACjBC,cAAc,IAAI,EAClBC,SAAS,EACTC,cAAc,KAAK,EACnB,mBAAmB;AACnBC,kBAAkB,EAClB,GAAGC,WACuB;IAC1B,qBACE,KAACf;QACCK,WAAWA;QACXW,kBAAkBP;QAClBQ,WAAW,CAACP;QACZH,WAAWA;QACXK,WAAWd,WACTI,OAAOgB,IAAI,EACX,oCACAT,mBAAmB,KAAMF,CAAAA,UAAUY,QAAQ,CAAC,SAASjB,OAAOkB,GAAG,GAAGlB,OAAOmB,MAAM,AAAD,GAC9EX,aAAaZ,WAAWI,OAAOoB,IAAI,EAAE,2CACrCV;QAEFW,WAAWZ;QACXa,wBAAwB;QACxBC,yCAAwC;QACvC,GAAGV,SAAS;kBAEb,cAAA,KAAChB;YACC2B,YAAYpB;YACZM,WAAWC,cAAcc,YAAYzB,OAAO0B,eAAe;YAC3Dd,oBAAoBA;YACpBe,UAAU,CAAC;sBAEVrB,yBACC,KAACsB;gBAAIlB,WAAWV,OAAOM,QAAQ;0BAC7B,cAAA,KAACP;oBAAQ8B,MAAK;;iBAGhB3B;;;AAKV,EAAE"}
+{"version":3,"sources":["../../../../src/components/CustomSelectDropdown/CustomSelectDropdown.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasDataAttribute, HTMLAttributesWithRootRef } from '../../types';\nimport { CustomScrollView, type CustomScrollViewProps } from '../CustomScrollView/CustomScrollView';\nimport { Popper } from '../Popper/Popper';\nimport { Spinner } from '../Spinner/Spinner';\nimport styles from './CustomSelectDropdown.module.css';\n\nexport interface CustomSelectDropdownProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<CustomScrollViewProps, 'overscrollBehavior'>,\n    HasDataAttribute {\n  targetRef: React.RefObject<HTMLElement | null>;\n  placement?: Placement;\n  scrollBoxRef?: React.Ref<HTMLDivElement>;\n  fetching?: boolean;\n  offsetDistance?: number;\n  /**\n   * Ширина раскрывающегося списка зависит от контента.\n   */\n  autoWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (placement: Placement) => void;\n  /**\n   * Отключает максимальную высоту по умолчанию.\n   */\n  noMaxHeight?: boolean;\n}\n\nexport const CustomSelectDropdown = ({\n  children,\n  targetRef,\n  scrollBoxRef,\n  placement = 'bottom',\n  fetching,\n  offsetDistance = 0,\n  autoWidth = false,\n  forcePortal = true,\n  className,\n  noMaxHeight = false,\n  // CustomScrollView\n  overscrollBehavior,\n  ...restProps\n}: CustomSelectDropdownProps): React.ReactNode => {\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetByMainAxis={offsetDistance}\n      sameWidth={!autoWidth}\n      placement={placement}\n      className={classNames(\n        styles.host,\n        'vkuiInternalCustomSelectDropdown',\n        offsetDistance === 0 && (placement.includes('top') ? styles.top : styles.bottom),\n        autoWidth && classNames(styles.wide, 'vkuiInternalCustomSelectDropdown--wide'),\n        className,\n      )}\n      usePortal={forcePortal}\n      autoUpdateOnTargetResize\n      flipMiddlewareFallbackAxisSideDirection=\"none\"\n      {...restProps}\n    >\n      <CustomScrollView\n        getRootRef={scrollBoxRef}\n        className={noMaxHeight ? undefined : styles.inWithMaxHeight}\n        overscrollBehavior={overscrollBehavior}\n        tabIndex={-1}\n        aria-busy={fetching}\n      >\n        {fetching ? (\n          <div className={styles.fetching}>\n            <Spinner size=\"s\" />\n          </div>\n        ) : (\n          children\n        )}\n      </CustomScrollView>\n    </Popper>\n  );\n};\n"],"names":["React","classNames","CustomScrollView","Popper","Spinner","styles","CustomSelectDropdown","children","targetRef","scrollBoxRef","placement","fetching","offsetDistance","autoWidth","forcePortal","className","noMaxHeight","overscrollBehavior","restProps","offsetByMainAxis","sameWidth","host","includes","top","bottom","wide","usePortal","autoUpdateOnTargetResize","flipMiddlewareFallbackAxisSideDirection","getRootRef","undefined","inWithMaxHeight","tabIndex","aria-busy","div","size"],"mappings":"AAAA,sCAAsC;AAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,gBAAgB,QAAoC,0CAAuC;AACpG,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,OAAOC,YAAY,oCAAoC;AAuBvD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZC,YAAY,QAAQ,EACpBC,QAAQ,EACRC,iBAAiB,CAAC,EAClBC,YAAY,KAAK,EACjBC,cAAc,IAAI,EAClBC,SAAS,EACTC,cAAc,KAAK,EACnB,mBAAmB;AACnBC,kBAAkB,EAClB,GAAGC,WACuB;IAC1B,qBACE,KAACf;QACCK,WAAWA;QACXW,kBAAkBP;QAClBQ,WAAW,CAACP;QACZH,WAAWA;QACXK,WAAWd,WACTI,OAAOgB,IAAI,EACX,oCACAT,mBAAmB,KAAMF,CAAAA,UAAUY,QAAQ,CAAC,SAASjB,OAAOkB,GAAG,GAAGlB,OAAOmB,MAAM,AAAD,GAC9EX,aAAaZ,WAAWI,OAAOoB,IAAI,EAAE,2CACrCV;QAEFW,WAAWZ;QACXa,wBAAwB;QACxBC,yCAAwC;QACvC,GAAGV,SAAS;kBAEb,cAAA,KAAChB;YACC2B,YAAYpB;YACZM,WAAWC,cAAcc,YAAYzB,OAAO0B,eAAe;YAC3Dd,oBAAoBA;YACpBe,UAAU,CAAC;YACXC,aAAWtB;sBAEVA,yBACC,KAACuB;gBAAInB,WAAWV,OAAOM,QAAQ;0BAC7B,cAAA,KAACP;oBAAQ+B,MAAK;;iBAGhB5B;;;AAKV,EAAE"}

package/dist/cssm/components/DateInput/DateInput.js

@@ -7,7 +7,7 @@ import { startOfDay, startOfMinute } from "date-fns";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useDateInput } from "../../hooks/useDateInput.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
-import { format, isMatch, parse } from "../../lib/date.js";
+import { dateFormatter, dateTimeFormatter, isMatch, parse } from "../../lib/date.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { Calendar } from "../Calendar/Calendar.js";
 import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
@@ -260,7 +260,7 @@ const CALENDAR_MUTATION_OBSERVER_OPTIONS = {
                         "aria-hidden": true,
                         tabIndex: readOnly ? 0 : -1,
                         name: name,
-                        value: value ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : 'dd.MM.yyyy') : '',
+                        value: value ? enableTime ? dateTimeFormatter.format(value) : dateFormatter.format(value) : '',
                         onFocus: handleFieldEnter
                     }),
                     /*#__PURE__*/ _jsxs(Text, {
@@ -358,6 +358,7 @@ const CALENDAR_MUTATION_OBSERVER_OPTIONS = {
                     customValue && /*#__PURE__*/ _jsx(Text, {
                         className: styles.customValue,
                         "aria-hidden": true,
+                        normalize: false,
                         children: customValue
                     })
                 ]

package/dist/cssm/components/DateInput/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { startOfDay, startOfMinute } from 'date-fns';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { NumberInputLike } from '../NumberInputLike/NumberInputLike';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { useDateInputValue } from './hooks';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type DateInputPropsTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для поля ввода дня.\n   */\n  dayFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода месяца.\n   */\n  monthFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода года.\n   */\n  yearFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода часа.\n   */\n  hourFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода минут.\n   */\n  minuteFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки показа календаря.\n   */\n  showCalendarButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки даты.\n   */\n  clearButtonTestId?: string;\n};\n\nexport interface DateInputProps\n  extends Omit<\n      React.InputHTMLAttributes<HTMLDivElement>,\n      'value' | 'defaultValue' | 'onChange' | 'size'\n    >,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'defaultValue'\n      | 'doneButtonText'\n      | 'DoneButton'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursLabel'\n      | 'changeMinutesLabel'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'minDateTime'\n      | 'maxDateTime'\n      | 'renderDayContent'\n    >,\n    Pick<UseFocusTrapProps, 'restoreFocus'>,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'>,\n    DateInputPropsTestsProps {\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в календаре.\n   */\n  calendarTestsProps?: CalendarTestsProps;\n  /**\n   * Расположение календаря относительно поля ввода.\n   */\n  calendarPlacement?: PlacementWithAuto;\n  /**\n   * Автоматически закрывать календарь при изменениях.\n   */\n  closeOnChange?: boolean;\n  /**\n   * `aria-label` для календаря.\n   */\n  calendarLabel?: string;\n  /**\n   * Label для кнопки очистки. Делает доступным для ассистивных технологий.\n   */\n  clearFieldLabel?: string;\n  /**\n   * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.\n   */\n  showCalendarLabel?: string;\n  /**\n   * Отключение открытия календаря.\n   */\n  disableCalendar?: boolean;\n  /**\n   * Обработчик изменения состояния открытия календаря.\n   */\n  onCalendarOpenChanged?: (opened: boolean) => void;\n  /**\n   * `aria-label` для поля изменения дня.\n   */\n  changeDayLabel?: string;\n  /**\n   * Обработчик нажатия на кнопку `\"Done\"`. Используется совместно с флагом `enableTime`.\n   */\n  onApply?: (value?: Date) => void;\n  /**\n   * Функция для кастомного форматирования отображаемого значения даты.\n   * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.\n   */\n  renderCustomValue?: (date: Date | undefined) => React.ReactNode;\n  /**\n   * Часовой пояс для отображения даты.\n   */\n  timezone?: string;\n  /**\n   * Включает режим в котором DateInput доступен\n   * для ассистивных технологий.\n   * В этом режиме:\n   * - календарь больше не открывает при фокусе на DateInput;\n   * - иконка календаря видна всегда, чтобы пользователи\n   * ассистивных технологий могли открыть календарь по клику на иконку;\n   * - календарь при открытии получает фокус, клавиатурный\n   * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт.\n   */\n  accessible?: boolean /* TODO [>=v8] включить по умолчанию */;\n  /**\n   * Позволяет отключить захват фокуса при появлении календаря.\n   */\n  disableFocusTrap?: UseFocusTrapProps['disabled'];\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\nconst CALENDAR_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {\n  childList: true,\n  subtree: true,\n  attributes: true,\n  attributeFilter: ['tabindex'],\n};\n\n/**\n * @see https://vkui.io/components/date-input\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  minDateTime,\n  maxDateTime,\n  'value': valueProp,\n  defaultValue,\n  onChange,\n  'calendarPlacement': calendarPlacementProp = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  DoneButton,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  accessible,\n  calendarLabel = 'Календарь',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeDayLabel = 'День',\n  changeMonthLabel = 'Месяц',\n  changeYearLabel = 'Год',\n  changeHoursLabel = 'Час',\n  changeMinutesLabel = 'Минута',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  showNeighboringMonth,\n  size,\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  renderDayContent,\n  onCalendarOpenChanged,\n  calendarTestsProps,\n  dayFieldTestId,\n  monthFieldTestId,\n  yearFieldTestId,\n  hourFieldTestId,\n  minuteFieldTestId,\n  showCalendarButtonTestId,\n  clearButtonTestId,\n  id,\n  onApply,\n  renderCustomValue,\n  timezone,\n  restoreFocus,\n  disableFocusTrap,\n  readOnly,\n  'disableCalendar': disableCalendarProp = false,\n  'aria-label': ariaLabel = '',\n  ...props\n}: DateInputProps): React.ReactNode => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const disableCalendar = readOnly ? true : disableCalendarProp;\n\n  const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } =\n    useDateInputValue({\n      value: valueProp,\n      defaultValue,\n      onChange,\n      timezone,\n    });\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'dd.MM.yyyy';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        const now = new Date();\n        updateValue(\n          parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),\n        );\n      }\n    },\n    [enableTime, maxElement, updateValue, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n    closeCalendar,\n    toggleCalendar,\n    openCalendar,\n    handleRestoreFocus,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled: disabled || readOnly,\n    elementsConfig,\n    onClear: clearValue,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n    onCalendarOpenChanged,\n    accessible,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  useIsomorphicLayoutEffect(\n    function resetValueOnCloseCalendar() {\n      if (!open) {\n        setInternalValue(getLastUpdatedValue());\n      }\n    },\n    [open, getLastUpdatedValue],\n  );\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      if (!value) {\n        return;\n      }\n      if (enableTime) {\n        setInternalValue(value);\n        return;\n      }\n      updateValue(value);\n      if (closeOnChange) {\n        removeFocusFromField();\n      }\n    },\n    [enableTime, updateValue, closeOnChange, setInternalValue, removeFocusFromField],\n  );\n\n  const onDoneButtonClick = React.useCallback(() => {\n    if (!value) {\n      return;\n    }\n    const newValue = updateValue(value);\n    onApply?.(newValue);\n    removeFocusFromField();\n  }, [onApply, removeFocusFromField, updateValue, value]);\n\n  const customValue = React.useMemo(\n    () => !open && renderCustomValue?.(value || undefined),\n    [open, renderCustomValue, value],\n  );\n\n  // при переключении месяцев высота календаря может меняться,\n  // чтобы календарь не прыгал при переключении месяцев каждый раз на\n  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n  // на ней, пока помещается.\n  const [calendarPlacement, setCalendarPlacement] =\n    React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n  const { locale } = useConfigProvider();\n  const currentDateLabel = value\n    ? new Intl.DateTimeFormat(locale, {\n        weekday: 'long',\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n      }).format(value)\n    : null;\n  const currentDateLabelId = React.useId();\n  const ariaLabelId = React.useId();\n\n  const showCalendarOnInputAreaClick = React.useCallback(() => {\n    handleFieldEnter();\n    if (accessible) {\n      openCalendar();\n    }\n  }, [handleFieldEnter, openCalendar, accessible]);\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      role=\"group\"\n      aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}\n      after={\n        <React.Fragment>\n          {!disableCalendar && (accessible || (!accessible && !value)) ? (\n            <IconButton\n              hoverMode=\"opacity\"\n              label={showCalendarLabel}\n              onClick={toggleCalendar}\n              data-testid={showCalendarButtonTestId}\n            >\n              <Icon20CalendarOutline />\n            </IconButton>\n          ) : null}\n          {value && !readOnly ? (\n            <IconButton\n              hoverMode=\"opacity\"\n              label={clearFieldLabel}\n              onClick={clear}\n              data-testid={clearButtonTestId}\n            >\n              <Icon16Clear />\n            </IconButton>\n          ) : null}\n        </React.Fragment>\n      }\n      disabled={disabled}\n      {...props}\n    >\n      <div className={styles.wrapper}>\n        {ariaLabel && <VisuallyHidden id={ariaLabelId}>{ariaLabel}</VisuallyHidden>}\n        {currentDateLabel && (\n          <VisuallyHidden id={currentDateLabelId}>{currentDateLabel}</VisuallyHidden>\n        )}\n        <VisuallyHidden\n          id={id}\n          Component=\"input\"\n          readOnly\n          aria-hidden\n          tabIndex={readOnly ? 0 : -1}\n          name={name}\n          value={value ? format(value, enableTime ? \"dd.MM.yyyy'T'HH:mm\" : 'dd.MM.yyyy') : ''}\n          onFocus={handleFieldEnter}\n        />\n        <Text\n          className={classNames(styles.input, customValue && styles.hidden)}\n          // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n          // из-за чего `.Typography--normalize` перебивает стили.\n          normalize={false}\n          Component=\"span\" // для <span> нормализация не нужна\n          onClick={showCalendarOnInputAreaClick}\n        >\n          <NumberInputLike\n            value={internalValue[0]}\n            minValue={1}\n            maxValue={31}\n            length={2}\n            getRootRef={daysRef}\n            index={0}\n            onKeyDown={handleKeyDown}\n            onElementSelect={setFocusedElement}\n            label={changeDayLabel}\n            readOnly={readOnly}\n            data-testid={dayFieldTestId}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[1]}\n            minValue={1}\n            maxValue={12}\n            length={2}\n            getRootRef={monthsRef}\n            index={1}\n            onElementSelect={setFocusedElement}\n            onKeyDown={handleKeyDown}\n            readOnly={readOnly}\n            label={changeMonthLabel}\n            data-testid={monthFieldTestId}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[2]}\n            minValue={1}\n            maxValue={275750}\n            length={4}\n            getRootRef={yearsRef}\n            index={2}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeYearLabel}\n            onKeyDown={handleKeyDown}\n            data-testid={yearFieldTestId}\n          />\n          {enableTime && (\n            <React.Fragment>\n              <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>\n              <NumberInputLike\n                value={internalValue[3]}\n                minValue={1}\n                maxValue={24}\n                length={2}\n                getRootRef={hoursRef}\n                index={3}\n                onElementSelect={setFocusedElement}\n                readOnly={readOnly}\n                label={changeHoursLabel}\n                onKeyDown={handleKeyDown}\n                data-testid={hourFieldTestId}\n              />\n              <InputLikeDivider>:</InputLikeDivider>\n              <NumberInputLike\n                value={internalValue[4]}\n                minValue={1}\n                maxValue={59}\n                length={2}\n                getRootRef={minutesRef}\n                index={4}\n                onElementSelect={setFocusedElement}\n                readOnly={readOnly}\n                label={changeMinutesLabel}\n                onKeyDown={handleKeyDown}\n                data-testid={minuteFieldTestId}\n              />\n            </React.Fragment>\n          )}\n        </Text>\n        {customValue && (\n          <Text className={styles.customValue} aria-hidden>\n            {customValue}\n          </Text>\n        )}\n      </div>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          onPlacementChange={setCalendarPlacement}\n          autoUpdateOnTargetResize\n        >\n          <FocusTrap\n            onClose={closeCalendar}\n            disabled={disableFocusTrap ?? !accessible}\n            restoreFocus={restoreFocus ?? (Boolean(accessible) && handleRestoreFocus)}\n            captureEscapeKeyboardEvent={false}\n            mutationObserverOptions={CALENDAR_MUTATION_OBSERVER_OPTIONS}\n          >\n            <Calendar\n              aria-label={calendarLabel}\n              role=\"dialog\"\n              value={value}\n              onChange={onCalendarChange}\n              enableTime={enableTime}\n              disablePast={disablePast}\n              disableFuture={disableFuture}\n              shouldDisableDate={shouldDisableDate}\n              onDoneButtonClick={onDoneButtonClick}\n              getRootRef={calendarRef}\n              doneButtonText={doneButtonText}\n              DoneButton={DoneButton}\n              disablePickers={disablePickers}\n              changeHoursLabel={changeHoursLabel}\n              changeMinutesLabel={changeMinutesLabel}\n              prevMonthLabel={prevMonthLabel}\n              nextMonthLabel={nextMonthLabel}\n              changeMonthLabel={changeMonthLabel}\n              changeYearLabel={changeYearLabel}\n              showNeighboringMonth={showNeighboringMonth}\n              renderDayContent={renderDayContent}\n              size={size}\n              viewDate={viewDate}\n              onHeaderChange={onHeaderChange}\n              onNextMonth={onNextMonth}\n              onPrevMonth={onPrevMonth}\n              prevMonthIcon={prevMonthIcon}\n              nextMonthIcon={nextMonthIcon}\n              minDateTime={minDateTime}\n              maxDateTime={maxDateTime}\n              {...calendarTestsProps}\n            />\n          </FocusTrap>\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","startOfDay","startOfMinute","useAdaptivity","useDateInput","useExternRef","format","isMatch","parse","useIsomorphicLayoutEffect","Calendar","useConfigProvider","FocusTrap","FormField","IconButton","InputLikeDivider","NumberInputLike","Popper","Text","VisuallyHidden","useDateInputValue","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","CALENDAR_MUTATION_OBSERVER_OPTIONS","childList","subtree","attributes","attributeFilter","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","valueProp","defaultValue","onChange","calendarPlacementProp","style","className","doneButtonText","DoneButton","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","accessible","calendarLabel","prevMonthLabel","nextMonthLabel","changeDayLabel","changeMonthLabel","changeYearLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","showNeighboringMonth","size","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","renderDayContent","onCalendarOpenChanged","calendarTestsProps","dayFieldTestId","monthFieldTestId","yearFieldTestId","hourFieldTestId","minuteFieldTestId","showCalendarButtonTestId","clearButtonTestId","id","onApply","renderCustomValue","timezone","restoreFocus","disableFocusTrap","readOnly","disableCalendarProp","ariaLabel","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","disableCalendar","updateValue","setInternalValue","getLastUpdatedValue","clearValue","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","now","Date","refs","useMemo","rootRef","calendarRef","open","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","closeCalendar","toggleCalendar","openCalendar","handleRestoreFocus","onClear","sizeY","handleRootRef","resetValueOnCloseCalendar","onCalendarChange","onDoneButtonClick","customValue","undefined","calendarPlacement","setCalendarPlacement","useState","locale","currentDateLabel","Intl","DateTimeFormat","weekday","year","month","day","currentDateLabelId","useId","ariaLabelId","showCalendarOnInputAreaClick","role","aria-labelledby","after","Fragment","hoverMode","label","onClick","data-testid","div","wrapper","Component","aria-hidden","tabIndex","onFocus","input","hidden","normalize","minValue","maxValue","onKeyDown","onElementSelect","inputTimeDivider","targetRef","offsetByMainAxis","placement","onPlacementChange","autoUpdateOnTargetResize","onClose","Boolean","captureEscapeKeyboardEvent","mutationObserverOptions","aria-label"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { startOfDay, startOfMinute } from 'date-fns';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { dateFormatter, dateTimeFormatter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { NumberInputLike } from '../NumberInputLike/NumberInputLike';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { useDateInputValue } from './hooks';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type DateInputPropsTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для поля ввода дня.\n   */\n  dayFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода месяца.\n   */\n  monthFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода года.\n   */\n  yearFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода часа.\n   */\n  hourFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода минут.\n   */\n  minuteFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки показа календаря.\n   */\n  showCalendarButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки даты.\n   */\n  clearButtonTestId?: string;\n};\n\nexport interface DateInputProps\n  extends Omit<\n      React.InputHTMLAttributes<HTMLDivElement>,\n      'value' | 'defaultValue' | 'onChange' | 'size'\n    >,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'defaultValue'\n      | 'doneButtonText'\n      | 'DoneButton'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursLabel'\n      | 'changeMinutesLabel'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'minDateTime'\n      | 'maxDateTime'\n      | 'renderDayContent'\n    >,\n    Pick<UseFocusTrapProps, 'restoreFocus'>,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'>,\n    DateInputPropsTestsProps {\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в календаре.\n   */\n  calendarTestsProps?: CalendarTestsProps;\n  /**\n   * Расположение календаря относительно поля ввода.\n   */\n  calendarPlacement?: PlacementWithAuto;\n  /**\n   * Автоматически закрывать календарь при изменениях.\n   */\n  closeOnChange?: boolean;\n  /**\n   * `aria-label` для календаря.\n   */\n  calendarLabel?: string;\n  /**\n   * Label для кнопки очистки. Делает доступным для ассистивных технологий.\n   */\n  clearFieldLabel?: string;\n  /**\n   * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.\n   */\n  showCalendarLabel?: string;\n  /**\n   * Отключение открытия календаря.\n   */\n  disableCalendar?: boolean;\n  /**\n   * Обработчик изменения состояния открытия календаря.\n   */\n  onCalendarOpenChanged?: (opened: boolean) => void;\n  /**\n   * `aria-label` для поля изменения дня.\n   */\n  changeDayLabel?: string;\n  /**\n   * Обработчик нажатия на кнопку `\"Done\"`. Используется совместно с флагом `enableTime`.\n   */\n  onApply?: (value?: Date) => void;\n  /**\n   * Функция для кастомного форматирования отображаемого значения даты.\n   * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.\n   */\n  renderCustomValue?: (date: Date | undefined) => React.ReactNode;\n  /**\n   * Часовой пояс для отображения даты.\n   */\n  timezone?: string;\n  /**\n   * Включает режим в котором DateInput доступен\n   * для ассистивных технологий.\n   * В этом режиме:\n   * - календарь больше не открывает при фокусе на DateInput;\n   * - иконка календаря видна всегда, чтобы пользователи\n   * ассистивных технологий могли открыть календарь по клику на иконку;\n   * - календарь при открытии получает фокус, клавиатурный\n   * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт.\n   */\n  accessible?: boolean /* TODO [>=v8] включить по умолчанию */;\n  /**\n   * Позволяет отключить захват фокуса при появлении календаря.\n   */\n  disableFocusTrap?: UseFocusTrapProps['disabled'];\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\nconst CALENDAR_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {\n  childList: true,\n  subtree: true,\n  attributes: true,\n  attributeFilter: ['tabindex'],\n};\n\n/**\n * @see https://vkui.io/components/date-input\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  minDateTime,\n  maxDateTime,\n  'value': valueProp,\n  defaultValue,\n  onChange,\n  'calendarPlacement': calendarPlacementProp = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  DoneButton,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  accessible,\n  calendarLabel = 'Календарь',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeDayLabel = 'День',\n  changeMonthLabel = 'Месяц',\n  changeYearLabel = 'Год',\n  changeHoursLabel = 'Час',\n  changeMinutesLabel = 'Минута',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  showNeighboringMonth,\n  size,\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  renderDayContent,\n  onCalendarOpenChanged,\n  calendarTestsProps,\n  dayFieldTestId,\n  monthFieldTestId,\n  yearFieldTestId,\n  hourFieldTestId,\n  minuteFieldTestId,\n  showCalendarButtonTestId,\n  clearButtonTestId,\n  id,\n  onApply,\n  renderCustomValue,\n  timezone,\n  restoreFocus,\n  disableFocusTrap,\n  readOnly,\n  'disableCalendar': disableCalendarProp = false,\n  'aria-label': ariaLabel = '',\n  ...props\n}: DateInputProps): React.ReactNode => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const disableCalendar = readOnly ? true : disableCalendarProp;\n\n  const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } =\n    useDateInputValue({\n      value: valueProp,\n      defaultValue,\n      onChange,\n      timezone,\n    });\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'dd.MM.yyyy';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        const now = new Date();\n        updateValue(\n          parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),\n        );\n      }\n    },\n    [enableTime, maxElement, updateValue, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n    closeCalendar,\n    toggleCalendar,\n    openCalendar,\n    handleRestoreFocus,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled: disabled || readOnly,\n    elementsConfig,\n    onClear: clearValue,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n    onCalendarOpenChanged,\n    accessible,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  useIsomorphicLayoutEffect(\n    function resetValueOnCloseCalendar() {\n      if (!open) {\n        setInternalValue(getLastUpdatedValue());\n      }\n    },\n    [open, getLastUpdatedValue],\n  );\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      if (!value) {\n        return;\n      }\n      if (enableTime) {\n        setInternalValue(value);\n        return;\n      }\n      updateValue(value);\n      if (closeOnChange) {\n        removeFocusFromField();\n      }\n    },\n    [enableTime, updateValue, closeOnChange, setInternalValue, removeFocusFromField],\n  );\n\n  const onDoneButtonClick = React.useCallback(() => {\n    if (!value) {\n      return;\n    }\n    const newValue = updateValue(value);\n    onApply?.(newValue);\n    removeFocusFromField();\n  }, [onApply, removeFocusFromField, updateValue, value]);\n\n  const customValue = React.useMemo(\n    () => !open && renderCustomValue?.(value || undefined),\n    [open, renderCustomValue, value],\n  );\n\n  // при переключении месяцев высота календаря может меняться,\n  // чтобы календарь не прыгал при переключении месяцев каждый раз на\n  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n  // на ней, пока помещается.\n  const [calendarPlacement, setCalendarPlacement] =\n    React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n  const { locale } = useConfigProvider();\n  const currentDateLabel = value\n    ? new Intl.DateTimeFormat(locale, {\n        weekday: 'long',\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n      }).format(value)\n    : null;\n  const currentDateLabelId = React.useId();\n  const ariaLabelId = React.useId();\n\n  const showCalendarOnInputAreaClick = React.useCallback(() => {\n    handleFieldEnter();\n    if (accessible) {\n      openCalendar();\n    }\n  }, [handleFieldEnter, openCalendar, accessible]);\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      role=\"group\"\n      aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}\n      after={\n        <React.Fragment>\n          {!disableCalendar && (accessible || (!accessible && !value)) ? (\n            <IconButton\n              hoverMode=\"opacity\"\n              label={showCalendarLabel}\n              onClick={toggleCalendar}\n              data-testid={showCalendarButtonTestId}\n            >\n              <Icon20CalendarOutline />\n            </IconButton>\n          ) : null}\n          {value && !readOnly ? (\n            <IconButton\n              hoverMode=\"opacity\"\n              label={clearFieldLabel}\n              onClick={clear}\n              data-testid={clearButtonTestId}\n            >\n              <Icon16Clear />\n            </IconButton>\n          ) : null}\n        </React.Fragment>\n      }\n      disabled={disabled}\n      {...props}\n    >\n      <div className={styles.wrapper}>\n        {ariaLabel && <VisuallyHidden id={ariaLabelId}>{ariaLabel}</VisuallyHidden>}\n        {currentDateLabel && (\n          <VisuallyHidden id={currentDateLabelId}>{currentDateLabel}</VisuallyHidden>\n        )}\n        <VisuallyHidden\n          id={id}\n          Component=\"input\"\n          readOnly\n          aria-hidden\n          tabIndex={readOnly ? 0 : -1}\n          name={name}\n          value={\n            value\n              ? enableTime\n                ? dateTimeFormatter.format(value)\n                : dateFormatter.format(value)\n              : ''\n          }\n          onFocus={handleFieldEnter}\n        />\n        <Text\n          className={classNames(styles.input, customValue && styles.hidden)}\n          // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n          // из-за чего `.Typography--normalize` перебивает стили.\n          normalize={false}\n          Component=\"span\" // для <span> нормализация не нужна\n          onClick={showCalendarOnInputAreaClick}\n        >\n          <NumberInputLike\n            value={internalValue[0]}\n            minValue={1}\n            maxValue={31}\n            length={2}\n            getRootRef={daysRef}\n            index={0}\n            onKeyDown={handleKeyDown}\n            onElementSelect={setFocusedElement}\n            label={changeDayLabel}\n            readOnly={readOnly}\n            data-testid={dayFieldTestId}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[1]}\n            minValue={1}\n            maxValue={12}\n            length={2}\n            getRootRef={monthsRef}\n            index={1}\n            onElementSelect={setFocusedElement}\n            onKeyDown={handleKeyDown}\n            readOnly={readOnly}\n            label={changeMonthLabel}\n            data-testid={monthFieldTestId}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <NumberInputLike\n            value={internalValue[2]}\n            minValue={1}\n            maxValue={275750}\n            length={4}\n            getRootRef={yearsRef}\n            index={2}\n            onElementSelect={setFocusedElement}\n            readOnly={readOnly}\n            label={changeYearLabel}\n            onKeyDown={handleKeyDown}\n            data-testid={yearFieldTestId}\n          />\n          {enableTime && (\n            <React.Fragment>\n              <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>\n              <NumberInputLike\n                value={internalValue[3]}\n                minValue={1}\n                maxValue={24}\n                length={2}\n                getRootRef={hoursRef}\n                index={3}\n                onElementSelect={setFocusedElement}\n                readOnly={readOnly}\n                label={changeHoursLabel}\n                onKeyDown={handleKeyDown}\n                data-testid={hourFieldTestId}\n              />\n              <InputLikeDivider>:</InputLikeDivider>\n              <NumberInputLike\n                value={internalValue[4]}\n                minValue={1}\n                maxValue={59}\n                length={2}\n                getRootRef={minutesRef}\n                index={4}\n                onElementSelect={setFocusedElement}\n                readOnly={readOnly}\n                label={changeMinutesLabel}\n                onKeyDown={handleKeyDown}\n                data-testid={minuteFieldTestId}\n              />\n            </React.Fragment>\n          )}\n        </Text>\n        {customValue && (\n          <Text className={styles.customValue} aria-hidden normalize={false}>\n            {customValue}\n          </Text>\n        )}\n      </div>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          onPlacementChange={setCalendarPlacement}\n          autoUpdateOnTargetResize\n        >\n          <FocusTrap\n            onClose={closeCalendar}\n            disabled={disableFocusTrap ?? !accessible}\n            restoreFocus={restoreFocus ?? (Boolean(accessible) && handleRestoreFocus)}\n            captureEscapeKeyboardEvent={false}\n            mutationObserverOptions={CALENDAR_MUTATION_OBSERVER_OPTIONS}\n          >\n            <Calendar\n              aria-label={calendarLabel}\n              role=\"dialog\"\n              value={value}\n              onChange={onCalendarChange}\n              enableTime={enableTime}\n              disablePast={disablePast}\n              disableFuture={disableFuture}\n              shouldDisableDate={shouldDisableDate}\n              onDoneButtonClick={onDoneButtonClick}\n              getRootRef={calendarRef}\n              doneButtonText={doneButtonText}\n              DoneButton={DoneButton}\n              disablePickers={disablePickers}\n              changeHoursLabel={changeHoursLabel}\n              changeMinutesLabel={changeMinutesLabel}\n              prevMonthLabel={prevMonthLabel}\n              nextMonthLabel={nextMonthLabel}\n              changeMonthLabel={changeMonthLabel}\n              changeYearLabel={changeYearLabel}\n              showNeighboringMonth={showNeighboringMonth}\n              renderDayContent={renderDayContent}\n              size={size}\n              viewDate={viewDate}\n              onHeaderChange={onHeaderChange}\n              onNextMonth={onNextMonth}\n              onPrevMonth={onPrevMonth}\n              prevMonthIcon={prevMonthIcon}\n              nextMonthIcon={nextMonthIcon}\n              minDateTime={minDateTime}\n              maxDateTime={maxDateTime}\n              {...calendarTestsProps}\n            />\n          </FocusTrap>\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","startOfDay","startOfMinute","useAdaptivity","useDateInput","useExternRef","dateFormatter","dateTimeFormatter","isMatch","parse","useIsomorphicLayoutEffect","Calendar","useConfigProvider","FocusTrap","FormField","IconButton","InputLikeDivider","NumberInputLike","Popper","Text","VisuallyHidden","useDateInputValue","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","CALENDAR_MUTATION_OBSERVER_OPTIONS","childList","subtree","attributes","attributeFilter","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","valueProp","defaultValue","onChange","calendarPlacementProp","style","className","doneButtonText","DoneButton","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","accessible","calendarLabel","prevMonthLabel","nextMonthLabel","changeDayLabel","changeMonthLabel","changeYearLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","showNeighboringMonth","size","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","renderDayContent","onCalendarOpenChanged","calendarTestsProps","dayFieldTestId","monthFieldTestId","yearFieldTestId","hourFieldTestId","minuteFieldTestId","showCalendarButtonTestId","clearButtonTestId","id","onApply","renderCustomValue","timezone","restoreFocus","disableFocusTrap","readOnly","disableCalendarProp","ariaLabel","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","disableCalendar","updateValue","setInternalValue","getLastUpdatedValue","clearValue","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","now","Date","refs","useMemo","rootRef","calendarRef","open","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","closeCalendar","toggleCalendar","openCalendar","handleRestoreFocus","onClear","sizeY","handleRootRef","resetValueOnCloseCalendar","onCalendarChange","onDoneButtonClick","customValue","undefined","calendarPlacement","setCalendarPlacement","useState","locale","currentDateLabel","Intl","DateTimeFormat","weekday","year","month","day","format","currentDateLabelId","useId","ariaLabelId","showCalendarOnInputAreaClick","role","aria-labelledby","after","Fragment","hoverMode","label","onClick","data-testid","div","wrapper","Component","aria-hidden","tabIndex","onFocus","input","hidden","normalize","minValue","maxValue","onKeyDown","onElementSelect","inputTimeDivider","targetRef","offsetByMainAxis","placement","onPlacementChange","autoUpdateOnTargetResize","onClose","Boolean","captureEscapeKeyboardEvent","mutationObserverOptions","aria-label"],"mappings":"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"}