@vkontakte/vkui 5.4.3 → 5.5.0

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

@@ -11,4 +11,4 @@ export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */
-export declare const CardScroll: ({ children, size, showArrows, withSpaces, className, ...restProps }: CardScrollProps) => JSX.Element;
+export declare const CardScroll: ({ children, size, showArrows, withSpaces, className, ...restProps }: CardScrollProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"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        'vkuiInternalCardScroll',\n        size !== false &&\n          {\n            s: 'vkuiInternalCardScroll--size-s',\n            m: 'vkuiInternalCardScroll--size-m',\n            l: 'vkuiInternalCardScroll--size-l',\n          }[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"],"names":["React","classNames","useDOM","HorizontalScroll","styles","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","div","s","m","l","ref","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,gBAAgB,QAA+B,uCAAuC;AAC/F,OAAOC,YAAY,0BAA0B;AAW7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,SAAQ,EACRC,MAAO,IAAG,EACVC,YAAa,IAAI,CAAA,EACjBC,YAAa,IAAI,CAAA,EACjBC,UAAS,EACT,GAAGC,WACa,GAAK;IACrB,MAAMC,eAAeZ,MAAMa,MAAM,CAAiB,IAAI;IACtD,MAAMC,SAASd,MAAMa,MAAM,CAAiB,IAAI;IAEhD,MAAM,EAAEE,OAAM,EAAE,GAAGb;IAEnB,SAASc,gBAAgBC,MAAc,EAAU;QAC/C,IAAI,CAACL,aAAaM,OAAO,IAAI,CAACJ,OAAOI,OAAO,EAAE;YAC5C,OAAOD;QACT,CAAC;QACD,MAAME,iBAAiBP,aAAaM,OAAO,CAACE,WAAW;QACvD,MAAMC,aAAa,AAAC;eAAIT,aAAaM,OAAO,CAACZ,QAAQ;SAAC,CAAmBgB,SAAS,CAChF,CAACC,KACCA,GAAGC,UAAU,GACXD,GAAGH,WAAW,GACdK,SAASV,OAAQW,gBAAgB,CAACH,IAAII,WAAW,IACjDV,UACF;QAGJ,IAAII,eAAe,CAAC,GAAG;YACrB,OAAOJ;QACT,CAAC;QAED,IAAII,eAAe,GAAG;YACpB,OAAO;QACT,CAAC;QAED,MAAMO,QAAQhB,aAAaM,OAAO,CAACZ,QAAQ,CAACe,WAAW;QAEvD,MAAMQ,WACJD,MAAMJ,UAAU,GAAIL,CAAAA,iBAAiBS,MAAMR,WAAW,AAAD,IAAKN,OAAOI,OAAO,CAACE,WAAW;QAEtF,IAAIS,YAAY,IAAIf,OAAOI,OAAO,CAACE,WAAW,EAAE;YAC9C,OAAO;QACT,CAAC;QAED,OAAOS;IACT;IAEA,SAASC,iBAAiBb,MAAc,EAAU;QAChD,IAAI,CAACL,aAAaM,OAAO,IAAI,CAACJ,OAAOI,OAAO,EAAE;YAC5C,OAAOD;QACT,CAAC;QAED,MAAME,iBAAiBP,aAAaM,OAAO,CAACE,WAAW;QACvD,MAAMQ,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCtB,aAAaM,OAAO,CAACZ,QAAQ,EAC7B,CAACiB,KAAoBA,GAAGC,UAAU,GAAGD,GAAGH,WAAW,GAAGH,SAASE;QAGjE,IAAI,CAACS,OAAO;YACV,OAAOX;QACT,CAAC;QAED,OAAOW,MAAMJ,UAAU,GAAGV,OAAOI,OAAO,CAACE,WAAW;IACtD;IAEA,qBACE,oBAACe;QACE,GAAGxB,SAAS;QACbD,WAAWT,WACTG,MAAM,CAAC,aAAa,EACpB,0BACAG,SAAS,KAAK,IACZ,CAAA;YACE6B,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAA,CAAC,CAAC/B,KAAK,EACTE,cAAcL,MAAM,CAAC,yBAAyB,EAC9CM;qBAGF,oBAACP;QACCa,iBAAiBA;QACjBc,kBAAkBA;QAClBtB,YAAYA;qBAEZ,oBAAC2B;QAAIzB,WAAWN,MAAM,CAAC,iBAAiB;QAAEmC,KAAK3B;qBAC7C,oBAAC4B;QAAK9B,WAAWN,MAAM,CAAC,kBAAkB;QAAEmC,KAAKzB;QAChDR,wBACD,oBAACkC;QAAK9B,WAAWN,MAAM,CAAC,kBAAkB;;AAKpD,EAAE"}
+{"version":3,"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        'vkuiInternalCardScroll',\n        size !== false &&\n          {\n            s: 'vkuiInternalCardScroll--size-s',\n            m: 'vkuiInternalCardScroll--size-m',\n            l: 'vkuiInternalCardScroll--size-l',\n          }[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"],"names":["React","classNames","useDOM","HorizontalScroll","styles","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","div","s","m","l","ref","span"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,gBAAgB,QAA+B,uCAAuC;AAC/F,OAAOC,YAAY,0BAA0B;AAW7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,SAAQ,EACRC,MAAO,IAAG,EACVC,YAAa,KAAI,EACjBC,YAAa,KAAI,EACjBC,UAAS,EACT,GAAGC,WACa;IAChB,MAAMC,eAAeZ,MAAMa,OAAuB;IAClD,MAAMC,SAASd,MAAMa,OAAuB;IAE5C,MAAM,EAAEE,OAAM,EAAE,GAAGb;IAEnB,SAASc,gBAAgBC,MAAc;QACrC,IAAI,CAACL,aAAaM,WAAW,CAACJ,OAAOI,SAAS;YAC5C,OAAOD;QACT;QACA,MAAME,iBAAiBP,aAAaM,QAAQE;QAC5C,MAAMC,aAAa,AAAC;eAAIT,aAAaM,QAAQZ;SAAS,CAAmBgB,UACvE,CAACC,KACCA,GAAGC,aACDD,GAAGH,cACHK,SAASV,OAAQW,iBAAiBH,IAAII,eACtCV,UACF;QAGJ,IAAII,eAAe,CAAC,GAAG;YACrB,OAAOJ;QACT;QAEA,IAAII,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,MAAMO,QAAQhB,aAAaM,QAAQZ,QAAQ,CAACe,WAAW;QAEvD,MAAMQ,WACJD,MAAMJ,aAAcL,CAAAA,iBAAiBS,MAAMR,WAAU,IAAKN,OAAOI,QAAQE;QAE3E,IAAIS,YAAY,IAAIf,OAAOI,QAAQE,aAAa;YAC9C,OAAO;QACT;QAEA,OAAOS;IACT;IAEA,SAASC,iBAAiBb,MAAc;QACtC,IAAI,CAACL,aAAaM,WAAW,CAACJ,OAAOI,SAAS;YAC5C,OAAOD;QACT;QAEA,MAAME,iBAAiBP,aAAaM,QAAQE;QAC5C,MAAMQ,QAAQG,MAAMC,UAAUC,KAAKC,KACjCtB,aAAaM,QAAQZ,UACrB,CAACiB,KAAoBA,GAAGC,aAAaD,GAAGH,cAAcH,SAASE;QAGjE,IAAI,CAACS,OAAO;YACV,OAAOX;QACT;QAEA,OAAOW,MAAMJ,aAAaV,OAAOI,QAAQE;IAC3C;IAEA,qBACE,oBAACe;QACE,GAAGxB,SAAS;QACbD,WAAWT,WACTG,MAAM,CAAC,aAAa,EACpB,0BACAG,SAAS,SACP,CAAA;YACE6B,GAAG;YACHC,GAAG;YACHC,GAAG;QACL,CAAA,CAAC,CAAC/B,KAAK,EACTE,cAAcL,MAAM,CAAC,yBAAyB,EAC9CM;qBAGF,oBAACP;QACCa,iBAAiBA;QACjBc,kBAAkBA;QAClBtB,YAAYA;qBAEZ,oBAAC2B;QAAIzB,WAAWN,MAAM,CAAC,iBAAiB;QAAEmC,KAAK3B;qBAC7C,oBAAC4B;QAAK9B,WAAWN,MAAM,CAAC,kBAAkB;QAAEmC,KAAKzB;QAChDR,wBACD,oBAACkC;QAAK9B,WAAWN,MAAM,CAAC,kBAAkB;;AAKpD,EAAE"}

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

@@ -1,7 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { HasRootRef } from '../../types';
 import { RemovableProps } from '../Removable/Removable';
 import { SimpleCellProps } from '../SimpleCell/SimpleCell';
+import { CellCheckboxProps } from './CellCheckbox/CellCheckbox';
 export interface CellProps extends Omit<SimpleCellProps, 'getRootRef'>, RemovableProps, HasRootRef<HTMLDivElement> {
     mode?: 'removable' | 'selectable';
     /**
@@ -38,4 +39,7 @@ export interface CellProps extends Omit<SimpleCellProps, 'getRootRef'>, Removabl
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
  */
-export declare const Cell: ({ mode, onRemove, removePlaceholder, onDragFinish, before, after, disabled, draggable, Component, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel, className, style, ...restProps }: CellProps) => JSX.Element;
+export declare const Cell: {
+    ({ mode, onRemove, removePlaceholder, onDragFinish, before, after, disabled, draggable, Component: ComponentProps, onChange, name, value, checked, defaultChecked, getRootRef, draggerLabel, className, style, ...restProps }: CellProps): React.JSX.Element;
+    Checkbox: ({ getRootRef, getRef, className, style, type, ...restProps }: CellCheckboxProps) => React.JSX.Element;
+};

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

@@ -12,9 +12,10 @@ import { useDraggable } from './useDraggable';
 import styles from './Cell.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Cell
- */ export const Cell = ({ mode , onRemove =noop , removePlaceholder ='Удалить' , onDragFinish , before , after , disabled , draggable , Component , onChange , name , value , checked , defaultChecked , getRootRef , draggerLabel ='Перенести ячейку' , className , style , ...restProps })=>{
+ */ export const Cell = ({ mode , onRemove =noop , removePlaceholder ='Удалить' , onDragFinish , before , after , disabled , draggable , Component: ComponentProps , onChange , name , value , checked , defaultChecked , getRootRef , draggerLabel ='Перенести ячейку' , className , style , ...restProps })=>{
     const selectable = mode === 'selectable';
     const removable = mode === 'removable';
+    const Component = selectable ? 'label' : ComponentProps;
     const platform = usePlatform();
     const rootElRef = useExternRef(getRootRef);
     const { dragging , ...draggableProps } = useDraggable({
@@ -57,14 +58,14 @@ import styles from './Cell.module.css';
     }
     const simpleCellDisabled = draggable && !selectable || removable || disabled;
     const hasActive = !simpleCellDisabled && !dragging;
-    const cellClasses = classNames(styles['Cell'], platform === Platform.IOS && styles['Cell--ios'], dragging && styles['Cell--dragging'], removable && styles['Cell--removable'], selectable && styles['Cell--selectable'], disabled && styles['Cell--disabled']);
+    const cellClasses = classNames(styles['Cell'], platform === Platform.IOS && styles['Cell--ios'], dragging && styles['Cell--dragging'], removable && styles['Cell--removable'], Component === 'label' && styles['Cell--selectable'], disabled && styles['Cell--disabled']);
     const simpleCell = /*#__PURE__*/ React.createElement(SimpleCell, {
         hasActive: hasActive,
         hasHover: hasActive,
         ...restProps,
         className: styles['Cell__content'],
         disabled: simpleCellDisabled,
-        Component: selectable ? 'label' : Component,
+        Component: Component,
         before: /*#__PURE__*/ React.createElement(React.Fragment, null, draggable && platform !== Platform.IOS && dragger, selectable && checkbox, before),
         after: /*#__PURE__*/ React.createElement(React.Fragment, null, draggable && platform === Platform.IOS && dragger, after)
     });
@@ -83,5 +84,6 @@ import styles from './Cell.module.css';
         ref: rootElRef
     }, simpleCell);
 };
+Cell.Checkbox = CellCheckbox;
 
 //# sourceMappingURL=Cell.js.map

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["React","classNames","noop","useExternRef","usePlatform","Platform","ListContext","Removable","SimpleCell","CellCheckbox","CellDragger","useDraggable","styles","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","toggleDrag","useContext","useEffect","undefined","dragger","aria-label","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","hasHover","Fragment","e","current","div","ref"],"mappings":"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"}
+{"version":3,"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: ComponentProps,\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  const Component = selectable ? 'label' : ComponentProps;\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    Component === 'label' && 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={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\nCell.Checkbox = CellCheckbox;\n"],"names":["React","classNames","noop","useExternRef","usePlatform","Platform","ListContext","Removable","SimpleCell","CellCheckbox","CellDragger","useDraggable","styles","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","selectable","removable","platform","rootElRef","dragging","draggableProps","toggleDrag","useContext","useEffect","undefined","dragger","aria-label","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","IOS","simpleCell","hasHover","Fragment","e","current","div","ref","Checkbox"],"mappings":"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"}

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
-import { HasRef } from '../../../types';
+import { HasRef, HasRootRef } from '../../../types';
 import { CellProps } from '../Cell';
-export interface CellCheckboxProps extends Pick<CellProps, 'defaultChecked' | 'checked'>, React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement> {
+export interface CellCheckboxProps extends Pick<CellProps, 'defaultChecked' | 'checked'>, React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLSpanElement>, HasRef<HTMLInputElement> {
+    /**
+     * Вид чекбокса. Если auto, то зависит от платформы.
+     */
+    type?: 'auto' | 'circle' | 'square';
 }
-export declare const CellCheckbox: ({ className, style, getRef, ...restProps }: CellCheckboxProps) => JSX.Element;
+export declare const CellCheckbox: ({ getRootRef, getRef, className, style, type, ...restProps }: CellCheckboxProps) => React.JSX.Element;

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

@@ -1,17 +1,37 @@
 import * as React from 'react';
-import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';
+import { Icon20CheckBoxOff, Icon20CheckBoxOn, Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../../hooks/usePlatform';
 import { Platform } from '../../../lib/platform';
+import { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import styles from './CellCheckbox.module.css';
-export const CellCheckbox = ({ className , style , getRef , ...restProps })=>{
+const CheckBoxOn = ()=>/*#__PURE__*/ React.createElement(AdaptiveIconRenderer, {
+        IconCompact: Icon20CheckBoxOn,
+        IconRegular: Icon24CheckBoxOn
+    });
+const CheckBoxOff = ()=>/*#__PURE__*/ React.createElement(AdaptiveIconRenderer, {
+        IconCompact: Icon20CheckBoxOff,
+        IconRegular: Icon24CheckBoxOff
+    });
+function useTypeIcon(type) {
     const platform = usePlatform();
-    const IconOff = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOff : Icon24CheckBoxOff;
-    const IconOn = platform === Platform.IOS || platform === Platform.VKCOM ? Icon24CheckCircleOn : Icon24CheckBoxOn;
+    if (type !== 'auto') {
+        return type;
+    }
+    if (platform === Platform.IOS || platform === Platform.VKCOM) {
+        return 'circle';
+    }
+    return 'square';
+}
+export const CellCheckbox = ({ getRootRef , getRef , className , style , type ='auto' , ...restProps })=>{
+    const typeIcon = useTypeIcon(type);
+    const IconOff = typeIcon === 'circle' ? Icon24CheckCircleOff : CheckBoxOff;
+    const IconOn = typeIcon === 'circle' ? Icon24CheckCircleOn : CheckBoxOn;
     return /*#__PURE__*/ React.createElement("span", {
-        className: className,
-        style: style
+        className: classNames(styles['CellCheckbox'], className),
+        style: style,
+        ref: getRootRef
     }, /*#__PURE__*/ React.createElement(VisuallyHidden, {
         ...restProps,
         Component: "input",

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

@@ -1 +1 @@
-{"version":3,"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 { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HasRef } from '../../../types';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nexport interface CellCheckboxProps\n  extends Pick<CellProps, 'defaultChecked' | 'checked'>,\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement> {}\n\nexport const CellCheckbox = ({ className, style, getRef, ...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 className={className} style={style}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        className={styles['CellCheckbox__input']}\n        getRootRef={getRef}\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"],"names":["React","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","usePlatform","Platform","VisuallyHidden","styles","CellCheckbox","className","style","getRef","restProps","platform","IconOff","IOS","VKCOM","IconOn","span","Component","type","getRootRef","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,cAAc,QAAQ,sCAAsC;AAErE,OAAOC,YAAY,4BAA4B;AAO/C,OAAO,MAAMC,eAAe,CAAC,EAAEC,UAAS,EAAEC,MAAK,EAAEC,OAAM,EAAE,GAAGC,WAA8B,GAAK;IAC7F,MAAMC,WAAWT;IAEjB,MAAMU,UACJD,aAAaR,SAASU,GAAG,IAAIF,aAAaR,SAASW,KAAK,GACpDf,uBACAF,iBAAiB;IAEvB,MAAMkB,SACJJ,aAAaR,SAASU,GAAG,IAAIF,aAAaR,SAASW,KAAK,GACpDd,sBACAF,gBAAgB;IAEtB,qBACE,oBAACkB;QAAKT,WAAWA;QAAWC,OAAOA;qBACjC,oBAACJ;QACE,GAAGM,SAAS;QACbO,WAAU;QACVC,MAAK;QACLX,WAAWF,MAAM,CAAC,sBAAsB;QACxCc,YAAYV;sBAEd,oBAACO;QACCT,WAAWN,WAAWI,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,0BAA0B;QACrFe,eAAAA,IAAW;qBAEX,oBAACR,+BAEH,oBAACI;QACCT,WAAWN,WAAWI,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,yBAAyB;QACpFe,eAAAA,IAAW;qBAEX,oBAACL;AAIT,EAAE"}
+{"version":3,"sources":["../../../../../src/components/Cell/CellCheckbox/CellCheckbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckCircleOff,\n  Icon24CheckCircleOn,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { HasRef, HasRootRef } from '../../../types';\nimport { AdaptiveIconRenderer } from '../../AdaptiveIconRenderer/AdaptiveIconRenderer';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { CellProps } from '../Cell';\nimport styles from './CellCheckbox.module.css';\n\nconst CheckBoxOn = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOn} IconRegular={Icon24CheckBoxOn} />\n);\n\nconst CheckBoxOff = () => (\n  <AdaptiveIconRenderer IconCompact={Icon20CheckBoxOff} IconRegular={Icon24CheckBoxOff} />\n);\n\nfunction useTypeIcon(type: NonNullable<CellCheckboxProps['type']>) {\n  const platform = usePlatform();\n\n  if (type !== 'auto') {\n    return type;\n  }\n\n  if (platform === Platform.IOS || platform === Platform.VKCOM) {\n    return 'circle';\n  }\n\n  return 'square';\n}\n\nexport interface CellCheckboxProps\n  extends Pick<CellProps, 'defaultChecked' | 'checked'>,\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLSpanElement>,\n    HasRef<HTMLInputElement> {\n  /**\n   * Вид чекбокса. Если auto, то зависит от платформы.\n   */\n  type?: 'auto' | 'circle' | 'square';\n}\n\nexport const CellCheckbox = ({\n  getRootRef,\n  getRef,\n  className,\n  style,\n  type = 'auto',\n  ...restProps\n}: CellCheckboxProps) => {\n  const typeIcon = useTypeIcon(type);\n\n  const IconOff = typeIcon === 'circle' ? Icon24CheckCircleOff : CheckBoxOff;\n  const IconOn = typeIcon === 'circle' ? Icon24CheckCircleOn : CheckBoxOn;\n\n  return (\n    <span className={classNames(styles['CellCheckbox'], className)} style={style} ref={getRootRef}>\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        className={styles['CellCheckbox__input']}\n        getRootRef={getRef}\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"],"names":["React","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","Icon24CheckCircleOff","Icon24CheckCircleOn","classNames","usePlatform","Platform","AdaptiveIconRenderer","VisuallyHidden","styles","CheckBoxOn","IconCompact","IconRegular","CheckBoxOff","useTypeIcon","type","platform","IOS","VKCOM","CellCheckbox","getRootRef","getRef","className","style","restProps","typeIcon","IconOff","IconOn","span","ref","Component","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,iBAAiB,EACjBC,gBAAgB,EAChBC,oBAAoB,EACpBC,mBAAmB,QACd,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,oBAAoB,QAAQ,kDAAkD;AACvF,SAASC,cAAc,QAAQ,sCAAsC;AAErE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,aAAa,kBACjB,oBAACH;QAAqBI,aAAaZ;QAAkBa,aAAaX;;AAGpE,MAAMY,cAAc,kBAClB,oBAACN;QAAqBI,aAAab;QAAmBc,aAAaZ;;AAGrE,SAASc,YAAYC,IAA4C;IAC/D,MAAMC,WAAWX;IAEjB,IAAIU,SAAS,QAAQ;QACnB,OAAOA;IACT;IAEA,IAAIC,aAAaV,SAASW,OAAOD,aAAaV,SAASY,OAAO;QAC5D,OAAO;IACT;IAEA,OAAO;AACT;AAaA,OAAO,MAAMC,eAAe,CAAC,EAC3BC,WAAU,EACVC,OAAM,EACNC,UAAS,EACTC,MAAK,EACLR,MAAO,OAAM,EACb,GAAGS,WACe;IAClB,MAAMC,WAAWX,YAAYC;IAE7B,MAAMW,UAAUD,aAAa,WAAWvB,uBAAuBW;IAC/D,MAAMc,SAASF,aAAa,WAAWtB,sBAAsBO;IAE7D,qBACE,oBAACkB;QAAKN,WAAWlB,WAAWK,MAAM,CAAC,eAAe,EAAEa;QAAYC,OAAOA;QAAOM,KAAKT;qBACjF,oBAACZ;QACE,GAAGgB,SAAS;QACbM,WAAU;QACVf,MAAK;QACLO,WAAWb,MAAM,CAAC,sBAAsB;QACxCW,YAAYC;sBAEd,oBAACO;QACCN,WAAWlB,WAAWK,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,0BAA0B;QACrFsB,eAAAA;qBAEA,oBAACL,+BAEH,oBAACE;QACCN,WAAWlB,WAAWK,MAAM,CAAC,qBAAqB,EAAEA,MAAM,CAAC,yBAAyB;QACpFsB,eAAAA;qBAEA,oBAACJ;AAIT,EAAE"}

package/dist/cssm/components/Cell/CellCheckbox/CellCheckbox.module.css

@@ -1,3 +1,9 @@
+.CellCheckbox {
+  display: flex;
+  justify-content: center;
+  width: 24px;
+}
+
 .CellCheckbox__icon {
   display: none;
   color: var(--vkui--color_icon_tertiary);

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n  onDragStart(event: TouchEvent): void;\n  onDragEnd(event: TouchEvent): void;\n  onDragMove(event: TouchEvent): void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up' | undefined>(undefined);\n\n  const onDragStart = (event: TouchEvent) => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${event.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - event.shiftY < 0 ? 'down' : 'up');\n      setDragShift(event.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === 'down') {\n              sibling.style.transform = 'translateY(-100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === 'up') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === 'up') {\n              sibling.style.transform = 'translateY(100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === 'down') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = '';\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"names":["React","useDraggable","rootElRef","onDragFinish","dragging","setDragging","useState","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","undefined","onDragStart","event","rootEl","current","originalEvent","stopPropagation","preventDefault","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TouchEvent } from '../Touch/Touch';\nimport { CellProps } from './Cell';\n\nexport interface DraggableProps {\n  onDragStart(event: TouchEvent): void;\n  onDragEnd(event: TouchEvent): void;\n  onDragMove(event: TouchEvent): void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, 'onDragFinish'> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up' | undefined>(undefined);\n\n  const onDragStart = (event: TouchEvent) => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${event.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - event.shiftY < 0 ? 'down' : 'up');\n      setDragShift(event.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === 'down') {\n              sibling.style.transform = 'translateY(-100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === 'up') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === 'up') {\n              sibling.style.transform = 'translateY(100%)';\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === 'down') {\n            sibling.style.transform = 'translateY(0)';\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = (event: TouchEvent) => {\n    event.originalEvent.stopPropagation();\n    event.originalEvent.preventDefault();\n\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = '';\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"names":["React","useDraggable","rootElRef","onDragFinish","dragging","setDragging","useState","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","undefined","onDragStart","event","rootEl","current","originalEvent","stopPropagation","preventDefault","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAc/B,OAAO,MAAMC,eAAe,CAAwB,EAClDC,UAAS,EACTC,aAAY,EAGb;IACC,MAAM,CAACC,UAAUC,YAAY,GAAGL,MAAMM,SAAkB;IAExD,MAAM,CAACC,UAAUC,YAAY,GAAGR,MAAMM,SAAwB,EAAE;IAChE,MAAM,CAACG,gBAAgBC,kBAAkB,GAAGV,MAAMM,SAAiB;IACnE,MAAM,CAACK,cAAcC,gBAAgB,GAAGZ,MAAMM,SAAiB;IAC/D,MAAM,CAACO,WAAWC,aAAa,GAAGd,MAAMM,SAAiB;IACzD,MAAM,CAACS,eAAeC,iBAAiB,GAAGhB,MAAMM,SAAoCW;IAEpF,MAAMC,cAAc,CAACC;QACnB,MAAMC,SAASlB,UAAUmB;QACzB,IAAI,CAACD,QAAQ;YACX;QACF;QACAD,MAAMG,cAAcC;QACpBJ,MAAMG,cAAcE;QAEpBnB,YAAY;QAEZ,IAAIoB,YAA2B,EAAE;QACjC,IAAIL,OAAOM,eAAeC,YAAY;YACpCF,YAAYG,MAAMC,KAAKT,OAAOM,cAAcI;QAC9C;QACA,MAAMC,MAAMN,UAAUO,QAAQZ;QAE9BV,kBAAkBqB;QAClBnB,gBAAgBmB;QAChBvB,YAAYiB;QACZX,aAAa;IACf;IAEA,MAAMmB,aAAa,CAACd;QAClBA,MAAMG,cAAcC;QACpBJ,MAAMG,cAAcE;QAEpB,MAAMJ,SAASlB,UAAUmB;QAEzB,IAAID,QAAQ;YACVA,OAAOc,MAAMC,YAAY,CAAC,WAAW,EAAEhB,MAAMiB,OAAO,GAAG,CAAC;YACxD,MAAMC,cAAcjB,OAAOkB;YAE3BtB,iBAAiBH,YAAYM,MAAMiB,SAAS,IAAI,SAAS;YACzDtB,aAAaK,MAAMiB;YACnBxB,gBAAgBH;YAEhBF,SAASgC,QAAQ,CAACC,SAAsBC;gBACtC,MAAMC,iBAAiBF,QAAQF;gBAC/B,MAAMK,oBAAoBD,eAAeE,SAAS;gBAElD,MAAMC,kBAAkBR,YAAYS,SAASJ,eAAeK,MAAMJ;gBAClE,MAAMK,mBAAmBX,YAAYU,MAAML,eAAeI,SAASH;gBAEnE,IAAIlC,iBAAiBgC,cAAc;oBACjC,IAAII,iBAAiB;wBACnB,IAAI9B,kBAAkB,QAAQ;4BAC5ByB,QAAQN,MAAMC,YAAY;wBAC5B;wBAEAvB,gBAAgB,CAACD,eAAiBA,eAAe;oBACnD;oBACA,IAAIqC,oBAAoBjC,kBAAkB,MAAM;wBAC9CyB,QAAQN,MAAMC,YAAY;oBAC5B;gBACF,OAAO,IAAI1B,iBAAiBgC,cAAc;oBACxC,IAAIO,kBAAkB;wBACpB,IAAIjC,kBAAkB,MAAM;4BAC1ByB,QAAQN,MAAMC,YAAY;wBAC5B;wBAEAvB,gBAAgB,CAACD,eAAiBA,eAAe;oBACnD;oBACA,IAAIkC,mBAAmB9B,kBAAkB,QAAQ;wBAC/CyB,QAAQN,MAAMC,YAAY;oBAC5B;gBACF;YACF;QACF;IACF;IAEA,MAAMc,YAAY,CAAC9B;QACjBA,MAAMG,cAAcC;QACpBJ,MAAMG,cAAcE;QAEpB,MAAM,CAACK,MAAMqB,GAAG,GAAG;YAACzC;YAAgBE;SAAa;QAEjDJ,SAASgC,QAAQ,CAACC;YAChBA,QAAQN,MAAMC,YAAY;QAC5B;QAEA3B,YAAY,EAAE;QACdI,gBAAgB;QAChBF,kBAAkB;QAClBM,iBAAiBC;QACjBH,aAAa;QAEbT,YAAY;QAEZF,gBAAgBA,aAAa;YAAE0B;YAAMqB;QAAG;IAC1C;IAEA,MAAMC,oBAAuC;QAC3CjC;QACAe;QACAgB;QACA7C;IACF;IAEA,OAAO+C;AACT,EAAE"}

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { SimpleCellProps } from '../SimpleCell/SimpleCell';
 export interface CellButtonProps extends SimpleCellProps {
     mode?: 'primary' | 'danger';
@@ -7,4 +7,4 @@ export interface CellButtonProps extends SimpleCellProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/CellButton
  */
-export declare const CellButton: ({ centered, mode, className, ...restProps }: CellButtonProps) => JSX.Element;
+export declare const CellButton: ({ centered, mode, className, ...restProps }: CellButtonProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './CellButton.module.css';\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: 'primary' | 'danger';\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  mode = 'primary',\n  className,\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      className={classNames(\n        styles['CellButton'],\n        'vkuiInternalCellButton',\n        mode === 'danger' &&\n          classNames(styles['CellButton--mode-danger'], 'vkuiInternalCellButton--mode-danger'),\n        centered && styles['CellButton--centered'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","SimpleCell","styles","CellButton","centered","mode","className","restProps","stopPropagation"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAyB,2BAA2B;AACvE,OAAOC,YAAY,0BAA0B;AAO7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAW,KAAK,CAAA,EAChBC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACa,GAAK;IACrB,qBACE,oBAACN;QACCO,iBAAiB,IAAI;QACpB,GAAGD,SAAS;QACbD,WAAWN,WACTE,MAAM,CAAC,aAAa,EACpB,0BACAG,SAAS,YACPL,WAAWE,MAAM,CAAC,0BAA0B,EAAE,wCAChDE,YAAYF,MAAM,CAAC,uBAAuB,EAC1CI;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport styles from './CellButton.module.css';\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: 'primary' | 'danger';\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  mode = 'primary',\n  className,\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      className={classNames(\n        styles['CellButton'],\n        'vkuiInternalCellButton',\n        mode === 'danger' &&\n          classNames(styles['CellButton--mode-danger'], 'vkuiInternalCellButton--mode-danger'),\n        centered && styles['CellButton--centered'],\n        className,\n      )}\n    />\n  );\n};\n"],"names":["React","classNames","SimpleCell","styles","CellButton","centered","mode","className","restProps","stopPropagation"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAyB,2BAA2B;AACvE,OAAOC,YAAY,0BAA0B;AAO7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAW,MAAK,EAChBC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACa;IAChB,qBACE,oBAACN;QACCO,iBAAiB;QAChB,GAAGD,SAAS;QACbD,WAAWN,WACTE,MAAM,CAAC,aAAa,EACpB,0BACAG,SAAS,YACPL,WAAWE,MAAM,CAAC,0BAA0B,EAAE,wCAChDE,YAAYF,MAAM,CAAC,uBAAuB,EAC1CI;;AAIR,EAAE"}

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

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   text-decoration: none;
   margin: 0;
-  border: none;
+  border: 0;
   cursor: pointer;
   width: 100%;
   background: transparent;

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

@@ -10,4 +10,4 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */
-export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, titleAfter, ...restProps }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, titleAfter, ...restProps }: CheckboxProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"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 { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\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  titleAfter?: React.ReactNode;\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  titleAfter,\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      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={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__title']}>\n          <span>{children}</span>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","VKCOM","disabled","activeEffectDelay","IOS","type","div","Fragment","compact","regular","width","height","span"],"mappings":"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"}
+{"version":3,"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 { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\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  titleAfter?: React.ReactNode;\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  titleAfter,\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      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={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__title']}>\n          <span>{children}</span>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon20CheckBoxIndetermanate","Icon20CheckBoxOff","Icon20CheckBoxOn","Icon24CheckBoxOff","Icon24CheckBoxOn","classNames","hasReactNode","useAdaptivity","useAdaptivityConditionalRender","useExternRef","usePlatform","SizeType","Platform","warnOnce","ACTIVE_EFFECT_DELAY","Tappable","Footnote","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","REGULAR","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","platform","sizeY","adaptiveSizeY","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Component","VKCOM","disabled","activeEffectDelay","IOS","type","div","Fragment","compact","regular","width","height","span"],"mappings":"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"}

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

@@ -22,4 +22,4 @@ export interface RenderChip<T extends ChipOption> extends ChipProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
  */
-export declare const Chip: ({ value, option, removable, onRemove, removeAriaLabel, before, after, children, className, ...restProps }: ChipProps) => JSX.Element;
+export declare const Chip: ({ value, option, removable, onRemove, removeAriaLabel, before, after, children, className, ...restProps }: ChipProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["React","Icon16Cancel","classNames","hasReactNode","noop","useAdaptivity","SizeType","getTitleFromChildren","Tappable","Footnote","styles","sizeYClassNames","none","COMPACT","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","className","restProps","sizeY","onRemoveWrapper","useCallback","event","title","div","REGULAR","role","aria-label","aria-hidden","Component","onClick","hasHover","hasActive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,mBAAmB;IAChC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,sBAAsB;AACnD;AA0BA;;CAEC,GACD,OAAO,MAAMI,OAAO,CAAC,EACnBC,OAAQ,GAAE,EACVC,OAAM,EACNC,WAAY,IAAI,CAAA,EAChBC,UAAWd,KAAI,EACfe,iBAAkB,UAAS,EAC3BC,QAAS,IAAI,CAAA,EACbC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACO,GAAK;IACf,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGpB;IAC3B,MAAMqB,kBAAkB1B,MAAM2B,WAAW,CACvC,CAACC,QAA4B;QAC3BV,SAASU,OAAOb;IAClB,GACA;QAACG;QAAUH;KAAM;IAEnB,MAAMc,QAAQtB,qBAAqBe;IAEnC,qBACE,oBAACQ;QACCP,WAAWrB,WACTQ,MAAM,CAAC,OAAO,EACde,UAAUnB,SAASyB,OAAO,IAAIpB,eAAe,CAACc,MAAM,EACpDR,aAAaP,MAAM,CAAC,kBAAkB,EACtCa;QAEFS,MAAK;QACLC,cAAYJ;QACX,GAAGL,SAAS;qBAEb,oBAACM;QAAIP,WAAWb,MAAM,CAAC,WAAW;QAAEsB,MAAK;OACtC7B,aAAaiB,yBAAW,oBAACU;QAAIP,WAAWb,MAAM,CAAC,eAAe;OAAGU,uBAClE,oBAACX;QAASc,WAAWb,MAAM,CAAC,gBAAgB;QAAEmB,OAAOA;QAAOK,eAAAA,IAAW;OACpEZ,WAEFnB,aAAakB,wBAAU,oBAACS;QAAIP,WAAWb,MAAM,CAAC,cAAc;OAAGW,QAE/DJ,2BACC,oBAACT;QACC2B,WAAU;QACVZ,WAAWb,MAAM,CAAC,eAAe;QACjC0B,SAASV;QACTW,UAAU,KAAK;QACfC,WAAW,KAAK;QAChBL,cAAY,CAAC,EAAEd,gBAAgB,CAAC,EAAEU,MAAM,CAAC;qBAEzC,oBAAC5B;AAMb,EAAE"}
+{"version":3,"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"],"names":["React","Icon16Cancel","classNames","hasReactNode","noop","useAdaptivity","SizeType","getTitleFromChildren","Tappable","Footnote","styles","sizeYClassNames","none","COMPACT","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","className","restProps","sizeY","onRemoveWrapper","useCallback","event","title","div","REGULAR","role","aria-label","aria-hidden","Component","onClick","hasHover","hasActive"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,mBAAmB;IAChC,CAACJ,SAASO,QAAQ,EAAEH,MAAM,CAAC,sBAAsB;AACnD;AA0BA;;CAEC,GACD,OAAO,MAAMI,OAAO,CAAC,EACnBC,OAAQ,GAAE,EACVC,OAAM,EACNC,WAAY,KAAI,EAChBC,UAAWd,KAAI,EACfe,iBAAkB,UAAS,EAC3BC,QAAS,KAAI,EACbC,MAAK,EACLC,SAAQ,EACRC,UAAS,EACT,GAAGC,WACO;IACV,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGpB;IAC3B,MAAMqB,kBAAkB1B,MAAM2B,YAC5B,CAACC;QACCV,SAASU,OAAOb;IAClB,GACA;QAACG;QAAUH;KAAM;IAEnB,MAAMc,QAAQtB,qBAAqBe;IAEnC,qBACE,oBAACQ;QACCP,WAAWrB,WACTQ,MAAM,CAAC,OAAO,EACde,UAAUnB,SAASyB,WAAWpB,eAAe,CAACc,MAAM,EACpDR,aAAaP,MAAM,CAAC,kBAAkB,EACtCa;QAEFS,MAAK;QACLC,cAAYJ;QACX,GAAGL,SAAS;qBAEb,oBAACM;QAAIP,WAAWb,MAAM,CAAC,WAAW;QAAEsB,MAAK;OACtC7B,aAAaiB,yBAAW,oBAACU;QAAIP,WAAWb,MAAM,CAAC,eAAe;OAAGU,uBAClE,oBAACX;QAASc,WAAWb,MAAM,CAAC,gBAAgB;QAAEmB,OAAOA;QAAOK,eAAAA;OACzDZ,WAEFnB,aAAakB,wBAAU,oBAACS;QAAIP,WAAWb,MAAM,CAAC,cAAc;OAAGW,QAE/DJ,2BACC,oBAACT;QACC2B,WAAU;QACVZ,WAAWb,MAAM,CAAC,eAAe;QACjC0B,SAASV;QACTW,UAAU;QACVC,WAAW;QACXL,cAAY,CAAC,EAAEd,gBAAgB,CAAC,EAAEU,MAAM,CAAC;qBAEzC,oBAAC5B;AAMb,EAAE"}

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

@@ -41,7 +41,7 @@
   margin: -1px;
   transform: translateX(-1px);
   color: var(--vkui--color_icon_secondary);
-  border: none;
+  border: 0;
   border-radius: 2px;
   background: transparent;
   box-sizing: border-box;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ChipOption } from '../Chip/Chip';
 import { ChipsInputBaseProps } from '../ChipsInputBase/ChipsInputBase';
 import { FormFieldProps } from '../FormField/FormField';
@@ -7,4 +7,4 @@ export interface ChipsInputProps<Option extends ChipOption> extends ChipsInputBa
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
  */
-export declare const ChipsInput: <Option extends ChipOption>({ style, className, getRootRef, before, after, status, mode, ...restProps }: ChipsInputProps<Option>) => JSX.Element;
+export declare const ChipsInput: <Option extends ChipOption>({ style, className, getRootRef, before, after, status, mode, ...restProps }: ChipsInputProps<Option>) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"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  mode,\n  ...restProps\n}: ChipsInputProps<Option>) => {\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      className={classNames(styles['ChipsInput'], 'vkuiInternalChipsInput', 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      mode={mode}\n    >\n      <ChipsInputBase {...restProps} />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","ChipsInputBase","FormField","styles","ChipsInput","style","className","getRootRef","before","after","status","mode","restProps","disabled","role","aria-disabled","aria-readonly","readOnly"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,cAAc,QAA6B,mCAAmC;AACvF,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,0BAA0B;AAM7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAA4B,EACpDC,MAAK,EACLC,UAAS,EACTC,WAAU,EACVC,OAAM,EACNC,MAAK,EACLC,OAAM,EACNC,KAAI,EACJ,GAAGC,WACqB,GAAK;IAC7B,qBACE,oBAACV;QACCK,YAAYA;QACZD,WAAWN,WAAWG,MAAM,CAAC,aAAa,EAAE,0BAA0BG;QACtED,OAAOA;QACPQ,UAAUD,UAAUC,QAAQ;QAC5BL,QAAQA;QACRC,OAAOA;QACPK,MAAK;QACLC,iBAAeH,UAAUC,QAAQ;QACjCG,iBAAeJ,UAAUK,QAAQ;QACjCP,QAAQA;QACRC,MAAMA;qBAEN,oBAACV,gBAAmBW;AAG1B,EAAE"}
+{"version":3,"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  mode,\n  ...restProps\n}: ChipsInputProps<Option>) => {\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      className={classNames(styles['ChipsInput'], 'vkuiInternalChipsInput', 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      mode={mode}\n    >\n      <ChipsInputBase {...restProps} />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","ChipsInputBase","FormField","styles","ChipsInput","style","className","getRootRef","before","after","status","mode","restProps","disabled","role","aria-disabled","aria-readonly","readOnly"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,cAAc,QAA6B,mCAAmC;AACvF,SAASC,SAAS,QAAwB,yBAAyB;AACnE,OAAOC,YAAY,0BAA0B;AAM7C;;CAEC,GACD,OAAO,MAAMC,aAAa,CAA4B,EACpDC,MAAK,EACLC,UAAS,EACTC,WAAU,EACVC,OAAM,EACNC,MAAK,EACLC,OAAM,EACNC,KAAI,EACJ,GAAGC,WACqB;IACxB,qBACE,oBAACV;QACCK,YAAYA;QACZD,WAAWN,WAAWG,MAAM,CAAC,aAAa,EAAE,0BAA0BG;QACtED,OAAOA;QACPQ,UAAUD,UAAUC;QACpBL,QAAQA;QACRC,OAAOA;QACPK,MAAK;QACLC,iBAAeH,UAAUC;QACzBG,iBAAeJ,UAAUK;QACzBP,QAAQA;QACRC,MAAMA;qBAEN,oBAACV,gBAAmBW;AAG1B,EAAE"}

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

@@ -13,4 +13,4 @@ export interface ChipsInputBaseProps<Option extends ChipOption> extends Omit<Rea
     inputAriaLabel?: string;
 }
 export declare const chipsInputDefaultProps: ChipsInputBaseProps<any>;
-export declare const ChipsInputBase: <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => JSX.Element;
+export declare const ChipsInputBase: <Option extends ChipOption>(props: ChipsInputBaseProps<Option>) => React.JSX.Element;

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

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

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

@@ -32,7 +32,7 @@
   line-height: 26px;
   color: var(--vkui--color_text_primary);
   background: transparent;
-  border: none;
+  border: 0;
   box-shadow: none;
   -webkit-appearance: none;
      -moz-appearance: none;

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

@@ -45,4 +45,4 @@ export interface ChipsSelectProps<Option extends ChipOption> extends Omit<ChipsI
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsSelect
  */
-export declare const ChipsSelect: <Option extends ChipOption>(props: ChipsSelectProps<Option>) => JSX.Element;
+export declare const ChipsSelect: <Option extends ChipOption>(props: ChipsSelectProps<Option>) => React.JSX.Element;