@vkontakte/vkui 7.3.4 → 7.3.6

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.
Files changed (29) hide show
  1. package/dist/components/ChipsSelect/ChipsSelect.d.ts.map +1 -1
  2. package/dist/components/ChipsSelect/ChipsSelect.js +3 -8
  3. package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
  4. package/dist/components/Clickable/useState.d.ts +1 -1
  5. package/dist/components/Clickable/useState.js.map +1 -1
  6. package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
  7. package/dist/components/CustomSelect/CustomSelect.js +7 -6
  8. package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
  9. package/dist/cssm/components/ChipsSelect/ChipsSelect.js +3 -8
  10. package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
  11. package/dist/cssm/components/Clickable/useState.js.map +1 -1
  12. package/dist/cssm/components/CustomSelect/CustomSelect.js +5 -5
  13. package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
  14. package/dist/cssm/hooks/useGlobalOnClickOutside.js +10 -7
  15. package/dist/cssm/hooks/useGlobalOnClickOutside.js.map +1 -1
  16. package/dist/cssm/lib/date.js +1 -1
  17. package/dist/cssm/lib/date.js.map +1 -1
  18. package/dist/hooks/useGlobalOnClickOutside.d.ts +1 -0
  19. package/dist/hooks/useGlobalOnClickOutside.d.ts.map +1 -1
  20. package/dist/hooks/useGlobalOnClickOutside.js +10 -7
  21. package/dist/hooks/useGlobalOnClickOutside.js.map +1 -1
  22. package/dist/lib/date.js +1 -1
  23. package/dist/lib/date.js.map +1 -1
  24. package/package.json +2 -2
  25. package/src/components/ChipsSelect/ChipsSelect.tsx +5 -9
  26. package/src/components/Clickable/useState.tsx +1 -1
  27. package/src/components/CustomSelect/CustomSelect.tsx +5 -4
  28. package/src/hooks/useGlobalOnClickOutside.ts +19 -8
  29. package/src/lib/date.ts +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"ChipsSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,0CAA0C,CAAC;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAa7D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAkC5E,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,CACpD,SAAQ,mBAAmB,CAAC,CAAC,CAAC,EAC5B,mBAAmB,CAAC,CAAC,CAAC,EACtB,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC,EAClD,IAAI,CAAC,yBAAyB,EAAE,oBAAoB,CAAC;IACvD;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEnF;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,SAAS,UAAU,EAAE,ytBAmDpD,gBAAgB,CAAC,MAAM,CAAC,KAAG,KAAK,CAAC,SA4anC,CAAC"}
1
+ {"version":3,"file":"ChipsSelect.d.ts","sourceRoot":"","sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC/E,OAAO,EAEL,KAAK,yBAAyB,EAC/B,MAAM,8CAA8C,CAAC;AACtD,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,0CAA0C,CAAC;AAElD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAa7D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAkC5E,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,UAAU,CACpD,SAAQ,mBAAmB,CAAC,CAAC,CAAC,EAC5B,mBAAmB,CAAC,CAAC,CAAC,EACtB,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC,EAClD,IAAI,CAAC,yBAAyB,EAAE,oBAAoB,CAAC;IACvD;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAEnF;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,SAAS,UAAU,EAAE,ytBAmDpD,gBAAgB,CAAC,MAAM,CAAC,KAAG,KAAK,CAAC,SAwanC,CAAC"}
@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
6
6
  import * as React from "react";
7
7
  import { classNames } from "@vkontakte/vkjs";
8
8
  import { useExternRef } from "../../hooks/useExternRef.js";
9
- import { useGlobalOnClickOutside } from "../../hooks/useGlobalOnClickOutside.js";
9
+ import { useGlobalOnEventOutside } from "../../hooks/useGlobalOnClickOutside.js";
10
10
  import { Keys } from "../../lib/accessibility.js";
11
11
  import { defaultFilterFn } from "../../lib/select.js";
12
12
  import { ChipsInputBase } from "../ChipsInputBase/ChipsInputBase.js";
@@ -121,7 +121,6 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
121
121
  // Связано с ChipsInputProps
122
122
  const rootRef = useExternRef(getRootRef);
123
123
  const inputRef = useExternRef(getRef, inputRefHook);
124
- const forbidCloseByOutsideClick = React.useRef(false);
125
124
  // Связано с CustomSelectDropdownProps
126
125
  const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState(placementProp);
127
126
  const onDropdownPlacementChange = React.useCallback((placement)=>{
@@ -264,14 +263,11 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
264
263
  setFocusedOptionIndex
265
264
  ]);
266
265
  const handleClickOutside = React.useCallback(()=>{
267
- if (!forbidCloseByOutsideClick.current) {
268
- setOpened(false);
269
- }
270
- forbidCloseByOutsideClick.current = false;
266
+ setOpened(false);
271
267
  }, [
272
268
  setOpened
273
269
  ]);
274
- useGlobalOnClickOutside(handleClickOutside, opened ? rootRef : null, opened ? dropdownScrollBoxRef : null);
270
+ useGlobalOnEventOutside('mousedown', handleClickOutside, opened ? rootRef : null, opened ? dropdownScrollBoxRef : null);
275
271
  const onDropdownIconClick = React.useCallback((e)=>{
276
272
  if (opened) {
277
273
  e.preventDefault();
@@ -321,7 +317,6 @@ const findIndexBefore = (options = [], endIndex = options.length)=>{
321
317
  if (!event.defaultPrevented) {
322
318
  closeAfterSelect && setOpened(false);
323
319
  addOption(option);
324
- forbidCloseByOutsideClick.current = true;
325
320
  clearInput();
326
321
  }
327
322
  },
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["'use client';\n\nimport { type MouseEventHandler } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnClickOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n CustomSelectDropdown,\n type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n DEFAULT_EMPTY_TEXT,\n DEFAULT_SELECTED_BEHAVIOR,\n FOCUS_ACTION_NEXT,\n FOCUS_ACTION_PREV,\n isCreateNewOptionPreset,\n isEmptyOptionPreset,\n isNotServicePreset,\n renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n startIndex = -1,\n) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex(\n (option, i) => i > startIndex && (!isNotServicePreset(option) || !option.disabled),\n );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!isNotServicePreset(option) || !option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n extends ChipsInputBaseProps<O>,\n UseChipsSelectProps<O>,\n Pick<FormFieldProps, 'status' | 'mode' | 'before'>,\n Pick<CustomSelectDropdownProps, 'overscrollBehavior'> {\n /**\n * Расположение выпадающего списка.\n */\n placement?: 'top' | 'bottom';\n /**\n * Отрисовка Spinner вместо списка опций в выпадающем списке.\n */\n fetching?: boolean;\n /**\n * Закрытие выпадающего списка после выбора элемента.\n */\n closeAfterSelect?: boolean;\n /**\n * Ширина раскрывающегося списка зависит от контента.\n */\n dropdownAutoWidth?: boolean;\n /**\n * Принудительно использовать портал.\n */\n forceDropdownPortal?: boolean;\n /**\n * Передает атрибут `data-testid` для дропдауна.\n */\n dropdownTestId?: string;\n /**\n * Иконка раскрывающегося списка.\n */\n icon?: React.ReactNode;\n /**\n * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`).\n */\n addOnBlur?: boolean;\n /**\n * Отключает максимальную высоту по умолчанию.\n */\n noMaxHeight?: boolean;\n /**\n * Функция для отрисовки кастомной опции в выпадающем списке.\n */\n renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n /**\n * Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций.\n */\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /**\n * Событие срабатывающее перед `onChange`.\n */\n onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;\n\n /**\n * Отступ от выпадающего списка.\n */\n dropdownOffsetDistance?: number;\n\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения.\n */\n allowClearButton?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n // FormFieldProps\n id: labelledbyId,\n getRootRef,\n className,\n status = 'default',\n icon: dropdownIconProp,\n onChangeStart,\n\n // CustomSelectDropdownProps\n options: optionsProp,\n placement: placementProp = 'bottom',\n closeAfterSelect = true,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n fetching = false,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight = false,\n filterFn = defaultFilterFn,\n sortFn = false,\n dropdownTestId,\n onClose,\n onOpen,\n overscrollBehavior,\n renderDropdown,\n\n // ChipsInputProps\n getRef,\n value: valueProp,\n defaultValue,\n inputValue: inputValueProp,\n defaultInputValue,\n disabled,\n readOnly,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n getNewOptionData = getNewOptionDataDefault,\n renderChip = renderChipDefault,\n renderOption = renderOptionDefault,\n onChange,\n onFocus: onFocusProp,\n onInputChange: onInputChangeProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n dropdownOffsetDistance = 0,\n allowClearButton,\n clearButtonTestId,\n delimiter,\n ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n const {\n // Связано с ChipsInputProps\n // option\n value,\n addOptionFromInput,\n addOption,\n removeOption,\n clearOptions,\n // input\n inputRef: inputRefHook,\n inputValue,\n clearInput,\n onInputChange,\n\n // Связано с CustomSelectDropdownProps\n options,\n opened,\n setOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n } = useChipsSelect({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue,\n onInputChange: onInputChangeProp,\n\n // dropdown\n options: optionsProp,\n emptyText,\n creatable,\n filterFn,\n sortFn,\n selectedBehavior,\n onClose,\n onOpen,\n\n // other\n disabled,\n delimiter,\n });\n\n // Связано с ChipsInputProps\n const rootRef = useExternRef(getRootRef);\n const inputRef = useExternRef(getRef, inputRefHook);\n const forbidCloseByOutsideClick = React.useRef(false);\n\n // Связано с CustomSelectDropdownProps\n const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n 'top' | 'bottom'\n >(placementProp);\n\n const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n if (placement.startsWith('top')) {\n setDropdownVerticalPlacement('top');\n } else if (placement.startsWith('bottom')) {\n setDropdownVerticalPlacement('bottom');\n }\n }, []);\n\n const dropdownId = React.useId();\n const dropdownCurrentItemId =\n focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n\n if (!readOnly) {\n setOpened(true);\n setFocusedOptionIndex(null);\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!readOnly && !event.defaultPrevented && !creatable) {\n event.preventDefault();\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = dropdownScrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\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 /* istanbul ignore next: нет представления как воспроизвести */\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 = (index: number, oldIndex: number | null) => {\n if (index === oldIndex) {\n /* istanbul ignore next: нет представления как воспроизвести */\n return;\n }\n\n const option = options[index];\n\n if (isNotServicePreset(option) && option.disabled) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === FOCUS_ACTION_PREV) {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (onKeyDownProp) {\n onKeyDownProp(event);\n }\n\n if (event.defaultPrevented || readOnly) {\n return;\n }\n\n switch (event.key) {\n case Keys.ARROW_UP:\n case Keys.ARROW_DOWN:\n event.preventDefault();\n\n if (!opened) {\n setOpened(true);\n focusOption(null, FOCUS_ACTION_NEXT);\n } else {\n focusOption(\n focusedOptionIndex,\n event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n );\n }\n break;\n case Keys.ENTER: {\n if (!opened) {\n break;\n }\n if (focusedOptionIndex != null) {\n const foundOption = options[focusedOptionIndex];\n if (foundOption && isNotServicePreset(foundOption)) {\n event.preventDefault();\n\n if (onChangeStart) {\n onChangeStart(event, foundOption);\n }\n\n addOption(foundOption);\n setFocusedOptionIndex(null);\n clearInput();\n if (closeAfterSelect) {\n setOpened(false);\n }\n\n break;\n }\n }\n\n if (!creatable) {\n event.preventDefault();\n }\n break;\n }\n case Keys.ESCAPE:\n case Keys.TAB:\n if (opened) {\n setOpened(false);\n }\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex === null) {\n setFocusedOption(null);\n } else {\n const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n setFocusedOption(foundFocusedOptionIndex);\n }\n }\n }, [options, focusedOptionIndex, setFocusedOption]);\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const handleClickOutside = React.useCallback(() => {\n if (!forbidCloseByOutsideClick.current) {\n setOpened(false);\n }\n forbidCloseByOutsideClick.current = false;\n }, [setOpened]);\n\n useGlobalOnClickOutside(\n handleClickOutside,\n opened ? rootRef : null,\n opened ? dropdownScrollBoxRef : null,\n );\n\n const onDropdownIconClick: MouseEventHandler<SVGSVGElement> = React.useCallback(\n (e) => {\n if (opened) {\n e.preventDefault();\n setOpened(false);\n }\n },\n [opened, setOpened],\n );\n\n const dropdownContent = React.useMemo(() => {\n const defaultDropdownContent = options.map((option, index) => {\n const dropdownItemId = `${dropdownId}-${index}`;\n\n if (isEmptyOptionPreset(option)) {\n return (\n <Footnote key=\"empty-text\" className={styles.empty}>\n {option.placeholder}\n </Footnote>\n );\n }\n if (isCreateNewOptionPreset(option)) {\n return (\n <CustomSelectOption\n key=\"create-new-option\"\n id={dropdownItemId}\n hovered={focusedOptionIndex === index}\n onMouseDown={() => addOptionFromInput(inputValue)}\n onMouseEnter={() => setFocusedOptionIndex(index)}\n >\n {option.actionText}\n </CustomSelectOption>\n );\n }\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOption(\n {\n id: dropdownItemId,\n disabled: option.disabled,\n hovered: focusedOption\n ? getOptionValue(option) === getOptionValue(focusedOption)\n : false,\n children: option.label,\n selected: !!value.find(\n (selectedOption: Option) =>\n getOptionValue(selectedOption) === getOptionValue(option),\n ),\n getRootRef(node) {\n if (node) {\n chipsSelectOptions[index] = node;\n }\n },\n onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n if (option.disabled) {\n return;\n }\n if (onChangeStart) {\n onChangeStart(event, option);\n }\n\n if (!event.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n forbidCloseByOutsideClick.current = true;\n clearInput();\n }\n },\n onMouseEnter() {\n setFocusedOptionIndex(index);\n },\n },\n option,\n )}\n </React.Fragment>\n );\n });\n\n if (renderDropdown) {\n return renderDropdown({\n defaultDropdownContent,\n });\n }\n return defaultDropdownContent;\n }, [\n addOption,\n addOptionFromInput,\n chipsSelectOptions,\n clearInput,\n closeAfterSelect,\n dropdownId,\n focusedOption,\n focusedOptionIndex,\n getOptionValue,\n inputValue,\n onChangeStart,\n options,\n renderDropdown,\n renderOption,\n setFocusedOptionIndex,\n setOpened,\n value,\n ]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (dropdownVerticalPlacement.includes('top') ? styles.popUp : styles.popDown)) ||\n undefined,\n [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n );\n\n const clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);\n\n return (\n <>\n <ChipsInputBase\n {...restProps}\n disabled={disabled}\n readOnly={readOnly}\n clearButtonShown={clearButtonShown}\n clearButtonTestId={clearButtonTestId}\n // FormFieldProps\n id={labelledbyId}\n getRootRef={rootRef}\n className={classNames(styles.host, openedClassNames, className)}\n status={status}\n after={\n dropdownIconProp || (\n <DropdownIcon\n opened={opened}\n onClick={onDropdownIconClick}\n className={classNames(\n styles.dropdownIcon,\n clearButtonShown && styles.dropdownIconWithOffset,\n )}\n />\n )\n }\n // option\n value={value}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n renderChip={renderChip}\n onClear={clearOptions}\n // input\n getRef={inputRef}\n inputValue={inputValue}\n onInputChange={onInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // a11y\n role=\"combobox\"\n aria-expanded={opened}\n aria-autocomplete=\"list\"\n aria-controls={opened ? dropdownId : undefined}\n aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n aria-haspopup=\"listbox\"\n />\n {opened && (\n <CustomSelectDropdown\n data-testid={dropdownTestId}\n targetRef={rootRef}\n placement={dropdownVerticalPlacement}\n scrollBoxRef={dropdownScrollBoxRef}\n onPlacementChange={onDropdownPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n offsetDistance={dropdownOffsetDistance}\n overscrollBehavior={overscrollBehavior}\n // a11y\n id={dropdownId}\n role=\"listbox\"\n aria-labelledby={labelledbyId}\n >\n {dropdownContent}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnClickOutside","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","sortFn","dropdownTestId","onClose","onOpen","overscrollBehavior","renderDropdown","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","readOnly","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","delimiter","restProps","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","forbidCloseByOutsideClick","useRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","onDropdownPlacementChange","useCallback","startsWith","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownMouseLeave","handleClickOutside","onDropdownIconClick","e","dropdownContent","useMemo","defaultDropdownContent","map","dropdownItemId","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","clearButtonShown","after","onClick","onAddChipOption","onRemoveChipOption","onClear","role","aria-expanded","aria-autocomplete","aria-controls","aria-activedescendant","aria-haspopup","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","aria-labelledby"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type MouseEventHandler } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalOnEventOutside } from '../../hooks/useGlobalOnClickOutside';\nimport { Keys } from '../../lib/accessibility';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';\nimport {\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n renderChipDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipsInputBaseProps } from '../ChipsInputBase/types';\nimport {\n CustomSelectDropdown,\n type CustomSelectDropdownProps,\n} from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n CustomSelectOption,\n type CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport type { FormFieldProps } from '../FormField/FormField';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport {\n DEFAULT_EMPTY_TEXT,\n DEFAULT_SELECTED_BEHAVIOR,\n FOCUS_ACTION_NEXT,\n FOCUS_ACTION_PREV,\n isCreateNewOptionPreset,\n isEmptyOptionPreset,\n isNotServicePreset,\n renderOptionDefault,\n} from './constants';\nimport type { FocusActionType, OptionPreset } from './types';\nimport { useChipsSelect, type UseChipsSelectProps } from './useChipsSelect';\nimport styles from './ChipsSelect.module.css';\n\nconst findIndexAfter = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n startIndex = -1,\n) => {\n if (startIndex >= options.length - 1) {\n return -1;\n }\n return options.findIndex(\n (option, i) => i > startIndex && (!isNotServicePreset(option) || !option.disabled),\n );\n};\n\nconst findIndexBefore = <O extends ChipOption>(\n options: Array<OptionPreset<O>> = [],\n endIndex: number = options.length,\n) => {\n let result = -1;\n if (endIndex <= 0) {\n return result;\n }\n for (let i = endIndex - 1; i >= 0; i--) {\n let option = options[i];\n\n if (!isNotServicePreset(option) || !option.disabled) {\n result = i;\n break;\n }\n }\n return result;\n};\n\nexport interface ChipsSelectProps<O extends ChipOption>\n extends ChipsInputBaseProps<O>,\n UseChipsSelectProps<O>,\n Pick<FormFieldProps, 'status' | 'mode' | 'before'>,\n Pick<CustomSelectDropdownProps, 'overscrollBehavior'> {\n /**\n * Расположение выпадающего списка.\n */\n placement?: 'top' | 'bottom';\n /**\n * Отрисовка Spinner вместо списка опций в выпадающем списке.\n */\n fetching?: boolean;\n /**\n * Закрытие выпадающего списка после выбора элемента.\n */\n closeAfterSelect?: boolean;\n /**\n * Ширина раскрывающегося списка зависит от контента.\n */\n dropdownAutoWidth?: boolean;\n /**\n * Принудительно использовать портал.\n */\n forceDropdownPortal?: boolean;\n /**\n * Передает атрибут `data-testid` для дропдауна.\n */\n dropdownTestId?: string;\n /**\n * Иконка раскрывающегося списка.\n */\n icon?: React.ReactNode;\n /**\n * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`).\n */\n addOnBlur?: boolean;\n /**\n * Отключает максимальную высоту по умолчанию.\n */\n noMaxHeight?: boolean;\n /**\n * Функция для отрисовки кастомной опции в выпадающем списке.\n */\n renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;\n /**\n * Рендер-проп для кастомного рендера содержимого дропдауна.\n * В `defaultDropdownContent` содержится список опций.\n */\n renderDropdown?: ({\n defaultDropdownContent,\n }: {\n defaultDropdownContent: React.ReactNode;\n }) => React.ReactNode;\n /**\n * Событие срабатывающее перед `onChange`.\n */\n onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;\n\n /**\n * Отступ от выпадающего списка.\n */\n dropdownOffsetDistance?: number;\n\n /**\n * Если `true`, то справа будет отображаться кнопка для очистки значения.\n */\n allowClearButton?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n // FormFieldProps\n id: labelledbyId,\n getRootRef,\n className,\n status = 'default',\n icon: dropdownIconProp,\n onChangeStart,\n\n // CustomSelectDropdownProps\n options: optionsProp,\n placement: placementProp = 'bottom',\n closeAfterSelect = true,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n fetching = false,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight = false,\n filterFn = defaultFilterFn,\n sortFn = false,\n dropdownTestId,\n onClose,\n onOpen,\n overscrollBehavior,\n renderDropdown,\n\n // ChipsInputProps\n getRef,\n value: valueProp,\n defaultValue,\n inputValue: inputValueProp,\n defaultInputValue,\n disabled,\n readOnly,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n getNewOptionData = getNewOptionDataDefault,\n renderChip = renderChipDefault,\n renderOption = renderOptionDefault,\n onChange,\n onFocus: onFocusProp,\n onInputChange: onInputChangeProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n dropdownOffsetDistance = 0,\n allowClearButton,\n clearButtonTestId,\n delimiter,\n ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n const {\n // Связано с ChipsInputProps\n // option\n value,\n addOptionFromInput,\n addOption,\n removeOption,\n clearOptions,\n // input\n inputRef: inputRefHook,\n inputValue,\n clearInput,\n onInputChange,\n\n // Связано с CustomSelectDropdownProps\n options,\n opened,\n setOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n } = useChipsSelect({\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionValue,\n getOptionLabel,\n getNewOptionData,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue,\n onInputChange: onInputChangeProp,\n\n // dropdown\n options: optionsProp,\n emptyText,\n creatable,\n filterFn,\n sortFn,\n selectedBehavior,\n onClose,\n onOpen,\n\n // other\n disabled,\n delimiter,\n });\n\n // Связано с ChipsInputProps\n const rootRef = useExternRef(getRootRef);\n const inputRef = useExternRef(getRef, inputRefHook);\n\n // Связано с CustomSelectDropdownProps\n const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<\n 'top' | 'bottom'\n >(placementProp);\n\n const onDropdownPlacementChange = React.useCallback((placement: Placement) => {\n if (placement.startsWith('top')) {\n setDropdownVerticalPlacement('top');\n } else if (placement.startsWith('bottom')) {\n setDropdownVerticalPlacement('bottom');\n }\n }, []);\n\n const dropdownId = React.useId();\n const dropdownCurrentItemId =\n focusedOptionIndex !== null ? `${dropdownId}-${focusedOptionIndex}` : undefined;\n const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);\n\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onFocusProp) {\n onFocusProp(event);\n }\n\n if (!readOnly) {\n setOpened(true);\n setFocusedOptionIndex(null);\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlurProp) {\n onBlurProp(event);\n }\n\n // Не добавляем значение, если его нужно выбрать строго из списка\n if (!readOnly && !event.defaultPrevented && !creatable) {\n event.preventDefault();\n }\n };\n\n const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n const scrollToElement = (index: number, center = false) => {\n const dropdown = dropdownScrollBoxRef.current;\n const item = chipsSelectOptions[index];\n\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\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 /* istanbul ignore next: нет представления как воспроизвести */\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 = (index: number, oldIndex: number | null) => {\n if (index === oldIndex) {\n /* istanbul ignore next: нет представления как воспроизвести */\n return;\n }\n\n const option = options[index];\n\n if (isNotServicePreset(option) && option.disabled) {\n return;\n }\n\n scrollToElement(index);\n setFocusedOptionIndex(index);\n };\n\n const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n let index = nextIndex === null ? -1 : nextIndex;\n\n if (type === FOCUS_ACTION_NEXT) {\n const nextIndex = findIndexAfter(options, index);\n index = nextIndex === -1 ? findIndexAfter(options) : nextIndex; // Следующий за index или первый валидный до index\n } else if (type === FOCUS_ACTION_PREV) {\n const beforeIndex = findIndexBefore(options, index);\n index = beforeIndex === -1 ? findIndexBefore(options) : beforeIndex; // Предшествующий index или последний валидный после index\n }\n\n focusOptionByIndex(index, focusedOptionIndex);\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (onKeyDownProp) {\n onKeyDownProp(event);\n }\n\n if (event.defaultPrevented || readOnly) {\n return;\n }\n\n switch (event.key) {\n case Keys.ARROW_UP:\n case Keys.ARROW_DOWN:\n event.preventDefault();\n\n if (!opened) {\n setOpened(true);\n focusOption(null, FOCUS_ACTION_NEXT);\n } else {\n focusOption(\n focusedOptionIndex,\n event.key === Keys.ARROW_UP ? FOCUS_ACTION_PREV : FOCUS_ACTION_NEXT,\n );\n }\n break;\n case Keys.ENTER: {\n if (!opened) {\n break;\n }\n if (focusedOptionIndex != null) {\n const foundOption = options[focusedOptionIndex];\n if (foundOption && isNotServicePreset(foundOption)) {\n event.preventDefault();\n\n if (onChangeStart) {\n onChangeStart(event, foundOption);\n }\n\n addOption(foundOption);\n setFocusedOptionIndex(null);\n clearInput();\n if (closeAfterSelect) {\n setOpened(false);\n }\n\n break;\n }\n }\n\n if (!creatable) {\n event.preventDefault();\n }\n break;\n }\n case Keys.ESCAPE:\n case Keys.TAB:\n if (opened) {\n setOpened(false);\n }\n }\n };\n\n React.useEffect(() => {\n if (focusedOptionIndex === null) {\n setFocusedOption(null);\n } else {\n const foundFocusedOptionIndex = options[focusedOptionIndex];\n\n if (foundFocusedOptionIndex && isNotServicePreset(foundFocusedOptionIndex)) {\n setFocusedOption(foundFocusedOptionIndex);\n }\n }\n }, [options, focusedOptionIndex, setFocusedOption]);\n\n const onDropdownMouseLeave = React.useCallback(() => {\n setFocusedOptionIndex(null);\n }, [setFocusedOptionIndex]);\n\n const handleClickOutside = React.useCallback(() => {\n setOpened(false);\n }, [setOpened]);\n\n useGlobalOnEventOutside(\n 'mousedown', // см. https://github.com/VKCOM/VKUI/pull/8582\n handleClickOutside,\n opened ? rootRef : null,\n opened ? dropdownScrollBoxRef : null,\n );\n\n const onDropdownIconClick: MouseEventHandler<SVGSVGElement> = React.useCallback(\n (e) => {\n if (opened) {\n e.preventDefault();\n setOpened(false);\n }\n },\n [opened, setOpened],\n );\n\n const dropdownContent = React.useMemo(() => {\n const defaultDropdownContent = options.map((option, index) => {\n const dropdownItemId = `${dropdownId}-${index}`;\n\n if (isEmptyOptionPreset(option)) {\n return (\n <Footnote key=\"empty-text\" className={styles.empty}>\n {option.placeholder}\n </Footnote>\n );\n }\n if (isCreateNewOptionPreset(option)) {\n return (\n <CustomSelectOption\n key=\"create-new-option\"\n id={dropdownItemId}\n hovered={focusedOptionIndex === index}\n onMouseDown={() => addOptionFromInput(inputValue)}\n onMouseEnter={() => setFocusedOptionIndex(index)}\n >\n {option.actionText}\n </CustomSelectOption>\n );\n }\n return (\n <React.Fragment key={`${typeof option.value}-${option.value}`}>\n {renderOption(\n {\n id: dropdownItemId,\n disabled: option.disabled,\n hovered: focusedOption\n ? getOptionValue(option) === getOptionValue(focusedOption)\n : false,\n children: option.label,\n selected: !!value.find(\n (selectedOption: Option) =>\n getOptionValue(selectedOption) === getOptionValue(option),\n ),\n getRootRef(node) {\n if (node) {\n chipsSelectOptions[index] = node;\n }\n },\n onMouseDown(event: React.MouseEvent<HTMLDivElement>) {\n if (option.disabled) {\n return;\n }\n if (onChangeStart) {\n onChangeStart(event, option);\n }\n\n if (!event.defaultPrevented) {\n closeAfterSelect && setOpened(false);\n addOption(option);\n clearInput();\n }\n },\n onMouseEnter() {\n setFocusedOptionIndex(index);\n },\n },\n option,\n )}\n </React.Fragment>\n );\n });\n\n if (renderDropdown) {\n return renderDropdown({\n defaultDropdownContent,\n });\n }\n return defaultDropdownContent;\n }, [\n addOption,\n addOptionFromInput,\n chipsSelectOptions,\n clearInput,\n closeAfterSelect,\n dropdownId,\n focusedOption,\n focusedOptionIndex,\n getOptionValue,\n inputValue,\n onChangeStart,\n options,\n renderDropdown,\n renderOption,\n setFocusedOptionIndex,\n setOpened,\n value,\n ]);\n\n const openedClassNames = React.useMemo(\n () =>\n (opened &&\n dropdownOffsetDistance === 0 &&\n (dropdownVerticalPlacement.includes('top') ? styles.popUp : styles.popDown)) ||\n undefined,\n [dropdownOffsetDistance, opened, dropdownVerticalPlacement],\n );\n\n const clearButtonShown = allowClearButton && (!!value.length || !!inputValue.length);\n\n return (\n <>\n <ChipsInputBase\n {...restProps}\n disabled={disabled}\n readOnly={readOnly}\n clearButtonShown={clearButtonShown}\n clearButtonTestId={clearButtonTestId}\n // FormFieldProps\n id={labelledbyId}\n getRootRef={rootRef}\n className={classNames(styles.host, openedClassNames, className)}\n status={status}\n after={\n dropdownIconProp || (\n <DropdownIcon\n opened={opened}\n onClick={onDropdownIconClick}\n className={classNames(\n styles.dropdownIcon,\n clearButtonShown && styles.dropdownIconWithOffset,\n )}\n />\n )\n }\n // option\n value={value}\n onAddChipOption={addOptionFromInput}\n onRemoveChipOption={removeOption}\n renderChip={renderChip}\n onClear={clearOptions}\n // input\n getRef={inputRef}\n inputValue={inputValue}\n onInputChange={onInputChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n // a11y\n role=\"combobox\"\n aria-expanded={opened}\n aria-autocomplete=\"list\"\n aria-controls={opened ? dropdownId : undefined}\n aria-activedescendant={opened ? dropdownCurrentItemId : undefined}\n aria-haspopup=\"listbox\"\n />\n {opened && (\n <CustomSelectDropdown\n data-testid={dropdownTestId}\n targetRef={rootRef}\n placement={dropdownVerticalPlacement}\n scrollBoxRef={dropdownScrollBoxRef}\n onPlacementChange={onDropdownPlacementChange}\n onMouseLeave={onDropdownMouseLeave}\n fetching={fetching}\n autoWidth={dropdownAutoWidth}\n forcePortal={forceDropdownPortal}\n noMaxHeight={noMaxHeight}\n offsetDistance={dropdownOffsetDistance}\n overscrollBehavior={overscrollBehavior}\n // a11y\n id={dropdownId}\n role=\"listbox\"\n aria-labelledby={labelledbyId}\n >\n {dropdownContent}\n </CustomSelectDropdown>\n )}\n </>\n );\n};\n"],"names":["React","classNames","useExternRef","useGlobalOnEventOutside","Keys","defaultFilterFn","ChipsInputBase","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","renderChipDefault","CustomSelectDropdown","CustomSelectOption","DropdownIcon","Footnote","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","isCreateNewOptionPreset","isEmptyOptionPreset","isNotServicePreset","renderOptionDefault","useChipsSelect","findIndexAfter","options","startIndex","length","findIndex","option","i","disabled","findIndexBefore","endIndex","result","ChipsSelect","id","labelledbyId","getRootRef","className","status","icon","dropdownIconProp","onChangeStart","optionsProp","placement","placementProp","closeAfterSelect","selectedBehavior","emptyText","creatable","fetching","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","filterFn","sortFn","dropdownTestId","onClose","onOpen","overscrollBehavior","renderDropdown","getRef","value","valueProp","defaultValue","inputValue","inputValueProp","defaultInputValue","readOnly","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onFocus","onFocusProp","onInputChange","onInputChangeProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","delimiter","restProps","addOptionFromInput","addOption","removeOption","clearOptions","inputRef","inputRefHook","clearInput","opened","setOpened","focusedOption","focusedOptionIndex","setFocusedOption","setFocusedOptionIndex","rootRef","dropdownVerticalPlacement","setDropdownVerticalPlacement","useState","onDropdownPlacementChange","useCallback","startsWith","dropdownId","useId","dropdownCurrentItemId","undefined","dropdownScrollBoxRef","useRef","handleFocus","event","handleBlur","defaultPrevented","preventDefault","chipsSelectOptions","current","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","beforeIndex","handleKeyDown","key","ARROW_UP","ARROW_DOWN","ENTER","foundOption","ESCAPE","TAB","useEffect","foundFocusedOptionIndex","onDropdownMouseLeave","handleClickOutside","onDropdownIconClick","e","dropdownContent","useMemo","defaultDropdownContent","map","dropdownItemId","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","clearButtonShown","after","onClick","onAddChipOption","onRemoveChipOption","onClear","role","aria-expanded","aria-autocomplete","aria-controls","aria-activedescendant","aria-haspopup","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","aria-labelledby"],"mappings":"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"}
@@ -47,7 +47,7 @@ export interface StateProps {
47
47
  */
48
48
  unlockParentHover?: boolean;
49
49
  /**
50
- * Длительность показа `activated`-состояния.
50
+ * Длительность показа `active`-состояния.
51
51
  */
52
52
  activeEffectDelay?: number;
53
53
  /**
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Clickable/useState.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n /**\n * Указывает, должен ли компонент реагировать на `hover`-состояние.\n */\n hasHover?: boolean;\n /**\n * Позволяет управлять `hovered`-состоянием извне.\n */\n hovered?: boolean;\n /**\n * Позволяет управлять `activated`-состоянием извне.\n */\n activated?: boolean;\n /**\n * Указывает, должен ли компонент реагировать на `active`-состояние.\n */\n hasActive?: boolean;\n\n /**\n * Позволяет родительскому компоненту\n * иметь `hovered`-cостояние при наведении\n * на любой дочерний элемент.\n * По умолчанию состояние hovered у родителя сбрасывается.\n *\n * Присваивается родителькому компоненту.\n *\n * @example\n * <Tappable hasHoverWithChildren>\n * <IconButton />\n * <IconButton />\n * <IconButton />\n * </Tappable>\n */\n hasHoverWithChildren?: boolean;\n\n /**\n * Позволяет родительскому компоненту показывать hovered-состояние при наведении\n * на текущий дочерний компонент.\n *\n * Присваивается дочернему компоненту.\n *\n * @example\n * <Tappable>\n * <IconButton unlockParentHover />\n * <IconButton unlockParentHover />\n * <IconButton />\n * </Tappable>\n */\n unlockParentHover?: boolean;\n\n /**\n * Длительность показа `activated`-состояния.\n */\n activeEffectDelay?: number;\n\n /**\n * Стиль подсветки `active`-состояния.\n */\n activeClassName?: string;\n\n /**\n * Стиль подсветки `hover`-состояния.\n */\n hoverClassName?: string;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nconst ACTIVE_DELAY = 70;\n\ninterface UseHoverProps extends Pick<StateProps, 'hovered' | 'hasHover'> {\n /**\n * Блокирование активации состояний.\n */\n lockState: boolean;\n setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет наведением на компонент, игнорирует тач события.\n */\nfunction useHover({ hovered, hasHover = true, lockState, setParentStateLock }: UseHoverProps) {\n const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);\n\n const prevIsHoveredRef = React.useRef<boolean | undefined>(undefined);\n\n const handleHover = React.useCallback(\n (isHover: boolean) => {\n setHoveredStateLocal(isHover);\n\n const isHovered =\n hovered ??\n calculateStateValue({\n hasState: hasHover,\n isLocked: lockState,\n stateValueLocal: isHover,\n });\n\n // проверка сделана чтобы реже вызывать обновление состояния\n // контекста родителя\n if (isHovered !== prevIsHoveredRef.current) {\n prevIsHoveredRef.current = isHovered;\n setParentStateLock(isHovered);\n }\n },\n [setParentStateLock, hasHover, hovered, lockState],\n );\n\n const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n if (e.pointerType === 'touch') {\n return;\n }\n\n handleHover(true);\n };\n\n const onPointerLeave = () => {\n handleHover(false);\n };\n\n const isHovered =\n hovered ??\n calculateStateValue({\n hasState: hasHover,\n isLocked: lockState,\n stateValueLocal: hoveredStateLocal,\n });\n\n return {\n isHovered,\n onPointerEnter: hasHover ? onPointerEnter : noop,\n onPointerLeave: hasHover ? onPointerLeave : noop,\n };\n}\n\ninterface UseActiveProps extends Pick<StateProps, 'activated' | 'activeEffectDelay' | 'hasActive'> {\n /**\n * Блокирование активации состояний.\n */\n lockStateRef: React.RefObject<boolean>;\n setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет активацией компонента.\n */\nfunction useActive({\n activated,\n activeEffectDelay,\n hasActive = true,\n lockStateRef,\n setParentStateLock,\n}: UseActiveProps) {\n // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,\n // если установка отложена c помощью delay, то и вызов будет отложен\n const [activatedState, setActivated] = useStateWithDelay<boolean>(false, 0, setParentStateLock);\n\n // Список нажатий которые не требуется отменять\n const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n const onPointerDown = () => {\n if (lockStateRef.current) {\n return;\n }\n\n setActivated(true, ACTIVE_DELAY);\n // намеренно выставляем lock, так как setActivated вызов отложен\n // а у отложенного setActivated setParentStateLock тоже вызовится отложенно\n // родитель сейчас тоже обработает это же событие PointerDown\n // если мы не залочим activatedState у родителя сейчас, то родитель выставит active состояние\n setParentStateLock(true);\n };\n\n const onPointerCancel: React.PointerEventHandler = (e) => {\n if (pointersUp.has(e.pointerId)) {\n pointersUp.delete(e.pointerId);\n return;\n }\n\n setActivated(false);\n };\n\n const onPointerUp: React.PointerEventHandler = (e) => {\n pointersUp.add(e.pointerId);\n\n if (lockStateRef.current) {\n return;\n }\n\n setActivated(true);\n setActivated(false, activeEffectDelay);\n };\n\n const isActivated =\n activated ??\n calculateStateValue({\n hasState: hasActive,\n isLocked: lockStateRef.current,\n stateValueLocal: activatedState,\n });\n\n return {\n isActivated,\n onPointerLeave: hasActive ? onPointerCancel : noop,\n onPointerDown: hasActive ? onPointerDown : noop,\n onPointerCancel: hasActive ? onPointerCancel : noop,\n onPointerUp: hasActive ? onPointerUp : noop,\n };\n}\n\ninterface ClickableLockStateContextInterface {\n lockHoverStateBubbling?: (v: boolean) => void;\n lockActiveStateBubbling?: (v: boolean) => void;\n}\n\nexport const ClickableLockStateContext: React.Context<ClickableLockStateContextInterface> =\n React.createContext<ClickableLockStateContextInterface>({\n lockHoverStateBubbling: undefined,\n lockActiveStateBubbling: undefined,\n });\n\n/**\n * Блокирует стейт на всплытие.\n */\nfunction useLockState(\n setParentStateLockBubbling: (v: boolean) => void,\n): readonly [boolean, (v: boolean) => void, (...args: any[]) => void] {\n const [lockState, setLockState] = React.useState(false);\n\n const setStateLockBubblingImmediate = React.useCallback(\n (isLock: boolean) => {\n setLockState(isLock);\n setParentStateLockBubbling(isLock);\n },\n [setParentStateLockBubbling],\n );\n\n return [lockState, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\nfunction useLockRef(\n setParentStateLockBubbling: (v: boolean) => void,\n): readonly [React.RefObject<boolean>, (v: boolean) => void, (...args: any[]) => void] {\n const lockStateRef = React.useRef(false);\n\n const setStateLockBubblingImmediate = React.useCallback(\n (isLock: boolean) => {\n lockStateRef.current = isLock;\n setParentStateLockBubbling(isLock);\n },\n [setParentStateLockBubbling],\n );\n\n return [lockStateRef, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\n/**\n * Управляет состоянием компонента.\n */\nexport function useState({\n hovered,\n hasHover,\n activated,\n hasActive,\n activeEffectDelay,\n unlockParentHover,\n hoverClassName,\n activeClassName,\n}: StateProps): {\n stateClassName: string;\n setLockHoverBubblingImmediate: (...args: any[]) => void;\n setLockActiveBubblingImmediate: (...args: any[]) => void;\n} {\n const { lockHoverStateBubbling = noop, lockActiveStateBubbling = noop } =\n React.useContext(ClickableLockStateContext);\n\n const [lockHoverState, setParentStateLockHoverBubbling, setLockHoverBubblingImmediate] =\n useLockState(unlockParentHover ? noop : lockHoverStateBubbling);\n const [lockActiveStateRef, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] =\n useLockRef(lockActiveStateBubbling);\n\n const { isHovered, ...hoverEvent } = useHover({\n hasHover,\n hovered,\n lockState: lockHoverState,\n setParentStateLock: setParentStateLockHoverBubbling,\n });\n\n const { isActivated, ...activeEvent } = useActive({\n activated,\n hasActive,\n activeEffectDelay,\n lockStateRef: lockActiveStateRef,\n setParentStateLock: setParentStateLockActiveBubbling,\n });\n\n const stateClassName = classNames(isHovered && hoverClassName, isActivated && activeClassName);\n const handlers = mergeCalls(hoverEvent, activeEvent);\n\n return {\n stateClassName,\n setLockHoverBubblingImmediate,\n setLockActiveBubblingImmediate,\n ...handlers,\n };\n}\n\n// Общая функция для определения конечного состояния active/hovered\nfunction calculateStateValue({\n hasState,\n isLocked,\n stateValueLocal,\n}: {\n hasState: boolean;\n isLocked: boolean;\n stateValueLocal: boolean;\n}): boolean {\n return hasState && !isLocked && stateValueLocal;\n}\n"],"names":["React","classNames","noop","mergeCalls","useStateWithDelay","DEFAULT_ACTIVE_EFFECT_DELAY","ACTIVE_DELAY","useHover","hovered","hasHover","lockState","setParentStateLock","hoveredStateLocal","setHoveredStateLocal","useState","prevIsHoveredRef","useRef","undefined","handleHover","useCallback","isHover","isHovered","calculateStateValue","hasState","isLocked","stateValueLocal","current","onPointerEnter","e","pointerType","onPointerLeave","useActive","activated","activeEffectDelay","hasActive","lockStateRef","activatedState","setActivated","pointersUp","useMemo","Set","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","isActivated","ClickableLockStateContext","createContext","lockHoverStateBubbling","lockActiveStateBubbling","useLockState","setParentStateLockBubbling","setLockState","setStateLockBubblingImmediate","isLock","useLockRef","unlockParentHover","hoverClassName","activeClassName","useContext","lockHoverState","setParentStateLockHoverBubbling","setLockHoverBubblingImmediate","lockActiveStateRef","setParentStateLockActiveBubbling","setLockActiveBubblingImmediate","hoverEvent","activeEvent","stateClassName","handlers"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/Clickable/useState.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { useStateWithDelay } from './useStateWithDelay';\n\nexport interface StateProps {\n /**\n * Указывает, должен ли компонент реагировать на `hover`-состояние.\n */\n hasHover?: boolean;\n /**\n * Позволяет управлять `hovered`-состоянием извне.\n */\n hovered?: boolean;\n /**\n * Позволяет управлять `activated`-состоянием извне.\n */\n activated?: boolean;\n /**\n * Указывает, должен ли компонент реагировать на `active`-состояние.\n */\n hasActive?: boolean;\n\n /**\n * Позволяет родительскому компоненту\n * иметь `hovered`-cостояние при наведении\n * на любой дочерний элемент.\n * По умолчанию состояние hovered у родителя сбрасывается.\n *\n * Присваивается родителькому компоненту.\n *\n * @example\n * <Tappable hasHoverWithChildren>\n * <IconButton />\n * <IconButton />\n * <IconButton />\n * </Tappable>\n */\n hasHoverWithChildren?: boolean;\n\n /**\n * Позволяет родительскому компоненту показывать hovered-состояние при наведении\n * на текущий дочерний компонент.\n *\n * Присваивается дочернему компоненту.\n *\n * @example\n * <Tappable>\n * <IconButton unlockParentHover />\n * <IconButton unlockParentHover />\n * <IconButton />\n * </Tappable>\n */\n unlockParentHover?: boolean;\n\n /**\n * Длительность показа `active`-состояния.\n */\n activeEffectDelay?: number;\n\n /**\n * Стиль подсветки `active`-состояния.\n */\n activeClassName?: string;\n\n /**\n * Стиль подсветки `hover`-состояния.\n */\n hoverClassName?: string;\n}\n\nexport const DEFAULT_ACTIVE_EFFECT_DELAY = 600;\n\nconst ACTIVE_DELAY = 70;\n\ninterface UseHoverProps extends Pick<StateProps, 'hovered' | 'hasHover'> {\n /**\n * Блокирование активации состояний.\n */\n lockState: boolean;\n setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет наведением на компонент, игнорирует тач события.\n */\nfunction useHover({ hovered, hasHover = true, lockState, setParentStateLock }: UseHoverProps) {\n const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);\n\n const prevIsHoveredRef = React.useRef<boolean | undefined>(undefined);\n\n const handleHover = React.useCallback(\n (isHover: boolean) => {\n setHoveredStateLocal(isHover);\n\n const isHovered =\n hovered ??\n calculateStateValue({\n hasState: hasHover,\n isLocked: lockState,\n stateValueLocal: isHover,\n });\n\n // проверка сделана чтобы реже вызывать обновление состояния\n // контекста родителя\n if (isHovered !== prevIsHoveredRef.current) {\n prevIsHoveredRef.current = isHovered;\n setParentStateLock(isHovered);\n }\n },\n [setParentStateLock, hasHover, hovered, lockState],\n );\n\n const onPointerEnter: React.PointerEventHandler<any> = (e) => {\n if (e.pointerType === 'touch') {\n return;\n }\n\n handleHover(true);\n };\n\n const onPointerLeave = () => {\n handleHover(false);\n };\n\n const isHovered =\n hovered ??\n calculateStateValue({\n hasState: hasHover,\n isLocked: lockState,\n stateValueLocal: hoveredStateLocal,\n });\n\n return {\n isHovered,\n onPointerEnter: hasHover ? onPointerEnter : noop,\n onPointerLeave: hasHover ? onPointerLeave : noop,\n };\n}\n\ninterface UseActiveProps extends Pick<StateProps, 'activated' | 'activeEffectDelay' | 'hasActive'> {\n /**\n * Блокирование активации состояний.\n */\n lockStateRef: React.RefObject<boolean>;\n setParentStateLock: (v: boolean) => void;\n}\n\n/**\n * Управляет активацией компонента.\n */\nfunction useActive({\n activated,\n activeEffectDelay,\n hasActive = true,\n lockStateRef,\n setParentStateLock,\n}: UseActiveProps) {\n // передаём setParentStateLock, чтобы функция вызывалась вместе с установкой стейта,\n // если установка отложена c помощью delay, то и вызов будет отложен\n const [activatedState, setActivated] = useStateWithDelay<boolean>(false, 0, setParentStateLock);\n\n // Список нажатий которые не требуется отменять\n const pointersUp = React.useMemo(() => new Set<number>(), []);\n\n const onPointerDown = () => {\n if (lockStateRef.current) {\n return;\n }\n\n setActivated(true, ACTIVE_DELAY);\n // намеренно выставляем lock, так как setActivated вызов отложен\n // а у отложенного setActivated setParentStateLock тоже вызовится отложенно\n // родитель сейчас тоже обработает это же событие PointerDown\n // если мы не залочим activatedState у родителя сейчас, то родитель выставит active состояние\n setParentStateLock(true);\n };\n\n const onPointerCancel: React.PointerEventHandler = (e) => {\n if (pointersUp.has(e.pointerId)) {\n pointersUp.delete(e.pointerId);\n return;\n }\n\n setActivated(false);\n };\n\n const onPointerUp: React.PointerEventHandler = (e) => {\n pointersUp.add(e.pointerId);\n\n if (lockStateRef.current) {\n return;\n }\n\n setActivated(true);\n setActivated(false, activeEffectDelay);\n };\n\n const isActivated =\n activated ??\n calculateStateValue({\n hasState: hasActive,\n isLocked: lockStateRef.current,\n stateValueLocal: activatedState,\n });\n\n return {\n isActivated,\n onPointerLeave: hasActive ? onPointerCancel : noop,\n onPointerDown: hasActive ? onPointerDown : noop,\n onPointerCancel: hasActive ? onPointerCancel : noop,\n onPointerUp: hasActive ? onPointerUp : noop,\n };\n}\n\ninterface ClickableLockStateContextInterface {\n lockHoverStateBubbling?: (v: boolean) => void;\n lockActiveStateBubbling?: (v: boolean) => void;\n}\n\nexport const ClickableLockStateContext: React.Context<ClickableLockStateContextInterface> =\n React.createContext<ClickableLockStateContextInterface>({\n lockHoverStateBubbling: undefined,\n lockActiveStateBubbling: undefined,\n });\n\n/**\n * Блокирует стейт на всплытие.\n */\nfunction useLockState(\n setParentStateLockBubbling: (v: boolean) => void,\n): readonly [boolean, (v: boolean) => void, (...args: any[]) => void] {\n const [lockState, setLockState] = React.useState(false);\n\n const setStateLockBubblingImmediate = React.useCallback(\n (isLock: boolean) => {\n setLockState(isLock);\n setParentStateLockBubbling(isLock);\n },\n [setParentStateLockBubbling],\n );\n\n return [lockState, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\nfunction useLockRef(\n setParentStateLockBubbling: (v: boolean) => void,\n): readonly [React.RefObject<boolean>, (v: boolean) => void, (...args: any[]) => void] {\n const lockStateRef = React.useRef(false);\n\n const setStateLockBubblingImmediate = React.useCallback(\n (isLock: boolean) => {\n lockStateRef.current = isLock;\n setParentStateLockBubbling(isLock);\n },\n [setParentStateLockBubbling],\n );\n\n return [lockStateRef, setParentStateLockBubbling, setStateLockBubblingImmediate] as const;\n}\n\n/**\n * Управляет состоянием компонента.\n */\nexport function useState({\n hovered,\n hasHover,\n activated,\n hasActive,\n activeEffectDelay,\n unlockParentHover,\n hoverClassName,\n activeClassName,\n}: StateProps): {\n stateClassName: string;\n setLockHoverBubblingImmediate: (...args: any[]) => void;\n setLockActiveBubblingImmediate: (...args: any[]) => void;\n} {\n const { lockHoverStateBubbling = noop, lockActiveStateBubbling = noop } =\n React.useContext(ClickableLockStateContext);\n\n const [lockHoverState, setParentStateLockHoverBubbling, setLockHoverBubblingImmediate] =\n useLockState(unlockParentHover ? noop : lockHoverStateBubbling);\n const [lockActiveStateRef, setParentStateLockActiveBubbling, setLockActiveBubblingImmediate] =\n useLockRef(lockActiveStateBubbling);\n\n const { isHovered, ...hoverEvent } = useHover({\n hasHover,\n hovered,\n lockState: lockHoverState,\n setParentStateLock: setParentStateLockHoverBubbling,\n });\n\n const { isActivated, ...activeEvent } = useActive({\n activated,\n hasActive,\n activeEffectDelay,\n lockStateRef: lockActiveStateRef,\n setParentStateLock: setParentStateLockActiveBubbling,\n });\n\n const stateClassName = classNames(isHovered && hoverClassName, isActivated && activeClassName);\n const handlers = mergeCalls(hoverEvent, activeEvent);\n\n return {\n stateClassName,\n setLockHoverBubblingImmediate,\n setLockActiveBubblingImmediate,\n ...handlers,\n };\n}\n\n// Общая функция для определения конечного состояния active/hovered\nfunction calculateStateValue({\n hasState,\n isLocked,\n stateValueLocal,\n}: {\n hasState: boolean;\n isLocked: boolean;\n stateValueLocal: boolean;\n}): boolean {\n return hasState && !isLocked && stateValueLocal;\n}\n"],"names":["React","classNames","noop","mergeCalls","useStateWithDelay","DEFAULT_ACTIVE_EFFECT_DELAY","ACTIVE_DELAY","useHover","hovered","hasHover","lockState","setParentStateLock","hoveredStateLocal","setHoveredStateLocal","useState","prevIsHoveredRef","useRef","undefined","handleHover","useCallback","isHover","isHovered","calculateStateValue","hasState","isLocked","stateValueLocal","current","onPointerEnter","e","pointerType","onPointerLeave","useActive","activated","activeEffectDelay","hasActive","lockStateRef","activatedState","setActivated","pointersUp","useMemo","Set","onPointerDown","onPointerCancel","has","pointerId","delete","onPointerUp","add","isActivated","ClickableLockStateContext","createContext","lockHoverStateBubbling","lockActiveStateBubbling","useLockState","setParentStateLockBubbling","setLockState","setStateLockBubblingImmediate","isLock","useLockRef","unlockParentHover","hoverClassName","activeClassName","useContext","lockHoverState","setParentStateLockHoverBubbling","setLockHoverBubblingImmediate","lockActiveStateRef","setParentStateLockActiveBubbling","setLockActiveBubblingImmediate","hoverEvent","activeEvent","stateClassName","handlers"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}
@@ -89,7 +89,7 @@ const filter = (options, inputValue, filterFn)=>{
89
89
  * @see https://vkcom.github.io/VKUI/#/CustomSelect
90
90
  */ export function CustomSelect(props) {
91
91
  const [opened, setOpened] = React.useState(false);
92
- const { before, name, className, getRef, getRootRef, popupDirection = 'bottom', style, onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': optionsProp, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton = CustomSelectClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior, onInputKeyDown } = props, restProps = _object_without_properties(props, [
92
+ const { before, name, className, getRef, getRootRef, popupDirection = 'bottom', style, onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, forceDropdownPortal, selectType = 'default', searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': optionsProp, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton = CustomSelectClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior, onInputKeyDown, readOnly } = props, restProps = _object_without_properties(props, [
93
93
  "before",
94
94
  "name",
95
95
  "className",
@@ -124,7 +124,8 @@ const filter = (options, inputValue, filterFn)=>{
124
124
  "required",
125
125
  "getSelectInputRef",
126
126
  "overscrollBehavior",
127
- "onInputKeyDown"
127
+ "onInputKeyDown",
128
+ "readOnly"
128
129
  ]);
129
130
  if (process.env.NODE_ENV === 'development') {
130
131
  checkOptionsValueType(optionsProp);
@@ -612,7 +613,7 @@ const filter = (options, inputValue, filterFn)=>{
612
613
  iconProp,
613
614
  opened
614
615
  ]);
615
- const afterIcons = (icon || clearButtonShown) && /*#__PURE__*/ _jsxs(React.Fragment, {
616
+ const afterIcons = !readOnly && (icon || clearButtonShown) && /*#__PURE__*/ _jsxs(React.Fragment, {
616
617
  children: [
617
618
  clearButton,
618
619
  icon
@@ -706,13 +707,13 @@ const filter = (options, inputValue, filterFn)=>{
706
707
  onFocus: onFocus,
707
708
  onBlur: onBlur,
708
709
  className: openedClassNames,
709
- readOnly: !searchable,
710
+ readOnly: readOnly || !searchable,
710
711
  fetching: fetching,
711
712
  value: inputValue,
712
713
  onKeyUp: handleKeyUp,
713
- onKeyDown: _onInputKeyDown,
714
+ onKeyDown: !readOnly ? _onInputKeyDown : undefined,
714
715
  onChange: onInputChange,
715
- onClick: onClick,
716
+ onClick: !readOnly ? onClick : undefined,
716
717
  before: before,
717
718
  after: afterIcons,
718
719
  selectType: selectType,