@vkontakte/vkui 6.3.1 → 6.4.0

package/dist/cssm/components/FormField/FormField.js

@@ -19,9 +19,18 @@ const iconAlignClassNames = {
     start: styles['FormField__icon--align-start'],
     end: styles['FormField__icon--align-end']
 };
+const renderIcon = (icon, align, className)=>{
+    return /*#__PURE__*/ _jsx("div", {
+        className: styles['FormField__iconWrapper'],
+        children: /*#__PURE__*/ _jsx("span", {
+            className: classNames(iconAlignClassNames[align], className),
+            children: icon
+        })
+    });
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
- */ export const FormField = ({ Component = 'span', status = 'default', children, getRootRef, before, after, beforeAlign = 'center', afterAlign = 'center', disabled, mode = 'default', className, ...restProps })=>{
+ */ export const FormField = ({ Component = 'span', status = 'default', children, getRootRef, before, after, beforeAlign = 'center', afterAlign = 'center', disabled, mode = 'default', className, maxHeight, style, ...restProps })=>{
     const elRef = useExternRef(getRootRef);
     const { sizeY = 'none' } = useAdaptivity();
     const [hover, setHover] = React.useState(false);
@@ -41,18 +50,24 @@ const iconAlignClassNames = {
     return /*#__PURE__*/ _jsxs(Component, {
         ...restProps,
         ref: elRef,
+        style: maxHeight !== undefined ? {
+            ...style,
+            maxHeight
+        } : style,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         className: classNames(styles['FormField'], mode === 'default' && styles['FormField--mode-default'], status !== 'default' && stylesStatus[status], sizeY !== 'regular' && sizeYClassNames[sizeY], disabled && styles['FormField--disabled'], !disabled && hover && styles['FormField--hover'], focusVisibleClassNames, className),
         children: [
-            before && /*#__PURE__*/ _jsx("span", {
-                className: classNames(styles['FormField__before'], iconAlignClassNames[beforeAlign]),
-                children: before
-            }),
-            children,
-            after && /*#__PURE__*/ _jsx("span", {
-                className: classNames(styles['FormField__after'], iconAlignClassNames[afterAlign], 'vkuiInternalFormField__after'),
-                children: after
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles['FormField_scrollContainer'],
+                children: [
+                    before && renderIcon(before, beforeAlign, styles['FormField__before']),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles['FormField__content'],
+                        children: children
+                    }),
+                    after && renderIcon(after, afterAlign, classNames(styles['FormField__after'], 'vkuiInternalFormField__after'))
+                ]
             }),
             /*#__PURE__*/ _jsx("span", {
                 "aria-hidden": true,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  ['compact']: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n  error: styles['FormField--status-error'],\n  valid: styles['FormField--status-valid'],\n};\n\nconst iconAlignClassNames = {\n  center: undefined,\n  start: styles['FormField__icon--align-start'],\n  end: styles['FormField__icon--align-end'],\n};\n\nexport type FieldIconsAlign = 'start' | 'center' | 'end';\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Вертикальное выравнивание иконки слева\n   */\n  beforeAlign?: FieldIconsAlign;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  /**\n   * Вертикальное выравнивание иконки справа\n   */\n  afterAlign?: FieldIconsAlign;\n  /**\n   * Режим отображения.\n   *\n   * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n   * - `plain` — показывает только текст-подсказку.\n   */\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  beforeAlign = 'center',\n  afterAlign = 'center',\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps): React.ReactNode => {\n  const elRef = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const focusWithin = useFocusWithin(elRef);\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible: focusWithin,\n    mode: styles['FormField--focus-visible'],\n  });\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={elRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        focusVisibleClassNames,\n        className,\n      )}\n    >\n      {before && (\n        <span className={classNames(styles['FormField__before'], iconAlignClassNames[beforeAlign])}>\n          {before}\n        </span>\n      )}\n      {children}\n      {after && (\n        <span\n          className={classNames(\n            styles['FormField__after'],\n            iconAlignClassNames[afterAlign],\n            'vkuiInternalFormField__after',\n          )}\n        >\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusVisibleClassName","useFocusWithin","styles","sizeYClassNames","none","stylesStatus","error","valid","iconAlignClassNames","center","undefined","start","end","FormField","Component","status","children","getRootRef","before","after","beforeAlign","afterAlign","disabled","mode","className","restProps","elRef","sizeY","hover","setHover","useState","focusWithin","focusVisibleClassNames","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","span","aria-hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAAC,UAAU,EAAEA,MAAM,CAAC,2BAA2B;AACjD;AAEA,MAAMG,eAAe;IACnBC,OAAOJ,MAAM,CAAC,0BAA0B;IACxCK,OAAOL,MAAM,CAAC,0BAA0B;AAC1C;AAEA,MAAMM,sBAAsB;IAC1BC,QAAQC;IACRC,OAAOT,MAAM,CAAC,+BAA+B;IAC7CU,KAAKV,MAAM,CAAC,6BAA6B;AAC3C;AAiDA;;CAEC,GACD,OAAO,MAAMW,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,cAAc,QAAQ,EACtBC,aAAa,QAAQ,EACrBC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,QAAQ3B,aAAakB;IAC3B,MAAM,EAAEU,QAAQ,MAAM,EAAE,GAAG7B;IAC3B,MAAM,CAAC8B,OAAOC,SAAS,GAAGjC,MAAMkC,QAAQ,CAAC;IAEzC,MAAMC,cAAc9B,eAAeyB;IACnC,MAAMM,yBAAyBhC,yBAAyB;QACtDiC,cAAcF;QACdR,MAAMrB,MAAM,CAAC,2BAA2B;IAC1C;IAEA,MAAMgC,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,MAAMQ,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,qBACE,MAACf;QACE,GAAGW,SAAS;QACba,KAAKZ;QACLa,cAAcL;QACdM,cAAcH;QACdb,WAAW3B,WACTK,MAAM,CAAC,YAAY,EACnBqB,SAAS,aAAarB,MAAM,CAAC,0BAA0B,EACvDa,WAAW,aAAaV,YAAY,CAACU,OAAO,EAC5CY,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CL,YAAYpB,MAAM,CAAC,sBAAsB,EACzC,CAACoB,YAAYM,SAAS1B,MAAM,CAAC,mBAAmB,EAChD8B,wBACAR;;YAGDN,wBACC,KAACuB;gBAAKjB,WAAW3B,WAAWK,MAAM,CAAC,oBAAoB,EAAEM,mBAAmB,CAACY,YAAY;0BACtFF;;YAGJF;YACAG,uBACC,KAACsB;gBACCjB,WAAW3B,WACTK,MAAM,CAAC,mBAAmB,EAC1BM,mBAAmB,CAACa,WAAW,EAC/B;0BAGDF;;0BAGL,KAACsB;gBAAKC,aAAW;gBAAClB,WAAWtB,MAAM,CAAC,oBAAoB;;;;AAG9D,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  ['compact']: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n  error: styles['FormField--status-error'],\n  valid: styles['FormField--status-valid'],\n};\n\nconst iconAlignClassNames = {\n  center: undefined,\n  start: styles['FormField__icon--align-start'],\n  end: styles['FormField__icon--align-end'],\n};\n\nconst renderIcon = (icon: React.ReactNode, align: FieldIconsAlign, className: string) => {\n  return (\n    <div className={styles['FormField__iconWrapper']}>\n      <span className={classNames(iconAlignClassNames[align], className)}>{icon}</span>\n    </div>\n  );\n};\n\nexport type FieldIconsAlign = 'start' | 'center' | 'end';\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Вертикальное выравнивание иконки слева\n   */\n  beforeAlign?: FieldIconsAlign;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  /**\n   * Вертикальное выравнивание иконки справа\n   */\n  afterAlign?: FieldIconsAlign;\n  /**\n   * Режим отображения.\n   *\n   * - `default` — показывает фон, обводку и, при наличии, текст-подсказку.\n   * - `plain` — показывает только текст-подсказку.\n   */\n  mode?: 'default' | 'plain';\n  /**\n   * Максимальная высота поля\n   */\n  maxHeight?: number;\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  beforeAlign = 'center',\n  afterAlign = 'center',\n  disabled,\n  mode = 'default',\n  className,\n  maxHeight,\n  style,\n  ...restProps\n}: FormFieldOwnProps): React.ReactNode => {\n  const elRef = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const focusWithin = useFocusWithin(elRef);\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible: focusWithin,\n    mode: styles['FormField--focus-visible'],\n  });\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={elRef}\n      style={\n        maxHeight !== undefined\n          ? {\n              ...style,\n              maxHeight,\n            }\n          : style\n      }\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' && stylesStatus[status],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        focusVisibleClassNames,\n        className,\n      )}\n    >\n      <div className={styles['FormField_scrollContainer']}>\n        {before && renderIcon(before, beforeAlign, styles['FormField__before'])}\n        <div className={styles['FormField__content']}>{children}</div>\n        {after &&\n          renderIcon(\n            after,\n            afterAlign,\n            classNames(styles['FormField__after'], 'vkuiInternalFormField__after'),\n          )}\n      </div>\n      <span aria-hidden className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusVisibleClassName","useFocusWithin","styles","sizeYClassNames","none","stylesStatus","error","valid","iconAlignClassNames","center","undefined","start","end","renderIcon","icon","align","className","div","span","FormField","Component","status","children","getRootRef","before","after","beforeAlign","afterAlign","disabled","mode","maxHeight","style","restProps","elRef","sizeY","hover","setHover","useState","focusWithin","focusVisibleClassNames","focusVisible","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","aria-hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,cAAc,QAAQ,6BAA6B;AAE5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAAC,UAAU,EAAEA,MAAM,CAAC,2BAA2B;AACjD;AAEA,MAAMG,eAAe;IACnBC,OAAOJ,MAAM,CAAC,0BAA0B;IACxCK,OAAOL,MAAM,CAAC,0BAA0B;AAC1C;AAEA,MAAMM,sBAAsB;IAC1BC,QAAQC;IACRC,OAAOT,MAAM,CAAC,+BAA+B;IAC7CU,KAAKV,MAAM,CAAC,6BAA6B;AAC3C;AAEA,MAAMW,aAAa,CAACC,MAAuBC,OAAwBC;IACjE,qBACE,KAACC;QAAID,WAAWd,MAAM,CAAC,yBAAyB;kBAC9C,cAAA,KAACgB;YAAKF,WAAWnB,WAAWW,mBAAmB,CAACO,MAAM,EAAEC;sBAAaF;;;AAG3E;AAqDA;;CAEC,GACD,OAAO,MAAMK,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,cAAc,QAAQ,EACtBC,aAAa,QAAQ,EACrBC,QAAQ,EACRC,OAAO,SAAS,EAChBb,SAAS,EACTc,SAAS,EACTC,KAAK,EACL,GAAGC,WACe;IAClB,MAAMC,QAAQlC,aAAawB;IAC3B,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAGpC;IAC3B,MAAM,CAACqC,OAAOC,SAAS,GAAGxC,MAAMyC,QAAQ,CAAC;IAEzC,MAAMC,cAAcrC,eAAegC;IACnC,MAAMM,yBAAyBvC,yBAAyB;QACtDwC,cAAcF;QACdT,MAAM3B,MAAM,CAAC,2BAA2B;IAC1C;IAEA,MAAMuC,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,MAAMQ,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBP,SAAS;IACX;IAEA,qBACE,MAAChB;QACE,GAAGY,SAAS;QACba,KAAKZ;QACLF,OACED,cAAcpB,YACV;YACE,GAAGqB,KAAK;YACRD;QACF,IACAC;QAENe,cAAcL;QACdM,cAAcH;QACd5B,WAAWnB,WACTK,MAAM,CAAC,YAAY,EACnB2B,SAAS,aAAa3B,MAAM,CAAC,0BAA0B,EACvDmB,WAAW,aAAahB,YAAY,CAACgB,OAAO,EAC5Ca,UAAU,aAAa/B,eAAe,CAAC+B,MAAM,EAC7CN,YAAY1B,MAAM,CAAC,sBAAsB,EACzC,CAAC0B,YAAYO,SAASjC,MAAM,CAAC,mBAAmB,EAChDqC,wBACAvB;;0BAGF,MAACC;gBAAID,WAAWd,MAAM,CAAC,4BAA4B;;oBAChDsB,UAAUX,WAAWW,QAAQE,aAAaxB,MAAM,CAAC,oBAAoB;kCACtE,KAACe;wBAAID,WAAWd,MAAM,CAAC,qBAAqB;kCAAGoB;;oBAC9CG,SACCZ,WACEY,OACAE,YACA9B,WAAWK,MAAM,CAAC,mBAAmB,EAAE;;;0BAG7C,KAACgB;gBAAK8B,aAAW;gBAAChC,WAAWd,MAAM,CAAC,oBAAoB;;;;AAG9D,EAAE"}

package/dist/cssm/components/FormField/FormField.module.css

@@ -1,13 +1,29 @@
 .FormField {
   position: relative;
   display: flex;
-  align-items: center;
   box-sizing: border-box;
   min-block-size: var(--vkui--size_field_height--regular);
   font-family: var(--vkui--font_family_base);
   -webkit-tap-highlight-color: transparent;
   isolation: isolate;
   border-radius: var(--vkui--size_border_radius--regular);
+  inline-size: 100%;
+}
+
+.FormField_scrollContainer {
+  display: flex;
+  inline-size: 100%;
+  align-items: flex-start;
+  justify-content: flex-start;
+  overflow-y: auto;
+  min-block-size: inherit;
+}
+
+.FormField__content {
+  min-block-size: inherit;
+  display: flex;
+  flex-grow: 1;
+  min-inline-size: 0;
 }
 
 .FormField--sizeY-compact {
@@ -27,15 +43,22 @@
   z-index: var(--vkui_internal--z_index_form_field_element);
 }
 
+.FormField__iconWrapper {
+  flex-shrink: 0;
+  block-size: 100%;
+  display: flex;
+  position: -webkit-sticky;
+  position: sticky;
+  inset-block-start: 0;
+}
+
 .FormField__before,
 .FormField__after {
-  position: relative;
-  z-index: var(--vkui_internal--z_index_form_field_side);
   display: flex;
   align-items: center;
   align-content: center;
   justify-content: center;
-  flex-shrink: 0;
+  align-self: center;
   min-inline-size: var(--vkui--size_field_height--regular);
   block-size: 100%;
   color: var(--vkui--color_icon_secondary);

package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,gCAAgC,EAChC,mCAAmC,EACpC,MAAM,SAAS,CAAC;AAejB,MAAM,MAAM,qBAAqB,GAC7B,gCAAgC,GAChC,mCAAmC,CAAC;AA4DxC;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6B5D,CAAC"}
+{"version":3,"file":"ImageBaseOverlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,gCAAgC,EAChC,mCAAmC,EACpC,MAAM,SAAS,CAAC;AAejB,MAAM,MAAM,qBAAqB,GAC7B,gCAAgC,GAChC,mCAAmC,CAAC;AA2DxC;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA6B5D,CAAC"}

package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useKeyboard } from '../../../components/Clickable/useKeyboard';
 import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';
 import { useAppearance } from '../../../hooks/useAppearance';
 import { useExternRef } from '../../../hooks/useExternRef';
 import { useFocusVisible } from '../../../hooks/useFocusVisible';
 import { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';
+import { clickByKeyboardHandler } from '../../../lib/utils';
 import { ImageBaseContext } from '../context';
 import { validateOverlayIcon } from '../validators';
 import { useNonInteractiveOverlayProps } from './hooks';
@@ -29,7 +29,6 @@ const ImageBaseOverlayInteractive = ({ children, className, getRootRef, disableI
         focusVisible,
         mode: 'inside'
     });
-    const keyboardHandlers = useKeyboard();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx("div", {
@@ -38,8 +37,8 @@ const ImageBaseOverlayInteractive = ({ children, className, getRootRef, disableI
                 role: "button",
                 className: classNames(styles['ImageBaseOverlay--clickable'], (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'], focusVisibleClassNames, className),
                 ref: getRootRef,
+                onKeyDown: clickByKeyboardHandler,
                 ...focusEvents,
-                ...keyboardHandlers,
                 children: children
             }),
             process.env.NODE_ENV === 'development' && /*#__PURE__*/ _jsx(DevelopmentCheck, {

package/dist/cssm/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useKeyboard } from '../../../components/Clickable/useKeyboard';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { ImageBaseContext } from '../context';\nimport { validateOverlayIcon } from '../validators';\nimport { useNonInteractiveOverlayProps } from './hooks';\nimport type {\n  ImageBaseOverlayInteractiveProps,\n  ImageBaseOverlayNonInteractiveProps,\n} from './types';\nimport styles from './ImageBaseOverlay.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseOverlayInteractiveProps, 'children'>) {\n  const { size } = React.useContext(ImageBaseContext);\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return null;\n}\n\nexport type ImageBaseOverlayProps =\n  | ImageBaseOverlayInteractiveProps\n  | ImageBaseOverlayNonInteractiveProps;\n\nconst ImageBaseOverlayInteractive = ({\n  children,\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown,\n  ...restProps\n}: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });\n  const keyboardHandlers = useKeyboard();\n\n  return (\n    <>\n      <div\n        {...restProps}\n        tabIndex={0}\n        role=\"button\"\n        className={classNames(\n          styles['ImageBaseOverlay--clickable'],\n          (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'],\n          focusVisibleClassNames,\n          className,\n        )}\n        ref={getRootRef}\n        {...focusEvents}\n        {...keyboardHandlers}\n      >\n        {children}\n      </div>\n      {process.env.NODE_ENV === 'development' && <DevelopmentCheck>{children}</DevelopmentCheck>}\n    </>\n  );\n};\n\nconst ImageBaseOverlayNonInteractive = ({\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown: overlayShownProps,\n  ...restProps\n}: ImageBaseOverlayNonInteractiveProps & { overlayShown?: boolean }) => {\n  const rootRef = useExternRef(getRootRef);\n  const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);\n\n  return (\n    <div\n      {...restProps}\n      ref={rootRef}\n      className={classNames(\n        (overlayShown || overlayShownProps) && styles['ImageBaseOverlay--visible'],\n        className,\n      )}\n      onClick={onOverlayClick}\n    />\n  );\n};\n\n/**\n * Оверлей над картинкой.\n */\nexport const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  const commonClassNames = classNames(\n    styles['ImageBaseOverlay'],\n    theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n    theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n    className,\n  );\n\n  const commonProps = {\n    className: commonClassNames,\n    overlayShown: visibility === 'always',\n  };\n\n  // Не делаем деструктуризацию пропа, потому что Typescript не вывозит\n  if (restProps.disableInteractive) {\n    return <ImageBaseOverlayNonInteractive {...restProps} {...commonProps} />;\n  }\n\n  return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["React","classNames","useKeyboard","useAdaptivityHasPointer","useAppearance","useExternRef","useFocusVisible","useFocusVisibleClassName","ImageBaseContext","validateOverlayIcon","useNonInteractiveOverlayProps","styles","DevelopmentCheck","children","size","useContext","process","env","NODE_ENV","name","value","ImageBaseOverlayInteractive","className","getRootRef","disableInteractive","overlayShown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","keyboardHandlers","div","tabIndex","role","ref","ImageBaseOverlayNonInteractive","overlayShownProps","rootRef","shown","onClick","onOverlayClick","ImageBaseOverlay","theme","themeProp","visibility","visibilityProp","appearance","hasPointer","commonClassNames","commonProps","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useAppearance } from '../../../hooks/useAppearance';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { clickByKeyboardHandler } from '../../../lib/utils';\nimport { ImageBaseContext } from '../context';\nimport { validateOverlayIcon } from '../validators';\nimport { useNonInteractiveOverlayProps } from './hooks';\nimport type {\n  ImageBaseOverlayInteractiveProps,\n  ImageBaseOverlayNonInteractiveProps,\n} from './types';\nimport styles from './ImageBaseOverlay.module.css';\n\nfunction DevelopmentCheck({ children }: Pick<ImageBaseOverlayInteractiveProps, 'children'>) {\n  const { size } = React.useContext(ImageBaseContext);\n\n  if (process.env.NODE_ENV === 'development') {\n    if (children) {\n      validateOverlayIcon(size, { name: 'children', value: children });\n    }\n  }\n\n  return null;\n}\n\nexport type ImageBaseOverlayProps =\n  | ImageBaseOverlayInteractiveProps\n  | ImageBaseOverlayNonInteractiveProps;\n\nconst ImageBaseOverlayInteractive = ({\n  children,\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown,\n  ...restProps\n}: ImageBaseOverlayInteractiveProps & { overlayShown?: boolean }) => {\n  const { focusVisible, ...focusEvents } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({ focusVisible, mode: 'inside' });\n\n  return (\n    <>\n      <div\n        {...restProps}\n        tabIndex={0}\n        role=\"button\"\n        className={classNames(\n          styles['ImageBaseOverlay--clickable'],\n          (focusVisible || overlayShown) && styles['ImageBaseOverlay--visible'],\n          focusVisibleClassNames,\n          className,\n        )}\n        ref={getRootRef}\n        onKeyDown={clickByKeyboardHandler}\n        {...focusEvents}\n      >\n        {children}\n      </div>\n      {process.env.NODE_ENV === 'development' && <DevelopmentCheck>{children}</DevelopmentCheck>}\n    </>\n  );\n};\n\nconst ImageBaseOverlayNonInteractive = ({\n  className,\n  getRootRef,\n  disableInteractive,\n  overlayShown: overlayShownProps,\n  ...restProps\n}: ImageBaseOverlayNonInteractiveProps & { overlayShown?: boolean }) => {\n  const rootRef = useExternRef(getRootRef);\n  const { shown: overlayShown, onClick: onOverlayClick } = useNonInteractiveOverlayProps(rootRef);\n\n  return (\n    <div\n      {...restProps}\n      ref={rootRef}\n      className={classNames(\n        (overlayShown || overlayShownProps) && styles['ImageBaseOverlay--visible'],\n        className,\n      )}\n      onClick={onOverlayClick}\n    />\n  );\n};\n\n/**\n * Оверлей над картинкой.\n */\nexport const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({\n  className,\n  theme: themeProp,\n  visibility: visibilityProp,\n  ...restProps\n}: ImageBaseOverlayProps) => {\n  const appearance = useAppearance();\n  const hasPointer = useAdaptivityHasPointer();\n  const theme = themeProp ?? appearance;\n  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');\n\n  const commonClassNames = classNames(\n    styles['ImageBaseOverlay'],\n    theme === 'light' && styles['ImageBaseOverlay--theme-light'],\n    theme === 'dark' && styles['ImageBaseOverlay--theme-dark'],\n    className,\n  );\n\n  const commonProps = {\n    className: commonClassNames,\n    overlayShown: visibility === 'always',\n  };\n\n  // Не делаем деструктуризацию пропа, потому что Typescript не вывозит\n  if (restProps.disableInteractive) {\n    return <ImageBaseOverlayNonInteractive {...restProps} {...commonProps} />;\n  }\n\n  return <ImageBaseOverlayInteractive {...restProps} {...commonProps} />;\n};\n\nImageBaseOverlay.displayName = 'ImageBaseOverlay';\n"],"names":["React","classNames","useAdaptivityHasPointer","useAppearance","useExternRef","useFocusVisible","useFocusVisibleClassName","clickByKeyboardHandler","ImageBaseContext","validateOverlayIcon","useNonInteractiveOverlayProps","styles","DevelopmentCheck","children","size","useContext","process","env","NODE_ENV","name","value","ImageBaseOverlayInteractive","className","getRootRef","disableInteractive","overlayShown","restProps","focusVisible","focusEvents","focusVisibleClassNames","mode","div","tabIndex","role","ref","onKeyDown","ImageBaseOverlayNonInteractive","overlayShownProps","rootRef","shown","onClick","onOverlayClick","ImageBaseOverlay","theme","themeProp","visibility","visibilityProp","appearance","hasPointer","commonClassNames","commonProps","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,yCAAyC;AACjF,SAASC,aAAa,QAAQ,+BAA+B;AAC7D,SAASC,YAAY,QAAQ,8BAA8B;AAC3D,SAASC,eAAe,QAAQ,iCAAiC;AACjE,SAASC,wBAAwB,QAAQ,0CAA0C;AACnF,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,gBAAgB,QAAQ,aAAa;AAC9C,SAASC,mBAAmB,QAAQ,gBAAgB;AACpD,SAASC,6BAA6B,QAAQ,UAAU;AAKxD,OAAOC,YAAY,gCAAgC;AAEnD,SAASC,iBAAiB,EAAEC,QAAQ,EAAsD;IACxF,MAAM,EAAEC,IAAI,EAAE,GAAGd,MAAMe,UAAU,CAACP;IAElC,IAAIQ,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAIL,UAAU;YACZJ,oBAAoBK,MAAM;gBAAEK,MAAM;gBAAYC,OAAOP;YAAS;QAChE;IACF;IAEA,OAAO;AACT;AAMA,MAAMQ,8BAA8B,CAAC,EACnCR,QAAQ,EACRS,SAAS,EACTC,UAAU,EACVC,kBAAkB,EAClBC,YAAY,EACZ,GAAGC,WAC2D;IAC9D,MAAM,EAAEC,YAAY,EAAE,GAAGC,aAAa,GAAGvB;IACzC,MAAMwB,yBAAyBvB,yBAAyB;QAAEqB;QAAcG,MAAM;IAAS;IAEvF,qBACE;;0BACE,KAACC;gBACE,GAAGL,SAAS;gBACbM,UAAU;gBACVC,MAAK;gBACLX,WAAWrB,WACTU,MAAM,CAAC,8BAA8B,EACrC,AAACgB,CAAAA,gBAAgBF,YAAW,KAAMd,MAAM,CAAC,4BAA4B,EACrEkB,wBACAP;gBAEFY,KAAKX;gBACLY,WAAW5B;gBACV,GAAGqB,WAAW;0BAEdf;;YAEFG,QAAQC,GAAG,CAACC,QAAQ,KAAK,+BAAiB,KAACN;0BAAkBC;;;;AAGpE;AAEA,MAAMuB,iCAAiC,CAAC,EACtCd,SAAS,EACTC,UAAU,EACVC,kBAAkB,EAClBC,cAAcY,iBAAiB,EAC/B,GAAGX,WAC8D;IACjE,MAAMY,UAAUlC,aAAamB;IAC7B,MAAM,EAAEgB,OAAOd,YAAY,EAAEe,SAASC,cAAc,EAAE,GAAG/B,8BAA8B4B;IAEvF,qBACE,KAACP;QACE,GAAGL,SAAS;QACbQ,KAAKI;QACLhB,WAAWrB,WACT,AAACwB,CAAAA,gBAAgBY,iBAAgB,KAAM1B,MAAM,CAAC,4BAA4B,EAC1EW;QAEFkB,SAASC;;AAGf;AAEA;;CAEC,GACD,OAAO,MAAMC,mBAAoD,CAAC,EAChEpB,SAAS,EACTqB,OAAOC,SAAS,EAChBC,YAAYC,cAAc,EAC1B,GAAGpB,WACmB;IACtB,MAAMqB,aAAa5C;IACnB,MAAM6C,aAAa9C;IACnB,MAAMyC,QAAQC,aAAaG;IAC3B,MAAMF,aAAaC,kBAAmBE,CAAAA,aAAa,aAAa,QAAO;IAEvE,MAAMC,mBAAmBhD,WACvBU,MAAM,CAAC,mBAAmB,EAC1BgC,UAAU,WAAWhC,MAAM,CAAC,gCAAgC,EAC5DgC,UAAU,UAAUhC,MAAM,CAAC,+BAA+B,EAC1DW;IAGF,MAAM4B,cAAc;QAClB5B,WAAW2B;QACXxB,cAAcoB,eAAe;IAC/B;IAEA,qEAAqE;IACrE,IAAInB,UAAUF,kBAAkB,EAAE;QAChC,qBAAO,KAACY;YAAgC,GAAGV,SAAS;YAAG,GAAGwB,WAAW;;IACvE;IAEA,qBAAO,KAAC7B;QAA6B,GAAGK,SAAS;QAAG,GAAGwB,WAAW;;AACpE,EAAE;AAEFR,iBAAiBS,WAAW,GAAG"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, FormFieldProps {
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRef<HTMLInputElement>, HasRootRef<HTMLDivElement>, HasAlign, Omit<FormFieldProps, 'maxHeight'> {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Input

package/dist/cssm/components/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASnE,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,MAAM,CAAC,gBAAgB,CAAC,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,cAAc;CAAG;AAErB;;GAEG;AACH,eAAO,MAAM,KAAK,qGAYf,UAAU,KAAG,KAAK,CAAC,SA+BrB,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AASnE,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,MAAM,CAAC,gBAAgB,CAAC,EACxB,UAAU,CAAC,cAAc,CAAC,EAC1B,QAAQ,EACR,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC;CAAG;AAExC;;GAEG;AACH,eAAO,MAAM,KAAK,qGAYf,UAAU,KAAG,KAAK,CAAC,SA+BrB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  ['compact']: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    FormFieldProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n  type = 'text',\n  align = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align === 'right' && styles['Input--align-right'],\n        align === 'center' && styles['Input--align-center'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        before && styles['Input--hasBefore'],\n        after && styles['Input--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      mode={mode}\n      status={status}\n    >\n      <UnstyledTextField\n        {...restProps}\n        as=\"input\"\n        type={type}\n        className={styles['Input__el']}\n        getRootRef={getRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","FormField","UnstyledTextField","styles","sizeYClassNames","none","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","disabled","as"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAAC,UAAU,EAAEA,MAAM,CAAC,uBAAuB;AAC7C;AASA;;CAEC,GACD,OAAO,MAAMG,QAAQ,CAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJ,GAAGC,WACQ;IACX,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlB;IAE3B,qBACE,KAACC;QACCW,OAAOA;QACPF,WAAWX,WACTI,MAAM,CAAC,QAAQ,EACfK,UAAU,WAAWL,MAAM,CAAC,qBAAqB,EACjDK,UAAU,YAAYL,MAAM,CAAC,sBAAsB,EACnDe,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CL,UAAUV,MAAM,CAAC,mBAAmB,EACpCW,SAASX,MAAM,CAAC,kBAAkB,EAClCO;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPK,UAAUF,UAAUE,QAAQ;QAC5BH,MAAMA;QACND,QAAQA;kBAER,cAAA,KAACb;YACE,GAAGe,SAAS;YACbG,IAAG;YACHb,MAAMA;YACNG,WAAWP,MAAM,CAAC,YAAY;YAC9BQ,YAAYF;;;AAIpB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { UnstyledTextField } from '../UnstyledTextField/UnstyledTextField';\nimport styles from './Input.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Input--sizeY-none'],\n  ['compact']: styles['Input--sizeY-compact'],\n};\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Omit<FormFieldProps, 'maxHeight'> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Input\n */\nexport const Input = ({\n  type = 'text',\n  align = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  mode,\n  ...restProps\n}: InputProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['Input'],\n        align === 'right' && styles['Input--align-right'],\n        align === 'center' && styles['Input--align-center'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        before && styles['Input--hasBefore'],\n        after && styles['Input--hasAfter'],\n        className,\n      )}\n      getRootRef={getRootRef}\n      before={before}\n      after={after}\n      disabled={restProps.disabled}\n      mode={mode}\n      status={status}\n    >\n      <UnstyledTextField\n        {...restProps}\n        as=\"input\"\n        type={type}\n        className={styles['Input__el']}\n        getRootRef={getRef}\n      />\n    </FormField>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","FormField","UnstyledTextField","styles","sizeYClassNames","none","Input","type","align","getRef","className","getRootRef","style","before","after","status","mode","restProps","sizeY","disabled","as"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,iBAAiB,QAAQ,yCAAyC;AAC3E,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAAC,UAAU,EAAEA,MAAM,CAAC,uBAAuB;AAC7C;AASA;;CAEC,GACD,OAAO,MAAMG,QAAQ,CAAC,EACpBC,OAAO,MAAM,EACbC,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJ,GAAGC,WACQ;IACX,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGlB;IAE3B,qBACE,KAACC;QACCW,OAAOA;QACPF,WAAWX,WACTI,MAAM,CAAC,QAAQ,EACfK,UAAU,WAAWL,MAAM,CAAC,qBAAqB,EACjDK,UAAU,YAAYL,MAAM,CAAC,sBAAsB,EACnDe,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CL,UAAUV,MAAM,CAAC,mBAAmB,EACpCW,SAASX,MAAM,CAAC,kBAAkB,EAClCO;QAEFC,YAAYA;QACZE,QAAQA;QACRC,OAAOA;QACPK,UAAUF,UAAUE,QAAQ;QAC5BH,MAAMA;QACND,QAAQA;kBAER,cAAA,KAACb;YACE,GAAGe,SAAS;YACbG,IAAG;YACHb,MAAMA;YACNG,WAAWP,MAAM,CAAC,YAAY;YAC9BQ,YAAYF;;;AAIpB,EAAE"}

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

@@ -1,9 +1,28 @@
+import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 import { SpinnerProps } from '../Spinner/Spinner';
 export interface ScreenSpinnerProps extends SpinnerProps {
     state?: 'loading' | 'cancelable' | 'done' | 'error';
+    cancelLabel?: string;
 }
+export interface ScreenSpinnerContextProps {
+    state: NonNullable<ScreenSpinnerProps['state']>;
+}
+export declare const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps>;
+declare const ScreenSpinnerLoader: React.FC<SpinnerProps>;
+type ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {
+    cancelLabel?: ScreenSpinnerProps['cancelLabel'];
+};
+declare const ScreenSpinnerSwapIcon: React.FC<ScreenSpinnerSwapIconProps>;
+type ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> & Pick<ScreenSpinnerProps, 'state'>;
+declare const ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps>;
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */
-export declare const ScreenSpinner: ({ style, className, state, size, onClick, children, ...restProps }: ScreenSpinnerProps) => React.ReactNode;
+export declare const ScreenSpinner: React.FC<ScreenSpinnerProps> & {
+    Container: typeof ScreenSpinnerContainer;
+    Loader: typeof ScreenSpinnerLoader;
+    SwapIcon: typeof ScreenSpinnerSwapIcon;
+};
+export {};
 //# sourceMappingURL=ScreenSpinner.d.ts.map

package/dist/cssm/components/ScreenSpinner/ScreenSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAW,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAK3D,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;CACrD;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,uEAQvB,kBAAkB,KAAG,KAAK,CAAC,SA4C7B,CAAC"}
+{"version":3,"file":"ScreenSpinner.d.ts","sourceRoot":"","sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,OAAO,EAAW,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAK3D,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,KAAK,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,WAAW,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,OAAO,CAAC,yBAAyB,CAGtE,CAAC;AAQL,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAU/C,CAAC;AAIF,KAAK,0BAA0B,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAAG;IACzE,WAAW,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC,CAAC;CACjD,CAAC;AA2BF,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAqB/D,CAAC;AAIF,KAAK,2BAA2B,GAAG,yBAAyB,CAAC,eAAe,CAAC,GAC3E,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC;AAEpC,QAAA,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAejE,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,GAAG;IACzD,SAAS,EAAE,OAAO,sBAAsB,CAAC;IACzC,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,QAAQ,EAAE,OAAO,qBAAqB,CAAC;CAmBxC,CAAC"}

package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js

@@ -1,44 +1,112 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
 import { Icon24Cancel } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
+import { mergeCalls } from '../../lib/mergeCalls';
+import { clickByKeyboardHandler } from '../../lib/utils';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { Spinner } from '../Spinner/Spinner';
 import { Icon48CancelCircle } from './Icon48CancelCircle';
 import { Icon48DoneOutline } from './Icon48DoneOutline';
 import styles from './ScreenSpinner.module.css';
-/**
- * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
- */ export const ScreenSpinner = ({ style, className, state = 'loading', size = 'large', onClick, children = 'Пожалуйста, подождите...', ...restProps })=>{
-    const hideSpinner = state === 'done' || state === 'error';
+export const ScreenSpinnerContext = /*#__PURE__*/ React.createContext({
+    state: 'loading'
+});
+const stateClassNames = {
+    cancelable: styles['ScreenSpinner--state-cancelable'],
+    done: styles['ScreenSpinner--state-done'],
+    error: styles['ScreenSpinner--state-error']
+};
+const ScreenSpinnerLoader = ({ size = 'large', children = 'Пожалуйста, подождите...', ...restProps })=>{
+    return /*#__PURE__*/ _jsx(Spinner, {
+        className: styles['ScreenSpinner__spinner'],
+        size: size,
+        ...restProps,
+        children: children
+    });
+};
+ScreenSpinnerLoader.displayName = 'ScreenSpinner.Loader';
+const ScreenSpinnerCancelIcon = ({ onKeyDown, 'aria-label': ariaLabel = 'Отменить', ...restProps })=>{
+    const handlers = mergeCalls({
+        onKeyDown: clickByKeyboardHandler
+    }, {
+        onKeyDown
+    });
+    let clickableProps = {
+        ...handlers,
+        'tabIndex': 0,
+        'role': 'button',
+        'aria-label': ariaLabel
+    };
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        baseClassName: styles['ScreenSpinner__icon'],
+        ...clickableProps,
+        ...restProps,
+        children: /*#__PURE__*/ _jsx(Icon24Cancel, {})
+    });
+};
+const ScreenSpinnerSwapIcon = ({ cancelLabel, ...restProps })=>{
+    const { state } = React.useContext(ScreenSpinnerContext);
+    if (state === 'cancelable') {
+        return /*#__PURE__*/ _jsx(ScreenSpinnerCancelIcon, {
+            "aria-label": cancelLabel,
+            ...restProps
+        });
+    }
     const Icon = {
         loading: ()=>null,
-        cancelable: Icon24Cancel,
         done: Icon48DoneOutline,
         error: Icon48CancelCircle
     }[state];
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        baseClassName: styles['ScreenSpinner__icon'],
+        ...restProps,
+        children: /*#__PURE__*/ _jsx(Icon, {})
+    });
+};
+ScreenSpinnerSwapIcon.displayName = 'ScreenSpinner.SwapIcon';
+const ScreenSpinnerContainer = ({ state = 'loading', ...restProps })=>{
+    return /*#__PURE__*/ _jsx(ScreenSpinnerContext.Provider, {
+        value: {
+            state
+        },
+        children: /*#__PURE__*/ _jsx(RootComponent, {
+            baseClassName: classNames(styles['ScreenSpinner'], state !== 'loading' && stateClassNames[state]),
+            ...restProps
+        })
+    });
+};
+ScreenSpinnerContainer.displayName = 'ScreenSpinner.Container';
+/**
+ * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
+ */ export const ScreenSpinner = ({ style, className, state = 'loading', onClick, cancelLabel, ...restProps })=>{
     useScrollLock();
     return /*#__PURE__*/ _jsx(PopoutWrapper, {
-        noBackground: true,
-        className: classNames(styles['ScreenSpinner'], state === 'cancelable' && styles['ScreenSpinner--clickable'], className),
+        className: className,
         style: style,
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: styles['ScreenSpinner__container'],
-            onClick: onClick,
+        noBackground: true,
+        children: /*#__PURE__*/ _jsxs(ScreenSpinnerContainer, {
+            state: state,
             children: [
-                /*#__PURE__*/ _jsx(Spinner, {
-                    className: classNames(styles['ScreenSpinner__spinner'], hideSpinner && styles['ScreenSpinner__spinner--hidden']),
-                    size: size,
-                    ...restProps,
-                    children: children
+                /*#__PURE__*/ _jsx(ScreenSpinnerLoader, {
+                    ...restProps
                 }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: classNames(styles['ScreenSpinner__icon'], state === 'done' && styles['ScreenSpinner__icon--state-done']),
-                    children: /*#__PURE__*/ _jsx(Icon, {})
+                /*#__PURE__*/ _jsx(ScreenSpinnerSwapIcon, {
+                    onClick: onClick,
+                    cancelLabel: cancelLabel
                 })
             ]
         })
     });
 };
+ScreenSpinner.displayName = 'ScreenSpinner';
+ScreenSpinner.Container = ScreenSpinnerContainer;
+ScreenSpinner.Container.displayName = 'ScreenSpinner.Container';
+ScreenSpinner.Loader = ScreenSpinnerLoader;
+ScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';
+ScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;
+ScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';
 
 //# sourceMappingURL=ScreenSpinner.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner = ({\n  style,\n  className,\n  state = 'loading',\n  size = 'large',\n  onClick,\n  children = 'Пожалуйста, подождите...',\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  const hideSpinner = state === 'done' || state === 'error';\n\n  const Icon = {\n    loading: () => null,\n    cancelable: Icon24Cancel,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper\n      noBackground\n      className={classNames(\n        styles['ScreenSpinner'],\n        state === 'cancelable' && styles['ScreenSpinner--clickable'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['ScreenSpinner__container']} onClick={onClick}>\n        <Spinner\n          className={classNames(\n            styles['ScreenSpinner__spinner'],\n            hideSpinner && styles['ScreenSpinner__spinner--hidden'],\n          )}\n          size={size}\n          {...restProps}\n        >\n          {children}\n        </Spinner>\n        <div\n          className={classNames(\n            styles['ScreenSpinner__icon'],\n            state === 'done' && styles['ScreenSpinner__icon--state-done'],\n          )}\n        >\n          <Icon />\n        </div>\n      </div>\n    </PopoutWrapper>\n  );\n};\n"],"names":["Icon24Cancel","classNames","useScrollLock","PopoutWrapper","Spinner","Icon48CancelCircle","Icon48DoneOutline","styles","ScreenSpinner","style","className","state","size","onClick","children","restProps","hideSpinner","Icon","loading","cancelable","done","error","noBackground","div"],"mappings":";AAAA,SAASA,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,OAAO,QAAsB,qBAAqB;AAC3D,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,OAAOC,YAAY,6BAA6B;AAMhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,OAAO,EACdC,OAAO,EACPC,WAAW,0BAA0B,EACrC,GAAGC,WACgB;IACnB,MAAMC,cAAcL,UAAU,UAAUA,UAAU;IAElD,MAAMM,OAAO;QACXC,SAAS,IAAM;QACfC,YAAYnB;QACZoB,MAAMd;QACNe,OAAOhB;IACT,CAAC,CAACM,MAAM;IAERT;IAEA,qBACE,KAACC;QACCmB,YAAY;QACZZ,WAAWT,WACTM,MAAM,CAAC,gBAAgB,EACvBI,UAAU,gBAAgBJ,MAAM,CAAC,2BAA2B,EAC5DG;QAEFD,OAAOA;kBAEP,cAAA,MAACc;YAAIb,WAAWH,MAAM,CAAC,2BAA2B;YAAEM,SAASA;;8BAC3D,KAACT;oBACCM,WAAWT,WACTM,MAAM,CAAC,yBAAyB,EAChCS,eAAeT,MAAM,CAAC,iCAAiC;oBAEzDK,MAAMA;oBACL,GAAGG,SAAS;8BAEZD;;8BAEH,KAACS;oBACCb,WAAWT,WACTM,MAAM,CAAC,sBAAsB,EAC7BI,UAAU,UAAUJ,MAAM,CAAC,kCAAkC;8BAG/D,cAAA,KAACU;;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeCalls } from '../../lib/mergeCalls';\nimport { clickByKeyboardHandler } from '../../lib/utils';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\nimport { Icon48CancelCircle } from './Icon48CancelCircle';\nimport { Icon48DoneOutline } from './Icon48DoneOutline';\nimport styles from './ScreenSpinner.module.css';\n\nexport interface ScreenSpinnerProps extends SpinnerProps {\n  state?: 'loading' | 'cancelable' | 'done' | 'error';\n  cancelLabel?: string;\n}\n\nexport interface ScreenSpinnerContextProps {\n  state: NonNullable<ScreenSpinnerProps['state']>;\n}\n\nexport const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =\n  React.createContext<ScreenSpinnerContextProps>({\n    state: 'loading',\n  });\n\nconst stateClassNames = {\n  cancelable: styles['ScreenSpinner--state-cancelable'],\n  done: styles['ScreenSpinner--state-done'],\n  error: styles['ScreenSpinner--state-error'],\n};\n\nconst ScreenSpinnerLoader: React.FC<SpinnerProps> = ({\n  size = 'large',\n  children = 'Пожалуйста, подождите...',\n  ...restProps\n}: SpinnerProps) => {\n  return (\n    <Spinner className={styles['ScreenSpinner__spinner']} size={size} {...restProps}>\n      {children}\n    </Spinner>\n  );\n};\n\nScreenSpinnerLoader.displayName = 'ScreenSpinner.Loader';\n\ntype ScreenSpinnerSwapIconProps = HTMLAttributesWithRootRef<HTMLElement> & {\n  cancelLabel?: ScreenSpinnerProps['cancelLabel'];\n};\n\nconst ScreenSpinnerCancelIcon: React.FC<ScreenSpinnerSwapIconProps> = ({\n  onKeyDown,\n  'aria-label': ariaLabel = 'Отменить',\n  ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n  const handlers = mergeCalls(\n    { onKeyDown: clickByKeyboardHandler },\n    {\n      onKeyDown,\n    },\n  );\n  let clickableProps: React.HTMLAttributes<HTMLSpanElement> = {\n    ...handlers,\n    'tabIndex': 0,\n    'role': 'button',\n    'aria-label': ariaLabel,\n  };\n\n  return (\n    <RootComponent baseClassName={styles['ScreenSpinner__icon']} {...clickableProps} {...restProps}>\n      <Icon24Cancel />\n    </RootComponent>\n  );\n};\n\nconst ScreenSpinnerSwapIcon: React.FC<ScreenSpinnerSwapIconProps> = ({\n  cancelLabel,\n  ...restProps\n}: ScreenSpinnerSwapIconProps) => {\n  const { state } = React.useContext(ScreenSpinnerContext);\n\n  if (state === 'cancelable') {\n    return <ScreenSpinnerCancelIcon aria-label={cancelLabel} {...restProps} />;\n  }\n\n  const Icon = {\n    loading: () => null,\n    done: Icon48DoneOutline,\n    error: Icon48CancelCircle,\n  }[state];\n\n  return (\n    <RootComponent baseClassName={styles['ScreenSpinner__icon']} {...restProps}>\n      <Icon />\n    </RootComponent>\n  );\n};\n\nScreenSpinnerSwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n\ntype ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> &\n  Pick<ScreenSpinnerProps, 'state'>;\n\nconst ScreenSpinnerContainer: React.FC<ScreenSpinnerContainerProps> = ({\n  state = 'loading',\n  ...restProps\n}: ScreenSpinnerContainerProps) => {\n  return (\n    <ScreenSpinnerContext.Provider value={{ state }}>\n      <RootComponent\n        baseClassName={classNames(\n          styles['ScreenSpinner'],\n          state !== 'loading' && stateClassNames[state],\n        )}\n        {...restProps}\n      />\n    </ScreenSpinnerContext.Provider>\n  );\n};\n\nScreenSpinnerContainer.displayName = 'ScreenSpinner.Container';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} style={style} noBackground>\n      <ScreenSpinnerContainer state={state}>\n        <ScreenSpinnerLoader {...restProps} />\n        <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n      </ScreenSpinnerContainer>\n    </PopoutWrapper>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","Icon24Cancel","classNames","mergeCalls","clickByKeyboardHandler","useScrollLock","PopoutWrapper","RootComponent","Spinner","Icon48CancelCircle","Icon48DoneOutline","styles","ScreenSpinnerContext","createContext","state","stateClassNames","cancelable","done","error","ScreenSpinnerLoader","size","children","restProps","className","displayName","ScreenSpinnerCancelIcon","onKeyDown","ariaLabel","handlers","clickableProps","baseClassName","ScreenSpinnerSwapIcon","cancelLabel","useContext","aria-label","Icon","loading","ScreenSpinnerContainer","Provider","value","ScreenSpinner","style","onClick","noBackground","Container","Loader","SwapIcon"],"mappings":"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"}

package/dist/cssm/components/ScreenSpinner/ScreenSpinner.module.css

@@ -1,30 +1,24 @@
 .ScreenSpinner {
+  position: relative;
+  inline-size: 88px;
+  block-size: 88px;
+  background: var(--vkui--color_background_contrast_themed);
+  box-shadow: var(--vkui--elevation4);
+  border-radius: var(--vkui--size_border_radius--regular);
+  color: var(--vkui--color_icon_medium);
   animation: screen-spinner-intro 0.3s ease;
 }
 
-.ScreenSpinner--clickable {
-  cursor: pointer;
-}
-
 .ScreenSpinner__spinner {
   opacity: 1;
   transition: opacity 0.1s ease;
 }
 
-.ScreenSpinner__spinner--hidden {
+.ScreenSpinner--state-done .ScreenSpinner__spinner,
+.ScreenSpinner--state-error .ScreenSpinner__spinner {
   opacity: 0;
 }
 
-.ScreenSpinner__container {
-  position: relative;
-  inline-size: 88px;
-  block-size: 88px;
-  background: var(--vkui--color_background_contrast_themed);
-  box-shadow: var(--vkui--elevation4);
-  border-radius: var(--vkui--size_border_radius--regular);
-  color: var(--vkui--color_icon_medium);
-}
-
 .ScreenSpinner__icon {
   position: absolute;
   inset-block-start: 0;
@@ -35,6 +29,10 @@
   justify-content: center;
 }
 
+.ScreenSpinner--state-cancelable .ScreenSpinner__icon {
+  cursor: pointer;
+}
+
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .ScreenSpinner__icon :global(.vkuiIcon) {
@@ -43,7 +41,7 @@
 
 /* stylelint-disable-next-line selector-max-type, selector-pseudo-class-disallowed-list */
 
-.ScreenSpinner__icon--state-done :global(.vkuiIcon) path {
+.ScreenSpinner--state-done :global(.vkuiIcon) path {
   stroke-dasharray: 50;
   stroke-dashoffset: 50;
   animation: screen-spinner-icon-done 0.6s 0.3s var(--vkui--animation_easing_platform) forwards;

package/dist/cssm/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,qCAI/D,WAAW,CAAC,OAAO,CAAC,KAAG,KAAK,CAAC,SAyD/B,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,OAAO,SAAS,2BAA2B,qCAI/D,WAAW,CAAC,OAAO,CAAC,KAAG,KAAK,CAAC,SA0D/B,CAAC"}

package/dist/cssm/components/Select/Select.js

@@ -7,7 +7,7 @@ import { NativeSelect } from '../NativeSelect/NativeSelect';
 /**
  * @see https://vkcom.github.io/VKUI/#/Select
  */ export const Select = ({ children, className, ...props })=>{
-    const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, autoHideScrollbar, autoHideScrollbarDelay, labelTextTestId, nativeSelectTestId, after, mode, getSelectInputRef, overscrollBehavior, beforeAlign, afterAlign, ...restProps } = props;
+    const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, autoHideScrollbar, autoHideScrollbarDelay, labelTextTestId, nativeSelectTestId, after, mode, maxHeight, getSelectInputRef, overscrollBehavior, beforeAlign, afterAlign, ...restProps } = props;
     const { deviceType } = useAdaptivityConditionalRender();
     const nativeProps = restProps;
     return /*#__PURE__*/ _jsxs(React.Fragment, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  className,\n  ...props\n}: SelectProps<OptionT>): React.ReactNode => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    getSelectInputRef,\n    overscrollBehavior,\n    beforeAlign,\n    afterAlign,\n    ...restProps\n  } = props;\n\n  const { deviceType } = useAdaptivityConditionalRender();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {deviceType.desktop && (\n        <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n      )}\n      {deviceType.mobile && (\n        <NativeSelect\n          className={classNames(className, deviceType.mobile.className)}\n          {...nativeProps}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","getSelectInputRef","overscrollBehavior","beforeAlign","afterAlign","restProps","deviceType","nativeProps","Fragment","desktop","mobile","map","label","value","option"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS,CAA8C,EAClEC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACkB;IACrB,MAAM,EACJC,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EACJC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,UAAU,EACV,GAAGC,WACJ,GAAG9B;IAEJ,MAAM,EAAE+B,UAAU,EAAE,GAAGrC;IAEvB,MAAMsC,cAAyEF;IAE/E,qBACE,MAACtC,MAAMyC,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,KAACvC;gBAAaI,WAAWN,WAAWM,WAAWgC,WAAWG,OAAO,CAACnC,SAAS;gBAAI,GAAGC,KAAK;;YAExF+B,WAAWI,MAAM,kBAChB,KAACvC;gBACCG,WAAWN,WAAWM,WAAWgC,WAAWI,MAAM,CAACpC,SAAS;gBAC3D,GAAGiC,WAAW;0BAEd/B,QAAQmC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n  CustomSelect,\n  type CustomSelectOptionInterface,\n  type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n  children,\n  className,\n  ...props\n}: SelectProps<OptionT>): React.ReactNode => {\n  const {\n    options = [],\n    searchable,\n    emptyText,\n    onInputChange,\n    filterFn,\n    popupDirection,\n    renderOption,\n    renderDropdown,\n    fetching,\n    onClose,\n    onOpen,\n    icon,\n    ClearButton,\n    allowClearButton,\n    clearButtonTestId,\n    dropdownOffsetDistance,\n    dropdownAutoWidth,\n    forceDropdownPortal,\n    noMaxHeight,\n    autoHideScrollbar,\n    autoHideScrollbarDelay,\n    labelTextTestId,\n    nativeSelectTestId,\n    after,\n    mode,\n    maxHeight,\n    getSelectInputRef,\n    overscrollBehavior,\n    beforeAlign,\n    afterAlign,\n    ...restProps\n  } = props;\n\n  const { deviceType } = useAdaptivityConditionalRender();\n\n  const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n  return (\n    <React.Fragment>\n      {deviceType.desktop && (\n        <CustomSelect className={classNames(className, deviceType.desktop.className)} {...props} />\n      )}\n      {deviceType.mobile && (\n        <NativeSelect\n          className={classNames(className, deviceType.mobile.className)}\n          {...nativeProps}\n        >\n          {options.map(({ label, value }) => (\n            <option value={value} key={`${value}`}>\n              {label}\n            </option>\n          ))}\n        </NativeSelect>\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useAdaptivityConditionalRender","CustomSelect","NativeSelect","Select","children","className","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","maxHeight","getSelectInputRef","overscrollBehavior","beforeAlign","afterAlign","restProps","deviceType","nativeProps","Fragment","desktop","mobile","map","label","value","option"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SACEC,YAAY,QAGP,+BAA+B;AACtC,SAASC,YAAY,QAAgC,+BAA+B;AAGpF;;CAEC,GACD,OAAO,MAAMC,SAAS,CAA8C,EAClEC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACkB;IACrB,MAAM,EACJC,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EACJC,SAAS,EACTC,iBAAiB,EACjBC,kBAAkB,EAClBC,WAAW,EACXC,UAAU,EACV,GAAGC,WACJ,GAAG/B;IAEJ,MAAM,EAAEgC,UAAU,EAAE,GAAGtC;IAEvB,MAAMuC,cAAyEF;IAE/E,qBACE,MAACvC,MAAM0C,QAAQ;;YACZF,WAAWG,OAAO,kBACjB,KAACxC;gBAAaI,WAAWN,WAAWM,WAAWiC,WAAWG,OAAO,CAACpC,SAAS;gBAAI,GAAGC,KAAK;;YAExFgC,WAAWI,MAAM,kBAChB,KAACxC;gBACCG,WAAWN,WAAWM,WAAWiC,WAAWI,MAAM,CAACrC,SAAS;gBAC3D,GAAGkC,WAAW;0BAEdhC,QAAQoC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,KAACC;wBAAOD,OAAOA;kCACZD;uBADwB,CAAC,EAAEC,MAAM,CAAC;;;;AAQjD,EAAE"}

package/dist/cssm/components/Select/Select.module.css

@@ -23,6 +23,7 @@
 }
 
 .Select__container {
+  align-self: center;
   flex-grow: 1;
   flex-shrink: 1;
   padding-inline: 12px 0;

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

@@ -9,8 +9,10 @@ export interface SnackbarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
      * > Note: в мобильном режиме:
      * > - `"top-start"`/`"top-end"` перебивается на `"top"`, чтобы поведение было схожим с нативными
      * >   уведомлениями;
-     * > - `"bottom"`/`"bottom-end"` перебивается на "bottom-start", чтобы избежать вызова системных
+     * > - `"bottom"` перебивается на `"bottom-start"`, чтобы избежать вызова системных
      * >   функций, таких как **Pull To Refresh** и **Режим управления одной рукой**.
+     * > - `"bottom-start"`/`"bottom-end"` закрываются смахиванием в любое из направлений
+     * >   по горизонтальной оси.
      */
     placement?: SnackbarPlacement;
     /**

package/dist/cssm/components/Snackbar/Snackbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA2B5D,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAC7D,UAAU;IACZ;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,EAAE,OAAO,KAAK,CAAA;CAqNrE,CAAC"}
+{"version":3,"file":"Snackbar.d.ts","sourceRoot":"","sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGxD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAa,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA2B5D,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,EAC7D,UAAU;IACZ;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAAE,KAAK,EAAE,OAAO,KAAK,CAAA;CAgOrE,CAAC"}