npm - @vkontakte/vkui - Versions diffs - 7.1.3 → 7.2.0 - Mend

@vkontakte/vkui 7.1.3 → 7.2.0

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 (1131) hide show

package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map CHANGED Viewed

	@@ -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 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 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 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 ...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 selectedBehavior,\n onClose,\n onOpen,\n\n // other\n disabled,\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 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 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","styles","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","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","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","empty","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","popUp","popDown","clearButtonShown","host","after","onClick","dropdownIcon","dropdownIconWithOffset","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 { 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 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 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 ...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 });\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 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 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","styles","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","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","empty","placeholder","hovered","onMouseDown","onMouseEnter","actionText","Fragment","children","label","selected","find","selectedOption","node","openedClassNames","includes","popUp","popDown","clearButtonShown","host","after","onClick","dropdownIcon","dropdownIconWithOffset","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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"}

package/dist/cssm/components/ChipsSelect/ChipsSelect.module.css CHANGED Viewed

@@ -5,8 +5,8 @@
 .empty {
   padding-block: 12px;
   padding-inline: 0;
-  text-align: center;
   color: var(--vkui--color_text_secondary);
+  text-align: center;
 }
 .popDown {

package/dist/cssm/components/ChipsSelect/useChipsSelect.js CHANGED Viewed

@@ -9,7 +9,7 @@ export const useChipsSelect = ({ // common
 disabled, // option
 value: valueProp, defaultValue, onChange, getOptionLabel = getOptionLabelDefault, getOptionValue = getOptionValueDefault, getNewOptionData = getNewOptionDataDefault, // input
 inputValue: inputValueProp, defaultInputValue = DEFAULT_INPUT_VALUE, onInputChange: onInputChangeProp, // dropdown
-creatable = false, emptyText = DEFAULT_EMPTY_TEXT, filterFn = defaultFilterFn, selectedBehavior = DEFAULT_SELECTED_BEHAVIOR, options: optionsProp = DEFAULT_VALUE, onClose, onOpen })=>{
+creatable = false, emptyText = DEFAULT_EMPTY_TEXT, filterFn = defaultFilterFn, sortFn = false, selectedBehavior = DEFAULT_SELECTED_BEHAVIOR, options: optionsProp = DEFAULT_VALUE, onClose, onOpen })=>{
     const { value, inputValue, onInputChange, ...restChipsInputProps } = useChipsInput({
         // option
         value: valueProp,
@@ -35,6 +35,7 @@ creatable = false, emptyText = DEFAULT_EMPTY_TEXT, filterFn = defaultFilterFn, s
             emptyText,
             creatable,
             filterFn,
+            sortFn,
             options: optionsProp,
             selectedBehavior
         }) : []);
@@ -71,6 +72,7 @@ creatable = false, emptyText = DEFAULT_EMPTY_TEXT, filterFn = defaultFilterFn, s
                 emptyText,
                 creatable,
                 filterFn,
+                sortFn,
                 options: optionsProp,
                 selectedBehavior
             });
@@ -88,7 +90,8 @@ creatable = false, emptyText = DEFAULT_EMPTY_TEXT, filterFn = defaultFilterFn, s
         optionsProp,
         creatable,
         selectedBehavior,
-        filterFn
+        filterFn,
+        sortFn
     ]);
     return {
         ...restChipsInputProps,
@@ -107,7 +110,7 @@ creatable = false, emptyText = DEFAULT_EMPTY_TEXT, filterFn = defaultFilterFn, s
         setFocusedOptionIndex
     };
 };
-function transformOptions({ value, getOptionValue = getOptionValueDefault, getOptionLabel = getOptionLabelDefault, inputValue = DEFAULT_INPUT_VALUE, emptyText = DEFAULT_EMPTY_TEXT, creatable = false, filterFn = defaultFilterFn, options: optionsProp = DEFAULT_VALUE, selectedBehavior = DEFAULT_SELECTED_BEHAVIOR }) {
+function transformOptions({ value, getOptionValue = getOptionValueDefault, getOptionLabel = getOptionLabelDefault, inputValue = DEFAULT_INPUT_VALUE, emptyText = DEFAULT_EMPTY_TEXT, creatable = false, sortFn = false, filterFn = defaultFilterFn, options: optionsProp = DEFAULT_VALUE, selectedBehavior = DEFAULT_SELECTED_BEHAVIOR }) {
     const filteredOptionsProp = filterFn ? optionsProp.filter((option)=>filterFn(inputValue, option, getOptionLabel)) : optionsProp;
     if (filteredOptionsProp.length === 0) {
         if (inputValue !== DEFAULT_INPUT_VALUE && typeof creatable === 'string') {
@@ -123,6 +126,9 @@ function transformOptions({ value, getOptionValue = getOptionValueDefault, getOp
             }
         ];
     }
+    if (sortFn) {
+        filteredOptionsProp.sort((optionA, optionB)=>sortFn(optionA, optionB, inputValue));
+    }
     const parsedOptions = transformValue(filteredOptionsProp, getOptionValue, getOptionLabel);
     if (selectedBehavior === 'hide') {
         const selected = value.map((item)=>item.value);

package/dist/cssm/components/ChipsSelect/useChipsSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ChipsSelect/useChipsSelect.ts"],"sourcesContent":["import * as React from 'react';\nimport { isEqual } from '@vkontakte/vkjs';\nimport { type SimulateReactInputTargetState } from '../../lib/react';\nimport { defaultFilterFn, type FilterFn } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport {\n transformValue,\n useChipsInput,\n type UseChipsInputProps,\n} from '../ChipsInput/useChipsInput';\nimport {\n DEFAULT_INPUT_VALUE,\n DEFAULT_VALUE,\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipOptionLabel, ChipOptionValue } from '../ChipsInputBase/types';\nimport { DEFAULT_EMPTY_TEXT, DEFAULT_SELECTED_BEHAVIOR, isNotServicePreset } from './constants';\nimport type { OptionPreset } from './types';\n\nexport interface UseChipsSelectProps<O extends ChipOption = ChipOption>\n extends UseChipsInputProps<O> {\n options?: O[];\n /*\n Возможность создавать чипы которых нет в списке:\n * - `true` – добавление по кнопке Enter;\n * - `<текст>` – помимо возможности добавления через Enter, в пункте меню появится кнопка с текстом.\n * Текст для пункта, создающего чипы при клике, также отвечает за то, будет ли показан этот пункт\n * (показывается после того как в списке не останется опций).\n /\n creatable?: boolean \| string;\n /\n Текст, который показывается если список опций пуст\n /\n emptyText?: string;\n /\n Показывать или скрывать уже выбранные опции.\n /\n selectedBehavior?: 'hide' \| 'highlight';\n filterFn?: false \| FilterFn<O>;\n /\n Будет вызвано в момент скрытия выпадающего списка\n /\n onClose?: VoidFunction;\n /\n Будет вызвано в момент открытия выпадающего списка\n */\n onOpen?: VoidFunction;\n}\n\nexport const useChipsSelect = <O extends ChipOption>({\n // common\n disabled,\n\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionLabel = getOptionLabelDefault,\n getOptionValue = getOptionValueDefault,\n getNewOptionData = getNewOptionDataDefault,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue = DEFAULT_INPUT_VALUE,\n onInputChange: onInputChangeProp,\n\n // dropdown\n creatable = false,\n emptyText = DEFAULT_EMPTY_TEXT,\n filterFn = defaultFilterFn,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n options: optionsProp = DEFAULT_VALUE,\n onClose,\n onOpen,\n}: UseChipsSelectProps<O>): {\n // options\n value: Array<\n O & {\n label: ChipOptionLabel;\n value: ChipOptionValue;\n }\n >;\n // input\n inputValue: string;\n onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n // dropdown states\n options: Array<OptionPreset<O>>;\n opened: boolean;\n setOpened: (isOpened: boolean) => void;\n focusedOption: O \| null;\n focusedOptionIndex: number \| null;\n setFocusedOption: React.Dispatch<React.SetStateAction<O \| null>>;\n setFocusedOptionIndex: React.Dispatch<React.SetStateAction<number \| null>>;\n addOption: (newValue: string \| O) => void;\n addOptionFromInput: (inputValue: string) => void;\n removeOption: (newValue: ChipOptionValue \| O) => void;\n clearOptions: () => void;\n inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) \| null>;\n clearInput: () => void;\n} => {\n const { value, inputValue, onInputChange, ...restChipsInputProps } = useChipsInput({\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 // other\n disabled,\n });\n\n // dropdown\n const [opened, setOpened] = React.useState(false);\n const [options, setOptions] = React.useState<Array<OptionPreset<O>>>(() =>\n opened\n ? transformOptions({\n value,\n getOptionValue,\n getOptionLabel,\n inputValue,\n emptyText,\n creatable,\n filterFn,\n options: optionsProp,\n selectedBehavior,\n })\n : [],\n );\n const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number \| null>(0);\n const [focusedOption, setFocusedOption] = React.useState<O \| null>(null);\n\n const handleOpened = React.useCallback(\n (isOpened: boolean) => {\n isOpened ? onOpen?.() : onClose?.();\n setOpened(isOpened);\n },\n [onOpen, onClose],\n );\n\n const handleInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n onInputChange(event);\n\n if (!opened) {\n handleOpened(true);\n setFocusedOptionIndex(0);\n }\n },\n [onInputChange, opened, handleOpened],\n );\n\n useIsomorphicLayoutEffect(\n function handleDropdownOpen() {\n if (!opened) {\n return;\n }\n\n setOptions((prevOptions) => {\n const nextOptions = transformOptions({\n value,\n getOptionValue,\n getOptionLabel,\n inputValue,\n emptyText,\n creatable,\n filterFn,\n options: optionsProp,\n selectedBehavior,\n });\n\n if (isEqual(prevOptions, nextOptions)) {\n return prevOptions;\n }\n\n return nextOptions;\n });\n },\n [\n opened,\n value,\n getOptionLabel,\n getOptionValue,\n inputValue,\n optionsProp,\n creatable,\n selectedBehavior,\n filterFn,\n ],\n );\n\n return {\n ...restChipsInputProps,\n\n // options\n value,\n\n // input\n inputValue,\n onInputChange: handleInputChange,\n\n // dropdown states\n options,\n opened,\n setOpened: handleOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n };\n};\n\nfunction transformOptions<O extends ChipOption>({\n value,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n inputValue = DEFAULT_INPUT_VALUE,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n filterFn = defaultFilterFn,\n options: optionsProp = DEFAULT_VALUE,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n}: Required<Pick<UseChipsSelectProps<O>, 'value'>> &\n Pick<\n UseChipsSelectProps<O>,\n \| 'getOptionValue'\n \| 'getOptionLabel'\n \| 'inputValue'\n \| 'emptyText'\n \| 'creatable'\n \| 'filterFn'\n \| 'options'\n \| 'selectedBehavior'\n >) {\n const filteredOptionsProp = filterFn\n ? optionsProp.filter((option) => filterFn(inputValue, option, getOptionLabel))\n : optionsProp;\n\n if (filteredOptionsProp.length === 0) {\n if (inputValue !== DEFAULT_INPUT_VALUE && typeof creatable === 'string') {\n return [{ actionText: creatable }];\n }\n return [{ placeholder: emptyText }];\n }\n\n const parsedOptions = transformValue(filteredOptionsProp, getOptionValue, getOptionLabel);\n\n if (selectedBehavior === 'hide') {\n const selected = value.map((item) => item.value);\n return parsedOptions.filter((item) =>\n isNotServicePreset(item) ? !selected.includes(item.value) : false,\n );\n }\n return parsedOptions;\n}\n"],"names":["React","isEqual","defaultFilterFn","useIsomorphicLayoutEffect","transformValue","useChipsInput","DEFAULT_INPUT_VALUE","DEFAULT_VALUE","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","isNotServicePreset","useChipsSelect","disabled","value","valueProp","defaultValue","onChange","getOptionLabel","getOptionValue","getNewOptionData","inputValue","inputValueProp","defaultInputValue","onInputChange","onInputChangeProp","creatable","emptyText","filterFn","selectedBehavior","options","optionsProp","onClose","onOpen","restChipsInputProps","opened","setOpened","useState","setOptions","transformOptions","focusedOptionIndex","setFocusedOptionIndex","focusedOption","setFocusedOption","handleOpened","useCallback","isOpened","handleInputChange","event","handleDropdownOpen","prevOptions","nextOptions","filteredOptionsProp","filter","option","length","actionText","placeholder","parsedOptions","selected","map","item","includes"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../../src/components/ChipsSelect/useChipsSelect.ts"],"sourcesContent":["import * as React from 'react';\nimport { isEqual } from '@vkontakte/vkjs';\nimport { type SimulateReactInputTargetState } from '../../lib/react';\nimport { defaultFilterFn, type FilterFn, type SortFn } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport {\n transformValue,\n useChipsInput,\n type UseChipsInputProps,\n} from '../ChipsInput/useChipsInput';\nimport {\n DEFAULT_INPUT_VALUE,\n DEFAULT_VALUE,\n getNewOptionDataDefault,\n getOptionLabelDefault,\n getOptionValueDefault,\n} from '../ChipsInputBase/constants';\nimport type { ChipOption, ChipOptionLabel, ChipOptionValue } from '../ChipsInputBase/types';\nimport { DEFAULT_EMPTY_TEXT, DEFAULT_SELECTED_BEHAVIOR, isNotServicePreset } from './constants';\nimport type { OptionPreset } from './types';\n\nexport interface UseChipsSelectProps<O extends ChipOption = ChipOption>\n extends UseChipsInputProps<O> {\n options?: O[];\n /*\n Возможность создавать чипы которых нет в списке:\n * - `true` – добавление по кнопке Enter;\n * - `<текст>` – помимо возможности добавления через Enter, в пункте меню появится кнопка с текстом.\n * Текст для пункта, создающего чипы при клике, также отвечает за то, будет ли показан этот пункт\n * (показывается после того как в списке не останется опций).\n /\n creatable?: boolean \| string;\n /\n Текст, который показывается если список опций пуст\n /\n emptyText?: string;\n /\n Показывать или скрывать уже выбранные опции.\n /\n selectedBehavior?: 'hide' \| 'highlight';\n filterFn?: false \| FilterFn<O>;\n sortFn?: false \| SortFn<O>;\n /\n Будет вызвано в момент скрытия выпадающего списка\n /\n onClose?: VoidFunction;\n /\n Будет вызвано в момент открытия выпадающего списка\n */\n onOpen?: VoidFunction;\n}\n\nexport const useChipsSelect = <O extends ChipOption>({\n // common\n disabled,\n\n // option\n value: valueProp,\n defaultValue,\n onChange,\n getOptionLabel = getOptionLabelDefault,\n getOptionValue = getOptionValueDefault,\n getNewOptionData = getNewOptionDataDefault,\n\n // input\n inputValue: inputValueProp,\n defaultInputValue = DEFAULT_INPUT_VALUE,\n onInputChange: onInputChangeProp,\n\n // dropdown\n creatable = false,\n emptyText = DEFAULT_EMPTY_TEXT,\n filterFn = defaultFilterFn,\n sortFn = false,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n options: optionsProp = DEFAULT_VALUE,\n onClose,\n onOpen,\n}: UseChipsSelectProps<O>): {\n // options\n value: Array<\n O & {\n label: ChipOptionLabel;\n value: ChipOptionValue;\n }\n >;\n // input\n inputValue: string;\n onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n // dropdown states\n options: Array<OptionPreset<O>>;\n opened: boolean;\n setOpened: (isOpened: boolean) => void;\n focusedOption: O \| null;\n focusedOptionIndex: number \| null;\n setFocusedOption: React.Dispatch<React.SetStateAction<O \| null>>;\n setFocusedOptionIndex: React.Dispatch<React.SetStateAction<number \| null>>;\n addOption: (newValue: string \| O) => void;\n addOptionFromInput: (inputValue: string) => void;\n removeOption: (newValue: ChipOptionValue \| O) => void;\n clearOptions: () => void;\n inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) \| null>;\n clearInput: () => void;\n} => {\n const { value, inputValue, onInputChange, ...restChipsInputProps } = useChipsInput({\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 // other\n disabled,\n });\n\n // dropdown\n const [opened, setOpened] = React.useState(false);\n const [options, setOptions] = React.useState<Array<OptionPreset<O>>>(() =>\n opened\n ? transformOptions({\n value,\n getOptionValue,\n getOptionLabel,\n inputValue,\n emptyText,\n creatable,\n filterFn,\n sortFn,\n options: optionsProp,\n selectedBehavior,\n })\n : [],\n );\n const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number \| null>(0);\n const [focusedOption, setFocusedOption] = React.useState<O \| null>(null);\n\n const handleOpened = React.useCallback(\n (isOpened: boolean) => {\n isOpened ? onOpen?.() : onClose?.();\n setOpened(isOpened);\n },\n [onOpen, onClose],\n );\n\n const handleInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n onInputChange(event);\n\n if (!opened) {\n handleOpened(true);\n setFocusedOptionIndex(0);\n }\n },\n [onInputChange, opened, handleOpened],\n );\n\n useIsomorphicLayoutEffect(\n function handleDropdownOpen() {\n if (!opened) {\n return;\n }\n\n setOptions((prevOptions) => {\n const nextOptions = transformOptions({\n value,\n getOptionValue,\n getOptionLabel,\n inputValue,\n emptyText,\n creatable,\n filterFn,\n sortFn,\n options: optionsProp,\n selectedBehavior,\n });\n\n if (isEqual(prevOptions, nextOptions)) {\n return prevOptions;\n }\n\n return nextOptions;\n });\n },\n [\n opened,\n value,\n getOptionLabel,\n getOptionValue,\n inputValue,\n optionsProp,\n creatable,\n selectedBehavior,\n filterFn,\n sortFn,\n ],\n );\n\n return {\n ...restChipsInputProps,\n\n // options\n value,\n\n // input\n inputValue,\n onInputChange: handleInputChange,\n\n // dropdown states\n options,\n opened,\n setOpened: handleOpened,\n focusedOption,\n focusedOptionIndex,\n setFocusedOption,\n setFocusedOptionIndex,\n };\n};\n\nfunction transformOptions<O extends ChipOption>({\n value,\n getOptionValue = getOptionValueDefault,\n getOptionLabel = getOptionLabelDefault,\n inputValue = DEFAULT_INPUT_VALUE,\n emptyText = DEFAULT_EMPTY_TEXT,\n creatable = false,\n sortFn = false,\n filterFn = defaultFilterFn,\n options: optionsProp = DEFAULT_VALUE,\n selectedBehavior = DEFAULT_SELECTED_BEHAVIOR,\n}: Required<Pick<UseChipsSelectProps<O>, 'value'>> &\n Pick<\n UseChipsSelectProps<O>,\n \| 'getOptionValue'\n \| 'getOptionLabel'\n \| 'inputValue'\n \| 'emptyText'\n \| 'creatable'\n \| 'filterFn'\n \| 'sortFn'\n \| 'options'\n \| 'selectedBehavior'\n >) {\n const filteredOptionsProp = filterFn\n ? optionsProp.filter((option) => filterFn(inputValue, option, getOptionLabel))\n : optionsProp;\n\n if (filteredOptionsProp.length === 0) {\n if (inputValue !== DEFAULT_INPUT_VALUE && typeof creatable === 'string') {\n return [{ actionText: creatable }];\n }\n return [{ placeholder: emptyText }];\n }\n\n if (sortFn) {\n filteredOptionsProp.sort((optionA, optionB) => sortFn(optionA, optionB, inputValue));\n }\n\n const parsedOptions = transformValue(filteredOptionsProp, getOptionValue, getOptionLabel);\n\n if (selectedBehavior === 'hide') {\n const selected = value.map((item) => item.value);\n return parsedOptions.filter((item) =>\n isNotServicePreset(item) ? !selected.includes(item.value) : false,\n );\n }\n return parsedOptions;\n}\n"],"names":["React","isEqual","defaultFilterFn","useIsomorphicLayoutEffect","transformValue","useChipsInput","DEFAULT_INPUT_VALUE","DEFAULT_VALUE","getNewOptionDataDefault","getOptionLabelDefault","getOptionValueDefault","DEFAULT_EMPTY_TEXT","DEFAULT_SELECTED_BEHAVIOR","isNotServicePreset","useChipsSelect","disabled","value","valueProp","defaultValue","onChange","getOptionLabel","getOptionValue","getNewOptionData","inputValue","inputValueProp","defaultInputValue","onInputChange","onInputChangeProp","creatable","emptyText","filterFn","sortFn","selectedBehavior","options","optionsProp","onClose","onOpen","restChipsInputProps","opened","setOpened","useState","setOptions","transformOptions","focusedOptionIndex","setFocusedOptionIndex","focusedOption","setFocusedOption","handleOpened","useCallback","isOpened","handleInputChange","event","handleDropdownOpen","prevOptions","nextOptions","filteredOptionsProp","filter","option","length","actionText","placeholder","sort","optionA","optionB","parsedOptions","selected","map","item","includes"],"mappings":"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"}

package/dist/cssm/components/Clickable/Clickable.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { RealClickable } from "./RealClickable.js";
 import styles from "./Clickable.module.css";
 /**
  * Некликабельный компонент. Отключаем возможность нажимать на компонент.
- */ const NonClickable = ({ href, onClick, onClickCapture, activeClassName, hoverClassName, hasActive, hasHover, hovered, unlockParentHover, activated, activeEffectDelay, ...restProps })=>/*#__PURE__*/ _jsx(RootComponent, {
+ */ const NonClickable = ({ href, onClick, onClickCapture, activeClassName, hoverClassName, hasActive, hasHover, hovered, unlockParentHover, activated, activeEffectDelay, focusVisibleMode, ...restProps })=>/*#__PURE__*/ _jsx(RootComponent, {
         ...restProps
     });
 /**
@@ -24,19 +24,33 @@ import styles from "./Clickable.module.css";
  */ function component({ Component, onClick, onClickCapture, href, disabled }) {
     if (Component !== undefined) {
         return {
-            Component
+            Component,
+            disabled
         };
     } else if (href !== undefined) {
         return {
-            'Component': 'a',
-            'aria-disabled': disabled
+            Component: 'a',
+            /**
+       * Если ссылка отключена, добавляем атрибуты для доступности.
+       *
+       * - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`
+       * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role="link"`
+       *
+       * https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria
+       */ ...disabled && {
+                'aria-disabled': true,
+                'role': 'link'
+            }
         };
     } else if (onClick !== undefined || onClickCapture !== undefined) {
         return {
-            'Component': 'div',
-            'role': 'button',
-            'tabIndex': disabled ? undefined : 0,
-            'aria-disabled': disabled
+            Component: 'div',
+            role: 'button',
+            ...disabled ? {
+                'aria-disabled': true
+            } : {
+                tabIndex: 0
+            }
         };
     }
     return {};
@@ -52,20 +66,13 @@ import styles from "./Clickable.module.css";
  *
  * - стейты наведения и нажатия
  * - a11y компонентов
- */ export const Clickable = ({ focusVisibleMode = 'inside', baseClassName: baseClassNameProp, ...restProps })=>{
-    const commonProps = component(restProps);
-    const isClickable = checkClickable(restProps);
-    const baseClassName = classNames(baseClassNameProp, styles.host);
-    if (isClickable) {
-        return /*#__PURE__*/ _jsx(RealClickable, {
-            baseClassName: baseClassName,
-            focusVisibleMode: focusVisibleMode,
-            ...commonProps,
-            ...restProps
-        });
-    }
-    return /*#__PURE__*/ _jsx(NonClickable, {
-        baseClassName: baseClassName,
+ */ export const Clickable = (props)=>{
+    const commonProps = component(props);
+    const isClickable = checkClickable(props);
+    const Component = isClickable ? RealClickable : NonClickable;
+    const { baseClassName, disabled, ...restProps } = props;
+    return /*#__PURE__*/ _jsx(Component, {
+        baseClassName: classNames(baseClassName, styles.host),
         ...commonProps,
         ...restProps
     });

package/dist/cssm/components/Clickable/Clickable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n extends RootComponentProps<T>,\n FocusVisibleModeProps,\n StateProps {}\n\n/*\n Некликабельный компонент. Отключаем возможность нажимать на компонент.\n /\nconst NonClickable = <T,>({\n href,\n onClick,\n onClickCapture,\n activeClassName,\n hoverClassName,\n hasActive,\n hasHover,\n hovered,\n unlockParentHover,\n activated,\n activeEffectDelay,\n ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/\n Проверяем, является ли компонент кликабельным\n /\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n return (\n (props.href !== undefined \|\|\n props.onClick !== undefined \|\|\n props.onClickCapture !== undefined \|\|\n props.Component === 'a' \|\|\n props.Component === 'button' \|\|\n props.Component === 'label' \|\|\n props.Component === 'input') &&\n !props.disabled\n );\n}\n\n/\n Определяет правильный компонент и его свойства\n \n - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n /\nfunction component<T>({\n Component,\n onClick,\n onClickCapture,\n href,\n disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n if (Component !== undefined) {\n return { Component };\n } else if (href !== undefined) {\n return { 'Component': 'a', 'aria-disabled': ~~disabled~~ };\n } else if (onClick !== undefined \|\| onClickCapture !== undefined) {\n return {\n 'Component': 'div',\n 'role': 'button',\n ~~'tabIndex':~~ disabled ? ~~undefined~~ ~~: 0,\n~~ 'aria-disabled': ~~disabled~~,\n };\n }\n\n return {};\n}\n\n/\n Базовый кликабельный корневой компонент.\n \n - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n \n Отвечает за:\n \n - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>(~~{\n focusVisibleMode = 'inside',\n baseClassName~~: ~~baseClassNameProp,\n ...restProps\n}:~~ ClickableProps<T>): React.ReactNode => {\n const commonProps = component(~~restProps~~);\n const isClickable = checkClickable(~~restProps~~);\n const ~~baseClassName~~ = ~~classNames(baseClassNameProp,~~ ~~styles.host)~~;\n\n if ~~(isClickable)~~ {\n return (\n <~~RealClickable~~\n baseClassName={baseClassName}\n ~~focusVisibleMode=~~{~~focusVisibleMode}\n {~~...commonProps}\n {...restProps}\n />\n );\n }~~\n\n return <NonClickable baseClassName={baseClassName} {...commonProps} {...restProps} />;\n}~~;\n"],"names":["React","classNames","RootComponent","RealClickable","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","restProps","checkClickable","props","undefined","Component","disabled","component","~~Clickable~~","~~focusVisibleMode~~","~~baseClassName~~","~~baseClassNameProp~~","~~commonProps~~","~~isClickable~~","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAEhD,OAAOC,YAAY,yBAAyB;AAO5C;;CAEC,GACD,MAAMC,eAAe,CAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,~~EACjB~~,GAAGC,WACe,iBAAK,~~KAACf~~;QAAe,~~GAAGe~~,SAAS;;AAErD;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,~~MAAMb~~,IAAI,~~KAAKc~~,aACdD,~~MAAMZ~~,OAAO,~~KAAKa~~,aAClBD,~~MAAMX~~,cAAc,~~KAAKY~~,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,~~EACTd~~,OAAO,EACPC,cAAc,EACdF,IAAI,~~EACJgB~~,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;~~QAAU~~;~~IACrB~~,OAAO,~~IAAIf~~,~~SAASc~~,WAAW;QAC7B,OAAO;~~YAAE~~,~~aAAa~~;~~YAAK~~,~~iBAAiBE~~;~~QAAS~~;~~IACvD~~,OAAO,~~IAAIf~~,~~YAAYa~~,~~aAAaZ~~,~~mBAAmBY~~,WAAW;QAChE,OAAO;~~YACL~~,~~aAAa~~;~~YACb~~,~~QAAQ~~;~~YACR~~,~~YAAYE~~,~~WAAWF~~,~~YAAY~~;~~YACnC~~,~~iBAAiBE~~;~~QACnB~~;IACF;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,~~MAAME~~,YAAY,~~CAAK,EAC5BC,mBAAmB,QAAQ,EAC3BC,eAAeC,iBAAiB,EAChC,GAAGV,WACe~~;~~IAClB~~,~~MAAMW~~,~~cAAcL~~,~~UAAUN~~;IAC9B,~~MAAMY~~,~~cAAcX~~,~~eAAeD~~;IACnC,~~MAAMS~~,~~gBAAgBzB~~,~~WAAW0B~~,~~mBAAmBvB~~,~~OAAO0B~~,~~IAAI;IAE/D~~,~~IAAID,~~aAAa~~;QACf~~,~~qBACE~~,~~KAAC1B;YACCuB~~,~~eAAeA;YACfD~~,~~kBAAkBA;YACjB~~,~~GAAGG~~,~~WAAW~~;~~YACd~~,~~GAAGX~~,~~SAAS;;IAGnB~~;~~IAEA~~,~~qBAAO~~,~~KAACZ;QAAaqB~~,~~eAAeA~~;~~QAAgB~~,~~GAAGE~~,WAAW;~~QAAG~~,~~GAAGX~~,SAAS;;~~AACnF~~,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n extends RootComponentProps<T>,\n FocusVisibleModeProps,\n StateProps {}\n\n/*\n Некликабельный компонент. Отключаем возможность нажимать на компонент.\n /\nconst NonClickable = <T,>({\n href,\n onClick,\n onClickCapture,\n activeClassName,\n hoverClassName,\n hasActive,\n hasHover,\n hovered,\n unlockParentHover,\n activated,\n activeEffectDelay,\n focusVisibleMode,\n ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/\n Проверяем, является ли компонент кликабельным\n /\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n return (\n (props.href !== undefined \|\|\n props.onClick !== undefined \|\|\n props.onClickCapture !== undefined \|\|\n props.Component === 'a' \|\|\n props.Component === 'button' \|\|\n props.Component === 'label' \|\|\n props.Component === 'input') &&\n !props.disabled\n );\n}\n\n/\n Определяет правильный компонент и его свойства\n \n - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n /\nfunction component<T>({\n Component,\n onClick,\n onClickCapture,\n href,\n disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n if (Component !== undefined) {\n return { Component, disabled };\n } else if (href !== undefined) {\n return {\n Component: 'a',\n\n /\n Если ссылка отключена, добавляем атрибуты для доступности.\n \n - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`\n * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role=\"link\"`\n \n https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria\n /\n ...(disabled && {\n 'aria-disabled': true,\n 'role': 'link',\n }),\n };\n } else if (onClick !== undefined \|\| onClickCapture !== undefined) {\n return {\n Component: 'div',\n role: 'button',\n ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),\n };\n }\n\n return {};\n}\n\n/\n Базовый кликабельный корневой компонент.\n \n - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n \n Отвечает за:\n \n - стейты наведения и нажатия\n * - a11y компонентов\n */\nexport const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {\n const commonProps = component(props);\n const isClickable = checkClickable(props);\n const Component = isClickable ? RealClickable : NonClickable;\n\n const {\n baseClassName,\n disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n ...restProps\n } = props;\n\n return (\n <Component\n baseClassName={classNames(baseClassName, styles.host)}\n {...commonProps}\n {...restProps}\n />\n );\n};\n"],"names":["React","classNames","RootComponent","RealClickable","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","restProps","checkClickable","props","undefined","Component","disabled","component","role","tabIndex","Clickable","commonProps","isClickable","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAEhD,OAAOC,YAAY,yBAAyB;AAO5C;;CAEC,GACD,MAAMC,eAAe,CAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjBC,gBAAgB,EAChB,GAAGC,WACe,iBAAK,KAAChB;QAAe,GAAGgB,SAAS;;AAErD;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMd,IAAI,KAAKe,aACdD,MAAMb,OAAO,KAAKc,aAClBD,MAAMZ,cAAc,KAAKa,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTf,OAAO,EACPC,cAAc,EACdF,IAAI,EACJiB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;YAAWC;QAAS;IAC/B,OAAO,IAAIjB,SAASe,WAAW;QAC7B,OAAO;YACLC,WAAW;YAEX;;;;;;;OAOC,GACD,GAAIC,YAAY;gBACd,iBAAiB;gBACjB,QAAQ;YACV,CAAC;QACH;IACF,OAAO,IAAIhB,YAAYc,aAAab,mBAAmBa,WAAW;QAChE,OAAO;YACLC,WAAW;YACXG,MAAM;YACN,GAAIF,WAAW;gBAAE,iBAAiB;YAAK,IAAI;gBAAEG,UAAU;YAAE,CAAC;QAC5D;IACF;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAKP;IAC5B,MAAMQ,cAAcJ,UAAUJ;IAC9B,MAAMS,cAAcV,eAAeC;IACnC,MAAME,YAAYO,cAAc1B,gBAAgBE;IAEhD,MAAM,EACJyB,aAAa,EACbP,QAAQ,EACR,GAAGL,WACJ,GAAGE;IAEJ,qBACE,KAACE;QACCQ,eAAe7B,WAAW6B,eAAe1B,OAAO2B,IAAI;QACnD,GAAGH,WAAW;QACd,GAAGV,SAAS;;AAGnB,EAAE"}

package/dist/cssm/components/Clickable/Clickable.module.css CHANGED Viewed

@@ -17,10 +17,10 @@ button.realClickable {
 }
 a.realClickable {
+  text-decoration: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  text-decoration: none;
 }
 /* stylelint-enable selector-max-type */

package/dist/cssm/components/ColorSchemeProvider/ColorSchemeProvider.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // TODO [@vkontakte/icons-sprite>=2.3.1]: Удалить use client, если он появился в IconAppearanceProvider
 import * as React from "react";
 import { IconAppearanceProvider } from "@vkontakte/icons";
-import { TokensClassProvider } from "../../lib/tokens/index.js";
+import { TokensClassProvider } from "../../lib/tokens/TokensClassProvider.js";
 import { ConfigProviderOverride } from "../ConfigProvider/ConfigProviderOverride.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/ColorSchemeProvider

package/dist/cssm/components/ColorSchemeProvider/ColorSchemeProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ColorSchemeProvider/ColorSchemeProvider.tsx"],"sourcesContent":["'use client';\n\n// TODO [@vkontakte/icons-sprite>=2.3.1]: Удалить use client, если он появился в IconAppearanceProvider\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface ColorSchemeProviderProps {\n value: ColorSchemeType;\n children: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ColorSchemeProvider\n */\nexport const ColorSchemeProvider = ({\n value,\n children,\n}: ColorSchemeProviderProps): React.ReactNode => {\n return (\n <ConfigProviderOverride colorScheme={value}>\n <IconAppearanceProvider value={value}>\n <TokensClassProvider>{children}</TokensClassProvider>\n </IconAppearanceProvider>\n </ConfigProviderOverride>\n );\n};\n"],"names":["React","IconAppearanceProvider","TokensClassProvider","ConfigProviderOverride","ColorSchemeProvider","value","children","colorScheme"],"mappings":"AAAA;;AAEA,uGAAuG;AAEvG,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAE1D,SAASC,mBAAmB,QAAQ,~~4BAAmB~~;~~AACvD~~,SAASC,sBAAsB,QAAQ,8CAA2C;AAOlF;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,KAAK,EACLC,QAAQ,EACiB;IACzB,qBACE,KAACH;QAAuBI,aAAaF;kBACnC,cAAA,KAACJ;YAAuBI,OAAOA;sBAC7B,cAAA,KAACH;0BAAqBI;;;;AAI9B,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ColorSchemeProvider/ColorSchemeProvider.tsx"],"sourcesContent":["'use client';\n\n// TODO [@vkontakte/icons-sprite>=2.3.1]: Удалить use client, если он появился в IconAppearanceProvider\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface ColorSchemeProviderProps {\n value: ColorSchemeType;\n children: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ColorSchemeProvider\n */\nexport const ColorSchemeProvider = ({\n value,\n children,\n}: ColorSchemeProviderProps): React.ReactNode => {\n return (\n <ConfigProviderOverride colorScheme={value}>\n <IconAppearanceProvider value={value}>\n <TokensClassProvider>{children}</TokensClassProvider>\n </IconAppearanceProvider>\n </ConfigProviderOverride>\n );\n};\n"],"names":["React","IconAppearanceProvider","TokensClassProvider","ConfigProviderOverride","ColorSchemeProvider","value","children","colorScheme"],"mappings":"AAAA;;AAEA,uGAAuG;AAEvG,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAE1D,SAASC,mBAAmB,QAAQ,0CAAuC;AAC3E,SAASC,sBAAsB,QAAQ,8CAA2C;AAOlF;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,KAAK,EACLC,QAAQ,EACiB;IACzB,qBACE,KAACH;QAAuBI,aAAaF;kBACnC,cAAA,KAACJ;YAAuBI,OAAOA;sBAC7B,cAAA,KAACH;0BAAqBI;;;;AAI9B,EAAE"}

package/dist/cssm/components/ConfigProvider/ConfigProvider.js CHANGED Viewed

@@ -3,7 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { IconAppearanceProvider } from "@vkontakte/icons";
 import { useAutoDetectColorScheme } from "../../hooks/useAutoDetectColorScheme.js";
-import { TokensClassProvider } from "../../lib/tokens/index.js";
+import { useAutoDetectDirection } from "../../hooks/useAutoDetectDirection.js";
+import { TokensClassProvider } from "../../lib/tokens/TokensClassProvider.js";
 import { excludeKeysWithUndefined } from "../../lib/utils.js";
 import { ConfigProviderContext, useConfigProvider, useConfigProviderContextMemo } from "./ConfigProviderContext.js";
 /**
@@ -16,9 +17,11 @@ import { ConfigProviderContext, useConfigProvider, useConfigProviderContextMemo
         ...props
     };
     const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);
+    const direction = useAutoDetectDirection(mergeProps.direction);
     const configContext = useConfigProviderContextMemo({
         ...mergeProps,
-        colorScheme
+        colorScheme,
+        direction
     });
     return /*#__PURE__*/ _jsx(ConfigProviderContext.Provider, {
         value: configContext,

package/dist/cssm/components/ConfigProvider/ConfigProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { excludeKeysWithUndefined } from '../../lib/utils';\nimport {\n ConfigProviderContext,\n type ConfigProviderContextInterface,\n useConfigProvider,\n useConfigProviderContextMemo,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n children: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode => {\n const props = excludeKeysWithUndefined(propsRaw);\n const parentConfig = useConfigProvider();\n\n const mergeProps = {\n ...parentConfig,\n ...props,\n };\n\n const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);\n\n const configContext = useConfigProviderContextMemo({\n ...mergeProps,\n colorScheme,\n });\n\n return (\n <ConfigProviderContext.Provider value={configContext}>\n <IconAppearanceProvider value={colorScheme}>\n <TokensClassProvider>{mergeProps.children}</TokensClassProvider>\n </IconAppearanceProvider>\n </ConfigProviderContext.Provider>\n );\n};\n"],"names":["React","IconAppearanceProvider","useAutoDetectColorScheme","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProvider","propsRaw","props","parentConfig","mergeProps","colorScheme","configContext","Provider","value","children"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,mBAAmB,QAAQ,~~4BAAmB~~;~~AACvD~~,SAASC,wBAAwB,QAAQ,qBAAkB;AAC3D,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,4BAA4B,QACvB,6BAA0B;AAMjC;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,QAAQN,yBAAyBK;IACvC,MAAME,eAAeL;IAErB,MAAMM,aAAa;QACjB,GAAGD,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,MAAMG,~~cAAcX~~,~~yBAAyBU~~,WAAWC,WAAW;~~IAEnE~~,MAAMC,~~gBAAgBP~~,6BAA6B;QACjD,GAAGK,UAAU;QACbC;IACF;IAEA,qBACE,~~KAACR~~,~~sBAAsBU~~,QAAQ;QAACC,OAAOF;kBACrC,cAAA,~~KAACb~~;~~YAAuBe~~,~~OAAOH~~;sBAC7B,cAAA,KAACV;0BAAqBS,~~WAAWK~~,QAAQ;;;;AAIjD,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { IconAppearanceProvider } from '@vkontakte/icons';\nimport { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme';\nimport { useAutoDetectDirection } from '../../hooks/useAutoDetectDirection';\nimport { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';\nimport { excludeKeysWithUndefined } from '../../lib/utils';\nimport {\n ConfigProviderContext,\n type ConfigProviderContextInterface,\n useConfigProvider,\n useConfigProviderContextMemo,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n children: React.ReactNode;\n}\n\n/*\n @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode => {\n const props = excludeKeysWithUndefined(propsRaw);\n const parentConfig = useConfigProvider();\n\n const mergeProps = {\n ...parentConfig,\n ...props,\n };\n\n const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme);\n const direction = useAutoDetectDirection(mergeProps.direction);\n\n const configContext = useConfigProviderContextMemo({\n ...mergeProps,\n colorScheme,\n direction,\n });\n\n return (\n <ConfigProviderContext.Provider value={configContext}>\n <IconAppearanceProvider value={colorScheme}>\n <TokensClassProvider>{mergeProps.children}</TokensClassProvider>\n </IconAppearanceProvider>\n </ConfigProviderContext.Provider>\n );\n};\n"],"names":["React","IconAppearanceProvider","useAutoDetectColorScheme","useAutoDetectDirection","TokensClassProvider","excludeKeysWithUndefined","ConfigProviderContext","useConfigProvider","useConfigProviderContextMemo","ConfigProvider","propsRaw","props","parentConfig","mergeProps","colorScheme","direction","configContext","Provider","value","children"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,sBAAsB,QAAQ,wCAAqC;AAC5E,SAASC,mBAAmB,QAAQ,0CAAuC;AAC3E,SAASC,wBAAwB,QAAQ,qBAAkB;AAC3D,SACEC,qBAAqB,EAErBC,iBAAiB,EACjBC,4BAA4B,QACvB,6BAA0B;AAMjC;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,QAAQN,yBAAyBK;IACvC,MAAME,eAAeL;IAErB,MAAMM,aAAa;QACjB,GAAGD,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,MAAMG,cAAcZ,yBAAyBW,WAAWC,WAAW;IACnE,MAAMC,YAAYZ,uBAAuBU,WAAWE,SAAS;IAE7D,MAAMC,gBAAgBR,6BAA6B;QACjD,GAAGK,UAAU;QACbC;QACAC;IACF;IAEA,qBACE,KAACT,sBAAsBW,QAAQ;QAACC,OAAOF;kBACrC,cAAA,KAACf;YAAuBiB,OAAOJ;sBAC7B,cAAA,KAACV;0BAAqBS,WAAWM,QAAQ;;;;AAIjD,EAAE"}

package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { platform } from "../../lib/platform.js";
-import { DEFAULT_TOKENS_CLASS_NAMES } from "../../lib/tokens/index.js";
+import { DEFAULT_TOKENS_CLASS_NAMES } from "../../lib/tokens/constants.js";
 export const ConfigProviderContext = /*#__PURE__*/ React.createContext({
     hasCustomPanelHeaderAfter: false,
     customPanelHeaderAfterMinWidth: 90,
@@ -10,12 +10,14 @@ export const ConfigProviderContext = /*#__PURE__*/ React.createContext({
     platform: platform(),
     colorScheme: undefined,
     tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,
-    locale: 'ru'
+    locale: 'ru',
+    direction: undefined
 });
 export const useConfigProvider = ()=>React.useContext(ConfigProviderContext);
 export function useConfigProviderContextMemo(config) {
-    const { isWebView, hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth, colorScheme, transitionMotionEnabled, platform, tokensClassNames, locale } = config;
-    return React.useMemo(()=>({
+    const { isWebView, hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth, colorScheme, transitionMotionEnabled, platform, tokensClassNames, locale, direction } = config;
+    return React.useMemo(()=>{
+        return {
             isWebView,
             hasCustomPanelHeaderAfter,
             customPanelHeaderAfterMinWidth,
@@ -23,8 +25,10 @@ export function useConfigProviderContextMemo(config) {
             transitionMotionEnabled,
             platform,
             tokensClassNames,
-            locale
-        }), [
+            locale,
+            direction
+        };
+    }, [
         isWebView,
         hasCustomPanelHeaderAfter,
         customPanelHeaderAfterMinWidth,
@@ -32,7 +36,8 @@ export function useConfigProviderContextMemo(config) {
         transitionMotionEnabled,
         platform,
         tokensClassNames,
-        locale
+        locale,
+        direction
     ]);
 }

package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { platform, type PlatformType } from '../../lib/platform';\nimport { DEFAULT_TOKENS_CLASS_NAMES, type TokensClassNames } from '../../lib/tokens';\n\nexport interface ConfigProviderContextInterface {\n /*\n Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.\n \n В условиях когда:\n * - `isWebView={true}`\n * - platform=\"ios\"\n \n для компонента `View` включается возможность навигации через смахивание.\n /\n isWebView: boolean;\n /\n При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского\n * \"плавающего\" элемента (например, панель управления webview).\n \n > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых\n * > библиотекой.\n /\n hasCustomPanelHeaderAfter: boolean;\n /\n Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский\n * \"плавающий\" элемент (например, ширина панели управления webview).\n \n Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).\n \n @default 90\n /\n customPanelHeaderAfterMinWidth: number \| string;\n /\n Тип цветовой схемы – `light` или `dark`\n /\n colorScheme: ColorSchemeType \| undefined;\n /\n Включена ли анимация переходов между экранами в `Root` и `View`\n /\n transitionMotionEnabled: boolean;\n /\n Платформа\n /\n platform: PlatformType;\n /\n CSS классы, определяющие набор токенов.\n \n - Используйте `{ light?: '<css_class>', dark?: '<css_class>' }`, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем.\n * - Используйте `{ [key in 'android' \| 'ios' \| 'vkcom']?: '<css_class>' }`, чтобы задать для одной или нескольких платформ свой набор токенов.\n \n @default\n * {\n * android: {\n * light: 'vkui--vkBase--light',\n * dark: 'vkui--vkBase--dark',\n * },\n * ios: {\n * light: 'vkui--vkIOS--light',\n * dark: 'vkui--vkIOS--dark',\n * },\n * vkcom: {\n * light: 'vkui--vkCom--light',\n * dark: 'vkui--vkCom--dark',\n * }\n * }\n /\n tokensClassNames: TokensClassNames;\n /\n Строка с языковой меткой BCP 47\n */\n locale: string;\n}\n\nexport const ConfigProviderContext: React.Context<ConfigProviderContextInterface> =\n React.createContext<ConfigProviderContextInterface>({\n hasCustomPanelHeaderAfter: false,\n customPanelHeaderAfterMinWidth: 90,\n isWebView: false,\n transitionMotionEnabled: true,\n platform: platform(),\n colorScheme: undefined, // undefined обозначает что тема должна определиться автоматически\n tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,\n locale: 'ru',\n });\n\nexport const useConfigProvider = (): ConfigProviderContextInterface =>\n React.useContext(ConfigProviderContext);\n\nexport function useConfigProviderContextMemo(config: ConfigProviderContextInterface) {\n const {\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n } = config;\n\n return React.useMemo<ConfigProviderContextInterface>(\n () => ({\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n }~~),\~~n [\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n ],\n );\n}\n"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","colorScheme","undefined","tokensClassNames","locale","useConfigProvider","useContext","useConfigProviderContextMemo","config","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;~~AAE~~/B,SAASC,QAAQ,QAA2B,wBAAqB;AACjE,SAASC,0BAA0B,~~QAA+B~~,~~4BAAmB~~;~~AAuErF~~,OAAO,MAAMC,sCACXH,MAAMI,aAAa,CAAiC;IAClDC,2BAA2B;IAC3BC,gCAAgC;IAChCC,WAAW;IACXC,yBAAyB;IACzBP,UAAUA;IACVQ,aAAaC;IACbC,kBAAkBT;IAClBU,QAAQ;~~AACV~~,GAAG;AAEL,OAAO,~~MAAMC~~,oBAAoB,IAC/Bb,~~MAAMc~~,UAAU,~~CAACX~~,uBAAuB;AAE1C,OAAO,~~SAASY~~,6BAA6BC,MAAsC;IACjF,MAAM,~~EACJT~~,SAAS,EACTF,yBAAyB,EACzBC,8BAA8B,EAC9BG,WAAW,EACXD,uBAAuB,EACvBP,QAAQ,EACRU,gBAAgB,EAChBC,MAAM,~~EACP~~,GAAGI;IAEJ,~~OAAOhB~~,~~MAAMiB~~,OAAO,~~CAClB~~,~~IAAO,CAAA~~;~~YACLV~~;YACAF;YACAC;YACAG;YACAD;YACAP;YACAU;YACAC;QACF,~~CAAA,GACA~~;~~QACEL~~;QACAF;QACAC;QACAG;QACAD;QACAP;QACAU;QACAC;KACD;~~AAEL~~"}
1	+ {"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ColorSchemeType } from '../../lib/colorScheme';\nimport { type Direction } from '../../lib/direction';\nimport { platform, type PlatformType } from '../../lib/platform';\nimport { DEFAULT_TOKENS_CLASS_NAMES } from '../../lib/tokens/constants';\nimport { type TokensClassNames } from '../../lib/tokens/types';\n\nexport interface ConfigProviderContextInterface {\n /*\n Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере.\n \n В условиях когда:\n * - `isWebView={true}`\n * - platform=\"ios\"\n \n для компонента `View` включается возможность навигации через смахивание.\n /\n isWebView: boolean;\n /\n При `true` слот `after` у `PanelHeader` игнорируется под размещение пользовательского\n * \"плавающего\" элемента (например, панель управления webview).\n \n > Note: Правило не распространяется на `PanelHeader` внутри модальных окон, предоставляемых\n * > библиотекой.\n /\n hasCustomPanelHeaderAfter: boolean;\n /\n Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский\n * \"плавающий\" элемент (например, ширина панели управления webview).\n \n Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).\n \n @default 90\n /\n customPanelHeaderAfterMinWidth: number \| string;\n /\n Тип цветовой схемы – `light` или `dark`\n /\n colorScheme: ColorSchemeType \| undefined;\n /\n Включена ли анимация переходов между экранами в `Root` и `View`\n /\n transitionMotionEnabled: boolean;\n /\n Платформа\n /\n platform: PlatformType;\n /\n CSS классы, определяющие набор токенов.\n \n - Используйте `{ light?: '<css_class>', dark?: '<css_class>' }`, чтобы задать для всех платформ одинаковый набор токенов для светлой и/или тёмной тем.\n * - Используйте `{ [key in 'android' \| 'ios' \| 'vkcom']?: '<css_class>' }`, чтобы задать для одной или нескольких платформ свой набор токенов.\n \n @default\n * {\n * android: {\n * light: 'vkui--vkBase--light',\n * dark: 'vkui--vkBase--dark',\n * },\n * ios: {\n * light: 'vkui--vkIOS--light',\n * dark: 'vkui--vkIOS--dark',\n * },\n * vkcom: {\n * light: 'vkui--vkCom--light',\n * dark: 'vkui--vkCom--dark',\n * }\n * }\n /\n tokensClassNames: TokensClassNames;\n /\n Строка с языковой меткой BCP 47\n /\n locale: string;\n /\n Направление контента.\n \n При использовании определенного значения, важно установить атрибут `dir` с таким же значением либо на дочерний элемент,\n * либо на все страницу в целом.\n \n @default Определяется автоматически в зависимости от значения атрибута `dir` установленного на `body` страницы\n */\n direction: Direction \| undefined;\n}\n\nexport const ConfigProviderContext: React.Context<ConfigProviderContextInterface> =\n React.createContext<ConfigProviderContextInterface>({\n hasCustomPanelHeaderAfter: false,\n customPanelHeaderAfterMinWidth: 90,\n isWebView: false,\n transitionMotionEnabled: true,\n platform: platform(),\n colorScheme: undefined, // undefined обозначает что тема должна определиться автоматически\n tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES,\n locale: 'ru',\n direction: undefined,\n });\n\nexport const useConfigProvider = (): ConfigProviderContextInterface =>\n React.useContext(ConfigProviderContext);\n\nexport function useConfigProviderContextMemo(config: ConfigProviderContextInterface) {\n const {\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n direction,\n } = config;\n\n return React.useMemo<ConfigProviderContextInterface>(() => {\n return {\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n direction,\n };\n }, [\n isWebView,\n hasCustomPanelHeaderAfter,\n customPanelHeaderAfterMinWidth,\n colorScheme,\n transitionMotionEnabled,\n platform,\n tokensClassNames,\n locale,\n direction,\n ]);\n}\n"],"names":["React","platform","DEFAULT_TOKENS_CLASS_NAMES","ConfigProviderContext","createContext","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isWebView","transitionMotionEnabled","colorScheme","undefined","tokensClassNames","locale","direction","useConfigProvider","useContext","useConfigProviderContextMemo","config","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,QAAQ,QAA2B,wBAAqB;AACjE,SAASC,0BAA0B,QAAQ,gCAA6B;AAiFxE,OAAO,MAAMC,sCACXH,MAAMI,aAAa,CAAiC;IAClDC,2BAA2B;IAC3BC,gCAAgC;IAChCC,WAAW;IACXC,yBAAyB;IACzBP,UAAUA;IACVQ,aAAaC;IACbC,kBAAkBT;IAClBU,QAAQ;IACRC,WAAWH;AACb,GAAG;AAEL,OAAO,MAAMI,oBAAoB,IAC/Bd,MAAMe,UAAU,CAACZ,uBAAuB;AAE1C,OAAO,SAASa,6BAA6BC,MAAsC;IACjF,MAAM,EACJV,SAAS,EACTF,yBAAyB,EACzBC,8BAA8B,EAC9BG,WAAW,EACXD,uBAAuB,EACvBP,QAAQ,EACRU,gBAAgB,EAChBC,MAAM,EACNC,SAAS,EACV,GAAGI;IAEJ,OAAOjB,MAAMkB,OAAO,CAAiC;QACnD,OAAO;YACLX;YACAF;YACAC;YACAG;YACAD;YACAP;YACAU;YACAC;YACAC;QACF;IACF,GAAG;QACDN;QACAF;QACAC;QACAG;QACAD;QACAP;QACAU;QACAC;QACAC;KACD;AACH"}

package/dist/cssm/components/ContentBadge/ContentBadge.module.css CHANGED Viewed

@@ -1,12 +1,10 @@
 .host {
-  isolation: isolate;
   position: relative;
+  box-sizing: border-box;
   display: inline-grid;
   grid-auto-flow: column;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
-  block-size: auto;
   /**
    * `min-width` в контексте Flexbox по умолчанию имеет значение `auto`,
@@ -15,6 +13,8 @@
    * Подробности по ссылке https://stackoverflow.com/a/66689926/2903061
    */
   min-inline-size: 0;
+  block-size: auto;
+  isolation: isolate;
 }
 .sizeS {
@@ -118,12 +118,12 @@
 /* mode="outline" */
 .modeOutline::before {
-  content: '';
   position: absolute;
-  z-index: -1;
   inset: 0;
-  border-width: 1px;
+  z-index: -1;
+  content: '';
   border-style: solid;
+  border-width: 1px;
   border-radius: inherit;
 }
@@ -164,6 +164,6 @@
 }
 .outlineOverlay::before {
-  border-width: 0;
   background-color: var(--vkui--color_overlay_primary);
+  border-width: 0;
 }