@vkontakte/vkui 4.24.0 → 4.25.0

package/dist/components/Cell/useDraggable.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from "react";
 export var useDraggable = function useDraggable(_ref) {
@@ -11,17 +10,17 @@ export var useDraggable = function useDraggable(_ref) {
 
   var rootElRef = React.useRef(null);
 
-  var _React$useState3 = React.useState(undefined),
+  var _React$useState3 = React.useState([]),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       siblings = _React$useState4[0],
       setSiblings = _React$useState4[1];
 
-  var _React$useState5 = React.useState(undefined),
+  var _React$useState5 = React.useState(0),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       dragStartIndex = _React$useState6[0],
       setDragStartIndex = _React$useState6[1];
 
-  var _React$useState7 = React.useState(undefined),
+  var _React$useState7 = React.useState(0),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       dragEndIndex = _React$useState8[0],
       setDragEndIndex = _React$useState8[1];
@@ -37,10 +36,20 @@ export var useDraggable = function useDraggable(_ref) {
       setDragDirection = _React$useState12[1];
 
   var onDragStart = function onDragStart() {
+    var _rootEl$parentElement;
+
     var rootEl = rootElRef.current;
+
+    if (!rootEl) {
+      return;
+    }
+
     setDragging(true);
+    var _siblings = [];
 
-    var _siblings = _toConsumableArray(rootEl.parentElement.childNodes);
+    if ((_rootEl$parentElement = rootEl.parentElement) !== null && _rootEl$parentElement !== void 0 && _rootEl$parentElement.childNodes) {
+      _siblings = Array.from(rootEl.parentElement.children);
+    }
 
     var idx = _siblings.indexOf(rootEl);
 
@@ -53,60 +62,63 @@ export var useDraggable = function useDraggable(_ref) {
   var onDragMove = function onDragMove(e) {
     e.originalEvent.preventDefault();
     var rootEl = rootElRef.current;
-    rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
-    var rootGesture = rootEl.getBoundingClientRect();
-    setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
-    setDragShift(e.shiftY);
-    setDragEndIndex(dragStartIndex);
-    siblings.forEach(function (sibling, siblingIndex) {
-      var siblingGesture = sibling.getBoundingClientRect();
-      var siblingHalfHeight = siblingGesture.height / 2;
-      var rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
-      var rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
-
-      if (dragStartIndex < siblingIndex) {
-        if (rootOverSibling) {
-          if (dragDirection === "down") {
-            sibling.style.transform = "translateY(-100%)";
-          }
 
-          setDragEndIndex(function (dragEndIndex) {
-            return dragEndIndex + 1;
-          });
-        }
-
-        if (rootUnderSibling && dragDirection === "up") {
-          sibling.style.transform = "translateY(0)";
-        }
-      } else if (dragStartIndex > siblingIndex) {
-        if (rootUnderSibling) {
-          if (dragDirection === "up") {
-            sibling.style.transform = "translateY(100%)";
+    if (rootEl) {
+      rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
+      var rootGesture = rootEl.getBoundingClientRect();
+      setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
+      setDragShift(e.shiftY);
+      setDragEndIndex(dragStartIndex);
+      siblings.forEach(function (sibling, siblingIndex) {
+        var siblingGesture = sibling.getBoundingClientRect();
+        var siblingHalfHeight = siblingGesture.height / 2;
+        var rootOverSibling = rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
+        var rootUnderSibling = rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
+
+        if (dragStartIndex < siblingIndex) {
+          if (rootOverSibling) {
+            if (dragDirection === "down") {
+              sibling.style.transform = "translateY(-100%)";
+            }
+
+            setDragEndIndex(function (dragEndIndex) {
+              return dragEndIndex + 1;
+            });
           }
 
-          setDragEndIndex(function (dragEndIndex) {
-            return dragEndIndex - 1;
-          });
-        }
+          if (rootUnderSibling && dragDirection === "up") {
+            sibling.style.transform = "translateY(0)";
+          }
+        } else if (dragStartIndex > siblingIndex) {
+          if (rootUnderSibling) {
+            if (dragDirection === "up") {
+              sibling.style.transform = "translateY(100%)";
+            }
+
+            setDragEndIndex(function (dragEndIndex) {
+              return dragEndIndex - 1;
+            });
+          }
 
-        if (rootOverSibling && dragDirection === "down") {
-          sibling.style.transform = "translateY(0)";
+          if (rootOverSibling && dragDirection === "down") {
+            sibling.style.transform = "translateY(0)";
+          }
         }
-      }
-    });
+      });
+    }
   };
 
   var onDragEnd = function onDragEnd() {
     var from = dragStartIndex,
         to = dragEndIndex;
     siblings.forEach(function (sibling) {
-      sibling.style.transform = null;
+      sibling.style.transform = "";
     });
-    setSiblings(undefined);
-    setDragEndIndex(undefined);
-    setDragStartIndex(undefined);
+    setSiblings([]);
+    setDragEndIndex(0);
+    setDragStartIndex(0);
     setDragDirection(undefined);
-    setDragShift(undefined);
+    setDragShift(0);
     setDragging(false);
     onDragFinish && onDragFinish({
       from: from,

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","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"}
+{"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":"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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<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"}

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

@@ -6,5 +6,5 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
     description?: React.ReactNode;
 }
 export declare const Checkbox: React.FunctionComponent<CheckboxProps>;
-declare const _default: 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" | "scheme" | "value" | "alt" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "getRootRef" | "getRef" | "description"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
 export default _default;

package/dist/components/Checkbox/Checkbox.js

@@ -55,7 +55,8 @@ export var Checkbox = function Checkbox(_ref) {
     weight: "regular",
     vkuiClass: "Checkbox__description"
   }, description))));
-};
+}; // eslint-disable-next-line import/no-default-export
+
 export default withAdaptivity(Checkbox, {
   sizeY: true
 });

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,OAAOC,OAAP;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;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;AAuEP,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\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"}
+{"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,OAAOC,OAAP;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;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,C,CAuEP;;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\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\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.js

@@ -58,7 +58,8 @@ var Chip = function Chip(_ref) {
   }, createScopedElement(Icon16Cancel, {
     "aria-hidden": true
   }))));
-};
+}; // eslint-disable-next-line import/no-default-export
+
 
 export default Chip;
 //# sourceMappingURL=Chip.js.map

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,OAAOC,OAAP;AACA,OAAOC,QAAP;;AAeA,IAAMC,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,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,IAAA,SAAS,EAAEX,UAAU,CAAC,MAAD,EAAS;AAAE,yBAAmBM;AAArB,KAAT,CADvB;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,kBAAYU;AAHd,KAIMJ,SAJN,GAME;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;AACE,IAAA,KAAK,EAAC,GADR;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,SAAS,EAAC,eAHZ;AAIE,IAAA,KAAK,EAAEO,KAJT;AAKE,mBAAY;AALd,KAOGL,QAPH,CAFF,EAWGb,YAAY,CAACY,KAAD,CAAZ,IAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8BA,KAA9B,CAX1B,EAaGJ,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,CAdJ,CANF,CADF;AAmCD,CAtDD;;AAwDA,eAAeb,IAAf","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"}
+{"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,OAAOC,OAAP;AACA,OAAOC,QAAP;;AAeA,IAAMC,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,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,IAAA,SAAS,EAAEX,UAAU,CAAC,MAAD,EAAS;AAAE,yBAAmBM;AAArB,KAAT,CADvB;AAEE,IAAA,IAAI,EAAC,QAFP;AAGE,kBAAYU;AAHd,KAIMJ,SAJN,GAME;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;AACE,IAAA,KAAK,EAAC,GADR;AAEE,IAAA,MAAM,EAAC,SAFT;AAGE,IAAA,SAAS,EAAC,eAHZ;AAIE,IAAA,KAAK,EAAEO,KAJT;AAKE,mBAAY;AALd,KAOGL,QAPH,CAFF,EAWGb,YAAY,CAACY,KAAD,CAAZ,IAAuB;AAAK,IAAA,SAAS,EAAC;AAAf,KAA8BA,KAA9B,CAX1B,EAaGJ,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,CAdJ,CANF,CADF;AAmCD,CAtDD,C,CAwDA;;;AACA,eAAeb,IAAf","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\n// eslint-disable-next-line import/no-default-export\nexport default Chip;\n"],"file":"Chip.js"}

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

@@ -25,9 +25,6 @@ export interface ChipsInputProps<Option extends ChipsInputOption> extends Omit<R
     renderChip?: (props?: RenderChip<Option>) => React.ReactNode;
     inputAriaLabel?: string;
 }
-declare const ChipsInput: {
-    <Option extends ChipsInputOption>(props: ChipsInputProps<Option>): JSX.Element;
-    defaultProps: ChipsInputProps<any>;
-};
 export declare const chipsInputDefaultProps: ChipsInputProps<any>;
+declare const ChipsInput: <Option extends ChipsInputOption>(props: ChipsInputProps<Option>) => JSX.Element;
 export default ChipsInput;

package/dist/components/ChipsInput/ChipsInput.js

@@ -1,9 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["style", "value", "onChange", "onInputChange", "onKeyDown", "onBlur", "onFocus", "children", "className", "inputValue", "getRef", "getRootRef", "placeholder", "getOptionValue", "getOptionLabel", "getNewOptionData", "renderChip", "after", "inputAriaLabel"],
-    _excluded2 = ["disabled", "value", "label"];
+var _excluded = ["disabled", "value", "label"],
+    _excluded2 = ["style", "value", "onChange", "onInputChange", "onKeyDown", "onBlur", "onFocus", "children", "className", "inputValue", "getRef", "getRootRef", "placeholder", "getOptionValue", "getOptionLabel", "getNewOptionData", "renderChip", "after", "inputAriaLabel"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { FormField } from "../FormField/FormField";
@@ -14,28 +15,68 @@ import { useChipsInput } from "./useChipsInput";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { prefixClass } from "../../lib/prefixClass";
 import { useExternRef } from "../../hooks/useExternRef";
+export var chipsInputDefaultProps = {
+  type: "text",
+  onChange: noop,
+  onInputChange: noop,
+  onKeyDown: noop,
+  onBlur: noop,
+  onFocus: noop,
+  value: [],
+  inputValue: "",
+  inputAriaLabel: "Введите ваше значение...",
+  getOptionValue: function getOptionValue(option) {
+    return option.value;
+  },
+  getOptionLabel: function getOptionLabel(option) {
+    return option.label;
+  },
+  getNewOptionData: function getNewOptionData(_, label) {
+    return {
+      value: label,
+      label: label
+    };
+  },
+  renderChip: function renderChip(props) {
+    if (!props) {
+      return null;
+    }
+
+    var disabled = props.disabled,
+        value = props.value,
+        label = props.label,
+        rest = _objectWithoutProperties(props, _excluded);
+
+    return createScopedElement(Chip, _extends({
+      value: value,
+      removable: !disabled
+    }, rest), label);
+  }
+};
 
 var ChipsInput = function ChipsInput(props) {
-  var style = props.style,
-      value = props.value,
-      onChange = props.onChange,
-      onInputChange = props.onInputChange,
-      onKeyDown = props.onKeyDown,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      children = props.children,
-      className = props.className,
-      inputValue = props.inputValue,
-      getRef = props.getRef,
-      getRootRef = props.getRootRef,
-      placeholder = props.placeholder,
-      getOptionValue = props.getOptionValue,
-      getOptionLabel = props.getOptionLabel,
-      getNewOptionData = props.getNewOptionData,
-      renderChip = props.renderChip,
-      after = props.after,
-      inputAriaLabel = props.inputAriaLabel,
-      restProps = _objectWithoutProperties(props, _excluded);
+  var propsWithDefault = _objectSpread(_objectSpread({}, chipsInputDefaultProps), props);
+
+  var style = propsWithDefault.style,
+      value = propsWithDefault.value,
+      onChange = propsWithDefault.onChange,
+      onInputChange = propsWithDefault.onInputChange,
+      onKeyDown = propsWithDefault.onKeyDown,
+      onBlur = propsWithDefault.onBlur,
+      onFocus = propsWithDefault.onFocus,
+      children = propsWithDefault.children,
+      className = propsWithDefault.className,
+      inputValue = propsWithDefault.inputValue,
+      getRef = propsWithDefault.getRef,
+      getRootRef = propsWithDefault.getRootRef,
+      placeholder = propsWithDefault.placeholder,
+      getOptionValue = propsWithDefault.getOptionValue,
+      getOptionLabel = propsWithDefault.getOptionLabel,
+      getNewOptionData = propsWithDefault.getNewOptionData,
+      renderChip = propsWithDefault.renderChip,
+      after = propsWithDefault.after,
+      inputAriaLabel = propsWithDefault.inputAriaLabel,
+      restProps = _objectWithoutProperties(propsWithDefault, _excluded2);
 
   var _useAdaptivity = useAdaptivity(),
       sizeY = _useAdaptivity.sizeY;
@@ -45,7 +86,7 @@ var ChipsInput = function ChipsInput(props) {
       focused = _React$useState2[0],
       setFocused = _React$useState2[1];
 
-  var _useChipsInput = useChipsInput(props),
+  var _useChipsInput = useChipsInput(propsWithDefault),
       fieldValue = _useChipsInput.fieldValue,
       addOptionFromInput = _useChipsInput.addOptionFromInput,
       removeOption = _useChipsInput.removeOption,
@@ -91,7 +132,9 @@ var ChipsInput = function ChipsInput(props) {
   };
 
   var handleChipRemove = function handleChipRemove(_, value) {
-    removeOption(value);
+    if (value !== undefined) {
+      removeOption(value);
+    }
   };
 
   var handleClick = function handleClick(e) {
@@ -132,7 +175,7 @@ var ChipsInput = function ChipsInput(props) {
       value: value,
       label: label,
       onRemove: handleChipRemove,
-      disabled: restProps.disabled,
+      disabled: Boolean(restProps.disabled),
       className: prefixClass("ChipsInput__chip")
     }));
   }), createScopedElement("label", {
@@ -151,44 +194,10 @@ var ChipsInput = function ChipsInput(props) {
     onKeyDown: handleKeyDown,
     onFocus: handleFocus,
     onBlur: handleBlur,
-    placeholder: selectedOptions.length ? null : placeholder
+    placeholder: selectedOptions.length ? undefined : placeholder
   }, restProps)))));
-};
+}; // eslint-disable-next-line import/no-default-export
 
-export var chipsInputDefaultProps = {
-  type: "text",
-  onChange: noop,
-  onInputChange: noop,
-  onKeyDown: noop,
-  onBlur: noop,
-  onFocus: noop,
-  value: [],
-  inputValue: "",
-  inputAriaLabel: "Введите ваше значение...",
-  getOptionValue: function getOptionValue(option) {
-    return option.value;
-  },
-  getOptionLabel: function getOptionLabel(option) {
-    return option.label;
-  },
-  getNewOptionData: function getNewOptionData(_, label) {
-    return {
-      value: label,
-      label: label
-    };
-  },
-  renderChip: function renderChip(_ref) {
-    var disabled = _ref.disabled,
-        value = _ref.value,
-        label = _ref.label,
-        rest = _objectWithoutProperties(_ref, _excluded2);
 
-    return createScopedElement(Chip, _extends({
-      value: value,
-      removable: !disabled
-    }, rest), label);
-  }
-};
-ChipsInput.defaultProps = chipsInputDefaultProps;
 export default ChipsInput;
 //# sourceMappingURL=ChipsInput.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ChipsInput/ChipsInput.tsx"],"names":["React","FormField","classNames","Chip","noop","useChipsInput","useAdaptivity","prefixClass","useExternRef","ChipsInput","props","style","value","onChange","onInputChange","onKeyDown","onBlur","onFocus","children","className","inputValue","getRef","getRootRef","placeholder","getOptionValue","getOptionLabel","getNewOptionData","renderChip","after","inputAriaLabel","restProps","sizeY","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","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"}
+{"version":3,"sources":["../../../src/components/ChipsInput/ChipsInput.tsx"],"names":["React","FormField","classNames","Chip","noop","useChipsInput","useAdaptivity","prefixClass","useExternRef","chipsInputDefaultProps","type","onChange","onInputChange","onKeyDown","onBlur","onFocus","value","inputValue","inputAriaLabel","getOptionValue","option","getOptionLabel","label","getNewOptionData","_","renderChip","props","disabled","rest","ChipsInput","propsWithDefault","style","children","className","getRef","getRootRef","placeholder","after","restProps","sizeY","useState","focused","setFocused","fieldValue","addOptionFromInput","removeOption","selectedOptions","handleInputChange","inputRef","isDisabled","readOnly","handleKeyDown","e","preventDefault","key","defaultPrevented","length","handleBlur","handleFocus","handleChipRemove","undefined","handleClick","current","focus","map","onRemove","Boolean"],"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\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) => option.value,\n  getOptionLabel: (option) => option.label,\n  getNewOptionData: (_, label) => ({\n    value: label,\n    label,\n  }),\n  renderChip(props) {\n    if (!props) {\n      return null;\n    }\n\n    const { disabled, value, label, ...rest } = props;\n    return (\n      <Chip value={value} removable={!disabled} {...rest}>\n        {label}\n      </Chip>\n    );\n  },\n};\n\nconst ChipsInput = <Option extends ChipsInputOption>(\n  props: ChipsInputProps<Option>\n) => {\n  const propsWithDefault = { ...chipsInputDefaultProps, ...props };\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  } = propsWithDefault;\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(propsWithDefault);\n  const inputRef = useExternRef(getRef);\n\n  const isDisabled = restProps.disabled || restProps.readOnly;\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    onKeyDown!(e);\n\n    if (\n      e.key === \"Backspace\" &&\n      !e.defaultPrevented &&\n      !fieldValue &&\n      selectedOptions.length\n    ) {\n      removeOption(\n        getOptionValue!(selectedOptions[selectedOptions.length - 1])\n      );\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 | undefined,\n    value: ChipsInputValue | undefined\n  ) => {\n    if (value !== undefined) {\n      removeOption(value);\n    }\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (isDisabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (inputRef?.current !== null && !focused) {\n      inputRef.current.focus();\n    }\n  };\n\n  return (\n    <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: Boolean(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 ? undefined : placeholder}\n            {...restProps}\n          />\n        </label>\n      </div>\n    </FormField>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default ChipsInput;\n"],"file":"ChipsInput.js"}

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

@@ -1,12 +1,12 @@
 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>>;
+    fieldValue: string | undefined;
+    setFieldValue: React.Dispatch<React.SetStateAction<string | undefined>>;
     selectedOptions: Option[];
     setSelectedOptions: React.Dispatch<React.SetStateAction<Option[]>>;
     clearInput: () => void;
-    toggleOption: (newOption: Option, value?: boolean) => void;
+    toggleOption: (newOption: Option, value?: boolean | undefined) => void;
     addOption: (newOption: Option) => void;
     addOptionFromInput: () => void;
     removeOption: (value: string | number) => void;

package/dist/components/ChipsInput/useChipsInput.js

@@ -12,7 +12,7 @@ export var useChipsInput = function useChipsInput(props) {
       fieldValue = _React$useState2[0],
       setFieldValue = _React$useState2[1];
 
-  var _React$useState3 = React.useState(value),
+  var _React$useState3 = React.useState(value !== null && value !== void 0 ? value : []),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       selectedOptions = _React$useState4[0],
       setSelectedOptions = _React$useState4[1];
@@ -60,7 +60,7 @@ export var useChipsInput = function useChipsInput(props) {
     return function () {
       return setSelectedOptions([]);
     };
-  }, [props.value]);
+  }, [props.value, value]);
   React.useEffect(function () {
     setFieldValue(props.inputValue);
     return function () {