@vkontakte/vkui 4.30.0 → 4.33.0

package/dist/components/Cell/Cell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["mode", "onRemove", "removePlaceholder", "onDragFinish", "before", "after", "disabled", "removable", "draggable", "selectable", "Component", "onChange", "name", "value", "checked", "defaultChecked", "getRootRef", "draggerLabel", "className", "style"],
-    _excluded2 = ["dragging", "rootElRef"];
+    _excluded2 = ["dragging"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
@@ -9,14 +9,19 @@ import { noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
 import { getClassName } from "../../helpers/getClassName";
 import { ANDROID, IOS, VKCOM } from "../../lib/platform";
-import SimpleCell from "../SimpleCell/SimpleCell";
+import { SimpleCell } from "../SimpleCell/SimpleCell";
 import { Removable } from "../Removable/Removable";
 import { usePlatform } from "../../hooks/usePlatform";
+import { useExternRef } from "../../hooks/useExternRef";
 import { useDraggable } from "./useDraggable";
 import { ListContext } from "../List/ListContext";
 import { CellDragger } from "./CellDragger/CellDragger";
 import { CellCheckbox } from "./CellCheckbox/CellCheckbox";
 var warn = warnOnce("Cell");
+/**
+ * @see https://vkcom.github.io/VKUI/#/Cell
+ */
+
 export var Cell = function Cell(_ref) {
   var propsMode = _ref.mode,
       _ref$onRemove = _ref.onRemove,
@@ -59,12 +64,13 @@ export var Cell = function Cell(_ref) {
   var selectable = mode === "selectable";
   var removable = mode === "removable";
   var platform = usePlatform();
+  var rootElRef = useExternRef(getRootRef);
 
   var _useDraggable = useDraggable({
+    rootElRef: rootElRef,
     onDragFinish: onDragFinish
   }),
       dragging = _useDraggable.dragging,
-      rootElRef = _useDraggable.rootElRef,
       draggableProps = _objectWithoutProperties(_useDraggable, _excluded2);
 
   var _React$useContext = React.useContext(ListContext),
@@ -133,7 +139,7 @@ export var Cell = function Cell(_ref) {
       getRootRef: rootElRef,
       removePlaceholder: removePlaceholder,
       onRemove: function onRemove(e) {
-        return _onRemove(e, rootElRef === null || rootElRef === void 0 ? void 0 : rootElRef.current);
+        return _onRemove(e, rootElRef.current);
       }
     }, simpleCell);
   }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Cell/Cell.tsx"],"names":["React","classNames","noop","warnOnce","getClassName","ANDROID","IOS","VKCOM","SimpleCell","Removable","usePlatform","useDraggable","ListContext","CellDragger","CellCheckbox","warn","Cell","propsMode","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","deprecatedRemovable","removable","draggable","deprecatedSelectable","selectable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","process","env","NODE_ENV","platform","dragging","rootElRef","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","simpleCell","e","current"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { ANDROID, IOS, VKCOM } from \"../../lib/platform\";\nimport SimpleCell, { SimpleCellProps } from \"../SimpleCell/SimpleCell\";\nimport { HasPlatform } from \"../../types\";\nimport { Removable, RemovableProps } from \"../Removable/Removable\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useDraggable } from \"./useDraggable\";\nimport { ListContext } from \"../List/ListContext\";\nimport { CellDragger } from \"./CellDragger/CellDragger\";\nimport { CellCheckbox, CellCheckboxProps } from \"./CellCheckbox/CellCheckbox\";\nimport \"./Cell.css\";\n\nexport interface CellProps\n  extends SimpleCellProps,\n    HasPlatform,\n    RemovableProps {\n  mode?: \"removable\" | \"selectable\";\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * @deprecated Будет удалено в 5.0.0. Используйте mode=\"removable\"\n   */\n  removable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * @deprecated Будет удалено в 5.0.0. Используйте mode=\"selectable\"\n   */\n  selectable?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса checked, как зависящий напрямую от входящего значения\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\nconst warn = warnOnce(\"Cell\");\nexport const Cell: React.FC<CellProps> = ({\n  mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0\n  onRemove = noop,\n  removePlaceholder = \"Удалить\",\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  removable: deprecatedRemovable, // TODO: удалить перед 5.0.0\n  draggable,\n  selectable: deprecatedSelectable, // TODO: удалить перед 5.0.0\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  // TODO: удалить перед 5.0.0\n  let mode: CellProps[\"mode\"] = propsMode;\n\n  if (!propsMode && (deprecatedSelectable || deprecatedRemovable)) {\n    mode = deprecatedSelectable ? \"selectable\" : \"removable\";\n\n    if (process.env.NODE_ENV === \"development\") {\n      deprecatedSelectable &&\n        warn(\n          'Свойство selectable устарело и будет удалено в 5.0.0. Используйте mode=\"selectable\".'\n        );\n      deprecatedRemovable &&\n        warn(\n          'Свойство removable устарело и будет удалено в 5.0.0. Используйте mode=\"removable\".'\n        );\n    }\n  }\n  // /end TODO\n\n  const selectable = mode === \"selectable\";\n  const removable = mode === \"removable\";\n\n  const platform = usePlatform();\n\n  const { dragging, rootElRef, ...draggableProps } = useDraggable({\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        vkuiClass=\"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 vkuiClass=\"Cell__checkbox\" {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled =\n    (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  // eslint-disable-next-line vkui/no-object-expression-in-arguments\n  const cellClasses = classNames(getClassName(\"Cell\", platform), {\n    \"Cell--dragging\": dragging,\n    \"Cell--removable\": removable,\n    \"Cell--selectable\": selectable,\n    \"Cell--disabled\": disabled,\n  });\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      vkuiClass=\"Cell__content\"\n      disabled={simpleCellDisabled}\n      Component={selectable ? \"label\" : Component}\n      before={\n        <React.Fragment>\n          {draggable && (platform === ANDROID || platform === VKCOM) && 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\n  if (removable) {\n    return (\n      <Removable\n        vkuiClass={cellClasses}\n        className={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\n      vkuiClass={cellClasses}\n      className={className}\n      style={style}\n      ref={rootElRef}\n    >\n      {simpleCell}\n    </div>\n  );\n};\n"],"file":"Cell.js"}
+{"version":3,"sources":["../../../src/components/Cell/Cell.tsx"],"names":["React","classNames","noop","warnOnce","getClassName","ANDROID","IOS","VKCOM","SimpleCell","Removable","usePlatform","useExternRef","useDraggable","ListContext","CellDragger","CellCheckbox","warn","Cell","propsMode","mode","onRemove","removePlaceholder","onDragFinish","before","after","disabled","deprecatedRemovable","removable","draggable","deprecatedSelectable","selectable","Component","onChange","name","value","checked","defaultChecked","getRootRef","draggerLabel","className","style","restProps","process","env","NODE_ENV","platform","rootElRef","dragging","draggableProps","useContext","toggleDrag","useEffect","undefined","dragger","checkbox","checkboxProps","simpleCellDisabled","hasActive","cellClasses","simpleCell","e","current"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { noop } from \"../../lib/utils\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { ANDROID, IOS, VKCOM } from \"../../lib/platform\";\nimport { SimpleCell, SimpleCellProps } from \"../SimpleCell/SimpleCell\";\nimport { HasPlatform, HasRootRef } from \"../../types\";\nimport { Removable, RemovableProps } from \"../Removable/Removable\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useDraggable } from \"./useDraggable\";\nimport { ListContext } from \"../List/ListContext\";\nimport { CellDragger } from \"./CellDragger/CellDragger\";\nimport { CellCheckbox, CellCheckboxProps } from \"./CellCheckbox/CellCheckbox\";\nimport \"./Cell.css\";\n\nexport interface CellProps\n  extends Omit<SimpleCellProps, \"getRootRef\">,\n    HasPlatform,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: \"removable\" | \"selectable\";\n  /**\n   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет\n   */\n  draggable?: boolean;\n  /**\n   * @deprecated Будет удалено в 5.0.0. Используйте mode=\"removable\"\n   */\n  removable?: boolean;\n  /**\n   * Имя для input в режиме selectable\n   */\n  name?: string;\n  /**\n   * @deprecated Будет удалено в 5.0.0. Используйте mode=\"selectable\"\n   */\n  selectable?: boolean;\n  /**\n   * В режиме selectable реагирует на входящие значения пропса checked, как зависящий напрямую от входящего значения\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\nconst warn = warnOnce(\"Cell\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Cell\n */\nexport const Cell: React.FC<CellProps> = ({\n  mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0\n  onRemove = noop,\n  removePlaceholder = \"Удалить\",\n  onDragFinish,\n  before,\n  after,\n  disabled,\n  removable: deprecatedRemovable, // TODO: удалить перед 5.0.0\n  draggable,\n  selectable: deprecatedSelectable, // TODO: удалить перед 5.0.0\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  // TODO: удалить перед 5.0.0\n  let mode: CellProps[\"mode\"] = propsMode;\n\n  if (!propsMode && (deprecatedSelectable || deprecatedRemovable)) {\n    mode = deprecatedSelectable ? \"selectable\" : \"removable\";\n\n    if (process.env.NODE_ENV === \"development\") {\n      deprecatedSelectable &&\n        warn(\n          'Свойство selectable устарело и будет удалено в 5.0.0. Используйте mode=\"selectable\".'\n        );\n      deprecatedRemovable &&\n        warn(\n          'Свойство removable устарело и будет удалено в 5.0.0. Используйте mode=\"removable\".'\n        );\n    }\n  }\n  // /end TODO\n\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        vkuiClass=\"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 vkuiClass=\"Cell__checkbox\" {...checkboxProps} />;\n  }\n\n  const simpleCellDisabled =\n    (draggable && !selectable) || removable || disabled;\n  const hasActive = !simpleCellDisabled && !dragging;\n\n  // eslint-disable-next-line vkui/no-object-expression-in-arguments\n  const cellClasses = classNames(getClassName(\"Cell\", platform), {\n    \"Cell--dragging\": dragging,\n    \"Cell--removable\": removable,\n    \"Cell--selectable\": selectable,\n    \"Cell--disabled\": disabled,\n  });\n\n  const simpleCell = (\n    <SimpleCell\n      hasActive={hasActive}\n      hasHover={hasActive}\n      {...restProps}\n      vkuiClass=\"Cell__content\"\n      disabled={simpleCellDisabled}\n      Component={selectable ? \"label\" : Component}\n      before={\n        <React.Fragment>\n          {draggable && (platform === ANDROID || platform === VKCOM) && 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\n  if (removable) {\n    return (\n      <Removable\n        vkuiClass={cellClasses}\n        className={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\n      vkuiClass={cellClasses}\n      className={className}\n      style={style}\n      ref={rootElRef}\n    >\n      {simpleCell}\n    </div>\n  );\n};\n"],"file":"Cell.js"}

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

@@ -1,3 +1,4 @@
+import * as React from "react";
 import { TouchEvent } from "../Touch/Touch";
 import { CellProps } from "./Cell";
 export interface DraggableProps {
@@ -7,7 +8,8 @@ export interface DraggableProps {
 }
 interface UseDraggableProps extends DraggableProps {
     dragging: boolean;
-    rootElRef: any;
 }
-export declare const useDraggable: ({ onDragFinish, }: Pick<CellProps, "onDragFinish">) => UseDraggableProps;
+export declare const useDraggable: <T extends HTMLElement>({ rootElRef, onDragFinish, }: Pick<CellProps, "onDragFinish"> & {
+    rootElRef: React.MutableRefObject<T | null>;
+}) => UseDraggableProps;
 export {};

package/dist/components/Cell/useDraggable.js

@@ -1,15 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from "react";
 export var useDraggable = function useDraggable(_ref) {
-  var onDragFinish = _ref.onDragFinish;
+  var rootElRef = _ref.rootElRef,
+      onDragFinish = _ref.onDragFinish;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       dragging = _React$useState2[0],
       setDragging = _React$useState2[1];
 
-  var rootElRef = React.useRef(null);
-
   var _React$useState3 = React.useState([]),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       siblings = _React$useState4[0],
@@ -130,8 +129,7 @@ export var useDraggable = function useDraggable(_ref) {
     onDragStart: onDragStart,
     onDragMove: onDragMove,
     onDragEnd: onDragEnd,
-    dragging: dragging,
-    rootElRef: rootElRef
+    dragging: dragging
   };
   return useDraggableProps;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Cell/useDraggable.tsx"],"names":["React","useDraggable","onDragFinish","useState","dragging","setDragging","rootElRef","useRef","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","undefined","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","e","originalEvent","preventDefault","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAeA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAEW;AAAA,MADrCC,YACqC,QADrCA,YACqC;;AACrC,wBAAgCF,KAAK,CAACG,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AACA,MAAMC,SAAS,GAAGN,KAAK,CAACO,MAAN,CAA0B,IAA1B,CAAlB;;AAEA,yBAAgCP,KAAK,CAACG,QAAN,CAA8B,EAA9B,CAAhC;AAAA;AAAA,MAAOK,QAAP;AAAA,MAAiBC,WAAjB;;AACA,yBAA4CT,KAAK,CAACG,QAAN,CAAuB,CAAvB,CAA5C;AAAA;AAAA,MAAOO,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,yBAAwCX,KAAK,CAACG,QAAN,CAAuB,CAAvB,CAAxC;AAAA;AAAA,MAAOS,YAAP;AAAA,MAAqBC,eAArB;;AACA,yBAAkCb,KAAK,CAACG,QAAN,CAAuB,CAAvB,CAAlC;AAAA;AAAA,MAAOW,SAAP;AAAA,MAAkBC,YAAlB;;AACA,0BAA0Cf,KAAK,CAACG,QAAN,CAExCa,SAFwC,CAA1C;AAAA;AAAA,MAAOC,aAAP;AAAA,MAAsBC,gBAAtB;;AAIA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AAAA;;AACxB,QAAMC,MAAM,GAAGd,SAAS,CAACe,OAAzB;;AACA,QAAI,CAACD,MAAL,EAAa;AACX;AACD;;AAEDf,IAAAA,WAAW,CAAC,IAAD,CAAX;AAEA,QAAIiB,SAAwB,GAAG,EAA/B;;AACA,iCAAIF,MAAM,CAACG,aAAX,kDAAI,sBAAsBC,UAA1B,EAAsC;AACpCF,MAAAA,SAAS,GAAGG,KAAK,CAACC,IAAN,CAAWN,MAAM,CAACG,aAAP,CAAqBI,QAAhC,CAAZ;AACD;;AACD,QAAMC,GAAG,GAAGN,SAAS,CAACO,OAAV,CAAkBT,MAAlB,CAAZ;;AAEAT,IAAAA,iBAAiB,CAACiB,GAAD,CAAjB;AACAf,IAAAA,eAAe,CAACe,GAAD,CAAf;AACAnB,IAAAA,WAAW,CAACa,SAAD,CAAX;AACAP,IAAAA,YAAY,CAAC,CAAD,CAAZ;AACD,GAlBD;;AAoBA,MAAMe,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAmB;AACpCA,IAAAA,CAAC,CAACC,aAAF,CAAgBC,cAAhB;AAEA,QAAMb,MAAM,GAAGd,SAAS,CAACe,OAAzB;;AAEA,QAAID,MAAJ,EAAY;AACVA,MAAAA,MAAM,CAACc,KAAP,CAAaC,SAAb,wBAAuCJ,CAAC,CAACK,MAAzC;AACA,UAAMC,WAAW,GAAGjB,MAAM,CAACkB,qBAAP,EAApB;AAEApB,MAAAA,gBAAgB,CAACJ,SAAS,GAAGiB,CAAC,CAACK,MAAd,GAAuB,CAAvB,GAA2B,MAA3B,GAAoC,IAArC,CAAhB;AACArB,MAAAA,YAAY,CAACgB,CAAC,CAACK,MAAH,CAAZ;AACAvB,MAAAA,eAAe,CAACH,cAAD,CAAf;AAEAF,MAAAA,QAAQ,CAAC+B,OAAT,CAAiB,UAACC,OAAD,EAAuBC,YAAvB,EAAgD;AAC/D,YAAMC,cAAc,GAAGF,OAAO,CAACF,qBAAR,EAAvB;AACA,YAAMK,iBAAiB,GAAGD,cAAc,CAACE,MAAf,GAAwB,CAAlD;AAEA,YAAMC,eAAe,GACnBR,WAAW,CAACS,MAAZ,GAAqBJ,cAAc,CAACK,GAAf,GAAqBJ,iBAD5C;AAEA,YAAMK,gBAAgB,GACpBX,WAAW,CAACU,GAAZ,GAAkBL,cAAc,CAACI,MAAf,GAAwBH,iBAD5C;;AAGA,YAAIjC,cAAc,GAAG+B,YAArB,EAAmC;AACjC,cAAII,eAAJ,EAAqB;AACnB,gBAAI5B,aAAa,KAAK,MAAtB,EAA8B;AAC5BuB,cAAAA,OAAO,CAACN,KAAR,CAAcC,SAAd,GAA0B,mBAA1B;AACD;;AAEDtB,YAAAA,eAAe,CAAC,UAACD,YAAD;AAAA,qBAAkBA,YAAY,GAAG,CAAjC;AAAA,aAAD,CAAf;AACD;;AACD,cAAIoC,gBAAgB,IAAI/B,aAAa,KAAK,IAA1C,EAAgD;AAC9CuB,YAAAA,OAAO,CAACN,KAAR,CAAcC,SAAd,GAA0B,eAA1B;AACD;AACF,SAXD,MAWO,IAAIzB,cAAc,GAAG+B,YAArB,EAAmC;AACxC,cAAIO,gBAAJ,EAAsB;AACpB,gBAAI/B,aAAa,KAAK,IAAtB,EAA4B;AAC1BuB,cAAAA,OAAO,CAACN,KAAR,CAAcC,SAAd,GAA0B,kBAA1B;AACD;;AAEDtB,YAAAA,eAAe,CAAC,UAACD,YAAD;AAAA,qBAAkBA,YAAY,GAAG,CAAjC;AAAA,aAAD,CAAf;AACD;;AACD,cAAIiC,eAAe,IAAI5B,aAAa,KAAK,MAAzC,EAAiD;AAC/CuB,YAAAA,OAAO,CAACN,KAAR,CAAcC,SAAd,GAA0B,eAA1B;AACD;AACF;AACF,OAhCD;AAiCD;AACF,GA/CD;;AAiDA,MAAMc,SAAS,GAAG,SAAZA,SAAY,GAAM;AACtB,QAAOvB,IAAP,GAAoBhB,cAApB;AAAA,QAAawC,EAAb,GAAoCtC,YAApC;AAEAJ,IAAAA,QAAQ,CAAC+B,OAAT,CAAiB,UAACC,OAAD,EAA0B;AACzCA,MAAAA,OAAO,CAACN,KAAR,CAAcC,SAAd,GAA0B,EAA1B;AACD,KAFD;AAIA1B,IAAAA,WAAW,CAAC,EAAD,CAAX;AACAI,IAAAA,eAAe,CAAC,CAAD,CAAf;AACAF,IAAAA,iBAAiB,CAAC,CAAD,CAAjB;AACAO,IAAAA,gBAAgB,CAACF,SAAD,CAAhB;AACAD,IAAAA,YAAY,CAAC,CAAD,CAAZ;AAEAV,IAAAA,WAAW,CAAC,KAAD,CAAX;AAEAH,IAAAA,YAAY,IAAIA,YAAY,CAAC;AAAEwB,MAAAA,IAAI,EAAJA,IAAF;AAAQwB,MAAAA,EAAE,EAAFA;AAAR,KAAD,CAA5B;AACD,GAhBD;;AAkBA,MAAMC,iBAAoC,GAAG;AAC3ChC,IAAAA,WAAW,EAAXA,WAD2C;AAE3CW,IAAAA,UAAU,EAAVA,UAF2C;AAG3CmB,IAAAA,SAAS,EAATA,SAH2C;AAI3C7C,IAAAA,QAAQ,EAARA,QAJ2C;AAK3CE,IAAAA,SAAS,EAATA;AAL2C,GAA7C;AAQA,SAAO6C,iBAAP;AACD,CA9GM","sourcesContent":["import * as React from \"react\";\nimport { TouchEvent } from \"../Touch/Touch\";\nimport { CellProps } from \"./Cell\";\n\nexport interface DraggableProps {\n  onDragStart: () => void;\n  onDragEnd: () => void;\n  onDragMove: (e: TouchEvent) => void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n  rootElRef: any;\n}\n\nexport const useDraggable = ({\n  onDragFinish,\n}: Pick<CellProps, \"onDragFinish\">) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n  const rootElRef = React.useRef<HTMLElement>(null);\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<\n    \"down\" | \"up\" | undefined\n  >(undefined);\n\n  const onDragStart = () => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (e: TouchEvent) => {\n    e.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${e.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - e.shiftY < 0 ? \"down\" : \"up\");\n      setDragShift(e.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling =\n          rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling =\n          rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === \"down\") {\n              sibling.style.transform = \"translateY(-100%)\";\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === \"up\") {\n            sibling.style.transform = \"translateY(0)\";\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === \"up\") {\n              sibling.style.transform = \"translateY(100%)\";\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === \"down\") {\n            sibling.style.transform = \"translateY(0)\";\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = () => {\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = \"\";\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n    rootElRef,\n  };\n\n  return useDraggableProps;\n};\n"],"file":"useDraggable.js"}
+{"version":3,"sources":["../../../src/components/Cell/useDraggable.tsx"],"names":["React","useDraggable","rootElRef","onDragFinish","useState","dragging","setDragging","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","undefined","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","parentElement","childNodes","Array","from","children","idx","indexOf","onDragMove","e","originalEvent","preventDefault","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","to","useDraggableProps"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAcA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAe,OAKtB;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,MAHJC,YAGI,QAHJA,YAGI;;AACJ,wBAAgCH,KAAK,CAACI,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,yBAAgCN,KAAK,CAACI,QAAN,CAA8B,EAA9B,CAAhC;AAAA;AAAA,MAAOG,QAAP;AAAA,MAAiBC,WAAjB;;AACA,yBAA4CR,KAAK,CAACI,QAAN,CAAuB,CAAvB,CAA5C;AAAA;AAAA,MAAOK,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,yBAAwCV,KAAK,CAACI,QAAN,CAAuB,CAAvB,CAAxC;AAAA;AAAA,MAAOO,YAAP;AAAA,MAAqBC,eAArB;;AACA,yBAAkCZ,KAAK,CAACI,QAAN,CAAuB,CAAvB,CAAlC;AAAA;AAAA,MAAOS,SAAP;AAAA,MAAkBC,YAAlB;;AACA,0BAA0Cd,KAAK,CAACI,QAAN,CAExCW,SAFwC,CAA1C;AAAA;AAAA,MAAOC,aAAP;AAAA,MAAsBC,gBAAtB;;AAIA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AAAA;;AACxB,QAAMC,MAAM,GAAGjB,SAAS,CAACkB,OAAzB;;AACA,QAAI,CAACD,MAAL,EAAa;AACX;AACD;;AAEDb,IAAAA,WAAW,CAAC,IAAD,CAAX;AAEA,QAAIe,SAAwB,GAAG,EAA/B;;AACA,iCAAIF,MAAM,CAACG,aAAX,kDAAI,sBAAsBC,UAA1B,EAAsC;AACpCF,MAAAA,SAAS,GAAGG,KAAK,CAACC,IAAN,CAAWN,MAAM,CAACG,aAAP,CAAqBI,QAAhC,CAAZ;AACD;;AACD,QAAMC,GAAG,GAAGN,SAAS,CAACO,OAAV,CAAkBT,MAAlB,CAAZ;;AAEAT,IAAAA,iBAAiB,CAACiB,GAAD,CAAjB;AACAf,IAAAA,eAAe,CAACe,GAAD,CAAf;AACAnB,IAAAA,WAAW,CAACa,SAAD,CAAX;AACAP,IAAAA,YAAY,CAAC,CAAD,CAAZ;AACD,GAlBD;;AAoBA,MAAMe,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAmB;AACpCA,IAAAA,CAAC,CAACC,aAAF,CAAgBC,cAAhB;AAEA,QAAMb,MAAM,GAAGjB,SAAS,CAACkB,OAAzB;;AAEA,QAAID,MAAJ,EAAY;AACVA,MAAAA,MAAM,CAACc,KAAP,CAAaC,SAAb,wBAAuCJ,CAAC,CAACK,MAAzC;AACA,UAAMC,WAAW,GAAGjB,MAAM,CAACkB,qBAAP,EAApB;AAEApB,MAAAA,gBAAgB,CAACJ,SAAS,GAAGiB,CAAC,CAACK,MAAd,GAAuB,CAAvB,GAA2B,MAA3B,GAAoC,IAArC,CAAhB;AACArB,MAAAA,YAAY,CAACgB,CAAC,CAACK,MAAH,CAAZ;AACAvB,MAAAA,eAAe,CAACH,cAAD,CAAf;AAEAF,MAAAA,QAAQ,CAAC+B,OAAT,CAAiB,UAACC,OAAD,EAAuBC,YAAvB,EAAgD;AAC/D,YAAMC,cAAc,GAAGF,OAAO,CAACF,qBAAR,EAAvB;AACA,YAAMK,iBAAiB,GAAGD,cAAc,CAACE,MAAf,GAAwB,CAAlD;AAEA,YAAMC,eAAe,GACnBR,WAAW,CAACS,MAAZ,GAAqBJ,cAAc,CAACK,GAAf,GAAqBJ,iBAD5C;AAEA,YAAMK,gBAAgB,GACpBX,WAAW,CAACU,GAAZ,GAAkBL,cAAc,CAACI,MAAf,GAAwBH,iBAD5C;;AAGA,YAAIjC,cAAc,GAAG+B,YAArB,EAAmC;AACjC,cAAII,eAAJ,EAAqB;AACnB,gBAAI5B,aAAa,KAAK,MAAtB,EAA8B;AAC5BuB,cAAAA,OAAO,CAACN,KAAR,CAAcC,SAAd,GAA0B,mBAA1B;AACD;;AAEDtB,YAAAA,eAAe,CAAC,UAACD,YAAD;AAAA,qBAAkBA,YAAY,GAAG,CAAjC;AAAA,aAAD,CAAf;AACD;;AACD,cAAIoC,gBAAgB,IAAI/B,aAAa,KAAK,IAA1C,EAAgD;AAC9CuB,YAAAA,OAAO,CAACN,KAAR,CAAcC,SAAd,GAA0B,eAA1B;AACD;AACF,SAXD,MAWO,IAAIzB,cAAc,GAAG+B,YAArB,EAAmC;AACxC,cAAIO,gBAAJ,EAAsB;AACpB,gBAAI/B,aAAa,KAAK,IAAtB,EAA4B;AAC1BuB,cAAAA,OAAO,CAACN,KAAR,CAAcC,SAAd,GAA0B,kBAA1B;AACD;;AAEDtB,YAAAA,eAAe,CAAC,UAACD,YAAD;AAAA,qBAAkBA,YAAY,GAAG,CAAjC;AAAA,aAAD,CAAf;AACD;;AACD,cAAIiC,eAAe,IAAI5B,aAAa,KAAK,MAAzC,EAAiD;AAC/CuB,YAAAA,OAAO,CAACN,KAAR,CAAcC,SAAd,GAA0B,eAA1B;AACD;AACF;AACF,OAhCD;AAiCD;AACF,GA/CD;;AAiDA,MAAMc,SAAS,GAAG,SAAZA,SAAY,GAAM;AACtB,QAAOvB,IAAP,GAAoBhB,cAApB;AAAA,QAAawC,EAAb,GAAoCtC,YAApC;AAEAJ,IAAAA,QAAQ,CAAC+B,OAAT,CAAiB,UAACC,OAAD,EAA0B;AACzCA,MAAAA,OAAO,CAACN,KAAR,CAAcC,SAAd,GAA0B,EAA1B;AACD,KAFD;AAIA1B,IAAAA,WAAW,CAAC,EAAD,CAAX;AACAI,IAAAA,eAAe,CAAC,CAAD,CAAf;AACAF,IAAAA,iBAAiB,CAAC,CAAD,CAAjB;AACAO,IAAAA,gBAAgB,CAACF,SAAD,CAAhB;AACAD,IAAAA,YAAY,CAAC,CAAD,CAAZ;AAEAR,IAAAA,WAAW,CAAC,KAAD,CAAX;AAEAH,IAAAA,YAAY,IAAIA,YAAY,CAAC;AAAEsB,MAAAA,IAAI,EAAJA,IAAF;AAAQwB,MAAAA,EAAE,EAAFA;AAAR,KAAD,CAA5B;AACD,GAhBD;;AAkBA,MAAMC,iBAAoC,GAAG;AAC3ChC,IAAAA,WAAW,EAAXA,WAD2C;AAE3CW,IAAAA,UAAU,EAAVA,UAF2C;AAG3CmB,IAAAA,SAAS,EAATA,SAH2C;AAI3C3C,IAAAA,QAAQ,EAARA;AAJ2C,GAA7C;AAOA,SAAO6C,iBAAP;AACD,CA/GM","sourcesContent":["import * as React from \"react\";\nimport { TouchEvent } from \"../Touch/Touch\";\nimport { CellProps } from \"./Cell\";\n\nexport interface DraggableProps {\n  onDragStart: () => void;\n  onDragEnd: () => void;\n  onDragMove: (e: TouchEvent) => void;\n}\n\ninterface UseDraggableProps extends DraggableProps {\n  dragging: boolean;\n}\n\nexport const useDraggable = <T extends HTMLElement>({\n  rootElRef,\n  onDragFinish,\n}: Pick<CellProps, \"onDragFinish\"> & {\n  rootElRef: React.MutableRefObject<T | null>;\n}) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<\n    \"down\" | \"up\" | undefined\n  >(undefined);\n\n  const onDragStart = () => {\n    const rootEl = rootElRef.current;\n    if (!rootEl) {\n      return;\n    }\n\n    setDragging(true);\n\n    let _siblings: HTMLElement[] = [];\n    if (rootEl.parentElement?.childNodes) {\n      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];\n    }\n    const idx = _siblings.indexOf(rootEl);\n\n    setDragStartIndex(idx);\n    setDragEndIndex(idx);\n    setSiblings(_siblings);\n    setDragShift(0);\n  };\n\n  const onDragMove = (e: TouchEvent) => {\n    e.originalEvent.preventDefault();\n\n    const rootEl = rootElRef.current;\n\n    if (rootEl) {\n      rootEl.style.transform = `translateY(${e.shiftY}px)`;\n      const rootGesture = rootEl.getBoundingClientRect();\n\n      setDragDirection(dragShift - e.shiftY < 0 ? \"down\" : \"up\");\n      setDragShift(e.shiftY);\n      setDragEndIndex(dragStartIndex);\n\n      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n        const siblingGesture = sibling.getBoundingClientRect();\n        const siblingHalfHeight = siblingGesture.height / 2;\n\n        const rootOverSibling =\n          rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n        const rootUnderSibling =\n          rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n        if (dragStartIndex < siblingIndex) {\n          if (rootOverSibling) {\n            if (dragDirection === \"down\") {\n              sibling.style.transform = \"translateY(-100%)\";\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n          }\n          if (rootUnderSibling && dragDirection === \"up\") {\n            sibling.style.transform = \"translateY(0)\";\n          }\n        } else if (dragStartIndex > siblingIndex) {\n          if (rootUnderSibling) {\n            if (dragDirection === \"up\") {\n              sibling.style.transform = \"translateY(100%)\";\n            }\n\n            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n          }\n          if (rootOverSibling && dragDirection === \"down\") {\n            sibling.style.transform = \"translateY(0)\";\n          }\n        }\n      });\n    }\n  };\n\n  const onDragEnd = () => {\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = \"\";\n    });\n\n    setSiblings([]);\n    setDragEndIndex(0);\n    setDragStartIndex(0);\n    setDragDirection(undefined);\n    setDragShift(0);\n\n    setDragging(false);\n\n    onDragFinish && onDragFinish({ from, to });\n  };\n\n  const useDraggableProps: UseDraggableProps = {\n    onDragStart,\n    onDragMove,\n    onDragEnd,\n    dragging,\n  };\n\n  return useDraggableProps;\n};\n"],"file":"useDraggable.js"}

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

@@ -5,5 +5,7 @@ export interface CellButtonProps extends SimpleCellProps {
     mode?: "primary" | "danger";
     centered?: boolean;
 }
-declare const CellButton: React.FC<CellButtonProps>;
-export { CellButton };
+/**
+ * @see https://vkcom.github.io/VKUI/#/CellButton
+ */
+export declare const CellButton: React.FC<CellButtonProps>;

package/dist/components/CellButton/CellButton.js

@@ -1,28 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["centered", "mode"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import SimpleCell from "../SimpleCell/SimpleCell";
+import { SimpleCell } from "../SimpleCell/SimpleCell";
 
-var CellButton = function CellButton(_ref) {
+/**
+ * @see https://vkcom.github.io/VKUI/#/CellButton
+ */
+export var CellButton = function CellButton(_ref) {
   var _ref$centered = _ref.centered,
       centered = _ref$centered === void 0 ? false : _ref$centered,
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? "primary" : _ref$mode,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var platform = usePlatform();
   return createScopedElement(SimpleCell, _extends({
     stopPropagation: true
   }, restProps, {
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: classNames(getClassName("CellButton", platform), "CellButton--".concat(mode), _defineProperty({}, "CellButton--centered", centered))
+    vkuiClass: classNames("CellButton", "CellButton--".concat(mode), centered && "CellButton--centered")
   }));
 };
-
-export { CellButton };
 //# sourceMappingURL=CellButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CellButton/CellButton.tsx"],"names":["getClassName","classNames","usePlatform","SimpleCell","CellButton","centered","mode","restProps","platform"],"mappings":";;;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AACA,OAAOC,UAAP;;AAQA,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,OAIvB;AAAA,2BAHrBC,QAGqB;AAAA,MAHrBA,QAGqB,8BAHV,KAGU;AAAA,uBAFrBC,IAEqB;AAAA,MAFrBA,IAEqB,0BAFd,SAEc;AAAA,MADlBC,SACkB;;AACrB,MAAMC,QAAQ,GAAGN,WAAW,EAA5B;AAEA,SACE,oBAAC,UAAD;AACE,IAAA,eAAe,EAAE;AADnB,KAEMK,SAFN;AAGE;AACA,IAAA,SAAS,EAAEN,UAAU,CACnBD,YAAY,CAAC,YAAD,EAAeQ,QAAf,CADO,wBAEJF,IAFI,uBAIhB,sBAJgB,EAISD,QAJT;AAJvB,KADF;AAcD,CArBD;;AAuBA,SAASD,UAAT","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport SimpleCell, { SimpleCellProps } from \"../SimpleCell/SimpleCell\";\nimport \"./CellButton.css\";\n\nexport interface CellButtonProps extends SimpleCellProps {\n  mode?: \"primary\" | \"danger\";\n  centered?: boolean;\n}\n\nconst CellButton: React.FC<CellButtonProps> = ({\n  centered = false,\n  mode = \"primary\",\n  ...restProps\n}: CellButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(\n        getClassName(\"CellButton\", platform),\n        `CellButton--${mode}`,\n        {\n          [\"CellButton--centered\"]: centered,\n        }\n      )}\n    />\n  );\n};\n\nexport { CellButton };\n"],"file":"CellButton.js"}
+{"version":3,"sources":["../../../src/components/CellButton/CellButton.tsx"],"names":["classNames","SimpleCell","CellButton","centered","mode","restProps"],"mappings":";;;;AACA,SAASA,UAAT;AACA,SAASC,UAAT;;AAQA;AACA;AACA;AACA,OAAO,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,OAI9B;AAAA,2BAHrBC,QAGqB;AAAA,MAHrBA,QAGqB,8BAHV,KAGU;AAAA,uBAFrBC,IAEqB;AAAA,MAFrBA,IAEqB,0BAFd,SAEc;AAAA,MADlBC,SACkB;;AACrB,SACE,oBAAC,UAAD;AACE,IAAA,eAAe,EAAE;AADnB,KAEMA,SAFN;AAGE,IAAA,SAAS,EAAEL,UAAU,CACnB,YADmB,wBAEJI,IAFI,GAGnBD,QAAQ,IAAI,sBAHO;AAHvB,KADF;AAWD,CAhBM","sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { SimpleCell, SimpleCellProps } from \"../SimpleCell/SimpleCell\";\nimport \"./CellButton.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: React.FC<CellButtonProps> = ({\n  centered = false,\n  mode = \"primary\",\n  ...restProps\n}: CellButtonProps) => {\n  return (\n    <SimpleCell\n      stopPropagation={true}\n      {...restProps}\n      vkuiClass={classNames(\n        \"CellButton\",\n        `CellButton--${mode}`,\n        centered && \"CellButton--centered\"\n      )}\n    />\n  );\n};\n"],"file":"CellButton.js"}

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

@@ -4,7 +4,12 @@ import { AdaptivityProps } from "../../hoc/withAdaptivity";
 import "./Checkbox.css";
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement>, AdaptivityProps {
     description?: React.ReactNode;
+    indeterminate?: boolean;
+    defaultIndeterminate?: boolean;
 }
+/**
+ * @see https://vkcom.github.io/VKUI/#/Checkbox
+ */
 export declare const Checkbox: React.FunctionComponent<CheckboxProps>;
-declare const _default: React.FC<Pick<CheckboxProps, "max" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "pattern" | "color" | "size" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "min" | "name" | "type" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "alt" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "getRootRef" | "getRef" | "description"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+declare const _default: React.FC<Pick<CheckboxProps, "max" | "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "pattern" | "color" | "size" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "min" | "name" | "type" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "alt" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "getRootRef" | "getRef" | "description" | "indeterminate" | "defaultIndeterminate"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
 export default _default;

package/dist/components/Checkbox/Checkbox.js

@@ -1,18 +1,25 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "sizeY"];
+var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "sizeY", "onChange"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import Tappable, { ACTIVE_EFFECT_DELAY } from "../Tappable/Tappable";
-import { getClassName } from "../../helpers/getClassName";
+import * as React from "react";
+import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
 import { classNames } from "../../lib/classNames";
 import { IOS, VKCOM } from "../../lib/platform";
-import { Icon20CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOn, Icon24CheckBoxOff } from "@vkontakte/icons";
+import { Icon20CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOn, Icon24CheckBoxOff, Icon20CheckBoxIndetermanate } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";
 import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
-import Text from "../Typography/Text/Text";
-import Headline from "../Typography/Headline/Headline";
+import { Text } from "../Typography/Text/Text";
 import { hasReactNode } from "../../lib/utils";
 import { Caption } from "../Typography/Caption/Caption";
+import { useExternRef } from "../../hooks/useExternRef";
+import { VisuallyHiddenInput } from "../VisuallyHiddenInput/VisuallyHiddenInput";
+import { warnOnce } from "../../lib/warnOnce";
+var warn = warnOnce("Checkbox");
+/**
+ * @see https://vkcom.github.io/VKUI/#/Checkbox
+ */
+
 export var Checkbox = function Checkbox(_ref) {
   var children = _ref.children,
       className = _ref.className,
@@ -20,38 +27,86 @@ export var Checkbox = function Checkbox(_ref) {
       getRootRef = _ref.getRootRef,
       getRef = _ref.getRef,
       description = _ref.description,
+      indeterminate = _ref.indeterminate,
+      defaultIndeterminate = _ref.defaultIndeterminate,
       sizeY = _ref.sizeY,
+      onChange = _ref.onChange,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
+  var inputRef = useExternRef(getRef);
   var platform = usePlatform();
-  var ContentComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
+  React.useEffect(function () {
+    var indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
+
+    if (inputRef.current) {
+      inputRef.current.indeterminate = Boolean(indeterminateValue);
+    }
+  }, [defaultIndeterminate, indeterminate, inputRef]);
+  var handleChange = React.useCallback(function (event) {
+    if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined && inputRef.current) {
+      inputRef.current.indeterminate = false;
+    }
+
+    if (indeterminate !== undefined && inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+
+    onChange && onChange(event);
+  }, [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]);
+
+  if (process.env.NODE_ENV === "development") {
+    if (defaultIndeterminate && restProps.defaultChecked) {
+      warn("defaultIndeterminate и defaultChecked не могут быть true одновременно", "error");
+    }
+
+    if (indeterminate && restProps.checked) {
+      warn("indeterminate и checked не могут быть true одновременно", "error");
+    }
+
+    if (restProps.defaultChecked && restProps.checked) {
+      warn("defaultChecked и checked не могут быть true одновременно", "error");
+    }
+  }
+
   return createScopedElement(Tappable, {
     Component: "label",
-    vkuiClass: classNames(getClassName("Checkbox", platform), "Checkbox--sizeY-".concat(sizeY)),
+    vkuiClass: classNames("Checkbox", "Checkbox--sizeY-".concat(sizeY), !(hasReactNode(children) || hasReactNode(description)) && "Checkbox--simple"),
     className: className,
     style: style,
     disabled: restProps.disabled,
     activeEffectDelay: platform === IOS ? 100 : ACTIVE_EFFECT_DELAY,
     getRootRef: getRootRef
-  }, createScopedElement("input", _extends({}, restProps, {
+  }, createScopedElement(VisuallyHiddenInput, _extends({}, restProps, {
+    onChange: handleChange,
     type: "checkbox",
     vkuiClass: "Checkbox__input",
-    ref: getRef
+    getRef: inputRef
   })), createScopedElement("div", {
-    vkuiClass: "Checkbox__container"
-  }, createScopedElement("div", {
     vkuiClass: "Checkbox__icon Checkbox__icon--on"
-  }, sizeY === SizeType.COMPACT || platform === VKCOM ? createScopedElement(Icon20CheckBoxOn, null) : createScopedElement(Icon24CheckBoxOn, null)), createScopedElement("div", {
+  }, sizeY === SizeType.COMPACT || platform === VKCOM ? createScopedElement(Icon20CheckBoxOn, {
+    "aria-hidden": true
+  }) : createScopedElement(Icon24CheckBoxOn, {
+    "aria-hidden": true
+  })), createScopedElement("div", {
     vkuiClass: "Checkbox__icon Checkbox__icon--off"
-  }, sizeY === SizeType.COMPACT || platform === VKCOM ? createScopedElement(Icon20CheckBoxOff, null) : createScopedElement(Icon24CheckBoxOff, null)), createScopedElement(ContentComponent, {
-    weight: "regular",
+  }, sizeY === SizeType.COMPACT || platform === VKCOM ? createScopedElement(Icon20CheckBoxOff, {
+    "aria-hidden": true
+  }) : createScopedElement(Icon24CheckBoxOff, {
+    "aria-hidden": true
+  })), createScopedElement("div", {
+    vkuiClass: "Checkbox__icon Checkbox__icon--indeterminate"
+  }, createScopedElement(Icon20CheckBoxIndetermanate, {
+    "aria-hidden": true,
+    width: sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24,
+    height: sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24
+  })), createScopedElement(Text, {
     vkuiClass: "Checkbox__content",
     Component: "div"
   }, createScopedElement("div", {
     vkuiClass: "Checkbox__children"
   }, children), hasReactNode(description) && createScopedElement(Caption, {
     vkuiClass: "Checkbox__description"
-  }, description))));
+  }, description)));
 }; // eslint-disable-next-line import/no-default-export
 
 export default withAdaptivity(Checkbox, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":["Tappable","ACTIVE_EFFECT_DELAY","getClassName","classNames","IOS","VKCOM","Icon20CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOn","Icon24CheckBoxOff","usePlatform","withAdaptivity","SizeType","Text","Headline","hasReactNode","Caption","Checkbox","children","className","style","getRootRef","getRef","description","sizeY","restProps","platform","ContentComponent","COMPACT","disabled"],"mappings":";;;;AACA,OAAOA,QAAP,IAAmBC,mBAAnB;AACA,SAASC,YAAT;AACA,SAASC,UAAT;AACA,SAASC,GAAT,EAAcC,KAAd;AAEA,SACEC,gBADF,EAEEC,iBAFF,EAGEC,gBAHF,EAIEC,iBAJF,QAKO,kBALP;AAQA,SAASC,WAAT;AACA,SACEC,cADF,EAGEC,QAHF;AAKA,OAAOC,IAAP;AACA,OAAOC,QAAP;AACA,SAASC,YAAT;AACA,SAASC,OAAT;AAWA,OAAO,IAAMC,QAAgD,GAAG,SAAnDA,QAAmD,OAS3C;AAAA,MARnBC,QAQmB,QARnBA,QAQmB;AAAA,MAPnBC,SAOmB,QAPnBA,SAOmB;AAAA,MANnBC,KAMmB,QANnBA,KAMmB;AAAA,MALnBC,UAKmB,QALnBA,UAKmB;AAAA,MAJnBC,MAImB,QAJnBA,MAImB;AAAA,MAHnBC,WAGmB,QAHnBA,WAGmB;AAAA,MAFnBC,KAEmB,QAFnBA,KAEmB;AAAA,MADhBC,SACgB;;AACnB,MAAMC,QAAQ,GAAGhB,WAAW,EAA5B;AAEA,MAAMiB,gBAAgB,GACpBD,QAAQ,KAAKrB,KAAb,IAAsBmB,KAAK,KAAKZ,QAAQ,CAACgB,OAAzC,GAAmDf,IAAnD,GAA0DC,QAD5D;AAGA,SACE,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,OADZ;AAEE,IAAA,SAAS,EAAEX,UAAU,CACnBD,YAAY,CAAC,UAAD,EAAawB,QAAb,CADO,4BAEAF,KAFA,EAFvB;AAME,IAAA,SAAS,EAAEL,SANb;AAOE,IAAA,KAAK,EAAEC,KAPT;AAQE,IAAA,QAAQ,EAAEK,SAAS,CAACI,QARtB;AASE,IAAA,iBAAiB,EAAEH,QAAQ,KAAKtB,GAAb,GAAmB,GAAnB,GAAyBH,mBAT9C;AAUE,IAAA,UAAU,EAAEoB;AAVd,KAYE,0CACMI,SADN;AAEE,IAAA,IAAI,EAAC,UAFP;AAGE,IAAA,SAAS,EAAC,iBAHZ;AAIE,IAAA,GAAG,EAAEH;AAJP,KAZF,EAkBE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGE,KAAK,KAAKZ,QAAQ,CAACgB,OAAnB,IAA8BF,QAAQ,KAAKrB,KAA3C,GACC,oBAAC,gBAAD,OADD,GAGC,oBAAC,gBAAD,OAJJ,CADF,EAQE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGmB,KAAK,KAAKZ,QAAQ,CAACgB,OAAnB,IAA8BF,QAAQ,KAAKrB,KAA3C,GACC,oBAAC,iBAAD,OADD,GAGC,oBAAC,iBAAD,OAJJ,CARF,EAeE,oBAAC,gBAAD;AACE,IAAA,MAAM,EAAC,SADT;AAEE,IAAA,SAAS,EAAC,mBAFZ;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAqCa,QAArC,CALF,EAMGH,YAAY,CAACQ,WAAD,CAAZ,IACC,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,KAA4CA,WAA5C,CAPJ,CAfF,CAlBF,CADF;AA+CD,CA9DM,C,CAgEP;;AACA,eAAeZ,cAAc,CAACM,QAAD,EAAW;AACtCO,EAAAA,KAAK,EAAE;AAD+B,CAAX,CAA7B","sourcesContent":["import * as React from \"react\";\nimport Tappable, { ACTIVE_EFFECT_DELAY } from \"../Tappable/Tappable\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\n\nimport {\n  Icon20CheckBoxOn,\n  Icon20CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckBoxOff,\n} from \"@vkontakte/icons\";\n\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  withAdaptivity,\n  AdaptivityProps,\n  SizeType,\n} from \"../../hoc/withAdaptivity\";\nimport Text from \"../Typography/Text/Text\";\nimport Headline from \"../Typography/Headline/Headline\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport \"./Checkbox.css\";\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    AdaptivityProps {\n  description?: React.ReactNode;\n}\n\nexport const Checkbox: React.FunctionComponent<CheckboxProps> = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  sizeY,\n  ...restProps\n}: CheckboxProps) => {\n  const platform = usePlatform();\n\n  const ContentComponent =\n    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <Tappable\n      Component=\"label\"\n      vkuiClass={classNames(\n        getClassName(\"Checkbox\", platform),\n        `Checkbox--sizeY-${sizeY}`\n      )}\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n    >\n      <input\n        {...restProps}\n        type=\"checkbox\"\n        vkuiClass=\"Checkbox__input\"\n        ref={getRef}\n      />\n      <div vkuiClass=\"Checkbox__container\">\n        <div vkuiClass=\"Checkbox__icon Checkbox__icon--on\">\n          {sizeY === SizeType.COMPACT || platform === VKCOM ? (\n            <Icon20CheckBoxOn />\n          ) : (\n            <Icon24CheckBoxOn />\n          )}\n        </div>\n        <div vkuiClass=\"Checkbox__icon Checkbox__icon--off\">\n          {sizeY === SizeType.COMPACT || platform === VKCOM ? (\n            <Icon20CheckBoxOff />\n          ) : (\n            <Icon24CheckBoxOff />\n          )}\n        </div>\n        <ContentComponent\n          weight=\"regular\"\n          vkuiClass=\"Checkbox__content\"\n          Component=\"div\"\n        >\n          <div vkuiClass=\"Checkbox__children\">{children}</div>\n          {hasReactNode(description) && (\n            <Caption vkuiClass=\"Checkbox__description\">{description}</Caption>\n          )}\n        </ContentComponent>\n      </div>\n    </Tappable>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(Checkbox, {\n  sizeY: true,\n});\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":["React","ACTIVE_EFFECT_DELAY","Tappable","classNames","IOS","VKCOM","Icon20CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOn","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","usePlatform","withAdaptivity","SizeType","Text","hasReactNode","Caption","useExternRef","VisuallyHiddenInput","warnOnce","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","sizeY","onChange","restProps","inputRef","platform","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","disabled","COMPACT"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { ACTIVE_EFFECT_DELAY, Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\n\nimport {\n  Icon20CheckBoxOn,\n  Icon20CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon20CheckBoxIndetermanate,\n} from \"@vkontakte/icons\";\n\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  withAdaptivity,\n  AdaptivityProps,\n  SizeType,\n} from \"../../hoc/withAdaptivity\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./Checkbox.css\";\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    AdaptivityProps {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce(\"Checkbox\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox: React.FunctionComponent<CheckboxProps> = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  sizeY,\n  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n\n  React.useEffect(() => {\n    const indeterminateValue =\n      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) => {\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(\n        \"defaultIndeterminate и defaultChecked не могут быть true одновременно\",\n        \"error\"\n      );\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      vkuiClass={classNames(\n        \"Checkbox\",\n        `Checkbox--sizeY-${sizeY}`,\n        !(hasReactNode(children) || hasReactNode(description)) &&\n          `Checkbox--simple`\n      )}\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        vkuiClass=\"Checkbox__input\"\n        getRef={inputRef}\n      />\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--on\">\n        {sizeY === SizeType.COMPACT || platform === VKCOM ? (\n          <Icon20CheckBoxOn aria-hidden />\n        ) : (\n          <Icon24CheckBoxOn aria-hidden />\n        )}\n      </div>\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--off\">\n        {sizeY === SizeType.COMPACT || platform === VKCOM ? (\n          <Icon20CheckBoxOff aria-hidden />\n        ) : (\n          <Icon24CheckBoxOff aria-hidden />\n        )}\n      </div>\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--indeterminate\">\n        <Icon20CheckBoxIndetermanate\n          aria-hidden\n          width={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}\n          height={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}\n        />\n      </div>\n      <Text vkuiClass=\"Checkbox__content\" Component=\"div\">\n        <div vkuiClass=\"Checkbox__children\">{children}</div>\n        {hasReactNode(description) && (\n          <Caption vkuiClass=\"Checkbox__description\">{description}</Caption>\n        )}\n      </Text>\n    </Tappable>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(Checkbox, {\n  sizeY: true,\n});\n"],"file":"Checkbox.js"}

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

@@ -12,5 +12,8 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
     before?: React.ReactNode;
     after?: React.ReactNode;
 }
+/**
+ * @see https://vkcom.github.io/VKUI/#/Chip
+ */
 export declare const Chip: React.FC<ChipProps>;
 export {};

package/dist/components/Chip/Chip.js

@@ -7,7 +7,12 @@ import { Icon16Cancel } from "@vkontakte/icons";
 import { getTitleFromChildren, hasReactNode, noop } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { Caption } from "../Typography/Caption/Caption";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Chip
+ */
 export var Chip = function Chip(_ref) {
   var _ref$value = _ref.value,
       value = _ref$value === void 0 ? "" : _ref$value,
@@ -24,15 +29,16 @@ export var Chip = function Chip(_ref) {
       children = _ref.children,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
+  var _useAdaptivity = useAdaptivity(),
+      sizeY = _useAdaptivity.sizeY;
+
   var onRemoveWrapper = React.useCallback(function (event) {
     onRemove(event, value);
   }, [onRemove, value]);
   var title = getTitleFromChildren(children);
   return createScopedElement("div", _extends({
-    // eslint-disable-next-line vkui/no-object-expression-in-arguments
-    vkuiClass: classNames("Chip", {
-      "Chip--removable": removable
-    }),
+    vkuiClass: classNames("Chip", removable && "Chip--removable", "Chip--sizeY-".concat(sizeY) // TODO: v5 новая адаптивность
+    ),
     role: "option",
     "aria-label": title
   }, restProps), createScopedElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Chip/Chip.tsx"],"names":["React","Icon16Cancel","getTitleFromChildren","hasReactNode","noop","classNames","Caption","Tappable","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","restProps","onRemoveWrapper","useCallback","event","title"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,kBAA7B;AACA,SAASC,oBAAT,EAA+BC,YAA/B,EAA6CC,IAA7C;AACA,SAASC,UAAT;AACA,SAASC,OAAT;AACA,OAAOC,QAAP;AAeA,OAAO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,OAUxB;AAAA,wBATfC,KASe;AAAA,MATfA,KASe,2BATP,EASO;AAAA,MARfC,MAQe,QARfA,MAQe;AAAA,4BAPfC,SAOe;AAAA,MAPfA,SAOe,+BAPH,IAOG;AAAA,2BANfC,QAMe;AAAA,MANfA,QAMe,8BANJR,IAMI;AAAA,kCALfS,eAKe;AAAA,MALfA,eAKe,qCALG,SAKH;AAAA,yBAJfC,MAIe;AAAA,MAJfA,MAIe,4BAJN,IAIM;AAAA,MAHfC,KAGe,QAHfA,KAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,MADZC,SACY;;AACf,MAAMC,eAAe,GAAGlB,KAAK,CAACmB,WAAN,CACtB,UAACC,KAAD,EAA6B;AAC3BR,IAAAA,QAAQ,CAACQ,KAAD,EAAQX,KAAR,CAAR;AACD,GAHqB,EAItB,CAACG,QAAD,EAAWH,KAAX,CAJsB,CAAxB;AAMA,MAAMY,KAAK,GAAGnB,oBAAoB,CAACc,QAAD,CAAlC;AAEA,SACE;AACE;AACA,IAAA,SAAS,EAAEX,UAAU,CAAC,MAAD,EAAS;AAAE,yBAAmBM;AAArB,KAAT,CAFvB;AAGE,IAAA,IAAI,EAAC,QAHP;AAIE,kBAAYU;AAJd,KAKMJ,SALN,GAOE;AAAK,IAAA,SAAS,EAAC,UAAf;AAA0B,IAAA,IAAI,EAAC;AAA/B,KACGd,YAAY,CAACW,MAAD,CAAZ,IAAwB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA+BA,MAA/B,CAD3B,EAEE,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC,eAAnB;AAAmC,IAAA,KAAK,EAAEO,KAA1C;AAAiD,mBAAY;AAA7D,KACGL,QADH,CAFF,EAKGb,YAAY,CAACY,KAAD,CAAZ,IAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8BA,KAA9B,CAL1B,EAOGJ,SAAS,IACR,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,QADZ;AAEE,IAAA,SAAS,EAAC,cAFZ;AAGE,IAAA,OAAO,EAAEO,eAHX;AAIE,IAAA,QAAQ,EAAE,KAJZ;AAKE,IAAA,SAAS,EAAE,KALb;AAME,4BAAeL,eAAf,cAAkCQ,KAAlC;AANF,KAQE,oBAAC,YAAD;AAAc,mBAAa;AAA3B,IARF,CARJ,CAPF,CADF;AA8BD,CAjDM","sourcesContent":["import * as React from \"react\";\nimport { Icon16Cancel } from \"@vkontakte/icons\";\nimport { getTitleFromChildren, hasReactNode, noop } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport Tappable from \"../Tappable/Tappable\";\nimport \"./Chip.css\";\n\ntype ChipValue = string | number;\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: { value?: ChipValue };\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 const Chip: React.FC<ChipProps> = ({\n  value = \"\",\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = \"Удалить\",\n  before = null,\n  after,\n  children,\n  ...restProps\n}: ChipProps) => {\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      // eslint-disable-next-line vkui/no-object-expression-in-arguments\n      vkuiClass={classNames(\"Chip\", { \"Chip--removable\": removable })}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div vkuiClass=\"Chip__in\" role=\"presentation\">\n        {hasReactNode(before) && <div vkuiClass=\"Chip__before\">{before}</div>}\n        <Caption vkuiClass=\"Chip__content\" title={title} aria-hidden=\"true\">\n          {children}\n        </Caption>\n        {hasReactNode(after) && <div vkuiClass=\"Chip__after\">{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            vkuiClass=\"Chip__remove\"\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel aria-hidden={true} />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"file":"Chip.js"}
+{"version":3,"sources":["../../../src/components/Chip/Chip.tsx"],"names":["React","Icon16Cancel","getTitleFromChildren","hasReactNode","noop","classNames","Caption","Tappable","useAdaptivity","Chip","value","option","removable","onRemove","removeAriaLabel","before","after","children","restProps","sizeY","onRemoveWrapper","useCallback","event","title"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,YAAT,QAA6B,kBAA7B;AACA,SAASC,oBAAT,EAA+BC,YAA/B,EAA6CC,IAA7C;AACA,SAASC,UAAT;AACA,SAASC,OAAT;AACA,SAASC,QAAT;AACA,SAASC,aAAT;;AAeA;AACA;AACA;AACA,OAAO,IAAMC,IAAyB,GAAG,SAA5BA,IAA4B,OAUxB;AAAA,wBATfC,KASe;AAAA,MATfA,KASe,2BATP,EASO;AAAA,MARfC,MAQe,QARfA,MAQe;AAAA,4BAPfC,SAOe;AAAA,MAPfA,SAOe,+BAPH,IAOG;AAAA,2BANfC,QAMe;AAAA,MANfA,QAMe,8BANJT,IAMI;AAAA,kCALfU,eAKe;AAAA,MALfA,eAKe,qCALG,SAKH;AAAA,yBAJfC,MAIe;AAAA,MAJfA,MAIe,4BAJN,IAIM;AAAA,MAHfC,KAGe,QAHfA,KAGe;AAAA,MAFfC,QAEe,QAFfA,QAEe;AAAA,MADZC,SACY;;AACf,uBAAkBV,aAAa,EAA/B;AAAA,MAAQW,KAAR,kBAAQA,KAAR;;AACA,MAAMC,eAAe,GAAGpB,KAAK,CAACqB,WAAN,CACtB,UAACC,KAAD,EAA6B;AAC3BT,IAAAA,QAAQ,CAACS,KAAD,EAAQZ,KAAR,CAAR;AACD,GAHqB,EAItB,CAACG,QAAD,EAAWH,KAAX,CAJsB,CAAxB;AAMA,MAAMa,KAAK,GAAGrB,oBAAoB,CAACe,QAAD,CAAlC;AAEA,SACE;AACE,IAAA,SAAS,EAAEZ,UAAU,CACnB,MADmB,EAEnBO,SAAS,IAAI,iBAFM,wBAGJO,KAHI,EAGI;AAHJ,KADvB;AAME,IAAA,IAAI,EAAC,QANP;AAOE,kBAAYI;AAPd,KAQML,SARN,GAUE;AAAK,IAAA,SAAS,EAAC,UAAf;AAA0B,IAAA,IAAI,EAAC;AAA/B,KACGf,YAAY,CAACY,MAAD,CAAZ,IAAwB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA+BA,MAA/B,CAD3B,EAEE,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC,eAAnB;AAAmC,IAAA,KAAK,EAAEQ,KAA1C;AAAiD,mBAAY;AAA7D,KACGN,QADH,CAFF,EAKGd,YAAY,CAACa,KAAD,CAAZ,IAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8BA,KAA9B,CAL1B,EAOGJ,SAAS,IACR,oBAAC,QAAD;AACE,IAAA,SAAS,EAAC,QADZ;AAEE,IAAA,SAAS,EAAC,cAFZ;AAGE,IAAA,OAAO,EAAEQ,eAHX;AAIE,IAAA,QAAQ,EAAE,KAJZ;AAKE,IAAA,SAAS,EAAE,KALb;AAME,4BAAeN,eAAf,cAAkCS,KAAlC;AANF,KAQE,oBAAC,YAAD;AAAc,mBAAa;AAA3B,IARF,CARJ,CAVF,CADF;AAiCD,CArDM","sourcesContent":["import * as React from \"react\";\nimport { Icon16Cancel } from \"@vkontakte/icons\";\nimport { getTitleFromChildren, hasReactNode, noop } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./Chip.css\";\n\ntype ChipValue = string | number;\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: { value?: ChipValue };\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip: React.FC<ChipProps> = ({\n  value = \"\",\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = \"Удалить\",\n  before = null,\n  after,\n  children,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value]\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      vkuiClass={classNames(\n        \"Chip\",\n        removable && \"Chip--removable\",\n        `Chip--sizeY-${sizeY}` // TODO: v5 новая адаптивность\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div vkuiClass=\"Chip__in\" role=\"presentation\">\n        {hasReactNode(before) && <div vkuiClass=\"Chip__before\">{before}</div>}\n        <Caption vkuiClass=\"Chip__content\" title={title} aria-hidden=\"true\">\n          {children}\n        </Caption>\n        {hasReactNode(after) && <div vkuiClass=\"Chip__after\">{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            vkuiClass=\"Chip__remove\"\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel aria-hidden={true} />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"file":"Chip.js"}

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

@@ -26,4 +26,7 @@ export interface ChipsInputProps<Option extends ChipsInputOption> extends Omit<R
     inputAriaLabel?: string;
 }
 export declare const chipsInputDefaultProps: ChipsInputProps<any>;
+/**
+ * @see https://vkcom.github.io/VKUI/#/ChipsInput
+ */
 export declare const ChipsInput: <Option extends ChipsInputOption>(props: ChipsInputProps<Option>) => JSX.Element;

package/dist/components/ChipsInput/ChipsInput.js

@@ -53,6 +53,10 @@ export var chipsInputDefaultProps = {
     }, rest), label);
   }
 };
+/**
+ * @see https://vkcom.github.io/VKUI/#/ChipsInput
+ */
+
 export var ChipsInput = function ChipsInput(props) {
   var propsWithDefault = _objectSpread(_objectSpread({}, chipsInputDefaultProps), props);