@vkontakte/vkui 5.3.2 → 5.4.1

package/dist/cssm/components/ChipsInputBase/ChipsInputBase.module.css

@@ -1 +1,115 @@
-.vkuiChipsInputBase{display:flex;flex-grow:1;flex-shrink:1;flex-wrap:wrap;max-width:100%;overflow:hidden;padding:3px;position:relative;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiChipsInputBase__chip{margin:2px;max-width:calc(100% - 4px)}.vkuiChipsInputBase__label{display:flex;flex:1;flex-direction:column;margin:2px 2px 2px 10px}.vkuiChipsInputBase__el{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-shadow:none;color:#000;color:var(--vkui--color_text_primary);font-family:inherit;font-size:15px;line-height:26px;margin-bottom:2px;padding:0;position:relative;width:100%}.vkuiChipsInputBase__el:focus{min-width:64px}.vkuiChipsInputBase__el::-ms-clear{display:none}.vkuiChipsInputBase__el:disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiChipsInputBase__el::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el::placeholder{color:#818c99;color:var(--vkui--color_text_secondary);opacity:1}.vkuiChipsInputBase__el:disabled::-webkit-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el:disabled::-moz-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el:disabled::-ms-input-placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el:disabled::placeholder{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiChipsInputBase__el[readonly]{cursor:default}.vkuiChipsInputBase--hasPlaceholder .vkuiChipsInputBase__label{margin-left:9px;margin-right:0}.vkuiChipsInputBase--hasPlaceholder .vkuiChipsInputBase__el{text-overflow:ellipsis;white-space:nowrap}.vkuiChipsInputBase--sizeY-compact{padding:1px}
+.ChipsInputBase {
+  flex-grow: 1;
+  flex-shrink: 1;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 100%;
+  padding: 3px;
+  z-index: var(--vkui_internal--z_index_form_field_element);
+  overflow: hidden;
+}
+
+.ChipsInputBase__chip {
+  max-width: calc(100% - 4px);
+  margin: 2px;
+}
+
+.ChipsInputBase__label {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin: 2px 2px 2px 10px;
+}
+
+.ChipsInputBase__el {
+  position: relative;
+  width: 100%;
+  margin-bottom: 2px;
+  padding: 0;
+  /* Визуальная компенсация - центрируем строчные буквы */
+  font-size: 15px;
+  line-height: 26px;
+  color: var(--vkui--color_text_primary);
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  font-family: inherit;
+}
+
+.ChipsInputBase__el:focus {
+  min-width: 64px;
+}
+
+.ChipsInputBase__el::-ms-clear {
+  display: none;
+}
+
+.ChipsInputBase__el:disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.ChipsInputBase__el::-webkit-input-placeholder {
+  color: var(--vkui--color_text_secondary);
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.ChipsInputBase__el::-moz-placeholder {
+  color: var(--vkui--color_text_secondary);
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.ChipsInputBase__el::-ms-input-placeholder {
+  color: var(--vkui--color_text_secondary);
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.ChipsInputBase__el::placeholder {
+  color: var(--vkui--color_text_secondary);
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.ChipsInputBase__el:disabled::-webkit-input-placeholder {
+  color: var(--vkui--color_text_secondary);
+}
+
+.ChipsInputBase__el:disabled::-moz-placeholder {
+  color: var(--vkui--color_text_secondary);
+}
+
+.ChipsInputBase__el:disabled::-ms-input-placeholder {
+  color: var(--vkui--color_text_secondary);
+}
+
+.ChipsInputBase__el:disabled::placeholder {
+  color: var(--vkui--color_text_secondary);
+}
+
+.ChipsInputBase__el[readonly] {
+  cursor: default;
+}
+
+.ChipsInputBase--hasPlaceholder .ChipsInputBase__label {
+  margin-left: 9px;
+  margin-right: 0;
+}
+
+.ChipsInputBase--hasPlaceholder .ChipsInputBase__el {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/**
+ * sizeY COMPACT
+ */
+
+.ChipsInputBase--sizeY-compact {
+  padding: 1px;
+}

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

@@ -37,6 +37,10 @@ export interface ChipsSelectProps<Option extends ChipOption> extends Omit<ChipsI
     closeAfterSelect?: boolean;
     fixDropdownWidth?: boolean;
     forceDropdownPortal?: boolean;
+    /**
+     * Иконка раскрывающегося списка
+     */
+    icon?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsSelect

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

@@ -37,7 +37,7 @@ 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 , options , fixDropdownWidth , forceDropdownPortal , ...restProps } = propsWithDefault;
+    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 [popperPlacement, setPopperPlacement] = React.useState(undefined);
     const scrollBoxRef = React.useRef(null);
@@ -206,7 +206,7 @@ const chipsSelectDefaultProps = {
             // TODO: add label customization
             "aria-label": opened ? 'Скрыть' : 'Развернуть',
             onClick: toggleOpened
-        }, /*#__PURE__*/ React.createElement(DropdownIcon, {
+        }, icon ?? /*#__PURE__*/ React.createElement(DropdownIcon, {
             className: styles['ChipsSelect__icon'],
             opened: opened
         })),

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\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    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(0);\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) => {\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 = typeof nextIndex !== 'number' ? -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    if (focusedOptionIndex != null) {\n      focusOptionByIndex(index, focusedOptionIndex);\n    }\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 && 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    }\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  React.useEffect(() => {\n    const index = focusedOption\n      ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)\n      : -1;\n\n    if (index === -1 && !!filteredOptions.length && !showCreatable && closeAfterSelect) {\n      setFocusedOption(filteredOptions[0]);\n    }\n  }, [filteredOptions, focusedOption, showCreatable, closeAfterSelect, 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            <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","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","findIndex","value","renderChipWrapper","renderChipProps","onRemoveWrapper","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\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(0);\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) => {\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 = typeof nextIndex !== 'number' ? -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    if (focusedOptionIndex != null) {\n      focusOptionByIndex(index, focusedOptionIndex);\n    }\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 && 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    }\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  React.useEffect(() => {\n    const index = focusedOption\n      ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)\n      : -1;\n\n    if (index === -1 && !!filteredOptions.length && !showCreatable && closeAfterSelect) {\n      setFocusedOption(filteredOptions[0]);\n    }\n  }, [filteredOptions, focusedOption, showCreatable, closeAfterSelect, 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","findIndex","value","renderChipWrapper","renderChipProps","onRemoveWrapper","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/ChipsSelect/ChipsSelect.module.css

@@ -1 +1,27 @@
-.vkuiChipsSelect{position:relative}.vkuiChipsSelect__dropdown{cursor:pointer}.vkuiChipsSelect__icon{pointer-events:none}.vkuiChipsSelect__empty{color:#818c99;color:var(--vkui--color_text_secondary);padding:12px 0;text-align:center}.vkuiChipsSelect--pop-down{border-bottom-left-radius:0;border-bottom-right-radius:0}.vkuiChipsSelect--pop-up{border-top-left-radius:0;border-top-right-radius:0}
+.ChipsSelect {
+  position: relative;
+}
+
+.ChipsSelect__dropdown {
+  cursor: pointer;
+}
+
+.ChipsSelect__icon {
+  pointer-events: none;
+}
+
+.ChipsSelect__empty {
+  padding: 12px 0;
+  text-align: center;
+  color: var(--vkui--color_text_secondary);
+}
+
+.ChipsSelect--pop-down {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.ChipsSelect--pop-up {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

package/dist/cssm/components/ContentCard/ContentCard.module.css

@@ -1 +1,31 @@
-.vkuiContentCard--disabled{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility)}.vkuiContentCard__body{padding:12px 16px;padding:var(--vkui--size_base_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}.vkuiContentCard__tappable{border-radius:8px;border-radius:var(--vkui--size_card_border_radius--regular);color:#000;color:var(--vkui--color_text_primary);display:block;text-decoration:none}.vkuiContentCard__img{border-radius:8px 8px 0 0;border-radius:var(--vkui--size_card_border_radius--regular) var(--vkui--size_card_border_radius--regular) 0 0;display:block;object-fit:cover}.vkuiContentCard__text:not(:last-child){margin-bottom:4px}.vkuiContentCard__caption,.vkuiContentCard__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}
+.ContentCard--disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.ContentCard__body {
+  padding: var(--vkui--size_base_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
+}
+
+.ContentCard__tappable {
+  border-radius: var(--vkui--size_card_border_radius--regular);
+  text-decoration: none;
+  color: var(--vkui--color_text_primary);
+  display: block;
+}
+
+.ContentCard__img {
+  object-fit: cover;
+  display: block;
+  border-radius: var(--vkui--size_card_border_radius--regular)
+    var(--vkui--size_card_border_radius--regular) 0 0;
+}
+
+.ContentCard__text:not(:last-child) {
+  margin-bottom: 4px;
+}
+
+.ContentCard__caption,
+.ContentCard__subtitle {
+  color: var(--vkui--color_text_secondary);
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { Caption } from '../Typography/Caption/Caption';
 import { Headline } from '../Typography/Headline/Headline';
 import styles from './Counter.module.css';
@@ -22,14 +22,12 @@ const sizeClassNames = {
     }
     const CounterTypography = size === 's' ? Caption : Headline;
     const counterLevel = size === 's' ? '1' : '2';
-    return /*#__PURE__*/ React.createElement("span", {
+    return /*#__PURE__*/ React.createElement(CounterTypography, {
         ...restProps,
-        className: classNames(styles['Counter'], modeClassNames[mode], sizeClassNames[size], className)
-    }, hasReactNode(children) && /*#__PURE__*/ React.createElement(CounterTypography, {
         Component: "span",
-        className: styles['Counter__in'],
+        className: classNames('vkuiInternalCounter', styles['Counter'], modeClassNames[mode], sizeClassNames[size], className),
         level: counterLevel
-    }, children));
+    }, children);
 };
 
 //# sourceMappingURL=Counter.js.map

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, hasReactNode } 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    <span\n      {...restProps}\n      className={classNames(\n        styles['Counter'],\n        modeClassNames[mode],\n        sizeClassNames[size],\n        className,\n      )}\n    >\n      {hasReactNode(children) && (\n        <CounterTypography Component=\"span\" className={styles['Counter__in']} level={counterLevel}>\n          {children}\n        </CounterTypography>\n      )}\n    </span>\n  );\n};\n"],"names":["React","classNames","hasReactNode","Caption","Headline","styles","modeClassNames","secondary","primary","prominent","contrast","inherit","sizeClassNames","s","m","Counter","mode","size","children","className","restProps","Children","count","CounterTypography","counterLevel","span","Component","level"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,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,GAAK;IAClB,IAAIpB,MAAMqB,QAAQ,CAACC,KAAK,CAACJ,cAAc,GAAG;QACxC,OAAO,IAAI;IACb,CAAC;IAED,MAAMK,oBAAoBN,SAAS,MAAMd,UAAUC,QAAQ;IAC3D,MAAMoB,eAAeP,SAAS,MAAM,MAAM,GAAG;IAE7C,qBACE,oBAACQ;QACE,GAAGL,SAAS;QACbD,WAAWlB,WACTI,MAAM,CAAC,UAAU,EACjBC,cAAc,CAACU,KAAK,EACpBJ,cAAc,CAACK,KAAK,EACpBE;OAGDjB,aAAagB,2BACZ,oBAACK;QAAkBG,WAAU;QAAOP,WAAWd,MAAM,CAAC,cAAc;QAAEsB,OAAOH;OAC1EN;AAKX,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,MAAO,UAAS,EAChBC,MAAO,IAAG,EACVC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACU,GAAK;IAClB,IAAInB,MAAMoB,QAAQ,CAACC,KAAK,CAACJ,cAAc,GAAG;QACxC,OAAO,IAAI;IACb,CAAC;IAED,MAAMK,oBAAoBN,SAAS,MAAMd,UAAUC,QAAQ;IAC3D,MAAMoB,eAAeP,SAAS,MAAM,MAAM,GAAG;IAE7C,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/Counter/Counter.module.css

@@ -1,3 +1,72 @@
-.vkuiCounter{align-items:center;display:flex;justify-content:center}.vkuiCounter__in{box-sizing:border-box;display:block;padding-left:5px;padding-right:5px;text-align:center;width:100%}.vkuiCounter--mode-primary{background:#2688eb;background:var(--vkui--color_background_accent);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiCounter--mode-secondary{background:#99a2ad;background:var(--vkui--color_icon_secondary);color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiCounter--mode-prominent{background:#ff3347;background:var(--vkui--color_accent_red);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiCounter--mode-contrast{background:#fff;background:var(--vkui--color_background_content);color:#2688eb;color:var(--vkui--color_text_accent_themed)}.vkuiCounter--size-m{border-radius:12px;height:24px;min-width:24px}.vkuiCounter--size-s{border-radius:9px;height:18px;min-width:18px}.vkuiCounter--mode-inherit{background-color:#99a2ad;background-color:var(
-    --vkui_internal--counter_inherit_background,var(--vkui--color_icon_secondary)
-  );color:#fff;color:var(--vkui_internal--counter_inherit_color,var(--vkui--color_text_contrast_themed))}
+.Counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 5px;
+  padding-right: 5px;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.Counter--mode-primary {
+  background: var(--vkui--color_background_accent);
+  color: var(--vkui--color_text_contrast);
+}
+
+.Counter--mode-secondary {
+  background: var(--vkui--color_icon_secondary);
+  color: var(--vkui--color_text_contrast_themed);
+}
+
+.Counter--mode-prominent {
+  background: var(--vkui--color_accent_red);
+  color: var(--vkui--color_text_contrast);
+}
+
+.Counter--mode-contrast {
+  background: var(--vkui--color_background_content);
+  color: var(--vkui--color_text_accent_themed);
+}
+
+.Counter--size-m {
+  height: 24px;
+  min-width: 24px;
+  border-radius: 12px;
+}
+
+.Counter--size-s {
+  height: 18px;
+  min-width: 18px;
+  border-radius: 9px;
+}
+
+.Counter--mode-inherit {
+  background-color: var(
+    --vkui_internal--counter_inherit_background,
+    var(--vkui--color_icon_secondary)
+  );
+  color: var(--vkui_internal--counter_inherit_color, var(--vkui--color_text_contrast_themed));
+}
+
+/**
+ * CMP:
+ * PanelHeaderButton
+ */
+
+:global(.vkuiInternalPanelHeaderButton) .Counter {
+  position: absolute;
+  padding: 0;
+  top: 8px;
+  right: 2px;
+}
+
+/**
+ * CMP:
+ * TabbarItem
+ */
+
+:global(.vkuiInternalTabbarItem__label) .Counter {
+  position: absolute;
+  top: -2px;
+  right: -9px;
+}

package/dist/cssm/components/CustomScrollView/CustomScrollView.module.css

@@ -1 +1,86 @@
-.vkuiCustomScrollView{height:100%;overflow:hidden;position:relative;width:100%}.vkuiCustomScrollView__box{height:100%;max-height:inherit;overflow-x:hidden;overflow-y:scroll;padding-right:100px;position:relative;scrollbar-width:none;width:100%}.vkuiCustomScrollView__box::-webkit-scrollbar{display:none}.vkuiCustomScrollView__barY:active+.vkuiCustomScrollView__box{pointer-events:none}.vkuiCustomScrollView__barY{height:100%;position:absolute;right:0;top:0;width:10px}.vkuiCustomScrollView__trackerY{box-sizing:border-box;left:0;padding:4px 4px 4px 0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:10px}.vkuiCustomScrollView__trackerY--hidden{opacity:0;transition:opacity .2s}.vkuiCustomScrollView__trackerY:before{background-color:#818c99;background-color:var(--vkui--color_icon_medium);border-radius:12px;content:"";display:block;height:100%;opacity:.48;transition:transform .2s,opacity .2s;width:100%}.vkuiCustomScrollView__trackerY:active:before,.vkuiCustomScrollView__trackerY:hover:before{opacity:.8;transform:scaleX(1.3333)}.vkuiInternalCustomSelectDropdown .vkuiCustomScrollView__box{padding-right:8px}.vkuiInternalCustomSelectDropdown--wide .vkuiCustomScrollView__box{padding-right:0}
+.CustomScrollView {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.CustomScrollView__box {
+  max-height: inherit;
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding-right: 100px;
+  position: relative;
+
+  /**
+   * Для удаление скролла в Firefox.
+   * В версии ниже 64 будет виден скролл, но это не ломает функциональность.
+   */
+  scrollbar-width: none;
+}
+
+.CustomScrollView__box::-webkit-scrollbar {
+  display: none;
+}
+
+.CustomScrollView__barY:active + .CustomScrollView__box {
+  pointer-events: none;
+}
+
+.CustomScrollView__barY {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 10px;
+}
+
+.CustomScrollView__trackerY {
+  width: 10px;
+  box-sizing: border-box;
+  padding: 4px 4px 4px 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.CustomScrollView__trackerY--hidden {
+  opacity: 0;
+  transition: opacity 200ms;
+}
+
+.CustomScrollView__trackerY::before {
+  content: '';
+  opacity: 0.48;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: var(--vkui--color_icon_medium);
+  border-radius: 12px;
+  transition: transform 200ms, opacity 200ms;
+}
+
+.CustomScrollView__trackerY:hover::before,
+.CustomScrollView__trackerY:active::before {
+  opacity: 0.8;
+  transform: scaleX(1.3333);
+}
+
+/**
+ * CMP:
+ * CustomSelectDropdown
+ */
+
+:global(.vkuiInternalCustomSelectDropdown) .CustomScrollView__box {
+  padding-right: 8px;
+}
+
+:global(.vkuiInternalCustomSelectDropdown--wide) .CustomScrollView__box {
+  padding-right: 0;
+}

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

@@ -52,6 +52,9 @@ export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerO
     fetching?: boolean;
     onClose?: VoidFunction;
     onOpen?: VoidFunction;
+    /**
+     * Иконка раскрывающегося списка
+     */
     icon?: React.ReactNode;
     /**
      * Кастомная кнопка для очистки значения.

package/dist/cssm/components/CustomSelect/CustomSelect.js

@@ -328,7 +328,7 @@ const defaultOptions = [];
         selectFocused
     ]);
     const onInputChange = React.useCallback((e)=>{
-        // TODO v6 удалить `onInputChangeProp`.
+        // TODO [>=6]: удалить `onInputChangeProp`.
         if (onInputChangeProp) {
             const options = onInputChangeProp(e, optionsProp);
             if (options) {