@vkontakte/vkui 7.8.2 → 7.9.1
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/components/Box/Box.d.ts +11 -0
- package/dist/components/Box/Box.d.ts.map +1 -0
- package/dist/components/Box/Box.js +25 -0
- package/dist/components/Box/Box.js.map +1 -0
- package/dist/components/CarouselBase/CarouselBase.d.ts +1 -1
- package/dist/components/CarouselBase/CarouselBase.d.ts.map +1 -1
- package/dist/components/CarouselBase/CarouselBase.js +6 -4
- package/dist/components/CarouselBase/CarouselBase.js.map +1 -1
- package/dist/components/CarouselBase/constants.d.ts +1 -1
- package/dist/components/CarouselBase/constants.d.ts.map +1 -1
- package/dist/components/CarouselBase/constants.js +1 -1
- package/dist/components/CarouselBase/constants.js.map +1 -1
- package/dist/components/CarouselBase/hooks.d.ts +3 -1
- package/dist/components/CarouselBase/hooks.d.ts.map +1 -1
- package/dist/components/CarouselBase/hooks.js +46 -6
- package/dist/components/CarouselBase/hooks.js.map +1 -1
- package/dist/components/CarouselBase/types.d.ts +12 -0
- package/dist/components/CarouselBase/types.d.ts.map +1 -1
- package/dist/components/CarouselBase/types.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +11 -2
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox/Checkbox.js +44 -10
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Checkbox/CheckboxInput/CheckboxInput.d.ts +16 -3
- package/dist/components/Checkbox/CheckboxInput/CheckboxInput.d.ts.map +1 -1
- package/dist/components/Checkbox/CheckboxInput/CheckboxInput.js +32 -19
- package/dist/components/Checkbox/CheckboxInput/CheckboxInput.js.map +1 -1
- package/dist/components/Checkbox/CheckboxSimple/CheckboxSimple.d.ts +1 -1
- package/dist/components/Checkbox/CheckboxSimple/CheckboxSimple.d.ts.map +1 -1
- package/dist/components/Checkbox/CheckboxSimple/CheckboxSimple.js +39 -10
- package/dist/components/Checkbox/CheckboxSimple/CheckboxSimple.js.map +1 -1
- package/dist/components/ChipsInput/ChipsInput.d.ts +1 -1
- package/dist/components/ChipsInput/ChipsInput.d.ts.map +1 -1
- package/dist/components/ChipsInput/ChipsInput.js +32 -13
- package/dist/components/ChipsInput/ChipsInput.js.map +1 -1
- package/dist/components/ChipsInputBase/ChipsInputBase.d.ts +1 -1
- package/dist/components/ChipsInputBase/ChipsInputBase.d.ts.map +1 -1
- package/dist/components/ChipsInputBase/ChipsInputBase.js +52 -26
- package/dist/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
- package/dist/components/ChipsInputBase/types.d.ts +13 -4
- package/dist/components/ChipsInputBase/types.d.ts.map +1 -1
- package/dist/components/ChipsInputBase/types.js.map +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.d.ts +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.d.ts.map +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.js +67 -38
- package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.d.ts +16 -2
- package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.js +99 -50
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelectInput/CustomSelectInput.d.ts +6 -2
- package/dist/components/CustomSelect/CustomSelectInput/CustomSelectInput.d.ts.map +1 -1
- package/dist/components/CustomSelect/CustomSelectInput/CustomSelectInput.js +38 -20
- package/dist/components/CustomSelect/CustomSelectInput/CustomSelectInput.js.map +1 -1
- package/dist/components/CustomSelect/helpers.d.ts +1 -0
- package/dist/components/CustomSelect/helpers.d.ts.map +1 -1
- package/dist/components/CustomSelect/helpers.js +11 -0
- package/dist/components/CustomSelect/helpers.js.map +1 -1
- package/dist/components/Div/Div.d.ts +3 -0
- package/dist/components/Div/Div.d.ts.map +1 -1
- package/dist/components/Div/Div.js +11 -1
- package/dist/components/Div/Div.js.map +1 -1
- package/dist/components/File/File.d.ts +16 -3
- package/dist/components/File/File.d.ts.map +1 -1
- package/dist/components/File/File.js +29 -17
- package/dist/components/File/File.js.map +1 -1
- package/dist/components/Input/Input.d.ts +16 -3
- package/dist/components/Input/Input.d.ts.map +1 -1
- package/dist/components/Input/Input.js +28 -13
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/NativeSelect/NativeSelect.d.ts +17 -3
- package/dist/components/NativeSelect/NativeSelect.d.ts.map +1 -1
- package/dist/components/NativeSelect/NativeSelect.js +37 -14
- package/dist/components/NativeSelect/NativeSelect.js.map +1 -1
- package/dist/components/Radio/Radio.d.ts +18 -3
- package/dist/components/Radio/Radio.d.ts.map +1 -1
- package/dist/components/Radio/Radio.js +31 -11
- package/dist/components/Radio/Radio.js.map +1 -1
- package/dist/components/Radio/RadioInput/RadioInput.d.ts +16 -3
- package/dist/components/Radio/RadioInput/RadioInput.d.ts.map +1 -1
- package/dist/components/Radio/RadioInput/RadioInput.js +22 -11
- package/dist/components/Radio/RadioInput/RadioInput.js.map +1 -1
- package/dist/components/Search/Search.d.ts +16 -3
- package/dist/components/Search/Search.d.ts.map +1 -1
- package/dist/components/Search/Search.js +50 -28
- package/dist/components/Search/Search.js.map +1 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +10 -4
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/SelectionControl/SelectionControl.d.ts +2 -2
- package/dist/components/SelectionControl/SelectionControl.d.ts.map +1 -1
- package/dist/components/SelectionControl/SelectionControl.js.map +1 -1
- package/dist/components/Snackbar/Snackbar.d.ts +10 -1
- package/dist/components/Snackbar/Snackbar.d.ts.map +1 -1
- package/dist/components/Snackbar/Snackbar.js +20 -6
- package/dist/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/components/SplitLayout/SplitLayout.d.ts +16 -3
- package/dist/components/SplitLayout/SplitLayout.d.ts.map +1 -1
- package/dist/components/SplitLayout/SplitLayout.js +24 -9
- package/dist/components/SplitLayout/SplitLayout.js.map +1 -1
- package/dist/components/Switch/Switch.d.ts +16 -3
- package/dist/components/Switch/Switch.d.ts.map +1 -1
- package/dist/components/Switch/Switch.js +32 -20
- package/dist/components/Switch/Switch.js.map +1 -1
- package/dist/components/Textarea/Textarea.d.ts +16 -3
- package/dist/components/Textarea/Textarea.d.ts.map +1 -1
- package/dist/components/Textarea/Textarea.js +36 -18
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/WriteBar/WriteBar.d.ts +16 -3
- package/dist/components/WriteBar/WriteBar.d.ts.map +1 -1
- package/dist/components/WriteBar/WriteBar.js +28 -11
- package/dist/components/WriteBar/WriteBar.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/cssm/components/Box/Box.js +19 -0
- package/dist/cssm/components/Box/Box.js.map +1 -0
- package/dist/cssm/components/CarouselBase/CarouselBase.js +4 -4
- package/dist/cssm/components/CarouselBase/CarouselBase.js.map +1 -1
- package/dist/cssm/components/CarouselBase/constants.js +1 -1
- package/dist/cssm/components/CarouselBase/constants.js.map +1 -1
- package/dist/cssm/components/CarouselBase/hooks.js +46 -6
- package/dist/cssm/components/CarouselBase/hooks.js.map +1 -1
- package/dist/cssm/components/CarouselBase/types.js.map +1 -1
- package/dist/cssm/components/Checkbox/Checkbox.js +29 -6
- package/dist/cssm/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/cssm/components/Checkbox/CheckboxInput/CheckboxInput.js +24 -13
- package/dist/cssm/components/Checkbox/CheckboxInput/CheckboxInput.js.map +1 -1
- package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.js +24 -6
- package/dist/cssm/components/Checkbox/CheckboxSimple/CheckboxSimple.js.map +1 -1
- package/dist/cssm/components/ChipsInput/ChipsInput.js +25 -11
- package/dist/cssm/components/ChipsInput/ChipsInput.js.map +1 -1
- package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js +30 -12
- package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js.map +1 -1
- package/dist/cssm/components/ChipsInputBase/types.js.map +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js +49 -30
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelect.js +73 -41
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/CustomSelect/CustomSelectInput/CustomSelectInput.js +20 -9
- package/dist/cssm/components/CustomSelect/CustomSelectInput/CustomSelectInput.js.map +1 -1
- package/dist/cssm/components/CustomSelect/helpers.js +11 -0
- package/dist/cssm/components/CustomSelect/helpers.js.map +1 -1
- package/dist/cssm/components/Div/Div.js +11 -1
- package/dist/cssm/components/Div/Div.js.map +1 -1
- package/dist/cssm/components/File/File.js +20 -7
- package/dist/cssm/components/File/File.js.map +1 -1
- package/dist/cssm/components/Input/Input.js +20 -7
- package/dist/cssm/components/Input/Input.js.map +1 -1
- package/dist/cssm/components/MiniInfoCell/MiniInfoCell.module.css +1 -1
- package/dist/cssm/components/NativeSelect/NativeSelect.js +25 -8
- package/dist/cssm/components/NativeSelect/NativeSelect.js.map +1 -1
- package/dist/cssm/components/Radio/Radio.js +28 -8
- package/dist/cssm/components/Radio/Radio.js.map +1 -1
- package/dist/cssm/components/Radio/RadioInput/RadioInput.js +18 -6
- package/dist/cssm/components/Radio/RadioInput/RadioInput.js.map +1 -1
- package/dist/cssm/components/Search/Search.js +34 -17
- package/dist/cssm/components/Search/Search.js.map +1 -1
- package/dist/cssm/components/Select/Select.js +9 -1
- package/dist/cssm/components/Select/Select.js.map +1 -1
- package/dist/cssm/components/SelectionControl/SelectionControl.js.map +1 -1
- package/dist/cssm/components/Snackbar/Snackbar.js +11 -2
- package/dist/cssm/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/cssm/components/SplitLayout/SplitLayout.js +22 -8
- package/dist/cssm/components/SplitLayout/SplitLayout.js.map +1 -1
- package/dist/cssm/components/Switch/Switch.js +29 -17
- package/dist/cssm/components/Switch/Switch.js.map +1 -1
- package/dist/cssm/components/Textarea/Textarea.js +22 -8
- package/dist/cssm/components/Textarea/Textarea.js.map +1 -1
- package/dist/cssm/components/WriteBar/WriteBar.js +24 -9
- package/dist/cssm/components/WriteBar/WriteBar.js.map +1 -1
- package/dist/cssm/hooks/useMergeProps.js +38 -0
- package/dist/cssm/hooks/useMergeProps.js.map +1 -0
- package/dist/cssm/index.js +2 -0
- package/dist/cssm/index.js.map +1 -1
- package/dist/cssm/lib/animation/useCSSTransition.js +1 -1
- package/dist/cssm/lib/animation/useCSSTransition.js.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/cssm/lib/fx.js +55 -8
- package/dist/cssm/lib/fx.js.map +1 -1
- package/dist/cssm/lib/layouts/gaps.js.map +1 -1
- package/dist/cssm/lib/layouts/helpers.js +21 -0
- package/dist/cssm/lib/layouts/helpers.js.map +1 -0
- package/dist/cssm/lib/layouts/index.js +1 -0
- package/dist/cssm/lib/layouts/index.js.map +1 -1
- package/dist/cssm/lib/layouts/layoutProps.js +89 -0
- package/dist/cssm/lib/layouts/layoutProps.js.map +1 -0
- package/dist/cssm/lib/layouts/resolveLayoutProps.js +36 -0
- package/dist/cssm/lib/layouts/resolveLayoutProps.js.map +1 -0
- package/dist/cssm/lib/layouts/types.js +3 -0
- package/dist/cssm/lib/layouts/types.js.map +1 -0
- package/dist/cssm/lib/warnOnce.js +1 -1
- package/dist/cssm/lib/warnOnce.js.map +1 -1
- package/dist/cssm/styles/layout.css +922 -0
- package/dist/hooks/useMergeProps.d.ts +6 -0
- package/dist/hooks/useMergeProps.d.ts.map +1 -0
- package/dist/hooks/useMergeProps.js +42 -0
- package/dist/hooks/useMergeProps.js.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/animation/useCSSTransition.js +1 -1
- package/dist/lib/animation/useCSSTransition.js.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/lib/fx.d.ts +8 -1
- package/dist/lib/fx.d.ts.map +1 -1
- package/dist/lib/fx.js +55 -8
- package/dist/lib/fx.js.map +1 -1
- package/dist/lib/layouts/gaps.d.ts +4 -5
- package/dist/lib/layouts/gaps.d.ts.map +1 -1
- package/dist/lib/layouts/gaps.js.map +1 -1
- package/dist/lib/layouts/helpers.d.ts +17 -0
- package/dist/lib/layouts/helpers.d.ts.map +1 -0
- package/dist/lib/layouts/helpers.js +21 -0
- package/dist/lib/layouts/helpers.js.map +1 -0
- package/dist/lib/layouts/index.d.ts +2 -0
- package/dist/lib/layouts/index.d.ts.map +1 -1
- package/dist/lib/layouts/index.js +1 -0
- package/dist/lib/layouts/index.js.map +1 -1
- package/dist/lib/layouts/layoutProps.d.ts +33 -0
- package/dist/lib/layouts/layoutProps.d.ts.map +1 -0
- package/dist/lib/layouts/layoutProps.js +89 -0
- package/dist/lib/layouts/layoutProps.js.map +1 -0
- package/dist/lib/layouts/resolveLayoutProps.d.ts +18 -0
- package/dist/lib/layouts/resolveLayoutProps.d.ts.map +1 -0
- package/dist/lib/layouts/resolveLayoutProps.js +35 -0
- package/dist/lib/layouts/resolveLayoutProps.js.map +1 -0
- package/dist/lib/layouts/types.d.ts +123 -0
- package/dist/lib/layouts/types.d.ts.map +1 -0
- package/dist/lib/layouts/types.js +3 -0
- package/dist/lib/layouts/types.js.map +1 -0
- package/dist/lib/warnOnce.js +1 -1
- package/dist/lib/warnOnce.js.map +1 -1
- package/dist/vkui.css +1 -1
- package/dist/vkui.css.map +1 -1
- package/package.json +2 -2
- package/src/components/Box/Box.tsx +26 -0
- package/src/components/CarouselBase/CarouselBase.tsx +11 -4
- package/src/components/CarouselBase/constants.ts +1 -1
- package/src/components/CarouselBase/hooks.ts +31 -6
- package/src/components/CarouselBase/types.ts +13 -0
- package/src/components/Checkbox/Checkbox.tsx +57 -7
- package/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx +51 -18
- package/src/components/Checkbox/CheckboxSimple/CheckboxSimple.tsx +36 -6
- package/src/components/ChipsInput/ChipsInput.tsx +38 -11
- package/src/components/ChipsInputBase/ChipsInputBase.tsx +60 -17
- package/src/components/ChipsInputBase/types.ts +15 -4
- package/src/components/ChipsSelect/ChipsSelect.tsx +71 -33
- package/src/components/CustomSelect/CustomSelect.tsx +135 -45
- package/src/components/CustomSelect/CustomSelectInput/CustomSelectInput.tsx +48 -17
- package/src/components/CustomSelect/helpers.ts +23 -0
- package/src/components/Div/Div.tsx +13 -3
- package/src/components/File/File.tsx +48 -11
- package/src/components/Input/Input.tsx +51 -14
- package/src/components/MiniInfoCell/MiniInfoCell.module.css +1 -1
- package/src/components/NativeSelect/NativeSelect.tsx +57 -18
- package/src/components/Radio/Radio.tsx +51 -8
- package/src/components/Radio/RadioInput/RadioInput.tsx +35 -11
- package/src/components/Search/Search.tsx +80 -29
- package/src/components/Select/Select.tsx +22 -3
- package/src/components/SelectionControl/SelectionControl.tsx +2 -1
- package/src/components/Snackbar/Snackbar.tsx +35 -5
- package/src/components/SplitLayout/SplitLayout.tsx +46 -12
- package/src/components/Switch/Switch.tsx +62 -31
- package/src/components/Textarea/Textarea.tsx +58 -14
- package/src/components/WriteBar/WriteBar.tsx +59 -13
- package/src/hooks/useMergeProps.ts +66 -0
- package/src/index.ts +3 -0
- package/src/lib/animation/useCSSTransition.ts +1 -1
- package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +1 -1
- package/src/lib/fx.ts +63 -8
- package/src/lib/layouts/gaps.ts +4 -5
- package/src/lib/layouts/helpers.ts +24 -0
- package/src/lib/layouts/index.ts +13 -0
- package/src/lib/layouts/layoutProps.ts +75 -0
- package/src/lib/layouts/resolveLayoutProps.ts +51 -0
- package/src/lib/layouts/types.ts +142 -0
- package/src/lib/warnOnce.ts +1 -1
- package/src/styles/layout.css +1 -0
- package/src/styles/layout.css.d.ts.map +1 -0
|
@@ -1 +1 @@
|
|
|
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://vkui.io/components/chips-select\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\n // a11y\n chipsListLabel,\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 e.preventDefault();\n setOpened(!opened);\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-activedescendant={opened ? dropdownCurrentItemId : undefined}\n aria-haspopup=\"listbox\"\n chipsListLabel={chipsListLabel}\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","chipsListLabel","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-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 { useMergeProps } from '../../hooks/useMergeProps';\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://vkui.io/components/chips-select\n */\nexport const ChipsSelect = <Option extends ChipOption>({\n // FormFieldProps\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: defaultInputValueProp,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n getNewOptionData = getNewOptionDataDefault,\n renderChip = renderChipDefault,\n renderOption = renderOptionDefault,\n onChange,\n onInputChange: onInputChangeProp,\n dropdownOffsetDistance = 0,\n allowClearButton,\n clearButtonTestId,\n delimiter,\n\n // a11y\n chipsListLabel,\n\n // input native props\n disabled: disabledProp,\n readOnly: readOnlyProp,\n id: idProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n\n slotProps,\n ...restProps\n}: ChipsSelectProps<Option>): React.ReactNode => {\n const {\n getRootRef: getInputRef,\n value: resolvedInputValue,\n defaultValue: resolvedDefaultInputValue,\n onChange: resolvedOnInputChange,\n disabled,\n readOnly,\n id: labelledbyId,\n onFocus,\n onBlur,\n onKeyDown,\n ...inputRest\n } = useMergeProps(\n {\n getRootRef: getRef,\n value: inputValueProp,\n defaultValue: defaultInputValueProp,\n onChange: onInputChangeProp,\n disabled: disabledProp,\n readOnly: readOnlyProp,\n id: idProp,\n onFocus: onFocusProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n },\n slotProps?.input,\n );\n\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: resolvedInputValue as string,\n defaultInputValue: resolvedDefaultInputValue as string,\n onInputChange: resolvedOnInputChange,\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(getInputRef, 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 (onFocus) {\n onFocus(event);\n }\n\n if (!readOnly) {\n setOpened(true);\n setFocusedOptionIndex(null);\n }\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n if (onBlur) {\n onBlur(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 (onKeyDown) {\n onKeyDown(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 e.preventDefault();\n setOpened(!opened);\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 clearButtonShown={clearButtonShown}\n clearButtonTestId={clearButtonTestId}\n // FormFieldProps\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 // a11y\n chipsListLabel={chipsListLabel}\n slotProps={{\n ...slotProps,\n input: {\n 'role': 'combobox',\n 'aria-expanded': opened,\n 'aria-autocomplete': 'list',\n 'aria-activedescendant': opened ? dropdownCurrentItemId : undefined,\n 'aria-haspopup': 'listbox',\n 'getRootRef': inputRef,\n 'value': inputValue,\n 'onChange': onInputChange,\n disabled,\n readOnly,\n 'id': labelledbyId,\n 'onFocus': handleFocus,\n 'onBlur': handleBlur,\n 'onKeyDown': handleKeyDown,\n ...inputRest,\n },\n }}\n {...restProps}\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","useMergeProps","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","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","defaultInputValueProp","getOptionValue","getOptionLabel","getNewOptionData","renderChip","renderOption","onChange","onInputChange","onInputChangeProp","dropdownOffsetDistance","allowClearButton","clearButtonTestId","delimiter","chipsListLabel","disabledProp","readOnly","readOnlyProp","id","idProp","onFocus","onFocusProp","onBlur","onBlurProp","onKeyDown","onKeyDownProp","slotProps","restProps","input","getInputRef","resolvedInputValue","resolvedDefaultInputValue","resolvedOnInputChange","labelledbyId","inputRest","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","data-testid","targetRef","scrollBoxRef","onPlacementChange","onMouseLeave","autoWidth","forcePortal","offsetDistance","role","aria-labelledby"],"mappings":"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"}
|
|
@@ -1,15 +1,27 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type FilterFn } from '../../lib/select';
|
|
3
|
+
import { type HasDataAttribute, type HasRootRef } from '../../types';
|
|
3
4
|
import { type CustomSelectDropdownProps } from '../CustomSelectDropdown/CustomSelectDropdown';
|
|
4
5
|
import type { FormFieldProps } from '../FormField/FormField';
|
|
5
|
-
import type
|
|
6
|
+
import { type NativeSelectProps } from '../NativeSelect/NativeSelect';
|
|
6
7
|
import type { SelectType } from '../Select/Select';
|
|
7
8
|
import { type CustomSelectClearButtonProps } from './CustomSelectClearButton';
|
|
8
9
|
import { type CustomSelectInputProps } from './CustomSelectInput/CustomSelectInput';
|
|
9
10
|
import type { CustomSelectOptionInterface, CustomSelectRenderOption, PopupDirection } from './types';
|
|
10
11
|
export type { CustomSelectClearButtonProps };
|
|
11
|
-
export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface> extends NativeSelectProps, Omit<FormFieldProps, 'maxHeight'>, Pick<CustomSelectDropdownProps, 'overscrollBehavior'>, Pick<CustomSelectInputProps, 'minLength' | 'maxLength' | 'pattern' | 'readOnly'> {
|
|
12
|
+
export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface> extends Omit<NativeSelectProps, 'slotProps'>, Omit<FormFieldProps, 'maxHeight'>, Pick<CustomSelectDropdownProps, 'overscrollBehavior'>, Pick<CustomSelectInputProps, 'minLength' | 'maxLength' | 'pattern' | 'readOnly'> {
|
|
12
13
|
/**
|
|
14
|
+
* Свойства, которые можно прокинуть внутрь компонента:
|
|
15
|
+
* - `root`: свойства для прокидывания в корень компонента;
|
|
16
|
+
* - `select`: свойства для прокидывания в нативный `select`;
|
|
17
|
+
* - `input`: свойства для прокидывания в нативный `input`.
|
|
18
|
+
*/
|
|
19
|
+
slotProps?: NativeSelectProps['slotProps'] & {
|
|
20
|
+
input?: React.InputHTMLAttributes<HTMLInputElement> & HasDataAttribute & HasRootRef<HTMLInputElement>;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
|
|
24
|
+
*
|
|
13
25
|
* Ref на внутрений компонент input.
|
|
14
26
|
*/
|
|
15
27
|
getSelectInputRef?: React.Ref<HTMLInputElement>;
|
|
@@ -109,6 +121,8 @@ export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterfac
|
|
|
109
121
|
*/
|
|
110
122
|
labelTextTestId?: string;
|
|
111
123
|
/**
|
|
124
|
+
* @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ select: { 'data-testid': ... } }`.
|
|
125
|
+
*
|
|
112
126
|
* Передает атрибут `data-testid` для нативного элемента `select`.
|
|
113
127
|
*/
|
|
114
128
|
nativeSelectTestId?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}
|
|
@@ -8,6 +8,7 @@ import { classNames } from "@vkontakte/vkjs";
|
|
|
8
8
|
import { getRequiredValueByKey } from "../../helpers/getValueByKey.js";
|
|
9
9
|
import { useAdaptivity } from "../../hooks/useAdaptivity.js";
|
|
10
10
|
import { useExternRef } from "../../hooks/useExternRef.js";
|
|
11
|
+
import { useMergeProps } from "../../hooks/useMergeProps.js";
|
|
11
12
|
import { callMultiple } from "../../lib/callMultiple.js";
|
|
12
13
|
import { useDOM } from "../../lib/dom.js";
|
|
13
14
|
import { defaultFilterFn } from "../../lib/select.js";
|
|
@@ -16,10 +17,11 @@ import { preventDefault } from "../../lib/utils.js";
|
|
|
16
17
|
import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdown.js";
|
|
17
18
|
import { CustomSelectOption } from "../CustomSelectOption/CustomSelectOption.js";
|
|
18
19
|
import { NOT_SELECTED, remapFromNativeValueToSelectValue } from "../NativeSelect/NativeSelect.js";
|
|
20
|
+
import { RootComponent } from "../RootComponent/RootComponent.js";
|
|
19
21
|
import { Footnote } from "../Typography/Footnote/Footnote.js";
|
|
20
22
|
import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
|
|
21
23
|
import { CustomSelectInput } from "./CustomSelectInput/CustomSelectInput.js";
|
|
22
|
-
import { checkMixControlledAndUncontrolledState, checkOptionsValueType, filter, findSelectedIndex, getOptionByValue } from "./helpers.js";
|
|
24
|
+
import { checkDeprecatedProps, checkMixControlledAndUncontrolledState, checkOptionsValueType, filter, findSelectedIndex, getOptionByValue } from "./helpers.js";
|
|
23
25
|
import { useAfterItems } from "./hooks/useAfterItems.js";
|
|
24
26
|
import { useDropdownOpenedController } from "./hooks/useDropdownOpenedController.js";
|
|
25
27
|
import { useFocusedOptionController } from "./hooks/useFocusedOptionController.js";
|
|
@@ -68,14 +70,14 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
|
|
|
68
70
|
/**
|
|
69
71
|
* @see https://vkui.io/components/custom-select
|
|
70
72
|
*/ export function CustomSelect(props) {
|
|
71
|
-
const {
|
|
73
|
+
const { style, className, getRootRef, before, name, getRef, popupDirection = 'bottom', onChange, children, 'onInputChange': onInputChangeProp, renderDropdown, onOpen, onClose, fetching, labelTextTestId, multiline, placeholder, status, forceDropdownPortal, align, selectType = 'default', searchable = false, 'renderOption': renderOptionProp = defaultRenderOptionFn, 'options': options, emptyText = 'Ничего не найдено', filterFn = defaultFilterFn, 'icon': iconProp, ClearButton, allowClearButton = false, dropdownOffsetDistance = 0, dropdownAutoWidth = false, noMaxHeight = false, 'aria-labelledby': ariaLabelledBy, clearButtonTestId, nativeSelectTestId, defaultValue, required, getSelectInputRef, overscrollBehavior, 'onInputKeyDown': onInputKeyDownProp, accessible = false, fetchingInProgressLabel, fetchingCompletedLabel, 'value': selectValue, slotProps } = props, restProps = _object_without_properties(props, [
|
|
74
|
+
"style",
|
|
75
|
+
"className",
|
|
76
|
+
"getRootRef",
|
|
72
77
|
"before",
|
|
73
78
|
"name",
|
|
74
|
-
"className",
|
|
75
79
|
"getRef",
|
|
76
|
-
"getRootRef",
|
|
77
80
|
"popupDirection",
|
|
78
|
-
"style",
|
|
79
81
|
"onChange",
|
|
80
82
|
"children",
|
|
81
83
|
'onInputChange',
|
|
@@ -83,7 +85,12 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
|
|
|
83
85
|
"onOpen",
|
|
84
86
|
"onClose",
|
|
85
87
|
"fetching",
|
|
88
|
+
"labelTextTestId",
|
|
89
|
+
"multiline",
|
|
90
|
+
"placeholder",
|
|
91
|
+
"status",
|
|
86
92
|
"forceDropdownPortal",
|
|
93
|
+
"align",
|
|
87
94
|
"selectType",
|
|
88
95
|
"searchable",
|
|
89
96
|
'renderOption',
|
|
@@ -104,31 +111,63 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
|
|
|
104
111
|
"getSelectInputRef",
|
|
105
112
|
"overscrollBehavior",
|
|
106
113
|
'onInputKeyDown',
|
|
107
|
-
"readOnly",
|
|
108
114
|
"accessible",
|
|
109
115
|
"fetchingInProgressLabel",
|
|
110
|
-
"fetchingCompletedLabel"
|
|
116
|
+
"fetchingCompletedLabel",
|
|
117
|
+
'value',
|
|
118
|
+
"slotProps"
|
|
111
119
|
]);
|
|
112
120
|
if (process.env.NODE_ENV === 'development') {
|
|
113
121
|
checkOptionsValueType(options);
|
|
122
|
+
checkDeprecatedProps(props);
|
|
114
123
|
}
|
|
115
124
|
const { sizeY = 'none' } = useAdaptivity();
|
|
125
|
+
const _useMergeProps = useMergeProps({
|
|
126
|
+
style,
|
|
127
|
+
className,
|
|
128
|
+
getRootRef
|
|
129
|
+
}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root), { onClick: onRootClick, onMouseMove: onRootMouseMove, onMouseDown: onRootMouseDown, getRootRef: rootRef } = _useMergeProps, rootRest = _object_without_properties(_useMergeProps, [
|
|
130
|
+
"onClick",
|
|
131
|
+
"onMouseMove",
|
|
132
|
+
"onMouseDown",
|
|
133
|
+
"getRootRef"
|
|
134
|
+
]);
|
|
135
|
+
const _useMergeProps1 = useMergeProps({
|
|
136
|
+
getRootRef: getRef,
|
|
137
|
+
onBlur: props.onBlur,
|
|
138
|
+
onFocus: props.onFocus,
|
|
139
|
+
onClick: props.onClick
|
|
140
|
+
}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.select), { getRootRef: getSelectRef } = _useMergeProps1, selectRest = _object_without_properties(_useMergeProps1, [
|
|
141
|
+
"getRootRef"
|
|
142
|
+
]);
|
|
143
|
+
const _useMergeProps2 = useMergeProps(_object_spread({
|
|
144
|
+
getRootRef: getSelectInputRef,
|
|
145
|
+
onChange: onInputChangeProp
|
|
146
|
+
}, restProps), slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), { getRootRef: getInputRef, onChange: onChangeInput, onFocus: onInputFocus, onBlur: onInputBlur, onKeyDown: onNativeInputKeyDown, onClick: onNativeInputClick, readOnly } = _useMergeProps2, inputRest = _object_without_properties(_useMergeProps2, [
|
|
147
|
+
"getRootRef",
|
|
148
|
+
"onChange",
|
|
149
|
+
"onFocus",
|
|
150
|
+
"onBlur",
|
|
151
|
+
"onKeyDown",
|
|
152
|
+
"onClick",
|
|
153
|
+
"readOnly"
|
|
154
|
+
]);
|
|
116
155
|
const containerRef = React.useRef(null);
|
|
117
|
-
const handleRootRef = useExternRef(containerRef,
|
|
118
|
-
const selectElRef = useExternRef(
|
|
119
|
-
const selectInputRef = useExternRef(
|
|
156
|
+
const handleRootRef = useExternRef(containerRef, rootRef);
|
|
157
|
+
const selectElRef = useExternRef(getSelectRef);
|
|
158
|
+
const selectInputRef = useExternRef(getInputRef);
|
|
120
159
|
const propsValue = React.useMemo(()=>{
|
|
121
160
|
var _getOptionByValue;
|
|
122
|
-
if (
|
|
161
|
+
if (selectValue === undefined) {
|
|
123
162
|
return undefined;
|
|
124
163
|
}
|
|
125
164
|
var _getOptionByValue_value;
|
|
126
|
-
return (_getOptionByValue_value = (_getOptionByValue = getOptionByValue(options,
|
|
165
|
+
return (_getOptionByValue_value = (_getOptionByValue = getOptionByValue(options, selectValue)) === null || _getOptionByValue === void 0 ? void 0 : _getOptionByValue.value) !== null && _getOptionByValue_value !== void 0 ? _getOptionByValue_value : null;
|
|
127
166
|
}, [
|
|
128
167
|
options,
|
|
129
|
-
|
|
168
|
+
selectValue
|
|
130
169
|
]);
|
|
131
|
-
const [isControlledOutside, setIsControlledOutside] = React.useState(
|
|
170
|
+
const [isControlledOutside, setIsControlledOutside] = React.useState(selectValue !== undefined);
|
|
132
171
|
const [popperPlacement, setPopperPlacement] = React.useState(popupDirection);
|
|
133
172
|
const { nativeSelectValue, setNativeSelectValue, selectedOptionValue, setSelectedOptionValue, onNativeSelectChange } = useSelectedOptionController({
|
|
134
173
|
value: propsValue,
|
|
@@ -145,7 +184,7 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
|
|
|
145
184
|
options,
|
|
146
185
|
accessible,
|
|
147
186
|
selectedValue: selectedOptionValue,
|
|
148
|
-
onInputChange:
|
|
187
|
+
onInputChange: onChangeInput
|
|
149
188
|
});
|
|
150
189
|
const filteredOptions = React.useMemo(()=>filter(options, searchable ? inputValue : '', filterFn), [
|
|
151
190
|
filterFn,
|
|
@@ -231,7 +270,7 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
|
|
|
231
270
|
focusedOptionValue,
|
|
232
271
|
selectOption
|
|
233
272
|
]);
|
|
234
|
-
const
|
|
273
|
+
const handleInputKeyDown = useInputKeyboardController({
|
|
235
274
|
opened,
|
|
236
275
|
open,
|
|
237
276
|
close,
|
|
@@ -412,61 +451,71 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
|
|
|
412
451
|
}, [
|
|
413
452
|
resetFocusedOption
|
|
414
453
|
]);
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
454
|
+
const updateLastMousePosition = (e)=>{
|
|
455
|
+
lastMousePositionRef.current = {
|
|
456
|
+
x: e.clientX,
|
|
457
|
+
y: e.clientY
|
|
458
|
+
};
|
|
459
|
+
};
|
|
460
|
+
return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
|
|
461
|
+
baseClassName: classNames("vkuiCustomSelect__host", sizeY !== 'regular' && sizeYClassNames[sizeY]),
|
|
462
|
+
getRootRef: handleRootRef,
|
|
463
|
+
onClick: callMultiple(onRootClick, passClickAndFocusToInputOnClick),
|
|
464
|
+
onMouseDown: callMultiple(onRootMouseDown, preventInputBlurWhenClickInsideFocusedSelectArea),
|
|
465
|
+
onMouseMove: callMultiple(onRootMouseMove, updateLastMousePosition)
|
|
466
|
+
}, rootRest), {
|
|
427
467
|
children: [
|
|
428
|
-
/*#__PURE__*/ _jsx(CustomSelectInput,
|
|
468
|
+
/*#__PURE__*/ _jsx(CustomSelectInput, {
|
|
429
469
|
autoComplete: "off",
|
|
430
470
|
autoCapitalize: "none",
|
|
431
471
|
autoCorrect: "off",
|
|
432
|
-
spellCheck: "false"
|
|
433
|
-
}, restProps, selectInputAriaProps), {
|
|
434
|
-
getRef: selectInputRef,
|
|
435
|
-
onFocus: onFocus,
|
|
436
|
-
onBlur: onBlur,
|
|
437
|
-
className: openedClassNames,
|
|
438
|
-
readOnly: readOnly || !searchable,
|
|
472
|
+
spellCheck: "false",
|
|
439
473
|
fetching: fetching,
|
|
440
474
|
searchable: searchable,
|
|
441
475
|
accessible: accessible,
|
|
442
|
-
value: inputValue,
|
|
443
|
-
onKeyDown: !readOnly ? onInputKeyDown : undefined,
|
|
444
|
-
onChange: onInputChange,
|
|
445
|
-
onClick: !readOnly ? toggleOpened : undefined,
|
|
446
476
|
before: before,
|
|
447
477
|
after: afterItems,
|
|
448
478
|
selectType: selectType,
|
|
479
|
+
align: align,
|
|
480
|
+
status: status,
|
|
481
|
+
placeholder: placeholder,
|
|
482
|
+
multiline: multiline,
|
|
483
|
+
labelTextTestId: labelTextTestId,
|
|
484
|
+
slotProps: {
|
|
485
|
+
root: {
|
|
486
|
+
className: openedClassNames
|
|
487
|
+
},
|
|
488
|
+
input: _object_spread({
|
|
489
|
+
getRootRef: selectInputRef,
|
|
490
|
+
onChange: onInputChange,
|
|
491
|
+
onFocus: callMultiple(onFocus, onInputFocus),
|
|
492
|
+
onBlur: callMultiple(onBlur, onInputFocus),
|
|
493
|
+
onKeyDown: !readOnly ? callMultiple(handleInputKeyDown, onNativeInputKeyDown) : onNativeInputKeyDown,
|
|
494
|
+
onClick: !readOnly ? callMultiple(toggleOpened, onNativeInputClick) : onNativeInputClick,
|
|
495
|
+
value: inputValue,
|
|
496
|
+
readOnly: readOnly || !searchable
|
|
497
|
+
}, selectInputAriaProps, inputRest)
|
|
498
|
+
},
|
|
449
499
|
children: selected === null || selected === void 0 ? void 0 : selected.label
|
|
450
|
-
})
|
|
500
|
+
}),
|
|
451
501
|
/*#__PURE__*/ _jsx(FetchingStatus, {
|
|
452
502
|
fetching: fetching,
|
|
453
503
|
options: filteredOptions,
|
|
454
504
|
fetchingInProgressLabel: fetchingInProgressLabel,
|
|
455
505
|
fetchingCompletedLabel: fetchingCompletedLabel
|
|
456
506
|
}),
|
|
457
|
-
/*#__PURE__*/ _jsxs(
|
|
507
|
+
/*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
|
|
508
|
+
Component: "select",
|
|
509
|
+
baseClassName: "vkuiCustomSelect__control",
|
|
458
510
|
tabIndex: -1,
|
|
459
|
-
ref: selectElRef,
|
|
460
511
|
name: name,
|
|
461
|
-
onChange: onNativeSelectChange,
|
|
462
|
-
onBlur: props.onBlur,
|
|
463
|
-
onFocus: props.onFocus,
|
|
464
|
-
onClick: props.onClick,
|
|
465
512
|
value: nativeSelectValue,
|
|
466
513
|
"aria-hidden": true,
|
|
467
|
-
className: "vkuiCustomSelect__control",
|
|
468
514
|
"data-testid": nativeSelectTestId,
|
|
469
515
|
required: required,
|
|
516
|
+
onChange: onNativeSelectChange,
|
|
517
|
+
getRootRef: selectElRef
|
|
518
|
+
}, selectRest), {
|
|
470
519
|
children: [
|
|
471
520
|
(allowClearButton || nativeSelectValue === NOT_SELECTED.NATIVE) && /*#__PURE__*/ _jsx("option", {
|
|
472
521
|
value: NOT_SELECTED.NATIVE
|
|
@@ -475,7 +524,7 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
|
|
|
475
524
|
value: item.value
|
|
476
525
|
}, `${item.value}`))
|
|
477
526
|
]
|
|
478
|
-
}),
|
|
527
|
+
})),
|
|
479
528
|
opened && /*#__PURE__*/ _jsx(CustomSelectDropdown, {
|
|
480
529
|
targetRef: containerRef,
|
|
481
530
|
placement: popperPlacement,
|
|
@@ -495,7 +544,7 @@ const FetchingStatus = ({ fetching = false, options, fetchingInProgressLabel = '
|
|
|
495
544
|
children: resolvedContent
|
|
496
545
|
})
|
|
497
546
|
]
|
|
498
|
-
});
|
|
547
|
+
}));
|
|
499
548
|
}
|
|
500
549
|
|
|
501
550
|
//# sourceMappingURL=CustomSelect.js.map
|