@vkontakte/vkui 7.2.0 → 7.3.0

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

@@ -5,32 +5,38 @@ import { type RemovableProps } from '../Removable/Removable';
 import { type SimpleCellProps } from '../SimpleCell/SimpleCell';
 import { CellCheckbox } from './CellCheckbox/CellCheckbox';
 export interface CellProps extends Omit<SimpleCellProps, 'getRootRef'>, RemovableProps, HasRootRef<HTMLDivElement> {
+    /**
+     * Режим отображения ячейки:
+     *
+     * - "removable": добавляется кнопка для удаления
+     * - "selectable": добавляется чекбокс для выбора.
+     */
     mode?: 'removable' | 'selectable';
     /**
-     * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет
+     * В режиме перетаскивания ячейка перестает реагировать на нажатие, то есть при нажатии переданный `onClick` вызываться не будет.
      */
     draggable?: boolean;
     /**
-     * Имя для input в режиме selectable
+     * Имя для `input` в режиме `selectable`.
      */
     name?: string;
     /**
-     * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения
+     * В режиме `selectable` реагирует на входящие значения пропса `cheсked`, как зависящий напрямую от входящего значения.
      */
     checked?: boolean;
     /**
-     * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент
+     * В режиме `selectable` реагирует на входящие значения пропса `defaultChecked` как неконтролируемый компонент.
      */
     defaultChecked?: boolean;
     /**
-     * Коллбэк срабатывает при завершении перетаскивания.
-     * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.
+     * Обработчик, срабатывающий при завершении перетаскивания.
+     * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В обработчике есть объект с полями `from` и `to`.
      * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице
      * есть рабочий пример с обработкой этих чисел и перерисовкой списка.
      */
     onDragFinish?: (swappedItemRange: SwappedItemRange) => void;
     /**
-     * Текст для кнопки перетаскивания ячейки
+     * Текст для кнопки перетаскивания ячейки.
      */
     draggerLabel?: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAA0B,MAAM,6BAA6B,CAAC;AAKnF,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EACzC,cAAc,EACd,UAAU,CAAC,cAAc,CAAC;IAC5B,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC,QAAQ,EAAE,OAAO,YAAY,CAAC;CAgI/B,CAAC"}
+{"version":3,"file":"Cell.d.ts","sourceRoot":"","sources":["../../../src/components/Cell/Cell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,YAAY,EAA0B,MAAM,6BAA6B,CAAC;AAKnF,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EACzC,cAAc,EACd,UAAU,CAAC,cAAc,CAAC;IAC5B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAClC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG;IACvC,QAAQ,EAAE,OAAO,YAAY,CAAC;CA+H/B,CAAC"}

package/dist/components/Cell/Cell.js

@@ -65,7 +65,7 @@ import { DEFAULT_DRAGGABLE_LABEL } from "./constants.js";
         }, checkboxProps));
     }
     const hasActive = !disabled && !dragging;
-    const cellClasses = classNames("vkuiCell__host", dragging && "vkuiCell__dragging", platform === 'ios' && "vkuiCell__ios", removable && "vkuiCell__removable", Component === 'label' && "vkuiCell__selectable");
+    const cellClasses = classNames("vkuiCell__host", dragging && "vkuiCell__dragging", platform === 'ios' && "vkuiCell__ios", removable && "vkuiCell__removable");
     const simpleCellProps = _object_spread_props(_object_spread(_object_spread_props(_object_spread({
         hasActive: hasActive,
         hasHover: hasActive && !removable,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, type CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\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?: (swappedItemRange: SwappedItemRange) => void;\n  /**\n   * Текст для кнопки перетаскивания ячейки\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell: React.FC<CellProps> & {\n  Checkbox: typeof CellCheckbox;\n} = ({\n  mode,\n  onRemove,\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 = DEFAULT_DRAGGABLE_LABEL,\n  className,\n  style,\n  toggleButtonTestId,\n  removeButtonTestId,\n  ...restProps\n}: CellProps) => {\n  const [dragging, setDragging] = React.useState(false);\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 dragger = draggable ? (\n    <CellDragger\n      elRef={rootElRef}\n      className={classNames(styles.dragger, !before && !selectable && styles.controlNoBefore)}\n      onDragStateChange={setDragging}\n      onDragFinish={onDragFinish}\n    >\n      {draggerLabel}\n    </CellDragger>\n  ) : null;\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      defaultChecked,\n      checked,\n      disabled,\n      onChange,\n    };\n    checkbox = (\n      <CellCheckbox\n        className={classNames(styles.checkbox, !before && styles.controlNoBefore)}\n        {...checkboxProps}\n      />\n    );\n  }\n\n  const hasActive = !disabled && !dragging;\n\n  const cellClasses = classNames(\n    styles.host,\n    dragging && styles.dragging,\n    platform === 'ios' && styles.ios,\n    removable && styles.removable,\n    Component === 'label' && styles.selectable,\n  );\n\n  const simpleCellProps: SimpleCellProps = {\n    hasActive: hasActive,\n    hasHover: hasActive && !removable,\n    disabled,\n    ...restProps,\n    className: styles.content,\n    // чтобы свойство, если не определено, не присутствовало в\n    // restProps явно как {'Component': undefined} и ниже не переопределяло\n    // возможное значение commonProps.Component = 'a' при слиянии двух объектов, как\n    // {...commonProps, ...restProps}\n    ...(Component && { Component }),\n    before: (\n      <React.Fragment>\n        {draggable && platform !== 'ios' && dragger}\n        {selectable && checkbox}\n        {before}\n      </React.Fragment>\n    ),\n    after: (\n      <React.Fragment>\n        {draggable && platform === 'ios' && dragger}\n        {after}\n      </React.Fragment>\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        toggleButtonTestId={toggleButtonTestId}\n        removeButtonTestId={removeButtonTestId}\n        disabled={disabled}\n      >\n        {platform === 'ios' ? (\n          ({ isRemoving }) => {\n            return (\n              <SimpleCell {...simpleCellProps} {...(isRemoving ? { onClick: undefined } : {})} />\n            );\n          }\n        ) : (\n          <SimpleCell {...simpleCellProps} />\n        )}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      <SimpleCell {...simpleCellProps} />\n    </div>\n  );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["React","classNames","useExternRef","usePlatform","Removable","SimpleCell","CellCheckbox","CellDragger","DEFAULT_DRAGGABLE_LABEL","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","toggleButtonTestId","removeButtonTestId","restProps","dragging","setDragging","useState","selectable","removable","platform","rootElRef","dragger","elRef","onDragStateChange","checkbox","checkboxProps","hasActive","cellClasses","simpleCellProps","hasHover","Fragment","e","current","isRemoving","onClick","undefined","div","ref","Checkbox"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,UAAU,QAA8B,8BAA2B;AAC5E,SAASC,YAAY,QAAgC,iCAA8B;AACnF,SAASC,WAAW,QAAQ,+BAA4B;AACxD,SAASC,uBAAuB,QAAQ,iBAAc;AAqCtD;;CAEC,GACD,OAAO,MAAMC,OAET;QAAC,EACHC,IAAI,EACJC,QAAQ,EACRC,oBAAoB,SAAS,EAC7BC,YAAY,EACZC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,WAAWC,cAAc,EACzBC,QAAQ,EACRC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,cAAc,EACdC,UAAU,EACVC,eAAelB,uBAAuB,EACtCmB,SAAS,EACTC,KAAK,EACLC,kBAAkB,EAClBC,kBAAkB,EAER,WADPC;QApBHrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,UAAUC,YAAY,GAAGjC,MAAMkC,QAAQ,CAAC;IAC/C,MAAMC,aAAazB,SAAS;IAC5B,MAAM0B,YAAY1B,SAAS;IAC3B,MAAMQ,YAAYiB,aAAa,UAAUhB;IAEzC,MAAMkB,WAAWlC;IAEjB,MAAMmC,YAAYpC,aAAauB;IAE/B,MAAMc,UAAUtB,0BACd,KAACV;QACCiC,OAAOF;QACPX,WAAW1B,gCAA2B,CAACa,UAAU,CAACqB;QAClDM,mBAAmBR;QACnBpB,cAAcA;kBAEba;SAED;IAEJ,IAAIgB;IACJ,IAAIP,YAAY;QACd,MAAMQ,gBAAmC;YACvCtB;YACAC;YACAE;YACAD;YACAP;YACAI;QACF;QACAsB,yBACE,KAACpC;YACCqB,WAAW1B,iCAA4B,CAACa;WACpC6B;IAGV;IAEA,MAAMC,YAAY,CAAC5B,YAAY,CAACgB;IAEhC,MAAMa,cAAc5C,6BAElB+B,kCACAK,aAAa,0BACbD,oCACAlB,cAAc;IAGhB,MAAM4B,kBAAmC;QACvCF,WAAWA;QACXG,UAAUH,aAAa,CAACR;QACxBpB;OACGe;QACHJ,SAAS;QAKLT,aAAa;QAAEA;IAAU;QAC7BJ,sBACE,MAACd,MAAMgD,QAAQ;;gBACZ/B,aAAaoB,aAAa,SAASE;gBACnCJ,cAAcO;gBACd5B;;;QAGLC,qBACE,MAACf,MAAMgD,QAAQ;;gBACZ/B,aAAaoB,aAAa,SAASE;gBACnCxB;;;;IAKP,IAAIqB,WAAW;QACb,qBACE,KAAChC;YACCuB,WAAW1B,WAAW4C,aAAalB;YACnCC,OAAOA;YACPH,YAAYa;YACZ1B,mBAAmBA;YACnBD,UAAU,CAACsC,IAAMtC,qBAAAA,+BAAAA,SAAWsC,GAAGX,UAAUY,OAAO;YAChDrB,oBAAoBA;YACpBC,oBAAoBA;YACpBd,UAAUA;sBAETqB,aAAa,QACZ,CAAC,EAAEc,UAAU,EAAE;gBACb,qBACE,KAAC9C,+BAAeyC,iBAAsBK,aAAa;oBAAEC,SAASC;gBAAU,IAAI,CAAC;YAEjF,kBAEA,KAAChD,+BAAeyC;;IAIxB;IAEA,qBACE,KAACQ;QAAI3B,WAAW1B,WAAW4C,aAAalB;QAAYC,OAAOA;QAAO2B,KAAKjB;kBACrE,cAAA,KAACjC,+BAAeyC;;AAGtB,EAAE;AAEFrC,KAAK+C,QAAQ,GAAGlD"}
+{"version":3,"sources":["../../../src/components/Cell/Cell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { SwappedItemRange } from '../../hooks/useDraggableWithDomApi';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport { CellCheckbox, type CellCheckboxProps } from './CellCheckbox/CellCheckbox';\nimport { CellDragger } from './CellDragger/CellDragger';\nimport { DEFAULT_DRAGGABLE_LABEL } from './constants';\nimport styles from './Cell.module.css';\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, 'getRootRef'>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Режим отображения ячейки:\n   *\n   * - \"removable\": добавляется кнопка для удаления\n   * - \"selectable\": добавляется чекбокс для выбора.\n   */\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?: (swappedItemRange: SwappedItemRange) => void;\n  /**\n   * Текст для кнопки перетаскивания ячейки.\n   */\n  draggerLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell: React.FC<CellProps> & {\n  Checkbox: typeof CellCheckbox;\n} = ({\n  mode,\n  onRemove,\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 = DEFAULT_DRAGGABLE_LABEL,\n  className,\n  style,\n  toggleButtonTestId,\n  removeButtonTestId,\n  ...restProps\n}: CellProps) => {\n  const [dragging, setDragging] = React.useState(false);\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 dragger = draggable ? (\n    <CellDragger\n      elRef={rootElRef}\n      className={classNames(styles.dragger, !before && !selectable && styles.controlNoBefore)}\n      onDragStateChange={setDragging}\n      onDragFinish={onDragFinish}\n    >\n      {draggerLabel}\n    </CellDragger>\n  ) : null;\n\n  let checkbox;\n  if (selectable) {\n    const checkboxProps: CellCheckboxProps = {\n      name,\n      value,\n      defaultChecked,\n      checked,\n      disabled,\n      onChange,\n    };\n    checkbox = (\n      <CellCheckbox\n        className={classNames(styles.checkbox, !before && styles.controlNoBefore)}\n        {...checkboxProps}\n      />\n    );\n  }\n\n  const hasActive = !disabled && !dragging;\n\n  const cellClasses = classNames(\n    styles.host,\n    dragging && styles.dragging,\n    platform === 'ios' && styles.ios,\n    removable && styles.removable,\n  );\n\n  const simpleCellProps: SimpleCellProps = {\n    hasActive: hasActive,\n    hasHover: hasActive && !removable,\n    disabled,\n    ...restProps,\n    className: styles.content,\n    // чтобы свойство, если не определено, не присутствовало в\n    // restProps явно как {'Component': undefined} и ниже не переопределяло\n    // возможное значение commonProps.Component = 'a' при слиянии двух объектов, как\n    // {...commonProps, ...restProps}\n    ...(Component && { Component }),\n    before: (\n      <React.Fragment>\n        {draggable && platform !== 'ios' && dragger}\n        {selectable && checkbox}\n        {before}\n      </React.Fragment>\n    ),\n    after: (\n      <React.Fragment>\n        {draggable && platform === 'ios' && dragger}\n        {after}\n      </React.Fragment>\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        toggleButtonTestId={toggleButtonTestId}\n        removeButtonTestId={removeButtonTestId}\n        disabled={disabled}\n      >\n        {platform === 'ios' ? (\n          ({ isRemoving }) => {\n            return (\n              <SimpleCell {...simpleCellProps} {...(isRemoving ? { onClick: undefined } : {})} />\n            );\n          }\n        ) : (\n          <SimpleCell {...simpleCellProps} />\n        )}\n      </Removable>\n    );\n  }\n\n  return (\n    <div className={classNames(cellClasses, className)} style={style} ref={rootElRef}>\n      <SimpleCell {...simpleCellProps} />\n    </div>\n  );\n};\n\nCell.Checkbox = CellCheckbox;\n"],"names":["React","classNames","useExternRef","usePlatform","Removable","SimpleCell","CellCheckbox","CellDragger","DEFAULT_DRAGGABLE_LABEL","Cell","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","draggable","Component","ComponentProps","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","toggleButtonTestId","removeButtonTestId","restProps","dragging","setDragging","useState","selectable","removable","platform","rootElRef","dragger","elRef","onDragStateChange","checkbox","checkboxProps","hasActive","cellClasses","simpleCellProps","hasHover","Fragment","e","current","isRemoving","onClick","undefined","div","ref","Checkbox"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,UAAU,QAA8B,8BAA2B;AAC5E,SAASC,YAAY,QAAgC,iCAA8B;AACnF,SAASC,WAAW,QAAQ,+BAA4B;AACxD,SAASC,uBAAuB,QAAQ,iBAAc;AA2CtD;;CAEC,GACD,OAAO,MAAMC,OAET;QAAC,EACHC,IAAI,EACJC,QAAQ,EACRC,oBAAoB,SAAS,EAC7BC,YAAY,EACZC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,WAAWC,cAAc,EACzBC,QAAQ,EACRC,IAAI,EACJC,KAAK,EACLC,OAAO,EACPC,cAAc,EACdC,UAAU,EACVC,eAAelB,uBAAuB,EACtCmB,SAAS,EACTC,KAAK,EACLC,kBAAkB,EAClBC,kBAAkB,EAER,WADPC;QApBHrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,UAAUC,YAAY,GAAGjC,MAAMkC,QAAQ,CAAC;IAC/C,MAAMC,aAAazB,SAAS;IAC5B,MAAM0B,YAAY1B,SAAS;IAC3B,MAAMQ,YAAYiB,aAAa,UAAUhB;IAEzC,MAAMkB,WAAWlC;IAEjB,MAAMmC,YAAYpC,aAAauB;IAE/B,MAAMc,UAAUtB,0BACd,KAACV;QACCiC,OAAOF;QACPX,WAAW1B,gCAA2B,CAACa,UAAU,CAACqB;QAClDM,mBAAmBR;QACnBpB,cAAcA;kBAEba;SAED;IAEJ,IAAIgB;IACJ,IAAIP,YAAY;QACd,MAAMQ,gBAAmC;YACvCtB;YACAC;YACAE;YACAD;YACAP;YACAI;QACF;QACAsB,yBACE,KAACpC;YACCqB,WAAW1B,iCAA4B,CAACa;WACpC6B;IAGV;IAEA,MAAMC,YAAY,CAAC5B,YAAY,CAACgB;IAEhC,MAAMa,cAAc5C,6BAElB+B,kCACAK,aAAa,0BACbD;IAGF,MAAMU,kBAAmC;QACvCF,WAAWA;QACXG,UAAUH,aAAa,CAACR;QACxBpB;OACGe;QACHJ,SAAS;QAKLT,aAAa;QAAEA;IAAU;QAC7BJ,sBACE,MAACd,MAAMgD,QAAQ;;gBACZ/B,aAAaoB,aAAa,SAASE;gBACnCJ,cAAcO;gBACd5B;;;QAGLC,qBACE,MAACf,MAAMgD,QAAQ;;gBACZ/B,aAAaoB,aAAa,SAASE;gBACnCxB;;;;IAKP,IAAIqB,WAAW;QACb,qBACE,KAAChC;YACCuB,WAAW1B,WAAW4C,aAAalB;YACnCC,OAAOA;YACPH,YAAYa;YACZ1B,mBAAmBA;YACnBD,UAAU,CAACsC,IAAMtC,qBAAAA,+BAAAA,SAAWsC,GAAGX,UAAUY,OAAO;YAChDrB,oBAAoBA;YACpBC,oBAAoBA;YACpBd,UAAUA;sBAETqB,aAAa,QACZ,CAAC,EAAEc,UAAU,EAAE;gBACb,qBACE,KAAC9C,+BAAeyC,iBAAsBK,aAAa;oBAAEC,SAASC;gBAAU,IAAI,CAAC;YAEjF,kBAEA,KAAChD,+BAAeyC;;IAIxB;IAEA,qBACE,KAACQ;QAAI3B,WAAW1B,WAAW4C,aAAalB;QAAYC,OAAOA;QAAO2B,KAAKjB;kBACrE,cAAA,KAACjC,+BAAeyC;;AAGtB,EAAE;AAEFrC,KAAK+C,QAAQ,GAAGlD"}

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

@@ -1 +1 @@
-{"version":3,"file":"CellDragger.d.ts","sourceRoot":"","sources":["../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EAEvB,MAAM,uCAAuC,CAAC;AAG/C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAKhE,UAAU,gBACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,EAAE,MAAM,cAAc,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,WAAW,GAAI,yFAQzB,gBAAgB,KAAG,KAAK,CAAC,SA2B3B,CAAC"}
+{"version":3,"file":"CellDragger.d.ts","sourceRoot":"","sources":["../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EAEvB,MAAM,uCAAuC,CAAC;AAG/C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAKhE,UAAU,gBACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,EAAE,MAAM,cAAc,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,WAAW,GAAI,yFAQzB,gBAAgB,KAAG,KAAK,CAAC,SA2B3B,CAAC"}

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

@@ -3,7 +3,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Icon24Reorder, Icon24ReorderIos } from "@vkontakte/icons";
+/* eslint-disable jsdoc/require-jsdoc */ import { Icon24Reorder, Icon24ReorderIos } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
 import { useDraggableWithDomApi } from "../../../hooks/useDraggableWithDomApi/index.js";
 import { usePlatform } from "../../../hooks/usePlatform.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["'use client';\n\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  type DraggableProps,\n  type UseDraggableProps,\n  useDraggableWithDomApi,\n} from '../../../hooks/useDraggableWithDomApi';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { Touch } from '../../Touch/Touch';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './CellDragger.module.css';\n\ninterface CellDraggerProps\n  extends UseDraggableProps,\n    Omit<HTMLAttributesWithRootRef<HTMLElement>, keyof DraggableProps> {\n  disabled?: boolean;\n  onDragStateChange?: (dragging: boolean) => void;\n}\n\nexport const CellDragger = ({\n  elRef,\n  disabled,\n  className,\n  onDragStateChange,\n  onDragFinish,\n  children,\n  ...restProps\n}: CellDraggerProps): React.ReactNode => {\n  const platform = usePlatform();\n  const Icon = platform === 'ios' ? Icon24ReorderIos : Icon24Reorder;\n\n  const { dragging, onDragStart, onDragMove, onDragEnd } = useDraggableWithDomApi({\n    elRef,\n    onDragFinish,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (onDragStateChange) {\n      onDragStateChange(dragging);\n    }\n  }, [dragging, onDragStateChange]);\n\n  return (\n    <Touch\n      className={classNames(styles.host, className)}\n      onStart={disabled ? undefined : onDragStart}\n      onMoveY={disabled ? undefined : onDragMove}\n      onEnd={disabled ? undefined : onDragEnd}\n      {...restProps}\n    >\n      {children && <VisuallyHidden>{children}</VisuallyHidden>}\n      <Icon className={styles.icon} />\n    </Touch>\n  );\n};\n"],"names":["Icon24Reorder","Icon24ReorderIos","classNames","useDraggableWithDomApi","usePlatform","useIsomorphicLayoutEffect","Touch","VisuallyHidden","CellDragger","elRef","disabled","className","onDragStateChange","onDragFinish","children","restProps","platform","Icon","dragging","onDragStart","onDragMove","onDragEnd","onStart","undefined","onMoveY","onEnd"],"mappings":"AAAA;;;;;AAEA,SAASA,aAAa,EAAEC,gBAAgB,QAAQ,mBAAmB;AACnE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAGEC,sBAAsB,QACjB,iDAAwC;AAC/C,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SAASC,yBAAyB,QAAQ,4CAAyC;AAEnF,SAASC,KAAK,QAAQ,uBAAoB;AAC1C,SAASC,cAAc,QAAQ,yCAAsC;AAUrE,OAAO,MAAMC,cAAc;QAAC,EAC1BC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,iBAAiB,EACjBC,YAAY,EACZC,QAAQ,EAES,WADdC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWZ;IACjB,MAAMa,OAAOD,aAAa,QAAQf,mBAAmBD;IAErD,MAAM,EAAEkB,QAAQ,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGlB,uBAAuB;QAC9EM;QACAI;IACF;IAEAR,0BAA0B;QACxB,IAAIO,mBAAmB;YACrBA,kBAAkBM;QACpB;IACF,GAAG;QAACA;QAAUN;KAAkB;IAEhC,qBACE,MAACN;QACCK,WAAWT,oCAAwBS;QACnCW,SAASZ,WAAWa,YAAYJ;QAChCK,SAASd,WAAWa,YAAYH;QAChCK,OAAOf,WAAWa,YAAYF;OAC1BN;;YAEHD,0BAAY,KAACP;0BAAgBO;;0BAC9B,KAACG;gBAAKN,SAAS;;;;AAGrB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport {\n  type DraggableProps,\n  type UseDraggableProps,\n  useDraggableWithDomApi,\n} from '../../../hooks/useDraggableWithDomApi';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../../types';\nimport { Touch } from '../../Touch/Touch';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport styles from './CellDragger.module.css';\n\ninterface CellDraggerProps\n  extends UseDraggableProps,\n    Omit<HTMLAttributesWithRootRef<HTMLElement>, keyof DraggableProps> {\n  disabled?: boolean;\n  onDragStateChange?: (dragging: boolean) => void;\n}\n\nexport const CellDragger = ({\n  elRef,\n  disabled,\n  className,\n  onDragStateChange,\n  onDragFinish,\n  children,\n  ...restProps\n}: CellDraggerProps): React.ReactNode => {\n  const platform = usePlatform();\n  const Icon = platform === 'ios' ? Icon24ReorderIos : Icon24Reorder;\n\n  const { dragging, onDragStart, onDragMove, onDragEnd } = useDraggableWithDomApi({\n    elRef,\n    onDragFinish,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (onDragStateChange) {\n      onDragStateChange(dragging);\n    }\n  }, [dragging, onDragStateChange]);\n\n  return (\n    <Touch\n      className={classNames(styles.host, className)}\n      onStart={disabled ? undefined : onDragStart}\n      onMoveY={disabled ? undefined : onDragMove}\n      onEnd={disabled ? undefined : onDragEnd}\n      {...restProps}\n    >\n      {children && <VisuallyHidden>{children}</VisuallyHidden>}\n      <Icon className={styles.icon} />\n    </Touch>\n  );\n};\n"],"names":["Icon24Reorder","Icon24ReorderIos","classNames","useDraggableWithDomApi","usePlatform","useIsomorphicLayoutEffect","Touch","VisuallyHidden","CellDragger","elRef","disabled","className","onDragStateChange","onDragFinish","children","restProps","platform","Icon","dragging","onDragStart","onDragMove","onDragEnd","onStart","undefined","onMoveY","onEnd"],"mappings":"AAAA;;;;;AACA,sCAAsC,GAEtC,SAASA,aAAa,EAAEC,gBAAgB,QAAQ,mBAAmB;AACnE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAGEC,sBAAsB,QACjB,iDAAwC;AAC/C,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SAASC,yBAAyB,QAAQ,4CAAyC;AAEnF,SAASC,KAAK,QAAQ,uBAAoB;AAC1C,SAASC,cAAc,QAAQ,yCAAsC;AAUrE,OAAO,MAAMC,cAAc;QAAC,EAC1BC,KAAK,EACLC,QAAQ,EACRC,SAAS,EACTC,iBAAiB,EACjBC,YAAY,EACZC,QAAQ,EAES,WADdC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWZ;IACjB,MAAMa,OAAOD,aAAa,QAAQf,mBAAmBD;IAErD,MAAM,EAAEkB,QAAQ,EAAEC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGlB,uBAAuB;QAC9EM;QACAI;IACF;IAEAR,0BAA0B;QACxB,IAAIO,mBAAmB;YACrBA,kBAAkBM;QACpB;IACF,GAAG;QAACA;QAAUN;KAAkB;IAEhC,qBACE,MAACN;QACCK,WAAWT,oCAAwBS;QACnCW,SAASZ,WAAWa,YAAYJ;QAChCK,SAASd,WAAWa,YAAYH;QAChCK,OAAOf,WAAWa,YAAYF;OAC1BN;;YAEHD,0BAAY,KAACP;0BAAgBO;;0BAC9B,KAACG;gBAAKN,SAAS;;;;AAGrB,EAAE"}

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

@@ -10,6 +10,9 @@ export interface CellButtonProps extends SimpleCellProps {
      * > Режим `centered` переопределяет токен для темы `"accent"`.
      */
     appearance?: 'accent' | 'neutral' | 'negative';
+    /**
+     * Возможность центрирования содержимого компонента.
+     */
     centered?: boolean;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"CellButton.d.ts","sourceRoot":"","sources":["../../../src/components/CellButton/CellButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,qCAAqC,CAAC;AAG7C,eAAO,MAAM,oBAAoB;;;;CAIhC,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,mDAKxB,eAAe,KAAG,KAAK,CAAC,SAY1B,CAAC"}
+{"version":3,"file":"CellButton.d.ts","sourceRoot":"","sources":["../../../src/components/CellButton/CellButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,qCAAqC,CAAC;AAG7C,eAAO,MAAM,oBAAoB;;;;CAIhC,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,mDAKxB,eAAe,KAAG,KAAK,CAAC,SAY1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport '../SimpleCell/SimpleCell.module.css';\nimport styles from './CellButton.module.css';\n\nexport const appearanceClassNames = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n  negative: styles.appearanceNegative,\n};\n\nexport interface CellButtonProps extends SimpleCellProps {\n  /**\n   * > Режим `centered` переопределяет токен для темы `\"accent\"`.\n   */\n  appearance?: 'accent' | 'neutral' | 'negative';\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  appearance = 'accent',\n  className,\n  ...restProps\n}: CellButtonProps): React.ReactNode => {\n  return (\n    <SimpleCell\n      {...restProps}\n      className={classNames(\n        styles.host,\n        appearanceClassNames[appearance],\n        centered && styles.centered,\n        className,\n      )}\n    />\n  );\n};\n"],"names":["classNames","SimpleCell","appearanceClassNames","accent","neutral","negative","CellButton","centered","appearance","className","restProps"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAA8B,8BAA2B;AAI5E,OAAO,MAAMC,uBAAuB;IAClCC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV,EAAE;AAUF;;CAEC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,WAAW,KAAK,EAChBC,aAAa,QAAQ,EACrBC,SAAS,EAEO,WADbC;QAHHH;QACAC;QACAC;;IAGA,qBACE,KAACR,oDACKS;QACJD,WAAWT,mCAETE,oBAAoB,CAACM,WAAW,EAChCD,wCACAE;;AAIR,EAAE"}
+{"version":3,"sources":["../../../src/components/CellButton/CellButton.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { SimpleCell, type SimpleCellProps } from '../SimpleCell/SimpleCell';\nimport '../SimpleCell/SimpleCell.module.css';\nimport styles from './CellButton.module.css';\n\nexport const appearanceClassNames = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n  negative: styles.appearanceNegative,\n};\n\nexport interface CellButtonProps extends SimpleCellProps {\n  /**\n   * > Режим `centered` переопределяет токен для темы `\"accent\"`.\n   */\n  appearance?: 'accent' | 'neutral' | 'negative';\n  /**\n   * Возможность центрирования содержимого компонента.\n   */\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CellButton\n */\nexport const CellButton = ({\n  centered = false,\n  appearance = 'accent',\n  className,\n  ...restProps\n}: CellButtonProps): React.ReactNode => {\n  return (\n    <SimpleCell\n      {...restProps}\n      className={classNames(\n        styles.host,\n        appearanceClassNames[appearance],\n        centered && styles.centered,\n        className,\n      )}\n    />\n  );\n};\n"],"names":["classNames","SimpleCell","appearanceClassNames","accent","neutral","negative","CellButton","centered","appearance","className","restProps"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAA8B,8BAA2B;AAI5E,OAAO,MAAMC,uBAAuB;IAClCC,MAAM;IACNC,OAAO;IACPC,QAAQ;AACV,EAAE;AAaF;;CAEC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,WAAW,KAAK,EAChBC,aAAa,QAAQ,EACrBC,SAAS,EAEO,WADbC;QAHHH;QACAC;QACAC;;IAGA,qBACE,KAACR,oDACKS;QACJD,WAAWT,mCAETE,oBAAoB,CAACM,WAAW,EAChCD,wCACAE;;AAIR,EAAE"}