@vkontakte/vkui 4.41.0 → 4.42.1

package/dist/cssm/components/Button/Button.css

@@ -1,4 +1,4 @@
-.vkuiButton{border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);box-sizing:border-box;display:inline-block;margin:0;max-width:100%;min-height:28px;min-height:var(--vkui--size_button_small_height--compact,28px);min-width:80px;min-width:var(--vkui--size_button_minimum_width--regular,80px);padding:0;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiButton--loading{cursor:progress}.vkuiButton--singleIcon{min-width:28px;min-width:var(--vkui--size_button_small_height--compact,28px)}.vkuiButton--stretched{display:block;flex-basis:0;flex-grow:1;width:100%}.vkuiButton__in{align-items:center;box-sizing:border-box;display:flex;justify-content:center;min-height:inherit;text-align:center;width:100%}.vkuiButton--aln-left .vkuiButton__in{justify-content:flex-start;text-align:left}.vkuiButton--aln-right .vkuiButton__in{justify-content:flex-end;text-align:right}.vkuiButton[disabled]{opacity:.4;opacity:var(--vkui--opacity_disable,.4)}.vkuiButton--lvl-outline[disabled]:not(.vkuiButton--clr-overlay),.vkuiButton--lvl-primary[disabled]:not(.vkuiButton--clr-overlay):not(.vkuiButton--clr-negative):not(.vkuiButton--clr-positive),.vkuiButton--lvl-secondary[disabled]:not(.vkuiButton--clr-overlay),.vkuiButton--lvl-tertiary[disabled]:not(.vkuiButton--clr-overlay){opacity:.64}.vkuiButton__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiButton--sz-s .vkuiButton__content:first-child{padding-left:16px;padding-left:var(--vkui--size_button_base_small_padding_horizontal--regular,16px)}.vkuiButton--sz-s .vkuiButton__after,.vkuiButton--sz-s .vkuiButton__content:last-child{padding-right:16px;padding-right:var(
+.vkuiButton{border:none;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular,8px);box-sizing:border-box;display:inline-block;margin:0;max-width:100%;min-height:28px;min-height:var(--vkui--size_button_small_height--compact,28px);min-width:80px;min-width:var(--vkui--size_button_minimum_width--regular,80px);padding:0;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiButton--loading{cursor:progress}.vkuiButton--singleIcon{min-width:auto;width:28px;width:var(--vkui--size_button_small_height--compact,28px)}.vkuiButton--stretched{display:block;flex-basis:0;flex-grow:1;width:100%}.vkuiButton__in{align-items:center;box-sizing:border-box;display:flex;justify-content:center;min-height:inherit;text-align:center;width:100%}.vkuiButton--aln-left .vkuiButton__in{justify-content:flex-start;text-align:left}.vkuiButton--aln-right .vkuiButton__in{justify-content:flex-end;text-align:right}.vkuiButton[disabled]{opacity:.4;opacity:var(--vkui--opacity_disable,.4)}.vkuiButton--lvl-outline[disabled]:not(.vkuiButton--clr-overlay),.vkuiButton--lvl-primary[disabled]:not(.vkuiButton--clr-overlay):not(.vkuiButton--clr-negative):not(.vkuiButton--clr-positive),.vkuiButton--lvl-secondary[disabled]:not(.vkuiButton--clr-overlay),.vkuiButton--lvl-tertiary[disabled]:not(.vkuiButton--clr-overlay){opacity:.64}.vkuiButton__content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiButton--sz-s .vkuiButton__content:first-child{padding-left:16px;padding-left:var(--vkui--size_button_base_small_padding_horizontal--regular,16px)}.vkuiButton--sz-s .vkuiButton__after,.vkuiButton--sz-s .vkuiButton__content:last-child{padding-right:16px;padding-right:var(
     --vkui--size_button_base_small_padding_horizontal--regular,16px
   )}.vkuiButton--sz-m .vkuiButton__content:first-child{padding-left:16px;padding-left:var(
     --vkui--size_button_base_medium_padding_horizontal--regular,16px

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

@@ -1,8 +1,9 @@
 import * as React from "react";
+import { TappableProps } from "../Tappable/Tappable";
 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 {
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement>, AdaptivityProps, Pick<TappableProps, "hoverMode" | "activeMode" | "hasHover" | "hasActive" | "focusVisibleMode"> {
     description?: React.ReactNode;
     indeterminate?: boolean;
     defaultIndeterminate?: boolean;
@@ -10,6 +11,6 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/Checkbox
  */
-export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, sizeY, onChange, ...restProps }: CheckboxProps) => JSX.Element;
-declare const _default: React.FC<Pick<CheckboxProps, "form" | "slot" | "style" | "title" | "pattern" | "value" | "children" | "alt" | "crossOrigin" | "height" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "size" | "multiple" | "disabled" | "list" | "step" | "getRootRef" | "accept" | "autoComplete" | "autoFocus" | "capture" | "checked" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "max" | "maxLength" | "min" | "minLength" | "name" | "readOnly" | "required" | "type" | "getRef" | "description" | "indeterminate" | "defaultIndeterminate"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Checkbox: ({ children, className, style, getRootRef, getRef, description, indeterminate, defaultIndeterminate, sizeY, hoverMode, activeMode, hasHover, hasActive, focusVisibleMode, onChange, ...restProps }: CheckboxProps) => JSX.Element;
+declare const _default: React.FC<Pick<CheckboxProps, "form" | "slot" | "style" | "title" | "pattern" | "value" | "children" | "alt" | "crossOrigin" | "height" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "size" | "multiple" | "disabled" | "list" | "step" | "getRootRef" | "accept" | "autoComplete" | "autoFocus" | "capture" | "checked" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "max" | "maxLength" | "min" | "minLength" | "name" | "readOnly" | "required" | "type" | "hasHover" | "hoverMode" | "hasActive" | "activeMode" | "focusVisibleMode" | "getRef" | "description" | "indeterminate" | "defaultIndeterminate"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
 export default _default;

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "sizeY", "onChange"];
+var _excluded = ["children", "className", "style", "getRootRef", "getRef", "description", "indeterminate", "defaultIndeterminate", "sizeY", "hoverMode", "activeMode", "hasHover", "hasActive", "focusVisibleMode", "onChange"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { ACTIVE_EFFECT_DELAY, Tappable } from "../Tappable/Tappable";
@@ -31,6 +31,11 @@ export var Checkbox = function Checkbox(_ref) {
     indeterminate = _ref.indeterminate,
     defaultIndeterminate = _ref.defaultIndeterminate,
     sizeY = _ref.sizeY,
+    hoverMode = _ref.hoverMode,
+    activeMode = _ref.activeMode,
+    hasHover = _ref.hasHover,
+    hasActive = _ref.hasActive,
+    focusVisibleMode = _ref.focusVisibleMode,
     onChange = _ref.onChange,
     restProps = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useExternRef(getRef);
@@ -68,7 +73,12 @@ export var Checkbox = function Checkbox(_ref) {
     style: style,
     disabled: restProps.disabled,
     activeEffectDelay: platform === IOS ? 100 : ACTIVE_EFFECT_DELAY,
-    getRootRef: getRootRef
+    getRootRef: getRootRef,
+    hoverMode: hoverMode,
+    activeMode: activeMode,
+    hasHover: hasHover,
+    hasActive: hasActive,
+    focusVisibleMode: focusVisibleMode
   }, createScopedElement(VisuallyHiddenInput, _extends({}, restProps, {
     onChange: handleChange,
     type: "checkbox",

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","ACTIVE_EFFECT_DELAY","Tappable","classNames","IOS","VKCOM","Icon20CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOn","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","usePlatform","withAdaptivity","SizeType","Text","hasReactNode","Caption","useExternRef","VisuallyHiddenInput","warnOnce","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","sizeY","onChange","restProps","inputRef","platform","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","disabled","COMPACT"],"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ACTIVE_EFFECT_DELAY, Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\n\nimport {\n  Icon20CheckBoxOn,\n  Icon20CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon20CheckBoxIndetermanate,\n} from \"@vkontakte/icons\";\n\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  withAdaptivity,\n  AdaptivityProps,\n  SizeType,\n} from \"../../hoc/withAdaptivity\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./Checkbox.css\";\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    AdaptivityProps {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce(\"Checkbox\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  sizeY,\n  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n\n  React.useEffect(() => {\n    const indeterminateValue =\n      indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps[\"onChange\"] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]\n  );\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn(\n        \"defaultIndeterminate и defaultChecked не могут быть true одновременно\",\n        \"error\"\n      );\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn(\"indeterminate и checked не могут быть true одновременно\", \"error\");\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn(\"defaultChecked и checked не могут быть true одновременно\", \"error\");\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      vkuiClass={classNames(\n        \"Checkbox\",\n        `Checkbox--sizeY-${sizeY}`,\n        !(hasReactNode(children) || hasReactNode(description)) &&\n          `Checkbox--simple`\n      )}\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        vkuiClass=\"Checkbox__input\"\n        getRef={inputRef}\n      />\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--on\">\n        {sizeY === SizeType.COMPACT || platform === VKCOM ? (\n          <Icon20CheckBoxOn aria-hidden />\n        ) : (\n          <Icon24CheckBoxOn aria-hidden />\n        )}\n      </div>\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--off\">\n        {sizeY === SizeType.COMPACT || platform === VKCOM ? (\n          <Icon20CheckBoxOff aria-hidden />\n        ) : (\n          <Icon24CheckBoxOff aria-hidden />\n        )}\n      </div>\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--indeterminate\">\n        <Icon20CheckBoxIndetermanate\n          aria-hidden\n          width={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}\n          height={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}\n        />\n      </div>\n      <Text vkuiClass=\"Checkbox__content\" Component=\"div\">\n        <div vkuiClass=\"Checkbox__children\">{children}</div>\n        {hasReactNode(description) && (\n          <Caption vkuiClass=\"Checkbox__description\">{description}</Caption>\n        )}\n      </Text>\n    </Tappable>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(Checkbox, {\n  sizeY: true,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["React","ACTIVE_EFFECT_DELAY","Tappable","classNames","IOS","VKCOM","Icon20CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOn","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","usePlatform","withAdaptivity","SizeType","Text","hasReactNode","Caption","useExternRef","VisuallyHiddenInput","warnOnce","warn","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","sizeY","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","restProps","inputRef","platform","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","disabled","COMPACT"],"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  ACTIVE_EFFECT_DELAY,\n  TappableProps,\n  Tappable,\n} from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\n\nimport {\n  Icon20CheckBoxOn,\n  Icon20CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon20CheckBoxIndetermanate,\n} from \"@vkontakte/icons\";\n\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  withAdaptivity,\n  AdaptivityProps,\n  SizeType,\n} from \"../../hoc/withAdaptivity\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./Checkbox.css\";\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    AdaptivityProps,\n    Pick<\n      TappableProps,\n      \"hoverMode\" | \"activeMode\" | \"hasHover\" | \"hasActive\" | \"focusVisibleMode\"\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce(\"Checkbox\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  sizeY,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n\n  React.useEffect(() => {\n    const indeterminateValue =\n      indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps[\"onChange\"] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]\n  );\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn(\n        \"defaultIndeterminate и defaultChecked не могут быть true одновременно\",\n        \"error\"\n      );\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn(\"indeterminate и checked не могут быть true одновременно\", \"error\");\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn(\"defaultChecked и checked не могут быть true одновременно\", \"error\");\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      vkuiClass={classNames(\n        \"Checkbox\",\n        `Checkbox--sizeY-${sizeY}`,\n        !(hasReactNode(children) || hasReactNode(description)) &&\n          `Checkbox--simple`\n      )}\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        vkuiClass=\"Checkbox__input\"\n        getRef={inputRef}\n      />\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--on\">\n        {sizeY === SizeType.COMPACT || platform === VKCOM ? (\n          <Icon20CheckBoxOn aria-hidden />\n        ) : (\n          <Icon24CheckBoxOn aria-hidden />\n        )}\n      </div>\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--off\">\n        {sizeY === SizeType.COMPACT || platform === VKCOM ? (\n          <Icon20CheckBoxOff aria-hidden />\n        ) : (\n          <Icon24CheckBoxOff aria-hidden />\n        )}\n      </div>\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--indeterminate\">\n        <Icon20CheckBoxIndetermanate\n          aria-hidden\n          width={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}\n          height={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}\n        />\n      </div>\n      <Text vkuiClass=\"Checkbox__content\" Component=\"div\">\n        <div vkuiClass=\"Checkbox__children\">{children}</div>\n        {hasReactNode(description) && (\n          <Caption vkuiClass=\"Checkbox__description\">{description}</Caption>\n        )}\n      </Text>\n    </Tappable>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(Checkbox, {\n  sizeY: true,\n});\n"],"mappings":"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"}

package/dist/cssm/components/ChipsSelect/ChipsSelect.js

@@ -240,7 +240,7 @@ export var ChipsSelect = function ChipsSelect(props) {
       return !prevOpened;
     });
   };
-  return createScopedElement(FormField, {
+  return createScopedElement(React.Fragment, null, createScopedElement(FormField, {
     vkuiClass: classNames("ChipsSelect", opened && "Select--open", opened && (isPopperDirectionTop ? "Select--pop-up" : "Select--pop-down")),
     getRootRef: rootRef,
     style: style,
@@ -276,7 +276,7 @@ export var ChipsSelect = function ChipsSelect(props) {
     getRef: getRef,
     disabled: disabled,
     onInputChange: handleInputChange
-  })), opened && createScopedElement(CustomSelectDropdown, {
+  }))), opened && createScopedElement(CustomSelectDropdown, {
     targetRef: rootRef,
     placement: popupDirection,
     scrollBoxRef: scrollBoxRef,

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

@@ -1 +1 @@
-{"version":3,"file":"ChipsSelect.js","names":["React","DropdownIcon","classNames","ChipsInputBase","chipsInputDefaultProps","CustomSelectOption","useChipsSelect","noop","useDOM","Caption","prefixClass","useExternRef","useGlobalEventListener","defaultFilterFn","CustomSelectDropdown","FormField","IconButton","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","option","restProps","ChipsSelect","props","propsWithDefault","style","onFocus","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","fixDropdownWidth","forceDropdownPortal","document","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","defaultPrevented","preventDefault","includes","useEffect","findIndex","value","renderChipWrapper","renderChipProps","onRemoveWrapper","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","observableRefs","useMemo","toggleOpened","prevOpened","readOnly","map","label","hovered","selected","find","selectedOption","children","onMouseDown","onMouseEnter"],"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ChipOption, ChipValue, RenderChip } from \"../Chip/Chip\";\nimport { ChipsInputProps } from \"../ChipsInput/ChipsInput\";\nimport {\n  ChipsInputBase,\n  chipsInputDefaultProps,\n} from \"../ChipsInputBase/ChipsInputBase\";\nimport {\n  CustomSelectOption,\n  CustomSelectOptionProps,\n} from \"../CustomSelectOption/CustomSelectOption\";\nimport { useChipsSelect } from \"../../hooks/useChipsSelect\";\nimport { noop } from \"../../lib/utils\";\nimport { useDOM } from \"../../lib/dom\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { defaultFilterFn } from \"../../lib/select\";\nimport { Placement } from \"../Popper/Popper\";\nimport { CustomSelectDropdown } from \"../CustomSelectDropdown/CustomSelectDropdown\";\nimport { FormField } from \"../FormField/FormField\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport \"./ChipsSelect.css\";\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n  extends Omit<ChipsInputProps<Option>, \"after\"> {\n  popupDirection?: \"top\" | \"bottom\";\n  options?: Option[];\n  filterFn?:\n    | false\n    | ((\n        value?: string,\n        option?: Option,\n        getOptionLabel?: Pick<\n          ChipsInputProps<Option>,\n          \"getOptionLabel\"\n        >[\"getOptionLabel\"]\n      ) => boolean);\n  /**\n   * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n   */\n  creatable?: boolean;\n  /**\n   * Отрисовка лоадера вместо списка опций в выпадающем списке\n   */\n  fetching?: boolean;\n  renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n  /**\n   * Показывать или скрывать уже выбранные опции\n   */\n  showSelected?: boolean;\n  /**\n   * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n   */\n  creatableText?: string;\n  /**\n   * Текст который показывается если список опций пуст\n   */\n  emptyText?: string;\n  /**\n   * Событие срабатывающее перед onChange\n   */\n  onChangeStart?: (\n    e: React.MouseEvent | React.KeyboardEvent,\n    option: Option\n  ) => void;\n  /**\n   * Закрытие выпадающего списка после выбора элемента\n   */\n  closeAfterSelect?: boolean;\n  fixDropdownWidth?: boolean;\n  forceDropdownPortal?: boolean;\n}\n\ntype FocusActionType = \"next\" | \"prev\";\n\nconst FOCUS_ACTION_NEXT: FocusActionType = \"next\";\nconst FOCUS_ACTION_PREV: FocusActionType = \"prev\";\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n  ...chipsInputDefaultProps,\n  emptyText: \"Ничего не найдено\",\n  creatableText: \"Создать значение\",\n  onChangeStart: noop,\n  creatable: false,\n  fetching: false,\n  showSelected: true,\n  closeAfterSelect: true,\n  options: [],\n  filterFn: defaultFilterFn,\n  renderOption({ option, ...restProps }) {\n    return <CustomSelectOption {...restProps} />;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(\n  props: ChipsSelectProps<Option>\n) => {\n  const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n  const {\n    style,\n    onFocus,\n    onKeyDown,\n    className,\n    fetching,\n    renderOption,\n    emptyText,\n    getRef,\n    getRootRef,\n    disabled,\n    placeholder,\n    tabIndex,\n    getOptionValue,\n    getOptionLabel,\n    showSelected,\n    getNewOptionData,\n    renderChip,\n    popupDirection,\n    creatable,\n    filterFn,\n    inputValue,\n    creatableText,\n    closeAfterSelect,\n    onChangeStart,\n    before,\n    options,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    ...restProps\n  } = propsWithDefault;\n\n  const { document } = useDOM();\n\n  const [popperPlacement, setPopperPlacement] = React.useState<\n    Placement | undefined\n  >(undefined);\n\n  const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n  const rootRef = useExternRef(getRef);\n  const {\n    fieldValue,\n    selectedOptions = [],\n    opened,\n    setOpened,\n    addOptionFromInput,\n    filteredOptions,\n    addOption,\n    handleInputChange,\n    clearInput,\n    focusedOption,\n    setFocusedOption,\n    focusedOptionIndex,\n    setFocusedOptionIndex,\n  } = useChipsSelect(propsWithDefault);\n\n  const showCreatable = Boolean(\n    creatable && creatableText && !filteredOptions.length && fieldValue\n  );\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setOpened(true);\n    setFocusedOptionIndex(0);\n    onFocus!(e);\n  };\n\n  const handleClickOutside = (e: MouseEvent) => {\n    if (\n      e.target !== rootRef.current &&\n      !rootRef.current?.contains(e.target as Node)\n    ) {\n      setOpened(false);\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = scrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number) => {\n    const { length } = filteredOptions;\n\n    if (index < 0) {\n      index = length - 1;\n    } else if (index >= length) {\n      index = 0;\n    }\n\n    if (index === oldIndex) {\n      return;\n    }\n\n    scrollToElement(index);\n    setFocusedOptionIndex(index);\n  };\n\n  const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n    let index = typeof nextIndex !== \"number\" ? -1 : nextIndex;\n\n    if (type === FOCUS_ACTION_NEXT) {\n      index = index + 1;\n    } else if (type === FOCUS_ACTION_PREV) {\n      index = index - 1;\n    }\n\n    if (focusedOptionIndex != null) {\n      focusOptionByIndex(index, focusedOptionIndex);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown!(e);\n\n    if (e.key === \"ArrowUp\" && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n      }\n    }\n\n    if (e.key === \"ArrowDown\" && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n      }\n    }\n\n    if (\n      e.key === \"Enter\" &&\n      !e.defaultPrevented &&\n      opened &&\n      focusedOptionIndex != null\n    ) {\n      const option = filteredOptions[focusedOptionIndex];\n\n      if (option) {\n        onChangeStart!(e, option);\n\n        if (!e.defaultPrevented) {\n          addOption(option);\n          setFocusedOptionIndex(null);\n          clearInput();\n          closeAfterSelect && setOpened(false);\n          e.preventDefault();\n        }\n      } else if (!creatable) {\n        e.preventDefault();\n      }\n    }\n\n    if ([\"Escape\", \"Tab\"].includes(e.key) && !e.defaultPrevented && opened) {\n      setOpened(false);\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n      setFocusedOption(filteredOptions[focusedOptionIndex]);\n    } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {\n      setFocusedOption(null);\n    }\n  }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n  React.useEffect(() => {\n    const index = focusedOption\n      ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)\n      : -1;\n\n    if (\n      index === -1 &&\n      !!filteredOptions.length &&\n      !showCreatable &&\n      closeAfterSelect\n    ) {\n      setFocusedOption(filteredOptions[0]);\n    }\n  }, [\n    filteredOptions,\n    focusedOption,\n    showCreatable,\n    closeAfterSelect,\n    setFocusedOption,\n  ]);\n\n  useGlobalEventListener(document, \"click\", handleClickOutside);\n\n  const renderChipWrapper = (\n    renderChipProps: RenderChip<Option> | undefined\n  ) => {\n    if (renderChipProps === undefined) {\n      return null;\n    }\n    const onRemoveWrapper = (\n      e: React.MouseEvent | undefined,\n      value: ChipValue | undefined\n    ) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      renderChipProps.onRemove?.(e, value);\n    };\n\n    return renderChip!({\n      ...renderChipProps,\n      onRemove: onRemoveWrapper,\n    });\n  };\n\n  const isPopperDirectionTop = popperPlacement?.includes(\"top\");\n\n  const onPlacementChange = React.useCallback(\n    (placement?: Placement) => {\n      setPopperPlacement(placement);\n    },\n    [setPopperPlacement]\n  );\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const observableRefs = React.useMemo(\n    () => [scrollBoxRef, rootRef],\n    [rootRef, scrollBoxRef]\n  );\n\n  const toggleOpened = () => {\n    setOpened((prevOpened) => !prevOpened);\n  };\n\n  return (\n    <FormField\n      vkuiClass={classNames(\n        \"ChipsSelect\",\n        opened && \"Select--open\",\n        opened && (isPopperDirectionTop ? \"Select--pop-up\" : \"Select--pop-down\")\n      )}\n      getRootRef={rootRef}\n      style={style}\n      className={className}\n      disabled={disabled}\n      role=\"application\"\n      aria-disabled={disabled}\n      aria-readonly={restProps.readOnly}\n      after={\n        <IconButton\n          vkuiClass=\"ChipsSelect__dropdown\"\n          activeMode=\"\"\n          hoverMode=\"\"\n          // TODO: add label customization\n          aria-label={opened ? \"Скрыть\" : \"Развернуть\"}\n          onClick={toggleOpened}\n        >\n          <DropdownIcon vkuiClass=\"ChipsSelect__icon\" opened={opened} />\n        </IconButton>\n      }\n      before={before}\n    >\n      <ChipsInputBase\n        {...restProps}\n        tabIndex={tabIndex}\n        value={selectedOptions}\n        inputValue={fieldValue}\n        getNewOptionData={getNewOptionData}\n        getOptionLabel={getOptionLabel}\n        getOptionValue={getOptionValue}\n        renderChip={renderChipWrapper}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        getRef={getRef}\n        disabled={disabled}\n        onInputChange={handleInputChange}\n      />\n      {opened && (\n        <CustomSelectDropdown\n          targetRef={rootRef}\n          placement={popupDirection}\n          scrollBoxRef={scrollBoxRef}\n          observableRefs={observableRefs}\n          onPlacementChange={onPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          vkuiClass=\"ChipsSelect__options\"\n          sameWidth={fixDropdownWidth}\n          forcePortal={forceDropdownPortal}\n        >\n          {showCreatable && (\n            <CustomSelectOption\n              hovered={focusedOptionIndex === 0}\n              onMouseDown={addOptionFromInput}\n              onMouseEnter={() => setFocusedOptionIndex(0)}\n            >\n              {creatableText}\n            </CustomSelectOption>\n          )}\n          {!filteredOptions?.length && !showCreatable && emptyText ? (\n            <Caption vkuiClass=\"ChipsSelect__empty\">{emptyText}</Caption>\n          ) : (\n            filteredOptions.map((option: Option, index: number) => {\n              const label = getOptionLabel!(option);\n              const hovered =\n                focusedOption &&\n                getOptionValue!(option) === getOptionValue!(focusedOption);\n              const selected = selectedOptions.find(\n                (selectedOption: Option) => {\n                  return (\n                    getOptionValue!(selectedOption) === getOptionValue!(option)\n                  );\n                }\n              );\n              const value = getOptionValue!(option);\n\n              return (\n                <React.Fragment key={`${typeof value}-${value}`}>\n                  {renderOption!({\n                    className: prefixClass(\"ChipsSelect__option\"),\n                    option,\n                    hovered: Boolean(hovered),\n                    children: label,\n                    selected: !!selected,\n                    getRootRef: (e) => {\n                      if (e) {\n                        return (chipsSelectOptions[index] = e);\n                      }\n                      return undefined;\n                    },\n                    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n                      onChangeStart?.(e, option);\n\n                      if (!e.defaultPrevented) {\n                        closeAfterSelect && setOpened(false);\n                        addOption(option);\n                        clearInput();\n                      }\n                    },\n                    onMouseEnter: () => setFocusedOptionIndex(index),\n                  })}\n                </React.Fragment>\n              );\n            })\n          )}\n        </CustomSelectDropdown>\n      )}\n    </FormField>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChipsSelect.js","names":["React","DropdownIcon","classNames","ChipsInputBase","chipsInputDefaultProps","CustomSelectOption","useChipsSelect","noop","useDOM","Caption","prefixClass","useExternRef","useGlobalEventListener","defaultFilterFn","CustomSelectDropdown","FormField","IconButton","FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","emptyText","creatableText","onChangeStart","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","renderOption","option","restProps","ChipsSelect","props","propsWithDefault","style","onFocus","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","fixDropdownWidth","forceDropdownPortal","document","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","defaultPrevented","preventDefault","includes","useEffect","findIndex","value","renderChipWrapper","renderChipProps","onRemoveWrapper","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","observableRefs","useMemo","toggleOpened","prevOpened","readOnly","map","label","hovered","selected","find","selectedOption","children","onMouseDown","onMouseEnter"],"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ChipOption, ChipValue, RenderChip } from \"../Chip/Chip\";\nimport { ChipsInputProps } from \"../ChipsInput/ChipsInput\";\nimport {\n  ChipsInputBase,\n  chipsInputDefaultProps,\n} from \"../ChipsInputBase/ChipsInputBase\";\nimport {\n  CustomSelectOption,\n  CustomSelectOptionProps,\n} from \"../CustomSelectOption/CustomSelectOption\";\nimport { useChipsSelect } from \"../../hooks/useChipsSelect\";\nimport { noop } from \"../../lib/utils\";\nimport { useDOM } from \"../../lib/dom\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { defaultFilterFn } from \"../../lib/select\";\nimport { Placement } from \"../Popper/Popper\";\nimport { CustomSelectDropdown } from \"../CustomSelectDropdown/CustomSelectDropdown\";\nimport { FormField } from \"../FormField/FormField\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport \"./ChipsSelect.css\";\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n  extends Omit<ChipsInputProps<Option>, \"after\"> {\n  popupDirection?: \"top\" | \"bottom\";\n  options?: Option[];\n  filterFn?:\n    | false\n    | ((\n        value?: string,\n        option?: Option,\n        getOptionLabel?: Pick<\n          ChipsInputProps<Option>,\n          \"getOptionLabel\"\n        >[\"getOptionLabel\"]\n      ) => boolean);\n  /**\n   * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n   */\n  creatable?: boolean;\n  /**\n   * Отрисовка лоадера вместо списка опций в выпадающем списке\n   */\n  fetching?: boolean;\n  renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n  /**\n   * Показывать или скрывать уже выбранные опции\n   */\n  showSelected?: boolean;\n  /**\n   * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n   */\n  creatableText?: string;\n  /**\n   * Текст который показывается если список опций пуст\n   */\n  emptyText?: string;\n  /**\n   * Событие срабатывающее перед onChange\n   */\n  onChangeStart?: (\n    e: React.MouseEvent | React.KeyboardEvent,\n    option: Option\n  ) => void;\n  /**\n   * Закрытие выпадающего списка после выбора элемента\n   */\n  closeAfterSelect?: boolean;\n  fixDropdownWidth?: boolean;\n  forceDropdownPortal?: boolean;\n}\n\ntype FocusActionType = \"next\" | \"prev\";\n\nconst FOCUS_ACTION_NEXT: FocusActionType = \"next\";\nconst FOCUS_ACTION_PREV: FocusActionType = \"prev\";\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n  ...chipsInputDefaultProps,\n  emptyText: \"Ничего не найдено\",\n  creatableText: \"Создать значение\",\n  onChangeStart: noop,\n  creatable: false,\n  fetching: false,\n  showSelected: true,\n  closeAfterSelect: true,\n  options: [],\n  filterFn: defaultFilterFn,\n  renderOption({ option, ...restProps }) {\n    return <CustomSelectOption {...restProps} />;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(\n  props: ChipsSelectProps<Option>\n) => {\n  const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n  const {\n    style,\n    onFocus,\n    onKeyDown,\n    className,\n    fetching,\n    renderOption,\n    emptyText,\n    getRef,\n    getRootRef,\n    disabled,\n    placeholder,\n    tabIndex,\n    getOptionValue,\n    getOptionLabel,\n    showSelected,\n    getNewOptionData,\n    renderChip,\n    popupDirection,\n    creatable,\n    filterFn,\n    inputValue,\n    creatableText,\n    closeAfterSelect,\n    onChangeStart,\n    before,\n    options,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    ...restProps\n  } = propsWithDefault;\n\n  const { document } = useDOM();\n\n  const [popperPlacement, setPopperPlacement] = React.useState<\n    Placement | undefined\n  >(undefined);\n\n  const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n  const rootRef = useExternRef(getRef);\n  const {\n    fieldValue,\n    selectedOptions = [],\n    opened,\n    setOpened,\n    addOptionFromInput,\n    filteredOptions,\n    addOption,\n    handleInputChange,\n    clearInput,\n    focusedOption,\n    setFocusedOption,\n    focusedOptionIndex,\n    setFocusedOptionIndex,\n  } = useChipsSelect(propsWithDefault);\n\n  const showCreatable = Boolean(\n    creatable && creatableText && !filteredOptions.length && fieldValue\n  );\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setOpened(true);\n    setFocusedOptionIndex(0);\n    onFocus!(e);\n  };\n\n  const handleClickOutside = (e: MouseEvent) => {\n    if (\n      e.target !== rootRef.current &&\n      !rootRef.current?.contains(e.target as Node)\n    ) {\n      setOpened(false);\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = scrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number) => {\n    const { length } = filteredOptions;\n\n    if (index < 0) {\n      index = length - 1;\n    } else if (index >= length) {\n      index = 0;\n    }\n\n    if (index === oldIndex) {\n      return;\n    }\n\n    scrollToElement(index);\n    setFocusedOptionIndex(index);\n  };\n\n  const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n    let index = typeof nextIndex !== \"number\" ? -1 : nextIndex;\n\n    if (type === FOCUS_ACTION_NEXT) {\n      index = index + 1;\n    } else if (type === FOCUS_ACTION_PREV) {\n      index = index - 1;\n    }\n\n    if (focusedOptionIndex != null) {\n      focusOptionByIndex(index, focusedOptionIndex);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown!(e);\n\n    if (e.key === \"ArrowUp\" && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n      }\n    }\n\n    if (e.key === \"ArrowDown\" && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n      }\n    }\n\n    if (\n      e.key === \"Enter\" &&\n      !e.defaultPrevented &&\n      opened &&\n      focusedOptionIndex != null\n    ) {\n      const option = filteredOptions[focusedOptionIndex];\n\n      if (option) {\n        onChangeStart!(e, option);\n\n        if (!e.defaultPrevented) {\n          addOption(option);\n          setFocusedOptionIndex(null);\n          clearInput();\n          closeAfterSelect && setOpened(false);\n          e.preventDefault();\n        }\n      } else if (!creatable) {\n        e.preventDefault();\n      }\n    }\n\n    if ([\"Escape\", \"Tab\"].includes(e.key) && !e.defaultPrevented && opened) {\n      setOpened(false);\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n      setFocusedOption(filteredOptions[focusedOptionIndex]);\n    } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {\n      setFocusedOption(null);\n    }\n  }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n  React.useEffect(() => {\n    const index = focusedOption\n      ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)\n      : -1;\n\n    if (\n      index === -1 &&\n      !!filteredOptions.length &&\n      !showCreatable &&\n      closeAfterSelect\n    ) {\n      setFocusedOption(filteredOptions[0]);\n    }\n  }, [\n    filteredOptions,\n    focusedOption,\n    showCreatable,\n    closeAfterSelect,\n    setFocusedOption,\n  ]);\n\n  useGlobalEventListener(document, \"click\", handleClickOutside);\n\n  const renderChipWrapper = (\n    renderChipProps: RenderChip<Option> | undefined\n  ) => {\n    if (renderChipProps === undefined) {\n      return null;\n    }\n    const onRemoveWrapper = (\n      e: React.MouseEvent | undefined,\n      value: ChipValue | undefined\n    ) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      renderChipProps.onRemove?.(e, value);\n    };\n\n    return renderChip!({\n      ...renderChipProps,\n      onRemove: onRemoveWrapper,\n    });\n  };\n\n  const isPopperDirectionTop = popperPlacement?.includes(\"top\");\n\n  const onPlacementChange = React.useCallback(\n    (placement?: Placement) => {\n      setPopperPlacement(placement);\n    },\n    [setPopperPlacement]\n  );\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const observableRefs = React.useMemo(\n    () => [scrollBoxRef, rootRef],\n    [rootRef, scrollBoxRef]\n  );\n\n  const toggleOpened = () => {\n    setOpened((prevOpened) => !prevOpened);\n  };\n\n  return (\n    <React.Fragment>\n      <FormField\n        vkuiClass={classNames(\n          \"ChipsSelect\",\n          opened && \"Select--open\",\n          opened &&\n            (isPopperDirectionTop ? \"Select--pop-up\" : \"Select--pop-down\")\n        )}\n        getRootRef={rootRef}\n        style={style}\n        className={className}\n        disabled={disabled}\n        role=\"application\"\n        aria-disabled={disabled}\n        aria-readonly={restProps.readOnly}\n        after={\n          <IconButton\n            vkuiClass=\"ChipsSelect__dropdown\"\n            activeMode=\"\"\n            hoverMode=\"\"\n            // TODO: add label customization\n            aria-label={opened ? \"Скрыть\" : \"Развернуть\"}\n            onClick={toggleOpened}\n          >\n            <DropdownIcon vkuiClass=\"ChipsSelect__icon\" opened={opened} />\n          </IconButton>\n        }\n        before={before}\n      >\n        <ChipsInputBase\n          {...restProps}\n          tabIndex={tabIndex}\n          value={selectedOptions}\n          inputValue={fieldValue}\n          getNewOptionData={getNewOptionData}\n          getOptionLabel={getOptionLabel}\n          getOptionValue={getOptionValue}\n          renderChip={renderChipWrapper}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          getRef={getRef}\n          disabled={disabled}\n          onInputChange={handleInputChange}\n        />\n      </FormField>\n      {opened && (\n        <CustomSelectDropdown\n          targetRef={rootRef}\n          placement={popupDirection}\n          scrollBoxRef={scrollBoxRef}\n          observableRefs={observableRefs}\n          onPlacementChange={onPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          vkuiClass=\"ChipsSelect__options\"\n          sameWidth={fixDropdownWidth}\n          forcePortal={forceDropdownPortal}\n        >\n          {showCreatable && (\n            <CustomSelectOption\n              hovered={focusedOptionIndex === 0}\n              onMouseDown={addOptionFromInput}\n              onMouseEnter={() => setFocusedOptionIndex(0)}\n            >\n              {creatableText}\n            </CustomSelectOption>\n          )}\n          {!filteredOptions?.length && !showCreatable && emptyText ? (\n            <Caption vkuiClass=\"ChipsSelect__empty\">{emptyText}</Caption>\n          ) : (\n            filteredOptions.map((option: Option, index: number) => {\n              const label = getOptionLabel!(option);\n              const hovered =\n                focusedOption &&\n                getOptionValue!(option) === getOptionValue!(focusedOption);\n              const selected = selectedOptions.find(\n                (selectedOption: Option) => {\n                  return (\n                    getOptionValue!(selectedOption) === getOptionValue!(option)\n                  );\n                }\n              );\n              const value = getOptionValue!(option);\n\n              return (\n                <React.Fragment key={`${typeof value}-${value}`}>\n                  {renderOption!({\n                    className: prefixClass(\"ChipsSelect__option\"),\n                    option,\n                    hovered: Boolean(hovered),\n                    children: label,\n                    selected: !!selected,\n                    getRootRef: (e) => {\n                      if (e) {\n                        return (chipsSelectOptions[index] = e);\n                      }\n                      return undefined;\n                    },\n                    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n                      onChangeStart?.(e, option);\n\n                      if (!e.defaultPrevented) {\n                        closeAfterSelect && setOpened(false);\n                        addOption(option);\n                        clearInput();\n                      }\n                    },\n                    onMouseEnter: () => setFocusedOptionIndex(index),\n                  })}\n                </React.Fragment>\n              );\n            })\n          )}\n        </CustomSelectDropdown>\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":"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"}

package/dist/cssm/components/CustomScrollView/CustomScrollView.js

@@ -6,6 +6,7 @@ import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useExternRef } from "../../hooks/useExternRef";
 import { useEventListener } from "../../hooks/useEventListener";
 import { useTrackerVisibility } from "./useTrackerVisibility";
+import { stopPropagation } from "../../lib/utils";
 import "./CustomScrollView.css";
 export var CustomScrollView = function CustomScrollView(_ref) {
   var className = _ref.className,
@@ -141,7 +142,8 @@ export var CustomScrollView = function CustomScrollView(_ref) {
     className: className
   }, createScopedElement("div", {
     vkuiClass: "CustomScrollView__barY",
-    ref: barY
+    ref: barY,
+    onClick: stopPropagation
   }, createScopedElement("div", {
     vkuiClass: classNames("CustomScrollView__trackerY", !trackerVisible && "CustomScrollView__trackerY--hidden"),
     onMouseEnter: autoHideScrollbar ? onTrackerMouseEnter : undefined,

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

@@ -1 +1 @@
-{"version":3,"file":"CustomScrollView.js","names":["React","useDOM","classNames","useIsomorphicLayoutEffect","useExternRef","useEventListener","useTrackerVisibility","CustomScrollView","className","children","externalBoxRef","boxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","document","window","ratio","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","add","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","unsubscribe","scroll","listeners","subscribe","el","forEach","l","remove","onDragStart"],"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DOMProps, useDOM } from \"../../lib/dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport {\n  TrackerOptionsProps,\n  useTrackerVisibility,\n} from \"./useTrackerVisibility\";\nimport \"./CustomScrollView.css\";\n\nexport interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {\n  windowResize?: boolean;\n  boxRef?: React.Ref<HTMLDivElement>;\n  className?: HTMLDivElement[\"className\"];\n  children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n  className,\n  children,\n  boxRef: externalBoxRef,\n  windowResize,\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay,\n}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\n\n  const ratio = React.useRef(NaN);\n  const lastTrackerTop = React.useRef(0);\n  const clientHeight = React.useRef(0);\n  const trackerHeight = React.useRef(0);\n  const scrollHeight = React.useRef(0);\n  const transformProp = React.useRef(\"\");\n  const startY = React.useRef(0);\n  const trackerTop = React.useRef(0);\n\n  const boxRef = useExternRef(externalBoxRef);\n\n  const barY = React.useRef<HTMLDivElement>(null);\n  const trackerY = React.useRef<HTMLDivElement>(null);\n\n  const setTrackerPosition = (scrollTop: number) => {\n    lastTrackerTop.current = scrollTop;\n    if (trackerY.current !== null) {\n      (trackerY.current.style as any)[\n        transformProp.current\n      ] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition(\n      (clientHeight.current - trackerHeight.current) * progress\n    );\n  };\n\n  const resize = () => {\n    if (!boxRef.current || !barY.current || !trackerY.current) {\n      return;\n    }\n    const localClientHeight = boxRef.current.clientHeight;\n    const localScrollHeight = boxRef.current.scrollHeight;\n    const localRatio = localClientHeight / localScrollHeight;\n    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n    ratio.current = localRatio;\n    clientHeight.current = localClientHeight;\n    scrollHeight.current = localScrollHeight;\n    trackerHeight.current = localTrackerHeight;\n\n    if (localRatio >= 1) {\n      barY.current.style.display = \"none\";\n    } else {\n      barY.current.style.display = \"\";\n      trackerY.current.style.height = `${localTrackerHeight}px`;\n      setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    }\n  };\n\n  const resizeHandler = useEventListener(\"resize\", resize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (windowResize && window) {\n      resizeHandler.add(window);\n    }\n  }, [windowResize, window]);\n\n  useIsomorphicLayoutEffect(() => {\n    let style = trackerY.current?.style;\n    let prop = \"\";\n    if (style !== undefined) {\n      if (\"transform\" in style) {\n        prop = \"transform\";\n      } else if (\"webkitTransform\" in style) {\n        prop = \"webkitTransform\";\n      }\n    }\n    transformProp.current = prop;\n  }, []);\n\n  useIsomorphicLayoutEffect(resize);\n\n  const setScrollPositionFromTracker = (trackerTop: number) => {\n    const progress =\n      trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop =\n        (scrollHeight.current - clientHeight.current) * progress;\n    }\n  };\n\n  const onMove = (e: MouseEvent) => {\n    e.preventDefault();\n    const diff = e.clientY - startY.current;\n    const position = Math.min(\n      Math.max(trackerTop.current + diff, 0),\n      clientHeight.current - trackerHeight.current\n    );\n\n    setScrollPositionFromTracker(position);\n  };\n\n  const {\n    trackerVisible,\n    onTargetScroll,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n  const onUp = (e: MouseEvent) => {\n    e.preventDefault();\n\n    if (autoHideScrollbar) {\n      onTrackerDragStop();\n    }\n\n    unsubscribe();\n  };\n\n  const scroll = () => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    if (autoHideScrollbar) {\n      onTargetScroll();\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\n  };\n\n  const listeners = [\n    useEventListener(\"mousemove\", onMove),\n    useEventListener(\"mouseup\", onUp),\n  ];\n\n  function subscribe(el: Document | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  const onDragStart = (e: React.MouseEvent) => {\n    e.preventDefault();\n    startY.current = e.clientY;\n    trackerTop.current = lastTrackerTop.current;\n\n    if (autoHideScrollbar) {\n      onTrackerDragStart();\n    }\n\n    subscribe(document);\n  };\n\n  return (\n    <div vkuiClass=\"CustomScrollView\" className={className}>\n      <div vkuiClass=\"CustomScrollView__barY\" ref={barY}>\n        <div\n          vkuiClass={classNames(\n            \"CustomScrollView__trackerY\",\n            !trackerVisible && `CustomScrollView__trackerY--hidden`\n          )}\n          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n\n      <div\n        vkuiClass=\"CustomScrollView__box\"\n        tabIndex={-1}\n        ref={boxRef}\n        onScroll={scroll}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"CustomScrollView.js","names":["React","useDOM","classNames","useIsomorphicLayoutEffect","useExternRef","useEventListener","useTrackerVisibility","stopPropagation","CustomScrollView","className","children","externalBoxRef","boxRef","windowResize","autoHideScrollbar","autoHideScrollbarDelay","document","window","ratio","useRef","NaN","lastTrackerTop","clientHeight","trackerHeight","scrollHeight","transformProp","startY","trackerTop","barY","trackerY","setTrackerPosition","scrollTop","current","style","setTrackerPositionFromScroll","progress","resize","localClientHeight","localScrollHeight","localRatio","localTrackerHeight","Math","max","display","height","resizeHandler","add","prop","undefined","setScrollPositionFromTracker","onMove","e","preventDefault","diff","clientY","position","min","trackerVisible","onTargetScroll","onTrackerDragStart","onTrackerDragStop","onTrackerMouseEnter","onTrackerMouseLeave","onUp","unsubscribe","scroll","listeners","subscribe","el","forEach","l","remove","onDragStart"],"sources":["../../../../src/components/CustomScrollView/CustomScrollView.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DOMProps, useDOM } from \"../../lib/dom\";\nimport { classNames } from \"../../lib/classNames\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport {\n  TrackerOptionsProps,\n  useTrackerVisibility,\n} from \"./useTrackerVisibility\";\nimport { stopPropagation } from \"../../lib/utils\";\nimport \"./CustomScrollView.css\";\n\nexport interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {\n  windowResize?: boolean;\n  boxRef?: React.Ref<HTMLDivElement>;\n  className?: HTMLDivElement[\"className\"];\n  children: React.ReactNode;\n}\n\nexport const CustomScrollView = ({\n  className,\n  children,\n  boxRef: externalBoxRef,\n  windowResize,\n  autoHideScrollbar = false,\n  autoHideScrollbarDelay,\n}: CustomScrollViewProps) => {\n  const { document, window } = useDOM();\n\n  const ratio = React.useRef(NaN);\n  const lastTrackerTop = React.useRef(0);\n  const clientHeight = React.useRef(0);\n  const trackerHeight = React.useRef(0);\n  const scrollHeight = React.useRef(0);\n  const transformProp = React.useRef(\"\");\n  const startY = React.useRef(0);\n  const trackerTop = React.useRef(0);\n\n  const boxRef = useExternRef(externalBoxRef);\n\n  const barY = React.useRef<HTMLDivElement>(null);\n  const trackerY = React.useRef<HTMLDivElement>(null);\n\n  const setTrackerPosition = (scrollTop: number) => {\n    lastTrackerTop.current = scrollTop;\n    if (trackerY.current !== null) {\n      (trackerY.current.style as any)[\n        transformProp.current\n      ] = `translate(0, ${scrollTop}px)`;\n    }\n  };\n\n  const setTrackerPositionFromScroll = (scrollTop: number) => {\n    const progress = scrollTop / (scrollHeight.current - clientHeight.current);\n    setTrackerPosition(\n      (clientHeight.current - trackerHeight.current) * progress\n    );\n  };\n\n  const resize = () => {\n    if (!boxRef.current || !barY.current || !trackerY.current) {\n      return;\n    }\n    const localClientHeight = boxRef.current.clientHeight;\n    const localScrollHeight = boxRef.current.scrollHeight;\n    const localRatio = localClientHeight / localScrollHeight;\n    const localTrackerHeight = Math.max(localClientHeight * localRatio, 40);\n\n    ratio.current = localRatio;\n    clientHeight.current = localClientHeight;\n    scrollHeight.current = localScrollHeight;\n    trackerHeight.current = localTrackerHeight;\n\n    if (localRatio >= 1) {\n      barY.current.style.display = \"none\";\n    } else {\n      barY.current.style.display = \"\";\n      trackerY.current.style.height = `${localTrackerHeight}px`;\n      setTrackerPositionFromScroll(boxRef.current.scrollTop);\n    }\n  };\n\n  const resizeHandler = useEventListener(\"resize\", resize);\n\n  useIsomorphicLayoutEffect(() => {\n    if (windowResize && window) {\n      resizeHandler.add(window);\n    }\n  }, [windowResize, window]);\n\n  useIsomorphicLayoutEffect(() => {\n    let style = trackerY.current?.style;\n    let prop = \"\";\n    if (style !== undefined) {\n      if (\"transform\" in style) {\n        prop = \"transform\";\n      } else if (\"webkitTransform\" in style) {\n        prop = \"webkitTransform\";\n      }\n    }\n    transformProp.current = prop;\n  }, []);\n\n  useIsomorphicLayoutEffect(resize);\n\n  const setScrollPositionFromTracker = (trackerTop: number) => {\n    const progress =\n      trackerTop / (clientHeight.current - trackerHeight.current);\n    if (boxRef.current !== null) {\n      boxRef.current.scrollTop =\n        (scrollHeight.current - clientHeight.current) * progress;\n    }\n  };\n\n  const onMove = (e: MouseEvent) => {\n    e.preventDefault();\n    const diff = e.clientY - startY.current;\n    const position = Math.min(\n      Math.max(trackerTop.current + diff, 0),\n      clientHeight.current - trackerHeight.current\n    );\n\n    setScrollPositionFromTracker(position);\n  };\n\n  const {\n    trackerVisible,\n    onTargetScroll,\n    onTrackerDragStart,\n    onTrackerDragStop,\n    onTrackerMouseEnter,\n    onTrackerMouseLeave,\n  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);\n\n  const onUp = (e: MouseEvent) => {\n    e.preventDefault();\n\n    if (autoHideScrollbar) {\n      onTrackerDragStop();\n    }\n\n    unsubscribe();\n  };\n\n  const scroll = () => {\n    if (ratio.current >= 1 || !boxRef.current) {\n      return;\n    }\n\n    if (autoHideScrollbar) {\n      onTargetScroll();\n    }\n\n    setTrackerPositionFromScroll(boxRef.current.scrollTop);\n  };\n\n  const listeners = [\n    useEventListener(\"mousemove\", onMove),\n    useEventListener(\"mouseup\", onUp),\n  ];\n\n  function subscribe(el: Document | undefined) {\n    if (el) {\n      listeners.forEach((l) => l.add(el));\n    }\n  }\n\n  function unsubscribe() {\n    listeners.forEach((l) => l.remove());\n  }\n\n  const onDragStart = (e: React.MouseEvent) => {\n    e.preventDefault();\n    startY.current = e.clientY;\n    trackerTop.current = lastTrackerTop.current;\n\n    if (autoHideScrollbar) {\n      onTrackerDragStart();\n    }\n\n    subscribe(document);\n  };\n\n  return (\n    <div vkuiClass=\"CustomScrollView\" className={className}>\n      <div\n        vkuiClass=\"CustomScrollView__barY\"\n        ref={barY}\n        onClick={stopPropagation}\n      >\n        <div\n          vkuiClass={classNames(\n            \"CustomScrollView__trackerY\",\n            !trackerVisible && `CustomScrollView__trackerY--hidden`\n          )}\n          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}\n          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}\n          ref={trackerY}\n          onMouseDown={onDragStart}\n        />\n      </div>\n\n      <div\n        vkuiClass=\"CustomScrollView__box\"\n        tabIndex={-1}\n        ref={boxRef}\n        onScroll={scroll}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/cssm/components/CustomSelect/CustomSelect.js

@@ -167,7 +167,10 @@ function CustomSelectComponent(props) {
     });
   }, [props.value]);
   useIsomorphicLayoutEffect(function () {
-    if (nativeSelectValue !== undefined) {
+    if (options.some(function (_ref2) {
+      var value = _ref2.value;
+      return nativeSelectValue === value;
+    })) {
       var _selectElRef$current;
       var _event = new Event("change", {
         bubbles: true
@@ -306,8 +309,8 @@ function CustomSelectComponent(props) {
     focusOptionByIndex(index);
   }, [focusOptionByIndex, focusedOptionIndex, options]);
   React.useEffect(function () {
-    var _ref2, _props$value4;
-    var value = (_ref2 = (_props$value4 = props.value) !== null && _props$value4 !== void 0 ? _props$value4 : nativeSelectValue) !== null && _ref2 !== void 0 ? _ref2 : props.defaultValue;
+    var _ref3, _props$value4;
+    var value = (_ref3 = (_props$value4 = props.value) !== null && _props$value4 !== void 0 ? _props$value4 : nativeSelectValue) !== null && _ref3 !== void 0 ? _ref3 : props.defaultValue;
     var options = searchable && inputValue !== undefined ? filter(optionsProp, inputValue, filterFn) : optionsProp;
     setOptions(options);
     setSelectedOptionIndex(findSelectedIndex(options, value));
@@ -479,6 +482,7 @@ function CustomSelectComponent(props) {
     onFocus: onFocus,
     onBlur: onBlur,
     vkuiClass: openedClassNames,
+    before: before,
     after: icon,
     selectType: selectType
   }), selected === null || selected === void 0 ? void 0 : selected.label), createScopedElement("select", {