@vkontakte/vkui 5.5.4 → 5.6.0

package/dist/cssm/components/ChipsInputBase/ChipsInputBase.d.ts

@@ -11,6 +11,10 @@ export interface ChipsInputBaseProps<Option extends ChipOption> extends Omit<Rea
     getNewOptionData?: (v?: ChipValue, l?: string) => Option;
     renderChip?: (props?: RenderChip<Option>) => React.ReactNode;
     inputAriaLabel?: string;
+    /**
+     * Добавляет значение в список на событие `onBlur`
+     */
+    addOnBlur?: boolean;
 }
 export declare const chipsInputDefaultProps: ChipsInputBaseProps<any>;
 export declare const ChipsInputBase: <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => React.JSX.Element;

package/dist/cssm/components/ChipsInputBase/ChipsInputBase.js

@@ -25,23 +25,24 @@ export const chipsInputDefaultProps = {
         if (!props) {
             return null;
         }
-        const { disabled , value , label , ...rest } = props;
+        const { disabled, value, label, ...rest } = props;
         return /*#__PURE__*/ React.createElement(Chip, {
             value: value,
             removable: !disabled,
             ...rest
         }, label);
-    }
+    },
+    addOnBlur: false
 };
 export const ChipsInputBase = (props)=>{
     const propsWithDefault = {
         ...chipsInputDefaultProps,
         ...props
     };
-    const { style , className , getRootRef , value , onChange , onInputChange , onKeyDown , onBlur , onFocus , children , inputValue , getRef , placeholder , getOptionValue , getOptionLabel , getNewOptionData , renderChip , inputAriaLabel , ...restProps } = propsWithDefault;
-    const { sizeY  } = useAdaptivity();
+    const { style, className, getRootRef, value, onChange, onInputChange, onKeyDown, onBlur, onFocus, children, inputValue, getRef, placeholder, getOptionValue, getOptionLabel, getNewOptionData, renderChip, inputAriaLabel, addOnBlur, ...restProps } = propsWithDefault;
+    const { sizeY } = useAdaptivity();
     const [focused, setFocused] = React.useState(false);
-    const { fieldValue , addOptionFromInput , removeOption , selectedOptions , handleInputChange  } = useChipsInput(propsWithDefault);
+    const { fieldValue, addOptionFromInput, removeOption, selectedOptions, handleInputChange } = useChipsInput(propsWithDefault);
     const inputRef = useExternRef(getRef);
     const isDisabled = restProps.disabled || restProps.readOnly;
     const handleKeyDown = (e)=>{
@@ -64,6 +65,9 @@ export const ChipsInputBase = (props)=>{
             setFocused(false);
         }
         onBlur(e);
+        if (addOnBlur && !e.defaultPrevented) {
+            addOptionFromInput();
+        }
     };
     const handleFocus = (e)=>{
         if (!focused) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useChipsInput } from '../../hooks/useChipsInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { Chip, ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport styles from './ChipsInputBase.module.css';\n\nexport interface ChipsInputBaseProps<Option extends ChipOption>\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign {\n  value: Option[];\n  inputValue?: string;\n  onChange?: (o: Option[]) => void;\n  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n  getOptionValue?: (o?: Option) => ChipValue;\n  getOptionLabel?: (o?: Option) => string;\n  getNewOptionData?: (v?: ChipValue, l?: string) => Option;\n  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n  inputAriaLabel?: string;\n}\n\nexport const chipsInputDefaultProps: ChipsInputBaseProps<any> = {\n  onChange: noop,\n  onInputChange: noop,\n  onKeyDown: noop,\n  onBlur: noop,\n  onFocus: noop,\n  value: [],\n  inputValue: '',\n  inputAriaLabel: 'Введите ваше значение...',\n  getOptionValue: (option) => option.value,\n  getOptionLabel: (option) => option.label,\n  getNewOptionData: (_, label) => ({\n    value: label,\n    label,\n  }),\n  renderChip(props) {\n    if (!props) {\n      return null;\n    }\n\n    const { disabled, value, label, ...rest } = props;\n    return (\n      <Chip value={value} removable={!disabled} {...rest}>\n        {label}\n      </Chip>\n    );\n  },\n};\n\nexport const ChipsInputBase = <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => {\n  const propsWithDefault = { ...chipsInputDefaultProps, ...props };\n  const {\n    style,\n    className,\n    getRootRef,\n    value,\n    onChange,\n    onInputChange,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    children,\n    inputValue,\n    getRef,\n    placeholder,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n    renderChip,\n    inputAriaLabel,\n    ...restProps\n  } = propsWithDefault;\n  const { sizeY } = useAdaptivity();\n\n  const [focused, setFocused] = React.useState(false);\n  const { fieldValue, addOptionFromInput, removeOption, selectedOptions, handleInputChange } =\n    useChipsInput(propsWithDefault);\n  const inputRef = useExternRef(getRef);\n\n  const isDisabled = restProps.disabled || restProps.readOnly;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    onKeyDown!(e);\n\n    if (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {\n      removeOption(getOptionValue!(selectedOptions[selectedOptions.length - 1]));\n      e.preventDefault();\n    }\n\n    if (e.key === 'Enter' && !e.defaultPrevented && fieldValue) {\n      addOptionFromInput();\n      e.preventDefault();\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (focused) {\n      setFocused(false);\n    }\n    onBlur!(e);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!focused) {\n      setFocused(true);\n    }\n    onFocus!(e);\n  };\n\n  const handleChipRemove = (_: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n    if (value !== undefined) {\n      removeOption(value);\n    }\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (inputRef?.current !== null && !focused) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div\n      onClick={handleClick}\n      role=\"presentation\"\n      style={style}\n      className={classNames(\n        styles['ChipsInputBase'],\n        sizeY === SizeType.COMPACT && styles['ChipsInputBase--sizeY-compact'],\n        !selectedOptions.length && styles['ChipsInputBase--hasPlaceholder'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {selectedOptions.map((option: Option) => {\n        const value = getOptionValue!(option);\n        const label = getOptionLabel!(option);\n\n        return (\n          <React.Fragment key={`${typeof value}-${value}`}>\n            {renderChip!({\n              option,\n              value,\n              label,\n              onRemove: handleChipRemove,\n              disabled: Boolean(restProps.disabled),\n              className: styles['ChipsInputBase__chip'],\n            })}\n          </React.Fragment>\n        );\n      })}\n      <label className={styles['ChipsInputBase__label']} aria-label={inputAriaLabel}>\n        <input\n          type=\"text\"\n          autoCapitalize=\"none\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          aria-autocomplete=\"list\"\n          className={styles['ChipsInputBase__el']}\n          {...restProps}\n          ref={inputRef}\n          value={fieldValue}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={selectedOptions.length ? undefined : placeholder}\n        />\n      </label>\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useChipsInput","useExternRef","SizeType","Chip","styles","chipsInputDefaultProps","onChange","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","removable","ChipsInputBase","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","focused","setFocused","useState","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","div","onClick","role","COMPACT","ref","map","Fragment","onRemove","Boolean","aria-label","input","type","autoCapitalize","autoComplete","autoCorrect","spellCheck","aria-autocomplete"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useChipsInput } from '../../hooks/useChipsInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { Chip, ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport styles from './ChipsInputBase.module.css';\n\nexport interface ChipsInputBaseProps<Option extends ChipOption>\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign {\n  value: Option[];\n  inputValue?: string;\n  onChange?: (o: Option[]) => void;\n  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n  getOptionValue?: (o?: Option) => ChipValue;\n  getOptionLabel?: (o?: Option) => string;\n  getNewOptionData?: (v?: ChipValue, l?: string) => Option;\n  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n  inputAriaLabel?: string;\n  /**\n   * Добавляет значение в список на событие `onBlur`\n   */\n  addOnBlur?: boolean;\n}\n\nexport const chipsInputDefaultProps: ChipsInputBaseProps<any> = {\n  onChange: noop,\n  onInputChange: noop,\n  onKeyDown: noop,\n  onBlur: noop,\n  onFocus: noop,\n  value: [],\n  inputValue: '',\n  inputAriaLabel: 'Введите ваше значение...',\n  getOptionValue: (option) => option.value,\n  getOptionLabel: (option) => option.label,\n  getNewOptionData: (_, label) => ({\n    value: label,\n    label,\n  }),\n  renderChip(props) {\n    if (!props) {\n      return null;\n    }\n\n    const { disabled, value, label, ...rest } = props;\n    return (\n      <Chip value={value} removable={!disabled} {...rest}>\n        {label}\n      </Chip>\n    );\n  },\n  addOnBlur: false,\n};\n\nexport const ChipsInputBase = <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => {\n  const propsWithDefault = { ...chipsInputDefaultProps, ...props };\n  const {\n    style,\n    className,\n    getRootRef,\n    value,\n    onChange,\n    onInputChange,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    children,\n    inputValue,\n    getRef,\n    placeholder,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n    renderChip,\n    inputAriaLabel,\n    addOnBlur,\n    ...restProps\n  } = propsWithDefault;\n  const { sizeY } = useAdaptivity();\n\n  const [focused, setFocused] = React.useState(false);\n  const { fieldValue, addOptionFromInput, removeOption, selectedOptions, handleInputChange } =\n    useChipsInput(propsWithDefault);\n  const inputRef = useExternRef(getRef);\n\n  const isDisabled = restProps.disabled || restProps.readOnly;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    onKeyDown!(e);\n\n    if (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {\n      removeOption(getOptionValue!(selectedOptions[selectedOptions.length - 1]));\n      e.preventDefault();\n    }\n\n    if (e.key === 'Enter' && !e.defaultPrevented && fieldValue) {\n      addOptionFromInput();\n      e.preventDefault();\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (focused) {\n      setFocused(false);\n    }\n    onBlur!(e);\n\n    if (addOnBlur && !e.defaultPrevented) {\n      addOptionFromInput();\n    }\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!focused) {\n      setFocused(true);\n    }\n    onFocus!(e);\n  };\n\n  const handleChipRemove = (_: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n    if (value !== undefined) {\n      removeOption(value);\n    }\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (inputRef?.current !== null && !focused) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div\n      onClick={handleClick}\n      role=\"presentation\"\n      style={style}\n      className={classNames(\n        styles['ChipsInputBase'],\n        sizeY === SizeType.COMPACT && styles['ChipsInputBase--sizeY-compact'],\n        !selectedOptions.length && styles['ChipsInputBase--hasPlaceholder'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {selectedOptions.map((option: Option) => {\n        const value = getOptionValue!(option);\n        const label = getOptionLabel!(option);\n\n        return (\n          <React.Fragment key={`${typeof value}-${value}`}>\n            {renderChip!({\n              option,\n              value,\n              label,\n              onRemove: handleChipRemove,\n              disabled: Boolean(restProps.disabled),\n              className: styles['ChipsInputBase__chip'],\n            })}\n          </React.Fragment>\n        );\n      })}\n      <label className={styles['ChipsInputBase__label']} aria-label={inputAriaLabel}>\n        <input\n          type=\"text\"\n          autoCapitalize=\"none\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          aria-autocomplete=\"list\"\n          className={styles['ChipsInputBase__el']}\n          {...restProps}\n          ref={inputRef}\n          value={fieldValue}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={selectedOptions.length ? undefined : placeholder}\n        />\n      </label>\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivity","useChipsInput","useExternRef","SizeType","Chip","styles","chipsInputDefaultProps","onChange","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","removable","addOnBlur","ChipsInputBase","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","focused","setFocused","useState","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","div","onClick","role","COMPACT","ref","map","Fragment","onRemove","Boolean","aria-label","input","type","autoCapitalize","autoComplete","autoCorrect","spellCheck","aria-autocomplete"],"mappings":"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"}

package/dist/cssm/components/ChipsSelect/ChipsSelect.d.ts

@@ -41,6 +41,10 @@ export interface ChipsSelectProps<Option extends ChipOption> extends Omit<ChipsI
      * Иконка раскрывающегося списка
      */
     icon?: React.ReactNode;
+    /**
+     * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)
+     */
+    addOnBlur?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsSelect

package/dist/cssm/components/ChipsSelect/ChipsSelect.js

@@ -37,18 +37,25 @@ const chipsSelectDefaultProps = {
         ...chipsSelectDefaultProps,
         ...props
     };
-    const { style , onFocus , onKeyDown , className , fetching , renderOption , emptyText , getRef , getRootRef , disabled , placeholder , tabIndex , getOptionValue , getOptionLabel , showSelected , getNewOptionData , renderChip , popupDirection , creatable , filterFn , inputValue , creatableText , closeAfterSelect , onChangeStart , before , icon , options , fixDropdownWidth , forceDropdownPortal , ...restProps } = propsWithDefault;
-    const { document  } = useDOM();
+    const { style, onFocus, onBlur, onKeyDown, className, fetching, renderOption, emptyText, getRef, getRootRef, disabled, placeholder, tabIndex, getOptionValue, getOptionLabel, showSelected, getNewOptionData, renderChip, popupDirection, creatable, filterFn, inputValue, creatableText, closeAfterSelect, onChangeStart, before, icon, options, fixDropdownWidth, forceDropdownPortal, ...restProps } = propsWithDefault;
+    const { document } = useDOM();
     const [popperPlacement, setPopperPlacement] = React.useState(undefined);
     const scrollBoxRef = React.useRef(null);
     const rootRef = useExternRef(getRef);
-    const { fieldValue , selectedOptions =[] , opened , setOpened , addOptionFromInput , filteredOptions , addOption , handleInputChange , clearInput , focusedOption , setFocusedOption , focusedOptionIndex , setFocusedOptionIndex  } = useChipsSelect(propsWithDefault);
+    const { fieldValue, selectedOptions = [], opened, setOpened, addOptionFromInput, filteredOptions, addOption, handleInputChange, clearInput, focusedOption, setFocusedOption, focusedOptionIndex, setFocusedOptionIndex } = useChipsSelect(propsWithDefault);
     const showCreatable = Boolean(creatable && creatableText && !filteredOptions.length && fieldValue);
     const handleFocus = (e)=>{
         setOpened(true);
         setFocusedOptionIndex(null);
         onFocus(e);
     };
+    const handleBlur = (e)=>{
+        onBlur(e);
+        // Не добавляем значение, если его нужно выбрать строго из списка
+        if (!e.defaultPrevented && !creatable) {
+            e.preventDefault();
+        }
+    };
     const handleClickOutside = (e)=>{
         if (e.target !== rootRef.current && !rootRef.current?.contains(e.target)) {
             setOpened(false);
@@ -74,7 +81,7 @@ const chipsSelectDefaultProps = {
         }
     };
     const focusOptionByIndex = (index, oldIndex)=>{
-        const { length  } = filteredOptions;
+        const { length } = filteredOptions;
         if (index < 0) {
             index = length - 1;
         } else if (index >= length) {
@@ -193,7 +200,7 @@ const chipsSelectDefaultProps = {
             className: styles['ChipsSelect__dropdown'],
             activeMode: "",
             hoverMode: "",
-            // TODO: add label customization
+            // TODO [>=6]: add label customization
             "aria-label": opened ? 'Скрыть' : 'Развернуть',
             onClick: toggleOpened
         }, icon ?? /*#__PURE__*/ React.createElement(DropdownIcon, {
@@ -211,6 +218,7 @@ const chipsSelectDefaultProps = {
         getOptionValue: getOptionValue,
         renderChip: renderChipWrapper,
         onFocus: handleFocus,
+        onBlur: handleBlur,
         onKeyDown: handleKeyDown,
         placeholder: placeholder,
         getRef: getRef,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useChipsSelect } from '../../hooks/useChipsSelect';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { ChipsInputProps } from '../ChipsInput/ChipsInput';\nimport { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n  CustomSelectOption,\n  CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './ChipsSelect.module.css';\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n  extends Omit<ChipsInputProps<Option>, 'after'> {\n  popupDirection?: 'top' | 'bottom';\n  options?: Option[];\n  filterFn?:\n    | false\n    | ((\n        value?: string,\n        option?: Option,\n        getOptionLabel?: Pick<ChipsInputProps<Option>, 'getOptionLabel'>['getOptionLabel'],\n      ) => boolean);\n  /**\n   * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n   */\n  creatable?: boolean;\n  /**\n   * Отрисовка лоадера вместо списка опций в выпадающем списке\n   */\n  fetching?: boolean;\n  renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n  /**\n   * Показывать или скрывать уже выбранные опции\n   */\n  showSelected?: boolean;\n  /**\n   * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n   */\n  creatableText?: string;\n  /**\n   * Текст который показывается если список опций пуст\n   */\n  emptyText?: string;\n  /**\n   * Событие срабатывающее перед onChange\n   */\n  onChangeStart?: (e: React.MouseEvent | React.KeyboardEvent, option: Option) => void;\n  /**\n   * Закрытие выпадающего списка после выбора элемента\n   */\n  closeAfterSelect?: boolean;\n  fixDropdownWidth?: boolean;\n  forceDropdownPortal?: boolean;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\ntype FocusActionType = 'next' | 'prev';\n\nconst FOCUS_ACTION_NEXT: FocusActionType = 'next';\nconst FOCUS_ACTION_PREV: FocusActionType = 'prev';\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n  ...chipsInputDefaultProps,\n  emptyText: 'Ничего не найдено',\n  creatableText: 'Создать значение',\n  onChangeStart: noop,\n  creatable: false,\n  fetching: false,\n  showSelected: true,\n  closeAfterSelect: true,\n  options: [],\n  filterFn: defaultFilterFn,\n  renderOption(props) {\n    return <CustomSelectOption {...props} />;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<Option>) => {\n  const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n  const {\n    style,\n    onFocus,\n    onKeyDown,\n    className,\n    fetching,\n    renderOption,\n    emptyText,\n    getRef,\n    getRootRef,\n    disabled,\n    placeholder,\n    tabIndex,\n    getOptionValue,\n    getOptionLabel,\n    showSelected,\n    getNewOptionData,\n    renderChip,\n    popupDirection,\n    creatable,\n    filterFn,\n    inputValue,\n    creatableText,\n    closeAfterSelect,\n    onChangeStart,\n    before,\n    icon,\n    options,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    ...restProps\n  } = propsWithDefault;\n\n  const { document } = useDOM();\n\n  const [popperPlacement, setPopperPlacement] = React.useState<Placement | undefined>(undefined);\n\n  const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n  const rootRef = useExternRef(getRef);\n  const {\n    fieldValue,\n    selectedOptions = [],\n    opened,\n    setOpened,\n    addOptionFromInput,\n    filteredOptions,\n    addOption,\n    handleInputChange,\n    clearInput,\n    focusedOption,\n    setFocusedOption,\n    focusedOptionIndex,\n    setFocusedOptionIndex,\n  } = useChipsSelect(propsWithDefault);\n\n  const showCreatable = Boolean(\n    creatable && creatableText && !filteredOptions.length && fieldValue,\n  );\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setOpened(true);\n    setFocusedOptionIndex(null);\n    onFocus!(e);\n  };\n\n  const handleClickOutside = (e: MouseEvent) => {\n    if (e.target !== rootRef.current && !rootRef.current?.contains(e.target as Node)) {\n      setOpened(false);\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = scrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n    const { length } = filteredOptions;\n\n    if (index < 0) {\n      index = length - 1;\n    } else if (index >= length) {\n      index = 0;\n    }\n\n    if (index === oldIndex) {\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      index = index + 1;\n    } else if (type === FOCUS_ACTION_PREV) {\n      index = index - 1;\n    }\n\n    focusOptionByIndex(index, focusedOptionIndex);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown!(e);\n\n    if (e.key === 'ArrowUp' && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n      }\n    }\n\n    if (e.key === 'ArrowDown' && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n      }\n    }\n\n    if (e.key === 'Enter' && !e.defaultPrevented && opened) {\n      if (focusedOptionIndex != null) {\n        const option = filteredOptions[focusedOptionIndex];\n\n        if (option) {\n          onChangeStart!(e, option);\n\n          if (!e.defaultPrevented) {\n            addOption(option);\n            setFocusedOptionIndex(null);\n            clearInput();\n            closeAfterSelect && setOpened(false);\n            e.preventDefault();\n          }\n        } else if (!creatable) {\n          e.preventDefault();\n        }\n      } else if (!creatable) {\n        e.preventDefault();\n      }\n    }\n\n    if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {\n      setOpened(false);\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n      setFocusedOption(filteredOptions[focusedOptionIndex]);\n    } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {\n      setFocusedOption(null);\n    }\n  }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n  useGlobalEventListener(document, 'click', handleClickOutside);\n\n  const renderChipWrapper = (renderChipProps: RenderChip<Option> | undefined) => {\n    if (renderChipProps === undefined) {\n      return null;\n    }\n    const onRemoveWrapper = (e: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      renderChipProps.onRemove?.(e, value);\n    };\n\n    return renderChip!({\n      ...renderChipProps,\n      onRemove: onRemoveWrapper,\n    });\n  };\n\n  const isPopperDirectionTop = popperPlacement?.includes('top');\n\n  const onPlacementChange = React.useCallback(\n    (placement?: Placement) => {\n      setPopperPlacement(placement);\n    },\n    [setPopperPlacement],\n  );\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const toggleOpened = () => {\n    setOpened((prevOpened) => !prevOpened);\n  };\n\n  return (\n    <>\n      <FormField\n        getRootRef={rootRef}\n        style={style}\n        className={classNames(\n          styles['ChipsSelect'],\n          opened &&\n            (isPopperDirectionTop\n              ? styles['ChipsSelect--pop-up']\n              : styles['ChipsSelect--pop-down']),\n          className,\n        )}\n        disabled={disabled}\n        role=\"application\"\n        aria-disabled={disabled}\n        aria-readonly={restProps.readOnly}\n        after={\n          <IconButton\n            className={styles['ChipsSelect__dropdown']}\n            activeMode=\"\"\n            hoverMode=\"\"\n            // TODO: add label customization\n            aria-label={opened ? 'Скрыть' : 'Развернуть'}\n            onClick={toggleOpened}\n          >\n            {icon ?? <DropdownIcon className={styles['ChipsSelect__icon']} opened={opened} />}\n          </IconButton>\n        }\n        before={before}\n      >\n        <ChipsInputBase\n          {...restProps}\n          tabIndex={tabIndex}\n          value={selectedOptions}\n          inputValue={fieldValue}\n          getNewOptionData={getNewOptionData}\n          getOptionLabel={getOptionLabel}\n          getOptionValue={getOptionValue}\n          renderChip={renderChipWrapper}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          getRef={getRef}\n          disabled={disabled}\n          onInputChange={handleInputChange}\n        />\n      </FormField>\n      {opened && (\n        <CustomSelectDropdown\n          targetRef={rootRef}\n          placement={popupDirection}\n          scrollBoxRef={scrollBoxRef}\n          onPlacementChange={onPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          sameWidth={fixDropdownWidth}\n          forcePortal={forceDropdownPortal}\n        >\n          {showCreatable && (\n            <CustomSelectOption\n              hovered={focusedOptionIndex === 0}\n              onMouseDown={addOptionFromInput}\n              onMouseEnter={() => setFocusedOptionIndex(0)}\n            >\n              {creatableText}\n            </CustomSelectOption>\n          )}\n          {!filteredOptions?.length && !showCreatable && emptyText ? (\n            <Footnote className={styles['ChipsSelect__empty']}>{emptyText}</Footnote>\n          ) : (\n            filteredOptions.map((option: Option, index: number) => {\n              const label = getOptionLabel!(option);\n              const hovered =\n                focusedOption && getOptionValue!(option) === getOptionValue!(focusedOption);\n              const selected = selectedOptions.find((selectedOption: Option) => {\n                return getOptionValue!(selectedOption) === getOptionValue!(option);\n              });\n              const value = getOptionValue!(option);\n\n              return (\n                <React.Fragment key={`${typeof value}-${value}`}>\n                  {renderOption!({\n                    option,\n                    hovered: Boolean(hovered),\n                    children: label,\n                    selected: !!selected,\n                    getRootRef: (e) => {\n                      if (e) {\n                        return (chipsSelectOptions[index] = e);\n                      }\n                      return undefined;\n                    },\n                    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n                      onChangeStart?.(e, option);\n\n                      if (!e.defaultPrevented) {\n                        closeAfterSelect && setOpened(false);\n                        addOption(option);\n                        clearInput();\n                      }\n                    },\n                    onMouseEnter: () => setFocusedOptionIndex(index),\n                  })}\n                </React.Fragment>\n              );\n            })\n          )}\n        </CustomSelectDropdown>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","noop","useChipsSelect","useExternRef","useGlobalEventListener","useDOM","defaultFilterFn","ChipsInputBase","chipsInputDefaultProps","CustomSelectDropdown","CustomSelectOption","DropdownIcon","FormField","IconButton","Footnote","styles","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","props","ChipsSelect","propsWithDefault","style","onFocus","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","popperPlacement","setPopperPlacement","useState","undefined","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","defaultPrevented","preventDefault","option","includes","useEffect","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","role","aria-disabled","aria-readonly","readOnly","after","activeMode","hoverMode","aria-label","onClick","onInputChange","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useChipsSelect } from '../../hooks/useChipsSelect';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport type { Placement } from '../../lib/floating';\nimport { defaultFilterFn } from '../../lib/select';\nimport { ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { ChipsInputProps } from '../ChipsInput/ChipsInput';\nimport { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';\nimport { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';\nimport {\n  CustomSelectOption,\n  CustomSelectOptionProps,\n} from '../CustomSelectOption/CustomSelectOption';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './ChipsSelect.module.css';\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n  extends Omit<ChipsInputProps<Option>, 'after'> {\n  popupDirection?: 'top' | 'bottom';\n  options?: Option[];\n  filterFn?:\n    | false\n    | ((\n        value?: string,\n        option?: Option,\n        getOptionLabel?: Pick<ChipsInputProps<Option>, 'getOptionLabel'>['getOptionLabel'],\n      ) => boolean);\n  /**\n   * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n   */\n  creatable?: boolean;\n  /**\n   * Отрисовка лоадера вместо списка опций в выпадающем списке\n   */\n  fetching?: boolean;\n  renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n  /**\n   * Показывать или скрывать уже выбранные опции\n   */\n  showSelected?: boolean;\n  /**\n   * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n   */\n  creatableText?: string;\n  /**\n   * Текст который показывается если список опций пуст\n   */\n  emptyText?: string;\n  /**\n   * Событие срабатывающее перед onChange\n   */\n  onChangeStart?: (e: React.MouseEvent | React.KeyboardEvent, option: Option) => void;\n  /**\n   * Закрытие выпадающего списка после выбора элемента\n   */\n  closeAfterSelect?: boolean;\n  fixDropdownWidth?: boolean;\n  forceDropdownPortal?: boolean;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)\n   */\n  addOnBlur?: boolean;\n}\n\ntype FocusActionType = 'next' | 'prev';\n\nconst FOCUS_ACTION_NEXT: FocusActionType = 'next';\nconst FOCUS_ACTION_PREV: FocusActionType = 'prev';\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n  ...chipsInputDefaultProps,\n  emptyText: 'Ничего не найдено',\n  creatableText: 'Создать значение',\n  onChangeStart: noop,\n  creatable: false,\n  fetching: false,\n  showSelected: true,\n  closeAfterSelect: true,\n  options: [],\n  filterFn: defaultFilterFn,\n  renderOption(props) {\n    return <CustomSelectOption {...props} />;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<Option>) => {\n  const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n  const {\n    style,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    className,\n    fetching,\n    renderOption,\n    emptyText,\n    getRef,\n    getRootRef,\n    disabled,\n    placeholder,\n    tabIndex,\n    getOptionValue,\n    getOptionLabel,\n    showSelected,\n    getNewOptionData,\n    renderChip,\n    popupDirection,\n    creatable,\n    filterFn,\n    inputValue,\n    creatableText,\n    closeAfterSelect,\n    onChangeStart,\n    before,\n    icon,\n    options,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    ...restProps\n  } = propsWithDefault;\n\n  const { document } = useDOM();\n\n  const [popperPlacement, setPopperPlacement] = React.useState<Placement | undefined>(undefined);\n\n  const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n  const rootRef = useExternRef(getRef);\n  const {\n    fieldValue,\n    selectedOptions = [],\n    opened,\n    setOpened,\n    addOptionFromInput,\n    filteredOptions,\n    addOption,\n    handleInputChange,\n    clearInput,\n    focusedOption,\n    setFocusedOption,\n    focusedOptionIndex,\n    setFocusedOptionIndex,\n  } = useChipsSelect(propsWithDefault);\n\n  const showCreatable = Boolean(\n    creatable && creatableText && !filteredOptions.length && fieldValue,\n  );\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setOpened(true);\n    setFocusedOptionIndex(null);\n    onFocus!(e);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    onBlur!(e);\n\n    // Не добавляем значение, если его нужно выбрать строго из списка\n    if (!e.defaultPrevented && !creatable) {\n      e.preventDefault();\n    }\n  };\n\n  const handleClickOutside = (e: MouseEvent) => {\n    if (e.target !== rootRef.current && !rootRef.current?.contains(e.target as Node)) {\n      setOpened(false);\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = scrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number | null) => {\n    const { length } = filteredOptions;\n\n    if (index < 0) {\n      index = length - 1;\n    } else if (index >= length) {\n      index = 0;\n    }\n\n    if (index === oldIndex) {\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      index = index + 1;\n    } else if (type === FOCUS_ACTION_PREV) {\n      index = index - 1;\n    }\n\n    focusOptionByIndex(index, focusedOptionIndex);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown!(e);\n\n    if (e.key === 'ArrowUp' && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n      }\n    }\n\n    if (e.key === 'ArrowDown' && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n      }\n    }\n\n    if (e.key === 'Enter' && !e.defaultPrevented && opened) {\n      if (focusedOptionIndex != null) {\n        const option = filteredOptions[focusedOptionIndex];\n\n        if (option) {\n          onChangeStart!(e, option);\n\n          if (!e.defaultPrevented) {\n            addOption(option);\n            setFocusedOptionIndex(null);\n            clearInput();\n            closeAfterSelect && setOpened(false);\n            e.preventDefault();\n          }\n        } else if (!creatable) {\n          e.preventDefault();\n        }\n      } else if (!creatable) {\n        e.preventDefault();\n      }\n    }\n\n    if (['Escape', 'Tab'].includes(e.key) && !e.defaultPrevented && opened) {\n      setOpened(false);\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n      setFocusedOption(filteredOptions[focusedOptionIndex]);\n    } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {\n      setFocusedOption(null);\n    }\n  }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n  useGlobalEventListener(document, 'click', handleClickOutside);\n\n  const renderChipWrapper = (renderChipProps: RenderChip<Option> | undefined) => {\n    if (renderChipProps === undefined) {\n      return null;\n    }\n    const onRemoveWrapper = (e: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      renderChipProps.onRemove?.(e, value);\n    };\n\n    return renderChip!({\n      ...renderChipProps,\n      onRemove: onRemoveWrapper,\n    });\n  };\n\n  const isPopperDirectionTop = popperPlacement?.includes('top');\n\n  const onPlacementChange = React.useCallback(\n    (placement?: Placement) => {\n      setPopperPlacement(placement);\n    },\n    [setPopperPlacement],\n  );\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const toggleOpened = () => {\n    setOpened((prevOpened) => !prevOpened);\n  };\n\n  return (\n    <>\n      <FormField\n        getRootRef={rootRef}\n        style={style}\n        className={classNames(\n          styles['ChipsSelect'],\n          opened &&\n            (isPopperDirectionTop\n              ? styles['ChipsSelect--pop-up']\n              : styles['ChipsSelect--pop-down']),\n          className,\n        )}\n        disabled={disabled}\n        role=\"application\"\n        aria-disabled={disabled}\n        aria-readonly={restProps.readOnly}\n        after={\n          <IconButton\n            className={styles['ChipsSelect__dropdown']}\n            activeMode=\"\"\n            hoverMode=\"\"\n            // TODO [>=6]: add label customization\n            aria-label={opened ? 'Скрыть' : 'Развернуть'}\n            onClick={toggleOpened}\n          >\n            {icon ?? <DropdownIcon className={styles['ChipsSelect__icon']} opened={opened} />}\n          </IconButton>\n        }\n        before={before}\n      >\n        <ChipsInputBase\n          {...restProps}\n          tabIndex={tabIndex}\n          value={selectedOptions}\n          inputValue={fieldValue}\n          getNewOptionData={getNewOptionData}\n          getOptionLabel={getOptionLabel}\n          getOptionValue={getOptionValue}\n          renderChip={renderChipWrapper}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          getRef={getRef}\n          disabled={disabled}\n          onInputChange={handleInputChange}\n        />\n      </FormField>\n      {opened && (\n        <CustomSelectDropdown\n          targetRef={rootRef}\n          placement={popupDirection}\n          scrollBoxRef={scrollBoxRef}\n          onPlacementChange={onPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          sameWidth={fixDropdownWidth}\n          forcePortal={forceDropdownPortal}\n        >\n          {showCreatable && (\n            <CustomSelectOption\n              hovered={focusedOptionIndex === 0}\n              onMouseDown={addOptionFromInput}\n              onMouseEnter={() => setFocusedOptionIndex(0)}\n            >\n              {creatableText}\n            </CustomSelectOption>\n          )}\n          {!filteredOptions?.length && !showCreatable && emptyText ? (\n            <Footnote className={styles['ChipsSelect__empty']}>{emptyText}</Footnote>\n          ) : (\n            filteredOptions.map((option: Option, index: number) => {\n              const label = getOptionLabel!(option);\n              const hovered =\n                focusedOption && getOptionValue!(option) === getOptionValue!(focusedOption);\n              const selected = selectedOptions.find((selectedOption: Option) => {\n                return getOptionValue!(selectedOption) === getOptionValue!(option);\n              });\n              const value = getOptionValue!(option);\n\n              return (\n                <React.Fragment key={`${typeof value}-${value}`}>\n                  {renderOption!({\n                    option,\n                    hovered: Boolean(hovered),\n                    children: label,\n                    selected: !!selected,\n                    getRootRef: (e) => {\n                      if (e) {\n                        return (chipsSelectOptions[index] = e);\n                      }\n                      return undefined;\n                    },\n                    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n                      onChangeStart?.(e, option);\n\n                      if (!e.defaultPrevented) {\n                        closeAfterSelect && setOpened(false);\n                        addOption(option);\n                        clearInput();\n                      }\n                    },\n                    onMouseEnter: () => setFocusedOptionIndex(index),\n                  })}\n                </React.Fragment>\n              );\n            })\n          )}\n        </CustomSelectDropdown>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","noop","useChipsSelect","useExternRef","useGlobalEventListener","useDOM","defaultFilterFn","ChipsInputBase","chipsInputDefaultProps","CustomSelectDropdown","CustomSelectOption","DropdownIcon","FormField","IconButton","Footnote","styles","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","props","ChipsSelect","propsWithDefault","style","onFocus","onBlur","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","icon","fixDropdownWidth","forceDropdownPortal","restProps","document","popperPlacement","setPopperPlacement","useState","undefined","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleBlur","defaultPrevented","preventDefault","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","option","includes","useEffect","renderChipWrapper","renderChipProps","onRemoveWrapper","value","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","toggleOpened","prevOpened","role","aria-disabled","aria-readonly","readOnly","after","activeMode","hoverMode","aria-label","onClick","onInputChange","targetRef","onMouseLeave","sameWidth","forcePortal","hovered","onMouseDown","onMouseEnter","map","label","selected","find","selectedOption","Fragment","children"],"mappings":"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"}

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

@@ -11,12 +11,12 @@ import { ConfigProviderContext, useConfigProvider } from './ConfigProviderContex
  * @see https://vkcom.github.io/VKUI/#/ConfigProvider
  */ export const ConfigProvider = (props)=>{
     const parentConfig = useConfigProvider();
-    const { children , webviewType , isWebView , transitionMotionEnabled , platform , locale , appearance: appearanceProp , onDetectAppearanceByBridge =noop  } = {
+    const { children, webviewType, isWebView, transitionMotionEnabled, platform, locale, appearance: appearanceProp, onDetectAppearanceByBridge = noop } = {
         ...parentConfig,
         ...props
     };
     const appearance = useAutoDetectAppearance(appearanceProp, onDetectAppearanceByBridge);
-    const { document  } = useDOM();
+    const { document } = useDOM();
     useIsomorphicLayoutEffect(()=>{
         const VKUITokensClassName = generateVKUITokensClassName(platform, appearance);
         // eslint-disable-next-line no-restricted-properties

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { generateVKUITokensClassName } from '../../helpers/generateVKUITokensClassName';\nimport { useAutoDetectAppearance } from '../../hooks/useAutoDetectAppearance';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useDOM } from '../../lib/dom';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  useConfigProvider,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n  onDetectAppearanceByBridge?: () => void;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (props: ConfigProviderProps) => {\n  const parentConfig = useConfigProvider();\n\n  const {\n    children,\n    webviewType,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    appearance: appearanceProp,\n    onDetectAppearanceByBridge = noop,\n  } = {\n    ...parentConfig,\n    ...props,\n  };\n\n  const appearance = useAutoDetectAppearance(appearanceProp, onDetectAppearanceByBridge);\n\n  const { document } = useDOM();\n\n  useIsomorphicLayoutEffect(() => {\n    const VKUITokensClassName = generateVKUITokensClassName(platform, appearance);\n\n    // eslint-disable-next-line no-restricted-properties\n    document!.body.classList.add(VKUITokensClassName);\n\n    return () => {\n      // eslint-disable-next-line no-restricted-properties\n      document!.body.classList.remove(VKUITokensClassName);\n    };\n  }, [platform, appearance]);\n\n  const configContext = useObjectMemo({\n    webviewType,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    appearance,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"names":["React","noop","generateVKUITokensClassName","useAutoDetectAppearance","useObjectMemo","useDOM","TokensClassProvider","useIsomorphicLayoutEffect","ConfigProviderContext","useConfigProvider","ConfigProvider","props","parentConfig","children","webviewType","isWebView","transitionMotionEnabled","platform","locale","appearance","appearanceProp","onDetectAppearanceByBridge","document","VKUITokensClassName","body","classList","add","remove","configContext","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,2BAA2B,QAAQ,4CAA4C;AACxF,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SACEC,qBAAqB,EAErBC,iBAAiB,QACZ,0BAA0B;AAOjC;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,eAAeH;IAErB,MAAM,EACJI,SAAQ,EACRC,YAAW,EACXC,UAAS,EACTC,wBAAuB,EACvBC,SAAQ,EACRC,OAAM,EACNC,YAAYC,eAAc,EAC1BC,4BAA6BpB,KAAI,EAClC,GAAG;QACF,GAAGW,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,MAAMQ,aAAahB,wBAAwBiB,gBAAgBC;IAE3D,MAAM,EAAEC,SAAQ,EAAE,GAAGjB;IAErBE,0BAA0B;QACxB,MAAMgB,sBAAsBrB,4BAA4Be,UAAUE;QAElE,oDAAoD;QACpDG,SAAUE,KAAKC,UAAUC,IAAIH;QAE7B,OAAO;YACL,oDAAoD;YACpDD,SAAUE,KAAKC,UAAUE,OAAOJ;QAClC;IACF,GAAG;QAACN;QAAUE;KAAW;IAEzB,MAAMS,gBAAgBxB,cAAc;QAClCU;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,oBAACX,sBAAsBqB;QAASC,OAAOF;qBACrC,oBAACtB;QAAoBW,UAAUA;QAAUE,YAAYA;OAClDN;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { generateVKUITokensClassName } from '../../helpers/generateVKUITokensClassName';\nimport { useAutoDetectAppearance } from '../../hooks/useAutoDetectAppearance';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useDOM } from '../../lib/dom';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  useConfigProvider,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {\n  onDetectAppearanceByBridge?: () => void;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (props: ConfigProviderProps) => {\n  const parentConfig = useConfigProvider();\n\n  const {\n    children,\n    webviewType,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    appearance: appearanceProp,\n    onDetectAppearanceByBridge = noop,\n  } = {\n    ...parentConfig,\n    ...props,\n  };\n\n  const appearance = useAutoDetectAppearance(appearanceProp, onDetectAppearanceByBridge);\n\n  const { document } = useDOM();\n\n  useIsomorphicLayoutEffect(() => {\n    const VKUITokensClassName = generateVKUITokensClassName(platform, appearance);\n\n    // eslint-disable-next-line no-restricted-properties\n    document!.body.classList.add(VKUITokensClassName);\n\n    return () => {\n      // eslint-disable-next-line no-restricted-properties\n      document!.body.classList.remove(VKUITokensClassName);\n    };\n  }, [platform, appearance]);\n\n  const configContext = useObjectMemo({\n    webviewType,\n    isWebView,\n    transitionMotionEnabled,\n    platform,\n    locale,\n    appearance,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <TokensClassProvider platform={platform} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"names":["React","noop","generateVKUITokensClassName","useAutoDetectAppearance","useObjectMemo","useDOM","TokensClassProvider","useIsomorphicLayoutEffect","ConfigProviderContext","useConfigProvider","ConfigProvider","props","parentConfig","children","webviewType","isWebView","transitionMotionEnabled","platform","locale","appearance","appearanceProp","onDetectAppearanceByBridge","document","VKUITokensClassName","body","classList","add","remove","configContext","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,2BAA2B,QAAQ,4CAA4C;AACxF,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SACEC,qBAAqB,EAErBC,iBAAiB,QACZ,0BAA0B;AAOjC;;CAEC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAMC,eAAeH;IAErB,MAAM,EACJI,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,uBAAuB,EACvBC,QAAQ,EACRC,MAAM,EACNC,YAAYC,cAAc,EAC1BC,6BAA6BpB,IAAI,EAClC,GAAG;QACF,GAAGW,YAAY;QACf,GAAGD,KAAK;IACV;IAEA,MAAMQ,aAAahB,wBAAwBiB,gBAAgBC;IAE3D,MAAM,EAAEC,QAAQ,EAAE,GAAGjB;IAErBE,0BAA0B;QACxB,MAAMgB,sBAAsBrB,4BAA4Be,UAAUE;QAElE,oDAAoD;QACpDG,SAAUE,IAAI,CAACC,SAAS,CAACC,GAAG,CAACH;QAE7B,OAAO;YACL,oDAAoD;YACpDD,SAAUE,IAAI,CAACC,SAAS,CAACE,MAAM,CAACJ;QAClC;IACF,GAAG;QAACN;QAAUE;KAAW;IAEzB,MAAMS,gBAAgBxB,cAAc;QAClCU;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,oBAACX,sBAAsBqB,QAAQ;QAACC,OAAOF;qBACrC,oBAACtB;QAAoBW,UAAUA;QAAUE,YAAYA;OAClDN;AAIT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport vkBridge, { AppearanceType } from '@vkontakte/vk-bridge';\nimport { platform, PlatformType } from '../../lib/platform';\n\nexport enum WebviewType {\n  VKAPPS = 'vkapps',\n  INTERNAL = 'internal',\n}\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере\n   */\n  isWebView: boolean;\n  /**\n   * Тип вебвью.<br>\n   * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)\n   */\n  webviewType: WebviewType.INTERNAL | WebviewType.VKAPPS;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  appearance: AppearanceType | undefined;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  locale: string;\n}\n\nexport const ConfigProviderContext = React.createContext<ConfigProviderContextInterface>({\n  webviewType: WebviewType.VKAPPS,\n  isWebView: vkBridge.isWebView(),\n  transitionMotionEnabled: true,\n  platform: platform(),\n  appearance: undefined, // undefined обозначает что тема должна определиться автоматически\n  locale: 'ru',\n});\n\nexport const useConfigProvider = () => React.useContext(ConfigProviderContext);\n"],"names":["React","vkBridge","platform","WebviewType","VKAPPS","INTERNAL","ConfigProviderContext","createContext","webviewType","isWebView","transitionMotionEnabled","appearance","undefined","locale","useConfigProvider","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,OAAOC,cAAkC,uBAAuB;AAChE,SAASC,QAAQ,QAAsB,qBAAqB;WAErD;UAAKC,WAAW;IAAXA,YACVC,YAAS;IADCD,YAEVE,cAAW;GAFDF,gBAAAA;AAiCZ,OAAO,MAAMG,sCAAwBN,MAAMO,cAA8C;IACvFC,aAAaL,YAAYC;IACzBK,WAAWR,SAASQ;IACpBC,yBAAyB;IACzBR,UAAUA;IACVS,YAAYC;IACZC,QAAQ;AACV,GAAG;AAEH,OAAO,MAAMC,oBAAoB,IAAMd,MAAMe,WAAWT,uBAAuB"}
+{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport vkBridge, { AppearanceType } from '@vkontakte/vk-bridge';\nimport { platform, PlatformType } from '../../lib/platform';\n\nexport enum WebviewType {\n  VKAPPS = 'vkapps',\n  INTERNAL = 'internal',\n}\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере\n   */\n  isWebView: boolean;\n  /**\n   * Тип вебвью.<br>\n   * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)\n   */\n  webviewType: WebviewType.INTERNAL | WebviewType.VKAPPS;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  appearance: AppearanceType | undefined;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  /**\n   * Строка с языковой меткой BCP 47\n   */\n  locale: string;\n}\n\nexport const ConfigProviderContext = React.createContext<ConfigProviderContextInterface>({\n  webviewType: WebviewType.VKAPPS,\n  isWebView: vkBridge.isWebView(),\n  transitionMotionEnabled: true,\n  platform: platform(),\n  appearance: undefined, // undefined обозначает что тема должна определиться автоматически\n  locale: 'ru',\n});\n\nexport const useConfigProvider = () => React.useContext(ConfigProviderContext);\n"],"names":["React","vkBridge","platform","WebviewType","VKAPPS","INTERNAL","ConfigProviderContext","createContext","webviewType","isWebView","transitionMotionEnabled","appearance","undefined","locale","useConfigProvider","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,OAAOC,cAAkC,uBAAuB;AAChE,SAASC,QAAQ,QAAsB,qBAAqB;WAErD;UAAKC,WAAW;IAAXA,YACVC,YAAS;IADCD,YAEVE,cAAW;GAFDF,gBAAAA;AAiCZ,OAAO,MAAMG,sCAAwBN,MAAMO,aAAa,CAAiC;IACvFC,aAAaL,YAAYC,MAAM;IAC/BK,WAAWR,SAASQ,SAAS;IAC7BC,yBAAyB;IACzBR,UAAUA;IACVS,YAAYC;IACZC,QAAQ;AACV,GAAG;AAEH,OAAO,MAAMC,oBAAoB,IAAMd,MAAMe,UAAU,CAACT,uBAAuB"}

package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.js

@@ -3,7 +3,7 @@ import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { ConfigProviderContext, useConfigProvider } from './ConfigProviderContext';
 /**
  * Компонент предназначен для перебивания одного из значений контекста
- */ export function ConfigProviderOverride({ children , ...contextValue }) {
+ */ export function ConfigProviderOverride({ children, ...contextValue }) {
     const parentConfig = useConfigProvider();
     const configContext = useObjectMemo({
         ...parentConfig,

package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"sourcesContent":["import React from 'react';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  useConfigProvider,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderOverrideProps extends Partial<ConfigProviderContextInterface> {\n  children: React.ReactNode;\n}\n\n/**\n * Компонент предназначен для перебивания одного из значений контекста\n */\nexport function ConfigProviderOverride({ children, ...contextValue }: ConfigProviderOverrideProps) {\n  const parentConfig = useConfigProvider();\n\n  const configContext = useObjectMemo({\n    ...parentConfig,\n    ...contextValue,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      {children}\n    </ConfigProviderContext.Provider>\n  );\n}\n"],"names":["React","useObjectMemo","ConfigProviderContext","useConfigProvider","ConfigProviderOverride","children","contextValue","parentConfig","configContext","Provider","value"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,qBAAqB,EAErBC,iBAAiB,QACZ,0BAA0B;AAMjC;;CAEC,GACD,OAAO,SAASC,uBAAuB,EAAEC,SAAQ,EAAE,GAAGC,cAA2C;IAC/F,MAAMC,eAAeJ;IAErB,MAAMK,gBAAgBP,cAAc;QAClC,GAAGM,YAAY;QACf,GAAGD,YAAY;IACjB;IAEA,qBACE,oBAACJ,sBAAsBO;QAASC,OAAOF;OACpCH;AAGP"}
+{"version":3,"sources":["../../../../src/components/ConfigProvider/ConfigProviderOverride.tsx"],"sourcesContent":["import React from 'react';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  useConfigProvider,\n} from './ConfigProviderContext';\n\nexport interface ConfigProviderOverrideProps extends Partial<ConfigProviderContextInterface> {\n  children: React.ReactNode;\n}\n\n/**\n * Компонент предназначен для перебивания одного из значений контекста\n */\nexport function ConfigProviderOverride({ children, ...contextValue }: ConfigProviderOverrideProps) {\n  const parentConfig = useConfigProvider();\n\n  const configContext = useObjectMemo({\n    ...parentConfig,\n    ...contextValue,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      {children}\n    </ConfigProviderContext.Provider>\n  );\n}\n"],"names":["React","useObjectMemo","ConfigProviderContext","useConfigProvider","ConfigProviderOverride","children","contextValue","parentConfig","configContext","Provider","value"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SACEC,qBAAqB,EAErBC,iBAAiB,QACZ,0BAA0B;AAMjC;;CAEC,GACD,OAAO,SAASC,uBAAuB,EAAEC,QAAQ,EAAE,GAAGC,cAA2C;IAC/F,MAAMC,eAAeJ;IAErB,MAAMK,gBAAgBP,cAAc;QAClC,GAAGM,YAAY;QACf,GAAGD,YAAY;IACjB;IAEA,qBACE,oBAACJ,sBAAsBO,QAAQ;QAACC,OAAOF;OACpCH;AAGP"}

package/dist/cssm/components/ContentCard/ContentCard.js

@@ -9,9 +9,9 @@ import { Text } from '../Typography/Text/Text';
 import styles from './ContentCard.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/ContentCard
- */ export const ContentCard = ({ subtitle , header , text , caption , // card props
-className , mode ='shadow' , style , getRootRef , // img props
-getRef , maxHeight , src , srcSet , alt ='' , width , height , crossOrigin , decoding , loading , referrerPolicy , sizes , useMap , hasHover =false , hasActive =false , ...restProps })=>{
+ */ export const ContentCard = ({ subtitle, header, text, caption, // card props
+className, mode = 'shadow', style, getRootRef, // img props
+getRef, maxHeight, src, srcSet, alt = '', width, height, crossOrigin, decoding, loading, referrerPolicy, sizes, useMap, hasHover = false, hasActive = false, ...restProps })=>{
     return /*#__PURE__*/ React.createElement(Card, {
         mode: mode,
         getRootRef: getRootRef,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Card, CardProps } from '../Card/Card';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    Omit<TappableProps, 'getRootRef' | 'crossOrigin'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком\n   */\n  subtitle?: React.ReactNode;\n  /**\n   Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   Текст\n   */\n  text?: React.ReactNode;\n  /**\n   Нижний текст\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения\n   */\n  maxHeight?: number;\n  mode?: CardProps['mode'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n  subtitle,\n  header,\n  text,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width,\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  hasHover = false,\n  hasActive = false,\n  ...restProps\n}: ContentCardProps) => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      style={style}\n      className={classNames(restProps.disabled && styles['ContentCard--disabled'], className)}\n    >\n      <Tappable\n        {...restProps}\n        disabled={restProps.disabled || (!restProps.onClick && !restProps.href)}\n        hasHover={hasHover}\n        hasActive={hasActive}\n        className={styles['ContentCard__tappable']}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles['ContentCard__img']}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            height={height}\n            style={{ maxHeight }}\n            width=\"100%\"\n          />\n        )}\n        <div className={styles['ContentCard__body']}>\n          {hasReactNode(subtitle) && (\n            <Caption\n              className={classNames(styles['ContentCard__text'], styles['ContentCard__subtitle'])}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {subtitle}\n            </Caption>\n          )}\n          {hasReactNode(header) && (\n            <Headline className={styles['ContentCard__text']} weight=\"2\" level=\"1\">\n              {header}\n            </Headline>\n          )}\n          {hasReactNode(text) && <Text className={styles['ContentCard__text']}>{text}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote\n              className={classNames(styles['ContentCard__text'], styles['ContentCard__caption'])}\n            >\n              {caption}\n            </Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Card","Tappable","Caption","Footnote","Headline","Text","styles","ContentCard","subtitle","header","text","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","hasHover","hasActive","restProps","disabled","onClick","href","img","ref","div","weight","level","caps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,IAAI,QAAmB,eAAe;AAC/C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,OAAOC,YAAY,2BAA2B;AA8B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,OAAM,EACNC,KAAI,EACJC,QAAO,EACP,aAAa;AACbC,UAAS,EACTC,MAAO,SAAQ,EACfC,MAAK,EACLC,WAAU,EACV,YAAY;AACZC,OAAM,EACNC,UAAS,EACTC,IAAG,EACHC,OAAM,EACNC,KAAM,GAAE,EACRC,MAAK,EACLC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,QAAO,EACPC,eAAc,EACdC,MAAK,EACLC,OAAM,EACNC,UAAW,MAAK,EAChBC,WAAY,MAAK,EACjB,GAAGC,WACc;IACjB,qBACE,oBAAC/B;QACCa,MAAMA;QACNE,YAAYA;QACZD,OAAOA;QACPF,WAAWd,WAAWiC,UAAUC,YAAY1B,MAAM,CAAC,wBAAwB,EAAEM;qBAE7E,oBAACX;QACE,GAAG8B,SAAS;QACbC,UAAUD,UAAUC,YAAa,CAACD,UAAUE,WAAW,CAACF,UAAUG;QAClEL,UAAUA;QACVC,WAAWA;QACXlB,WAAWN,MAAM,CAAC,wBAAwB;OAEzC,AAACY,CAAAA,OAAOC,MAAK,mBACZ,oBAACgB;QACCC,KAAKpB;QACLJ,WAAWN,MAAM,CAAC,mBAAmB;QACrCY,KAAKA;QACLC,QAAQA;QACRC,KAAKA;QACLG,aAAaA;QACbC,UAAUA;QACVC,SAASA;QACTC,gBAAgBA;QAChBC,OAAOA;QACPC,QAAQA;QACRN,QAAQA;QACRR,OAAO;YAAEG;QAAU;QACnBI,OAAM;sBAGV,oBAACgB;QAAIzB,WAAWN,MAAM,CAAC,oBAAoB;OACxCP,aAAaS,2BACZ,oBAACN;QACCU,WAAWd,WAAWQ,MAAM,CAAC,oBAAoB,EAAEA,MAAM,CAAC,wBAAwB;QAClFgC,QAAO;QACPC,OAAM;QACNC,MAAAA;OAEChC,WAGJT,aAAaU,yBACZ,oBAACL;QAASQ,WAAWN,MAAM,CAAC,oBAAoB;QAAEgC,QAAO;QAAIC,OAAM;OAChE9B,SAGJV,aAAaW,uBAAS,oBAACL;QAAKO,WAAWN,MAAM,CAAC,oBAAoB;OAAGI,OACrEX,aAAaY,0BACZ,oBAACR;QACCS,WAAWd,WAAWQ,MAAM,CAAC,oBAAoB,EAAEA,MAAM,CAAC,uBAAuB;OAEhFK;AAOf,EAAE"}
+{"version":3,"sources":["../../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Card, CardProps } from '../Card/Card';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ContentCard.module.css';\n\nexport interface ContentCardProps\n  extends HasRootRef<HTMLDivElement>,\n    Omit<TappableProps, 'getRootRef' | 'crossOrigin'>,\n    Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,\n    HasRef<HTMLImageElement> {\n  /**\n   Текст над заголовком\n   */\n  subtitle?: React.ReactNode;\n  /**\n   Заголовок\n   */\n  header?: React.ReactNode;\n  /**\n   Текст\n   */\n  text?: React.ReactNode;\n  /**\n   Нижний текст\n   */\n  caption?: React.ReactNode;\n  /**\n    Максимальная высота изображения\n   */\n  maxHeight?: number;\n  mode?: CardProps['mode'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ContentCard\n */\nexport const ContentCard = ({\n  subtitle,\n  header,\n  text,\n  caption,\n  // card props\n  className,\n  mode = 'shadow',\n  style,\n  getRootRef,\n  // img props\n  getRef,\n  maxHeight,\n  src,\n  srcSet,\n  alt = '',\n  width,\n  height,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  useMap,\n  hasHover = false,\n  hasActive = false,\n  ...restProps\n}: ContentCardProps) => {\n  return (\n    <Card\n      mode={mode}\n      getRootRef={getRootRef}\n      style={style}\n      className={classNames(restProps.disabled && styles['ContentCard--disabled'], className)}\n    >\n      <Tappable\n        {...restProps}\n        disabled={restProps.disabled || (!restProps.onClick && !restProps.href)}\n        hasHover={hasHover}\n        hasActive={hasActive}\n        className={styles['ContentCard__tappable']}\n      >\n        {(src || srcSet) && (\n          <img\n            ref={getRef}\n            className={styles['ContentCard__img']}\n            src={src}\n            srcSet={srcSet}\n            alt={alt}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            sizes={sizes}\n            useMap={useMap}\n            height={height}\n            style={{ maxHeight }}\n            width=\"100%\"\n          />\n        )}\n        <div className={styles['ContentCard__body']}>\n          {hasReactNode(subtitle) && (\n            <Caption\n              className={classNames(styles['ContentCard__text'], styles['ContentCard__subtitle'])}\n              weight=\"1\"\n              level=\"3\"\n              caps\n            >\n              {subtitle}\n            </Caption>\n          )}\n          {hasReactNode(header) && (\n            <Headline className={styles['ContentCard__text']} weight=\"2\" level=\"1\">\n              {header}\n            </Headline>\n          )}\n          {hasReactNode(text) && <Text className={styles['ContentCard__text']}>{text}</Text>}\n          {hasReactNode(caption) && (\n            <Footnote\n              className={classNames(styles['ContentCard__text'], styles['ContentCard__caption'])}\n            >\n              {caption}\n            </Footnote>\n          )}\n        </div>\n      </Tappable>\n    </Card>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Card","Tappable","Caption","Footnote","Headline","Text","styles","ContentCard","subtitle","header","text","caption","className","mode","style","getRootRef","getRef","maxHeight","src","srcSet","alt","width","height","crossOrigin","decoding","loading","referrerPolicy","sizes","useMap","hasHover","hasActive","restProps","disabled","onClick","href","img","ref","div","weight","level","caps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,IAAI,QAAmB,eAAe;AAC/C,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,OAAOC,YAAY,2BAA2B;AA8B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,QAAQ,EACRC,MAAM,EACNC,IAAI,EACJC,OAAO,EACP,aAAa;AACbC,SAAS,EACTC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,EACV,YAAY;AACZC,MAAM,EACNC,SAAS,EACTC,GAAG,EACHC,MAAM,EACNC,MAAM,EAAE,EACRC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,MAAM,EACNC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjB,GAAGC,WACc;IACjB,qBACE,oBAAC/B;QACCa,MAAMA;QACNE,YAAYA;QACZD,OAAOA;QACPF,WAAWd,WAAWiC,UAAUC,QAAQ,IAAI1B,MAAM,CAAC,wBAAwB,EAAEM;qBAE7E,oBAACX;QACE,GAAG8B,SAAS;QACbC,UAAUD,UAAUC,QAAQ,IAAK,CAACD,UAAUE,OAAO,IAAI,CAACF,UAAUG,IAAI;QACtEL,UAAUA;QACVC,WAAWA;QACXlB,WAAWN,MAAM,CAAC,wBAAwB;OAEzC,AAACY,CAAAA,OAAOC,MAAK,mBACZ,oBAACgB;QACCC,KAAKpB;QACLJ,WAAWN,MAAM,CAAC,mBAAmB;QACrCY,KAAKA;QACLC,QAAQA;QACRC,KAAKA;QACLG,aAAaA;QACbC,UAAUA;QACVC,SAASA;QACTC,gBAAgBA;QAChBC,OAAOA;QACPC,QAAQA;QACRN,QAAQA;QACRR,OAAO;YAAEG;QAAU;QACnBI,OAAM;sBAGV,oBAACgB;QAAIzB,WAAWN,MAAM,CAAC,oBAAoB;OACxCP,aAAaS,2BACZ,oBAACN;QACCU,WAAWd,WAAWQ,MAAM,CAAC,oBAAoB,EAAEA,MAAM,CAAC,wBAAwB;QAClFgC,QAAO;QACPC,OAAM;QACNC,MAAAA;OAEChC,WAGJT,aAAaU,yBACZ,oBAACL;QAASQ,WAAWN,MAAM,CAAC,oBAAoB;QAAEgC,QAAO;QAAIC,OAAM;OAChE9B,SAGJV,aAAaW,uBAAS,oBAACL;QAAKO,WAAWN,MAAM,CAAC,oBAAoB;OAAGI,OACrEX,aAAaY,0BACZ,oBAACR;QACCS,WAAWd,WAAWQ,MAAM,CAAC,oBAAoB,EAAEA,MAAM,CAAC,uBAAuB;OAEhFK;AAOf,EAAE"}

package/dist/cssm/components/Counter/Counter.js

@@ -16,7 +16,7 @@ const sizeClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Counter
- */ export const Counter = ({ mode ='inherit' , size ='m' , children , className , ...restProps })=>{
+ */ export const Counter = ({ mode = 'inherit', size = 'm', children, className, ...restProps })=>{
     if (React.Children.count(children) === 0) {
         return null;
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n  secondary: styles['Counter--mode-secondary'],\n  primary: styles['Counter--mode-primary'],\n  prominent: styles['Counter--mode-prominent'],\n  contrast: styles['Counter--mode-contrast'],\n  inherit: styles['Counter--mode-inherit'],\n};\n\nconst sizeClassNames = {\n  s: styles['Counter--size-s'],\n  m: styles['Counter--size-m'],\n};\n\nexport interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то\n   * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется\n   * режим `secondary`\n   */\n  mode?: 'secondary' | 'primary' | 'prominent' | 'contrast' | 'inherit';\n  size?: 's' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n  mode = 'inherit',\n  size = 'm',\n  children,\n  className,\n  ...restProps\n}: CounterProps) => {\n  if (React.Children.count(children) === 0) {\n    return null;\n  }\n\n  const CounterTypography = size === 's' ? Caption : Headline;\n  const counterLevel = size === 's' ? '1' : '2';\n\n  return (\n    <CounterTypography\n      {...restProps}\n      Component=\"span\"\n      className={classNames(\n        'vkuiInternalCounter',\n        styles['Counter'],\n        modeClassNames[mode],\n        sizeClassNames[size],\n        className,\n      )}\n      level={counterLevel}\n    >\n      {children}\n    </CounterTypography>\n  );\n};\n"],"names":["React","classNames","Caption","Headline","styles","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","Counter","mode","size","children","className","restProps","Children","count","CounterTypography","counterLevel","Component","level"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,WAAWF,MAAM,CAAC,0BAA0B;IAC5CG,SAASH,MAAM,CAAC,wBAAwB;IACxCI,WAAWJ,MAAM,CAAC,0BAA0B;IAC5CK,UAAUL,MAAM,CAAC,yBAAyB;IAC1CM,SAASN,MAAM,CAAC,wBAAwB;AAC1C;AAEA,MAAMO,iBAAiB;IACrBC,GAAGR,MAAM,CAAC,kBAAkB;IAC5BS,GAAGT,MAAM,CAAC,kBAAkB;AAC9B;AAYA;;CAEC,GACD,OAAO,MAAMU,UAAU,CAAC,EACtBC,MAAO,UAAS,EAChBC,MAAO,IAAG,EACVC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACU;IACb,IAAInB,MAAMoB,SAASC,MAAMJ,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMK,oBAAoBN,SAAS,MAAMd,UAAUC;IACnD,MAAMoB,eAAeP,SAAS,MAAM,MAAM;IAE1C,qBACE,oBAACM;QACE,GAAGH,SAAS;QACbK,WAAU;QACVN,WAAWjB,WACT,uBACAG,MAAM,CAAC,UAAU,EACjBC,cAAc,CAACU,KAAK,EACpBJ,cAAc,CAACK,KAAK,EACpBE;QAEFO,OAAOF;OAENN;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Counter/Counter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './Counter.module.css';\n\nconst modeClassNames = {\n  secondary: styles['Counter--mode-secondary'],\n  primary: styles['Counter--mode-primary'],\n  prominent: styles['Counter--mode-prominent'],\n  contrast: styles['Counter--mode-contrast'],\n  inherit: styles['Counter--mode-inherit'],\n};\n\nconst sizeClassNames = {\n  s: styles['Counter--size-s'],\n  m: styles['Counter--size-m'],\n};\n\nexport interface CounterProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Тип счетчика.  В режиме `inherit` если компонент находится в кнопке, то\n   * цвета зависят от кнопки. Если компонент находится вне кнопки, применяется\n   * режим `secondary`\n   */\n  mode?: 'secondary' | 'primary' | 'prominent' | 'contrast' | 'inherit';\n  size?: 's' | 'm';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Counter\n */\nexport const Counter = ({\n  mode = 'inherit',\n  size = 'm',\n  children,\n  className,\n  ...restProps\n}: CounterProps) => {\n  if (React.Children.count(children) === 0) {\n    return null;\n  }\n\n  const CounterTypography = size === 's' ? Caption : Headline;\n  const counterLevel = size === 's' ? '1' : '2';\n\n  return (\n    <CounterTypography\n      {...restProps}\n      Component=\"span\"\n      className={classNames(\n        'vkuiInternalCounter',\n        styles['Counter'],\n        modeClassNames[mode],\n        sizeClassNames[size],\n        className,\n      )}\n      level={counterLevel}\n    >\n      {children}\n    </CounterTypography>\n  );\n};\n"],"names":["React","classNames","Caption","Headline","styles","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","Counter","mode","size","children","className","restProps","Children","count","CounterTypography","counterLevel","Component","level"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,WAAWF,MAAM,CAAC,0BAA0B;IAC5CG,SAASH,MAAM,CAAC,wBAAwB;IACxCI,WAAWJ,MAAM,CAAC,0BAA0B;IAC5CK,UAAUL,MAAM,CAAC,yBAAyB;IAC1CM,SAASN,MAAM,CAAC,wBAAwB;AAC1C;AAEA,MAAMO,iBAAiB;IACrBC,GAAGR,MAAM,CAAC,kBAAkB;IAC5BS,GAAGT,MAAM,CAAC,kBAAkB;AAC9B;AAYA;;CAEC,GACD,OAAO,MAAMU,UAAU,CAAC,EACtBC,OAAO,SAAS,EAChBC,OAAO,GAAG,EACVC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACU;IACb,IAAInB,MAAMoB,QAAQ,CAACC,KAAK,CAACJ,cAAc,GAAG;QACxC,OAAO;IACT;IAEA,MAAMK,oBAAoBN,SAAS,MAAMd,UAAUC;IACnD,MAAMoB,eAAeP,SAAS,MAAM,MAAM;IAE1C,qBACE,oBAACM;QACE,GAAGH,SAAS;QACbK,WAAU;QACVN,WAAWjB,WACT,uBACAG,MAAM,CAAC,UAAU,EACjBC,cAAc,CAACU,KAAK,EACpBJ,cAAc,CAACK,KAAK,EACpBE;QAEFO,OAAOF;OAENN;AAGP,EAAE"}

package/dist/cssm/components/CustomScrollView/CustomScrollView.js

@@ -7,8 +7,8 @@ import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { stopPropagation } from '../../lib/utils';
 import { useTrackerVisibility } from './useTrackerVisibility';
 import styles from './CustomScrollView.module.css';
-export const CustomScrollView = ({ className , children , boxRef: externalBoxRef , windowResize , autoHideScrollbar =false , autoHideScrollbarDelay , onScroll  })=>{
-    const { document , window  } = useDOM();
+export const CustomScrollView = ({ className, children, boxRef: externalBoxRef, windowResize, autoHideScrollbar = false, autoHideScrollbarDelay, onScroll })=>{
+    const { document, window } = useDOM();
     const ratio = React.useRef(NaN);
     const lastTrackerTop = React.useRef(0);
     const clientHeight = React.useRef(0);
@@ -84,7 +84,7 @@ export const CustomScrollView = ({ className , children , boxRef: externalBoxRef
         const position = Math.min(Math.max(trackerTop.current + diff, 0), clientHeight.current - trackerHeight.current);
         setScrollPositionFromTracker(position);
     };
-    const { trackerVisible , onTargetScroll , onTrackerDragStart , onTrackerDragStop , onTrackerMouseEnter , onTrackerMouseLeave  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);
+    const { trackerVisible, onTargetScroll, onTrackerDragStart, onTrackerDragStop, onTrackerMouseEnter, onTrackerMouseLeave } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);
     const onUp = (e)=>{
         e.preventDefault();
         if (autoHideScrollbar) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nexport interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {\n  windowResize?: boolean;\n  boxRef?: React.Ref<HTMLDivElement>;\n  className?: HTMLDivElement['className'];\n  onScroll?(event: React.UIEvent<HTMLDivElement>): void;\n  children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n  className,\n  children,\n  boxRef: externalBoxRef,\n  windowResize,\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay,\n  onScroll,\n}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\n\n  const ratio = React.useRef(NaN);\n  const lastTrackerTop = React.useRef(0);\n  const clientHeight = React.useRef(0);\n  const trackerHeight = React.useRef(0);\n  const scrollHeight = React.useRef(0);\n  const transformProp = React.useRef('');\n  const startY = React.useRef(0);\n  const trackerTop = React.useRef(0);\n\n  const boxRef = useExternRef(externalBoxRef);\n\n  const barY = React.useRef<HTMLDivElement>(null);\n  const trackerY = React.useRef<HTMLDivElement>(null);\n\n  const setTrackerPosition = (scrollTop: number) => {\n    lastTrackerTop.current = scrollTop;\n    if (trackerY.current !== null) {\n      (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n  };\n\n  const resize = () => {\n    if (!boxRef.current || !barY.current || !trackerY.current) {\n      return;\n    }\n    const localClientHeight = boxRef.current.clientHeight;\n    const localScrollHeight = boxRef.current.scrollHeight;\n    const localRatio = localClientHeight / localScrollHeight;\n    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n    ratio.current = localRatio;\n    clientHeight.current = localClientHeight;\n    scrollHeight.current = localScrollHeight;\n    trackerHeight.current = localTrackerHeight;\n\n    if (localRatio >= 1) {\n      barY.current.style.display = 'none';\n    } else {\n      barY.current.style.display = '';\n      trackerY.current.style.height = `${localTrackerHeight}px`;\n      setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    }\n  };\n\n  const resizeHandler = useEventListener('resize', resize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (windowResize && window) {\n      resizeHandler.add(window);\n    }\n  }, [windowResize, window]);\n\n  useIsomorphicLayoutEffect(() => {\n    let style = trackerY.current?.style;\n    let prop = '';\n    if (style !== undefined) {\n      if ('transform' in style) {\n        prop = 'transform';\n      } else if ('webkitTransform' in style) {\n        prop = 'webkitTransform';\n      }\n    }\n    transformProp.current = prop;\n  }, []);\n\n  useIsomorphicLayoutEffect(resize);\n\n  const setScrollPositionFromTracker = (trackerTop: number) => {\n    const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n    }\n  };\n\n  const onMove = (e: MouseEvent) => {\n    e.preventDefault();\n    const diff = e.clientY - startY.current;\n    const position = Math.min(\n      Math.max(trackerTop.current + diff, 0),\n      clientHeight.current - trackerHeight.current,\n    );\n\n    setScrollPositionFromTracker(position);\n  };\n\n  const {\n    trackerVisible,\n    onTargetScroll,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n  const onUp = (e: MouseEvent) => {\n    e.preventDefault();\n\n    if (autoHideScrollbar) {\n      onTrackerDragStop();\n    }\n\n    unsubscribe();\n  };\n\n  const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    if (autoHideScrollbar) {\n      onTargetScroll();\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    onScroll?.(event);\n  };\n\n  const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n  function subscribe(el: Document | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  const onDragStart = (e: React.MouseEvent) => {\n    e.preventDefault();\n    startY.current = e.clientY;\n    trackerTop.current = lastTrackerTop.current;\n\n    if (autoHideScrollbar) {\n      onTrackerDragStart();\n    }\n\n    subscribe(document);\n  };\n\n  return (\n    <div className={classNames(styles['CustomScrollView'], className)}>\n      <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n        {children}\n      </div>\n\n      <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n        <div\n          className={classNames(\n            styles['CustomScrollView__trackerY'],\n            !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n          )}\n          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useDOM","useIsomorphicLayoutEffect","stopPropagation","useTrackerVisibility","styles","CustomScrollView","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","document","window","ratio","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","add","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","unsubscribe","scroll","event","listeners","subscribe","el","forEach","l","remove","onDragStart","div","tabIndex","ref","onClick","onMouseEnter","onMouseLeave","onMouseDown"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { stopPropagation } from '../../lib/utils';\nimport { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';\nimport styles from './CustomScrollView.module.css';\n\nexport interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {\n  windowResize?: boolean;\n  boxRef?: React.Ref<HTMLDivElement>;\n  className?: HTMLDivElement['className'];\n  onScroll?(event: React.UIEvent<HTMLDivElement>): void;\n  children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n  className,\n  children,\n  boxRef: externalBoxRef,\n  windowResize,\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay,\n  onScroll,\n}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\n\n  const ratio = React.useRef(NaN);\n  const lastTrackerTop = React.useRef(0);\n  const clientHeight = React.useRef(0);\n  const trackerHeight = React.useRef(0);\n  const scrollHeight = React.useRef(0);\n  const transformProp = React.useRef('');\n  const startY = React.useRef(0);\n  const trackerTop = React.useRef(0);\n\n  const boxRef = useExternRef(externalBoxRef);\n\n  const barY = React.useRef<HTMLDivElement>(null);\n  const trackerY = React.useRef<HTMLDivElement>(null);\n\n  const setTrackerPosition = (scrollTop: number) => {\n    lastTrackerTop.current = scrollTop;\n    if (trackerY.current !== null) {\n      (trackerY.current.style as any)[transformProp.current] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition((clientHeight.current - trackerHeight.current) * progress);\n  };\n\n  const resize = () => {\n    if (!boxRef.current || !barY.current || !trackerY.current) {\n      return;\n    }\n    const localClientHeight = boxRef.current.clientHeight;\n    const localScrollHeight = boxRef.current.scrollHeight;\n    const localRatio = localClientHeight / localScrollHeight;\n    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n    ratio.current = localRatio;\n    clientHeight.current = localClientHeight;\n    scrollHeight.current = localScrollHeight;\n    trackerHeight.current = localTrackerHeight;\n\n    if (localRatio >= 1) {\n      barY.current.style.display = 'none';\n    } else {\n      barY.current.style.display = '';\n      trackerY.current.style.height = `${localTrackerHeight}px`;\n      setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    }\n  };\n\n  const resizeHandler = useEventListener('resize', resize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (windowResize && window) {\n      resizeHandler.add(window);\n    }\n  }, [windowResize, window]);\n\n  useIsomorphicLayoutEffect(() => {\n    let style = trackerY.current?.style;\n    let prop = '';\n    if (style !== undefined) {\n      if ('transform' in style) {\n        prop = 'transform';\n      } else if ('webkitTransform' in style) {\n        prop = 'webkitTransform';\n      }\n    }\n    transformProp.current = prop;\n  }, []);\n\n  useIsomorphicLayoutEffect(resize);\n\n  const setScrollPositionFromTracker = (trackerTop: number) => {\n    const progress = trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop = (scrollHeight.current - clientHeight.current) * progress;\n    }\n  };\n\n  const onMove = (e: MouseEvent) => {\n    e.preventDefault();\n    const diff = e.clientY - startY.current;\n    const position = Math.min(\n      Math.max(trackerTop.current + diff, 0),\n      clientHeight.current - trackerHeight.current,\n    );\n\n    setScrollPositionFromTracker(position);\n  };\n\n  const {\n    trackerVisible,\n    onTargetScroll,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n  const onUp = (e: MouseEvent) => {\n    e.preventDefault();\n\n    if (autoHideScrollbar) {\n      onTrackerDragStop();\n    }\n\n    unsubscribe();\n  };\n\n  const scroll = (event: React.UIEvent<HTMLDivElement>) => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    if (autoHideScrollbar) {\n      onTargetScroll();\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    onScroll?.(event);\n  };\n\n  const listeners = [useEventListener('mousemove', onMove), useEventListener('mouseup', onUp)];\n\n  function subscribe(el: Document | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  const onDragStart = (e: React.MouseEvent) => {\n    e.preventDefault();\n    startY.current = e.clientY;\n    trackerTop.current = lastTrackerTop.current;\n\n    if (autoHideScrollbar) {\n      onTrackerDragStart();\n    }\n\n    subscribe(document);\n  };\n\n  return (\n    <div className={classNames(styles['CustomScrollView'], className)}>\n      <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>\n        {children}\n      </div>\n\n      <div className={styles['CustomScrollView__barY']} ref={barY} onClick={stopPropagation}>\n        <div\n          className={classNames(\n            styles['CustomScrollView__trackerY'],\n            !trackerVisible && styles['CustomScrollView__trackerY--hidden'],\n          )}\n          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useDOM","useIsomorphicLayoutEffect","stopPropagation","useTrackerVisibility","styles","CustomScrollView","className","children","boxRef","externalBoxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","onScroll","document","window","ratio","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","add","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","unsubscribe","scroll","event","listeners","subscribe","el","forEach","l","remove","onDragStart","div","tabIndex","ref","onClick","onMouseEnter","onMouseLeave","onMouseDown"],"mappings":"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"}

package/dist/cssm/components/CustomScrollView/useTrackerVisibility.js

@@ -9,7 +9,7 @@ import { useTimeout } from '../../hooks/useTimeout';
     const [trackerVisible, setTrackerVisible] = React.useState(!autoHideScrollbar);
     const isMouseOver = React.useRef(false);
     const isTrackerDragging = React.useRef(false);
-    const { set: setVisibilityTimeout , clear: clearVisibilityTimeout  } = useTimeout(()=>setTrackerVisible(false), autoHideScrollbarDelay);
+    const { set: setVisibilityTimeout, clear: clearVisibilityTimeout } = useTimeout(()=>setTrackerVisible(false), autoHideScrollbarDelay);
     const onTrackerDragStart = React.useCallback(()=>{
         clearVisibilityTimeout();
         setTrackerVisible(true);

package/dist/cssm/components/CustomScrollView/useTrackerVisibility.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomScrollView/useTrackerVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout } from '../../hooks/useTimeout';\n\n/**\n * Хук, который позволяет управлять видимостью ползунка скроллбара.\n * @param autoHideScrollbar - скрывать ли ползунок скроллбара\n * @param autoHideScrollbarDelay - через какое кол-во миллисекунд ползунок скроллбара скрывается\n * @returns Объект, содержащий параметры, которые позволяют управлять видимостью ползунка\n */\nexport const useTrackerVisibility = (\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay = 500,\n): TrackerVisibilityProps => {\n  const [trackerVisible, setTrackerVisible] = React.useState(!autoHideScrollbar);\n  const isMouseOver = React.useRef(false);\n  const isTrackerDragging = React.useRef(false);\n\n  const { set: setVisibilityTimeout, clear: clearVisibilityTimeout } = useTimeout(\n    () => setTrackerVisible(false),\n    autoHideScrollbarDelay,\n  );\n\n  const onTrackerDragStart = React.useCallback(() => {\n    clearVisibilityTimeout();\n    setTrackerVisible(true);\n    isTrackerDragging.current = true;\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerDragStop = React.useCallback(() => {\n    isTrackerDragging.current = false;\n    if (!isMouseOver.current) {\n      setVisibilityTimeout();\n    }\n  }, [setVisibilityTimeout, isMouseOver]);\n\n  /**\n   * Позволяет \"запланировать\" скрытие ползунка через delay миллисекунд. Если тайм-аут не успевает сработать, то каждый\n   * последующий вызов функции откладывает скрытие ползунка на delay миллисекунд\n   */\n  const queueTrackerVisibility = React.useCallback(() => {\n    if (isTrackerDragging.current) {\n      return;\n    }\n    setTrackerVisible(true);\n    setVisibilityTimeout();\n  }, [setVisibilityTimeout]);\n\n  const onTrackerMouseEnter = React.useCallback(() => {\n    clearVisibilityTimeout();\n    isMouseOver.current = true;\n    setTrackerVisible(true);\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerMouseLeave = React.useCallback(() => {\n    queueTrackerVisibility();\n    isMouseOver.current = false;\n  }, [queueTrackerVisibility]);\n\n  const onTargetScroll = React.useCallback(() => {\n    queueTrackerVisibility();\n  }, [queueTrackerVisibility]);\n\n  return {\n    trackerVisible,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n    onTargetScroll,\n  };\n};\n\nexport interface TrackerOptionsProps {\n  /**\n   * Скрывать ли ползунок скроллбара\n   */\n  autoHideScrollbar?: boolean;\n  /**\n   * Через какое кол-во миллисекунд ползунок скроллбара скрывается\n   */\n  autoHideScrollbarDelay?: number;\n}\n\nexport interface TrackerVisibilityProps {\n  /**\n   * Отвечает за видимость ползунка\n   */\n  trackerVisible: boolean;\n  /**\n   * Функция для обработки события у блока со скроллом\n   */\n  onTargetScroll(this: void): void;\n  /**\n   * Функция для обработки начала drag event ползунка\n   */\n  onTrackerDragStart(this: void): void;\n  /**\n   * Функция для обработки окончания drag event ползунка\n   */\n  onTrackerDragStop(this: void): void;\n  /**\n   * Функция для обработки mouseLeave event ползунка\n   */\n  onTrackerMouseEnter(this: void): void;\n  /**\n   * Функция для обработки mouseEnter event ползунка\n   */\n  onTrackerMouseLeave(this: void): void;\n}\n"],"names":["React","useTimeout","useTrackerVisibility","autoHideScrollbar","autoHideScrollbarDelay","trackerVisible","setTrackerVisible","useState","isMouseOver","useRef","isTrackerDragging","set","setVisibilityTimeout","clear","clearVisibilityTimeout","onTrackerDragStart","useCallback","current","onTrackerDragStop","queueTrackerVisibility","onTrackerMouseEnter","onTrackerMouseLeave","onTargetScroll"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,yBAAyB;AAEpD;;;;;CAKC,GACD,OAAO,MAAMC,uBAAuB,CAClCC,oBAAoB,KAAK,EACzBC,yBAAyB,GAAG;IAE5B,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGN,MAAMO,SAAS,CAACJ;IAC5D,MAAMK,cAAcR,MAAMS,OAAO;IACjC,MAAMC,oBAAoBV,MAAMS,OAAO;IAEvC,MAAM,EAAEE,KAAKC,qBAAoB,EAAEC,OAAOC,uBAAsB,EAAE,GAAGb,WACnE,IAAMK,kBAAkB,QACxBF;IAGF,MAAMW,qBAAqBf,MAAMgB,YAAY;QAC3CF;QACAR,kBAAkB;QAClBI,kBAAkBO,UAAU;IAC9B,GAAG;QAACH;KAAuB;IAE3B,MAAMI,oBAAoBlB,MAAMgB,YAAY;QAC1CN,kBAAkBO,UAAU;QAC5B,IAAI,CAACT,YAAYS,SAAS;YACxBL;QACF;IACF,GAAG;QAACA;QAAsBJ;KAAY;IAEtC;;;GAGC,GACD,MAAMW,yBAAyBnB,MAAMgB,YAAY;QAC/C,IAAIN,kBAAkBO,SAAS;YAC7B;QACF;QACAX,kBAAkB;QAClBM;IACF,GAAG;QAACA;KAAqB;IAEzB,MAAMQ,sBAAsBpB,MAAMgB,YAAY;QAC5CF;QACAN,YAAYS,UAAU;QACtBX,kBAAkB;IACpB,GAAG;QAACQ;KAAuB;IAE3B,MAAMO,sBAAsBrB,MAAMgB,YAAY;QAC5CG;QACAX,YAAYS,UAAU;IACxB,GAAG;QAACE;KAAuB;IAE3B,MAAMG,iBAAiBtB,MAAMgB,YAAY;QACvCG;IACF,GAAG;QAACA;KAAuB;IAE3B,OAAO;QACLd;QACAU;QACAG;QACAE;QACAC;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../../../src/components/CustomScrollView/useTrackerVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useTimeout } from '../../hooks/useTimeout';\n\n/**\n * Хук, который позволяет управлять видимостью ползунка скроллбара.\n * @param autoHideScrollbar - скрывать ли ползунок скроллбара\n * @param autoHideScrollbarDelay - через какое кол-во миллисекунд ползунок скроллбара скрывается\n * @returns Объект, содержащий параметры, которые позволяют управлять видимостью ползунка\n */\nexport const useTrackerVisibility = (\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay = 500,\n): TrackerVisibilityProps => {\n  const [trackerVisible, setTrackerVisible] = React.useState(!autoHideScrollbar);\n  const isMouseOver = React.useRef(false);\n  const isTrackerDragging = React.useRef(false);\n\n  const { set: setVisibilityTimeout, clear: clearVisibilityTimeout } = useTimeout(\n    () => setTrackerVisible(false),\n    autoHideScrollbarDelay,\n  );\n\n  const onTrackerDragStart = React.useCallback(() => {\n    clearVisibilityTimeout();\n    setTrackerVisible(true);\n    isTrackerDragging.current = true;\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerDragStop = React.useCallback(() => {\n    isTrackerDragging.current = false;\n    if (!isMouseOver.current) {\n      setVisibilityTimeout();\n    }\n  }, [setVisibilityTimeout, isMouseOver]);\n\n  /**\n   * Позволяет \"запланировать\" скрытие ползунка через delay миллисекунд. Если тайм-аут не успевает сработать, то каждый\n   * последующий вызов функции откладывает скрытие ползунка на delay миллисекунд\n   */\n  const queueTrackerVisibility = React.useCallback(() => {\n    if (isTrackerDragging.current) {\n      return;\n    }\n    setTrackerVisible(true);\n    setVisibilityTimeout();\n  }, [setVisibilityTimeout]);\n\n  const onTrackerMouseEnter = React.useCallback(() => {\n    clearVisibilityTimeout();\n    isMouseOver.current = true;\n    setTrackerVisible(true);\n  }, [clearVisibilityTimeout]);\n\n  const onTrackerMouseLeave = React.useCallback(() => {\n    queueTrackerVisibility();\n    isMouseOver.current = false;\n  }, [queueTrackerVisibility]);\n\n  const onTargetScroll = React.useCallback(() => {\n    queueTrackerVisibility();\n  }, [queueTrackerVisibility]);\n\n  return {\n    trackerVisible,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n    onTargetScroll,\n  };\n};\n\nexport interface TrackerOptionsProps {\n  /**\n   * Скрывать ли ползунок скроллбара\n   */\n  autoHideScrollbar?: boolean;\n  /**\n   * Через какое кол-во миллисекунд ползунок скроллбара скрывается\n   */\n  autoHideScrollbarDelay?: number;\n}\n\nexport interface TrackerVisibilityProps {\n  /**\n   * Отвечает за видимость ползунка\n   */\n  trackerVisible: boolean;\n  /**\n   * Функция для обработки события у блока со скроллом\n   */\n  onTargetScroll(this: void): void;\n  /**\n   * Функция для обработки начала drag event ползунка\n   */\n  onTrackerDragStart(this: void): void;\n  /**\n   * Функция для обработки окончания drag event ползунка\n   */\n  onTrackerDragStop(this: void): void;\n  /**\n   * Функция для обработки mouseLeave event ползунка\n   */\n  onTrackerMouseEnter(this: void): void;\n  /**\n   * Функция для обработки mouseEnter event ползунка\n   */\n  onTrackerMouseLeave(this: void): void;\n}\n"],"names":["React","useTimeout","useTrackerVisibility","autoHideScrollbar","autoHideScrollbarDelay","trackerVisible","setTrackerVisible","useState","isMouseOver","useRef","isTrackerDragging","set","setVisibilityTimeout","clear","clearVisibilityTimeout","onTrackerDragStart","useCallback","current","onTrackerDragStop","queueTrackerVisibility","onTrackerMouseEnter","onTrackerMouseLeave","onTargetScroll"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,yBAAyB;AAEpD;;;;;CAKC,GACD,OAAO,MAAMC,uBAAuB,CAClCC,oBAAoB,KAAK,EACzBC,yBAAyB,GAAG;IAE5B,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGN,MAAMO,QAAQ,CAAC,CAACJ;IAC5D,MAAMK,cAAcR,MAAMS,MAAM,CAAC;IACjC,MAAMC,oBAAoBV,MAAMS,MAAM,CAAC;IAEvC,MAAM,EAAEE,KAAKC,oBAAoB,EAAEC,OAAOC,sBAAsB,EAAE,GAAGb,WACnE,IAAMK,kBAAkB,QACxBF;IAGF,MAAMW,qBAAqBf,MAAMgB,WAAW,CAAC;QAC3CF;QACAR,kBAAkB;QAClBI,kBAAkBO,OAAO,GAAG;IAC9B,GAAG;QAACH;KAAuB;IAE3B,MAAMI,oBAAoBlB,MAAMgB,WAAW,CAAC;QAC1CN,kBAAkBO,OAAO,GAAG;QAC5B,IAAI,CAACT,YAAYS,OAAO,EAAE;YACxBL;QACF;IACF,GAAG;QAACA;QAAsBJ;KAAY;IAEtC;;;GAGC,GACD,MAAMW,yBAAyBnB,MAAMgB,WAAW,CAAC;QAC/C,IAAIN,kBAAkBO,OAAO,EAAE;YAC7B;QACF;QACAX,kBAAkB;QAClBM;IACF,GAAG;QAACA;KAAqB;IAEzB,MAAMQ,sBAAsBpB,MAAMgB,WAAW,CAAC;QAC5CF;QACAN,YAAYS,OAAO,GAAG;QACtBX,kBAAkB;IACpB,GAAG;QAACQ;KAAuB;IAE3B,MAAMO,sBAAsBrB,MAAMgB,WAAW,CAAC;QAC5CG;QACAX,YAAYS,OAAO,GAAG;IACxB,GAAG;QAACE;KAAuB;IAE3B,MAAMG,iBAAiBtB,MAAMgB,WAAW,CAAC;QACvCG;IACF,GAAG;QAACA;KAAuB;IAE3B,OAAO;QACLd;QACAU;QACAG;QACAE;QACAC;QACAC;IACF;AACF,EAAE"}