@vkontakte/vkui 5.4.1 → 5.4.3

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  [SizeType.COMPACT]: styles['Panel--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Panel--sizeX-regular'],\n};\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && 'vkuiInternalPanel--centered',\n        className,\n      )}\n    >\n      <Touch\n        Component={TooltipContainer}\n        className={classNames(styles['Panel__in'], 'vkuiInternalPanel__in')}\n      >\n        {platform === Platform.IOS && <div className=\"vkuiInternalPanel__fade\" />}\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","TooltipContainer","Touch","styles","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","div","ref","Component","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;AACvC,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACJ,SAASQ,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AASA;;CAEC,GACD,OAAO,MAAMK,QAAQ,CAAC,EACpBC,UAAW,KAAK,CAAA,EAChBC,SAAQ,EACRC,WAAU,EACVC,IAAG,EACHC,UAAS,EACT,GAAGC,WACQ,GAAK;IAChB,MAAMC,WAAWjB;IACjB,MAAM,EAAEkB,OAAQ,OAAM,EAAE,GAAGnB;IAE3B,qBACE,oBAACoB;QACE,GAAGH,SAAS;QACbI,KAAKP;QACLE,WAAWjB,WACTO,MAAM,CAAC,QAAQ,EACfC,eAAe,CAACY,MAAM,EACtBP,YAAY,+BACZI;qBAGF,oBAACX;QACCiB,WAAWlB;QACXY,WAAWjB,WAAWO,MAAM,CAAC,YAAY,EAAE;OAE1CY,aAAaf,SAASoB,GAAG,kBAAI,oBAACH;QAAIJ,WAAU;sBAC7C,oBAACI;QAAIJ,WAAWV,MAAM,CAAC,mBAAmB;QACzCM,yBAAW,oBAACQ;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;OAAGO,YAAkBA,QAAQ,gBAClF,oBAACO;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;;AAIjD,EAAE"}
+{"version":3,"sources":["../../../../src/components/Panel/Panel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Touch } from '../Touch/Touch';\nimport styles from './Panel.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Panel--sizeX-none'],\n  [SizeType.COMPACT]: styles['Panel--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Panel--sizeX-regular'],\n};\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    NavIdProps {\n  centered?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Panel\n */\nexport const Panel = ({\n  centered = false,\n  children,\n  getRootRef,\n  nav,\n  className,\n  ...restProps\n}: PanelProps) => {\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Panel'],\n        sizeXClassNames[sizeX],\n        centered && 'vkuiInternalPanel--centered',\n        className,\n      )}\n    >\n      <Touch\n        Component={TooltipContainer}\n        className={classNames(styles['Panel__in'], 'vkuiInternalPanel__in')}\n      >\n        <div className={styles['Panel__in-before']} />\n        {centered ? <div className={styles['Panel__centered']}>{children}</div> : children}\n        {platform === Platform.IOS && <div className=\"vkuiInternalPanel__fade\" />}\n        <div className={styles['Panel__in-after']} />\n      </Touch>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","usePlatform","SizeType","Platform","TooltipContainer","Touch","styles","sizeXClassNames","none","COMPACT","REGULAR","Panel","centered","children","getRootRef","nav","className","restProps","platform","sizeX","div","ref","Component","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,SAASC,KAAK,QAAQ,iBAAiB;AACvC,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACJ,SAASQ,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AASA;;CAEC,GACD,OAAO,MAAMK,QAAQ,CAAC,EACpBC,UAAW,KAAK,CAAA,EAChBC,SAAQ,EACRC,WAAU,EACVC,IAAG,EACHC,UAAS,EACT,GAAGC,WACQ,GAAK;IAChB,MAAMC,WAAWjB;IACjB,MAAM,EAAEkB,OAAQ,OAAM,EAAE,GAAGnB;IAE3B,qBACE,oBAACoB;QACE,GAAGH,SAAS;QACbI,KAAKP;QACLE,WAAWjB,WACTO,MAAM,CAAC,QAAQ,EACfC,eAAe,CAACY,MAAM,EACtBP,YAAY,+BACZI;qBAGF,oBAACX;QACCiB,WAAWlB;QACXY,WAAWjB,WAAWO,MAAM,CAAC,YAAY,EAAE;qBAE3C,oBAACc;QAAIJ,WAAWV,MAAM,CAAC,mBAAmB;QACzCM,yBAAW,oBAACQ;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;OAAGO,YAAkBA,QAAQ,EACjFK,aAAaf,SAASoB,GAAG,kBAAI,oBAACH;QAAIJ,WAAU;sBAC7C,oBAACI;QAAIJ,WAAWV,MAAM,CAAC,kBAAkB;;AAIjD,EAAE"}

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

@@ -14,17 +14,21 @@ export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement>,
      * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.
      */
     fixed?: boolean;
-}
-interface PanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {
+    /**
+     * По умолчанию как `Component` используется `span`.
+     */
+    typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement>;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeader
  */
 export declare const PanelHeader: {
-    ({ before, children, after, separator, visor, transparent, shadow, getRef, getRootRef, fixed, className, ...restProps }: PanelHeaderProps): JSX.Element;
+    ({ before, children, after, separator, visor, transparent, shadow, getRef, getRootRef, fixed, className, typographyProps, ...restProps }: PanelHeaderProps): JSX.Element;
     Content: {
-        ({ children, Component, id }: PanelHeaderContentProps): JSX.Element;
+        ({ children, Component, id, }: LegacyPanelHeaderContentProps): JSX.Element;
         displayName: string;
     };
 };
+interface LegacyPanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {
+}
 export {};

package/dist/cssm/components/PanelHeader/PanelHeader.js

@@ -5,6 +5,7 @@ import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditi
 import { usePlatform } from '../../hooks/usePlatform';
 import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
+import { warnOnce } from '../../lib/warnOnce';
 import { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';
 import { FixedLayout } from '../FixedLayout/FixedLayout';
 import { ModalRootContext } from '../ModalRoot/ModalRootContext';
@@ -22,22 +23,26 @@ const sizeXClassNames = {
     none: styles['PanelHeader--sizeX-none'],
     regular: styles['PanelHeader--sizeX-regular']
 };
-const PanelHeaderContent = ({ children , Component ='span' , id  })=>{
-    const platform = usePlatform();
-    return platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
-        weight: "2",
-        Component: Component,
-        id: id
-    }, children) : /*#__PURE__*/ React.createElement(Component, {
-        className: styles['PanelHeader__content-in'],
-        id: id
-    }, children);
-};
-PanelHeaderContent.displayName = 'PanelHeaderContent';
-const PanelHeaderIn = ({ before , after , separator , children  })=>{
+const PanelHeaderIn = ({ before , after , separator , children , typographyProps ={}  })=>{
+    const { Component ='span' , ...restProps } = typographyProps;
     const { webviewType  } = useConfigProvider();
     const { isInsideModal  } = React.useContext(ModalRootContext);
     const platform = usePlatform();
+    let typographyNode;
+    // TODO [>=6]: Удалить условие
+    if (/*#__PURE__*/ React.isValidElement(children) && // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    children.type.displayName === LegacyPanelHeaderContent.displayName) {
+        typographyNode = children;
+    } else {
+        typographyNode = platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
+            weight: "2",
+            Component: Component,
+            ...restProps
+        }, children) : /*#__PURE__*/ React.createElement(Component, {
+            className: styles['PanelHeader__content-in'],
+            ...restProps
+        }, children);
+    }
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(TooltipContainer, {
         fixed: true,
         className: styles['PanelHeader__in']
@@ -45,7 +50,7 @@ const PanelHeaderIn = ({ before , after , separator , children  })=>{
         className: classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: styles['PanelHeader__content']
-    }, /*#__PURE__*/ React.isValidElement(children) && children.type.displayName === PanelHeaderContent.displayName ? children : /*#__PURE__*/ React.createElement(PanelHeaderContent, null, children)), /*#__PURE__*/ React.createElement("div", {
+    }, typographyNode), /*#__PURE__*/ React.createElement("div", {
         className: classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')
     }, (webviewType === WebviewType.INTERNAL || isInsideModal) && after)), separator && platform === Platform.VKCOM && /*#__PURE__*/ React.createElement(Separator, {
         className: styles['PanelHeader__separator'],
@@ -54,7 +59,7 @@ const PanelHeaderIn = ({ before , after , separator , children  })=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeader
- */ export const PanelHeader = ({ before , children , after , separator =true , visor =true , transparent =false , shadow , getRef , getRootRef , fixed , className , ...restProps })=>{
+ */ export const PanelHeader = ({ before , children , after , separator =true , visor =true , transparent =false , shadow , getRef , getRootRef , fixed , className , typographyProps , ...restProps })=>{
     const platform = usePlatform();
     const { webviewType  } = useConfigProvider();
     const { isInsideModal  } = React.useContext(ModalRootContext);
@@ -63,7 +68,7 @@ const PanelHeaderIn = ({ before , after , separator , children  })=>{
     let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
     return /*#__PURE__*/ React.createElement("div", {
         ...restProps,
-        className: classNames(styles['PanelHeader'], 'vkuiInternalPanelHeader', platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && styles['PanelHeader--trnsp'], shadow && styles['PanelHeader--shadow'], visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'), separator && visor && classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'), webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'], !before && styles['PanelHeader--no-before'], !after && styles['PanelHeader--no-after'], isFixed && styles['PanelHeader--fixed'], sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX], className),
+        className: classNames(styles['PanelHeader'], 'vkuiInternalPanelHeader', platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && styles['PanelHeader--trnsp'], shadow && styles['PanelHeader--shadow'], visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'), separator && visor && classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'), webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'], !before && classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'), !after && styles['PanelHeader--no-after'], isFixed && styles['PanelHeader--fixed'], sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX], className),
         ref: isFixed ? getRootRef : getRef
     }, isFixed ? /*#__PURE__*/ React.createElement(FixedLayout, {
         className: classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed'),
@@ -72,11 +77,13 @@ const PanelHeaderIn = ({ before , after , separator , children  })=>{
     }, /*#__PURE__*/ React.createElement(PanelHeaderIn, {
         before: before,
         after: after,
-        separator: separator
+        separator: separator,
+        typographyProps: typographyProps
     }, children)) : /*#__PURE__*/ React.createElement(PanelHeaderIn, {
         before: before,
         after: after,
-        separator: separator
+        separator: separator,
+        typographyProps: typographyProps
     }, children), separator && visor && platform !== Platform.VKCOM && /*#__PURE__*/ React.createElement(React.Fragment, null, adaptiveSizeX.compact && /*#__PURE__*/ React.createElement(Separator, {
         className: adaptiveSizeX.compact.className
     }), adaptiveSizeX.regular && /*#__PURE__*/ React.createElement(Spacing, {
@@ -84,6 +91,25 @@ const PanelHeaderIn = ({ before , after , separator , children  })=>{
         size: 16
     })));
 };
-PanelHeader.Content = PanelHeaderContent;
+const warn = warnOnce('PanelHeader');
+/**
+ * TODO [>=6]: Удалить подкомпонент
+ * @deprecated
+ */ const LegacyPanelHeaderContent = ({ children , Component ='span' , id  })=>{
+    if (process.env.NODE_ENV === 'development') {
+        warn('Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.');
+    }
+    const platform = usePlatform();
+    return platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
+        weight: "2",
+        Component: Component,
+        id: id
+    }, children) : /*#__PURE__*/ React.createElement(Component, {
+        className: styles['PanelHeader__content-in'],
+        id: id
+    }, children);
+};
+LegacyPanelHeaderContent.displayName = 'LegacyPanelHeaderContent';
+PanelHeader.Content = LegacyPanelHeaderContent;
 
 //# sourceMappingURL=PanelHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\ninterface PanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {}\n\nconst PanelHeaderContent = ({ children, Component = 'span', id }: PanelHeaderContentProps) => {\n  const platform = usePlatform();\n\n  return platform === Platform.VKCOM ? (\n    <Text weight=\"2\" Component={Component} id={id}>\n      {children}\n    </Text>\n  ) : (\n    <Component className={styles['PanelHeader__content-in']} id={id}>\n      {children}\n    </Component>\n  );\n};\n\nPanelHeaderContent.displayName = 'PanelHeaderContent';\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>\n          {/* Поддерживаем обратную совместимость для подкомпонентного подхода */}\n          {React.isValidElement(children) &&\n          (children as JSX.Element).type.displayName === PanelHeaderContent.displayName ? (\n            children\n          ) : (\n            <PanelHeaderContent>{children}</PanelHeaderContent>\n          )}\n        </div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\nPanelHeader.Content = PanelHeaderContent;\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","styles","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderContent","children","Component","id","platform","VKCOM","weight","className","displayName","PanelHeaderIn","before","after","separator","webviewType","isInsideModal","useContext","Fragment","fixed","div","isValidElement","type","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","restProps","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","size","Content"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement>;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n  typographyProps = {},\n}: PanelHeaderProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  let typographyNode: React.ReactNode;\n\n  // TODO [>=6]: Удалить условие\n  if (\n    React.isValidElement(children) &&\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    (children as JSX.Element).type.displayName === LegacyPanelHeaderContent.displayName\n  ) {\n    typographyNode = children;\n  } else {\n    typographyNode =\n      platform === Platform.VKCOM ? (\n        <Text weight=\"2\" Component={Component} {...restProps}>\n          {children}\n        </Text>\n      ) : (\n        <Component className={styles['PanelHeader__content-in']} {...restProps}>\n          {children}\n        </Component>\n      );\n  }\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn\n            before={before}\n            after={after}\n            separator={separator}\n            typographyProps={typographyProps}\n          >\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn\n          before={before}\n          after={after}\n          separator={separator}\n          typographyProps={typographyProps}\n        >\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\ninterface LegacyPanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {}\n\nconst warn = warnOnce('PanelHeader');\n\n/**\n * TODO [>=6]: Удалить подкомпонент\n * @deprecated\n */\nconst LegacyPanelHeaderContent = ({\n  children,\n  Component = 'span',\n  id,\n}: LegacyPanelHeaderContentProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.',\n    );\n  }\n\n  const platform = usePlatform();\n\n  return platform === Platform.VKCOM ? (\n    <Text weight=\"2\" Component={Component} id={id}>\n      {children}\n    </Text>\n  ) : (\n    <Component className={styles['PanelHeader__content-in']} id={id}>\n      {children}\n    </Component>\n  );\n};\n\nLegacyPanelHeaderContent.displayName = 'LegacyPanelHeaderContent';\n\nPanelHeader.Content = LegacyPanelHeaderContent;\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","warnOnce","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","styles","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","webviewType","isInsideModal","useContext","platform","typographyNode","isValidElement","type","displayName","LegacyPanelHeaderContent","VKCOM","weight","className","Fragment","fixed","div","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","size","warn","id","process","env","NODE_ENV","Content"],"mappings":"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"}

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

@@ -91,6 +91,6 @@
  * VKCOM
  */
 
-.PanelHeader--no-before .PanelHeaderContent--vkcom {
+:global(.vkuiInternalPanelHeader--no-before) .PanelHeaderContent--vkcom {
   padding-left: 16px;
 }

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

@@ -10,6 +10,9 @@
 .PullToRefresh__controls {
   width: 100%;
   pointer-events: none;
+}
+
+.PullToRefresh:not(.PullToRefresh--ios) .PullToRefresh__controls {
   z-index: var(--vkui_internal--z_index_pull_to_refresh);
 }
 

package/dist/cssm/components/TabsItem/TabsItem.js

@@ -7,6 +7,7 @@ import { TabsModeContext } from '../Tabs/Tabs';
 import { Tappable } from '../Tappable/Tappable';
 import { Headline } from '../Typography/Headline/Headline';
 import { Subhead } from '../Typography/Subhead/Subhead';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './TabsItem.module.css';
 const sizeYClassNames = {
     none: styles['TabsItem--sizeY-none'],
@@ -25,9 +26,9 @@ const warn = warnOnce('TabsItem');
             Component: "span",
             className: classNames(styles['TabsItem__status'], styles['TabsItem__status--count']),
             weight: "2"
-        }, status) : /*#__PURE__*/ React.createElement("span", {
+        }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, "\xa0"), status) : /*#__PURE__*/ React.createElement("span", {
             className: styles['TabsItem__status']
-        }, status);
+        }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, "\xa0"), status);
     }
     if (process.env.NODE_ENV === 'development' && isTabFlow) {
         if (!restProps['aria-controls']) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>{status}</span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode &&\n          {\n            default: styles['TabsItem--mode-default'],\n            accent: styles['TabsItem--mode-accent'],\n            secondary: styles['TabsItem--mode-secondary'],\n          }[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","warnOnce","TabsModeContext","Tappable","Headline","Subhead","styles","sizeYClassNames","none","COMPACT","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","sizeY","mode","withGaps","useContext","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","level","aria-hidden","data-selected"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode &&\n          {\n            default: styles['TabsItem--mode-default'],\n            accent: styles['TabsItem--mode-accent'],\n            secondary: styles['TabsItem--mode-secondary'],\n          }[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","sizeY","mode","withGaps","useContext","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","level","aria-hidden","data-selected"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 .Typography--normalize {
-  margin: 0;
   display: block;
+  margin: 0;
+  padding: 0;
 }
 
 /* Мы утяжеляем селектор, чтобы перебить другие селекторы */

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

@@ -3,12 +3,11 @@ import { HasComponent, HasRootRef } from '../../types';
 interface VisuallyHiddenProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
 }
 /**
- * @since v5.4.0
- * @see https://vkcom.github.io/VKUI/#/VisuallyHidden
- * @description
- *
  * Компонент-обертка. Позволяет скрыть контент визуально, но оставить его
  * доступным для ассистивных технологий. По умолчанию — `span`.
+ *
+ * @since v5.4.0
+ * @see https://vkcom.github.io/VKUI/#/VisuallyHidden
  */
 export declare const VisuallyHidden: ({ Component, getRootRef, className, ...restProps }: VisuallyHiddenProps) => JSX.Element;
 export {};

package/dist/cssm/components/VisuallyHidden/VisuallyHidden.js

@@ -2,12 +2,11 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import styles from './VisuallyHidden.module.css';
 /**
- * @since v5.4.0
- * @see https://vkcom.github.io/VKUI/#/VisuallyHidden
- * @description
- *
  * Компонент-обертка. Позволяет скрыть контент визуально, но оставить его
  * доступным для ассистивных технологий. По умолчанию — `span`.
+ *
+ * @since v5.4.0
+ * @see https://vkcom.github.io/VKUI/#/VisuallyHidden
  */ export const VisuallyHidden = ({ Component ='span' , getRootRef , className , ...restProps })=>{
     return /*#__PURE__*/ React.createElement(Component, {
         ...restProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './VisuallyHidden.module.css';\n\ninterface VisuallyHiddenProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {}\n\n/**\n * @since v5.4.0\n * @see https://vkcom.github.io/VKUI/#/VisuallyHidden\n * @description\n *\n * Компонент-обертка. Позволяет скрыть контент визуально, но оставить его\n * доступным для ассистивных технологий. По умолчанию — `span`.\n */\nexport const VisuallyHidden = ({\n  Component = 'span',\n  getRootRef,\n  className,\n  ...restProps\n}: VisuallyHiddenProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(styles['VisuallyHidden'], className)}\n      ref={getRootRef}\n    />\n  );\n};\n"],"names":["React","classNames","styles","VisuallyHidden","Component","getRootRef","className","restProps","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,8BAA8B;AAOjD;;;;;;;CAOC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,WAAY,OAAM,EAClBC,WAAU,EACVC,UAAS,EACT,GAAGC,WACiB,GAAK;IACzB,qBACE,oBAACH;QACE,GAAGG,SAAS;QACbD,WAAWL,WAAWC,MAAM,CAAC,iBAAiB,EAAEI;QAChDE,KAAKH;;AAGX,EAAE"}
+{"version":3,"sources":["../../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './VisuallyHidden.module.css';\n\ninterface VisuallyHiddenProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {}\n\n/**\n * Компонент-обертка. Позволяет скрыть контент визуально, но оставить его\n * доступным для ассистивных технологий. По умолчанию — `span`.\n *\n * @since v5.4.0\n * @see https://vkcom.github.io/VKUI/#/VisuallyHidden\n */\nexport const VisuallyHidden = ({\n  Component = 'span',\n  getRootRef,\n  className,\n  ...restProps\n}: VisuallyHiddenProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(styles['VisuallyHidden'], className)}\n      ref={getRootRef}\n    />\n  );\n};\n"],"names":["React","classNames","styles","VisuallyHidden","Component","getRootRef","className","restProps","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,8BAA8B;AAOjD;;;;;;CAMC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,WAAY,OAAM,EAClBC,WAAU,EACVC,UAAS,EACT,GAAGC,WACiB,GAAK;IACzB,qBACE,oBAACH;QACE,GAAGG,SAAS;QACbD,WAAWL,WAAWC,MAAM,CAAC,iBAAiB,EAAEI;QAChDE,KAAKH;;AAGX,EAAE"}

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

@@ -1,10 +1,14 @@
 .VisuallyHidden {
-  position: absolute;
-  height: 1px;
-  white-space: nowrap;
-  clip: rect(0 0 0 0);
+  position: absolute !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important; /* Fix for https://github.com/twbs/bootstrap/issues/25686 */
+  white-space: nowrap !important;
+  clip: rect(0, 0, 0, 0) !important;
   -webkit-clip-path: inset(50%);
           clip-path: inset(50%);
-  overflow: hidden;
+  overflow: hidden !important;
+  border: 0 !important;
   opacity: 0;
 }

package/dist/cssm/components/WriteBar/WriteBar.js

@@ -5,7 +5,19 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
 import { Headline } from '../Typography/Headline/Headline';
+import { Title } from '../Typography/Title/Title';
 import styles from './WriteBar.module.css';
+const WriteBarTypography = (props)=>{
+    const platform = usePlatform();
+    if (platform === Platform.IOS) {
+        return /*#__PURE__*/ React.createElement(Title, {
+            ...props,
+            level: "3",
+            weight: "3"
+        });
+    }
+    return /*#__PURE__*/ React.createElement(Headline, props);
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/WriteBar
  */ export const WriteBar = ({ className , style , before , inlineAfter , after , getRootRef , getRef , onHeightChange , shadow =false , defaultValue , ...restProps })=>{
@@ -35,7 +47,8 @@ import styles from './WriteBar.module.css';
     ]);
     React.useEffect(resize, [
         resize,
-        value
+        value,
+        platform
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         ref: getRootRef,
@@ -47,7 +60,7 @@ import styles from './WriteBar.module.css';
         className: styles['WriteBar__before']
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: styles['WriteBar__formIn']
-    }, /*#__PURE__*/ React.createElement(Headline, {
+    }, /*#__PURE__*/ React.createElement(WriteBarTypography, {
         ...restProps,
         Component: "textarea",
         className: styles['WriteBar__textarea'],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/WriteBar/WriteBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './WriteBar.module.css';\n\nexport interface WriteBarProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLTextAreaElement> {\n  /**\n   * Содержимое, отображаемое слева от поля ввода.\n   */\n  before?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое поверх поля ввода (актуально для iOS)\n   */\n  inlineAfter?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое справа от поля ввода\n   */\n  after?: React.ReactNode;\n  /**\n   * Вызывается при смене высоты поля ввода\n   */\n  onHeightChange?: VoidFunction;\n  /**\n   * Добавляет тень вокруг поля ввода\n   */\n  shadow?: boolean;\n\n  children?: never;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBar\n */\nexport const WriteBar = ({\n  className,\n  style,\n  before,\n  inlineAfter,\n  after,\n  getRootRef,\n  getRef,\n  onHeightChange,\n  shadow = false,\n  defaultValue,\n  ...restProps\n}: WriteBarProps) => {\n  const platform = usePlatform();\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    ...restProps,\n  });\n\n  const textareaRef = useExternRef(getRef);\n  const currentScrollHeight = React.useRef<number>();\n\n  const resize = React.useCallback(() => {\n    const textareaEl = textareaRef.current;\n    if (!textareaEl) {\n      return;\n    }\n\n    if (textareaEl.offsetParent) {\n      textareaEl.style.height = '';\n      textareaEl.style.height = `${textareaEl.scrollHeight}px`;\n\n      if (textareaEl.scrollHeight !== currentScrollHeight.current && onHeightChange) {\n        onHeightChange();\n        currentScrollHeight.current = textareaEl.scrollHeight;\n      }\n    }\n  }, [onHeightChange, textareaRef]);\n\n  React.useEffect(resize, [resize, value]);\n\n  return (\n    <div\n      ref={getRootRef}\n      className={classNames(\n        styles['WriteBar'],\n        platform === Platform.IOS && styles['WriteBar--ios'],\n        shadow && styles['WriteBar--shadow'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['WriteBar__form']}>\n        {hasReactNode(before) && <div className={styles['WriteBar__before']}>{before}</div>}\n\n        <div className={styles['WriteBar__formIn']}>\n          <Headline\n            {...restProps}\n            Component=\"textarea\"\n            className={styles['WriteBar__textarea']}\n            onChange={onChange}\n            getRootRef={textareaRef}\n            value={value}\n          />\n          {hasReactNode(inlineAfter) && (\n            <div className={styles['WriteBar__inlineAfter']}>{inlineAfter}</div>\n          )}\n        </div>\n\n        {hasReactNode(after) && <div className={styles['WriteBar__after']}>{after}</div>}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useEnsuredControl","useExternRef","usePlatform","Platform","Headline","styles","WriteBar","className","style","before","inlineAfter","after","getRootRef","getRef","onHeightChange","shadow","defaultValue","restProps","platform","value","onChange","textareaRef","currentScrollHeight","useRef","resize","useCallback","textareaEl","current","offsetParent","height","scrollHeight","useEffect","div","ref","IOS","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,wBAAwB;AA8B3C;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,UAAS,EACTC,MAAK,EACLC,OAAM,EACNC,YAAW,EACXC,MAAK,EACLC,WAAU,EACVC,OAAM,EACNC,eAAc,EACdC,QAAS,KAAK,CAAA,EACdC,aAAY,EACZ,GAAGC,WACW,GAAK;IACnB,MAAMC,WAAWhB;IAEjB,MAAM,CAACiB,OAAOC,SAAS,GAAGpB,kBAAkB;QAC1CgB;QACA,GAAGC,SAAS;IACd;IAEA,MAAMI,cAAcpB,aAAaY;IACjC,MAAMS,sBAAsBzB,MAAM0B,MAAM;IAExC,MAAMC,SAAS3B,MAAM4B,WAAW,CAAC,IAAM;QACrC,MAAMC,aAAaL,YAAYM,OAAO;QACtC,IAAI,CAACD,YAAY;YACf;QACF,CAAC;QAED,IAAIA,WAAWE,YAAY,EAAE;YAC3BF,WAAWlB,KAAK,CAACqB,MAAM,GAAG;YAC1BH,WAAWlB,KAAK,CAACqB,MAAM,GAAG,CAAC,EAAEH,WAAWI,YAAY,CAAC,EAAE,CAAC;YAExD,IAAIJ,WAAWI,YAAY,KAAKR,oBAAoBK,OAAO,IAAIb,gBAAgB;gBAC7EA;gBACAQ,oBAAoBK,OAAO,GAAGD,WAAWI,YAAY;YACvD,CAAC;QACH,CAAC;IACH,GAAG;QAAChB;QAAgBO;KAAY;IAEhCxB,MAAMkC,SAAS,CAACP,QAAQ;QAACA;QAAQL;KAAM;IAEvC,qBACE,oBAACa;QACCC,KAAKrB;QACLL,WAAWT,WACTO,MAAM,CAAC,WAAW,EAClBa,aAAaf,SAAS+B,GAAG,IAAI7B,MAAM,CAAC,gBAAgB,EACpDU,UAAUV,MAAM,CAAC,mBAAmB,EACpCE;QAEFC,OAAOA;qBAEP,oBAACwB;QAAIzB,WAAWF,MAAM,CAAC,iBAAiB;OACrCN,aAAaU,yBAAW,oBAACuB;QAAIzB,WAAWF,MAAM,CAAC,mBAAmB;OAAGI,uBAEtE,oBAACuB;QAAIzB,WAAWF,MAAM,CAAC,mBAAmB;qBACxC,oBAACD;QACE,GAAGa,SAAS;QACbkB,WAAU;QACV5B,WAAWF,MAAM,CAAC,qBAAqB;QACvCe,UAAUA;QACVR,YAAYS;QACZF,OAAOA;QAERpB,aAAaW,8BACZ,oBAACsB;QAAIzB,WAAWF,MAAM,CAAC,wBAAwB;OAAGK,eAIrDX,aAAaY,wBAAU,oBAACqB;QAAIzB,WAAWF,MAAM,CAAC,kBAAkB;OAAGM;AAI5E,EAAE"}
+{"version":3,"sources":["../../../../src/components/WriteBar/WriteBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport { TypographyProps } from '../Typography/Typography';\nimport styles from './WriteBar.module.css';\n\nexport interface WriteBarProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLTextAreaElement> {\n  /**\n   * Содержимое, отображаемое слева от поля ввода.\n   */\n  before?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое поверх поля ввода (актуально для iOS)\n   */\n  inlineAfter?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое справа от поля ввода\n   */\n  after?: React.ReactNode;\n  /**\n   * Вызывается при смене высоты поля ввода\n   */\n  onHeightChange?: VoidFunction;\n  /**\n   * Добавляет тень вокруг поля ввода\n   */\n  shadow?: boolean;\n\n  children?: never;\n}\n\nconst WriteBarTypography = (props: TypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return <Title {...props} level=\"3\" weight=\"3\" />;\n  }\n\n  return <Headline {...props} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBar\n */\nexport const WriteBar = ({\n  className,\n  style,\n  before,\n  inlineAfter,\n  after,\n  getRootRef,\n  getRef,\n  onHeightChange,\n  shadow = false,\n  defaultValue,\n  ...restProps\n}: WriteBarProps) => {\n  const platform = usePlatform();\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    ...restProps,\n  });\n\n  const textareaRef = useExternRef(getRef);\n  const currentScrollHeight = React.useRef<number>();\n\n  const resize = React.useCallback(() => {\n    const textareaEl = textareaRef.current;\n    if (!textareaEl) {\n      return;\n    }\n\n    if (textareaEl.offsetParent) {\n      textareaEl.style.height = '';\n      textareaEl.style.height = `${textareaEl.scrollHeight}px`;\n\n      if (textareaEl.scrollHeight !== currentScrollHeight.current && onHeightChange) {\n        onHeightChange();\n        currentScrollHeight.current = textareaEl.scrollHeight;\n      }\n    }\n  }, [onHeightChange, textareaRef]);\n\n  React.useEffect(resize, [resize, value, platform]);\n\n  return (\n    <div\n      ref={getRootRef}\n      className={classNames(\n        styles['WriteBar'],\n        platform === Platform.IOS && styles['WriteBar--ios'],\n        shadow && styles['WriteBar--shadow'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['WriteBar__form']}>\n        {hasReactNode(before) && <div className={styles['WriteBar__before']}>{before}</div>}\n\n        <div className={styles['WriteBar__formIn']}>\n          <WriteBarTypography\n            {...restProps}\n            Component=\"textarea\"\n            className={styles['WriteBar__textarea']}\n            onChange={onChange}\n            getRootRef={textareaRef}\n            value={value}\n          />\n          {hasReactNode(inlineAfter) && (\n            <div className={styles['WriteBar__inlineAfter']}>{inlineAfter}</div>\n          )}\n        </div>\n\n        {hasReactNode(after) && <div className={styles['WriteBar__after']}>{after}</div>}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useEnsuredControl","useExternRef","usePlatform","Platform","Headline","Title","styles","WriteBarTypography","props","platform","IOS","level","weight","WriteBar","className","style","before","inlineAfter","after","getRootRef","getRef","onHeightChange","shadow","defaultValue","restProps","value","onChange","textareaRef","currentScrollHeight","useRef","resize","useCallback","textareaEl","current","offsetParent","height","scrollHeight","useEffect","div","ref","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AAElD,OAAOC,YAAY,wBAAwB;AA8B3C,MAAMC,qBAAqB,CAACC,QAA2B;IACrD,MAAMC,WAAWP;IAEjB,IAAIO,aAAaN,SAASO,GAAG,EAAE;QAC7B,qBAAO,oBAACL;YAAO,GAAGG,KAAK;YAAEG,OAAM;YAAIC,QAAO;;IAC5C,CAAC;IAED,qBAAO,oBAACR,UAAaI;AACvB;AAEA;;CAEC,GACD,OAAO,MAAMK,WAAW,CAAC,EACvBC,UAAS,EACTC,MAAK,EACLC,OAAM,EACNC,YAAW,EACXC,MAAK,EACLC,WAAU,EACVC,OAAM,EACNC,eAAc,EACdC,QAAS,KAAK,CAAA,EACdC,aAAY,EACZ,GAAGC,WACW,GAAK;IACnB,MAAMf,WAAWP;IAEjB,MAAM,CAACuB,OAAOC,SAAS,GAAG1B,kBAAkB;QAC1CuB;QACA,GAAGC,SAAS;IACd;IAEA,MAAMG,cAAc1B,aAAamB;IACjC,MAAMQ,sBAAsB/B,MAAMgC,MAAM;IAExC,MAAMC,SAASjC,MAAMkC,WAAW,CAAC,IAAM;QACrC,MAAMC,aAAaL,YAAYM,OAAO;QACtC,IAAI,CAACD,YAAY;YACf;QACF,CAAC;QAED,IAAIA,WAAWE,YAAY,EAAE;YAC3BF,WAAWjB,KAAK,CAACoB,MAAM,GAAG;YAC1BH,WAAWjB,KAAK,CAACoB,MAAM,GAAG,CAAC,EAAEH,WAAWI,YAAY,CAAC,EAAE,CAAC;YAExD,IAAIJ,WAAWI,YAAY,KAAKR,oBAAoBK,OAAO,IAAIZ,gBAAgB;gBAC7EA;gBACAO,oBAAoBK,OAAO,GAAGD,WAAWI,YAAY;YACvD,CAAC;QACH,CAAC;IACH,GAAG;QAACf;QAAgBM;KAAY;IAEhC9B,MAAMwC,SAAS,CAACP,QAAQ;QAACA;QAAQL;QAAOhB;KAAS;IAEjD,qBACE,oBAAC6B;QACCC,KAAKpB;QACLL,WAAWhB,WACTQ,MAAM,CAAC,WAAW,EAClBG,aAAaN,SAASO,GAAG,IAAIJ,MAAM,CAAC,gBAAgB,EACpDgB,UAAUhB,MAAM,CAAC,mBAAmB,EACpCQ;QAEFC,OAAOA;qBAEP,oBAACuB;QAAIxB,WAAWR,MAAM,CAAC,iBAAiB;OACrCP,aAAaiB,yBAAW,oBAACsB;QAAIxB,WAAWR,MAAM,CAAC,mBAAmB;OAAGU,uBAEtE,oBAACsB;QAAIxB,WAAWR,MAAM,CAAC,mBAAmB;qBACxC,oBAACC;QACE,GAAGiB,SAAS;QACbgB,WAAU;QACV1B,WAAWR,MAAM,CAAC,qBAAqB;QACvCoB,UAAUA;QACVP,YAAYQ;QACZF,OAAOA;QAER1B,aAAakB,8BACZ,oBAACqB;QAAIxB,WAAWR,MAAM,CAAC,wBAAwB;OAAGW,eAIrDlB,aAAamB,wBAAU,oBAACoB;QAAIxB,WAAWR,MAAM,CAAC,kBAAkB;OAAGY;AAI5E,EAAE"}

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

@@ -88,6 +88,10 @@
  * iOS
  */
 
+.WriteBar--ios {
+  background: var(--vkui--color_background_content);
+}
+
 .WriteBar--ios .WriteBar__before,
 .WriteBar--ios .WriteBar__after {
   padding: 0 4px;
@@ -106,14 +110,16 @@
 }
 
 .WriteBar--ios .WriteBar__inlineAfter {
-  margin-right: -1px;
-  margin-top: -9px;
-  margin-bottom: -9px;
+  /* чтобы правильно выровнять иконку, нужно учитывать border */
+  --vkui_internal--writebar-right-gap: calc(-1 * var(--vkui_internal--thin_border));
+  --vkui_internal--writebar-vertical-gap: calc(var(--vkui_internal--writebar-right-gap) - 8px);
+
+  margin-right: var(--vkui_internal--writebar-right-gap);
+  margin-top: var(--vkui_internal--writebar-vertical-gap);
+  margin-bottom: var(--vkui_internal--writebar-vertical-gap);
 }
 
 .WriteBar--ios .WriteBar__textarea {
-  height: 34px;
-  padding: 6px 11px;
-  font-size: 17px;
-  line-height: 22px;
+  height: 36px;
+  padding: 6px 0 6px 12px;
 }

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

@@ -45,16 +45,24 @@
  */
 
 .WriteBarIcon--ios {
-  color: var(--vkui--color_icon_accent);
+  color: var(--vkui--color_icon_accent_themed);
 }
 
 .WriteBarIcon--ios.WriteBarIcon--mode-send,
 .WriteBarIcon--ios.WriteBarIcon--mode-done {
+  color: var(--vkui--color_icon_accent_themed);
   width: 48px;
   padding-left: 0;
   padding-right: 0;
 }
 
+.WriteBarIcon--ios.WriteBarIcon--mode-send:only-child,
+.WriteBarIcon--ios.WriteBarIcon--mode-done:only-child {
+  /* для одной иконки нужно компенсировать отступы */
+  margin-right: -4px;
+  margin-left: -4px;
+}
+
 /**
  * Impact:
  * Counter

package/dist/cssm/hooks/useTodayDate.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { getMillisecondsToTomorrow } from '../lib/date';
+import { getMillisecondsToTomorrow, isSameDay } from '../lib/date';
+import { useDOM } from '../lib/dom';
 /**
  * Опционально обновляемая дата сегодняшнего дня
  *
@@ -9,21 +10,43 @@ import { getMillisecondsToTomorrow } from '../lib/date';
  *
  * @param listenDayChangesForUpdate - флаг по которому определяется, будет ли создаваться подписка на смену календарного дня
  */ export function useTodayDate(listenDayChangesForUpdate = false) {
+    const { document , window  } = useDOM();
     const [todayDate, setTodayDate] = React.useState(()=>new Date());
     React.useEffect(()=>{
-        if (!listenDayChangesForUpdate) {
+        if (!listenDayChangesForUpdate || !document || !window) {
             return;
         }
-        const timeToDayChange = getMillisecondsToTomorrow(todayDate);
-        const timeout = setTimeout(()=>{
-            setTodayDate(new Date());
-        }, timeToDayChange);
+        let timeout = undefined;
+        const recalcTimeout = ()=>{
+            if (document.visibilityState === 'visible') {
+                const now = new Date();
+                const timeToDayChange = getMillisecondsToTomorrow(now);
+                // Удаляем старый таймаут
+                window.clearTimeout(timeout);
+                // Создаем новый таймаут
+                timeout = window.setTimeout(()=>{
+                    setTodayDate(now);
+                }, timeToDayChange);
+                // Если todayDate не обновился в таймаут - обновить при заходе на вкладку
+                if (!isSameDay(todayDate, now)) {
+                    setTodayDate(now);
+                }
+            }
+        };
+        recalcTimeout();
+        // Создаем слушатель visibilitychange, чтобы предотвратить пропуск обновления стейта после заморозки вкладки
+        // Если человек ее долго не трогал или закрывал крышку ноута и тп
+        // https://developer.chrome.com/blog/page-lifecycle-api/
+        document.addEventListener('visibilitychange', recalcTimeout);
         return ()=>{
-            clearTimeout(timeout);
+            window.clearTimeout(timeout);
+            document.removeEventListener('visibilitychange', recalcTimeout);
         };
     }, [
+        document,
         listenDayChangesForUpdate,
-        todayDate
+        todayDate,
+        window
     ]);
     return todayDate;
 }

package/dist/cssm/hooks/useTodayDate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useTodayDate.ts"],"sourcesContent":["import React from 'react';\nimport { getMillisecondsToTomorrow } from '../lib/date';\n\n/**\n * Опционально обновляемая дата сегодняшнего дня\n *\n * Дата - сегодня (в соответствии с системным временем)\n *\n * Часы, минуты, секунды, миллисекунды - произвольные\n *\n * @param listenDayChangesForUpdate - флаг по которому определяется, будет ли создаваться подписка на смену календарного дня\n */\nexport function useTodayDate(listenDayChangesForUpdate = false) {\n  const [todayDate, setTodayDate] = React.useState(() => new Date());\n\n  React.useEffect(() => {\n    if (!listenDayChangesForUpdate) {\n      return;\n    }\n\n    const timeToDayChange = getMillisecondsToTomorrow(todayDate);\n\n    const timeout = setTimeout(() => {\n      setTodayDate(new Date());\n    }, timeToDayChange);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [listenDayChangesForUpdate, todayDate]);\n\n  return todayDate;\n}\n"],"names":["React","getMillisecondsToTomorrow","useTodayDate","listenDayChangesForUpdate","todayDate","setTodayDate","useState","Date","useEffect","timeToDayChange","timeout","setTimeout","clearTimeout"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,yBAAyB,QAAQ,cAAc;AAExD;;;;;;;;CAQC,GACD,OAAO,SAASC,aAAaC,4BAA4B,KAAK,EAAE;IAC9D,MAAM,CAACC,WAAWC,aAAa,GAAGL,MAAMM,QAAQ,CAAC,IAAM,IAAIC;IAE3DP,MAAMQ,SAAS,CAAC,IAAM;QACpB,IAAI,CAACL,2BAA2B;YAC9B;QACF,CAAC;QAED,MAAMM,kBAAkBR,0BAA0BG;QAElD,MAAMM,UAAUC,WAAW,IAAM;YAC/BN,aAAa,IAAIE;QACnB,GAAGE;QAEH,OAAO,IAAM;YACXG,aAAaF;QACf;IACF,GAAG;QAACP;QAA2BC;KAAU;IAEzC,OAAOA;AACT,CAAC"}
+{"version":3,"sources":["../../../src/hooks/useTodayDate.ts"],"sourcesContent":["import React from 'react';\nimport { getMillisecondsToTomorrow, isSameDay } from '../lib/date';\nimport { useDOM } from '../lib/dom';\n\n/**\n * Опционально обновляемая дата сегодняшнего дня\n *\n * Дата - сегодня (в соответствии с системным временем)\n *\n * Часы, минуты, секунды, миллисекунды - произвольные\n *\n * @param listenDayChangesForUpdate - флаг по которому определяется, будет ли создаваться подписка на смену календарного дня\n */\nexport function useTodayDate(listenDayChangesForUpdate = false) {\n  const { document, window } = useDOM();\n  const [todayDate, setTodayDate] = React.useState(() => new Date());\n\n  React.useEffect(() => {\n    if (!listenDayChangesForUpdate || !document || !window) {\n      return;\n    }\n\n    let timeout: number | undefined = undefined;\n\n    const recalcTimeout = () => {\n      if (document.visibilityState === 'visible') {\n        const now = new Date();\n\n        const timeToDayChange = getMillisecondsToTomorrow(now);\n\n        // Удаляем старый таймаут\n        window.clearTimeout(timeout);\n\n        // Создаем новый таймаут\n        timeout = window.setTimeout(() => {\n          setTodayDate(now);\n        }, timeToDayChange);\n\n        // Если todayDate не обновился в таймаут - обновить при заходе на вкладку\n        if (!isSameDay(todayDate, now)) {\n          setTodayDate(now);\n        }\n      }\n    };\n\n    recalcTimeout();\n\n    // Создаем слушатель visibilitychange, чтобы предотвратить пропуск обновления стейта после заморозки вкладки\n    // Если человек ее долго не трогал или закрывал крышку ноута и тп\n    // https://developer.chrome.com/blog/page-lifecycle-api/\n    document.addEventListener('visibilitychange', recalcTimeout);\n\n    return () => {\n      window.clearTimeout(timeout);\n      document.removeEventListener('visibilitychange', recalcTimeout);\n    };\n  }, [document, listenDayChangesForUpdate, todayDate, window]);\n\n  return todayDate;\n}\n"],"names":["React","getMillisecondsToTomorrow","isSameDay","useDOM","useTodayDate","listenDayChangesForUpdate","document","window","todayDate","setTodayDate","useState","Date","useEffect","timeout","undefined","recalcTimeout","visibilityState","now","timeToDayChange","clearTimeout","setTimeout","addEventListener","removeEventListener"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,yBAAyB,EAAEC,SAAS,QAAQ,cAAc;AACnE,SAASC,MAAM,QAAQ,aAAa;AAEpC;;;;;;;;CAQC,GACD,OAAO,SAASC,aAAaC,4BAA4B,KAAK,EAAE;IAC9D,MAAM,EAAEC,SAAQ,EAAEC,OAAM,EAAE,GAAGJ;IAC7B,MAAM,CAACK,WAAWC,aAAa,GAAGT,MAAMU,QAAQ,CAAC,IAAM,IAAIC;IAE3DX,MAAMY,SAAS,CAAC,IAAM;QACpB,IAAI,CAACP,6BAA6B,CAACC,YAAY,CAACC,QAAQ;YACtD;QACF,CAAC;QAED,IAAIM,UAA8BC;QAElC,MAAMC,gBAAgB,IAAM;YAC1B,IAAIT,SAASU,eAAe,KAAK,WAAW;gBAC1C,MAAMC,MAAM,IAAIN;gBAEhB,MAAMO,kBAAkBjB,0BAA0BgB;gBAElD,yBAAyB;gBACzBV,OAAOY,YAAY,CAACN;gBAEpB,wBAAwB;gBACxBA,UAAUN,OAAOa,UAAU,CAAC,IAAM;oBAChCX,aAAaQ;gBACf,GAAGC;gBAEH,yEAAyE;gBACzE,IAAI,CAAChB,UAAUM,WAAWS,MAAM;oBAC9BR,aAAaQ;gBACf,CAAC;YACH,CAAC;QACH;QAEAF;QAEA,4GAA4G;QAC5G,iEAAiE;QACjE,wDAAwD;QACxDT,SAASe,gBAAgB,CAAC,oBAAoBN;QAE9C,OAAO,IAAM;YACXR,OAAOY,YAAY,CAACN;YACpBP,SAASgB,mBAAmB,CAAC,oBAAoBP;QACnD;IACF,GAAG;QAACT;QAAUD;QAA2BG;QAAWD;KAAO;IAE3D,OAAOC;AACT,CAAC"}