@vkontakte/vkui 5.2.0 → 5.2.1

package/dist/components/CardScroll/CardScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardScroll.js","names":["React","classNames","getSizeXClassName","useAdaptivity","HorizontalScroll","useDOM","CardScroll","children","size","showArrows","withSpaces","className","restProps","sizeX","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","styles"],"sources":["../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getSizeXClassName } from '../../helpers/getSizeXClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { useDOM } from '../../lib/dom';\nimport styles from './CardScroll.module.css';\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  showArrows?: HorizontalScrollProps['showArrows'];\n  withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  withSpaces = true,\n  className,\n  ...restProps\n}: CardScrollProps) => {\n  const { sizeX } = useAdaptivity();\n\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardScroll'],\n        getSizeXClassName(styles['CardScroll'], sizeX),\n        styles[`CardScroll--size-${size}`],\n        withSpaces && styles['CardScroll--withSpaces'],\n        className,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div className={styles['CardScroll__in']} ref={refContainer}>\n          <span className={styles['CardScroll__gap']} ref={gapRef} />\n          {children}\n          <span className={styles['CardScroll__gap']} />\n        </div>\n      </HorizontalScroll>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CardScroll.js","names":["React","classNames","useDOM","HorizontalScroll","CardScroll","children","size","showArrows","withSpaces","className","restProps","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","styles"],"sources":["../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useDOM } from '../../lib/dom';\nimport { HorizontalScroll, HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport styles from './CardScroll.module.css';\n\nexport interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  showArrows?: HorizontalScrollProps['showArrows'];\n  withSpaces?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  withSpaces = true,\n  className,\n  ...restProps\n}: CardScrollProps) => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['CardScroll'],\n        styles[`CardScroll--size-${size}`],\n        withSpaces && styles['CardScroll--withSpaces'],\n        className,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n      >\n        <div className={styles['CardScroll__in']} ref={refContainer}>\n          <span className={styles['CardScroll__gap']} ref={gapRef} />\n          {children}\n          <span className={styles['CardScroll__gap']} />\n        </div>\n      </HorizontalScroll>\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { SimpleCellProps } from '../SimpleCell/SimpleCell';
 import { HasRootRef } from '../../types';
 import { RemovableProps } from '../Removable/Removable';
+import { SimpleCellProps } from '../SimpleCell/SimpleCell';
 export interface CellProps extends Omit<SimpleCellProps, 'getRootRef'>, RemovableProps, HasRootRef<HTMLDivElement> {
     mode?: 'removable' | 'selectable';
     /**

package/dist/components/Cell/Cell.js

@@ -4,15 +4,15 @@ var _excluded = ["mode", "onRemove", "removePlaceholder", "onDragFinish", "befor
   _excluded2 = ["dragging"];
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
-import { Platform } from '../../lib/platform';
-import { SimpleCell } from '../SimpleCell/SimpleCell';
-import { Removable } from '../Removable/Removable';
-import { usePlatform } from '../../hooks/usePlatform';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useDraggable } from './useDraggable';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
 import { ListContext } from '../List/ListContext';
-import { CellDragger } from './CellDragger/CellDragger';
+import { Removable } from '../Removable/Removable';
+import { SimpleCell } from '../SimpleCell/SimpleCell';
 import { CellCheckbox } from './CellCheckbox/CellCheckbox';
+import { CellDragger } from './CellDragger/CellDragger';
+import { useDraggable } from './useDraggable';
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
  */

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","names":["React","classNames","noop","Platform","SimpleCell","Removable","usePlatform","useExternRef","useDraggable","ListContext","CellDragger","CellCheckbox","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","e","current"],"sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useDraggable } from './useDraggable';\nimport { ListContext } from '../List/ListContext';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n   */\n  checked?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n   */\n  defaultChecked?: boolean;\n  /**\n   * Коллбэк срабатывает при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n  /**\n   * aria-label для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n  mode,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = 'Перенести ячейку',\n  className,\n  style,\n  ...restProps\n}: CellProps) => {\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const { dragging, ...draggableProps } = useDraggable({\n    rootElRef,\n    onDragFinish,\n  });\n\n  const { toggleDrag } = React.useContext(ListContext);\n  React.useEffect(() => {\n    if (dragging) {\n      toggleDrag(true);\n      return () => toggleDrag(false);\n    }\n    return undefined;\n  }, [dragging, toggleDrag]);\n\n  let dragger;\n  if (draggable) {\n    dragger = (\n      <CellDragger\n        className={styles['Cell__dragger']}\n        aria-label={draggerLabel}\n        {...draggableProps}\n      />\n    );\n  }\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      onChange,\n      defaultChecked,\n      checked,\n      disabled,\n    };\n    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled = (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    styles['Cell'],\n    platform === Platform.IOS && styles['Cell--ios'],\n    dragging && styles['Cell--dragging'],\n    removable && styles['Cell--removable'],\n    selectable && styles['Cell--selectable'],\n    disabled && styles['Cell--disabled'],\n  );\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      className={styles['Cell__content']}\n      disabled={simpleCellDisabled}\n      Component={selectable ? 'label' : Component}\n      before={\n        <React.Fragment>\n          {draggable && platform !== Platform.IOS && dragger}\n          {selectable && checkbox}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {draggable && platform === Platform.IOS && dragger}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n      >\n        {simpleCell}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      {simpleCell}\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,QAAQ,iBAAiB;AAClD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,UAAU,QAAyB,0BAA0B;AAEtE,SAASC,SAAS,QAAwB,wBAAwB;AAClE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,WAAW,QAAQ,qBAAqB;AACjD,SAASC,WAAW,QAAQ,2BAA2B;AACvD,SAASC,YAAY,QAA2B,6BAA6B;AAqC7E;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAoBA;EAAA,IAnBfC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,SAAQ,8BAAGZ,IAAI;IAAA,6BACfa,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAC7BC,YAAY,QAAZA,YAAY;IACZC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACdC,UAAU,QAAVA,UAAU;IAAA,yBACVC,YAAY;IAAZA,YAAY,kCAAG,kBAAkB;IACjCC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACFC,SAAS;EAEZ,IAAMC,UAAU,GAAGnB,IAAI,KAAK,YAAY;EACxC,IAAMoB,SAAS,GAAGpB,IAAI,KAAK,WAAW;EAEtC,IAAMqB,QAAQ,GAAG5B,WAAW,EAAE;EAE9B,IAAM6B,SAAS,GAAG5B,YAAY,CAACoB,UAAU,CAAC;EAE1C,oBAAwCnB,YAAY,CAAC;MACnD2B,SAAS,EAATA,SAAS;MACTnB,YAAY,EAAZA;IACF,CAAC,CAAC;IAHMoB,QAAQ,iBAARA,QAAQ;IAAKC,cAAc;EAKnC,wBAAuBrC,KAAK,CAACsC,UAAU,CAAC7B,WAAW,CAAC;IAA5C8B,UAAU,qBAAVA,UAAU;EAClBvC,KAAK,CAACwC,SAAS,CAAC,YAAM;IACpB,IAAIJ,QAAQ,EAAE;MACZG,UAAU,CAAC,IAAI,CAAC;MAChB,OAAO;QAAA,OAAMA,UAAU,CAAC,KAAK,CAAC;MAAA;IAChC;IACA,OAAOE,SAAS;EAClB,CAAC,EAAE,CAACL,QAAQ,EAAEG,UAAU,CAAC,CAAC;EAE1B,IAAIG,OAAO;EACX,IAAItB,SAAS,EAAE;IACbsB,OAAO,gBACL,oBAAC,WAAW;MACV,SAAS,qBAA0B;MACnC,cAAYd;IAAa,GACrBS,cAAc,EAErB;EACH;EAEA,IAAIM,QAAQ;EACZ,IAAIX,UAAU,EAAE;IACd,IAAMY,aAAgC,GAAG;MACvCrB,IAAI,EAAJA,IAAI;MACJC,KAAK,EAALA,KAAK;MACLF,QAAQ,EAARA,QAAQ;MACRI,cAAc,EAAdA,cAAc;MACdD,OAAO,EAAPA,OAAO;MACPN,QAAQ,EAARA;IACF,CAAC;IACDwB,QAAQ,gBAAG,oBAAC,YAAY;MAAC,SAAS;IAA2B,GAAKC,aAAa,EAAI;EACrF;EAEA,IAAMC,kBAAkB,GAAIzB,SAAS,IAAI,CAACY,UAAU,IAAKC,SAAS,IAAId,QAAQ;EAC9E,IAAM2B,SAAS,GAAG,CAACD,kBAAkB,IAAI,CAACT,QAAQ;EAElD,IAAMW,WAAW,GAAG9C,UAAU,aAE5BiC,QAAQ,KAAK/B,QAAQ,CAAC6C,GAAG,mBAAuB,EAChDZ,QAAQ,wBAA4B,EACpCH,SAAS,yBAA6B,EACtCD,UAAU,0BAA8B,EACxCb,QAAQ,wBAA4B,CACrC;EAED,IAAM8B,UAAU,gBACd,oBAAC,UAAU;IACT,SAAS,EAAEH,SAAU;IACrB,QAAQ,EAAEA;EAAU,GAChBf,SAAS;IACb,SAAS,qBAA0B;IACnC,QAAQ,EAAEc,kBAAmB;IAC7B,SAAS,EAAEb,UAAU,GAAG,OAAO,GAAGX,SAAU;IAC5C,MAAM,eACJ,oBAAC,KAAK,CAAC,QAAQ,QACZD,SAAS,IAAIc,QAAQ,KAAK/B,QAAQ,CAAC6C,GAAG,IAAIN,OAAO,EACjDV,UAAU,IAAIW,QAAQ,EACtB1B,MAAM,CAEV;IACD,KAAK,eACH,oBAAC,KAAK,CAAC,QAAQ,QACZG,SAAS,IAAIc,QAAQ,KAAK/B,QAAQ,CAAC6C,GAAG,IAAIN,OAAO,EACjDxB,KAAK;EAET,GAEJ;EAED,IAAIe,SAAS,EAAE;IACb,oBACE,oBAAC,SAAS;MACR,SAAS,EAAEhC,UAAU,CAAC8C,WAAW,EAAElB,SAAS,CAAE;MAC9C,KAAK,EAAEC,KAAM;MACb,UAAU,EAAEK,SAAU;MACtB,iBAAiB,EAAEpB,iBAAkB;MACrC,QAAQ,EAAE,kBAACmC,CAAC;QAAA,OAAKpC,SAAQ,CAACoC,CAAC,EAAEf,SAAS,CAACgB,OAAO,CAAC;MAAA;IAAC,GAE/CF,UAAU,CACD;EAEhB;EAEA,oBACE;IAAK,SAAS,EAAEhD,UAAU,CAAC8C,WAAW,EAAElB,SAAS,CAAE;IAAC,KAAK,EAAEC,KAAM;IAAC,GAAG,EAAEK;EAAU,GAC9Ec,UAAU,CACP;AAEV,CAAC"}
+{"version":3,"file":"Cell.js","names":["React","classNames","noop","useExternRef","usePlatform","Platform","ListContext","Removable","SimpleCell","CellCheckbox","CellDragger","useDraggable","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","e","current"],"sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { ListContext } from '../List/ListContext';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { useDraggable } from './useDraggable';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'removable' | 'selectable';\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения\n   */\n  checked?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент\n   */\n  defaultChecked?: boolean;\n  /**\n   * Коллбэк срабатывает при завершении перетаскивания.\n   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.\n   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице\n   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.\n   */\n  onDragFinish?: ({ from, to }: { from: number; to: number }) => void;\n  /**\n   * aria-label для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell = ({\n  mode,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  draggable,\n  Component,\n  onChange,\n  name,\n  value,\n  checked,\n  defaultChecked,\n  getRootRef,\n  draggerLabel = 'Перенести ячейку',\n  className,\n  style,\n  ...restProps\n}: CellProps) => {\n  const selectable = mode === 'selectable';\n  const removable = mode === 'removable';\n\n  const platform = usePlatform();\n\n  const rootElRef = useExternRef(getRootRef);\n\n  const { dragging, ...draggableProps } = useDraggable({\n    rootElRef,\n    onDragFinish,\n  });\n\n  const { toggleDrag } = React.useContext(ListContext);\n  React.useEffect(() => {\n    if (dragging) {\n      toggleDrag(true);\n      return () => toggleDrag(false);\n    }\n    return undefined;\n  }, [dragging, toggleDrag]);\n\n  let dragger;\n  if (draggable) {\n    dragger = (\n      <CellDragger\n        className={styles['Cell__dragger']}\n        aria-label={draggerLabel}\n        {...draggableProps}\n      />\n    );\n  }\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      onChange,\n      defaultChecked,\n      checked,\n      disabled,\n    };\n    checkbox = <CellCheckbox className={styles['Cell__checkbox']} {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled = (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  const cellClasses = classNames(\n    styles['Cell'],\n    platform === Platform.IOS && styles['Cell--ios'],\n    dragging && styles['Cell--dragging'],\n    removable && styles['Cell--removable'],\n    selectable && styles['Cell--selectable'],\n    disabled && styles['Cell--disabled'],\n  );\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      className={styles['Cell__content']}\n      disabled={simpleCellDisabled}\n      Component={selectable ? 'label' : Component}\n      before={\n        <React.Fragment>\n          {draggable && platform !== Platform.IOS && dragger}\n          {selectable && checkbox}\n          {before}\n        </React.Fragment>\n      }\n      after={\n        <React.Fragment>\n          {draggable && platform === Platform.IOS && dragger}\n          {after}\n        </React.Fragment>\n      }\n    />\n  );\n\n  if (removable) {\n    return (\n      <Removable\n        className={classNames(cellClasses, className)}\n        style={style}\n        getRootRef={rootElRef}\n        removePlaceholder={removePlaceholder}\n        onRemove={(e) => onRemove(e, rootElRef.current)}\n      >\n        {simpleCell}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      {simpleCell}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Cell/CellCheckbox/CellCheckbox.js

@@ -3,9 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["className", "style"];
 import * as React from 'react';
 import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
 import { getPlatformClassName } from '../../../helpers/getPlatformClassName';
 import { usePlatform } from '../../../hooks/usePlatform';
-import { classNames } from '@vkontakte/vkjs';
 import { Platform } from '../../../lib/platform';
 import { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';
 export var CellCheckbox = function CellCheckbox(_ref) {

package/dist/components/Cell/CellCheckbox/CellCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellCheckbox.js","names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","getPlatformClassName","usePlatform","classNames","Platform","VisuallyHiddenInput","CellCheckbox","className","style","restProps","platform","IconOff","IOS","VKCOM","IconOn"],"sources":["../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { getPlatformClassName } from '../../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../../lib/platform';\nimport { CellProps } from '../Cell';\nimport { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './CellCheckbox.module.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> &\n  React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <span\n      className={classNames(\n        styles['CellCheckbox'],\n        getPlatformClassName(styles['CellCheckbox'], platform),\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        className={styles['CellCheckbox__input']}\n        type=\"checkbox\"\n        {...restProps}\n      />\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n        aria-hidden\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n        aria-hidden\n      >\n        <IconOn />\n      </span>\n    </span>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,kBAAkB;AACzB,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,mBAAmB,QAAQ,+CAA+C;AAMnF,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA8D;EAAA,IAAxDC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAC3D,IAAMC,QAAQ,GAAGR,WAAW,EAAE;EAE9B,IAAMS,OAAO,GACXD,QAAQ,KAAKN,QAAQ,CAACQ,GAAG,IAAIF,QAAQ,KAAKN,QAAQ,CAACS,KAAK,GACpDd,oBAAoB,GACpBF,iBAAiB;EAEvB,IAAMiB,MAAM,GACVJ,QAAQ,KAAKN,QAAQ,CAACQ,GAAG,IAAIF,QAAQ,KAAKN,QAAQ,CAACS,KAAK,GACpDb,mBAAmB,GACnBF,gBAAgB;EAEtB,oBACE;IACE,SAAS,EAAEK,UAAU,qBAEnBF,oBAAoB,qBAAyBS,QAAQ,CAAC,EACtDH,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,mBAAmB;IAClB,SAAS,2BAAgC;IACzC,IAAI,EAAC;EAAU,GACXC,SAAS,EACb,eACF;IACE,SAAS,EAAEN,UAAU,yDAAkE;IACvF;EAAW,gBAEX,oBAAC,OAAO,OAAG,CACN,eACP;IACE,SAAS,EAAEA,UAAU,wDAAiE;IACtF;EAAW,gBAEX,oBAAC,MAAM,OAAG,CACL,CACF;AAEX,CAAC"}
+{"version":3,"file":"CellCheckbox.js","names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","getPlatformClassName","usePlatform","Platform","VisuallyHiddenInput","CellCheckbox","className","style","restProps","platform","IconOff","IOS","VKCOM","IconOn"],"sources":["../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getPlatformClassName } from '../../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { VisuallyHiddenInput } from '../../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> &\n  React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const CellCheckbox = ({ className, style, ...restProps }: CellCheckboxProps) => {\n  const platform = usePlatform();\n\n  const IconOff =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOff\n      : Icon24CheckBoxOff;\n\n  const IconOn =\n    platform === Platform.IOS || platform === Platform.VKCOM\n      ? Icon24CheckCircleOn\n      : Icon24CheckBoxOn;\n\n  return (\n    <span\n      className={classNames(\n        styles['CellCheckbox'],\n        getPlatformClassName(styles['CellCheckbox'], platform),\n        className,\n      )}\n      style={style}\n    >\n      <VisuallyHiddenInput\n        className={styles['CellCheckbox__input']}\n        type=\"checkbox\"\n        {...restProps}\n      />\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--off'])}\n        aria-hidden\n      >\n        <IconOff />\n      </span>\n      <span\n        className={classNames(styles['CellCheckbox__icon'], styles['CellCheckbox__icon--on'])}\n        aria-hidden\n      >\n        <IconOn />\n      </span>\n    </span>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,kBAAkB;AACzB,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,mBAAmB,QAAQ,+CAA+C;AAOnF,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA8D;EAAA,IAAxDC,SAAS,QAATA,SAAS;IAAEC,KAAK,QAALA,KAAK;IAAKC,SAAS;EAC3D,IAAMC,QAAQ,GAAGP,WAAW,EAAE;EAE9B,IAAMQ,OAAO,GACXD,QAAQ,KAAKN,QAAQ,CAACQ,GAAG,IAAIF,QAAQ,KAAKN,QAAQ,CAACS,KAAK,GACpDd,oBAAoB,GACpBF,iBAAiB;EAEvB,IAAMiB,MAAM,GACVJ,QAAQ,KAAKN,QAAQ,CAACQ,GAAG,IAAIF,QAAQ,KAAKN,QAAQ,CAACS,KAAK,GACpDb,mBAAmB,GACnBF,gBAAgB;EAEtB,oBACE;IACE,SAAS,EAAEG,UAAU,qBAEnBC,oBAAoB,qBAAyBQ,QAAQ,CAAC,EACtDH,SAAS,CACT;IACF,KAAK,EAAEC;EAAM,gBAEb,oBAAC,mBAAmB;IAClB,SAAS,2BAAgC;IACzC,IAAI,EAAC;EAAU,GACXC,SAAS,EACb,eACF;IACE,SAAS,EAAER,UAAU,yDAAkE;IACvF;EAAW,gBAEX,oBAAC,OAAO,OAAG,CACN,eACP;IACE,SAAS,EAAEA,UAAU,wDAAiE;IACtF;EAAW,gBAEX,oBAAC,MAAM,OAAG,CACL,CACF;AAEX,CAAC"}

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

@@ -3,9 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["onDragStart", "onDragMove", "onDragEnd", "className"];
 import * as React from 'react';
 import { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
 import { getPlatformClassName } from '../../../helpers/getPlatformClassName';
 import { usePlatform } from '../../../hooks/usePlatform';
-import { classNames } from '@vkontakte/vkjs';
 import { Platform } from '../../../lib/platform';
 import { Touch } from '../../Touch/Touch';
 export var CellDragger = function CellDragger(_ref) {

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

@@ -1 +1 @@
-{"version":3,"file":"CellDragger.js","names":["React","Icon24Reorder","Icon24ReorderIos","getPlatformClassName","usePlatform","classNames","Platform","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","onClick","useCallback","e","preventDefault","IOS"],"sources":["../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { getPlatformClassName } from '../../../helpers/getPlatformClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { classNames } from '@vkontakte/vkjs';\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(\n        styles['CellDragger'],\n        getPlatformClassName(styles['CellDragger'], platform),\n        className,\n      )}\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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,kBAAkB;AAClE,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAMzC,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGV,WAAW,EAAE;EAE9B,IAAMW,OAAO,GAAGf,KAAK,CAACgB,WAAW,CAAC,UAACC,CAAmB,EAAK;IACzDA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK;IACJ,SAAS,EAAEb,UAAU,oBAEnBF,oBAAoB,oBAAwBW,QAAQ,CAAC,EACrDF,SAAS,CACT;IACF,OAAO,EAAEH,WAAY;IACrB,OAAO,EAAEC,UAAW;IACpB,KAAK,EAAEC,SAAU;IACjB,OAAO,EAAEI;EAAQ,GACbF,SAAS,GAEZC,QAAQ,KAAKR,QAAQ,CAACa,GAAG,gBAAG,oBAAC,gBAAgB,OAAG,gBAAG,oBAAC,aAAa,OAAG,CAC/D;AAEZ,CAAC"}
+{"version":3,"file":"CellDragger.js","names":["React","Icon24Reorder","Icon24ReorderIos","classNames","getPlatformClassName","usePlatform","Platform","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","onClick","useCallback","e","preventDefault","IOS"],"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 { getPlatformClassName } from '../../../helpers/getPlatformClassName';\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(\n        styles['CellDragger'],\n        getPlatformClassName(styles['CellDragger'], platform),\n        className,\n      )}\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"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,kBAAkB;AAClE,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,KAAK,QAAQ,mBAAmB;AAMzC,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAMA;EAAA,IALtBC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGT,WAAW,EAAE;EAE9B,IAAMU,OAAO,GAAGf,KAAK,CAACgB,WAAW,CAAC,UAACC,CAAmB,EAAK;IACzDA,CAAC,CAACC,cAAc,EAAE;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,oBACE,oBAAC,KAAK;IACJ,SAAS,EAAEf,UAAU,oBAEnBC,oBAAoB,oBAAwBU,QAAQ,CAAC,EACrDF,SAAS,CACT;IACF,OAAO,EAAEH,WAAY;IACrB,OAAO,EAAEC,UAAW;IACpB,KAAK,EAAEC,SAAU;IACjB,OAAO,EAAEI;EAAQ,GACbF,SAAS,GAEZC,QAAQ,KAAKR,QAAQ,CAACa,GAAG,gBAAG,oBAAC,gBAAgB,OAAG,gBAAG,oBAAC,aAAa,OAAG,CAC/D;AAEZ,CAAC"}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type TappableProps } from '../Tappable/Tappable';
 import { HasRef, HasRootRef } from '../../types';
+import { type TappableProps } from '../Tappable/Tappable';
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement>, Pick<TappableProps, 'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'> {
     description?: React.ReactNode;
     indeterminate?: boolean;

package/dist/components/Checkbox/Checkbox.js

@@ -1,19 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "hoverMode", "activeMode", "hasHover", "hasActive", "focusVisibleMode", "onChange"];
+var _sizeYClassNames;
 import * as React from 'react';
-import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
+import { Icon20CheckBoxIndetermanate, Icon20CheckBoxOff, Icon20CheckBoxOn, Icon24CheckBoxOff, Icon24CheckBoxOn } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { Platform } from '../../lib/platform';
-import { Icon20CheckBoxOn, Icon24CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOff, Icon20CheckBoxIndetermanate } from '@vkontakte/icons';
-import { usePlatform } from '../../hooks/usePlatform';
-import { Footnote } from '../Typography/Footnote/Footnote';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useExternRef } from '../../hooks/useExternRef';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
-import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+import { useExternRef } from '../../hooks/useExternRef';
+import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
+import { Platform } from '../../lib/platform';
 import { warnOnce } from '../../lib/warnOnce';
+import { ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+var sizeYClassNames = (_sizeYClassNames = {
+  none: "vkuiCheckbox--sizeY-none"
+}, _defineProperty(_sizeYClassNames, SizeType.COMPACT, "vkuiCheckbox--sizeY-compact"), _defineProperty(_sizeYClassNames, SizeType.REGULAR, "vkuiCheckbox--sizeY-regular"), _sizeYClassNames);
 var warn = warnOnce('Checkbox');
 
 /**
@@ -38,7 +43,8 @@ export var Checkbox = function Checkbox(_ref) {
   var inputRef = useExternRef(getRef);
   var platform = usePlatform();
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var _useAdaptivityConditi = useAdaptivityConditionalRender(),
     adaptiveSizeY = _useAdaptivityConditi.sizeY;
   React.useEffect(function () {
@@ -69,7 +75,7 @@ export var Checkbox = function Checkbox(_ref) {
   }
   return /*#__PURE__*/React.createElement(Tappable, {
     Component: "label",
-    className: classNames("vkuiCheckbox", platform === Platform.VKCOM && "vkuiCheckbox--vkcom", getSizeYClassName("vkuiCheckbox", sizeY), !(hasReactNode(children) || hasReactNode(description)) && "vkuiCheckbox--simple", className),
+    className: classNames("vkuiCheckbox", platform === Platform.VKCOM && "vkuiCheckbox--vkcom", sizeYClassNames[sizeY], !(hasReactNode(children) || hasReactNode(description)) && "vkuiCheckbox--simple", className),
     style: style,
     disabled: restProps.disabled,
     activeEffectDelay: platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY,

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","ACTIVE_EFFECT_DELAY","Tappable","classNames","hasReactNode","Platform","Icon20CheckBoxOn","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","usePlatform","Footnote","getSizeYClassName","useAdaptivity","useExternRef","useAdaptivityConditionalRender","VisuallyHiddenInput","warnOnce","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","VKCOM","disabled","IOS","compact","regular"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { type TappableProps, ACTIVE_EFFECT_DELAY, Tappable } from '../Tappable/Tappable';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport {\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOn,\n  Icon20CheckBoxOff,\n  Icon24CheckBoxOff,\n  Icon20CheckBoxIndetermanate,\n} from '@vkontakte/icons';\nimport { HasRef, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport { warnOnce } from '../../lib/warnOnce';\nimport styles from './Checkbox.module.css';\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        getSizeYClassName(styles['Checkbox'], sizeY),\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        className={styles['Checkbox__input']}\n        getRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHiddenInput","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","VKCOM","disabled","IOS","compact","regular"],"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        className={styles['Checkbox__input']}\n        getRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,2BAA2B,EAC3BC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,gBAAgB,QACX,kBAAkB;AACzB,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,8BAA8B,QAAQ,4CAA4C;AAC3F,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,QAAQ,QAAQ,oBAAoB;AAE7C,SAASC,mBAAmB,EAAEC,QAAQ,QAA4B,sBAAsB;AACxF,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,mBAAmB,QAAQ,4CAA4C;AAGhF,IAAMC,eAAe;EACnBC,IAAI;AAAgC,qCACnCR,QAAQ,CAACS,OAAO,oEAChBT,QAAQ,CAACU,OAAO,mDAClB;AAeD,IAAMC,IAAI,GAAGT,QAAQ,CAAC,UAAU,CAAC;;AAEjC;AACA;AACA;AACA,OAAO,IAAMU,QAAQ,GAAG,SAAXA,QAAQ,OAgBA;EAAA,IAfnBC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,WAAW,QAAXA,WAAW;IACXC,aAAa,QAAbA,aAAa;IACbC,oBAAoB,QAApBA,oBAAoB;IACpBC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,gBAAgB,QAAhBA,gBAAgB;IAChBC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAMC,QAAQ,GAAG9B,YAAY,CAACmB,MAAM,CAAC;EACrC,IAAMY,QAAQ,GAAG9B,WAAW,EAAE;EAC9B,qBAA2BH,aAAa,EAAE;IAAA,sCAAlCkC,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,4BAAiCjC,8BAA8B,EAAE;IAAlDkC,aAAa,yBAApBD,KAAK;EAEb1C,KAAK,CAAC4C,SAAS,CAAC,YAAM;IACpB,IAAMC,kBAAkB,GAAGd,aAAa,KAAKe,SAAS,GAAGd,oBAAoB,GAAGD,aAAa;IAE7F,IAAIS,QAAQ,CAACO,OAAO,EAAE;MACpBP,QAAQ,CAACO,OAAO,CAAChB,aAAa,GAAGiB,OAAO,CAACH,kBAAkB,CAAC;IAC9D;EACF,CAAC,EAAE,CAACb,oBAAoB,EAAED,aAAa,EAAES,QAAQ,CAAC,CAAC;EAEnD,IAAMS,YAAuC,GAAGjD,KAAK,CAACkD,WAAW,CAC/D,UAACC,KAA0C,EAAK;IAC9C,IACEnB,oBAAoB,KAAKc,SAAS,IAClCf,aAAa,KAAKe,SAAS,IAC3BP,SAAS,CAACa,OAAO,KAAKN,SAAS,IAC/BN,QAAQ,CAACO,OAAO,EAChB;MACAP,QAAQ,CAACO,OAAO,CAAChB,aAAa,GAAG,KAAK;IACxC;IACA,IAAIA,aAAa,KAAKe,SAAS,IAAIN,QAAQ,CAACO,OAAO,EAAE;MACnDP,QAAQ,CAACO,OAAO,CAAChB,aAAa,GAAGA,aAAa;IAChD;IACAO,QAAQ,IAAIA,QAAQ,CAACa,KAAK,CAAC;EAC7B,CAAC,EACD,CAACnB,oBAAoB,EAAED,aAAa,EAAEQ,SAAS,CAACa,OAAO,EAAEd,QAAQ,EAAEE,QAAQ,CAAC,CAC7E;EAED,IAAIa,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;IAC1C,IAAIvB,oBAAoB,IAAIO,SAAS,CAACiB,cAAc,EAAE;MACpDjC,IAAI,CAAC,uEAAuE,EAAE,OAAO,CAAC;IACxF;IAEA,IAAIQ,aAAa,IAAIQ,SAAS,CAACa,OAAO,EAAE;MACtC7B,IAAI,CAAC,yDAAyD,EAAE,OAAO,CAAC;IAC1E;IAEA,IAAIgB,SAAS,CAACiB,cAAc,IAAIjB,SAAS,CAACa,OAAO,EAAE;MACjD7B,IAAI,CAAC,0DAA0D,EAAE,OAAO,CAAC;IAC3E;EACF;EAEA,oBACE,oBAAC,QAAQ;IACP,SAAS,EAAC,OAAO;IACjB,SAAS,EAAEjB,UAAU,iBAEnBmC,QAAQ,KAAK5B,QAAQ,CAAC4C,KAAK,yBAA6B,EACxDtC,eAAe,CAACuB,KAAK,CAAC,EACtB,EAAEnC,YAAY,CAACkB,QAAQ,CAAC,IAAIlB,YAAY,CAACuB,WAAW,CAAC,CAAC,0BAA8B,EACpFJ,SAAS,CACT;IACF,KAAK,EAAEC,KAAM;IACb,QAAQ,EAAEY,SAAS,CAACmB,QAAS;IAC7B,iBAAiB,EAAEjB,QAAQ,KAAK5B,QAAQ,CAAC8C,GAAG,GAAG,GAAG,GAAG5C,mBAAoB;IACzE,UAAU,EAAEa,UAAW;IACvB,SAAS,EAAEK,SAAU;IACrB,UAAU,EAAEC,UAAW;IACvB,QAAQ,EAAEC,QAAS;IACnB,SAAS,EAAEC,SAAU;IACrB,gBAAgB,EAAEC;EAAiB,gBAEnC,oBAAC,mBAAmB,eACdE,SAAS;IACb,QAAQ,EAAEU,YAAa;IACvB,IAAI,EAAC,UAAU;IACf,SAAS,uBAA4B;IACrC,MAAM,EAAET;EAAS,GACjB,eACF;IAAK,SAAS,EAAElC,UAAU;EAAyD,GAChFmC,QAAQ,KAAK5B,QAAQ,CAAC4C,KAAK,gBAC1B,oBAAC,gBAAgB,OAAG,gBAEpB,oBAAC,KAAK,CAAC,QAAQ,QACZd,aAAa,CAACiB,OAAO,iBACpB,oBAAC,gBAAgB;IAAC,SAAS,EAAEjB,aAAa,CAACiB,OAAO,CAAClC;EAAU,EAC9D,EACAiB,aAAa,CAACkB,OAAO,iBACpB,oBAAC,gBAAgB;IAAC,SAAS,EAAElB,aAAa,CAACkB,OAAO,CAACnC;EAAU,EAC9D,CAEJ,CACG,eACN;IAAK,SAAS,EAAEpB,UAAU;EAA0D,GACjFmC,QAAQ,KAAK5B,QAAQ,CAAC4C,KAAK,gBAC1B,oBAAC,iBAAiB,OAAG,gBAErB,oBAAC,KAAK,CAAC,QAAQ,QACZd,aAAa,CAACiB,OAAO,iBACpB,oBAAC,iBAAiB;IAAC,SAAS,EAAEjB,aAAa,CAACiB,OAAO,CAAClC;EAAU,EAC/D,EACAiB,aAAa,CAACkB,OAAO,iBACpB,oBAAC,iBAAiB;IAAC,SAAS,EAAElB,aAAa,CAACkB,OAAO,CAACnC;EAAU,EAC/D,CAEJ,CACG,eACN;IACE,SAAS,EAAEpB,UAAU;EAAoE,GAExFmC,QAAQ,KAAK5B,QAAQ,CAAC4C,KAAK,gBAC1B,oBAAC,2BAA2B;IAAC,KAAK,EAAE,EAAG;IAAC,MAAM,EAAE;EAAG,EAAG,gBAEtD,oBAAC,KAAK,CAAC,QAAQ,QACZd,aAAa,CAACiB,OAAO,iBACpB,oBAAC,2BAA2B;IAC1B,SAAS,EAAEjB,aAAa,CAACiB,OAAO,CAAClC,SAAU;IAC3C,KAAK,EAAE,EAAG;IACV,MAAM,EAAE;EAAG,EAEd,EACAiB,aAAa,CAACkB,OAAO,iBACpB,oBAAC,2BAA2B;IAC1B,SAAS,EAAElB,aAAa,CAACkB,OAAO,CAACnC,SAAU;IAC3C,KAAK,EAAE,EAAG;IACV,MAAM,EAAE;EAAG,EAEd,CAEJ,CACG,eACN;IAAK,SAAS;EAA8B,gBAC1C;IAAK,SAAS;EAA+B,GAAED,QAAQ,CAAO,EAC7DlB,YAAY,CAACuB,WAAW,CAAC,iBACxB,oBAAC,QAAQ;IAAC,SAAS;EAAkC,GAAEA,WAAW,CACnE,CACG,CACG;AAEf,CAAC"}

package/dist/components/Chip/Chip.js

@@ -1,14 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["value", "option", "removable", "onRemove", "removeAriaLabel", "before", "after", "children", "className"];
 import * as React from 'react';
 import { Icon16Cancel } from '@vkontakte/icons';
-import { getTitleFromChildren } from '../../lib/utils';
 import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
-import { Footnote } from '../Typography/Footnote/Footnote';
-import { Tappable } from '../Tappable/Tappable';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
+import { SizeType } from '../../lib/adaptivity';
+import { getTitleFromChildren } from '../../lib/utils';
+import { Tappable } from '../Tappable/Tappable';
+import { Footnote } from '../Typography/Footnote/Footnote';
+var sizeYClassNames = _defineProperty({
+  none: "vkuiChip--sizeY-none"
+}, SizeType.COMPACT, "vkuiChip--sizeY-compact");
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
  */
@@ -29,13 +33,14 @@ export var Chip = function Chip(_ref) {
     className = _ref.className,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var _useAdaptivity = useAdaptivity(),
-    sizeY = _useAdaptivity.sizeY;
+    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
+    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
   var onRemoveWrapper = React.useCallback(function (event) {
     onRemove(event, value);
   }, [onRemove, value]);
   var title = getTitleFromChildren(children);
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames("vkuiChip", getSizeYClassName("vkuiChip", sizeY), removable && "vkuiChip--removable", className),
+    className: classNames("vkuiChip", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], removable && "vkuiChip--removable", className),
     role: "option",
     "aria-label": title
   }, restProps), /*#__PURE__*/React.createElement("div", {

package/dist/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":["React","Icon16Cancel","getTitleFromChildren","classNames","hasReactNode","noop","Footnote","Tappable","useAdaptivity","getSizeYClassName","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","className","restProps","sizeY","onRemoveWrapper","useCallback","event","title"],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Tappable } from '../Tappable/Tappable';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './Chip.module.css';\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n  value?: ChipValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: ChipOption;\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n  label: string;\n  option: T;\n  disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = '',\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = 'Удалить',\n  before = null,\n  after,\n  children,\n  className,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value],\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      className={classNames(\n        styles['Chip'],\n        getSizeYClassName(styles['Chip'], sizeY),\n        removable && styles['Chip--removable'],\n        className,\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div className={styles['Chip__in']} role=\"presentation\">\n        {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n        <Footnote className={styles['Chip__content']} title={title} aria-hidden>\n          {children}\n        </Footnote>\n        {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            className={styles['Chip__remove']}\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,iBAAiB;AAChE,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC;AA2BnE;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAWA;EAAA,sBAVfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IACVC,MAAM,QAANA,MAAM;IAAA,sBACNC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAGT,IAAI;IAAA,4BACfU,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,mBAC3BC,MAAM;IAANA,MAAM,4BAAG,IAAI;IACbC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAAkBZ,aAAa,EAAE;IAAzBa,KAAK,kBAALA,KAAK;EACb,IAAMC,eAAe,GAAGtB,KAAK,CAACuB,WAAW,CACvC,UAACC,KAAuB,EAAK;IAC3BV,QAAQ,CAACU,KAAK,EAAEb,KAAK,CAAC;EACxB,CAAC,EACD,CAACG,QAAQ,EAAEH,KAAK,CAAC,CAClB;EACD,IAAMc,KAAK,GAAGvB,oBAAoB,CAACgB,QAAQ,CAAC;EAE5C,oBACE;IACE,SAAS,EAAEf,UAAU,aAEnBM,iBAAiB,aAAiBY,KAAK,CAAC,EACxCR,SAAS,yBAA6B,EACtCM,SAAS,CACT;IACF,IAAI,EAAC,QAAQ;IACb,cAAYM;EAAM,GACdL,SAAS,gBAEb;IAAK,SAAS,gBAAqB;IAAC,IAAI,EAAC;EAAc,GACpDhB,YAAY,CAACY,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAyB,GAAEA,MAAM,CAAO,eAC/E,oBAAC,QAAQ;IAAC,SAAS,qBAA0B;IAAC,KAAK,EAAES,KAAM;IAAC;EAAW,GACpEP,QAAQ,CACA,EACVd,YAAY,CAACa,KAAK,CAAC,iBAAI;IAAK,SAAS;EAAwB,GAAEA,KAAK,CAAO,EAE3EJ,SAAS,iBACR,oBAAC,QAAQ;IACP,SAAS,EAAC,QAAQ;IAClB,SAAS,oBAAyB;IAClC,OAAO,EAAES,eAAgB;IACzB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,wBAAeP,eAAe,cAAIU,KAAK;EAAG,gBAE1C,oBAAC,YAAY,OAAG,CAEnB,CACG,CACF;AAEV,CAAC"}
+{"version":3,"file":"Chip.js","names":["React","Icon16Cancel","classNames","hasReactNode","noop","useAdaptivity","SizeType","getTitleFromChildren","Tappable","Footnote","sizeYClassNames","none","COMPACT","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","className","restProps","sizeY","onRemoveWrapper","useCallback","event","title","REGULAR"],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Chip--sizeY-none'],\n  [SizeType.COMPACT]: styles['Chip--sizeY-compact'],\n};\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n  value?: ChipValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: ChipOption;\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\nexport interface RenderChip<T extends ChipOption> extends ChipProps {\n  label: string;\n  option: T;\n  disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = '',\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = 'Удалить',\n  before = null,\n  after,\n  children,\n  className,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value],\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      className={classNames(\n        styles['Chip'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        removable && styles['Chip--removable'],\n        className,\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div className={styles['Chip__in']} role=\"presentation\">\n        {hasReactNode(before) && <div className={styles['Chip__before']}>{before}</div>}\n        <Footnote className={styles['Chip__content']} title={title} aria-hidden>\n          {children}\n        </Footnote>\n        {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            className={styles['Chip__remove']}\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,iBAAiB;AAChE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,QAAQ,QAAQ,sBAAsB;AAC/C,SAASC,QAAQ,QAAQ,iCAAiC;AAG1D,IAAMC,eAAe;EACnBC,IAAI;AAA4B,GAC/BL,QAAQ,CAACM,OAAO,4BAClB;AA0BD;AACA;AACA;AACA,OAAO,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAWA;EAAA,sBAVfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IACVC,MAAM,QAANA,MAAM;IAAA,sBACNC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,qBAChBC,QAAQ;IAARA,QAAQ,8BAAGb,IAAI;IAAA,4BACfc,eAAe;IAAfA,eAAe,qCAAG,SAAS;IAAA,mBAC3BC,MAAM;IAANA,MAAM,4BAAG,IAAI;IACbC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2BlB,aAAa,EAAE;IAAA,sCAAlCmB,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,IAAMC,eAAe,GAAGzB,KAAK,CAAC0B,WAAW,CACvC,UAACC,KAAuB,EAAK;IAC3BV,QAAQ,CAACU,KAAK,EAAEb,KAAK,CAAC;EACxB,CAAC,EACD,CAACG,QAAQ,EAAEH,KAAK,CAAC,CAClB;EACD,IAAMc,KAAK,GAAGrB,oBAAoB,CAACc,QAAQ,CAAC;EAE5C,oBACE;IACE,SAAS,EAAEnB,UAAU,aAEnBsB,KAAK,KAAKlB,QAAQ,CAACuB,OAAO,IAAInB,eAAe,CAACc,KAAK,CAAC,EACpDR,SAAS,yBAA6B,EACtCM,SAAS,CACT;IACF,IAAI,EAAC,QAAQ;IACb,cAAYM;EAAM,GACdL,SAAS,gBAEb;IAAK,SAAS,gBAAqB;IAAC,IAAI,EAAC;EAAc,GACpDpB,YAAY,CAACgB,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAyB,GAAEA,MAAM,CAAO,eAC/E,oBAAC,QAAQ;IAAC,SAAS,qBAA0B;IAAC,KAAK,EAAES,KAAM;IAAC;EAAW,GACpEP,QAAQ,CACA,EACVlB,YAAY,CAACiB,KAAK,CAAC,iBAAI;IAAK,SAAS;EAAwB,GAAEA,KAAK,CAAO,EAE3EJ,SAAS,iBACR,oBAAC,QAAQ;IACP,SAAS,EAAC,QAAQ;IAClB,SAAS,oBAAyB;IAClC,OAAO,EAAES,eAAgB;IACzB,QAAQ,EAAE,KAAM;IAChB,SAAS,EAAE,KAAM;IACjB,wBAAeP,eAAe,cAAIU,KAAK;EAAG,gBAE1C,oBAAC,YAAY,OAAG,CAEnB,CACG,CACF;AAEV,CAAC"}

package/dist/components/ChipsInput/ChipsInput.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { FormFieldProps } from '../FormField/FormField';
 import { ChipOption } from '../Chip/Chip';
 import { ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';
+import { FormFieldProps } from '../FormField/FormField';
 export interface ChipsInputProps<Option extends ChipOption> extends ChipsInputBaseProps<Option>, FormFieldProps {
 }
 /**

package/dist/components/ChipsInput/ChipsInput.js

@@ -1,9 +1,9 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["style", "className", "getRootRef", "before", "after", "status"];
 import * as React from 'react';
-import { FormField } from '../FormField/FormField';
 import { classNames } from '@vkontakte/vkjs';
 import { ChipsInputBase } from '../ChipsInputBase/ChipsInputBase';
+import { FormField } from '../FormField/FormField';
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
  */

package/dist/components/ChipsInput/ChipsInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipsInput.js","names":["React","FormField","classNames","ChipsInputBase","ChipsInput","style","className","getRootRef","before","after","status","restProps","disabled","readOnly"],"sources":["../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ChipOption } from '../Chip/Chip';\nimport { ChipsInputBase, ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';\nimport styles from './ChipsInput.module.css';\n\nexport interface ChipsInputProps<Option extends ChipOption>\n  extends ChipsInputBaseProps<Option>,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n  style,\n  className,\n  getRootRef,\n  before,\n  after,\n  status,\n  ...restProps\n}: ChipsInputProps<Option>) => {\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      className={classNames(styles['ChipsInput'], className)}\n      style={style}\n      disabled={restProps.disabled}\n      before={before}\n      after={after}\n      role=\"application\"\n      aria-disabled={restProps.disabled}\n      aria-readonly={restProps.readOnly}\n      status={status}\n    >\n      <ChipsInputBase {...restProps} />\n    </FormField>\n  );\n};\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAwB,wBAAwB;AAClE,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,cAAc,QAA6B,kCAAkC;AAOtF;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAQQ;EAAA,IAP7BC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,oBACE,oBAAC,SAAS;IACR,UAAU,EAAEJ,UAAW;IACvB,SAAS,EAAEL,UAAU,mBAAuBI,SAAS,CAAE;IACvD,KAAK,EAAED,KAAM;IACb,QAAQ,EAAEM,SAAS,CAACC,QAAS;IAC7B,MAAM,EAAEJ,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeE,SAAS,CAACC,QAAS;IAClC,iBAAeD,SAAS,CAACE,QAAS;IAClC,MAAM,EAAEH;EAAO,gBAEf,oBAAC,cAAc,EAAKC,SAAS,CAAI,CACvB;AAEhB,CAAC"}
+{"version":3,"file":"ChipsInput.js","names":["React","classNames","ChipsInputBase","FormField","ChipsInput","style","className","getRootRef","before","after","status","restProps","disabled","readOnly"],"sources":["../../../src/components/ChipsInput/ChipsInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ChipOption } from '../Chip/Chip';\nimport { ChipsInputBase, ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport styles from './ChipsInput.module.css';\n\nexport interface ChipsInputProps<Option extends ChipOption>\n  extends ChipsInputBaseProps<Option>,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsInput\n */\nexport const ChipsInput = <Option extends ChipOption>({\n  style,\n  className,\n  getRootRef,\n  before,\n  after,\n  status,\n  ...restProps\n}: ChipsInputProps<Option>) => {\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      className={classNames(styles['ChipsInput'], className)}\n      style={style}\n      disabled={restProps.disabled}\n      before={before}\n      after={after}\n      role=\"application\"\n      aria-disabled={restProps.disabled}\n      aria-readonly={restProps.readOnly}\n      status={status}\n    >\n      <ChipsInputBase {...restProps} />\n    </FormField>\n  );\n};\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,cAAc,QAA6B,kCAAkC;AACtF,SAASC,SAAS,QAAwB,wBAAwB;AAOlE;AACA;AACA;AACA,OAAO,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAQQ;EAAA,IAP7BC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACHC,SAAS;EAEZ,oBACE,oBAAC,SAAS;IACR,UAAU,EAAEJ,UAAW;IACvB,SAAS,EAAEN,UAAU,mBAAuBK,SAAS,CAAE;IACvD,KAAK,EAAED,KAAM;IACb,QAAQ,EAAEM,SAAS,CAACC,QAAS;IAC7B,MAAM,EAAEJ,MAAO;IACf,KAAK,EAAEC,KAAM;IACb,IAAI,EAAC,aAAa;IAClB,iBAAeE,SAAS,CAACC,QAAS;IAClC,iBAAeD,SAAS,CAACE,QAAS;IAClC,MAAM,EAAEH;EAAO,gBAEf,oBAAC,cAAc,EAAKC,SAAS,CAAI,CACvB;AAEhB,CAAC"}

package/dist/components/ChipsInputBase/ChipsInputBase.js

@@ -6,12 +6,12 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["disabled", "value", "label"],
   _excluded2 = ["style", "className", "getRootRef", "value", "onChange", "onInputChange", "onKeyDown", "onBlur", "onFocus", "children", "inputValue", "getRef", "placeholder", "getOptionValue", "getOptionLabel", "getNewOptionData", "renderChip", "inputAriaLabel"];
 import * as React from 'react';
-import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 import { classNames, noop } from '@vkontakte/vkjs';
-import { Chip } from '../Chip/Chip';
-import { useChipsInput } from '../../hooks/useChipsInput';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useChipsInput } from '../../hooks/useChipsInput';
 import { useExternRef } from '../../hooks/useExternRef';
+import { SizeType } from '../../lib/adaptivity';
+import { Chip } from '../Chip/Chip';
 export var chipsInputDefaultProps = {
   onChange: noop,
   onInputChange: noop,
@@ -127,7 +127,7 @@ export var ChipsInputBase = function ChipsInputBase(props) {
     onClick: handleClick,
     role: "presentation",
     style: style,
-    className: classNames("vkuiChipsInputBase", getSizeYClassName("vkuiChipsInputBase", sizeY), className),
+    className: classNames("vkuiChipsInputBase", sizeY === SizeType.COMPACT && "vkuiChipsInputBase--sizeY-compact", className),
     ref: getRootRef
   }, selectedOptions.map(function (option) {
     var value = getOptionValue(option);

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

@@ -1 +1 @@
-{"version":3,"file":"ChipsInputBase.js","names":["React","getSizeYClassName","classNames","noop","Chip","useChipsInput","useAdaptivity","useExternRef","chipsInputDefaultProps","onChange","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","ChipsInputBase","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","useState","focused","setFocused","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","map","onRemove","Boolean"],"sources":["../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { Chip, ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport { useChipsInput } from '../../hooks/useChipsInput';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport styles from './ChipsInputBase.module.css';\n\nexport interface ChipsInputBaseProps<Option extends ChipOption>\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign {\n  value: Option[];\n  inputValue?: string;\n  onChange?: (o: Option[]) => void;\n  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n  getOptionValue?: (o?: Option) => ChipValue;\n  getOptionLabel?: (o?: Option) => string;\n  getNewOptionData?: (v?: ChipValue, l?: string) => Option;\n  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n  inputAriaLabel?: string;\n}\n\nexport const chipsInputDefaultProps: ChipsInputBaseProps<any> = {\n  onChange: noop,\n  onInputChange: noop,\n  onKeyDown: noop,\n  onBlur: noop,\n  onFocus: noop,\n  value: [],\n  inputValue: '',\n  inputAriaLabel: 'Введите ваше значение...',\n  getOptionValue: (option) => option.value,\n  getOptionLabel: (option) => option.label,\n  getNewOptionData: (_, label) => ({\n    value: label,\n    label,\n  }),\n  renderChip(props) {\n    if (!props) {\n      return null;\n    }\n\n    const { disabled, value, label, ...rest } = props;\n    return (\n      <Chip value={value} removable={!disabled} {...rest}>\n        {label}\n      </Chip>\n    );\n  },\n};\n\nexport const ChipsInputBase = <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => {\n  const propsWithDefault = { ...chipsInputDefaultProps, ...props };\n  const {\n    style,\n    className,\n    getRootRef,\n    value,\n    onChange,\n    onInputChange,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    children,\n    inputValue,\n    getRef,\n    placeholder,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n    renderChip,\n    inputAriaLabel,\n    ...restProps\n  } = propsWithDefault;\n  const { sizeY } = useAdaptivity();\n\n  const [focused, setFocused] = React.useState(false);\n  const { fieldValue, addOptionFromInput, removeOption, selectedOptions, handleInputChange } =\n    useChipsInput(propsWithDefault);\n  const inputRef = useExternRef(getRef);\n\n  const isDisabled = restProps.disabled || restProps.readOnly;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    onKeyDown!(e);\n\n    if (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {\n      removeOption(getOptionValue!(selectedOptions[selectedOptions.length - 1]));\n      e.preventDefault();\n    }\n\n    if (e.key === 'Enter' && !e.defaultPrevented && fieldValue) {\n      addOptionFromInput();\n      e.preventDefault();\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (focused) {\n      setFocused(false);\n    }\n    onBlur!(e);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!focused) {\n      setFocused(true);\n    }\n    onFocus!(e);\n  };\n\n  const handleChipRemove = (_: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n    if (value !== undefined) {\n      removeOption(value);\n    }\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (inputRef?.current !== null && !focused) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div\n      onClick={handleClick}\n      role=\"presentation\"\n      style={style}\n      className={classNames(\n        styles['ChipsInputBase'],\n        getSizeYClassName(styles['ChipsInputBase'], sizeY),\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {selectedOptions.map((option: Option) => {\n        const value = getOptionValue!(option);\n        const label = getOptionLabel!(option);\n\n        return (\n          <React.Fragment key={`${typeof value}-${value}`}>\n            {renderChip!({\n              option,\n              value,\n              label,\n              onRemove: handleChipRemove,\n              disabled: Boolean(restProps.disabled),\n              className: styles['ChipsInputBase__chip'],\n            })}\n          </React.Fragment>\n        );\n      })}\n      <label className={styles['ChipsInputBase__label']} aria-label={inputAriaLabel}>\n        <input\n          type=\"text\"\n          autoCapitalize=\"none\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          aria-autocomplete=\"list\"\n          className={styles['ChipsInputBase__el']}\n          {...restProps}\n          ref={inputRef}\n          value={fieldValue}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={selectedOptions.length ? undefined : placeholder}\n        />\n      </label>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChipsInputBase.js","names":["React","classNames","noop","useAdaptivity","useChipsInput","useExternRef","SizeType","Chip","chipsInputDefaultProps","onChange","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","ChipsInputBase","propsWithDefault","style","className","getRootRef","children","getRef","placeholder","restProps","sizeY","useState","focused","setFocused","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","COMPACT","map","onRemove","Boolean"],"sources":["../../../src/components/ChipsInputBase/ChipsInputBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useChipsInput } from '../../hooks/useChipsInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { Chip, ChipOption, ChipValue, RenderChip } from '../Chip/Chip';\nimport styles from './ChipsInputBase.module.css';\n\nexport interface ChipsInputBaseProps<Option extends ChipOption>\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign {\n  value: Option[];\n  inputValue?: string;\n  onChange?: (o: Option[]) => void;\n  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n  getOptionValue?: (o?: Option) => ChipValue;\n  getOptionLabel?: (o?: Option) => string;\n  getNewOptionData?: (v?: ChipValue, l?: string) => Option;\n  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n  inputAriaLabel?: string;\n}\n\nexport const chipsInputDefaultProps: ChipsInputBaseProps<any> = {\n  onChange: noop,\n  onInputChange: noop,\n  onKeyDown: noop,\n  onBlur: noop,\n  onFocus: noop,\n  value: [],\n  inputValue: '',\n  inputAriaLabel: 'Введите ваше значение...',\n  getOptionValue: (option) => option.value,\n  getOptionLabel: (option) => option.label,\n  getNewOptionData: (_, label) => ({\n    value: label,\n    label,\n  }),\n  renderChip(props) {\n    if (!props) {\n      return null;\n    }\n\n    const { disabled, value, label, ...rest } = props;\n    return (\n      <Chip value={value} removable={!disabled} {...rest}>\n        {label}\n      </Chip>\n    );\n  },\n};\n\nexport const ChipsInputBase = <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => {\n  const propsWithDefault = { ...chipsInputDefaultProps, ...props };\n  const {\n    style,\n    className,\n    getRootRef,\n    value,\n    onChange,\n    onInputChange,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    children,\n    inputValue,\n    getRef,\n    placeholder,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n    renderChip,\n    inputAriaLabel,\n    ...restProps\n  } = propsWithDefault;\n  const { sizeY } = useAdaptivity();\n\n  const [focused, setFocused] = React.useState(false);\n  const { fieldValue, addOptionFromInput, removeOption, selectedOptions, handleInputChange } =\n    useChipsInput(propsWithDefault);\n  const inputRef = useExternRef(getRef);\n\n  const isDisabled = restProps.disabled || restProps.readOnly;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    onKeyDown!(e);\n\n    if (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {\n      removeOption(getOptionValue!(selectedOptions[selectedOptions.length - 1]));\n      e.preventDefault();\n    }\n\n    if (e.key === 'Enter' && !e.defaultPrevented && fieldValue) {\n      addOptionFromInput();\n      e.preventDefault();\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (focused) {\n      setFocused(false);\n    }\n    onBlur!(e);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!focused) {\n      setFocused(true);\n    }\n    onFocus!(e);\n  };\n\n  const handleChipRemove = (_: React.MouseEvent | undefined, value: ChipValue | undefined) => {\n    if (value !== undefined) {\n      removeOption(value);\n    }\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (inputRef?.current !== null && !focused) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <div\n      onClick={handleClick}\n      role=\"presentation\"\n      style={style}\n      className={classNames(\n        styles['ChipsInputBase'],\n        sizeY === SizeType.COMPACT && styles['ChipsInputBase--sizeY-compact'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {selectedOptions.map((option: Option) => {\n        const value = getOptionValue!(option);\n        const label = getOptionLabel!(option);\n\n        return (\n          <React.Fragment key={`${typeof value}-${value}`}>\n            {renderChip!({\n              option,\n              value,\n              label,\n              onRemove: handleChipRemove,\n              disabled: Boolean(restProps.disabled),\n              className: styles['ChipsInputBase__chip'],\n            })}\n          </React.Fragment>\n        );\n      })}\n      <label className={styles['ChipsInputBase__label']} aria-label={inputAriaLabel}>\n        <input\n          type=\"text\"\n          autoCapitalize=\"none\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          spellCheck={false}\n          aria-autocomplete=\"list\"\n          className={styles['ChipsInputBase__el']}\n          {...restProps}\n          ref={inputRef}\n          value={fieldValue}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={selectedOptions.length ? undefined : placeholder}\n        />\n      </label>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,IAAI,QAAQ,iBAAiB;AAClD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,IAAI,QAA2C,cAAc;AAmBtE,OAAO,IAAMC,sBAAgD,GAAG;EAC9DC,QAAQ,EAAEP,IAAI;EACdQ,aAAa,EAAER,IAAI;EACnBS,SAAS,EAAET,IAAI;EACfU,MAAM,EAAEV,IAAI;EACZW,OAAO,EAAEX,IAAI;EACbY,KAAK,EAAE,EAAE;EACTC,UAAU,EAAE,EAAE;EACdC,cAAc,EAAE,0BAA0B;EAC1CC,cAAc,EAAE,wBAACC,MAAM;IAAA,OAAKA,MAAM,CAACJ,KAAK;EAAA;EACxCK,cAAc,EAAE,wBAACD,MAAM;IAAA,OAAKA,MAAM,CAACE,KAAK;EAAA;EACxCC,gBAAgB,EAAE,0BAACC,CAAC,EAAEF,KAAK;IAAA,OAAM;MAC/BN,KAAK,EAAEM,KAAK;MACZA,KAAK,EAALA;IACF,CAAC;EAAA,CAAC;EACFG,UAAU,sBAACC,KAAK,EAAE;IAChB,IAAI,CAACA,KAAK,EAAE;MACV,OAAO,IAAI;IACb;IAEA,IAAQC,QAAQ,GAA4BD,KAAK,CAAzCC,QAAQ;MAAEX,KAAK,GAAqBU,KAAK,CAA/BV,KAAK;MAAEM,KAAK,GAAcI,KAAK,CAAxBJ,KAAK;MAAKM,IAAI,4BAAKF,KAAK;IACjD,oBACE,oBAAC,IAAI;MAAC,KAAK,EAAEV,KAAM;MAAC,SAAS,EAAE,CAACW;IAAS,GAAKC,IAAI,GAC/CN,KAAK,CACD;EAEX;AACF,CAAC;AAED,OAAO,IAAMO,cAAc,GAAG,SAAjBA,cAAc,CAA+BH,KAAkC,EAAK;EAC/F,IAAMI,gBAAgB,mCAAQpB,sBAAsB,GAAKgB,KAAK,CAAE;EAChE,IACEK,KAAK,GAmBHD,gBAAgB,CAnBlBC,KAAK;IACLC,SAAS,GAkBPF,gBAAgB,CAlBlBE,SAAS;IACTC,UAAU,GAiBRH,gBAAgB,CAjBlBG,UAAU;IACVjB,KAAK,GAgBHc,gBAAgB,CAhBlBd,KAAK;IACLL,QAAQ,GAeNmB,gBAAgB,CAflBnB,QAAQ;IACRC,aAAa,GAcXkB,gBAAgB,CAdlBlB,aAAa;IACbC,SAAS,GAaPiB,gBAAgB,CAblBjB,SAAS;IACTC,MAAM,GAYJgB,gBAAgB,CAZlBhB,MAAM;IACNC,OAAO,GAWLe,gBAAgB,CAXlBf,OAAO;IACPmB,QAAQ,GAUNJ,gBAAgB,CAVlBI,QAAQ;IACRjB,UAAU,GASRa,gBAAgB,CATlBb,UAAU;IACVkB,MAAM,GAQJL,gBAAgB,CARlBK,MAAM;IACNC,WAAW,GAOTN,gBAAgB,CAPlBM,WAAW;IACXjB,cAAc,GAMZW,gBAAgB,CANlBX,cAAc;IACdE,cAAc,GAKZS,gBAAgB,CALlBT,cAAc;IACdE,gBAAgB,GAIdO,gBAAgB,CAJlBP,gBAAgB;IAChBE,UAAU,GAGRK,gBAAgB,CAHlBL,UAAU;IACVP,cAAc,GAEZY,gBAAgB,CAFlBZ,cAAc;IACXmB,SAAS,4BACVP,gBAAgB;EACpB,qBAAkBzB,aAAa,EAAE;IAAzBiC,KAAK,kBAALA,KAAK;EAEb,sBAA8BpC,KAAK,CAACqC,QAAQ,CAAC,KAAK,CAAC;IAAA;IAA5CC,OAAO;IAAEC,UAAU;EAC1B,qBACEnC,aAAa,CAACwB,gBAAgB,CAAC;IADzBY,UAAU,kBAAVA,UAAU;IAAEC,kBAAkB,kBAAlBA,kBAAkB;IAAEC,YAAY,kBAAZA,YAAY;IAAEC,eAAe,kBAAfA,eAAe;IAAEC,iBAAiB,kBAAjBA,iBAAiB;EAExF,IAAMC,QAAQ,GAAGxC,YAAY,CAAC4B,MAAM,CAAC;EAErC,IAAMa,UAAU,GAAGX,SAAS,CAACV,QAAQ,IAAIU,SAAS,CAACY,QAAQ;EAE3D,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAwC,EAAK;IAClE,IAAIH,UAAU,EAAE;MACdG,CAAC,CAACC,cAAc,EAAE;MAClB;IACF;IAEAvC,SAAS,CAAEsC,CAAC,CAAC;IAEb,IAAIA,CAAC,CAACE,GAAG,KAAK,WAAW,IAAI,CAACF,CAAC,CAACG,gBAAgB,IAAI,CAACZ,UAAU,IAAIG,eAAe,CAACU,MAAM,EAAE;MACzFX,YAAY,CAACzB,cAAc,CAAE0B,eAAe,CAACA,eAAe,CAACU,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;MAC1EJ,CAAC,CAACC,cAAc,EAAE;IACpB;IAEA,IAAID,CAAC,CAACE,GAAG,KAAK,OAAO,IAAI,CAACF,CAAC,CAACG,gBAAgB,IAAIZ,UAAU,EAAE;MAC1DC,kBAAkB,EAAE;MACpBQ,CAAC,CAACC,cAAc,EAAE;IACpB;EACF,CAAC;EAED,IAAMI,UAAU,GAAG,SAAbA,UAAU,CAAIL,CAAqC,EAAK;IAC5D,IAAIX,OAAO,EAAE;MACXC,UAAU,CAAC,KAAK,CAAC;IACnB;IACA3B,MAAM,CAAEqC,CAAC,CAAC;EACZ,CAAC;EAED,IAAMM,WAAW,GAAG,SAAdA,WAAW,CAAIN,CAAqC,EAAK;IAC7D,IAAI,CAACX,OAAO,EAAE;MACZC,UAAU,CAAC,IAAI,CAAC;IAClB;IACA1B,OAAO,CAAEoC,CAAC,CAAC;EACb,CAAC;EAED,IAAMO,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIlC,CAA+B,EAAER,KAA4B,EAAK;IAC1F,IAAIA,KAAK,KAAK2C,SAAS,EAAE;MACvBf,YAAY,CAAC5B,KAAK,CAAC;IACrB;EACF,CAAC;EAED,IAAM4C,WAAW,GAAG,SAAdA,WAAW,CAAIT,CAAmC,EAAK;IAC3D,IAAIH,UAAU,EAAE;MACdG,CAAC,CAACC,cAAc,EAAE;MAClB;IACF;IAEA,IAAI,CAAAL,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEc,OAAO,MAAK,IAAI,IAAI,CAACrB,OAAO,EAAE;MAC1CO,QAAQ,CAACc,OAAO,CAACC,KAAK,EAAE;IAC1B;EACF,CAAC;EAED,oBACE;IACE,OAAO,EAAEF,WAAY;IACrB,IAAI,EAAC,cAAc;IACnB,KAAK,EAAE7B,KAAM;IACb,SAAS,EAAE5B,UAAU,uBAEnBmC,KAAK,KAAK9B,QAAQ,CAACuD,OAAO,uCAA2C,EACrE/B,SAAS,CACT;IACF,GAAG,EAAEC;EAAW,GAEfY,eAAe,CAACmB,GAAG,CAAC,UAAC5C,MAAc,EAAK;IACvC,IAAMJ,KAAK,GAAGG,cAAc,CAAEC,MAAM,CAAC;IACrC,IAAME,KAAK,GAAGD,cAAc,CAAED,MAAM,CAAC;IAErC,oBACE,oBAAC,KAAK,CAAC,QAAQ;MAAC,GAAG,oBAAYJ,KAAK,eAAIA,KAAK;IAAG,GAC7CS,UAAU,CAAE;MACXL,MAAM,EAANA,MAAM;MACNJ,KAAK,EAALA,KAAK;MACLM,KAAK,EAALA,KAAK;MACL2C,QAAQ,EAAEP,gBAAgB;MAC1B/B,QAAQ,EAAEuC,OAAO,CAAC7B,SAAS,CAACV,QAAQ,CAAC;MACrCK,SAAS;IACX,CAAC,CAAC,CACa;EAErB,CAAC,CAAC,eACF;IAAO,SAAS,6BAAkC;IAAC,cAAYd;EAAe,gBAC5E;IACE,IAAI,EAAC,MAAM;IACX,cAAc,EAAC,MAAM;IACrB,YAAY,EAAC,KAAK;IAClB,WAAW,EAAC,KAAK;IACjB,UAAU,EAAE,KAAM;IAClB,qBAAkB,MAAM;IACxB,SAAS;EAA+B,GACpCmB,SAAS;IACb,GAAG,EAAEU,QAAS;IACd,KAAK,EAAEL,UAAW;IAClB,QAAQ,EAAEI,iBAAkB;IAC5B,SAAS,EAAEI,aAAc;IACzB,OAAO,EAAEO,WAAY;IACrB,MAAM,EAAED,UAAW;IACnB,WAAW,EAAEX,eAAe,CAACU,MAAM,GAAGI,SAAS,GAAGvB;EAAY,GAC9D,CACI,CACJ;AAEV,CAAC"}

package/dist/components/ChipsSelect/ChipsSelect.js

@@ -5,19 +5,19 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 var _excluded = ["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"];
 import * as React from 'react';
-import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { classNames, noop } from '@vkontakte/vkjs';
-import { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';
-import { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';
 import { useChipsSelect } from '../../hooks/useChipsSelect';
-import { useDOM } from '../../lib/dom';
-import { Footnote } from '../Typography/Footnote/Footnote';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { useDOM } from '../../lib/dom';
 import { defaultFilterFn } from '../../lib/select';
+import { ChipsInputBase, chipsInputDefaultProps } from '../ChipsInputBase/ChipsInputBase';
 import { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';
+import { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';
+import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { FormField } from '../FormField/FormField';
 import { IconButton } from '../IconButton/IconButton';
+import { Footnote } from '../Typography/Footnote/Footnote';
 var FOCUS_ACTION_NEXT = 'next';
 var FOCUS_ACTION_PREV = 'prev';
 var chipsSelectDefaultProps = _objectSpread(_objectSpread({}, chipsInputDefaultProps), {}, {