@vkontakte/vkui 5.6.2 → 5.7.1

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

@@ -37,7 +37,7 @@
 
 .Alert__content {
   position: relative;
-  padding: 24px 24px 20px;
+  padding: 24px 24px 16px;
 }
 
 .Alert__action {
@@ -49,7 +49,7 @@
   display: flex;
   max-width: 100%;
   position: relative;
-  padding: 0 16px 16px;
+  padding: 0 12px 12px;
 }
 
 .Alert__header {
@@ -60,30 +60,36 @@
   color: var(--vkui--color_text_secondary);
 }
 
-.Alert--h .Alert__actions {
+.Alert__actions--direction-horizontal {
   justify-content: flex-end;
 }
 
-.Alert--h .Alert__button {
-  margin-left: 8px;
-}
-
-.Alert--v .Alert__actions {
+.Alert__actions--direction-vertical {
   flex-direction: column;
   align-items: flex-end;
 }
 
-.Alert--v .Alert__button {
-  margin-top: 4px;
-  margin-bottom: 4px;
+/* stylelint-disable @project-tools/stylelint-atomic */
+
+.Alert__actions > * {
+  margin: 4px;
+}
+
+/* stylelint-enable @project-tools/stylelint-atomic */
+
+.Alert__actions--align-left {
+  justify-content: flex-start;
+  align-items: flex-start;
 }
 
-.Alert--v .Alert__button:first-child {
-  margin-top: 0;
+.Alert__actions--align-center {
+  justify-content: center;
+  align-items: center;
 }
 
-.Alert--v .Alert__button:last-child {
-  margin-bottom: 0;
+.Alert__actions--align-right {
+  justify-content: flex-end;
+  align-items: flex-end;
 }
 
 /**
@@ -132,7 +138,7 @@
   padding: initial;
 }
 
-.Alert--ios.Alert--v .Alert__actions {
+.Alert--ios .Alert__actions--direction-vertical {
   flex-direction: column;
   align-items: initial;
 }
@@ -161,7 +167,7 @@
   background: var(--vkui--color_separator_primary_alpha);
 }
 
-.Alert--ios.Alert--h .Alert__action::after {
+.Alert--ios .Alert__actions--direction-horizontal .Alert__action::after {
   top: 0;
   right: 0;
   width: 1px;
@@ -169,25 +175,25 @@
   transform-origin: right center;
 }
 
-.Alert--ios.Alert--h .Alert__action:last-child::after {
+.Alert--ios .Alert__actions--direction-horizontal .Alert__action:last-child::after {
   content: none;
 }
 
-.Alert--ios.Alert--h .Alert__action {
+.Alert--ios .Alert__actions--direction-horizontal .Alert__action {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: 0;
 }
 
-.Alert--ios.Alert--h .Alert__action:first-child {
+.Alert--ios .Alert__actions--direction-horizontal .Alert__action:first-child {
   border-bottom-left-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
-.Alert--ios.Alert--h .Alert__action:last-child {
+.Alert--ios .Alert__actions--direction-horizontal .Alert__action:last-child {
   border-bottom-right-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
-.Alert--ios.Alert--v .Alert__action::after {
+.Alert--ios .Alert__actions--direction-vertical .Alert__action::after {
   left: 0;
   bottom: 0;
   width: 100%;
@@ -195,32 +201,32 @@
   transform-origin: center bottom;
 }
 
-.Alert--ios.Alert--v .Alert__action:last-child::after {
+.Alert--ios .Alert__actions--direction-vertical .Alert__action:last-child::after {
   content: none;
 }
 
-.Alert--ios.Alert--v .Alert__action:last-child {
+.Alert--ios .Alert__actions--direction-vertical .Alert__action:last-child {
   border-radius: 0 0 12px 12px;
 }
 
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
   .Alert--ios .Alert__content::after,
-  .Alert--ios.Alert--v .Alert__action::after {
+  .Alert--ios .Alert__actions--direction-vertical .Alert__action::after {
     transform: scaleY(0.5);
   }
 
-  .Alert--ios.Alert--h .Alert__action::after {
+  .Alert--ios .Alert__actions--direction-horizontal .Alert__action::after {
     transform: scaleX(0.5);
   }
 }
 
 @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
   .Alert--ios .Alert__content::after,
-  .Alert--ios.Alert--v .Alert__action::after {
+  .Alert--ios .Alert__actions--direction-vertical .Alert__action::after {
     transform: scaleY(0.33);
   }
 
-  .Alert--ios.Alert--h .Alert__action::after {
+  .Alert--ios .Alert__actions--direction-horizontal .Alert__action::after {
     transform: scaleX(0.33);
   }
 }
@@ -243,11 +249,11 @@
 }
 
 .Alert--vkcom .Alert__content {
-  padding: 24px;
+  padding-bottom: 20px;
 }
 
 .Alert--vkcom .Alert__actions {
-  padding: 0 24px 16px;
+  padding: 0 20px 12px;
 }
 
 .Alert--vkcom .Alert__button {

package/dist/cssm/components/Alert/AlertAction.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AnchorHTMLAttributesOnly } from '../../types';
+import { AlertActionInterface } from './Alert';
+export interface AlertActionProps extends Pick<AlertActionInterface, 'Component' | 'mode'>, AnchorHTMLAttributesOnly {
+    children: string;
+    onClick: React.MouseEventHandler<HTMLElement>;
+}
+export declare const AlertAction: (props: AlertActionProps) => React.JSX.Element;

package/dist/cssm/components/Alert/AlertAction.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { Button } from '../Button/Button';
+import { Tappable } from '../Tappable/Tappable';
+import styles from './Alert.module.css';
+const AlertActionIos = ({ mode, ...restProps })=>{
+    return /*#__PURE__*/ React.createElement(Tappable, {
+        Component: restProps.href ? 'a' : 'button',
+        className: classNames(styles['Alert__action'], mode === 'destructive' && styles['Alert__action--mode-destructive'], mode === 'cancel' && styles['Alert__action--mode-cancel']),
+        ...restProps
+    });
+};
+const AlertActionBase = ({ mode, ...restProps })=>{
+    const platform = usePlatform();
+    let buttonMode = 'tertiary';
+    if (platform === Platform.VKCOM) {
+        buttonMode = mode === 'cancel' ? 'secondary' : 'primary';
+    }
+    return /*#__PURE__*/ React.createElement(Button, {
+        className: classNames(styles['Alert__button'], mode === 'cancel' && styles['Alert__button--mode-cancel']),
+        mode: buttonMode,
+        size: "m",
+        ...restProps
+    });
+};
+export const AlertAction = (props)=>{
+    const platform = usePlatform();
+    if (platform === Platform.IOS) {
+        return /*#__PURE__*/ React.createElement(AlertActionIos, props);
+    }
+    return /*#__PURE__*/ React.createElement(AlertActionBase, props);
+};
+
+//# sourceMappingURL=AlertAction.js.map

package/dist/cssm/components/Alert/AlertAction.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Alert/AlertAction.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { AnchorHTMLAttributesOnly } from '../../types';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { Tappable } from '../Tappable/Tappable';\nimport { AlertActionInterface } from './Alert';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionProps\n  extends Pick<AlertActionInterface, 'Component' | 'mode'>,\n    AnchorHTMLAttributesOnly {\n  children: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n}\n\nconst AlertActionIos = ({ mode, ...restProps }: AlertActionProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      className={classNames(\n        styles['Alert__action'],\n        mode === 'destructive' && styles['Alert__action--mode-destructive'],\n        mode === 'cancel' && styles['Alert__action--mode-cancel'],\n      )}\n      {...restProps}\n    />\n  );\n};\n\nconst AlertActionBase = ({ mode, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n\n  let buttonMode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    buttonMode = mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={buttonMode}\n      size=\"m\"\n      {...restProps}\n    />\n  );\n};\n\nexport const AlertAction = (props: AlertActionProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return <AlertActionIos {...props} />;\n  }\n\n  return <AlertActionBase {...props} />;\n};\n"],"names":["React","classNames","usePlatform","Platform","Button","Tappable","styles","AlertActionIos","mode","restProps","Component","href","className","AlertActionBase","platform","buttonMode","VKCOM","size","AlertAction","props","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,MAAM,QAAqB,mBAAmB;AACvD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,OAAOC,YAAY,qBAAqB;AASxC,MAAMC,iBAAiB,CAAC,EAAEC,IAAI,EAAE,GAAGC,WAA6B;IAC9D,qBACE,oBAACJ;QACCK,WAAWD,UAAUE,IAAI,GAAG,MAAM;QAClCC,WAAWX,WACTK,MAAM,CAAC,gBAAgB,EACvBE,SAAS,iBAAiBF,MAAM,CAAC,kCAAkC,EACnEE,SAAS,YAAYF,MAAM,CAAC,6BAA6B;QAE1D,GAAGG,SAAS;;AAGnB;AAEA,MAAMI,kBAAkB,CAAC,EAAEL,IAAI,EAAE,GAAGC,WAA6B;IAC/D,MAAMK,WAAWZ;IAEjB,IAAIa,aAAkC;IAEtC,IAAID,aAAaX,SAASa,KAAK,EAAE;QAC/BD,aAAaP,SAAS,WAAW,cAAc;IACjD;IAEA,qBACE,oBAACJ;QACCQ,WAAWX,WACTK,MAAM,CAAC,gBAAgB,EACvBE,SAAS,YAAYF,MAAM,CAAC,6BAA6B;QAE3DE,MAAMO;QACNE,MAAK;QACJ,GAAGR,SAAS;;AAGnB;AAEA,OAAO,MAAMS,cAAc,CAACC;IAC1B,MAAML,WAAWZ;IAEjB,IAAIY,aAAaX,SAASiB,GAAG,EAAE;QAC7B,qBAAO,oBAACb,gBAAmBY;IAC7B;IAEA,qBAAO,oBAACN,iBAAoBM;AAC9B,EAAE"}

package/dist/cssm/components/Alert/AlertActions.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AlertActionInterface, AlertProps } from './Alert';
+type ItemClickHandler = (item: AlertActionInterface) => void;
+interface AlertActionsProps extends Pick<AlertProps, 'actions' | 'actionsAlign' | 'renderAction' | 'actionsLayout'> {
+    onItemClick: ItemClickHandler;
+}
+export declare const AlertActions: ({ actions, renderAction, onItemClick, actionsAlign, actionsLayout, }: AlertActionsProps) => React.JSX.Element;
+export {};

package/dist/cssm/components/Alert/AlertActions.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { AlertAction } from './AlertAction';
+import styles from './Alert.module.css';
+const alignStyles = {
+    left: styles['Alert__actions--align-left'],
+    center: styles['Alert__actions--align-center'],
+    right: styles['Alert__actions--align-right']
+};
+const directionStyles = {
+    vertical: styles['Alert__actions--direction-vertical'],
+    horizontal: styles['Alert__actions--direction-horizontal']
+};
+export const AlertActions = ({ actions = [], renderAction = (props)=>/*#__PURE__*/ React.createElement(AlertAction, props), onItemClick, actionsAlign, actionsLayout })=>{
+    const platform = usePlatform();
+    const direction = platform === Platform.VKCOM ? 'horizontal' : actionsLayout;
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['Alert__actions'], actionsAlign && alignStyles[actionsAlign], direction && directionStyles[direction])
+    }, actions.map((action, i)=>{
+        // Убираем
+        const { title: children, action: _, autoClose, ...restProps } = action;
+        return /*#__PURE__*/ React.createElement(React.Fragment, {
+            key: i
+        }, renderAction({
+            children,
+            onClick: ()=>onItemClick(action),
+            ...restProps
+        }));
+    }));
+};
+
+//# sourceMappingURL=AlertActions.js.map

package/dist/cssm/components/Alert/AlertActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Alert/AlertActions.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { AlertActionInterface, AlertProps } from './Alert';\nimport { AlertAction } from './AlertAction';\nimport styles from './Alert.module.css';\n\nconst alignStyles = {\n  left: styles['Alert__actions--align-left'],\n  center: styles['Alert__actions--align-center'],\n  right: styles['Alert__actions--align-right'],\n};\n\nconst directionStyles = {\n  vertical: styles['Alert__actions--direction-vertical'],\n  horizontal: styles['Alert__actions--direction-horizontal'],\n};\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\ninterface AlertActionsProps\n  extends Pick<AlertProps, 'actions' | 'actionsAlign' | 'renderAction' | 'actionsLayout'> {\n  onItemClick: ItemClickHandler;\n}\nexport const AlertActions = ({\n  actions = [],\n  renderAction = (props) => <AlertAction {...props} />,\n  onItemClick,\n  actionsAlign,\n  actionsLayout,\n}: AlertActionsProps) => {\n  const platform = usePlatform();\n\n  const direction: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  return (\n    <div\n      className={classNames(\n        styles['Alert__actions'],\n        actionsAlign && alignStyles[actionsAlign],\n        direction && directionStyles[direction],\n      )}\n    >\n      {actions.map((action, i) => {\n        // Убираем\n        const { title: children, action: _, autoClose, ...restProps } = action;\n\n        return (\n          <React.Fragment key={i}>\n            {renderAction({\n              children,\n              onClick: () => onItemClick(action),\n              ...restProps,\n            })}\n          </React.Fragment>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","AlertAction","styles","alignStyles","left","center","right","directionStyles","vertical","horizontal","AlertActions","actions","renderAction","props","onItemClick","actionsAlign","actionsLayout","platform","direction","VKCOM","div","className","map","action","i","title","children","_","autoClose","restProps","Fragment","key","onClick"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,cAAc;IAClBC,MAAMF,MAAM,CAAC,6BAA6B;IAC1CG,QAAQH,MAAM,CAAC,+BAA+B;IAC9CI,OAAOJ,MAAM,CAAC,8BAA8B;AAC9C;AAEA,MAAMK,kBAAkB;IACtBC,UAAUN,MAAM,CAAC,qCAAqC;IACtDO,YAAYP,MAAM,CAAC,uCAAuC;AAC5D;AAOA,OAAO,MAAMQ,eAAe,CAAC,EAC3BC,UAAU,EAAE,EACZC,eAAe,CAACC,sBAAU,oBAACZ,aAAgBY,MAAS,EACpDC,WAAW,EACXC,YAAY,EACZC,aAAa,EACK;IAClB,MAAMC,WAAWlB;IAEjB,MAAMmB,YACJD,aAAajB,SAASmB,KAAK,GAAG,eAAeH;IAE/C,qBACE,oBAACI;QACCC,WAAWvB,WACTI,MAAM,CAAC,iBAAiB,EACxBa,gBAAgBZ,WAAW,CAACY,aAAa,EACzCG,aAAaX,eAAe,CAACW,UAAU;OAGxCP,QAAQW,GAAG,CAAC,CAACC,QAAQC;QACpB,UAAU;QACV,MAAM,EAAEC,OAAOC,QAAQ,EAAEH,QAAQI,CAAC,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGN;QAEhE,qBACE,oBAAC1B,MAAMiC,QAAQ;YAACC,KAAKP;WAClBZ,aAAa;YACZc;YACAM,SAAS,IAAMlB,YAAYS;YAC3B,GAAGM,SAAS;QACd;IAGN;AAGN,EAAE"}

package/dist/cssm/components/Alert/AlertTypography.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { HasChildren } from '../../types';
+interface AlertTypography extends HasChildren {
+    id: string;
+}
+export declare const AlertHeader: (props: AlertTypography) => React.JSX.Element;
+export declare const AlertText: (props: AlertTypography) => React.JSX.Element;
+export {};

package/dist/cssm/components/Alert/AlertTypography.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { Caption } from '../Typography/Caption/Caption';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { Text } from '../Typography/Text/Text';
+import { Title } from '../Typography/Title/Title';
+import styles from './Alert.module.css';
+export const AlertHeader = (props)=>{
+    const platform = usePlatform();
+    switch(platform){
+        case Platform.IOS:
+            return /*#__PURE__*/ React.createElement(Title, {
+                className: styles['Alert__header'],
+                weight: "1",
+                level: "3",
+                ...props
+            });
+        default:
+            return /*#__PURE__*/ React.createElement(Title, {
+                className: styles['Alert__header'],
+                weight: "2",
+                level: "2",
+                ...props
+            });
+    }
+};
+export const AlertText = (props)=>{
+    const platform = usePlatform();
+    switch(platform){
+        case Platform.VKCOM:
+            return /*#__PURE__*/ React.createElement(Footnote, {
+                className: styles['Alert__text'],
+                ...props
+            });
+        case Platform.IOS:
+            return /*#__PURE__*/ React.createElement(Caption, {
+                className: styles['Alert__text'],
+                ...props
+            });
+        default:
+            return /*#__PURE__*/ React.createElement(Text, {
+                Component: "span",
+                className: styles['Alert__text'],
+                weight: "3",
+                ...props
+            });
+    }
+};
+
+//# sourceMappingURL=AlertTypography.js.map

package/dist/cssm/components/Alert/AlertTypography.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Alert/AlertTypography.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasChildren } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\nexport const AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\nexport const AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n"],"names":["React","usePlatform","Platform","Caption","Footnote","Text","Title","styles","AlertHeader","props","platform","IOS","className","weight","level","AlertText","VKCOM","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAClD,OAAOC,YAAY,qBAAqB;AAKxC,OAAO,MAAMC,cAAc,CAACC;IAC1B,MAAMC,WAAWT;IAEjB,OAAQS;QACN,KAAKR,SAASS,GAAG;YACf,qBAAO,oBAACL;gBAAMM,WAAWL,MAAM,CAAC,gBAAgB;gBAAEM,QAAO;gBAAIC,OAAM;gBAAK,GAAGL,KAAK;;QAClF;YACE,qBAAO,oBAACH;gBAAMM,WAAWL,MAAM,CAAC,gBAAgB;gBAAEM,QAAO;gBAAIC,OAAM;gBAAK,GAAGL,KAAK;;IACpF;AACF,EAAE;AACF,OAAO,MAAMM,YAAY,CAACN;IACxB,MAAMC,WAAWT;IAEjB,OAAQS;QACN,KAAKR,SAASc,KAAK;YACjB,qBAAO,oBAACZ;gBAASQ,WAAWL,MAAM,CAAC,cAAc;gBAAG,GAAGE,KAAK;;QAC9D,KAAKP,SAASS,GAAG;YACf,qBAAO,oBAACR;gBAAQS,WAAWL,MAAM,CAAC,cAAc;gBAAG,GAAGE,KAAK;;QAC7D;YACE,qBAAO,oBAACJ;gBAAKY,WAAU;gBAAOL,WAAWL,MAAM,CAAC,cAAc;gBAAEM,QAAO;gBAAK,GAAGJ,KAAK;;IACxF;AACF,EAAE"}

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

@@ -652,7 +652,7 @@
 }
 
 .Button--mode-primary.Button--appearance-neutral {
-  --vkui_internal--counter_inherit_background: var(--vkui--color_background_content);
+  --vkui_internal--counter_inherit_background: var(--vkui--color_background_contrast);
   --vkui_internal--counter_inherit_color: var(--vkui--color_text_primary_invariably);
 }
 

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

@@ -8,6 +8,7 @@
   cursor: pointer;
   font-size: inherit;
   font-family: inherit;
+  line-height: inherit;
   display: inline;
   border-radius: 0;
 }

package/dist/cssm/components/NativeSelect/NativeSelect.js

@@ -4,6 +4,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
 import { SizeType } from '../../lib/adaptivity';
+import { getFormFieldModeFromSelectType } from '../../lib/select';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { FormField } from '../FormField/FormField';
@@ -44,7 +45,8 @@ const sizeYClassNames = {
         disabled: disabled,
         before: before,
         after: icon,
-        status: status
+        status: status,
+        mode: getFormFieldModeFromSelectType(selectType)
     }, /*#__PURE__*/ React.createElement("select", {
         ...restProps,
         disabled: disabled,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = '',\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: NativeSelectProps) => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    disabled,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNames(\n        styles['Select'],\n        'vkuiInternalNativeSelect',\n        before && styles['Select--hasBefore'],\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']} aria-hidden>\n        <SelectTypography className={styles['Select__title']} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","onChangeProp","value","valueProp","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","selectedOption","current","options","selectedIndex","text","Component","REGULAR","after","select","ref","option","div","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAuBA;;CAEC,GACD,MAAMI,eAAe,CAAC,EACpBC,KAAK,EACLC,eAAe,EAAE,EACjBC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,MAAM,EACNC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,aAAa,SAAS,EACtBC,MAAM,EACNC,qBAAO,oBAACpB,mBAAe,EACvBqB,MAAM,EACNC,UAAUC,YAAY,EACtBC,OAAOC,SAAS,EAChB,GAAGC,WACe;IAClB,MAAM,CAACC,OAAOC,SAAS,GAAGnC,MAAMoC,QAAQ,CAAC;IACzC,MAAM,CAACC,OAAOC,SAAS,GAAGtC,MAAMoC,QAAQ,CAAC;IACzC,MAAM,CAACL,OAAOF,SAAS,GAAG1B,kBAAkB;QAC1Ca;QACAO;QACAM,UAAUC;QACVC,OAAOC;IACT;IACA,MAAMO,YAAYnC,aAAaiB;IAC/B,MAAM,EAAEmB,QAAQ,MAAM,EAAE,GAAGtC;IAE3BI,0BAA0B;QACxB,MAAMmC,iBAAiBF,UAAUG,OAAO,EAAEC,OAAO,CAACJ,UAAUG,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBN,SAASM,eAAeI,IAAI;YAC5BP,SAASG,eAAeV,KAAK,KAAK,MAAMb,eAAe;QACzD;IACF,GAAG;QAACa;QAAOZ;KAAS;IAEpB,qBACE,oBAACX;QACCsC,WAAU;QACV1B,WAAWnB,WACTS,MAAM,CAAC,SAAS,EAChB,4BACAkB,UAAUlB,MAAM,CAAC,oBAAoB,EACrC2B,SAAS3B,MAAM,CAAC,gBAAgB,EAChCc,aAAad,MAAM,CAAC,oBAAoB,EACxCO,UAAU,YAAYP,MAAM,CAAC,uBAAuB,EACpDO,UAAU,WAAWP,MAAM,CAAC,sBAAsB,EAClD8B,UAAUnC,SAAS0C,OAAO,IAAIpC,eAAe,CAAC6B,MAAM,EACpDpB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACRoB,OAAOrB;QACPD,QAAQA;qBAER,oBAACuB;QACE,GAAGhB,SAAS;QACbV,UAAUA;QACVH,WAAWV,MAAM,CAAC,aAAa;QAC/BmB,UAAUA;QACVE,OAAOA;QACPmB,KAAKX;OAEJrB,6BAAe,oBAACiC;QAAOpB,OAAM;OAAIb,cACjCC,yBAEH,oBAACiC;QAAIhC,WAAWV,MAAM,CAAC,oBAAoB;QAAE2C,eAAAA;qBAC3C,oBAAC5C;QAAiBW,WAAWV,MAAM,CAAC,gBAAgB;QAAEe,YAAYA;OAC/DS;AAKX;AAEA,SAASpB,YAAY,GAAG"}
+{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport styles from '../Select/Select.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Select--sizeY-none'],\n  [SizeType.COMPACT]: styles['Select--sizeY-compact'],\n};\n\nexport interface NativeSelectProps\n  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'multiple'>,\n    HasRef<HTMLSelectElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasAlign,\n    Pick<FormFieldProps, 'before' | 'status'> {\n  placeholder?: string;\n  multiline?: boolean;\n  selectType?: SelectType;\n  /**\n   * Иконка раскрывающегося списка\n   */\n  icon?: React.ReactNode;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/NativeSelect\n */\nconst NativeSelect = ({\n  style,\n  defaultValue = '',\n  align,\n  placeholder,\n  children,\n  className,\n  getRef,\n  getRootRef,\n  disabled,\n  multiline,\n  selectType = 'default',\n  status,\n  icon = <DropdownIcon />,\n  before,\n  onChange: onChangeProp,\n  value: valueProp,\n  ...restProps\n}: NativeSelectProps) => {\n  const [title, setTitle] = React.useState('');\n  const [empty, setEmpty] = React.useState(false);\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    disabled,\n    onChange: onChangeProp,\n    value: valueProp,\n  });\n  const selectRef = useExternRef(getRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current?.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setEmpty(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  return (\n    <FormField\n      Component=\"label\"\n      className={classNames(\n        styles['Select'],\n        'vkuiInternalNativeSelect',\n        before && styles['Select--hasBefore'],\n        empty && styles['Select--empty'],\n        multiline && styles['Select--multiline'],\n        align === 'center' && styles['Select--align-center'],\n        align === 'right' && styles['Select--align-right'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      before={before}\n      after={icon}\n      status={status}\n      mode={getFormFieldModeFromSelectType(selectType)}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        className={styles['Select__el']}\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <div className={styles['Select__container']} aria-hidden>\n        <SelectTypography className={styles['Select__title']} selectType={selectType}>\n          {title}\n        </SelectTypography>\n      </div>\n    </FormField>\n  );\n};\n\nexport { NativeSelect };\n"],"names":["React","classNames","useAdaptivity","useEnsuredControl","useExternRef","SizeType","getFormFieldModeFromSelectType","useIsomorphicLayoutEffect","DropdownIcon","FormField","SelectTypography","styles","sizeYClassNames","none","COMPACT","NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","multiline","selectType","status","icon","before","onChange","onChangeProp","value","valueProp","restProps","title","setTitle","useState","empty","setEmpty","selectRef","sizeY","selectedOption","current","options","selectedIndex","text","Component","REGULAR","after","mode","select","ref","option","div","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,8BAA8B,QAAQ,mBAAmB;AAClE,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,OAAOC,YAAY,8BAA8B;AAEjD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACN,SAASS,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAuBA;;CAEC,GACD,MAAMI,eAAe,CAAC,EACpBC,KAAK,EACLC,eAAe,EAAE,EACjBC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,SAAS,EACTC,MAAM,EACNC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,aAAa,SAAS,EACtBC,MAAM,EACNC,qBAAO,oBAACpB,mBAAe,EACvBqB,MAAM,EACNC,UAAUC,YAAY,EACtBC,OAAOC,SAAS,EAChB,GAAGC,WACe;IAClB,MAAM,CAACC,OAAOC,SAAS,GAAGpC,MAAMqC,QAAQ,CAAC;IACzC,MAAM,CAACC,OAAOC,SAAS,GAAGvC,MAAMqC,QAAQ,CAAC;IACzC,MAAM,CAACL,OAAOF,SAAS,GAAG3B,kBAAkB;QAC1Cc;QACAO;QACAM,UAAUC;QACVC,OAAOC;IACT;IACA,MAAMO,YAAYpC,aAAakB;IAC/B,MAAM,EAAEmB,QAAQ,MAAM,EAAE,GAAGvC;IAE3BK,0BAA0B;QACxB,MAAMmC,iBAAiBF,UAAUG,OAAO,EAAEC,OAAO,CAACJ,UAAUG,OAAO,CAACE,aAAa,CAAC;QAClF,IAAIH,gBAAgB;YAClBN,SAASM,eAAeI,IAAI;YAC5BP,SAASG,eAAeV,KAAK,KAAK,MAAMb,eAAe;QACzD;IACF,GAAG;QAACa;QAAOZ;KAAS;IAEpB,qBACE,oBAACX;QACCsC,WAAU;QACV1B,WAAWpB,WACTU,MAAM,CAAC,SAAS,EAChB,4BACAkB,UAAUlB,MAAM,CAAC,oBAAoB,EACrC2B,SAAS3B,MAAM,CAAC,gBAAgB,EAChCc,aAAad,MAAM,CAAC,oBAAoB,EACxCO,UAAU,YAAYP,MAAM,CAAC,uBAAuB,EACpDO,UAAU,WAAWP,MAAM,CAAC,sBAAsB,EAClD8B,UAAUpC,SAAS2C,OAAO,IAAIpC,eAAe,CAAC6B,MAAM,EACpDpB;QAEFL,OAAOA;QACPO,YAAYA;QACZC,UAAUA;QACVK,QAAQA;QACRoB,OAAOrB;QACPD,QAAQA;QACRuB,MAAM5C,+BAA+BoB;qBAErC,oBAACyB;QACE,GAAGjB,SAAS;QACbV,UAAUA;QACVH,WAAWV,MAAM,CAAC,aAAa;QAC/BmB,UAAUA;QACVE,OAAOA;QACPoB,KAAKZ;OAEJrB,6BAAe,oBAACkC;QAAOrB,OAAM;OAAIb,cACjCC,yBAEH,oBAACkC;QAAIjC,WAAWV,MAAM,CAAC,oBAAoB;QAAE4C,eAAAA;qBAC3C,oBAAC7C;QAAiBW,WAAWV,MAAM,CAAC,gBAAgB;QAAEe,YAAYA;OAC/DS;AAKX;AAEA,SAASpB,YAAY,GAAG"}

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

@@ -55,6 +55,7 @@
   justify-content: center;
   width: 100%;
   pointer-events: none;
+  position: relative;
 }
 
 .PopoutWrapper__content > * {

package/dist/cssm/components/Popover/Popover.js

@@ -99,7 +99,7 @@ import styles from './Popover.module.css';
             '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`
         },
         renderContent: ({ className: wrapperClassName })=>/*#__PURE__*/ React.createElement(FocusTrap, {
-                className: wrapperClassName,
+                className: classNames(styles['Popover__in'], wrapperClassName),
                 onClose: handleContentKeyDownEscape,
                 restoreFocus: restoreFocus
             }, content),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<\n      PopperCommonProps,\n      'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'\n    >,\n    Pick<FocusTrapProps, 'restoreFocus'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показано/скрыто в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  restoreFocus = true,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","styles","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","hoverable","hovered","useRef","computedShown","setComputedShown","useState","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<\n      PopperCommonProps,\n      'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'\n    >,\n    Pick<FocusTrapProps, 'restoreFocus'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показано/скрыто в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  restoreFocus = true,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap\n              className={classNames(styles['Popover__in'], wrapperClassName)}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","styles","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","hoverable","hovered","useRef","computedShown","setComputedShown","useState","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","targetRef","renderContent","wrapperClassName","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}

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

@@ -17,6 +17,10 @@
   left: calc(-1 * var(--vkui_internal--popover_safe_zone_padding));
 }
 
+.Popover__in {
+  position: relative;
+}
+
 @keyframes vkui-popover-fadein {
   from {
     opacity: 0;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Placement } from '../../lib/floating';
 import type { HasRootRef } from '../../types';
-type Coords = {
+export type Coords = {
     x?: number;
     y?: number;
 };
@@ -12,4 +12,3 @@ export interface PopperArrowProps extends HasRootRef<HTMLDivElement> {
     Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
 }
 export declare const PopperArrow: ({ coords, arrowClassName, placement, getRootRef, Icon, }: PopperArrowProps) => React.JSX.Element;
-export {};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './PopperArrow.module.css';\n\ntype Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles['PopperArrow--placement-right'],\n  bottom: styles['PopperArrow--placement-bottom'],\n  left: styles['PopperArrow--placement-left'],\n};\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n  Icon = DefaultIcon,\n}: PopperArrowProps) => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(placement, coords);\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(\n        styles['PopperArrow'],\n        arrowPlacement && placementClassNames[arrowPlacement],\n      )}\n    >\n      <Icon className={classNames(styles['PopperArrow__in'], arrowClassName)} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  if (placement.startsWith('top')) {\n    return [\n      'bottom',\n      {\n        top: '100%',\n        left: coords.x,\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    return [\n      'left',\n      {\n        top: coords.y,\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        left: coords.x,\n      },\n    ];\n  } else {\n    return [\n      'right',\n      {\n        top: coords.y,\n        right: 0,\n      },\n    ];\n  }\n}\n"],"names":["React","classNames","DefaultIcon","styles","placementClassNames","right","bottom","left","PopperArrow","coords","arrowClassName","placement","getRootRef","Icon","arrowPlacement","arrowStyles","getArrowPositionData","div","ref","style","className","x","y","startsWith","top","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,2BAA2B;AAO9C,MAAMC,sBAAsB;IAC1BC,OAAOF,MAAM,CAAC,+BAA+B;IAC7CG,QAAQH,MAAM,CAAC,gCAAgC;IAC/CI,MAAMJ,MAAM,CAAC,8BAA8B;AAC7C;AASA,OAAO,MAAMK,cAAc,CAAC,EAC1BC,MAAM,EACNC,cAAc,EACdC,SAAS,EACTC,UAAU,EACVC,OAAOX,WAAW,EACD;IACjB,MAAM,CAACY,gBAAgBC,YAAY,GAAGC,qBAAqBL,WAAWF;IAEtE,qBACE,oBAACQ;QACCC,KAAKN;QACLO,OAAOJ;QACPK,WAAWnB,WACTE,MAAM,CAAC,cAAc,EACrBW,kBAAkBV,mBAAmB,CAACU,eAAe;qBAGvD,oBAACD;QAAKO,WAAWnB,WAAWE,MAAM,CAAC,kBAAkB,EAAEO;;AAG7D,EAAE;AAEF,SAASM,qBACPL,SAAoB,EACpBF,SAAiB;IAAEY,GAAG;IAAGC,GAAG;AAAE,CAAC;IAE/B,IAAIX,UAAUY,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLjB,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO,IAAIV,UAAUY,UAAU,CAAC,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKf,OAAOa,CAAC;gBACbf,MAAM;YACR;SACD;IACH,OAAO,IAAII,UAAUY,UAAU,CAAC,WAAW;QACzC,OAAO;YACLE;YACA;gBACEnB,QAAQ;gBACRC,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKf,OAAOa,CAAC;gBACbjB,OAAO;YACT;SACD;IACH;AACF"}
+{"version":3,"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport { DefaultIcon } from './DefaultIcon';\nimport styles from './PopperArrow.module.css';\n\nexport type Coords = {\n  x?: number;\n  y?: number;\n};\n\nconst placementClassNames = {\n  right: styles['PopperArrow--placement-right'],\n  bottom: styles['PopperArrow--placement-bottom'],\n  left: styles['PopperArrow--placement-left'],\n};\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n  Icon?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;\n}\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n  Icon = DefaultIcon,\n}: PopperArrowProps) => {\n  const [arrowPlacement, arrowStyles] = getArrowPositionData(placement, coords);\n\n  return (\n    <div\n      ref={getRootRef}\n      style={arrowStyles}\n      className={classNames(\n        styles['PopperArrow'],\n        arrowPlacement && placementClassNames[arrowPlacement],\n      )}\n    >\n      <Icon className={classNames(styles['PopperArrow__in'], arrowClassName)} />\n    </div>\n  );\n};\n\nfunction getArrowPositionData(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): [undefined | 'right' | 'bottom' | 'left', React.CSSProperties] {\n  if (placement.startsWith('top')) {\n    return [\n      'bottom',\n      {\n        top: '100%',\n        left: coords.x,\n      },\n    ];\n  } else if (placement.startsWith('right')) {\n    return [\n      'left',\n      {\n        top: coords.y,\n        left: 0,\n      },\n    ];\n  } else if (placement.startsWith('bottom')) {\n    return [\n      undefined,\n      {\n        bottom: '100%',\n        left: coords.x,\n      },\n    ];\n  } else {\n    return [\n      'right',\n      {\n        top: coords.y,\n        right: 0,\n      },\n    ];\n  }\n}\n"],"names":["React","classNames","DefaultIcon","styles","placementClassNames","right","bottom","left","PopperArrow","coords","arrowClassName","placement","getRootRef","Icon","arrowPlacement","arrowStyles","getArrowPositionData","div","ref","style","className","x","y","startsWith","top","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,2BAA2B;AAO9C,MAAMC,sBAAsB;IAC1BC,OAAOF,MAAM,CAAC,+BAA+B;IAC7CG,QAAQH,MAAM,CAAC,gCAAgC;IAC/CI,MAAMJ,MAAM,CAAC,8BAA8B;AAC7C;AASA,OAAO,MAAMK,cAAc,CAAC,EAC1BC,MAAM,EACNC,cAAc,EACdC,SAAS,EACTC,UAAU,EACVC,OAAOX,WAAW,EACD;IACjB,MAAM,CAACY,gBAAgBC,YAAY,GAAGC,qBAAqBL,WAAWF;IAEtE,qBACE,oBAACQ;QACCC,KAAKN;QACLO,OAAOJ;QACPK,WAAWnB,WACTE,MAAM,CAAC,cAAc,EACrBW,kBAAkBV,mBAAmB,CAACU,eAAe;qBAGvD,oBAACD;QAAKO,WAAWnB,WAAWE,MAAM,CAAC,kBAAkB,EAAEO;;AAG7D,EAAE;AAEF,SAASM,qBACPL,SAAoB,EACpBF,SAAiB;IAAEY,GAAG;IAAGC,GAAG;AAAE,CAAC;IAE/B,IAAIX,UAAUY,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACL;YACA;gBACEC,KAAK;gBACLjB,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO,IAAIV,UAAUY,UAAU,CAAC,UAAU;QACxC,OAAO;YACL;YACA;gBACEC,KAAKf,OAAOa,CAAC;gBACbf,MAAM;YACR;SACD;IACH,OAAO,IAAII,UAAUY,UAAU,CAAC,WAAW;QACzC,OAAO;YACLE;YACA;gBACEnB,QAAQ;gBACRC,MAAME,OAAOY,CAAC;YAChB;SACD;IACH,OAAO;QACL,OAAO;YACL;YACA;gBACEG,KAAKf,OAAOa,CAAC;gBACbjB,OAAO;YACT;SACD;IACH;AACF"}

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

@@ -6,8 +6,12 @@ export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, Has
      */
     appearance?: 'accent' | 'positive' | 'negative';
     value?: number;
+    /**
+     * Высота элемента.
+     */
+    height?: number;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
  */
-export declare const Progress: ({ value, getRootRef, className, appearance, ...restProps }: ProgressProps) => React.JSX.Element;
+export declare const Progress: ({ value, getRootRef, className, appearance, height, style: styleProps, ...restProps }: ProgressProps) => React.JSX.Element;

package/dist/cssm/components/Progress/Progress.js

@@ -2,16 +2,32 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
 import styles from './Progress.module.css';
+function progressCustomHeightStyle(height) {
+    return height ? {
+        height,
+        borderRadius: height / 2
+    } : undefined;
+}
+function progressStyle(height, styleProps) {
+    const styleHeight = progressCustomHeightStyle(height);
+    const style = styleHeight ? {
+        ...styleProps,
+        ...styleHeight
+    } : styleProps;
+    return style;
+}
 const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
- */ export const Progress = ({ value = 0, getRootRef, className, appearance = 'accent', ...restProps })=>{
+ */ export const Progress = ({ value = 0, getRootRef, className, appearance = 'accent', height, style: styleProps, ...restProps })=>{
     const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
     const title = `${progress} / ${PROGRESS_MAX_VALUE}`;
+    const style = progressStyle(height, styleProps);
     return /*#__PURE__*/ React.createElement("div", {
         "aria-valuenow": value,
         title: title,
+        style: style,
         ...restProps,
         role: "progressbar",
         "aria-valuemin": PROGRESS_MIN_VALUE,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  appearance = 'accent',\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(\n        styles['Progress'],\n        {\n          accent: styles['Progress--appearance-accent'],\n          positive: styles['Progress--appearance-positive'],\n          negative: styles['Progress--appearance-negative'],\n        }[appearance],\n        className,\n      )}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"names":["React","classNames","clamp","styles","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","appearance","restProps","progress","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","accent","positive","negative","style","width"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAE3C,OAAOC,YAAY,wBAAwB;AAY3C,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,QAAQ,CAAC,EACTC,UAAU,EACVC,SAAS,EACTC,aAAa,QAAQ,EACrB,GAAGC,WACW;IACd,MAAMC,WAAWV,MAAMK,OAAOH,oBAAoBC;IAClD,MAAMQ,QAAQ,CAAC,EAAED,SAAS,GAAG,EAAEP,mBAAmB,CAAC;IAEnD,qBACE,oBAACS;QACCC,iBAAeR;QACfM,OAAOA;QACN,GAAGF,SAAS;QACbK,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKX;QACLC,WAAWR,WACTE,MAAM,CAAC,WAAW,EAClB;YACEiB,QAAQjB,MAAM,CAAC,8BAA8B;YAC7CkB,UAAUlB,MAAM,CAAC,gCAAgC;YACjDmB,UAAUnB,MAAM,CAAC,gCAAgC;QACnD,CAAC,CAACO,WAAW,EACbD;qBAGF,oBAACK;QAAIL,WAAWN,MAAM,CAAC,eAAe;QAAEoB,OAAO;YAAEC,OAAO,CAAC,EAAEZ,SAAS,CAAC,CAAC;QAAC;;AAG7E,EAAE"}
+{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { HasRootRef } from '../../types';\nimport styles from './Progress.module.css';\n\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nfunction progressStyle(height: number | undefined, styleProps: React.CSSProperties | undefined) {\n  const styleHeight = progressCustomHeightStyle(height);\n  const style = styleHeight ? { ...styleProps, ...styleHeight } : styleProps;\n\n  return style;\n}\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  getRootRef,\n  className,\n  appearance = 'accent',\n  height,\n  style: styleProps,\n  ...restProps\n}: ProgressProps) => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n\n  const style = progressStyle(height, styleProps);\n\n  return (\n    <div\n      aria-valuenow={value}\n      title={title}\n      style={style}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      className={classNames(\n        styles['Progress'],\n        {\n          accent: styles['Progress--appearance-accent'],\n          positive: styles['Progress--appearance-positive'],\n          negative: styles['Progress--appearance-negative'],\n        }[appearance],\n        className,\n      )}\n    >\n      <div className={styles['Progress__in']} style={{ width: `${progress}%` }} />\n    </div>\n  );\n};\n"],"names":["React","classNames","clamp","styles","progressCustomHeightStyle","height","borderRadius","undefined","progressStyle","styleProps","styleHeight","style","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","className","appearance","restProps","progress","title","div","aria-valuenow","role","aria-valuemin","aria-valuemax","ref","accent","positive","negative","width"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAE3C,OAAOC,YAAY,wBAAwB;AAE3C,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAEA,SAASC,cAAcH,MAA0B,EAAEI,UAA2C;IAC5F,MAAMC,cAAcN,0BAA0BC;IAC9C,MAAMM,QAAQD,cAAc;QAAE,GAAGD,UAAU;QAAE,GAAGC,WAAW;IAAC,IAAID;IAEhE,OAAOE;AACT;AAgBA,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,QAAQ,CAAC,EACTC,UAAU,EACVC,SAAS,EACTC,aAAa,QAAQ,EACrBb,MAAM,EACNM,OAAOF,UAAU,EACjB,GAAGU,WACW;IACd,MAAMC,WAAWlB,MAAMa,OAAOH,oBAAoBC;IAClD,MAAMQ,QAAQ,CAAC,EAAED,SAAS,GAAG,EAAEP,mBAAmB,CAAC;IAEnD,MAAMF,QAAQH,cAAcH,QAAQI;IAEpC,qBACE,oBAACa;QACCC,iBAAeR;QACfM,OAAOA;QACPV,OAAOA;QACN,GAAGQ,SAAS;QACbK,MAAK;QACLC,iBAAeb;QACfc,iBAAeb;QACfc,KAAKX;QACLC,WAAWhB,WACTE,MAAM,CAAC,WAAW,EAClB;YACEyB,QAAQzB,MAAM,CAAC,8BAA8B;YAC7C0B,UAAU1B,MAAM,CAAC,gCAAgC;YACjD2B,UAAU3B,MAAM,CAAC,gCAAgC;QACnD,CAAC,CAACe,WAAW,EACbD;qBAGF,oBAACK;QAAIL,WAAWd,MAAM,CAAC,eAAe;QAAEQ,OAAO;YAAEoB,OAAO,CAAC,EAAEX,SAAS,CAAC,CAAC;QAAC;;AAG7E,EAAE"}