@vkontakte/vkui 5.4.1 → 5.4.3

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

@@ -36,7 +36,7 @@
 .ActionSheet--ios {
   width: 100%;
   animation: vkui-animation-actionsheet-intro 0.3s var(--vkui--animation_easing_platform);
-  padding: 10px;
+  padding: 8px;
   margin: unset;
   background: transparent;
 }
@@ -57,10 +57,6 @@
   position: relative;
 }
 
-.ActionSheet--ios .ActionSheet__title + .ActionSheet__text {
-  margin-top: 9px;
-}
-
 .ActionSheet--ios .ActionSheet__text {
   position: relative;
 }

package/dist/cssm/components/ActionSheet/ActionSheetDefaultIosCloseItem.js

@@ -5,7 +5,7 @@ export const ActionSheetDefaultIosCloseItem = (props)=>{
         autoClose: true,
         mode: "cancel",
         ...props
-    }, "Отменить");
+    }, "Отмена");
 };
 
 //# sourceMappingURL=ActionSheetDefaultIosCloseItem.js.map

package/dist/cssm/components/ActionSheet/ActionSheetDefaultIosCloseItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem autoClose mode=\"cancel\" {...props}>\n      Отменить\n    </ActionSheetItem>\n  );\n};\n"],"names":["React","ActionSheetItem","ActionSheetDefaultIosCloseItem","props","autoClose","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAA8B,qCAAqC;AAE3F,OAAO,MAAMC,iCAAiC,CAACC,QAAgC;IAC7E,qBACE,oBAACF;QAAgBG,WAAAA,IAAS;QAACC,MAAK;QAAU,GAAGF,KAAK;OAAE;AAIxD,EAAE"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem autoClose mode=\"cancel\" {...props}>\n      Отмена\n    </ActionSheetItem>\n  );\n};\n"],"names":["React","ActionSheetItem","ActionSheetDefaultIosCloseItem","props","autoClose","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAA8B,qCAAqC;AAE3F,OAAO,MAAMC,iCAAiC,CAACC,QAAgC;IAC7E,qBACE,oBAACF;QAAgBG,WAAAA,IAAS;QAACC,MAAK;QAAU,GAAGF,KAAK;OAAE;AAIxD,EAAE"}

package/dist/cssm/components/ActionSheetItem/ActionSheetItem.js

@@ -9,6 +9,7 @@ import { ActionSheetContext } from '../ActionSheet/ActionSheetContext';
 import { Tappable } from '../Tappable/Tappable';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { Text } from '../Typography/Text/Text';
+import { Title } from '../Typography/Title/Title';
 import styles from './ActionSheetItem.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
@@ -28,15 +29,18 @@ import styles from './ActionSheetItem.module.css';
         ...restProps,
         onClick: selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose)),
         activeMode: platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined,
-        className: classNames(styles['ActionSheetItem'], platform === Platform.IOS && styles['ActionSheetItem--ios'], mode === 'cancel' && styles['ActionSheetItem--mode-cancel'], mode === 'destructive' && styles['ActionSheetItem--mode-destructive'], sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'], isRich && styles['ActionSheetItem--rich'], isDesktop && styles['ActionSheetItem--desktop'], className)
+        className: classNames(styles['ActionSheetItem'], platform === Platform.IOS && styles['ActionSheetItem--ios'], mode === 'cancel' && styles['ActionSheetItem--mode-cancel'], mode === 'destructive' && styles['ActionSheetItem--mode-destructive'], sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'], isRich && styles['ActionSheetItem--rich'], isDesktop && styles['ActionSheetItem--desktop'], selectable && styles['ActionSheetItem--selectable'], className)
     }, before && /*#__PURE__*/ React.createElement("div", {
         className: styles['ActionSheetItem__before']
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['ActionSheetItem__container'], !multiline && styles['ActionSheetItem--ellipsis'])
     }, /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['ActionSheetItem__content'], isCentered && styles['ActionSheetItem--centered'])
-    }, /*#__PURE__*/ React.createElement(Text, {
-        weight: mode === 'cancel' ? '2' : undefined,
+    }, platform === Platform.IOS ? /*#__PURE__*/ React.createElement(Title, {
+        className: styles['ActionSheetItem__children'],
+        weight: mode === 'cancel' ? '2' : '3',
+        level: isCentered ? '2' : '3'
+    }, children) : /*#__PURE__*/ React.createElement(Text, {
         className: styles['ActionSheetItem__children']
     }, children), meta && /*#__PURE__*/ React.createElement(Text, {
         className: styles['ActionSheetItem__meta']

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  autoClose?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n  children,\n  autoClose,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked: iconCheckedProp,\n  className,\n  ...restProps\n}: ActionSheetItemProps) => {\n  const platform = usePlatform();\n  const { onItemClick = () => noop, isDesktop } =\n    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const iconChecked =\n    iconCheckedProp ||\n    (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n  let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n  if (selectable) {\n    Component = 'label';\n  }\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === Platform.IOS;\n\n  return (\n    <Tappable\n      Component={Component}\n      {...restProps}\n      onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose))}\n      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n      className={classNames(\n        styles['ActionSheetItem'],\n        platform === Platform.IOS && styles['ActionSheetItem--ios'],\n        mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n        mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n        isRich && styles['ActionSheetItem--rich'],\n        isDesktop && styles['ActionSheetItem--desktop'],\n        className,\n      )}\n    >\n      {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n      <div\n        className={classNames(\n          styles['ActionSheetItem__container'],\n          !multiline && styles['ActionSheetItem--ellipsis'],\n        )}\n      >\n        <div\n          className={classNames(\n            styles['ActionSheetItem__content'],\n            isCentered && styles['ActionSheetItem--centered'],\n          )}\n        >\n          <Text\n            weight={mode === 'cancel' ? '2' : undefined}\n            className={styles['ActionSheetItem__children']}\n          >\n            {children}\n          </Text>\n          {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n      </div>\n      {selectable && (\n        <div className={styles['ActionSheetItem__after']}>\n          <input\n            type=\"radio\"\n            className={styles['ActionSheetItem__radio']}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onClick={onItemClick(noop, noop, Boolean(autoClose))}\n            defaultChecked={defaultChecked}\n            checked={checked}\n            disabled={restProps.disabled}\n          />\n          <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\nexport { ActionSheetItem };\n"],"names":["React","Icon20CheckCircleOn","Icon24CheckCircleOn","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","ActionSheetContext","Tappable","Subhead","Text","styles","ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","onItemClick","isDesktop","useContext","sizeY","COMPACT","Component","href","isRich","isCentered","IOS","Boolean","activeMode","undefined","div","weight","input","type","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  autoClose?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n  children,\n  autoClose,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked: iconCheckedProp,\n  className,\n  ...restProps\n}: ActionSheetItemProps) => {\n  const platform = usePlatform();\n  const { onItemClick = () => noop, isDesktop } =\n    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const iconChecked =\n    iconCheckedProp ||\n    (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n  let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n  if (selectable) {\n    Component = 'label';\n  }\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === Platform.IOS;\n\n  return (\n    <Tappable\n      Component={Component}\n      {...restProps}\n      onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose))}\n      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n      className={classNames(\n        styles['ActionSheetItem'],\n        platform === Platform.IOS && styles['ActionSheetItem--ios'],\n        mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n        mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n        isRich && styles['ActionSheetItem--rich'],\n        isDesktop && styles['ActionSheetItem--desktop'],\n        selectable && styles['ActionSheetItem--selectable'],\n        className,\n      )}\n    >\n      {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n      <div\n        className={classNames(\n          styles['ActionSheetItem__container'],\n          !multiline && styles['ActionSheetItem--ellipsis'],\n        )}\n      >\n        <div\n          className={classNames(\n            styles['ActionSheetItem__content'],\n            isCentered && styles['ActionSheetItem--centered'],\n          )}\n        >\n          {platform === Platform.IOS ? (\n            <Title\n              className={styles['ActionSheetItem__children']}\n              weight={mode === 'cancel' ? '2' : '3'}\n              level={isCentered ? '2' : '3'}\n            >\n              {children}\n            </Title>\n          ) : (\n            <Text className={styles['ActionSheetItem__children']}>{children}</Text>\n          )}\n          {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n      </div>\n      {selectable && (\n        <div className={styles['ActionSheetItem__after']}>\n          <input\n            type=\"radio\"\n            className={styles['ActionSheetItem__radio']}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onClick={onItemClick(noop, noop, Boolean(autoClose))}\n            defaultChecked={defaultChecked}\n            checked={checked}\n            disabled={restProps.disabled}\n          />\n          <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\nexport { ActionSheetItem };\n"],"names":["React","Icon20CheckCircleOn","Icon24CheckCircleOn","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","ActionSheetContext","Tappable","Subhead","Text","Title","styles","ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","onItemClick","isDesktop","useContext","sizeY","COMPACT","Component","href","isRich","isCentered","IOS","Boolean","activeMode","undefined","div","weight","level","input","type","disabled"],"mappings":"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"}

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

@@ -22,11 +22,6 @@
   flex-shrink: 0;
 }
 
-.ActionSheetItem__before {
-  margin-right: 18px;
-  margin-left: -2px;
-}
-
 .ActionSheetItem__container {
   max-width: 100%;
   flex-grow: 1;
@@ -70,10 +65,12 @@
 
 .ActionSheetItem__before {
   color: var(--vkui--color_icon_accent);
+  margin-right: 16px;
 }
 
 .ActionSheetItem--ios .ActionSheetItem__before {
   color: var(--vkui--color_icon_accent_themed);
+  margin-right: 18px;
 }
 
 .ActionSheetItem--mode-destructive .ActionSheetItem__container:first-child {
@@ -106,7 +103,7 @@
  */
 
 .ActionSheetItem--ios {
-  padding: 14px 20px 14px 19px;
+  padding: 14px 18px;
   min-height: 56px;
   border-radius: 0;
   color: var(--vkui--color_text_accent_themed);
@@ -117,6 +114,10 @@
   color: var(--vkui--color_text_primary);
 }
 
+.ActionSheet--ios.ActionSheetItem--selectable {
+  padding: 14px 16px;
+}
+
 .ActionSheetItem--ios.ActionSheetItem--mode-destructive {
   color: var(--vkui--color_text_negative);
 }

package/dist/cssm/components/Banner/Banner.js

@@ -25,14 +25,14 @@ import styles from './Banner.module.css';
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: styles['Banner__content']
     }, hasReactNode(header) && /*#__PURE__*/ React.createElement(HeaderTypography, {
-        Component: "span",
-        className: styles['Banner__header'],
+        Component: "p",
         weight: "2",
         level: size === 'm' ? '2' : '1'
     }, header), hasReactNode(subheader) && /*#__PURE__*/ React.createElement(SubheaderTypography, {
-        Component: "span",
+        Component: "p",
         className: styles['Banner__subheader']
     }, subheader), hasReactNode(text) && /*#__PURE__*/ React.createElement(Text, {
+        Component: "p",
         className: styles['Banner__text']
     }, text), hasReactNode(actions) && React.Children.count(actions) > 0 && /*#__PURE__*/ React.createElement("div", {
         className: styles['Banner__actions']

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <React.Fragment>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography\n            Component=\"span\"\n            className={styles['Banner__header']}\n            weight=\"2\"\n            level={size === 'm' ? '2' : '1'}\n          >\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"span\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && <Text className={styles['Banner__text']}>{text}</Text>}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </React.Fragment>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","styles","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","Fragment","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","styles","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":"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"}

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

@@ -47,15 +47,7 @@
   z-index: var(--vkui_internal--z_index_banner_content);
 }
 
-.Banner__header {
-  display: block;
-}
-
-.Banner__subheader {
-  display: block;
-  color: var(--vkui--color_text_subhead);
-}
-
+.Banner__subheader,
 .Banner__text {
   color: var(--vkui--color_text_subhead);
 }

package/dist/cssm/components/Cell/CellDragger/CellDragger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { DraggableProps } from '../useDraggable';
-type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
-export declare const CellDragger: ({ onDragStart, onDragMove, onDragEnd, className, ...restProps }: CellDraggerProps) => JSX.Element;
+type CellDraggerProps = DraggableProps & Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;
+export declare const CellDragger: ({ onDragStart, onDragMove, onDragEnd, onClick, className, ...restProps }: CellDraggerProps) => JSX.Element;
 export {};

package/dist/cssm/components/Cell/CellDragger/CellDragger.js

@@ -5,17 +5,20 @@ import { usePlatform } from '../../../hooks/usePlatform';
 import { Platform } from '../../../lib/platform';
 import { Touch } from '../../Touch/Touch';
 import styles from './CellDragger.module.css';
-export const CellDragger = ({ onDragStart , onDragMove , onDragEnd , className , ...restProps })=>{
+export const CellDragger = ({ onDragStart , onDragMove , onDragEnd , onClick , className , ...restProps })=>{
     const platform = usePlatform();
-    const onClick = React.useCallback((e)=>{
-        e.preventDefault();
-    }, []);
+    const handleClick = (event)=>{
+        event.preventDefault();
+        if (onClick) {
+            onClick(event);
+        }
+    };
     return /*#__PURE__*/ React.createElement(Touch, {
         className: classNames(styles['CellDragger'], className),
         onStart: onDragStart,
         onMoveY: onDragMove,
         onEnd: onDragEnd,
-        onClick: onClick,
+        onClick: handleClick,
         ...restProps
     }, platform === Platform.IOS ? /*#__PURE__*/ React.createElement(Icon24ReorderIos, null) : /*#__PURE__*/ React.createElement(Icon24Reorder, null));
 };

package/dist/cssm/components/Cell/CellDragger/CellDragger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"names":["React","Icon24Reorder","Icon24ReorderIos","classNames","usePlatform","Platform","Touch","styles","CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","onClick","useCallback","e","preventDefault","onStart","onMoveY","onEnd","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,mBAAmB;AACnE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,OAAOC,YAAY,2BAA2B;AAI9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,YAAW,EACXC,WAAU,EACVC,UAAS,EACTC,UAAS,EACT,GAAGC,WACc,GAAK;IACtB,MAAMC,WAAWV;IAEjB,MAAMW,UAAUf,MAAMgB,WAAW,CAAC,CAACC,IAAwB;QACzDA,EAAEC,cAAc;IAClB,GAAG,EAAE;IAEL,qBACE,oBAACZ;QACCM,WAAWT,WAAWI,MAAM,CAAC,cAAc,EAAEK;QAC7CO,SAASV;QACTW,SAASV;QACTW,OAAOV;QACPI,SAASA;QACR,GAAGF,SAAS;OAEZC,aAAaT,SAASiB,GAAG,iBAAG,oBAACpB,wCAAsB,oBAACD,oBAAgB;AAG3E,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps &\n  Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  onClick,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={handleClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"names":["React","Icon24Reorder","Icon24ReorderIos","classNames","usePlatform","Platform","Touch","styles","CellDragger","onDragStart","onDragMove","onDragEnd","onClick","className","restProps","platform","handleClick","event","preventDefault","onStart","onMoveY","onEnd","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,mBAAmB;AACnE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,OAAOC,YAAY,2BAA2B;AAK9C,OAAO,MAAMC,cAAc,CAAC,EAC1BC,YAAW,EACXC,WAAU,EACVC,UAAS,EACTC,QAAO,EACPC,UAAS,EACT,GAAGC,WACc,GAAK;IACtB,MAAMC,WAAWX;IAEjB,MAAMY,cAAc,CAACC,QAAyC;QAC5DA,MAAMC,cAAc;QACpB,IAAIN,SAAS;YACXA,QAAQK;QACV,CAAC;IACH;IAEA,qBACE,oBAACX;QACCO,WAAWV,WAAWI,MAAM,CAAC,cAAc,EAAEM;QAC7CM,SAASV;QACTW,SAASV;QACTW,OAAOV;QACPC,SAASI;QACR,GAAGF,SAAS;OAEZC,aAAaV,SAASiB,GAAG,iBAAG,oBAACpB,wCAAsB,oBAACD,oBAAgB;AAG3E,EAAE"}

package/dist/cssm/components/Cell/useDraggable.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { TouchEvent } from '../Touch/Touch';
 import { CellProps } from './Cell';
 export interface DraggableProps {
-    onDragStart: () => void;
-    onDragEnd: () => void;
-    onDragMove: (e: TouchEvent) => void;
+    onDragStart(event: TouchEvent): void;
+    onDragEnd(event: TouchEvent): void;
+    onDragMove(event: TouchEvent): void;
 }
 interface UseDraggableProps extends DraggableProps {
     dragging: boolean;

package/dist/cssm/components/Cell/useDraggable.js

@@ -6,11 +6,13 @@ export const useDraggable = ({ rootElRef , onDragFinish  })=>{
     const [dragEndIndex, setDragEndIndex] = React.useState(0);
     const [dragShift, setDragShift] = React.useState(0);
     const [dragDirection, setDragDirection] = React.useState(undefined);
-    const onDragStart = ()=>{
+    const onDragStart = (event)=>{
         const rootEl = rootElRef.current;
         if (!rootEl) {
             return;
         }
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         setDragging(true);
         let _siblings = [];
         if (rootEl.parentElement?.childNodes) {
@@ -22,14 +24,15 @@ export const useDraggable = ({ rootElRef , onDragFinish  })=>{
         setSiblings(_siblings);
         setDragShift(0);
     };
-    const onDragMove = (e)=>{
-        e.originalEvent.preventDefault();
+    const onDragMove = (event)=>{
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         const rootEl = rootElRef.current;
         if (rootEl) {
-            rootEl.style.transform = `translateY(${e.shiftY}px)`;
+            rootEl.style.transform = `translateY(${event.shiftY}px)`;
             const rootGesture = rootEl.getBoundingClientRect();
-            setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
-            setDragShift(e.shiftY);
+            setDragDirection(dragShift - event.shiftY < 0 ? 'down' : 'up');
+            setDragShift(event.shiftY);
             setDragEndIndex(dragStartIndex);
             siblings.forEach((sibling, siblingIndex)=>{
                 const siblingGesture = sibling.getBoundingClientRect();
@@ -60,7 +63,9 @@ export const useDraggable = ({ rootElRef , onDragFinish  })=>{
             });
         }
     };
-    const onDragEnd = ()=>{
+    const onDragEnd = (event)=>{
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         const [from, to] = [
             dragStartIndex,
             dragEndIndex

package/dist/cssm/components/Cell/useDraggable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n  onDragStart: () => void;\n  onDragEnd: () => void;\n  onDragMove: (e: TouchEvent) => void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up' | undefined>(undefined);\n\n  const onDragStart = () => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (e: TouchEvent) => {\n    e.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${e.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');\n      setDragShift(e.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === 'down') {\n              sibling.style.transform = 'translateY(-100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === 'up') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === 'up') {\n              sibling.style.transform = 'translateY(100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === 'down') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = () => {\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = '';\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"names":["React","useDraggable","rootElRef","onDragFinish","dragging","setDragging","useState","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","undefined","onDragStart","rootEl","current","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","e","originalEvent","preventDefault","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n  onDragStart(event: TouchEvent): void;\n  onDragEnd(event: TouchEvent): void;\n  onDragMove(event: TouchEvent): void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up' | undefined>(undefined);\n\n  const onDragStart = (event: TouchEvent) => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${event.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - event.shiftY < 0 ? 'down' : 'up');\n      setDragShift(event.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === 'down') {\n              sibling.style.transform = 'translateY(-100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === 'up') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === 'up') {\n              sibling.style.transform = 'translateY(100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === 'down') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = '';\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"names":["React","useDraggable","rootElRef","onDragFinish","dragging","setDragging","useState","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","undefined","onDragStart","event","rootEl","current","originalEvent","stopPropagation","preventDefault","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAc/B,OAAO,MAAMC,eAAe,CAAwB,EAClDC,UAAS,EACTC,aAAY,EAGb,GAAK;IACJ,MAAM,CAACC,UAAUC,YAAY,GAAGL,MAAMM,QAAQ,CAAU,KAAK;IAE7D,MAAM,CAACC,UAAUC,YAAY,GAAGR,MAAMM,QAAQ,CAAgB,EAAE;IAChE,MAAM,CAACG,gBAAgBC,kBAAkB,GAAGV,MAAMM,QAAQ,CAAS;IACnE,MAAM,CAACK,cAAcC,gBAAgB,GAAGZ,MAAMM,QAAQ,CAAS;IAC/D,MAAM,CAACO,WAAWC,aAAa,GAAGd,MAAMM,QAAQ,CAAS;IACzD,MAAM,CAACS,eAAeC,iBAAiB,GAAGhB,MAAMM,QAAQ,CAA4BW;IAEpF,MAAMC,cAAc,CAACC,QAAsB;QACzC,MAAMC,SAASlB,UAAUmB,OAAO;QAChC,IAAI,CAACD,QAAQ;YACX;QACF,CAAC;QACDD,MAAMG,aAAa,CAACC,eAAe;QACnCJ,MAAMG,aAAa,CAACE,cAAc;QAElCnB,YAAY,IAAI;QAEhB,IAAIoB,YAA2B,EAAE;QACjC,IAAIL,OAAOM,aAAa,EAAEC,YAAY;YACpCF,YAAYG,MAAMC,IAAI,CAACT,OAAOM,aAAa,CAACI,QAAQ;QACtD,CAAC;QACD,MAAMC,MAAMN,UAAUO,OAAO,CAACZ;QAE9BV,kBAAkBqB;QAClBnB,gBAAgBmB;QAChBvB,YAAYiB;QACZX,aAAa;IACf;IAEA,MAAMmB,aAAa,CAACd,QAAsB;QACxCA,MAAMG,aAAa,CAACC,eAAe;QACnCJ,MAAMG,aAAa,CAACE,cAAc;QAElC,MAAMJ,SAASlB,UAAUmB,OAAO;QAEhC,IAAID,QAAQ;YACVA,OAAOc,KAAK,CAACC,SAAS,GAAG,CAAC,WAAW,EAAEhB,MAAMiB,MAAM,CAAC,GAAG,CAAC;YACxD,MAAMC,cAAcjB,OAAOkB,qBAAqB;YAEhDtB,iBAAiBH,YAAYM,MAAMiB,MAAM,GAAG,IAAI,SAAS,IAAI;YAC7DtB,aAAaK,MAAMiB,MAAM;YACzBxB,gBAAgBH;YAEhBF,SAASgC,OAAO,CAAC,CAACC,SAAsBC,eAAyB;gBAC/D,MAAMC,iBAAiBF,QAAQF,qBAAqB;gBACpD,MAAMK,oBAAoBD,eAAeE,MAAM,GAAG;gBAElD,MAAMC,kBAAkBR,YAAYS,MAAM,GAAGJ,eAAeK,GAAG,GAAGJ;gBAClE,MAAMK,mBAAmBX,YAAYU,GAAG,GAAGL,eAAeI,MAAM,GAAGH;gBAEnE,IAAIlC,iBAAiBgC,cAAc;oBACjC,IAAII,iBAAiB;wBACnB,IAAI9B,kBAAkB,QAAQ;4BAC5ByB,QAAQN,KAAK,CAACC,SAAS,GAAG;wBAC5B,CAAC;wBAEDvB,gBAAgB,CAACD,eAAiBA,eAAe;oBACnD,CAAC;oBACD,IAAIqC,oBAAoBjC,kBAAkB,MAAM;wBAC9CyB,QAAQN,KAAK,CAACC,SAAS,GAAG;oBAC5B,CAAC;gBACH,OAAO,IAAI1B,iBAAiBgC,cAAc;oBACxC,IAAIO,kBAAkB;wBACpB,IAAIjC,kBAAkB,MAAM;4BAC1ByB,QAAQN,KAAK,CAACC,SAAS,GAAG;wBAC5B,CAAC;wBAEDvB,gBAAgB,CAACD,eAAiBA,eAAe;oBACnD,CAAC;oBACD,IAAIkC,mBAAmB9B,kBAAkB,QAAQ;wBAC/CyB,QAAQN,KAAK,CAACC,SAAS,GAAG;oBAC5B,CAAC;gBACH,CAAC;YACH;QACF,CAAC;IACH;IAEA,MAAMc,YAAY,CAAC9B,QAAsB;QACvCA,MAAMG,aAAa,CAACC,eAAe;QACnCJ,MAAMG,aAAa,CAACE,cAAc;QAElC,MAAM,CAACK,MAAMqB,GAAG,GAAG;YAACzC;YAAgBE;SAAa;QAEjDJ,SAASgC,OAAO,CAAC,CAACC,UAAyB;YACzCA,QAAQN,KAAK,CAACC,SAAS,GAAG;QAC5B;QAEA3B,YAAY,EAAE;QACdI,gBAAgB;QAChBF,kBAAkB;QAClBM,iBAAiBC;QACjBH,aAAa;QAEbT,YAAY,KAAK;QAEjBF,gBAAgBA,aAAa;YAAE0B;YAAMqB;QAAG;IAC1C;IAEA,MAAMC,oBAAuC;QAC3CjC;QACAe;QACAgB;QACA7C;IACF;IAEA,OAAO+C;AACT,EAAE"}

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

@@ -46,7 +46,7 @@ const chipsSelectDefaultProps = {
     const showCreatable = Boolean(creatable && creatableText && !filteredOptions.length && fieldValue);
     const handleFocus = (e)=>{
         setOpened(true);
-        setFocusedOptionIndex(0);
+        setFocusedOptionIndex(null);
         onFocus(e);
     };
     const handleClickOutside = (e)=>{
@@ -87,15 +87,13 @@ const chipsSelectDefaultProps = {
         setFocusedOptionIndex(index);
     };
     const focusOption = (nextIndex, type)=>{
-        let index = typeof nextIndex !== 'number' ? -1 : nextIndex;
+        let index = nextIndex === null ? -1 : nextIndex;
         if (type === FOCUS_ACTION_NEXT) {
             index = index + 1;
         } else if (type === FOCUS_ACTION_PREV) {
             index = index - 1;
         }
-        if (focusedOptionIndex != null) {
-            focusOptionByIndex(index, focusedOptionIndex);
-        }
+        focusOptionByIndex(index, focusedOptionIndex);
     };
     const handleKeyDown = (e)=>{
         onKeyDown(e);
@@ -150,18 +148,6 @@ const chipsSelectDefaultProps = {
         filteredOptions,
         setFocusedOption
     ]);
-    React.useEffect(()=>{
-        const index = focusedOption ? filteredOptions.findIndex(({ value  })=>value === focusedOption.value) : -1;
-        if (index === -1 && !!filteredOptions.length && !showCreatable && closeAfterSelect) {
-            setFocusedOption(filteredOptions[0]);
-        }
-    }, [
-        filteredOptions,
-        focusedOption,
-        showCreatable,
-        closeAfterSelect,
-        setFocusedOption
-    ]);
     useGlobalEventListener(document, 'click', handleClickOutside);
     const renderChipWrapper = (renderChipProps)=>{
         if (renderChipProps === undefined) {

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(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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"}
+{"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 && 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  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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"}