@vkontakte/vkui 4.23.0 → 4.24.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"names":["CellDragger","onDragStart","onDragMove","onDragEnd","restProps","platform","onClick","React","useCallback","e","preventDefault","IOS"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAMO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OAKjD;AAAA,MAJJC,WAII,QAJJA,WAII;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,SACC;AACJ,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,MAAMC,OAAO,GAAGC,KAAK,CAACC,WAAN,CAAkB,UAACC,CAAD,EAAyB;AACzDA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFe,EAEb,EAFa,CAAhB;AAIA,SACE,qCAAC,YAAD;AACE,IAAA,SAAS,EAAE,4BAAW,gCAAa,aAAb,EAA4BL,QAA5B,CAAX,CADb;AAEE,IAAA,OAAO,EAAEJ,WAFX;AAGE,IAAA,OAAO,EAAEC,UAHX;AAIE,IAAA,KAAK,EAAEC,SAJT;AAKE,IAAA,OAAO,EAAEG;AALX,KAMMF,SANN,GAQGC,QAAQ,KAAKM,aAAb,GACG,qCAAC,uBAAD,OADH,GAEG,qCAAC,oBAAD,OAVN,CADF;AAeD,CA3BM","sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { getClassName } from '../../../helpers/getClassName';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { classNames } from '../../../lib/classNames';\nimport { IOS } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport './CellDragger.css';\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger: React.FC<CellDraggerProps> = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      vkuiClass={classNames(getClassName('CellDragger', platform))}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === IOS\n        ? <Icon24ReorderIos />\n        : <Icon24Reorder />\n      }\n    </Touch>\n  );\n};\n"],"file":"CellDragger.js"}
+{"version":3,"sources":["../../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"names":["CellDragger","onDragStart","onDragMove","onDragEnd","restProps","platform","onClick","React","useCallback","e","preventDefault","IOS"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAMO,IAAMA,WAAuC,GAAG,SAA1CA,WAA0C,OAKjD;AAAA,MAJJC,WAII,QAJJA,WAII;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,SACC;AACJ,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,MAAMC,OAAO,GAAGC,KAAK,CAACC,WAAN,CAAkB,UAACC,CAAD,EAAyB;AACzDA,IAAAA,CAAC,CAACC,cAAF;AACD,GAFe,EAEb,EAFa,CAAhB;AAIA,SACE,qCAAC,YAAD;AACE,IAAA,SAAS,EAAE,4BAAW,gCAAa,aAAb,EAA4BL,QAA5B,CAAX,CADb;AAEE,IAAA,OAAO,EAAEJ,WAFX;AAGE,IAAA,OAAO,EAAEC,UAHX;AAIE,IAAA,KAAK,EAAEC,SAJT;AAKE,IAAA,OAAO,EAAEG;AALX,KAMMF,SANN,GAQGC,QAAQ,KAAKM,aAAb,GAAmB,qCAAC,uBAAD,OAAnB,GAA0C,qCAAC,oBAAD,OAR7C,CADF;AAYD,CAxBM","sourcesContent":["import * as React from \"react\";\nimport { Icon24Reorder, Icon24ReorderIos } from \"@vkontakte/icons\";\nimport { getClassName } from \"../../../helpers/getClassName\";\nimport { usePlatform } from \"../../../hooks/usePlatform\";\nimport { classNames } from \"../../../lib/classNames\";\nimport { IOS } from \"../../../lib/platform\";\nimport { Touch } from \"../../Touch/Touch\";\nimport { DraggableProps } from \"../useDraggable\";\nimport \"./CellDragger.css\";\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger: React.FC<CellDraggerProps> = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      vkuiClass={classNames(getClassName(\"CellDragger\", platform))}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"file":"CellDragger.js"}

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

@@ -1,5 +1,5 @@
-import { TouchEvent } from '../Touch/Touch';
-import { CellProps } from './Cell';
+import { TouchEvent } from "../Touch/Touch";
+import { CellProps } from "./Cell";
 export interface DraggableProps {
     onDragStart: () => void;
     onDragEnd: () => void;
@@ -9,5 +9,5 @@ interface UseDraggableProps extends DraggableProps {
     dragging: boolean;
     rootElRef: any;
 }
-export declare const useDraggable: ({ onDragFinish }: Pick<CellProps, "onDragFinish">) => UseDraggableProps;
+export declare const useDraggable: ({ onDragFinish, }: Pick<CellProps, "onDragFinish">) => UseDraggableProps;
 export {};

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

@@ -69,7 +69,7 @@ var useDraggable = function useDraggable(_ref) {
     var rootEl = rootElRef.current;
     rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
     var rootGesture = rootEl.getBoundingClientRect();
-    setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');
+    setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
     setDragShift(e.shiftY);
     setDragEndIndex(dragStartIndex);
     siblings.forEach(function (sibling, siblingIndex) {
@@ -80,8 +80,8 @@ var useDraggable = function useDraggable(_ref) {
 
       if (dragStartIndex < siblingIndex) {
         if (rootOverSibling) {
-          if (dragDirection === 'down') {
-            sibling.style.transform = 'translateY(-100%)';
+          if (dragDirection === "down") {
+            sibling.style.transform = "translateY(-100%)";
           }
 
           setDragEndIndex(function (dragEndIndex) {
@@ -89,13 +89,13 @@ var useDraggable = function useDraggable(_ref) {
           });
         }
 
-        if (rootUnderSibling && dragDirection === 'up') {
-          sibling.style.transform = 'translateY(0)';
+        if (rootUnderSibling && dragDirection === "up") {
+          sibling.style.transform = "translateY(0)";
         }
       } else if (dragStartIndex > siblingIndex) {
         if (rootUnderSibling) {
-          if (dragDirection === 'up') {
-            sibling.style.transform = 'translateY(100%)';
+          if (dragDirection === "up") {
+            sibling.style.transform = "translateY(100%)";
           }
 
           setDragEndIndex(function (dragEndIndex) {
@@ -103,8 +103,8 @@ var useDraggable = function useDraggable(_ref) {
           });
         }
 
-        if (rootOverSibling && dragDirection === 'down') {
-          sibling.style.transform = 'translateY(0)';
+        if (rootOverSibling && dragDirection === "down") {
+          sibling.style.transform = "translateY(0)";
         }
       }
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/useDraggable.tsx"],"names":["useDraggable","onDragFinish","React","useState","dragging","setDragging","rootElRef","useRef","undefined","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","parentElement","childNodes","idx","indexOf","onDragMove","e","originalEvent","preventDefault","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","from","to","useDraggableProps"],"mappings":"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","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 = ({ onDragFinish }: Pick<CellProps, 'onDragFinish'>) => {\n  const [dragging, setDragging] = React.useState<boolean>(false);\n  const rootElRef = React.useRef(null);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>(undefined);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(undefined);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(undefined);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<'down' | 'up'>(undefined);\n\n  const onDragStart = () => {\n    const rootEl = rootElRef.current;\n\n    setDragging(true);\n\n    const _siblings: HTMLElement[] = [...rootEl.parentElement.childNodes];\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    rootEl.style.transform = `translateY(${e.shiftY}px)`;\n    const rootGesture = rootEl.getBoundingClientRect();\n\n    setDragDirection(dragShift - e.shiftY < 0 ? 'down' : 'up');\n    setDragShift(e.shiftY);\n    setDragEndIndex(dragStartIndex);\n\n    siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {\n      const siblingGesture = sibling.getBoundingClientRect();\n      const siblingHalfHeight = siblingGesture.height / 2;\n\n      const rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;\n      const rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;\n\n      if (dragStartIndex < siblingIndex) {\n        if (rootOverSibling) {\n          if (dragDirection === 'down') {\n            sibling.style.transform = 'translateY(-100%)';\n          }\n\n          setDragEndIndex((dragEndIndex) => dragEndIndex + 1);\n        }\n        if (rootUnderSibling && dragDirection === 'up') {\n          sibling.style.transform = 'translateY(0)';\n        }\n      } else if (dragStartIndex > siblingIndex) {\n        if (rootUnderSibling) {\n          if (dragDirection === 'up') {\n            sibling.style.transform = 'translateY(100%)';\n          }\n\n          setDragEndIndex((dragEndIndex) => dragEndIndex - 1);\n        }\n        if (rootOverSibling && dragDirection === 'down') {\n          sibling.style.transform = 'translateY(0)';\n        }\n      }\n    });\n  };\n\n  const onDragEnd = () => {\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = null;\n    });\n\n    setSiblings(undefined);\n    setDragEndIndex(undefined);\n    setDragStartIndex(undefined);\n    setDragDirection(undefined);\n    setDragShift(undefined);\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":["useDraggable","onDragFinish","React","useState","dragging","setDragging","rootElRef","useRef","undefined","siblings","setSiblings","dragStartIndex","setDragStartIndex","dragEndIndex","setDragEndIndex","dragShift","setDragShift","dragDirection","setDragDirection","onDragStart","rootEl","current","_siblings","parentElement","childNodes","idx","indexOf","onDragMove","e","originalEvent","preventDefault","style","transform","shiftY","rootGesture","getBoundingClientRect","forEach","sibling","siblingIndex","siblingGesture","siblingHalfHeight","height","rootOverSibling","bottom","top","rootUnderSibling","onDragEnd","from","to","useDraggableProps"],"mappings":"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","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(null);\n\n  const [siblings, setSiblings] = React.useState<HTMLElement[]>(undefined);\n  const [dragStartIndex, setDragStartIndex] = React.useState<number>(undefined);\n  const [dragEndIndex, setDragEndIndex] = React.useState<number>(undefined);\n  const [dragShift, setDragShift] = React.useState<number>(0);\n  const [dragDirection, setDragDirection] = React.useState<\"down\" | \"up\">(\n    undefined\n  );\n\n  const onDragStart = () => {\n    const rootEl = rootElRef.current;\n\n    setDragging(true);\n\n    const _siblings: HTMLElement[] = [...rootEl.parentElement.childNodes];\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    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  const onDragEnd = () => {\n    const [from, to] = [dragStartIndex, dragEndIndex];\n\n    siblings.forEach((sibling: HTMLElement) => {\n      sibling.style.transform = null;\n    });\n\n    setSiblings(undefined);\n    setDragEndIndex(undefined);\n    setDragStartIndex(undefined);\n    setDragDirection(undefined);\n    setDragShift(undefined);\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"}

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { SimpleCellProps } from '../SimpleCell/SimpleCell';
-import './CellButton.css';
+import * as React from "react";
+import { SimpleCellProps } from "../SimpleCell/SimpleCell";
+import "./CellButton.css";
 export interface CellButtonProps extends SimpleCellProps {
-    mode?: 'primary' | 'danger';
+    mode?: "primary" | "danger";
     centered?: boolean;
 }
 declare const CellButton: React.FC<CellButtonProps>;

package/dist/cjs/components/CellButton/CellButton.js

@@ -29,13 +29,13 @@ 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,
+      mode = _ref$mode === void 0 ? "primary" : _ref$mode,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   return (0, _jsxRuntime.createScopedElement)(_SimpleCell.default, (0, _extends2.default)({
     stopPropagation: true
   }, restProps, {
-    vkuiClass: (0, _classNames2.classNames)((0, _getClassName.getClassName)('CellButton', platform), "CellButton--".concat(mode), (0, _defineProperty2.default)({}, 'CellButton--centered', centered))
+    vkuiClass: (0, _classNames2.classNames)((0, _getClassName.getClassName)("CellButton", platform), "CellButton--".concat(mode), (0, _defineProperty2.default)({}, "CellButton--centered", centered))
   }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CellButton/CellButton.tsx"],"names":["CellButton","centered","mode","restProps","platform"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AAQA,IAAMA,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,GAAG,+BAAjB;AAEA,SACE,qCAAC,mBAAD;AACE,IAAA,eAAe,EAAE;AADnB,KAEMD,SAFN;AAGE,IAAA,SAAS,EAAE,6BACT,gCAAa,YAAb,EAA2BC,QAA3B,CADS,wBAEMF,IAFN,qCAIN,sBAJM,EAImBD,QAJnB;AAHb,KADF;AAaD,CApBD","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      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":["CellButton","centered","mode","restProps","platform"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;;;AAQA,IAAMA,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,GAAG,+BAAjB;AAEA,SACE,qCAAC,mBAAD;AACE,IAAA,eAAe,EAAE;AADnB,KAEMD,SAFN;AAGE,IAAA,SAAS,EAAE,6BACT,gCAAa,YAAb,EAA2BC,QAA3B,CADS,wBAEMF,IAFN,qCAIN,sBAJM,EAImBD,QAJnB;AAHb,KADF;AAaD,CApBD","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      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"}

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

@@ -1,8 +1,9 @@
-import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
-import { AdaptivityProps } from '../../hoc/withAdaptivity';
-import './Checkbox.css';
+import * as React from "react";
+import { HasRef, HasRootRef } from "../../types";
+import { AdaptivityProps } from "../../hoc/withAdaptivity";
+import "./Checkbox.css";
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement>, AdaptivityProps {
+    description?: React.ReactNode;
 }
 export declare const Checkbox: React.FunctionComponent<CheckboxProps>;
 declare const _default: React.FunctionComponent<CheckboxProps>;

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -33,7 +33,11 @@ var _Text = _interopRequireDefault(require("../Typography/Text/Text"));
 
 var _Headline = _interopRequireDefault(require("../Typography/Headline/Headline"));
 
-var _excluded = ["children", "className", "style", "getRootRef", "getRef", "sizeY"];
+var _utils = require("../../lib/utils");
+
+var _Caption = _interopRequireDefault(require("../Typography/Caption/Caption"));
+
+var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "sizeY"];
 
 var Checkbox = function Checkbox(_ref) {
   var children = _ref.children,
@@ -41,13 +45,14 @@ var Checkbox = function Checkbox(_ref) {
       style = _ref.style,
       getRootRef = _ref.getRootRef,
       getRef = _ref.getRef,
+      description = _ref.description,
       sizeY = _ref.sizeY,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
   var ContentComponent = platform === _platform.VKCOM || sizeY === _withAdaptivity.SizeType.COMPACT ? _Text.default : _Headline.default;
   return (0, _jsxRuntime.createScopedElement)(_Tappable.default, {
     Component: "label",
-    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('Checkbox', platform), "Checkbox--sizeY-".concat(sizeY)),
+    vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)("Checkbox", platform), "Checkbox--sizeY-".concat(sizeY)),
     className: className,
     style: style,
     disabled: restProps.disabled,
@@ -65,8 +70,16 @@ var Checkbox = function Checkbox(_ref) {
     vkuiClass: "Checkbox__icon Checkbox__icon--off"
   }, sizeY === _withAdaptivity.SizeType.COMPACT || platform === _platform.VKCOM ? (0, _jsxRuntime.createScopedElement)(_icons.Icon20CheckBoxOff, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24CheckBoxOff, null)), (0, _jsxRuntime.createScopedElement)(ContentComponent, {
     weight: "regular",
-    vkuiClass: "Checkbox__content"
-  }, children)));
+    vkuiClass: "Checkbox__content",
+    Component: "div"
+  }, (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "Checkbox__children"
+  }, children), (0, _utils.hasReactNode)(description) && (0, _jsxRuntime.createScopedElement)(_Caption.default, {
+    level: "1",
+    Component: "span",
+    weight: "regular",
+    vkuiClass: "Checkbox__description"
+  }, description))));
 };
 
 exports.Checkbox = Checkbox;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":["Checkbox","children","className","style","getRootRef","getRef","sizeY","restProps","platform","ContentComponent","VKCOM","SizeType","COMPACT","Text","Headline","disabled","IOS","ACTIVE_EFFECT_DELAY"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAGA;;AACA;;AACA;;AACA;;;;AASO,IAAMA,QAAgD,GAAG,SAAnDA,QAAmD,OAQ3C;AAAA,MAPnBC,QAOmB,QAPnBA,QAOmB;AAAA,MANnBC,SAMmB,QANnBA,SAMmB;AAAA,MALnBC,KAKmB,QALnBA,KAKmB;AAAA,MAJnBC,UAImB,QAJnBA,UAImB;AAAA,MAHnBC,MAGmB,QAHnBA,MAGmB;AAAA,MAFnBC,KAEmB,QAFnBA,KAEmB;AAAA,MADhBC,SACgB;AACnB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,MAAMC,gBAAgB,GAAGD,QAAQ,KAAKE,eAAb,IAAsBJ,KAAK,KAAKK,yBAASC,OAAzC,GAAmDC,aAAnD,GAA0DC,iBAAnF;AAEA,SACE,qCAAC,iBAAD;AACE,IAAA,SAAS,EAAC,OADZ;AAEE,IAAA,SAAS,EAAE,4BAAW,gCAAa,UAAb,EAAyBN,QAAzB,CAAX,4BAAkEF,KAAlE,EAFb;AAGE,IAAA,SAAS,EAAEJ,SAHb;AAIE,IAAA,KAAK,EAAEC,KAJT;AAKE,IAAA,QAAQ,EAAEI,SAAS,CAACQ,QALtB;AAME,IAAA,iBAAiB,EAAEP,QAAQ,KAAKQ,aAAb,GAAmB,GAAnB,GAAyBC,6BAN9C;AAOE,IAAA,UAAU,EAAEb;AAPd,KASE,yEAAWG,SAAX;AAAsB,IAAA,IAAI,EAAC,UAA3B;AAAsC,IAAA,SAAS,EAAC,iBAAhD;AAAkE,IAAA,GAAG,EAAEF;AAAvE,KATF,EAUE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGC,KAAK,KAAKK,yBAASC,OAAnB,IAA8BJ,QAAQ,KAAKE,eAA3C,GACG,qCAAC,uBAAD,OADH,GAEG,qCAAC,uBAAD,OAHN,CADF,EAOE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGJ,KAAK,KAAKK,yBAASC,OAAnB,IAA8BJ,QAAQ,KAAKE,eAA3C,GACG,qCAAC,wBAAD,OADH,GAEG,qCAAC,wBAAD,OAHN,CAPF,EAaE,qCAAC,gBAAD;AAAkB,IAAA,MAAM,EAAC,SAAzB;AAAmC,IAAA,SAAS,EAAC;AAA7C,KAAkET,QAAlE,CAbF,CAVF,CADF;AA4BD,CAzCM;;;;eA2CQ,oCAAeD,QAAf,EAAyB;AACtCM,EAAAA,KAAK,EAAE;AAD+B,CAAzB,C","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 { Icon20CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOn, Icon24CheckBoxOff } from '@vkontakte/icons';\n\nimport { HasRef, HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport Text from '../Typography/Text/Text';\nimport Headline from '../Typography/Headline/Headline';\nimport './Checkbox.css';\n\nexport interface CheckboxProps extends\n  React.InputHTMLAttributes<HTMLInputElement>,\n  HasRootRef<HTMLLabelElement>,\n  HasRef<HTMLInputElement>,\n  AdaptivityProps { }\n\nexport const Checkbox: React.FunctionComponent<CheckboxProps> = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  sizeY,\n  ...restProps\n}: CheckboxProps) => {\n  const platform = usePlatform();\n\n  const ContentComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <Tappable\n      Component=\"label\"\n      vkuiClass={classNames(getClassName('Checkbox', platform), `Checkbox--sizeY-${sizeY}`)}\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n    >\n      <input {...restProps} type=\"checkbox\" vkuiClass=\"Checkbox__input\" ref={getRef} />\n      <div vkuiClass=\"Checkbox__container\">\n        <div vkuiClass=\"Checkbox__icon Checkbox__icon--on\">\n          {sizeY === SizeType.COMPACT || platform === VKCOM\n            ? <Icon20CheckBoxOn />\n            : <Icon24CheckBoxOn />\n          }\n        </div>\n        <div vkuiClass=\"Checkbox__icon Checkbox__icon--off\">\n          {sizeY === SizeType.COMPACT || platform === VKCOM\n            ? <Icon20CheckBoxOff />\n            : <Icon24CheckBoxOff />\n          }\n        </div>\n        <ContentComponent weight=\"regular\" vkuiClass=\"Checkbox__content\">{children}</ContentComponent>\n      </div>\n    </Tappable>\n  );\n};\n\nexport default withAdaptivity(Checkbox, {\n  sizeY: true,\n});\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":["Checkbox","children","className","style","getRootRef","getRef","description","sizeY","restProps","platform","ContentComponent","VKCOM","SizeType","COMPACT","Text","Headline","disabled","IOS","ACTIVE_EFFECT_DELAY"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAQA;;AACA;;AAKA;;AACA;;AACA;;AACA;;;;AAWO,IAAMA,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,GAAG,+BAAjB;AAEA,MAAMC,gBAAgB,GACpBD,QAAQ,KAAKE,eAAb,IAAsBJ,KAAK,KAAKK,yBAASC,OAAzC,GAAmDC,aAAnD,GAA0DC,iBAD5D;AAGA,SACE,qCAAC,iBAAD;AACE,IAAA,SAAS,EAAC,OADZ;AAEE,IAAA,SAAS,EAAE,4BACT,gCAAa,UAAb,EAAyBN,QAAzB,CADS,4BAEUF,KAFV,EAFb;AAME,IAAA,SAAS,EAAEL,SANb;AAOE,IAAA,KAAK,EAAEC,KAPT;AAQE,IAAA,QAAQ,EAAEK,SAAS,CAACQ,QARtB;AASE,IAAA,iBAAiB,EAAEP,QAAQ,KAAKQ,aAAb,GAAmB,GAAnB,GAAyBC,6BAT9C;AAUE,IAAA,UAAU,EAAEd;AAVd,KAYE,yEACMI,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,KAAKK,yBAASC,OAAnB,IAA8BJ,QAAQ,KAAKE,eAA3C,GACC,qCAAC,uBAAD,OADD,GAGC,qCAAC,uBAAD,OAJJ,CADF,EAQE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGJ,KAAK,KAAKK,yBAASC,OAAnB,IAA8BJ,QAAQ,KAAKE,eAA3C,GACC,qCAAC,wBAAD,OADD,GAGC,qCAAC,wBAAD,OAJJ,CARF,EAeE,qCAAC,gBAAD;AACE,IAAA,MAAM,EAAC,SADT;AAEE,IAAA,SAAS,EAAC,mBAFZ;AAGE,IAAA,SAAS,EAAC;AAHZ,KAKE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAqCV,QAArC,CALF,EAMG,yBAAaK,WAAb,KACC,qCAAC,gBAAD;AACE,IAAA,KAAK,EAAC,GADR;AAEE,IAAA,SAAS,EAAC,MAFZ;AAGE,IAAA,MAAM,EAAC,SAHT;AAIE,IAAA,SAAS,EAAC;AAJZ,KAMGA,WANH,CAPJ,CAfF,CAlBF,CADF;AAsDD,CArEM;;;;eAuEQ,oCAAeN,QAAf,EAAyB;AACtCO,EAAAA,KAAK,EAAE;AAD+B,CAAzB,C","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\n              level=\"1\"\n              Component=\"span\"\n              weight=\"regular\"\n              vkuiClass=\"Checkbox__description\"\n            >\n              {description}\n            </Caption>\n          )}\n        </ContentComponent>\n      </div>\n    </Tappable>\n  );\n};\n\nexport default withAdaptivity(Checkbox, {\n  sizeY: true,\n});\n"],"file":"Checkbox.js"}

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './Chip.css';
+import * as React from "react";
+import "./Chip.css";
 declare type ChipValue = string | number;
 export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
     value: ChipValue;

package/dist/cjs/components/Chip/Chip.js

@@ -31,14 +31,14 @@ var _excluded = ["value", "option", "removable", "onRemove", "removeAriaLabel",
 
 var Chip = function Chip(_ref) {
   var _ref$value = _ref.value,
-      value = _ref$value === void 0 ? '' : _ref$value,
+      value = _ref$value === void 0 ? "" : _ref$value,
       option = _ref.option,
       _ref$removable = _ref.removable,
       removable = _ref$removable === void 0 ? true : _ref$removable,
       _ref$onRemove = _ref.onRemove,
       onRemove = _ref$onRemove === void 0 ? _utils.noop : _ref$onRemove,
       _ref$removeAriaLabel = _ref.removeAriaLabel,
-      removeAriaLabel = _ref$removeAriaLabel === void 0 ? 'Удалить' : _ref$removeAriaLabel,
+      removeAriaLabel = _ref$removeAriaLabel === void 0 ? "Удалить" : _ref$removeAriaLabel,
       _ref$before = _ref.before,
       before = _ref$before === void 0 ? null : _ref$before,
       after = _ref.after,
@@ -49,8 +49,8 @@ var Chip = function Chip(_ref) {
   }, [onRemove, value]);
   var title = (0, _utils.getTitleFromChildren)(children);
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({
-    vkuiClass: (0, _classNames.classNames)('Chip', {
-      'Chip--removable': removable
+    vkuiClass: (0, _classNames.classNames)("Chip", {
+      "Chip--removable": removable
     }),
     role: "option",
     "aria-label": title

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"names":["Chip","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","restProps","onRemoveWrapper","React","useCallback","event","title"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAeA,IAAMA,IAAyB,GAAG,SAA5BA,IAA4B,OAUjB;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,8BANJC,WAMI;AAAA,kCALfC,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,GAAGC,KAAK,CAACC,WAAN,CAAkB,UAACC,KAAD,EAA6B;AACrEV,IAAAA,QAAQ,CAACU,KAAD,EAAQb,KAAR,CAAR;AACD,GAFuB,EAErB,CAACG,QAAD,EAAWH,KAAX,CAFqB,CAAxB;AAGA,MAAMc,KAAK,GAAG,iCAAqBN,QAArB,CAAd;AAEA,SACE;AACE,IAAA,SAAS,EAAE,4BAAW,MAAX,EAAmB;AAAE,yBAAmBN;AAArB,KAAnB,CADb;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,kBAAYY;AAHd,KAIML,SAJN,GAME;AAAK,IAAA,SAAS,EAAC,UAAf;AAA0B,IAAA,IAAI,EAAC;AAA/B,KACG,yBAAaH,MAAb,KAAwB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA+BA,MAA/B,CAD3B,EAEE,qCAAC,gBAAD;AAAS,IAAA,KAAK,EAAC,GAAf;AAAmB,IAAA,MAAM,EAAC,SAA1B;AAAoC,IAAA,SAAS,EAAC,eAA9C;AAA8D,IAAA,KAAK,EAAEQ,KAArE;AAA4E,mBAAY;AAAxF,KAAgGN,QAAhG,CAFF,EAGG,yBAAaD,KAAb,KAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8BA,KAA9B,CAH1B,EAKGL,SAAS,IACR,qCAAC,iBAAD;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,4BAAeL,eAAf,cAAkCS,KAAlC;AANF,KAQE,qCAAC,mBAAD;AAAc,mBAAa;AAA3B,IARF,CANJ,CANF,CADF;AA2BD,CA3CD;;eA6Cef,I","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\nconst 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((event: React.MouseEvent) => {\n    onRemove(event, value);\n  }, [onRemove, value]);\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\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 level=\"1\" weight=\"regular\" vkuiClass=\"Chip__content\" title={title} aria-hidden=\"true\">{children}</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\nexport default Chip;\n"],"file":"Chip.js"}
+{"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"names":["Chip","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","restProps","onRemoveWrapper","React","useCallback","event","title"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAeA,IAAMA,IAAyB,GAAG,SAA5BA,IAA4B,OAUjB;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,8BANJC,WAMI;AAAA,kCALfC,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,GAAGC,KAAK,CAACC,WAAN,CACtB,UAACC,KAAD,EAA6B;AAC3BV,IAAAA,QAAQ,CAACU,KAAD,EAAQb,KAAR,CAAR;AACD,GAHqB,EAItB,CAACG,QAAD,EAAWH,KAAX,CAJsB,CAAxB;AAMA,MAAMc,KAAK,GAAG,iCAAqBN,QAArB,CAAd;AAEA,SACE;AACE,IAAA,SAAS,EAAE,4BAAW,MAAX,EAAmB;AAAE,yBAAmBN;AAArB,KAAnB,CADb;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,kBAAYY;AAHd,KAIML,SAJN,GAME;AAAK,IAAA,SAAS,EAAC,UAAf;AAA0B,IAAA,IAAI,EAAC;AAA/B,KACG,yBAAaH,MAAb,KAAwB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA+BA,MAA/B,CAD3B,EAEE,qCAAC,gBAAD;AACE,IAAA,KAAK,EAAC,GADR;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,SAAS,EAAC,eAHZ;AAIE,IAAA,KAAK,EAAEQ,KAJT;AAKE,mBAAY;AALd,KAOGN,QAPH,CAFF,EAWG,yBAAaD,KAAb,KAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8BA,KAA9B,CAX1B,EAaGL,SAAS,IACR,qCAAC,iBAAD;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,4BAAeL,eAAf,cAAkCS,KAAlC;AANF,KAQE,qCAAC,mBAAD;AAAc,mBAAa;AAA3B,IARF,CAdJ,CANF,CADF;AAmCD,CAtDD;;eAwDef,I","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\nconst 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      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\n          level=\"1\"\n          weight=\"regular\"\n          vkuiClass=\"Chip__content\"\n          title={title}\n          aria-hidden=\"true\"\n        >\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\nexport default Chip;\n"],"file":"Chip.js"}

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { HasAlign, HasRef, HasRootRef } from '../../types';
-import { FormFieldProps } from '../FormField/FormField';
-import { ChipProps } from '../Chip/Chip';
-import './ChipsInput.css';
+import * as React from "react";
+import { HasAlign, HasRef, HasRootRef } from "../../types";
+import { FormFieldProps } from "../FormField/FormField";
+import { ChipProps } from "../Chip/Chip";
+import "./ChipsInput.css";
 export declare type ChipsInputValue = string | number;
 export interface ChipsInputOption {
     value?: ChipsInputValue;
@@ -14,7 +14,7 @@ export interface RenderChip<Option extends ChipsInputOption> extends ChipProps {
     option: Option;
     disabled: boolean;
 }
-export interface ChipsInputProps<Option extends ChipsInputOption> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, FormFieldProps {
+export interface ChipsInputProps<Option extends ChipsInputOption> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange">, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, FormFieldProps {
     value: Option[];
     inputValue?: string;
     onChange?: (o: Option[]) => void;

package/dist/cjs/components/ChipsInput/ChipsInput.js

@@ -88,12 +88,12 @@ var ChipsInput = function ChipsInput(props) {
 
     onKeyDown(e);
 
-    if (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {
+    if (e.key === "Backspace" && !e.defaultPrevented && !fieldValue && selectedOptions.length) {
       removeOption(getOptionValue(selectedOptions[selectedOptions.length - 1]));
       e.preventDefault();
     }
 
-    if (e.key === 'Enter' && !e.defaultPrevented && fieldValue) {
+    if (e.key === "Enter" && !e.defaultPrevented && fieldValue) {
       addOptionFromInput();
       e.preventDefault();
     }
@@ -132,9 +132,9 @@ var ChipsInput = function ChipsInput(props) {
 
   return (0, _jsxRuntime.createScopedElement)(_FormField.FormField, {
     getRootRef: getRootRef,
-    vkuiClass: (0, _classNames.classNames)('ChipsInput', "ChipsInput--sizeY-".concat(sizeY), {
-      'ChipsInput--focused': focused,
-      'ChipsInput--withChips': !!selectedOptions.length
+    vkuiClass: (0, _classNames.classNames)("ChipsInput", "ChipsInput--sizeY-".concat(sizeY), {
+      "ChipsInput--focused": focused,
+      "ChipsInput--withChips": !!selectedOptions.length
     }),
     className: className,
     style: style,
@@ -158,7 +158,7 @@ var ChipsInput = function ChipsInput(props) {
       label: label,
       onRemove: handleChipRemove,
       disabled: restProps.disabled,
-      className: (0, _prefixClass.prefixClass)('ChipsInput__chip')
+      className: (0, _prefixClass.prefixClass)("ChipsInput__chip")
     }));
   }), (0, _jsxRuntime.createScopedElement)("label", {
     vkuiClass: "ChipsInput__input-container",
@@ -181,15 +181,15 @@ var ChipsInput = function ChipsInput(props) {
 };
 
 var chipsInputDefaultProps = {
-  type: 'text',
+  type: "text",
   onChange: _utils.noop,
   onInputChange: _utils.noop,
   onKeyDown: _utils.noop,
   onBlur: _utils.noop,
   onFocus: _utils.noop,
   value: [],
-  inputValue: '',
-  inputAriaLabel: 'Введите ваше значение...',
+  inputValue: "",
+  inputAriaLabel: "Введите ваше значение...",
   getOptionValue: function getOptionValue(option) {
     return option.value;
   },

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"names":["ChipsInput","props","style","value","onChange","onInputChange","onKeyDown","onBlur","onFocus","children","className","inputValue","getRef","getRootRef","placeholder","getOptionValue","getOptionLabel","getNewOptionData","renderChip","after","inputAriaLabel","restProps","sizeY","React","useState","focused","setFocused","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","disabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","_","handleClick","current","focus","map","option","label","onRemove","chipsInputDefaultProps","type","noop","rest","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { classNames } from '../../lib/classNames';\nimport Chip, { ChipProps } from '../Chip/Chip';\nimport { noop } from '../../lib/utils';\nimport { useChipsInput } from './useChipsInput';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { prefixClass } from '../../lib/prefixClass';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport './ChipsInput.css';\n\nexport type ChipsInputValue = string | number;\n\nexport interface ChipsInputOption {\n  value?: ChipsInputValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface RenderChip<Option extends ChipsInputOption> extends ChipProps {\n  label: string;\n  option: Option;\n  disabled: boolean;\n}\n\nexport interface ChipsInputProps<Option extends ChipsInputOption> extends\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,\n  HasRef<HTMLInputElement>,\n  HasRootRef<HTMLDivElement>,\n  HasAlign,\n  FormFieldProps {\n  value: Option[];\n  inputValue?: string;\n  onChange?: (o: Option[]) => void;\n  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n  getOptionValue?: (o?: Option) => ChipsInputValue;\n  getOptionLabel?: (o?: Option) => string;\n  getNewOptionData?: (v?: ChipsInputValue, l?: string) => Option;\n  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n  inputAriaLabel?: string;\n}\n\nconst ChipsInput = <Option extends ChipsInputOption>(props: ChipsInputProps<Option>) => {\n  const { style, value, onChange, onInputChange, onKeyDown, onBlur, onFocus, children, className, inputValue,\n    getRef, getRootRef, placeholder, getOptionValue, getOptionLabel, getNewOptionData, renderChip,\n    after, inputAriaLabel, ...restProps } = props;\n  const { sizeY } = useAdaptivity();\n\n  const [focused, setFocused] = React.useState(false);\n  const { fieldValue, addOptionFromInput, removeOption, selectedOptions, handleInputChange } = useChipsInput(props);\n  const inputRef = useExternRef(getRef);\n\n  const isDisabled = restProps.disabled || restProps.readOnly;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    onKeyDown(e);\n\n    if (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {\n      removeOption(getOptionValue(selectedOptions[selectedOptions.length - 1]));\n      e.preventDefault();\n    }\n\n    if (e.key === 'Enter' && !e.defaultPrevented && fieldValue) {\n      addOptionFromInput();\n      e.preventDefault();\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (focused) {\n      setFocused(false);\n    }\n    onBlur(e);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!focused) {\n      setFocused(true);\n    }\n    onFocus(e);\n  };\n\n  const handleChipRemove = (_: React.MouseEvent<HTMLInputElement>, value: ChipsInputValue) => {\n    removeOption(value);\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (inputRef?.current !== null && !focused) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      vkuiClass={classNames('ChipsInput', `ChipsInput--sizeY-${sizeY}`, {\n        'ChipsInput--focused': focused,\n        'ChipsInput--withChips': !!selectedOptions.length,\n      })}\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      after={after}\n      onClick={handleClick}\n      role=\"application\"\n      aria-disabled={restProps.disabled}\n      aria-readonly={restProps.readOnly}\n    >\n      <div vkuiClass=\"ChipsInput__container\" role=\"presentation\">\n        {selectedOptions.map((option: Option) => {\n          const value = getOptionValue(option);\n          const label = getOptionLabel(option);\n\n          return (\n            <React.Fragment key={`${typeof value}-${value}`}>\n              {renderChip({ option, value, label, onRemove: handleChipRemove, disabled: restProps.disabled, className: prefixClass('ChipsInput__chip') })}\n            </React.Fragment>\n          );\n        })}\n        <label vkuiClass=\"ChipsInput__input-container\" aria-label={inputAriaLabel}>\n          <input\n            ref={inputRef}\n            value={fieldValue}\n            autoCapitalize=\"none\"\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            spellCheck={false}\n            aria-autocomplete=\"list\"\n            vkuiClass=\"ChipsInput__el\"\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            placeholder={selectedOptions.length ? null : placeholder}\n            {...restProps}\n          />\n        </label>\n      </div>\n    </FormField>\n  );\n};\n\nexport const chipsInputDefaultProps: ChipsInputProps<any> = {\n  type: 'text',\n  onChange: noop,\n  onInputChange: noop,\n  onKeyDown: noop,\n  onBlur: noop,\n  onFocus: noop,\n  value: [],\n  inputValue: '',\n  inputAriaLabel: 'Введите ваше значение...',\n  getOptionValue: (option: ChipsInputOption): ChipsInputValue => option.value,\n  getOptionLabel: (option: ChipsInputOption): string => option.label,\n  getNewOptionData: (_: ChipsInputValue, label: string): ChipsInputOption => ({ value: label, label }),\n  renderChip({ disabled, value, label, ...rest }: RenderChip<ChipsInputOption>) {\n    return (\n      <Chip value={value} removable={!disabled} {...rest}>\n        {label}\n      </Chip>\n    );\n  },\n};\nChipsInput.defaultProps = chipsInputDefaultProps;\n\nexport default ChipsInput;\n"],"file":"ChipsInput.js"}
+{"version":3,"sources":["../../../../src/components/ChipsInput/ChipsInput.tsx"],"names":["ChipsInput","props","style","value","onChange","onInputChange","onKeyDown","onBlur","onFocus","children","className","inputValue","getRef","getRootRef","placeholder","getOptionValue","getOptionLabel","getNewOptionData","renderChip","after","inputAriaLabel","restProps","sizeY","React","useState","focused","setFocused","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","disabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","_","handleClick","current","focus","map","option","label","onRemove","chipsInputDefaultProps","type","noop","rest","defaultProps"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { HasAlign, HasRef, HasRootRef } from \"../../types\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { classNames } from \"../../lib/classNames\";\nimport Chip, { ChipProps } from \"../Chip/Chip\";\nimport { noop } from \"../../lib/utils\";\nimport { useChipsInput } from \"./useChipsInput\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport \"./ChipsInput.css\";\n\nexport type ChipsInputValue = string | number;\n\nexport interface ChipsInputOption {\n  value?: ChipsInputValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface RenderChip<Option extends ChipsInputOption> extends ChipProps {\n  label: string;\n  option: Option;\n  disabled: boolean;\n}\n\nexport interface ChipsInputProps<Option extends ChipsInputOption>\n  extends Omit<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      \"value\" | \"onChange\"\n    >,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {\n  value: Option[];\n  inputValue?: string;\n  onChange?: (o: Option[]) => void;\n  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;\n  getOptionValue?: (o?: Option) => ChipsInputValue;\n  getOptionLabel?: (o?: Option) => string;\n  getNewOptionData?: (v?: ChipsInputValue, l?: string) => Option;\n  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;\n  inputAriaLabel?: string;\n}\n\nconst ChipsInput = <Option extends ChipsInputOption>(\n  props: ChipsInputProps<Option>\n) => {\n  const {\n    style,\n    value,\n    onChange,\n    onInputChange,\n    onKeyDown,\n    onBlur,\n    onFocus,\n    children,\n    className,\n    inputValue,\n    getRef,\n    getRootRef,\n    placeholder,\n    getOptionValue,\n    getOptionLabel,\n    getNewOptionData,\n    renderChip,\n    after,\n    inputAriaLabel,\n    ...restProps\n  } = props;\n  const { sizeY } = useAdaptivity();\n\n  const [focused, setFocused] = React.useState(false);\n  const {\n    fieldValue,\n    addOptionFromInput,\n    removeOption,\n    selectedOptions,\n    handleInputChange,\n  } = useChipsInput(props);\n  const inputRef = useExternRef(getRef);\n\n  const isDisabled = restProps.disabled || restProps.readOnly;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    onKeyDown(e);\n\n    if (\n      e.key === \"Backspace\" &&\n      !e.defaultPrevented &&\n      !fieldValue &&\n      selectedOptions.length\n    ) {\n      removeOption(getOptionValue(selectedOptions[selectedOptions.length - 1]));\n      e.preventDefault();\n    }\n\n    if (e.key === \"Enter\" && !e.defaultPrevented && fieldValue) {\n      addOptionFromInput();\n      e.preventDefault();\n    }\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (focused) {\n      setFocused(false);\n    }\n    onBlur(e);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    if (!focused) {\n      setFocused(true);\n    }\n    onFocus(e);\n  };\n\n  const handleChipRemove = (\n    _: React.MouseEvent<HTMLInputElement>,\n    value: ChipsInputValue\n  ) => {\n    removeOption(value);\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (inputRef?.current !== null && !focused) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <FormField\n      getRootRef={getRootRef}\n      vkuiClass={classNames(\"ChipsInput\", `ChipsInput--sizeY-${sizeY}`, {\n        \"ChipsInput--focused\": focused,\n        \"ChipsInput--withChips\": !!selectedOptions.length,\n      })}\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      after={after}\n      onClick={handleClick}\n      role=\"application\"\n      aria-disabled={restProps.disabled}\n      aria-readonly={restProps.readOnly}\n    >\n      <div vkuiClass=\"ChipsInput__container\" role=\"presentation\">\n        {selectedOptions.map((option: Option) => {\n          const value = getOptionValue(option);\n          const label = getOptionLabel(option);\n\n          return (\n            <React.Fragment key={`${typeof value}-${value}`}>\n              {renderChip({\n                option,\n                value,\n                label,\n                onRemove: handleChipRemove,\n                disabled: restProps.disabled,\n                className: prefixClass(\"ChipsInput__chip\"),\n              })}\n            </React.Fragment>\n          );\n        })}\n        <label\n          vkuiClass=\"ChipsInput__input-container\"\n          aria-label={inputAriaLabel}\n        >\n          <input\n            ref={inputRef}\n            value={fieldValue}\n            autoCapitalize=\"none\"\n            autoComplete=\"off\"\n            autoCorrect=\"off\"\n            spellCheck={false}\n            aria-autocomplete=\"list\"\n            vkuiClass=\"ChipsInput__el\"\n            onChange={handleInputChange}\n            onKeyDown={handleKeyDown}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            placeholder={selectedOptions.length ? null : placeholder}\n            {...restProps}\n          />\n        </label>\n      </div>\n    </FormField>\n  );\n};\n\nexport const chipsInputDefaultProps: ChipsInputProps<any> = {\n  type: \"text\",\n  onChange: noop,\n  onInputChange: noop,\n  onKeyDown: noop,\n  onBlur: noop,\n  onFocus: noop,\n  value: [],\n  inputValue: \"\",\n  inputAriaLabel: \"Введите ваше значение...\",\n  getOptionValue: (option: ChipsInputOption): ChipsInputValue => option.value,\n  getOptionLabel: (option: ChipsInputOption): string => option.label,\n  getNewOptionData: (_: ChipsInputValue, label: string): ChipsInputOption => ({\n    value: label,\n    label,\n  }),\n  renderChip({\n    disabled,\n    value,\n    label,\n    ...rest\n  }: RenderChip<ChipsInputOption>) {\n    return (\n      <Chip value={value} removable={!disabled} {...rest}>\n        {label}\n      </Chip>\n    );\n  },\n};\nChipsInput.defaultProps = chipsInputDefaultProps;\n\nexport default ChipsInput;\n"],"file":"ChipsInput.js"}

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ChipsInputOption, ChipsInputProps } from './ChipsInput';
+import * as React from "react";
+import { ChipsInputOption, ChipsInputProps } from "./ChipsInput";
 export declare const useChipsInput: <Option extends ChipsInputOption>(props: Partial<ChipsInputProps<Option>>) => {
     fieldValue: string;
     setFieldValue: React.Dispatch<React.SetStateAction<string>>;

package/dist/cjs/components/ChipsInput/useChipsInput.js

@@ -31,10 +31,10 @@ var useChipsInput = function useChipsInput(props) {
       setSelectedOptions = _React$useState4[1];
 
   var clearInput = React.useCallback(function () {
-    setFieldValue('');
+    setFieldValue("");
     onInputChange({
       target: {
-        value: ''
+        value: ""
       }
     });
   }, [onInputChange]);
@@ -77,7 +77,7 @@ var useChipsInput = function useChipsInput(props) {
   React.useEffect(function () {
     setFieldValue(props.inputValue);
     return function () {
-      return setFieldValue('');
+      return setFieldValue("");
     };
   }, [props.inputValue]);
   return {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsInput/useChipsInput.ts"],"names":["useChipsInput","props","value","getOptionValue","onChange","onInputChange","getNewOptionData","React","useState","inputValue","fieldValue","setFieldValue","selectedOptions","setSelectedOptions","clearInput","useCallback","target","handleInputChange","e","toggleOption","newOption","newSelectedOptions","filter","option","push","addOption","addOptionFromInput","trimmedValue","trim","undefined","removeOption","useEffect"],"mappings":";;;;;;;;;;;;;AAAA;;AAGO,IAAMA,aAAa,GAAG,SAAhBA,aAAgB,CAAkCC,KAAlC,EAA8E;AACzG,MAAQC,KAAR,GAA6ED,KAA7E,CAAQC,KAAR;AAAA,MAAeC,cAAf,GAA6EF,KAA7E,CAAeE,cAAf;AAAA,MAA+BC,QAA/B,GAA6EH,KAA7E,CAA+BG,QAA/B;AAAA,MAAyCC,aAAzC,GAA6EJ,KAA7E,CAAyCI,aAAzC;AAAA,MAAwDC,gBAAxD,GAA6EL,KAA7E,CAAwDK,gBAAxD;;AAEA,wBAAoCC,KAAK,CAACC,QAAN,CAAeP,KAAK,CAACQ,UAArB,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,yBAA8CJ,KAAK,CAACC,QAAN,CAAeN,KAAf,CAA9C;AAAA;AAAA,MAAOU,eAAP;AAAA,MAAwBC,kBAAxB;;AAEA,MAAMC,UAAU,GAAGP,KAAK,CAACQ,WAAN,CAAkB,YAAM;AACzCJ,IAAAA,aAAa,CAAC,EAAD,CAAb;AACAN,IAAAA,aAAa,CAAC;AAAEW,MAAAA,MAAM,EAAE;AAAEd,QAAAA,KAAK,EAAE;AAAT;AAAV,KAAD,CAAb;AACD,GAHkB,EAGhB,CAACG,aAAD,CAHgB,CAAnB;AAKA,MAAMY,iBAAiB,GAAGV,KAAK,CAACQ,WAAN,CAAkB,UAACG,CAAD,EAA4C;AACtFP,IAAAA,aAAa,CAACO,CAAC,CAACF,MAAF,CAASd,KAAV,CAAb;AACAG,IAAAA,aAAa,CAACa,CAAD,CAAb;AACD,GAHyB,EAGvB,CAACb,aAAD,CAHuB,CAA1B;AAKA,MAAMc,YAAY,GAAGZ,KAAK,CAACQ,WAAN,CAAkB,UAACK,SAAD,EAAoBlB,KAApB,EAAwC;AAC7E,QAAMmB,kBAAkB,GAAGT,eAAe,CAACU,MAAhB,CAAuB,UAACC,MAAD;AAAA,aAAoBpB,cAAc,CAACiB,SAAD,CAAd,KAA8BjB,cAAc,CAACoB,MAAD,CAAhE;AAAA,KAAvB,CAA3B;;AAEA,QAAIrB,KAAK,KAAK,IAAd,EAAoB;AAClBmB,MAAAA,kBAAkB,CAACG,IAAnB,CAAwBJ,SAAxB;AACD;;AAEDP,IAAAA,kBAAkB,CAACQ,kBAAD,CAAlB;AACAjB,IAAAA,QAAQ,CAACiB,kBAAD,CAAR;AACD,GAToB,EASlB,CAACT,eAAD,EAAkBT,cAAlB,EAAkCC,QAAlC,CATkB,CAArB;AAWA,MAAMqB,SAAS,GAAGlB,KAAK,CAACQ,WAAN,CAAkB,UAACK,SAAD;AAAA,WAAuBD,YAAY,CAACC,SAAD,EAAY,IAAZ,CAAnC;AAAA,GAAlB,EAAwE,CAACD,YAAD,CAAxE,CAAlB;AACA,MAAMO,kBAAkB,GAAGnB,KAAK,CAACQ,WAAN,CAAkB,YAAM;AACjD,QAAMY,YAAY,GAAGjB,UAAH,aAAGA,UAAH,uBAAGA,UAAU,CAAEkB,IAAZ,EAArB;;AAEA,QAAID,YAAJ,EAAkB;AAChBF,MAAAA,SAAS,CAACnB,gBAAgB,CAACuB,SAAD,EAAYF,YAAZ,CAAjB,CAAT;AACAb,MAAAA,UAAU;AACX;AACF,GAP0B,EAOxB,CAACW,SAAD,EAAYX,UAAZ,EAAwBR,gBAAxB,EAA0CI,UAA1C,CAPwB,CAA3B;AAQA,MAAMoB,YAAY,GAAGvB,KAAK,CAACQ,WAAN,CAAkB,UAACb,KAAD,EAA4B;AACjEiB,IAAAA,YAAY,CAACb,gBAAgB,CAACuB,SAAD,EAAY3B,KAAZ,CAAjB,EAA+C,KAA/C,CAAZ;AACD,GAFoB,EAElB,CAACiB,YAAD,EAAeb,gBAAf,CAFkB,CAArB;AAIAC,EAAAA,KAAK,CAACwB,SAAN,CAAgB,YAAM;AACpBlB,IAAAA,kBAAkB,CAACX,KAAD,CAAlB;AAEA,WAAO;AAAA,aAAMW,kBAAkB,CAAC,EAAD,CAAxB;AAAA,KAAP;AACD,GAJD,EAIG,CAACZ,KAAK,CAACC,KAAP,CAJH;AAMAK,EAAAA,KAAK,CAACwB,SAAN,CAAgB,YAAM;AACpBpB,IAAAA,aAAa,CAACV,KAAK,CAACQ,UAAP,CAAb;AAEA,WAAO;AAAA,aAAME,aAAa,CAAC,EAAD,CAAnB;AAAA,KAAP;AACD,GAJD,EAIG,CAACV,KAAK,CAACQ,UAAP,CAJH;AAMA,SAAO;AAAEC,IAAAA,UAAU,EAAVA,UAAF;AAAcC,IAAAA,aAAa,EAAbA,aAAd;AAA6BC,IAAAA,eAAe,EAAfA,eAA7B;AAA8CC,IAAAA,kBAAkB,EAAlBA,kBAA9C;AAAkEC,IAAAA,UAAU,EAAVA,UAAlE;AAA8EK,IAAAA,YAAY,EAAZA,YAA9E;AAA4FM,IAAAA,SAAS,EAATA,SAA5F;AAAuGC,IAAAA,kBAAkB,EAAlBA,kBAAvG;AAA2HI,IAAAA,YAAY,EAAZA,YAA3H;AAAyIb,IAAAA,iBAAiB,EAAjBA;AAAzI,GAAP;AACD,CArDM","sourcesContent":["import * as React from 'react';\nimport { ChipsInputOption, ChipsInputProps, ChipsInputValue } from './ChipsInput';\n\nexport const useChipsInput = <Option extends ChipsInputOption>(props: Partial<ChipsInputProps<Option>>) => {\n  const { value, getOptionValue, onChange, onInputChange, getNewOptionData } = props;\n\n  const [fieldValue, setFieldValue] = React.useState(props.inputValue);\n  const [selectedOptions, setSelectedOptions] = React.useState(value);\n\n  const clearInput = React.useCallback(() => {\n    setFieldValue('');\n    onInputChange({ target: { value: '' } } as any);\n  }, [onInputChange]);\n\n  const handleInputChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    setFieldValue(e.target.value);\n    onInputChange(e);\n  }, [onInputChange]);\n\n  const toggleOption = React.useCallback((newOption: Option, value?: boolean) => {\n    const newSelectedOptions = selectedOptions.filter((option: Option) => getOptionValue(newOption) !== getOptionValue(option));\n\n    if (value === true) {\n      newSelectedOptions.push(newOption);\n    }\n\n    setSelectedOptions(newSelectedOptions);\n    onChange(newSelectedOptions);\n  }, [selectedOptions, getOptionValue, onChange]);\n\n  const addOption = React.useCallback((newOption: Option) => toggleOption(newOption, true), [toggleOption]);\n  const addOptionFromInput = React.useCallback(() => {\n    const trimmedValue = fieldValue?.trim();\n\n    if (trimmedValue) {\n      addOption(getNewOptionData(undefined, trimmedValue));\n      clearInput();\n    }\n  }, [addOption, clearInput, getNewOptionData, fieldValue]);\n  const removeOption = React.useCallback((value: ChipsInputValue) => {\n    toggleOption(getNewOptionData(undefined, value as string), false);\n  }, [toggleOption, getNewOptionData]);\n\n  React.useEffect(() => {\n    setSelectedOptions(value);\n\n    return () => setSelectedOptions([]);\n  }, [props.value]);\n\n  React.useEffect(() => {\n    setFieldValue(props.inputValue);\n\n    return () => setFieldValue('');\n  }, [props.inputValue]);\n\n  return { fieldValue, setFieldValue, selectedOptions, setSelectedOptions, clearInput, toggleOption, addOption, addOptionFromInput, removeOption, handleInputChange };\n};\n"],"file":"useChipsInput.js"}
+{"version":3,"sources":["../../../../src/components/ChipsInput/useChipsInput.ts"],"names":["useChipsInput","props","value","getOptionValue","onChange","onInputChange","getNewOptionData","React","useState","inputValue","fieldValue","setFieldValue","selectedOptions","setSelectedOptions","clearInput","useCallback","target","handleInputChange","e","toggleOption","newOption","newSelectedOptions","filter","option","push","addOption","addOptionFromInput","trimmedValue","trim","undefined","removeOption","useEffect"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport {\n  ChipsInputOption,\n  ChipsInputProps,\n  ChipsInputValue,\n} from \"./ChipsInput\";\n\nexport const useChipsInput = <Option extends ChipsInputOption>(\n  props: Partial<ChipsInputProps<Option>>\n) => {\n  const { value, getOptionValue, onChange, onInputChange, getNewOptionData } =\n    props;\n\n  const [fieldValue, setFieldValue] = React.useState(props.inputValue);\n  const [selectedOptions, setSelectedOptions] = React.useState(value);\n\n  const clearInput = React.useCallback(() => {\n    setFieldValue(\"\");\n    onInputChange({ target: { value: \"\" } } as any);\n  }, [onInputChange]);\n\n  const handleInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setFieldValue(e.target.value);\n      onInputChange(e);\n    },\n    [onInputChange]\n  );\n\n  const toggleOption = React.useCallback(\n    (newOption: Option, value?: boolean) => {\n      const newSelectedOptions = selectedOptions.filter(\n        (option: Option) => getOptionValue(newOption) !== getOptionValue(option)\n      );\n\n      if (value === true) {\n        newSelectedOptions.push(newOption);\n      }\n\n      setSelectedOptions(newSelectedOptions);\n      onChange(newSelectedOptions);\n    },\n    [selectedOptions, getOptionValue, onChange]\n  );\n\n  const addOption = React.useCallback(\n    (newOption: Option) => toggleOption(newOption, true),\n    [toggleOption]\n  );\n  const addOptionFromInput = React.useCallback(() => {\n    const trimmedValue = fieldValue?.trim();\n\n    if (trimmedValue) {\n      addOption(getNewOptionData(undefined, trimmedValue));\n      clearInput();\n    }\n  }, [addOption, clearInput, getNewOptionData, fieldValue]);\n  const removeOption = React.useCallback(\n    (value: ChipsInputValue) => {\n      toggleOption(getNewOptionData(undefined, value as string), false);\n    },\n    [toggleOption, getNewOptionData]\n  );\n\n  React.useEffect(() => {\n    setSelectedOptions(value);\n\n    return () => setSelectedOptions([]);\n  }, [props.value]);\n\n  React.useEffect(() => {\n    setFieldValue(props.inputValue);\n\n    return () => setFieldValue(\"\");\n  }, [props.inputValue]);\n\n  return {\n    fieldValue,\n    setFieldValue,\n    selectedOptions,\n    setSelectedOptions,\n    clearInput,\n    toggleOption,\n    addOption,\n    addOptionFromInput,\n    removeOption,\n    handleInputChange,\n  };\n};\n"],"file":"useChipsInput.js"}

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

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { ChipsInputOption, ChipsInputProps } from '../ChipsInput/ChipsInput';
-import { CustomSelectOptionProps } from '../CustomSelectOption/CustomSelectOption';
-import { AdaptivityProps } from '../../hoc/withAdaptivity';
-import './ChipsSelect.css';
+import * as React from "react";
+import { ChipsInputOption, ChipsInputProps } from "../ChipsInput/ChipsInput";
+import { CustomSelectOptionProps } from "../CustomSelectOption/CustomSelectOption";
+import { AdaptivityProps } from "../../hoc/withAdaptivity";
+import "./ChipsSelect.css";
 export interface ChipsSelectProps<Option extends ChipsInputOption> extends ChipsInputProps<Option>, AdaptivityProps {
-    popupDirection?: 'top' | 'bottom';
+    popupDirection?: "top" | "bottom";
     options?: Option[];
-    filterFn?: false | ((value?: string, option?: Option, getOptionLabel?: Pick<ChipsInputProps<ChipsInputOption>, 'getOptionLabel'>['getOptionLabel']) => boolean);
+    filterFn?: false | ((value?: string, option?: Option, getOptionLabel?: Pick<ChipsInputProps<ChipsInputOption>, "getOptionLabel">["getOptionLabel"]) => boolean);
     /**
      * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)
      */