@vkontakte/vkui 6.5.2 → 6.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/cjs/components/CustomSelect/CustomSelect.js +9 -4
- package/dist/cjs/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cjs/components/ImageBase/ImageBase.js +4 -1
- package/dist/cjs/components/ImageBase/ImageBase.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.js +9 -4
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/ImageBase/ImageBase.js +4 -1
- package/dist/components/ImageBase/ImageBase.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/components.js.tmp +12 -5
- package/dist/cssm/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.js +7 -3
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/ImageBase/ImageBase.js +4 -1
- package/dist/cssm/components/ImageBase/ImageBase.js.map +1 -1
- package/dist/cssm/components/ImageBase/ImageBase.module.css +13 -2
- package/dist/vkui.css +1 -1
- package/dist/vkui.css.map +1 -1
- package/dist/vkui.js.tmp +12 -5
- package/package.json +1 -1
- package/src/components/CustomSelect/CustomSelect.tsx +6 -3
- package/src/components/ImageBase/ImageBase.module.css +13 -2
- package/src/components/ImageBase/ImageBase.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,2BAA2B,CAAC;AASnC,OAAO,KAAK,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAiCrF,YAAY,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,CAAC;AAEpG,MAAM,WAAW,WAAW,CAC1B,gBAAgB,SAAS,2BAA2B,GAAG,2BAA2B,CAClF,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,mBAAmB,EACnB,IAAI,CACF,yBAAyB,EACzB,oBAAoB,GAAG,mBAAmB,GAAG,wBAAwB,CACtE;IACH;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtF;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;GAEG;AACH,wBAAgB,YAAY,CAAC,gBAAgB,SAAS,2BAA2B,EAC/E,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GACnC,KAAK,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,2BAA2B,CAAC;AASnC,OAAO,KAAK,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAiCrF,YAAY,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,CAAC;AAEpG,MAAM,WAAW,WAAW,CAC1B,gBAAgB,SAAS,2BAA2B,GAAG,2BAA2B,CAClF,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,mBAAmB,EACnB,IAAI,CACF,yBAAyB,EACzB,oBAAoB,GAAG,mBAAmB,GAAG,wBAAwB,CACtE;IACH;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtF;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;GAEG;AACH,wBAAgB,YAAY,CAAC,gBAAgB,SAAS,2BAA2B,EAC/E,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GACnC,KAAK,CAAC,SAAS,CAosBjB"}
|
|
@@ -92,6 +92,7 @@ function CustomSelect(props) {
|
|
|
92
92
|
const scrollBoxRef = _react.useRef(null);
|
|
93
93
|
const selectElRef = (0, _useExternRef.useExternRef)(getRef);
|
|
94
94
|
const optionsWrapperRef = _react.useRef(null);
|
|
95
|
+
const selectInputRef = (0, _useExternRef.useExternRef)(getSelectInputRef);
|
|
95
96
|
const [focusedOptionIndex, setFocusedOptionIndex] = _react.useState(-1);
|
|
96
97
|
const [isControlledOutside, setIsControlledOutside] = _react.useState(props.value !== undefined);
|
|
97
98
|
const [nativeSelectValue, setNativeSelectValue] = _react.useState(()=>{
|
|
@@ -279,13 +280,15 @@ function CustomSelect(props) {
|
|
|
279
280
|
nativeSelectValue
|
|
280
281
|
]);
|
|
281
282
|
const onFocus = _react.useCallback(()=>{
|
|
282
|
-
var _selectElRef_current;
|
|
283
|
+
var _selectElRef_current, _selectInputRef_current;
|
|
283
284
|
const event = new Event('focusin', {
|
|
284
285
|
bubbles: true
|
|
285
286
|
});
|
|
286
287
|
(_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
|
|
288
|
+
(_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.select();
|
|
287
289
|
}, [
|
|
288
|
-
selectElRef
|
|
290
|
+
selectElRef,
|
|
291
|
+
selectInputRef
|
|
289
292
|
]);
|
|
290
293
|
const onClick = _react.useCallback(()=>{
|
|
291
294
|
if (opened) {
|
|
@@ -512,7 +515,6 @@ function CustomSelect(props) {
|
|
|
512
515
|
renderDropdown,
|
|
513
516
|
renderOption
|
|
514
517
|
]);
|
|
515
|
-
const selectInputRef = (0, _useExternRef.useExternRef)(getSelectInputRef);
|
|
516
518
|
const focusOnInputTimerRef = _react.useRef();
|
|
517
519
|
const focusOnInput = _react.useCallback(()=>{
|
|
518
520
|
clearTimeout(focusOnInputTimerRef.current);
|
|
@@ -598,11 +600,14 @@ function CustomSelect(props) {
|
|
|
598
600
|
selectInputRef
|
|
599
601
|
]);
|
|
600
602
|
const preventInputBlurWhenClickInsideFocusedSelectArea = (e)=>{
|
|
603
|
+
var _selectInputRef_current;
|
|
601
604
|
// Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,
|
|
602
605
|
// но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.
|
|
603
606
|
// Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки
|
|
604
607
|
const isInputFocused = document && document.activeElement === selectInputRef.current;
|
|
605
|
-
|
|
608
|
+
const clickTarget = e.target;
|
|
609
|
+
const inputClicked = (_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.contains(clickTarget);
|
|
610
|
+
if (isInputFocused && !inputClicked) {
|
|
606
611
|
e.preventDefault();
|
|
607
612
|
}
|
|
608
613
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, debounce } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn, type FilterFn } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport {\n CustomSelectDropdown,\n CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormFieldProps } from '../FormField/FormField';\nimport { NativeSelectProps } from '../NativeSelect/NativeSelect';\nimport { SelectType } from '../Select/Select';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n CustomSelectClearButton,\n type CustomSelectClearButtonProps,\n} from './CustomSelectClearButton';\nimport { CustomSelectInput } from './CustomSelectInput';\nimport {\n calculateInputValueFromOptions,\n defaultRenderOptionFn,\n findIndexAfter,\n findIndexBefore,\n findSelectedIndex,\n} from './helpers';\nimport type { CustomSelectOptionInterface, CustomSelectRenderOption } from './types';\nimport styles from './CustomSelect.module.css';\n\nconst sizeYClassNames = {\n none: styles['CustomSelect--sizeY-none'],\n ['compact']: styles['CustomSelect--sizeY-compact'],\n};\n\nconst warn = warnOnce('CustomSelect');\n\nconst checkOptionsValueType = <T extends CustomSelectOptionInterface>(options: T[]) => {\n if (new Set(options.map((item) => typeof item.value)).size > 1) {\n warn(\n 'Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.',\n 'error',\n );\n }\n};\n\nconst handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n};\n\nconst filter = <T extends CustomSelectOptionInterface>(\n options: SelectProps<T>['options'],\n inputValue: string,\n filterFn: SelectProps<T>['filterFn'],\n) => {\n return typeof filterFn === 'function'\n ? options.filter((option) => filterFn(inputValue, option))\n : options;\n};\n\nexport type { CustomSelectClearButtonProps, CustomSelectOptionInterface, CustomSelectRenderOption };\n\nexport interface SelectProps<\n OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface,\n> extends NativeSelectProps,\n Omit<FormFieldProps, 'maxHeight'>,\n TrackerOptionsProps,\n Pick<\n CustomSelectDropdownProps,\n 'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'\n > {\n /**\n * ref на внутрений компонент input\n */\n getSelectInputRef?: React.Ref<HTMLInputElement>;\n /**\n * Если `true`, то при клике на `CustomSelect` в нём появится текстовое поле для поиска по `options`. По умолчанию поиск\n * производится по `option.label`.\n */\n searchable?: boolean;\n /**\n * Текст, который будет отображен, если приходит пустой `options`.\n */\n emptyText?: string;\n /**\n * Событие изменения текстового поля\n */\n onInputChange?: (e: React.ChangeEvent) => void;\n options: OptionInterfaceT[];\n /**\n * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.\n */\n filterFn?: false | FilterFn<OptionInterfaceT>;\n popupDirection?: 'top' | 'bottom';\n /**\n * Рендер-проп для кастомного рендера опции.\n * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)\n *\n * > ⚠️ Важно: cвойство опции `disabled` должно выставляться только через проп `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе `CustomSelect` не будет знать об актуальном состоянии\n * опции.\n */\n renderOption?: (props: CustomSelectRenderOption<OptionInterfaceT>) => React.ReactNode;\n /**\n * Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.\n */\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /**\n * Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true`\n * \"победит\" `renderDropdown`.\n */\n fetching?: boolean;\n onClose?: VoidFunction;\n onOpen?: VoidFunction;\n /**\n * Иконка раскрывающегося списка\n */\n icon?: React.ReactNode;\n /**\n * Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`\n */\n ClearButton?: React.ComponentType<CustomSelectClearButtonProps>;\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения\n */\n allowClearButton?: boolean;\n /**\n * (e2e) testId кнопки очистки\n */\n clearButtonTestId?: string;\n /**\n * Отступ от выпадающего списка\n */\n dropdownOffsetDistance?: number;\n /**\n * Ширина раскрывающегося списка зависит от контента\n */\n dropdownAutoWidth?: boolean;\n forceDropdownPortal?: boolean;\n selectType?: SelectType;\n /**\n * Отключает максимальную высоту по умолчанию\n */\n noMaxHeight?: boolean;\n /**\n * (e2e) testId элемента, внутри которого отображается текст выбранной опции `CustomSelect` или плейсхолдер.\n */\n labelTextTestId?: string;\n nativeSelectTestId?: string;\n}\n\ntype MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelect\n */\nexport function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterface>(\n props: SelectProps<OptionInterfaceT>,\n): React.ReactNode {\n const [opened, setOpened] = React.useState(false);\n const {\n before,\n name,\n className,\n getRef,\n getRootRef,\n popupDirection = 'bottom',\n style,\n onChange,\n children,\n onInputChange: onInputChangeProp,\n renderDropdown,\n onOpen,\n onClose,\n fetching,\n forceDropdownPortal,\n selectType = 'default',\n autoHideScrollbar,\n autoHideScrollbarDelay,\n searchable = false,\n renderOption: renderOptionProp = defaultRenderOptionFn,\n options: optionsProp,\n emptyText = 'Ничего не найдено',\n filterFn = defaultFilterFn,\n icon: iconProp,\n ClearButton = CustomSelectClearButton,\n allowClearButton = false,\n dropdownOffsetDistance = 0,\n dropdownAutoWidth = false,\n noMaxHeight = false,\n ['aria-labelledby']: ariaLabelledBy,\n clearButtonTestId,\n nativeSelectTestId,\n defaultValue,\n required,\n getSelectInputRef,\n overscrollBehavior,\n ...restProps\n } = props;\n\n if (process.env.NODE_ENV === 'development') {\n checkOptionsValueType(optionsProp);\n }\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const handleRootRef = useExternRef(containerRef, getRootRef);\n const scrollBoxRef = React.useRef<HTMLDivElement | null>(null);\n const selectElRef = useExternRef(getRef);\n const optionsWrapperRef = React.useRef<HTMLDivElement>(null);\n\n const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);\n const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);\n const [nativeSelectValue, setNativeSelectValue] = React.useState(\n () => props.value ?? defaultValue ?? (allowClearButton ? '' : undefined),\n );\n\n const [inputValue, setInputValue] = React.useState(() =>\n calculateInputValueFromOptions(optionsProp, nativeSelectValue),\n );\n\n const [popperPlacement, setPopperPlacement] = React.useState<Placement>(popupDirection);\n const [options, setOptions] = React.useState(optionsProp);\n const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number | undefined>(\n findSelectedIndex(optionsProp, props.value ?? defaultValue, allowClearButton),\n );\n\n React.useEffect(() => {\n setIsControlledOutside(props.value !== undefined);\n setNativeSelectValue((nativeSelectValue) => props.value ?? nativeSelectValue);\n }, [props.value]);\n\n useIsomorphicLayoutEffect(() => {\n if (\n options.some(({ value }) => nativeSelectValue === value) ||\n (allowClearButton && nativeSelectValue === '')\n ) {\n const event = new Event('change', { bubbles: true });\n\n selectElRef.current?.dispatchEvent(event);\n }\n }, [nativeSelectValue]);\n\n const selected = React.useMemo(() => {\n if (!options.length) {\n return null;\n }\n\n return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;\n }, [options, selectedOptionIndex]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (popperPlacement.includes('top')\n ? styles['CustomSelect--pop-up']\n : styles['CustomSelect--pop-down'])) ||\n undefined,\n [dropdownOffsetDistance, opened, popperPlacement],\n );\n\n const scrollToElement = React.useCallback((index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const optionsWrapper = optionsWrapperRef.current;\n const item =\n dropdown && optionsWrapper ? (optionsWrapper.children[index] as HTMLElement) : null;\n\n if (!item || !dropdown) {\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\n const focusOptionByIndex = React.useCallback(\n (index: number | undefined, scrollTo = true) => {\n if (index === undefined || index < 0 || index > (options.length ?? 0) - 1) {\n return;\n }\n\n const option = options[index];\n\n if (option?.disabled) {\n return;\n }\n\n if (scrollTo) {\n scrollToElement(index);\n }\n\n // Это оптимизация, прежде всего, под `onMouseMove`\n setFocusedOptionIndex((focusedOptionIndex) =>\n focusedOptionIndex !== index ? index : focusedOptionIndex,\n );\n },\n [options, scrollToElement],\n );\n\n const isValidIndex = React.useCallback(\n (index: number) => {\n return index >= 0 && index < (options.length ?? 0);\n },\n [options.length],\n );\n\n const setScrollBoxRef = React.useCallback(\n (ref: HTMLDivElement | null) => {\n scrollBoxRef.current = ref;\n\n if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {\n {\n scrollToElement(selectedOptionIndex, true);\n }\n }\n },\n [isValidIndex, scrollToElement, selectedOptionIndex],\n );\n\n const [keyboardInput, setKeyboardInput] = React.useState('');\n const resetKeyboardInput = React.useCallback(() => {\n setKeyboardInput('');\n }, []);\n\n const resetFocusedOption = React.useCallback(() => {\n setFocusedOptionIndex(-1);\n }, []);\n\n const onKeyboardInput = React.useCallback(\n (key: string) => {\n if (!opened) {\n setOpened(true);\n }\n resetFocusedOption();\n const fullInput = keyboardInput + key;\n\n setKeyboardInput(fullInput);\n },\n [keyboardInput, opened, resetFocusedOption],\n );\n\n /**\n * Note: сбрасывать `options` через `setOptions(optionsProp)` не нужно.\n * Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.\n */\n const close = React.useCallback(() => {\n resetKeyboardInput();\n\n setOpened(false);\n resetFocusedOption();\n onClose?.();\n }, [onClose, resetKeyboardInput, resetFocusedOption]);\n\n const selectOption = React.useCallback(\n (index: number) => {\n const item = options[index];\n\n close();\n setNativeSelectValue(item?.value);\n\n const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =\n isControlledOutside &&\n props.value !== nativeSelectValue &&\n nativeSelectValue === item?.value;\n\n if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {\n const event = new Event('change', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }\n },\n [close, options, selectElRef, isControlledOutside, props.value, nativeSelectValue],\n );\n\n const selectFocused = React.useCallback(() => {\n if (focusedOptionIndex === undefined || !isValidIndex(focusedOptionIndex)) {\n return;\n }\n\n selectOption(focusedOptionIndex);\n }, [focusedOptionIndex, isValidIndex, selectOption]);\n\n const open = React.useCallback(() => {\n setOpened(true);\n setFocusedOptionIndex(selectedOptionIndex);\n\n if (typeof onOpen === 'function') {\n onOpen();\n }\n }, [onOpen, selectedOptionIndex]);\n\n const onBlur = React.useCallback(() => {\n close();\n const event = new Event('focusout', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n\n setInputValue(calculateInputValueFromOptions(optionsProp, nativeSelectValue));\n }, [close, selectElRef, optionsProp, nativeSelectValue]);\n\n const onFocus = React.useCallback(() => {\n const event = new Event('focusin', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }, [selectElRef]);\n\n const onClick = React.useCallback(() => {\n if (opened) {\n close();\n } else {\n open();\n }\n }, [close, open, opened]);\n\n const handleKeyUp = React.useMemo(() => debounce(resetKeyboardInput, 1000), [resetKeyboardInput]);\n\n const focusOption = React.useCallback(\n (type: 'next' | 'prev') => {\n let index = focusedOptionIndex;\n\n if (type === 'next') {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === 'prev') {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index);\n },\n [focusOptionByIndex, focusedOptionIndex, options],\n );\n\n React.useEffect(\n function filterOptions() {\n const options =\n searchable && inputValue !== undefined\n ? filter(optionsProp, inputValue, filterFn)\n : optionsProp;\n\n setOptions(options);\n },\n [filterFn, inputValue, optionsProp, searchable],\n );\n\n const selectValue = props.value ?? nativeSelectValue ?? defaultValue;\n React.useEffect(\n function updateSelectedOptionIndexOnValueChange() {\n setSelectedOptionIndex(findSelectedIndex(options, selectValue, allowClearButton));\n },\n [selectValue, allowClearButton, options],\n );\n\n const prevSelectValueRef = React.useRef(selectValue);\n React.useEffect(\n function updateInputValueOnSelectValueChange() {\n if (prevSelectValueRef.current === selectValue) {\n return;\n }\n setInputValue(calculateInputValueFromOptions(optionsProp, selectValue));\n },\n [selectValue, optionsProp],\n );\n React.useEffect(\n function updatePrevSelectValue() {\n prevSelectValueRef.current = selectValue;\n },\n [selectValue],\n );\n\n const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n const newSelectedOptionIndex = findSelectedIndex(\n options,\n e.currentTarget.value,\n allowClearButton,\n );\n\n if (selectedOptionIndex !== newSelectedOptionIndex) {\n if (!isControlledOutside) {\n setSelectedOptionIndex(newSelectedOptionIndex);\n }\n onChange?.(e);\n }\n };\n\n const onInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n onInputChangeProp && onInputChangeProp(e);\n\n const options = filter(optionsProp, e.target.value, filterFn);\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n\n setInputValue(e.target.value);\n },\n [filterFn, nativeSelectValue, onInputChangeProp, optionsProp, allowClearButton],\n );\n\n const areOptionsShown = React.useCallback(() => {\n return scrollBoxRef.current !== null;\n }, []);\n\n const handleKeyDownSelect = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key.length === 1 && event.key !== ' ') {\n onKeyboardInput(event.key);\n return;\n }\n\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n if (opened) {\n areOptionsShown() && focusOption('prev');\n } else {\n open();\n }\n break;\n case 'ArrowDown':\n if (opened) {\n areOptionsShown() && focusOption('next');\n } else {\n open();\n }\n break;\n case 'Escape':\n close();\n break;\n case 'Backspace':\n case 'Delete': {\n if (!opened) {\n setOpened(true);\n }\n resetFocusedOption();\n\n break;\n }\n case 'Enter':\n case 'Spacebar':\n case ' ':\n if (opened) {\n areOptionsShown() && selectFocused();\n } else {\n open();\n }\n break;\n }\n },\n [\n areOptionsShown,\n close,\n focusOption,\n onKeyboardInput,\n open,\n opened,\n selectFocused,\n resetFocusedOption,\n ],\n );\n\n const handleOptionClick = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n const index = Array.prototype.indexOf.call(\n e.currentTarget.parentNode?.children,\n e.currentTarget,\n );\n const option = options[index];\n\n if (option && !option.disabled) {\n selectOption(index);\n }\n },\n [options, selectOption],\n );\n\n const prevMousePositionRef = React.useRef<{\n x: React.MouseEvent['clientX'];\n y: React.MouseEvent['clientY'];\n }>({ x: 0, y: 0 });\n const focusOptionOnMouseMove = React.useCallback(\n (e: React.MouseEvent<HTMLElement>, index: number) => {\n const isMouseChangedPosition =\n Math.abs(prevMousePositionRef.current.x - e.clientX) >= 1 ||\n Math.abs(prevMousePositionRef.current.y - e.clientY) >= 1;\n\n if (isMouseChangedPosition) {\n focusOptionByIndex(index, false);\n }\n\n prevMousePositionRef.current = { x: e.clientX, y: e.clientY };\n },\n [focusOptionByIndex],\n );\n\n const popupAriaId = React.useId();\n const renderOption = React.useCallback(\n (option: OptionInterfaceT, index: number) => {\n const hovered = index === focusedOptionIndex;\n const selected = index === selectedOptionIndex;\n\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOptionProp({\n option,\n hovered,\n children: option.label,\n selected,\n disabled: option.disabled,\n onClick: handleOptionClick,\n onMouseDown: handleOptionDown,\n // Используем `onMouseMove` вместо `onMouseEnter/onMouseOver`.\n // Потому что если при навигации с клавиатуры курсор наведён на\n // список, то при первом автоматическом скролле списка вызывается событие MouseOver/MouseEnter\n // обработчик которого фокусирует опцию под курсором, хотя при навигация с клавиатуры пользователь мог уйти дальше по списку, это путает.\n // Причём координаты события меняются на пару пикселей по сравнению с прошлым вызовом,\n // а значит нельзя на них опираться, чтобы запретить обработку такого события.\n // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.\n onMouseMove: (e) => focusOptionOnMouseMove(e, index),\n id: `${popupAriaId}-${option.value}`,\n })}\n </React.Fragment>\n );\n },\n [\n focusedOptionIndex,\n handleOptionClick,\n focusOptionOnMouseMove,\n renderOptionProp,\n selectedOptionIndex,\n popupAriaId,\n ],\n );\n\n const resolvedContent = React.useMemo(() => {\n const defaultDropdownContent =\n options.length > 0 ? (\n <div ref={optionsWrapperRef}>{options.map(renderOption)}</div>\n ) : (\n <Footnote className={styles['CustomSelect__empty']}>{emptyText}</Footnote>\n );\n\n if (typeof renderDropdown === 'function') {\n return renderDropdown({ defaultDropdownContent });\n } else {\n return defaultDropdownContent;\n }\n }, [emptyText, options, renderDropdown, renderOption]);\n\n const selectInputRef = useExternRef(getSelectInputRef);\n const focusOnInputTimerRef = React.useRef<ReturnType<typeof setTimeout>>();\n const focusOnInput = React.useCallback(() => {\n clearTimeout(focusOnInputTimerRef.current);\n\n focusOnInputTimerRef.current = setTimeout(() => {\n selectInputRef.current && selectInputRef.current.focus();\n }, 0);\n }, [selectInputRef]);\n useIsomorphicLayoutEffect(function clearFocusOnInputTimer() {\n return () => {\n clearTimeout(focusOnInputTimerRef.current);\n };\n }, []);\n\n const controlledValueSet = isControlledOutside && props.value !== '';\n const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== '';\n const clearButtonShown =\n allowClearButton && !opened && (controlledValueSet || uncontrolledValueSet);\n\n const clearButton = React.useMemo(() => {\n if (!clearButtonShown) {\n return null;\n }\n\n return (\n <ClearButton\n className={iconProp === undefined ? styles['CustomSelect--clear-icon'] : undefined}\n onClick={function clearSelectState() {\n setNativeSelectValue('');\n setInputValue('');\n focusOnInput();\n }}\n disabled={restProps.disabled}\n data-testid={clearButtonTestId}\n />\n );\n }, [\n clearButtonShown,\n ClearButton,\n iconProp,\n restProps.disabled,\n clearButtonTestId,\n focusOnInput,\n ]);\n\n const icon = React.useMemo(() => {\n if (iconProp !== undefined) {\n return iconProp;\n }\n\n return (\n <DropdownIcon\n className={clearButtonShown ? styles['CustomSelect__dropdown-icon'] : undefined}\n opened={opened}\n />\n );\n }, [clearButtonShown, iconProp, opened]);\n\n const afterIcons = (icon || clearButtonShown) && (\n <React.Fragment>\n {clearButton}\n {icon}\n </React.Fragment>\n );\n\n const { document } = useDOM();\n const passClickAndFocusToInputOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n // Раньше внешней оберткой CustomSelect был <label>, что позволяло по клику в любую область CustomSelect,\n // даже где нету интерактивного элемента, фокусировать <input> и передавать на него событие клика.\n // Так как мы больше не оборачиваем CustomSelect в <label>, то для обертки CustomSelect мы симулируем работу <label>.\n // передаем фокус и клик по <input>, если пользователь кликнул в зоне обертки.\n // В <label> мы не больше не оборачиваем, потому что это заставляет скринридер\n // дважды произносить текст выбранной опции при фокусе, если CustomSelect связан с внешним <label>.\n // Воспроизводится в некоторых версиях Chrome, при навигации по странице с помощью стрелок.\n // Договорились со специалистом по доступности убрать <label>-обёртки из Select и CustomSelect\n\n if (!selectInputRef.current || !document) {\n return;\n }\n\n const clickTargetIsNotAnInput = e.target !== selectInputRef.current;\n if (clickTargetIsNotAnInput) {\n selectInputRef.current.click();\n\n const inputIsNotFocused = document.activeElement !== selectInputRef.current;\n if (inputIsNotFocused) {\n focusOnInput();\n }\n }\n },\n [document, focusOnInput, selectInputRef],\n );\n\n const preventInputBlurWhenClickInsideFocusedSelectArea = (\n e: React.MouseEvent<HTMLDivElement>,\n ) => {\n // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,\n // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.\n // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки\n const isInputFocused = document && document.activeElement === selectInputRef.current;\n if (isInputFocused) {\n e.preventDefault();\n }\n };\n\n const ariaActiveDescendantOptionIndex: undefined | number =\n focusedOptionIndex !== -1 ? focusedOptionIndex : undefined;\n const ariaActiveDescendantId =\n ariaActiveDescendantOptionIndex !== undefined\n ? options[ariaActiveDescendantOptionIndex] && options[ariaActiveDescendantOptionIndex].value\n : null;\n\n const selectInputAriaProps: React.HTMLAttributes<HTMLElement> = {\n 'role': 'combobox',\n 'aria-controls': popupAriaId,\n 'aria-expanded': opened,\n ['aria-activedescendant']:\n ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-haspopup': 'listbox',\n 'aria-autocomplete': 'none',\n };\n\n return (\n <div\n className={classNames(\n styles['CustomSelect'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n className,\n )}\n style={style}\n ref={handleRootRef}\n onClick={passClickAndFocusToInputOnClick}\n onMouseDown={preventInputBlurWhenClickInsideFocusedSelectArea}\n >\n <CustomSelectInput\n autoComplete=\"off\"\n autoCapitalize=\"none\"\n autoCorrect=\"off\"\n spellCheck=\"false\"\n {...restProps}\n {...selectInputAriaProps}\n getRef={selectInputRef}\n onFocus={onFocus}\n onBlur={onBlur}\n className={openedClassNames}\n searchable={searchable}\n fetching={fetching}\n value={inputValue}\n onKeyUp={handleKeyUp}\n onKeyDown={handleKeyDownSelect}\n onChange={onInputChange}\n onClick={onClick}\n before={before}\n after={afterIcons}\n selectType={selectType}\n selectedOptionLabel={selected?.label}\n />\n <select\n ref={selectElRef}\n name={name}\n onChange={onNativeSelectChange}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onClick={props.onClick}\n value={nativeSelectValue}\n aria-hidden\n className={styles['CustomSelect__control']}\n data-testid={nativeSelectTestId}\n required={required}\n >\n {allowClearButton && <option key=\"\" value=\"\" />}\n {optionsProp.map((item) => (\n <option key={`${item.value}`} value={item.value} />\n ))}\n </select>\n {opened && (\n <CustomSelectDropdown\n targetRef={containerRef}\n placement={popperPlacement}\n scrollBoxRef={setScrollBoxRef}\n onPlacementChange={setPopperPlacement}\n onMouseLeave={resetFocusedOption}\n fetching={fetching}\n overscrollBehavior={overscrollBehavior}\n offsetDistance={dropdownOffsetDistance}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n autoHideScrollbar={autoHideScrollbar}\n autoHideScrollbarDelay={autoHideScrollbarDelay}\n noMaxHeight={noMaxHeight}\n role=\"listbox\"\n id={popupAriaId}\n aria-labelledby={ariaLabelledBy}\n tabIndex={-1}\n >\n {resolvedContent}\n </CustomSelectDropdown>\n )}\n </div>\n );\n}\n"],"names":["CustomSelect","sizeYClassNames","none","warn","warnOnce","checkOptionsValueType","options","Set","map","item","value","size","handleOptionDown","e","preventDefault","filter","inputValue","filterFn","option","props","opened","setOpened","React","useState","before","name","className","getRef","getRootRef","popupDirection","style","onChange","children","onInputChange","onInputChangeProp","renderDropdown","onOpen","onClose","fetching","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","searchable","renderOption","renderOptionProp","defaultRenderOptionFn","optionsProp","emptyText","defaultFilterFn","icon","iconProp","ClearButton","CustomSelectClearButton","allowClearButton","dropdownOffsetDistance","dropdownAutoWidth","noMaxHeight","ariaLabelledBy","clearButtonTestId","nativeSelectTestId","defaultValue","required","getSelectInputRef","overscrollBehavior","restProps","process","env","NODE_ENV","sizeY","useAdaptivity","containerRef","useRef","handleRootRef","useExternRef","scrollBoxRef","selectElRef","optionsWrapperRef","focusedOptionIndex","setFocusedOptionIndex","isControlledOutside","setIsControlledOutside","undefined","nativeSelectValue","setNativeSelectValue","setInputValue","calculateInputValueFromOptions","popperPlacement","setPopperPlacement","setOptions","selectedOptionIndex","setSelectedOptionIndex","findSelectedIndex","useEffect","useIsomorphicLayoutEffect","some","event","Event","bubbles","current","dispatchEvent","selected","useMemo","length","openedClassNames","includes","scrollToElement","useCallback","index","center","dropdown","optionsWrapper","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","scrollTo","disabled","isValidIndex","setScrollBoxRef","ref","keyboardInput","setKeyboardInput","resetKeyboardInput","resetFocusedOption","onKeyboardInput","key","fullInput","close","selectOption","shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync","selectFocused","open","onBlur","onFocus","onClick","handleKeyUp","debounce","focusOption","type","nextIndex","findIndexAfter","beforeIndex","findIndexBefore","filterOptions","selectValue","updateSelectedOptionIndexOnValueChange","prevSelectValueRef","updateInputValueOnSelectValueChange","updatePrevSelectValue","onNativeSelectChange","newSelectedOptionIndex","currentTarget","target","areOptionsShown","handleKeyDownSelect","handleOptionClick","Array","prototype","indexOf","call","parentNode","prevMousePositionRef","x","y","focusOptionOnMouseMove","isMouseChangedPosition","Math","abs","clientX","clientY","popupAriaId","useId","hovered","Fragment","label","onMouseDown","onMouseMove","id","resolvedContent","defaultDropdownContent","div","Footnote","selectInputRef","focusOnInputTimerRef","focusOnInput","clearTimeout","setTimeout","focus","clearFocusOnInputTimer","controlledValueSet","uncontrolledValueSet","clearButtonShown","clearButton","clearSelectState","data-testid","DropdownIcon","afterIcons","document","useDOM","passClickAndFocusToInputOnClick","clickTargetIsNotAnInput","click","inputIsNotFocused","activeElement","preventInputBlurWhenClickInsideFocusedSelectArea","isInputFocused","ariaActiveDescendantOptionIndex","ariaActiveDescendantId","selectInputAriaProps","classNames","CustomSelectInput","autoComplete","autoCapitalize","autoCorrect","spellCheck","onKeyUp","onKeyDown","after","selectedOptionLabel","select","aria-hidden","CustomSelectDropdown","targetRef","placement","onPlacementChange","onMouseLeave","offsetDistance","autoWidth","forcePortal","role","aria-labelledby","tabIndex"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/CustomSelect/CustomSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, debounce } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn, type FilterFn } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport {\n CustomSelectDropdown,\n CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormFieldProps } from '../FormField/FormField';\nimport { NativeSelectProps } from '../NativeSelect/NativeSelect';\nimport { SelectType } from '../Select/Select';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n CustomSelectClearButton,\n type CustomSelectClearButtonProps,\n} from './CustomSelectClearButton';\nimport { CustomSelectInput } from './CustomSelectInput';\nimport {\n calculateInputValueFromOptions,\n defaultRenderOptionFn,\n findIndexAfter,\n findIndexBefore,\n findSelectedIndex,\n} from './helpers';\nimport type { CustomSelectOptionInterface, CustomSelectRenderOption } from './types';\nimport styles from './CustomSelect.module.css';\n\nconst sizeYClassNames = {\n none: styles['CustomSelect--sizeY-none'],\n ['compact']: styles['CustomSelect--sizeY-compact'],\n};\n\nconst warn = warnOnce('CustomSelect');\n\nconst checkOptionsValueType = <T extends CustomSelectOptionInterface>(options: T[]) => {\n if (new Set(options.map((item) => typeof item.value)).size > 1) {\n warn(\n 'Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.',\n 'error',\n );\n }\n};\n\nconst handleOptionDown: MouseEventHandler = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n};\n\nconst filter = <T extends CustomSelectOptionInterface>(\n options: SelectProps<T>['options'],\n inputValue: string,\n filterFn: SelectProps<T>['filterFn'],\n) => {\n return typeof filterFn === 'function'\n ? options.filter((option) => filterFn(inputValue, option))\n : options;\n};\n\nexport type { CustomSelectClearButtonProps, CustomSelectOptionInterface, CustomSelectRenderOption };\n\nexport interface SelectProps<\n OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface,\n> extends NativeSelectProps,\n Omit<FormFieldProps, 'maxHeight'>,\n TrackerOptionsProps,\n Pick<\n CustomSelectDropdownProps,\n 'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'\n > {\n /**\n * ref на внутрений компонент input\n */\n getSelectInputRef?: React.Ref<HTMLInputElement>;\n /**\n * Если `true`, то при клике на `CustomSelect` в нём появится текстовое поле для поиска по `options`. По умолчанию поиск\n * производится по `option.label`.\n */\n searchable?: boolean;\n /**\n * Текст, который будет отображен, если приходит пустой `options`.\n */\n emptyText?: string;\n /**\n * Событие изменения текстового поля\n */\n onInputChange?: (e: React.ChangeEvent) => void;\n options: OptionInterfaceT[];\n /**\n * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.\n */\n filterFn?: false | FilterFn<OptionInterfaceT>;\n popupDirection?: 'top' | 'bottom';\n /**\n * Рендер-проп для кастомного рендера опции.\n * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)\n *\n * > ⚠️ Важно: cвойство опции `disabled` должно выставляться только через проп `options`.\n * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе `CustomSelect` не будет знать об актуальном состоянии\n * опции.\n */\n renderOption?: (props: CustomSelectRenderOption<OptionInterfaceT>) => React.ReactNode;\n /**\n * Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.\n */\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /**\n * Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true`\n * \"победит\" `renderDropdown`.\n */\n fetching?: boolean;\n onClose?: VoidFunction;\n onOpen?: VoidFunction;\n /**\n * Иконка раскрывающегося списка\n */\n icon?: React.ReactNode;\n /**\n * Кастомная кнопка для очистки значения.\n * Должна принимать обязательное свойство `onClick`\n */\n ClearButton?: React.ComponentType<CustomSelectClearButtonProps>;\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения\n */\n allowClearButton?: boolean;\n /**\n * (e2e) testId кнопки очистки\n */\n clearButtonTestId?: string;\n /**\n * Отступ от выпадающего списка\n */\n dropdownOffsetDistance?: number;\n /**\n * Ширина раскрывающегося списка зависит от контента\n */\n dropdownAutoWidth?: boolean;\n forceDropdownPortal?: boolean;\n selectType?: SelectType;\n /**\n * Отключает максимальную высоту по умолчанию\n */\n noMaxHeight?: boolean;\n /**\n * (e2e) testId элемента, внутри которого отображается текст выбранной опции `CustomSelect` или плейсхолдер.\n */\n labelTextTestId?: string;\n nativeSelectTestId?: string;\n}\n\ntype MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelect\n */\nexport function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterface>(\n props: SelectProps<OptionInterfaceT>,\n): React.ReactNode {\n const [opened, setOpened] = React.useState(false);\n const {\n before,\n name,\n className,\n getRef,\n getRootRef,\n popupDirection = 'bottom',\n style,\n onChange,\n children,\n onInputChange: onInputChangeProp,\n renderDropdown,\n onOpen,\n onClose,\n fetching,\n forceDropdownPortal,\n selectType = 'default',\n autoHideScrollbar,\n autoHideScrollbarDelay,\n searchable = false,\n renderOption: renderOptionProp = defaultRenderOptionFn,\n options: optionsProp,\n emptyText = 'Ничего не найдено',\n filterFn = defaultFilterFn,\n icon: iconProp,\n ClearButton = CustomSelectClearButton,\n allowClearButton = false,\n dropdownOffsetDistance = 0,\n dropdownAutoWidth = false,\n noMaxHeight = false,\n ['aria-labelledby']: ariaLabelledBy,\n clearButtonTestId,\n nativeSelectTestId,\n defaultValue,\n required,\n getSelectInputRef,\n overscrollBehavior,\n ...restProps\n } = props;\n\n if (process.env.NODE_ENV === 'development') {\n checkOptionsValueType(optionsProp);\n }\n\n const { sizeY = 'none' } = useAdaptivity();\n\n const containerRef = React.useRef<HTMLDivElement>(null);\n const handleRootRef = useExternRef(containerRef, getRootRef);\n const scrollBoxRef = React.useRef<HTMLDivElement | null>(null);\n const selectElRef = useExternRef(getRef);\n const optionsWrapperRef = React.useRef<HTMLDivElement>(null);\n const selectInputRef = useExternRef(getSelectInputRef);\n\n const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number | undefined>(-1);\n const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);\n const [nativeSelectValue, setNativeSelectValue] = React.useState(\n () => props.value ?? defaultValue ?? (allowClearButton ? '' : undefined),\n );\n\n const [inputValue, setInputValue] = React.useState(() =>\n calculateInputValueFromOptions(optionsProp, nativeSelectValue),\n );\n\n const [popperPlacement, setPopperPlacement] = React.useState<Placement>(popupDirection);\n const [options, setOptions] = React.useState(optionsProp);\n const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<number | undefined>(\n findSelectedIndex(optionsProp, props.value ?? defaultValue, allowClearButton),\n );\n\n React.useEffect(() => {\n setIsControlledOutside(props.value !== undefined);\n setNativeSelectValue((nativeSelectValue) => props.value ?? nativeSelectValue);\n }, [props.value]);\n\n useIsomorphicLayoutEffect(() => {\n if (\n options.some(({ value }) => nativeSelectValue === value) ||\n (allowClearButton && nativeSelectValue === '')\n ) {\n const event = new Event('change', { bubbles: true });\n\n selectElRef.current?.dispatchEvent(event);\n }\n }, [nativeSelectValue]);\n\n const selected = React.useMemo(() => {\n if (!options.length) {\n return null;\n }\n\n return selectedOptionIndex !== undefined ? options[selectedOptionIndex] : undefined;\n }, [options, selectedOptionIndex]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (popperPlacement.includes('top')\n ? styles['CustomSelect--pop-up']\n : styles['CustomSelect--pop-down'])) ||\n undefined,\n [dropdownOffsetDistance, opened, popperPlacement],\n );\n\n const scrollToElement = React.useCallback((index: number, center = false) => {\n const dropdown = scrollBoxRef.current;\n const optionsWrapper = optionsWrapperRef.current;\n const item =\n dropdown && optionsWrapper ? (optionsWrapper.children[index] as HTMLElement) : null;\n\n if (!item || !dropdown) {\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\n const focusOptionByIndex = React.useCallback(\n (index: number | undefined, scrollTo = true) => {\n if (index === undefined || index < 0 || index > (options.length ?? 0) - 1) {\n return;\n }\n\n const option = options[index];\n\n if (option?.disabled) {\n return;\n }\n\n if (scrollTo) {\n scrollToElement(index);\n }\n\n // Это оптимизация, прежде всего, под `onMouseMove`\n setFocusedOptionIndex((focusedOptionIndex) =>\n focusedOptionIndex !== index ? index : focusedOptionIndex,\n );\n },\n [options, scrollToElement],\n );\n\n const isValidIndex = React.useCallback(\n (index: number) => {\n return index >= 0 && index < (options.length ?? 0);\n },\n [options.length],\n );\n\n const setScrollBoxRef = React.useCallback(\n (ref: HTMLDivElement | null) => {\n scrollBoxRef.current = ref;\n\n if (ref && selectedOptionIndex !== undefined && isValidIndex(selectedOptionIndex)) {\n {\n scrollToElement(selectedOptionIndex, true);\n }\n }\n },\n [isValidIndex, scrollToElement, selectedOptionIndex],\n );\n\n const [keyboardInput, setKeyboardInput] = React.useState('');\n const resetKeyboardInput = React.useCallback(() => {\n setKeyboardInput('');\n }, []);\n\n const resetFocusedOption = React.useCallback(() => {\n setFocusedOptionIndex(-1);\n }, []);\n\n const onKeyboardInput = React.useCallback(\n (key: string) => {\n if (!opened) {\n setOpened(true);\n }\n resetFocusedOption();\n const fullInput = keyboardInput + key;\n\n setKeyboardInput(fullInput);\n },\n [keyboardInput, opened, resetFocusedOption],\n );\n\n /**\n * Note: сбрасывать `options` через `setOptions(optionsProp)` не нужно.\n * Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.\n */\n const close = React.useCallback(() => {\n resetKeyboardInput();\n\n setOpened(false);\n resetFocusedOption();\n onClose?.();\n }, [onClose, resetKeyboardInput, resetFocusedOption]);\n\n const selectOption = React.useCallback(\n (index: number) => {\n const item = options[index];\n\n close();\n setNativeSelectValue(item?.value);\n\n const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync =\n isControlledOutside &&\n props.value !== nativeSelectValue &&\n nativeSelectValue === item?.value;\n\n if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {\n const event = new Event('change', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n }\n },\n [close, options, selectElRef, isControlledOutside, props.value, nativeSelectValue],\n );\n\n const selectFocused = React.useCallback(() => {\n if (focusedOptionIndex === undefined || !isValidIndex(focusedOptionIndex)) {\n return;\n }\n\n selectOption(focusedOptionIndex);\n }, [focusedOptionIndex, isValidIndex, selectOption]);\n\n const open = React.useCallback(() => {\n setOpened(true);\n setFocusedOptionIndex(selectedOptionIndex);\n\n if (typeof onOpen === 'function') {\n onOpen();\n }\n }, [onOpen, selectedOptionIndex]);\n\n const onBlur = React.useCallback(() => {\n close();\n const event = new Event('focusout', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n\n setInputValue(calculateInputValueFromOptions(optionsProp, nativeSelectValue));\n }, [close, selectElRef, optionsProp, nativeSelectValue]);\n\n const onFocus = React.useCallback(() => {\n const event = new Event('focusin', { bubbles: true });\n selectElRef.current?.dispatchEvent(event);\n selectInputRef.current?.select();\n }, [selectElRef, selectInputRef]);\n\n const onClick = React.useCallback(() => {\n if (opened) {\n close();\n } else {\n open();\n }\n }, [close, open, opened]);\n\n const handleKeyUp = React.useMemo(() => debounce(resetKeyboardInput, 1000), [resetKeyboardInput]);\n\n const focusOption = React.useCallback(\n (type: 'next' | 'prev') => {\n let index = focusedOptionIndex;\n\n if (type === 'next') {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === 'prev') {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index);\n },\n [focusOptionByIndex, focusedOptionIndex, options],\n );\n\n React.useEffect(\n function filterOptions() {\n const options =\n searchable && inputValue !== undefined\n ? filter(optionsProp, inputValue, filterFn)\n : optionsProp;\n\n setOptions(options);\n },\n [filterFn, inputValue, optionsProp, searchable],\n );\n\n const selectValue = props.value ?? nativeSelectValue ?? defaultValue;\n React.useEffect(\n function updateSelectedOptionIndexOnValueChange() {\n setSelectedOptionIndex(findSelectedIndex(options, selectValue, allowClearButton));\n },\n [selectValue, allowClearButton, options],\n );\n\n const prevSelectValueRef = React.useRef(selectValue);\n React.useEffect(\n function updateInputValueOnSelectValueChange() {\n if (prevSelectValueRef.current === selectValue) {\n return;\n }\n setInputValue(calculateInputValueFromOptions(optionsProp, selectValue));\n },\n [selectValue, optionsProp],\n );\n React.useEffect(\n function updatePrevSelectValue() {\n prevSelectValueRef.current = selectValue;\n },\n [selectValue],\n );\n\n const onNativeSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n const newSelectedOptionIndex = findSelectedIndex(\n options,\n e.currentTarget.value,\n allowClearButton,\n );\n\n if (selectedOptionIndex !== newSelectedOptionIndex) {\n if (!isControlledOutside) {\n setSelectedOptionIndex(newSelectedOptionIndex);\n }\n onChange?.(e);\n }\n };\n\n const onInputChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n (e) => {\n onInputChangeProp && onInputChangeProp(e);\n\n const options = filter(optionsProp, e.target.value, filterFn);\n setOptions(options);\n setSelectedOptionIndex(findSelectedIndex(options, nativeSelectValue, allowClearButton));\n\n setInputValue(e.target.value);\n },\n [filterFn, nativeSelectValue, onInputChangeProp, optionsProp, allowClearButton],\n );\n\n const areOptionsShown = React.useCallback(() => {\n return scrollBoxRef.current !== null;\n }, []);\n\n const handleKeyDownSelect = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key.length === 1 && event.key !== ' ') {\n onKeyboardInput(event.key);\n return;\n }\n\n ['ArrowUp', 'ArrowDown', 'Escape', 'Enter'].includes(event.key) &&\n areOptionsShown() &&\n event.preventDefault();\n\n switch (event.key) {\n case 'ArrowUp':\n if (opened) {\n areOptionsShown() && focusOption('prev');\n } else {\n open();\n }\n break;\n case 'ArrowDown':\n if (opened) {\n areOptionsShown() && focusOption('next');\n } else {\n open();\n }\n break;\n case 'Escape':\n close();\n break;\n case 'Backspace':\n case 'Delete': {\n if (!opened) {\n setOpened(true);\n }\n resetFocusedOption();\n\n break;\n }\n case 'Enter':\n case 'Spacebar':\n case ' ':\n if (opened) {\n areOptionsShown() && selectFocused();\n } else {\n open();\n }\n break;\n }\n },\n [\n areOptionsShown,\n close,\n focusOption,\n onKeyboardInput,\n open,\n opened,\n selectFocused,\n resetFocusedOption,\n ],\n );\n\n const handleOptionClick = React.useCallback(\n (e: React.MouseEvent<HTMLElement>) => {\n const index = Array.prototype.indexOf.call(\n e.currentTarget.parentNode?.children,\n e.currentTarget,\n );\n const option = options[index];\n\n if (option && !option.disabled) {\n selectOption(index);\n }\n },\n [options, selectOption],\n );\n\n const prevMousePositionRef = React.useRef<{\n x: React.MouseEvent['clientX'];\n y: React.MouseEvent['clientY'];\n }>({ x: 0, y: 0 });\n const focusOptionOnMouseMove = React.useCallback(\n (e: React.MouseEvent<HTMLElement>, index: number) => {\n const isMouseChangedPosition =\n Math.abs(prevMousePositionRef.current.x - e.clientX) >= 1 ||\n Math.abs(prevMousePositionRef.current.y - e.clientY) >= 1;\n\n if (isMouseChangedPosition) {\n focusOptionByIndex(index, false);\n }\n\n prevMousePositionRef.current = { x: e.clientX, y: e.clientY };\n },\n [focusOptionByIndex],\n );\n\n const popupAriaId = React.useId();\n const renderOption = React.useCallback(\n (option: OptionInterfaceT, index: number) => {\n const hovered = index === focusedOptionIndex;\n const selected = index === selectedOptionIndex;\n\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOptionProp({\n option,\n hovered,\n children: option.label,\n selected,\n disabled: option.disabled,\n onClick: handleOptionClick,\n onMouseDown: handleOptionDown,\n // Используем `onMouseMove` вместо `onMouseEnter/onMouseOver`.\n // Потому что если при навигации с клавиатуры курсор наведён на\n // список, то при первом автоматическом скролле списка вызывается событие MouseOver/MouseEnter\n // обработчик которого фокусирует опцию под курсором, хотя при навигация с клавиатуры пользователь мог уйти дальше по списку, это путает.\n // Причём координаты события меняются на пару пикселей по сравнению с прошлым вызовом,\n // а значит нельзя на них опираться, чтобы запретить обработку такого события.\n // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.\n onMouseMove: (e) => focusOptionOnMouseMove(e, index),\n id: `${popupAriaId}-${option.value}`,\n })}\n </React.Fragment>\n );\n },\n [\n focusedOptionIndex,\n handleOptionClick,\n focusOptionOnMouseMove,\n renderOptionProp,\n selectedOptionIndex,\n popupAriaId,\n ],\n );\n\n const resolvedContent = React.useMemo(() => {\n const defaultDropdownContent =\n options.length > 0 ? (\n <div ref={optionsWrapperRef}>{options.map(renderOption)}</div>\n ) : (\n <Footnote className={styles['CustomSelect__empty']}>{emptyText}</Footnote>\n );\n\n if (typeof renderDropdown === 'function') {\n return renderDropdown({ defaultDropdownContent });\n } else {\n return defaultDropdownContent;\n }\n }, [emptyText, options, renderDropdown, renderOption]);\n\n const focusOnInputTimerRef = React.useRef<ReturnType<typeof setTimeout>>();\n const focusOnInput = React.useCallback(() => {\n clearTimeout(focusOnInputTimerRef.current);\n\n focusOnInputTimerRef.current = setTimeout(() => {\n selectInputRef.current && selectInputRef.current.focus();\n }, 0);\n }, [selectInputRef]);\n useIsomorphicLayoutEffect(function clearFocusOnInputTimer() {\n return () => {\n clearTimeout(focusOnInputTimerRef.current);\n };\n }, []);\n\n const controlledValueSet = isControlledOutside && props.value !== '';\n const uncontrolledValueSet = !isControlledOutside && nativeSelectValue !== '';\n const clearButtonShown =\n allowClearButton && !opened && (controlledValueSet || uncontrolledValueSet);\n\n const clearButton = React.useMemo(() => {\n if (!clearButtonShown) {\n return null;\n }\n\n return (\n <ClearButton\n className={iconProp === undefined ? styles['CustomSelect--clear-icon'] : undefined}\n onClick={function clearSelectState() {\n setNativeSelectValue('');\n setInputValue('');\n focusOnInput();\n }}\n disabled={restProps.disabled}\n data-testid={clearButtonTestId}\n />\n );\n }, [\n clearButtonShown,\n ClearButton,\n iconProp,\n restProps.disabled,\n clearButtonTestId,\n focusOnInput,\n ]);\n\n const icon = React.useMemo(() => {\n if (iconProp !== undefined) {\n return iconProp;\n }\n\n return (\n <DropdownIcon\n className={clearButtonShown ? styles['CustomSelect__dropdown-icon'] : undefined}\n opened={opened}\n />\n );\n }, [clearButtonShown, iconProp, opened]);\n\n const afterIcons = (icon || clearButtonShown) && (\n <React.Fragment>\n {clearButton}\n {icon}\n </React.Fragment>\n );\n\n const { document } = useDOM();\n const passClickAndFocusToInputOnClick = React.useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n // Раньше внешней оберткой CustomSelect был <label>, что позволяло по клику в любую область CustomSelect,\n // даже где нету интерактивного элемента, фокусировать <input> и передавать на него событие клика.\n // Так как мы больше не оборачиваем CustomSelect в <label>, то для обертки CustomSelect мы симулируем работу <label>.\n // передаем фокус и клик по <input>, если пользователь кликнул в зоне обертки.\n // В <label> мы не больше не оборачиваем, потому что это заставляет скринридер\n // дважды произносить текст выбранной опции при фокусе, если CustomSelect связан с внешним <label>.\n // Воспроизводится в некоторых версиях Chrome, при навигации по странице с помощью стрелок.\n // Договорились со специалистом по доступности убрать <label>-обёртки из Select и CustomSelect\n\n if (!selectInputRef.current || !document) {\n return;\n }\n\n const clickTargetIsNotAnInput = e.target !== selectInputRef.current;\n if (clickTargetIsNotAnInput) {\n selectInputRef.current.click();\n\n const inputIsNotFocused = document.activeElement !== selectInputRef.current;\n if (inputIsNotFocused) {\n focusOnInput();\n }\n }\n },\n [document, focusOnInput, selectInputRef],\n );\n\n const preventInputBlurWhenClickInsideFocusedSelectArea = (\n e: React.MouseEvent<HTMLDivElement>,\n ) => {\n // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,\n // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.\n // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки\n const isInputFocused = document && document.activeElement === selectInputRef.current;\n const clickTarget = e.target as HTMLElement;\n const inputClicked = selectInputRef.current?.contains(clickTarget);\n if (isInputFocused && !inputClicked) {\n e.preventDefault();\n }\n };\n\n const ariaActiveDescendantOptionIndex: undefined | number =\n focusedOptionIndex !== -1 ? focusedOptionIndex : undefined;\n const ariaActiveDescendantId =\n ariaActiveDescendantOptionIndex !== undefined\n ? options[ariaActiveDescendantOptionIndex] && options[ariaActiveDescendantOptionIndex].value\n : null;\n\n const selectInputAriaProps: React.HTMLAttributes<HTMLElement> = {\n 'role': 'combobox',\n 'aria-controls': popupAriaId,\n 'aria-expanded': opened,\n ['aria-activedescendant']:\n ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-haspopup': 'listbox',\n 'aria-autocomplete': 'none',\n };\n\n return (\n <div\n className={classNames(\n styles['CustomSelect'],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n className,\n )}\n style={style}\n ref={handleRootRef}\n onClick={passClickAndFocusToInputOnClick}\n onMouseDown={preventInputBlurWhenClickInsideFocusedSelectArea}\n >\n <CustomSelectInput\n autoComplete=\"off\"\n autoCapitalize=\"none\"\n autoCorrect=\"off\"\n spellCheck=\"false\"\n {...restProps}\n {...selectInputAriaProps}\n getRef={selectInputRef}\n onFocus={onFocus}\n onBlur={onBlur}\n className={openedClassNames}\n searchable={searchable}\n fetching={fetching}\n value={inputValue}\n onKeyUp={handleKeyUp}\n onKeyDown={handleKeyDownSelect}\n onChange={onInputChange}\n onClick={onClick}\n before={before}\n after={afterIcons}\n selectType={selectType}\n selectedOptionLabel={selected?.label}\n />\n <select\n ref={selectElRef}\n name={name}\n onChange={onNativeSelectChange}\n onBlur={props.onBlur}\n onFocus={props.onFocus}\n onClick={props.onClick}\n value={nativeSelectValue}\n aria-hidden\n className={styles['CustomSelect__control']}\n data-testid={nativeSelectTestId}\n required={required}\n >\n {allowClearButton && <option key=\"\" value=\"\" />}\n {optionsProp.map((item) => (\n <option key={`${item.value}`} value={item.value} />\n ))}\n </select>\n {opened && (\n <CustomSelectDropdown\n targetRef={containerRef}\n placement={popperPlacement}\n scrollBoxRef={setScrollBoxRef}\n onPlacementChange={setPopperPlacement}\n onMouseLeave={resetFocusedOption}\n fetching={fetching}\n overscrollBehavior={overscrollBehavior}\n offsetDistance={dropdownOffsetDistance}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n autoHideScrollbar={autoHideScrollbar}\n autoHideScrollbarDelay={autoHideScrollbarDelay}\n noMaxHeight={noMaxHeight}\n role=\"listbox\"\n id={popupAriaId}\n aria-labelledby={ariaLabelledBy}\n tabIndex={-1}\n >\n {resolvedContent}\n </CustomSelectDropdown>\n )}\n </div>\n );\n}\n"],"names":["CustomSelect","sizeYClassNames","none","warn","warnOnce","checkOptionsValueType","options","Set","map","item","value","size","handleOptionDown","e","preventDefault","filter","inputValue","filterFn","option","props","opened","setOpened","React","useState","before","name","className","getRef","getRootRef","popupDirection","style","onChange","children","onInputChange","onInputChangeProp","renderDropdown","onOpen","onClose","fetching","forceDropdownPortal","selectType","autoHideScrollbar","autoHideScrollbarDelay","searchable","renderOption","renderOptionProp","defaultRenderOptionFn","optionsProp","emptyText","defaultFilterFn","icon","iconProp","ClearButton","CustomSelectClearButton","allowClearButton","dropdownOffsetDistance","dropdownAutoWidth","noMaxHeight","ariaLabelledBy","clearButtonTestId","nativeSelectTestId","defaultValue","required","getSelectInputRef","overscrollBehavior","restProps","process","env","NODE_ENV","sizeY","useAdaptivity","containerRef","useRef","handleRootRef","useExternRef","scrollBoxRef","selectElRef","optionsWrapperRef","selectInputRef","focusedOptionIndex","setFocusedOptionIndex","isControlledOutside","setIsControlledOutside","undefined","nativeSelectValue","setNativeSelectValue","setInputValue","calculateInputValueFromOptions","popperPlacement","setPopperPlacement","setOptions","selectedOptionIndex","setSelectedOptionIndex","findSelectedIndex","useEffect","useIsomorphicLayoutEffect","some","event","Event","bubbles","current","dispatchEvent","selected","useMemo","length","openedClassNames","includes","scrollToElement","useCallback","index","center","dropdown","optionsWrapper","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","scrollTo","disabled","isValidIndex","setScrollBoxRef","ref","keyboardInput","setKeyboardInput","resetKeyboardInput","resetFocusedOption","onKeyboardInput","key","fullInput","close","selectOption","shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync","selectFocused","open","onBlur","onFocus","select","onClick","handleKeyUp","debounce","focusOption","type","nextIndex","findIndexAfter","beforeIndex","findIndexBefore","filterOptions","selectValue","updateSelectedOptionIndexOnValueChange","prevSelectValueRef","updateInputValueOnSelectValueChange","updatePrevSelectValue","onNativeSelectChange","newSelectedOptionIndex","currentTarget","target","areOptionsShown","handleKeyDownSelect","handleOptionClick","Array","prototype","indexOf","call","parentNode","prevMousePositionRef","x","y","focusOptionOnMouseMove","isMouseChangedPosition","Math","abs","clientX","clientY","popupAriaId","useId","hovered","Fragment","label","onMouseDown","onMouseMove","id","resolvedContent","defaultDropdownContent","div","Footnote","focusOnInputTimerRef","focusOnInput","clearTimeout","setTimeout","focus","clearFocusOnInputTimer","controlledValueSet","uncontrolledValueSet","clearButtonShown","clearButton","clearSelectState","data-testid","DropdownIcon","afterIcons","document","useDOM","passClickAndFocusToInputOnClick","clickTargetIsNotAnInput","click","inputIsNotFocused","activeElement","preventInputBlurWhenClickInsideFocusedSelectArea","isInputFocused","clickTarget","inputClicked","contains","ariaActiveDescendantOptionIndex","ariaActiveDescendantId","selectInputAriaProps","classNames","CustomSelectInput","autoComplete","autoCapitalize","autoCorrect","spellCheck","onKeyUp","onKeyDown","after","selectedOptionLabel","aria-hidden","CustomSelectDropdown","targetRef","placement","onPlacementChange","onMouseLeave","offsetDistance","autoWidth","forcePortal","role","aria-labelledby","tabIndex"],"mappings":"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"}
|
|
@@ -182,7 +182,10 @@ const ImageBase = (_param)=>{
|
|
|
182
182
|
className: "vkuiImageBase__fallback",
|
|
183
183
|
children: fallbackIcon
|
|
184
184
|
}),
|
|
185
|
-
children,
|
|
185
|
+
children && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
|
|
186
|
+
className: "vkuiImageBase__children",
|
|
187
|
+
children: children
|
|
188
|
+
}),
|
|
186
189
|
!noBorder && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
|
|
187
190
|
"aria-hidden": true,
|
|
188
191
|
className: "vkuiImageBase__border"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n ImageBaseSize,\n ImageBaseExpectedIconProps,\n ImageBaseBadgeProps,\n ImageBaseOverlayProps,\n ImageBaseContextProps,\n};\n\nexport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n AnchorHTMLAttributesOnly,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLImageElement> {\n /**\n * Задаёт размер картинки.\n *\n * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n *\n * > ⚠️ Использование кастомного размера – это пограничный кейс.\n */\n size?: LiteralUnion<ImageBaseSize, number>;\n /**\n * Ширина изображения\n */\n widthSize?: number | string;\n /**\n * Высота изображения\n */\n heightSize?: number | string;\n /**\n * Отключает обводку.\n */\n noBorder?: boolean;\n /**\n * Фолбек на случай, если картинка не прогрузилась.\n *\n * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n *\n * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n *\n * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n *\n * > ⚠️ Может перекрывать `children`.\n */\n fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n /**\n * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n * @since 5.10.0\n */\n withTransparentBackground?: boolean;\n /**\n * Пользовательское значения стиля object-fit\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n */\n objectFit?: React.CSSProperties['objectFit'];\n /**\n * Флаг для сохранения пропорций картинки.\n * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n */\n keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n switch (objectFit) {\n case 'contain':\n return styles['ImageBase__img--objectFit-contain'];\n case 'cover':\n return styles['ImageBase__img--objectFit-cover'];\n case 'none':\n return styles['ImageBase__img--objectFit-none'];\n case 'scale-down':\n return styles['ImageBase__img--objectFit-scaleDown'];\n }\n return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n if (value.endsWith('px')) {\n return parseInt(value);\n }\n return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n if (typeof size === 'string') {\n return parsePx(size);\n }\n return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n Badge: typeof ImageBaseBadge;\n Overlay: typeof ImageBaseOverlay;\n} = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n fetchPriority,\n getRef,\n size: sizeProp,\n width: widthImg,\n height: heightImg,\n widthSize,\n heightSize,\n style,\n noBorder = false,\n fallbackIcon: fallbackIconProp,\n children,\n onLoad,\n onError,\n withTransparentBackground,\n objectFit = 'cover',\n keepAspectRatio = false,\n ...restProps\n}: ImageBaseProps) => {\n const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n const width = widthSize ?? (keepAspectRatio ? undefined : size);\n const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n const [loaded, setLoaded] = React.useState(false);\n const [failed, setFailed] = React.useState(false);\n\n const hasSrc = src || srcSet;\n const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n if (process.env.NODE_ENV === 'development') {\n validateSize(size);\n if (fallbackIcon) {\n validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n }\n }\n\n const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n if (loaded) {\n return;\n }\n\n setLoaded(true);\n setFailed(false);\n onLoad?.(event);\n };\n\n const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(false);\n setFailed(true);\n onError?.(event);\n };\n\n const imgRef = useExternRef(getRef);\n const isOnLoadStatusCheckedRef = React.useRef(false);\n React.useEffect(\n function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n if (isOnLoadStatusCheckedRef.current) {\n return;\n }\n isOnLoadStatusCheckedRef.current = true;\n\n if (imgRef.current && imgRef.current.complete && !loaded) {\n const event = new Event('load');\n imgRef.current.dispatchEvent(event);\n }\n },\n [imgRef, loaded],\n );\n\n return (\n <ImageBaseContext.Provider value={{ size }}>\n <Clickable\n style={{ width, height, ...style }}\n baseClassName={classNames(\n styles['ImageBase'],\n loaded && styles['ImageBase--loaded'],\n withTransparentBackground && styles['ImageBase--transparent-background'],\n )}\n {...restProps}\n >\n {hasSrc && (\n <img\n ref={imgRef}\n alt={alt}\n className={classNames(\n styles['ImageBase__img'],\n getObjectFitClassName(objectFit),\n keepAspectRatio && styles['ImageBase__img--keepRatio'],\n )}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n style={\n keepAspectRatio\n ? {\n width: widthImg || width,\n height: heightImg || height,\n }\n : undefined\n }\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={widthImg}\n height={heightImg}\n onLoad={handleImageLoad}\n onError={handleImageError}\n {...getFetchPriorityProp(fetchPriority)}\n />\n )}\n {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n {children}\n {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n </Clickable>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["ImageBase","ImageBaseContext","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","minOr","loaded","setLoaded","React","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","handleImageLoad","event","handleImageError","imgRef","useExternRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","Clickable","baseClassName","classNames","img","ref","className","getFetchPriorityProp","div","aria-hidden","displayName","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n ImageBaseSize,\n ImageBaseExpectedIconProps,\n ImageBaseBadgeProps,\n ImageBaseOverlayProps,\n ImageBaseContextProps,\n};\n\nexport {\n getBadgeIconSizeByImageBaseSize,\n getFallbackIconSizeByImageBaseSize,\n getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n extends React.ImgHTMLAttributes<HTMLElement>,\n AnchorHTMLAttributesOnly,\n HasRootRef<HTMLDivElement>,\n HasRef<HTMLImageElement> {\n /**\n * Задаёт размер картинки.\n *\n * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n *\n * > ⚠️ Использование кастомного размера – это пограничный кейс.\n */\n size?: LiteralUnion<ImageBaseSize, number>;\n /**\n * Ширина изображения\n */\n widthSize?: number | string;\n /**\n * Высота изображения\n */\n heightSize?: number | string;\n /**\n * Отключает обводку.\n */\n noBorder?: boolean;\n /**\n * Фолбек на случай, если картинка не прогрузилась.\n *\n * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n *\n * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n *\n * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n * > использовали иконку.\n *\n * > ⚠️ Может перекрывать `children`.\n */\n fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n /**\n * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n * @since 5.10.0\n */\n withTransparentBackground?: boolean;\n /**\n * Пользовательское значения стиля object-fit\n * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n */\n objectFit?: React.CSSProperties['objectFit'];\n /**\n * Флаг для сохранения пропорций картинки.\n * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n */\n keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n switch (objectFit) {\n case 'contain':\n return styles['ImageBase__img--objectFit-contain'];\n case 'cover':\n return styles['ImageBase__img--objectFit-cover'];\n case 'none':\n return styles['ImageBase__img--objectFit-none'];\n case 'scale-down':\n return styles['ImageBase__img--objectFit-scaleDown'];\n }\n return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n if (value.endsWith('px')) {\n return parseInt(value);\n }\n return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n if (typeof size === 'string') {\n return parsePx(size);\n }\n return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n Badge: typeof ImageBaseBadge;\n Overlay: typeof ImageBaseOverlay;\n} = ({\n alt,\n crossOrigin,\n decoding,\n loading,\n referrerPolicy,\n sizes,\n src,\n srcSet,\n useMap,\n fetchPriority,\n getRef,\n size: sizeProp,\n width: widthImg,\n height: heightImg,\n widthSize,\n heightSize,\n style,\n noBorder = false,\n fallbackIcon: fallbackIconProp,\n children,\n onLoad,\n onError,\n withTransparentBackground,\n objectFit = 'cover',\n keepAspectRatio = false,\n ...restProps\n}: ImageBaseProps) => {\n const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n const width = widthSize ?? (keepAspectRatio ? undefined : size);\n const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n const [loaded, setLoaded] = React.useState(false);\n const [failed, setFailed] = React.useState(false);\n\n const hasSrc = src || srcSet;\n const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n if (process.env.NODE_ENV === 'development') {\n validateSize(size);\n if (fallbackIcon) {\n validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n }\n }\n\n const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n if (loaded) {\n return;\n }\n\n setLoaded(true);\n setFailed(false);\n onLoad?.(event);\n };\n\n const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n setLoaded(false);\n setFailed(true);\n onError?.(event);\n };\n\n const imgRef = useExternRef(getRef);\n const isOnLoadStatusCheckedRef = React.useRef(false);\n React.useEffect(\n function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n if (isOnLoadStatusCheckedRef.current) {\n return;\n }\n isOnLoadStatusCheckedRef.current = true;\n\n if (imgRef.current && imgRef.current.complete && !loaded) {\n const event = new Event('load');\n imgRef.current.dispatchEvent(event);\n }\n },\n [imgRef, loaded],\n );\n\n return (\n <ImageBaseContext.Provider value={{ size }}>\n <Clickable\n style={{ width, height, ...style }}\n baseClassName={classNames(\n styles['ImageBase'],\n loaded && styles['ImageBase--loaded'],\n withTransparentBackground && styles['ImageBase--transparent-background'],\n )}\n {...restProps}\n >\n {hasSrc && (\n <img\n ref={imgRef}\n alt={alt}\n className={classNames(\n styles['ImageBase__img'],\n getObjectFitClassName(objectFit),\n keepAspectRatio && styles['ImageBase__img--keepRatio'],\n )}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n style={\n keepAspectRatio\n ? {\n width: widthImg || width,\n height: heightImg || height,\n }\n : undefined\n }\n sizes={sizes}\n src={src}\n srcSet={srcSet}\n useMap={useMap}\n width={widthImg}\n height={heightImg}\n onLoad={handleImageLoad}\n onError={handleImageError}\n {...getFetchPriorityProp(fetchPriority)}\n />\n )}\n {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n {children && <div className={styles['ImageBase__children']}>{children}</div>}\n {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n </Clickable>\n </ImageBaseContext.Provider>\n );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["ImageBase","ImageBaseContext","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","minOr","loaded","setLoaded","React","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","handleImageLoad","event","handleImageError","imgRef","useExternRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","Clickable","baseClassName","classNames","img","ref","className","getFetchPriorityProp","div","aria-hidden","displayName","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,2BAA2B,CAAC;AASnC,OAAO,KAAK,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAiCrF,YAAY,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,CAAC;AAEpG,MAAM,WAAW,WAAW,CAC1B,gBAAgB,SAAS,2BAA2B,GAAG,2BAA2B,CAClF,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,mBAAmB,EACnB,IAAI,CACF,yBAAyB,EACzB,oBAAoB,GAAG,mBAAmB,GAAG,wBAAwB,CACtE;IACH;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtF;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;GAEG;AACH,wBAAgB,YAAY,CAAC,gBAAgB,SAAS,2BAA2B,EAC/E,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GACnC,KAAK,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,2BAA2B,CAAC;AASnC,OAAO,KAAK,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAiCrF,YAAY,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,CAAC;AAEpG,MAAM,WAAW,WAAW,CAC1B,gBAAgB,SAAS,2BAA2B,GAAG,2BAA2B,CAClF,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,mBAAmB,EACnB,IAAI,CACF,yBAAyB,EACzB,oBAAoB,GAAG,mBAAmB,GAAG,wBAAwB,CACtE;IACH;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtF;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;GAEG;AACH,wBAAgB,YAAY,CAAC,gBAAgB,SAAS,2BAA2B,EAC/E,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GACnC,KAAK,CAAC,SAAS,CAosBjB"}
|
|
@@ -83,6 +83,7 @@ const filter = (options, inputValue, filterFn)=>{
|
|
|
83
83
|
const scrollBoxRef = React.useRef(null);
|
|
84
84
|
const selectElRef = useExternRef(getRef);
|
|
85
85
|
const optionsWrapperRef = React.useRef(null);
|
|
86
|
+
const selectInputRef = useExternRef(getSelectInputRef);
|
|
86
87
|
const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
|
|
87
88
|
const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
|
|
88
89
|
const [nativeSelectValue, setNativeSelectValue] = React.useState(()=>{
|
|
@@ -270,13 +271,15 @@ const filter = (options, inputValue, filterFn)=>{
|
|
|
270
271
|
nativeSelectValue
|
|
271
272
|
]);
|
|
272
273
|
const onFocus = React.useCallback(()=>{
|
|
273
|
-
var _selectElRef_current;
|
|
274
|
+
var _selectElRef_current, _selectInputRef_current;
|
|
274
275
|
const event = new Event('focusin', {
|
|
275
276
|
bubbles: true
|
|
276
277
|
});
|
|
277
278
|
(_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
|
|
279
|
+
(_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.select();
|
|
278
280
|
}, [
|
|
279
|
-
selectElRef
|
|
281
|
+
selectElRef,
|
|
282
|
+
selectInputRef
|
|
280
283
|
]);
|
|
281
284
|
const onClick = React.useCallback(()=>{
|
|
282
285
|
if (opened) {
|
|
@@ -503,7 +506,6 @@ const filter = (options, inputValue, filterFn)=>{
|
|
|
503
506
|
renderDropdown,
|
|
504
507
|
renderOption
|
|
505
508
|
]);
|
|
506
|
-
const selectInputRef = useExternRef(getSelectInputRef);
|
|
507
509
|
const focusOnInputTimerRef = React.useRef();
|
|
508
510
|
const focusOnInput = React.useCallback(()=>{
|
|
509
511
|
clearTimeout(focusOnInputTimerRef.current);
|
|
@@ -589,11 +591,14 @@ const filter = (options, inputValue, filterFn)=>{
|
|
|
589
591
|
selectInputRef
|
|
590
592
|
]);
|
|
591
593
|
const preventInputBlurWhenClickInsideFocusedSelectArea = (e)=>{
|
|
594
|
+
var _selectInputRef_current;
|
|
592
595
|
// Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,
|
|
593
596
|
// но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.
|
|
594
597
|
// Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки
|
|
595
598
|
const isInputFocused = document && document.activeElement === selectInputRef.current;
|
|
596
|
-
|
|
599
|
+
const clickTarget = e.target;
|
|
600
|
+
const inputClicked = (_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.contains(clickTarget);
|
|
601
|
+
if (isInputFocused && !inputClicked) {
|
|
597
602
|
e.preventDefault();
|
|
598
603
|
}
|
|
599
604
|
};
|