@vkontakte/vkui 7.2.1 → 7.3.0

package/dist/cssm/components/Snackbar/subcomponents/Basic/Basic.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../../hooks/useAdaptivity';\nimport type { HTMLAttributesWithRootRef } from '../../../../types';\nimport { RootComponent } from '../../../RootComponent/RootComponent';\nimport { Paragraph } from '../../../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../../../Typography/Subhead/Subhead';\nimport styles from './Basic.module.css';\n\nconst stylesLayout = {\n  none: styles.layoutNone,\n  vertical: styles.layoutVertical,\n  horizontal: styles.layoutHorizontal,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface BasicProps {\n  /**\n   * Элемент действия.\n   * Не может использоваться одновременно с `subtitle`\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Контент в правой части, может быть иконкой 24x24\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Варианты расположения кнопки действия\n   * По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`\n   * имеет значение `vertical`, в остальных случаях `horizontal`\n   */\n  layout?: 'vertical' | 'horizontal';\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`\n   */\n  before?: React.ReactNode;\n\n  /**\n   * Задает стиль снекбара\n   */\n  mode?: 'default' | 'dark';\n\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`\n   */\n  subtitle?: React.ReactNode;\n}\n\nexport interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}\n\nexport function Basic({\n  layout: layoutProps,\n  action,\n  after,\n  before,\n  mode,\n  subtitle,\n  children,\n  ...restProps\n}: SnackbarBasicProps): React.ReactNode {\n  const { sizeY = 'none' } = useAdaptivity();\n  const layout = after || subtitle ? 'vertical' : 'none';\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.body,\n        stylesLayout[layoutProps || layout],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        mode === 'dark' && styles.modeDark,\n      )}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        <Paragraph className={styles.contentText}>{children}</Paragraph>\n        {subtitle && !action && <Subhead className={styles.contentSubtitle}>{subtitle}</Subhead>}\n\n        {action && !subtitle && <div className={styles.action}>{action}</div>}\n      </div>\n\n      {after && <div className={styles.after}>{after}</div>}\n    </RootComponent>\n  );\n}\n"],"names":["React","classNames","useAdaptivity","RootComponent","Paragraph","Subhead","styles","stylesLayout","none","layoutNone","vertical","layoutVertical","horizontal","layoutHorizontal","sizeYClassNames","sizeYNone","regular","sizeYRegular","Basic","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","sizeY","baseClassName","body","modeDark","div","className","content","contentText","contentSubtitle"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,qCAAkC;AAEhE,SAASC,aAAa,QAAQ,0CAAuC;AACrE,SAASC,SAAS,QAAQ,6CAA0C;AACpE,SAASC,OAAO,QAAQ,yCAAsC;AAC9D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,eAAe;IACnBC,MAAMF,OAAOG,UAAU;IACvBC,UAAUJ,OAAOK,cAAc;IAC/BC,YAAYN,OAAOO,gBAAgB;AACrC;AAEA,MAAMC,kBAAkB;IACtBN,MAAMF,OAAOS,SAAS;IACtBC,SAASV,OAAOW,YAAY;AAC9B;AA2CA,OAAO,SAASC,MAAM,EACpBC,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACgB;IACnB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG1B;IAC3B,MAAMiB,SAASG,SAASG,WAAW,aAAa;IAEhD,qBACE,MAACtB;QACE,GAAGwB,SAAS;QACbE,eAAe5B,WACbK,OAAOwB,IAAI,EACXvB,YAAY,CAACa,eAAeD,OAAO,EACnCS,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CJ,SAAS,UAAUlB,OAAOyB,QAAQ;;YAGnCR,wBAAU,KAACS;gBAAIC,WAAW3B,OAAOiB,MAAM;0BAAGA;;0BAE3C,MAACS;gBAAIC,WAAW3B,OAAO4B,OAAO;;kCAC5B,KAAC9B;wBAAU6B,WAAW3B,OAAO6B,WAAW;kCAAGT;;oBAC1CD,YAAY,CAACJ,wBAAU,KAAChB;wBAAQ4B,WAAW3B,OAAO8B,eAAe;kCAAGX;;oBAEpEJ,UAAU,CAACI,0BAAY,KAACO;wBAAIC,WAAW3B,OAAOe,MAAM;kCAAGA;;;;YAGzDC,uBAAS,KAACU;gBAAIC,WAAW3B,OAAOgB,KAAK;0BAAGA;;;;AAG/C"}
+{"version":3,"sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../../hooks/useAdaptivity';\nimport type { HTMLAttributesWithRootRef } from '../../../../types';\nimport { RootComponent } from '../../../RootComponent/RootComponent';\nimport { Paragraph } from '../../../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../../../Typography/Subhead/Subhead';\nimport styles from './Basic.module.css';\n\nconst stylesLayout = {\n  none: styles.layoutNone,\n  vertical: styles.layoutVertical,\n  horizontal: styles.layoutHorizontal,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  regular: styles.sizeYRegular,\n};\n\nexport interface BasicProps {\n  /**\n   * Элемент действия.\n   * Не может использоваться одновременно с `subtitle`.\n   */\n  action?: React.ReactNode;\n\n  /**\n   * Контент в правой части, может быть иконкой 24x24.\n   */\n  after?: React.ReactNode;\n\n  /**\n   * Варианты расположения кнопки действия\n   * По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`\n   * имеет значение `vertical`, в остальных случаях `horizontal`.\n   */\n  layout?: 'vertical' | 'horizontal';\n\n  /**\n   * Может быть следующими компонентами:\n   *  - цветная иконка 24x24 или 28x28 пикселя\n   *  - `<Avatar size={32} />`\n   *  - `<Image size={40} />`.\n   */\n  before?: React.ReactNode;\n\n  /**\n   * Задает стиль снекбара.\n   */\n  mode?: 'default' | 'dark';\n\n  /**\n   * Дополнительная строка текста под `children`.\n   * Не может использоваться одновременно с `action`.\n   */\n  subtitle?: React.ReactNode;\n}\n\nexport interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}\n\nexport function Basic({\n  layout: layoutProps,\n  action,\n  after,\n  before,\n  mode,\n  subtitle,\n  children,\n  ...restProps\n}: SnackbarBasicProps): React.ReactNode {\n  const { sizeY = 'none' } = useAdaptivity();\n  const layout = after || subtitle ? 'vertical' : 'none';\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.body,\n        stylesLayout[layoutProps || layout],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        mode === 'dark' && styles.modeDark,\n      )}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n\n      <div className={styles.content}>\n        <Paragraph className={styles.contentText}>{children}</Paragraph>\n        {subtitle && !action && <Subhead className={styles.contentSubtitle}>{subtitle}</Subhead>}\n\n        {action && !subtitle && <div className={styles.action}>{action}</div>}\n      </div>\n\n      {after && <div className={styles.after}>{after}</div>}\n    </RootComponent>\n  );\n}\n"],"names":["React","classNames","useAdaptivity","RootComponent","Paragraph","Subhead","styles","stylesLayout","none","layoutNone","vertical","layoutVertical","horizontal","layoutHorizontal","sizeYClassNames","sizeYNone","regular","sizeYRegular","Basic","layout","layoutProps","action","after","before","mode","subtitle","children","restProps","sizeY","baseClassName","body","modeDark","div","className","content","contentText","contentSubtitle"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,qCAAkC;AAEhE,SAASC,aAAa,QAAQ,0CAAuC;AACrE,SAASC,SAAS,QAAQ,6CAA0C;AACpE,SAASC,OAAO,QAAQ,yCAAsC;AAC9D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,eAAe;IACnBC,MAAMF,OAAOG,UAAU;IACvBC,UAAUJ,OAAOK,cAAc;IAC/BC,YAAYN,OAAOO,gBAAgB;AACrC;AAEA,MAAMC,kBAAkB;IACtBN,MAAMF,OAAOS,SAAS;IACtBC,SAASV,OAAOW,YAAY;AAC9B;AA2CA,OAAO,SAASC,MAAM,EACpBC,QAAQC,WAAW,EACnBC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACgB;IACnB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG1B;IAC3B,MAAMiB,SAASG,SAASG,WAAW,aAAa;IAEhD,qBACE,MAACtB;QACE,GAAGwB,SAAS;QACbE,eAAe5B,WACbK,OAAOwB,IAAI,EACXvB,YAAY,CAACa,eAAeD,OAAO,EACnCS,UAAU,aAAad,eAAe,CAACc,MAAM,EAC7CJ,SAAS,UAAUlB,OAAOyB,QAAQ;;YAGnCR,wBAAU,KAACS;gBAAIC,WAAW3B,OAAOiB,MAAM;0BAAGA;;0BAE3C,MAACS;gBAAIC,WAAW3B,OAAO4B,OAAO;;kCAC5B,KAAC9B;wBAAU6B,WAAW3B,OAAO6B,WAAW;kCAAGT;;oBAC1CD,YAAY,CAACJ,wBAAU,KAAChB;wBAAQ4B,WAAW3B,OAAO8B,eAAe;kCAAGX;;oBAEpEJ,UAAU,CAACI,0BAAY,KAACO;wBAAIC,WAAW3B,OAAOe,MAAM;kCAAGA;;;;YAGzDC,uBAAS,KAACU;gBAAIC,WAAW3B,OAAOgB,KAAK;0BAAGA;;;;AAG/C"}

package/dist/cssm/components/Snackbar/types.js

@@ -1,3 +1,3 @@
-export { };
+/* eslint-disable jsdoc/require-jsdoc */ export { };
 
 //# sourceMappingURL=types.js.map

package/dist/cssm/components/Snackbar/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Snackbar/types.ts"],"sourcesContent":["export type SnackbarPlacement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end';\n\nexport type ShiftData = {\n  x: number;\n  y: number;\n  direction: number | null;\n  width: number;\n  height: number;\n  shifted: boolean;\n  isDesktop: boolean;\n};\n"],"names":[],"mappings":"AAQA,WAQE"}
+{"version":3,"sources":["../../../../src/components/Snackbar/types.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nexport type SnackbarPlacement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end';\n\nexport type ShiftData = {\n  x: number;\n  y: number;\n  direction: number | null;\n  width: number;\n  height: number;\n  shifted: boolean;\n  isDesktop: boolean;\n};\n"],"names":[],"mappings":"AAAA,sCAAsC,GAUtC,WAQE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   *\n   * Принимает значения дизайн-системы, числовые значения и css-переменные\n   */\n  size?: SpacingSizeProp;\n  /**\n   * @deprecated 7.0.0\n   *\n   * Свойство устарело и будет удалено в v8.\n   */\n  children?: React.ReactNode;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', ...restProps }: SpacingProps): React.ReactNode => {\n  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n    CUSTOM_CSS_TOKEN_FOR_USER_GAP,\n    size,\n  );\n  return (\n    <RootComponent\n      {...restProps}\n      baseStyle={spacingSizeStyle}\n      baseClassName={classNames(styles.host, spacingSizeClassName)}\n    />\n  );\n};\n"],"names":["React","classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","restProps","spacingSizeClassName","spacingSizeStyle","baseStyle","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAgB7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAM,CAACC,sBAAsBC,iBAAiB,GAAGR,mBAC/CG,+BACAE;IAEF,qBACE,KAACJ;QACE,GAAGK,SAAS;QACbG,WAAWD;QACXE,eAAeX,WAAWG,OAAOS,IAAI,EAAEJ;;AAG7C,EAAE"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Spacing.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';\n\nexport interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Высота спэйсинга.\n   *\n   * Принимает значения дизайн-системы, числовые значения и css-переменные.\n   */\n  size?: SpacingSizeProp;\n  /**\n   * @deprecated 7.0.0.\n   *\n   * Свойство устарело и будет удалено в v8.\n   */\n  children?: React.ReactNode;\n}\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 'm', ...restProps }: SpacingProps): React.ReactNode => {\n  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n    CUSTOM_CSS_TOKEN_FOR_USER_GAP,\n    size,\n  );\n  return (\n    <RootComponent\n      {...restProps}\n      baseStyle={spacingSizeStyle}\n      baseClassName={classNames(styles.host, spacingSizeClassName)}\n    />\n  );\n};\n"],"names":["React","classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_GAP","Spacing","size","restProps","spacingSizeClassName","spacingSizeStyle","baseStyle","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,gCAAgC,gCAAgC;AAgB7E;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,OAAO,GAAG,EAAE,GAAGC,WAAyB;IAChE,MAAM,CAACC,sBAAsBC,iBAAiB,GAAGR,mBAC/CG,+BACAE;IAEF,qBACE,KAACJ;QACE,GAAGK,SAAS;QACbG,WAAWD;QACXE,eAAeX,WAAWG,OAAOS,IAAI,EAAEJ;;AAG7C,EAAE"}

package/dist/cssm/components/Spinner/Spinner.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from "@vkontakte/icons";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
+import { defineComponentDisplayNames } from "../../lib/react/defineComponentDisplayNames.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { SpinnerAnimation } from "./SpinnerAnimation.js";
+import { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from "./icons.js";
 import styles from "./Spinner.module.css";
 const spinnerIconMap = {
     s: Icon16Spinner,
@@ -14,7 +15,8 @@ const spinnerIconMap = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Spinner
- */ export const Spinner = /*#__PURE__*/ React.memo(({ size = 'm', children = 'Загружается...', disableAnimation = false, noColor = false, ...restProps })=>{
+ */ // eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames
+export const Spinner = /*#__PURE__*/ React.memo(({ size = 'm', children = 'Загружается...', disableAnimation = false, noColor = false, ...restProps })=>{
     const SpinnerIcon = spinnerIconMap[size];
     return /*#__PURE__*/ _jsxs(RootComponent, {
         Component: "span",
@@ -33,6 +35,8 @@ const spinnerIconMap = {
         ]
     });
 });
-Spinner.displayName = 'Spinner';
+if (process.env.NODE_ENV !== 'production') {
+    defineComponentDisplayNames(Spinner, 'Spinner');
+}
 
 //# sourceMappingURL=Spinner.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { SpinnerAnimation } from './SpinnerAnimation';\nimport styles from './Spinner.module.css';\n\nconst spinnerIconMap = {\n  s: Icon16Spinner,\n  m: Icon24Spinner,\n  l: Icon32Spinner,\n  xl: Icon44Spinner,\n};\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  size?: 's' | 'm' | 'l' | 'xl';\n  disableAnimation?: boolean;\n  /**\n   * Задать цвет можно будет через свойство color родителя\n   */\n  noColor?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\nexport const Spinner: React.FC<SpinnerProps> = React.memo(\n  ({\n    size = 'm',\n    children = 'Загружается...',\n    disableAnimation = false,\n    noColor = false,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = spinnerIconMap[size];\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={classNames(styles.host, noColor && styles.noColor)}\n      >\n        <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","classNames","hasReactNode","RootComponent","VisuallyHidden","SpinnerAnimation","styles","spinnerIconMap","s","m","l","xl","Spinner","memo","size","children","disableAnimation","noColor","restProps","SpinnerIcon","Component","role","baseClassName","host","displayName"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAC9F,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,GAAGX;IACHY,GAAGX;IACHY,GAAGX;IACHY,IAAIX;AACN;AAWA;;CAEC,GACD,OAAO,MAAMY,wBAAkChB,MAAMiB,IAAI,CACvD,CAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EACf,GAAGC,WACU;IACb,MAAMC,cAAcZ,cAAc,CAACO,KAAK;IAExC,qBACE,MAACX;QACCiB,WAAU;QACVC,MAAK;QACJ,GAAGH,SAAS;QACbI,eAAerB,WAAWK,OAAOiB,IAAI,EAAEN,WAAWX,OAAOW,OAAO;;0BAEhE,KAACE;0BAAaH,mBAAmB,qBAAO,KAACX;oBAAiBS,MAAMA;;;YAC/DZ,aAAaa,2BAAa,KAACX;0BAAgBW;;;;AAGlD,GACA;AAEFH,QAAQY,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { SpinnerAnimation } from './SpinnerAnimation';\nimport { Icon16Spinner, Icon24Spinner, Icon32Spinner, Icon44Spinner } from './icons';\nimport styles from './Spinner.module.css';\n\nconst spinnerIconMap = {\n  s: Icon16Spinner,\n  m: Icon24Spinner,\n  l: Icon32Spinner,\n  xl: Icon44Spinner,\n};\n\nexport interface SpinnerProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {\n  /**\n   * Размер спиннера.\n   */\n  size?: 's' | 'm' | 'l' | 'xl';\n  /**\n   * Отключение анимации.\n   */\n  disableAnimation?: boolean;\n  /**\n   * Задать цвет можно будет через свойство color родителя.\n   */\n  noColor?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spinner\n */\n// eslint-disable-next-line react/display-name -- используется defineComponentDisplayNames\nexport const Spinner = React.memo(\n  ({\n    size = 'm',\n    children = 'Загружается...',\n    disableAnimation = false,\n    noColor = false,\n    ...restProps\n  }: SpinnerProps) => {\n    const SpinnerIcon = spinnerIconMap[size];\n\n    return (\n      <RootComponent\n        Component=\"span\"\n        role=\"status\"\n        {...restProps}\n        baseClassName={classNames(styles.host, noColor && styles.noColor)}\n      >\n        <SpinnerIcon>{disableAnimation ? null : <SpinnerAnimation size={size} />}</SpinnerIcon>\n        {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}\n      </RootComponent>\n    );\n  },\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(Spinner, 'Spinner');\n}\n"],"names":["React","classNames","hasReactNode","defineComponentDisplayNames","RootComponent","VisuallyHidden","SpinnerAnimation","Icon16Spinner","Icon24Spinner","Icon32Spinner","Icon44Spinner","styles","spinnerIconMap","s","m","l","xl","Spinner","memo","size","children","disableAnimation","noColor","restProps","SpinnerIcon","Component","role","baseClassName","host","process","env","NODE_ENV"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,2BAA2B,QAAQ,iDAA8C;AAE1F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,aAAa,EAAEC,aAAa,EAAEC,aAAa,EAAEC,aAAa,QAAQ,aAAU;AACrF,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,iBAAiB;IACrBC,GAAGN;IACHO,GAAGN;IACHO,GAAGN;IACHO,IAAIN;AACN;AAiBA;;CAEC,GACD,0FAA0F;AAC1F,OAAO,MAAMO,wBAAUjB,MAAMkB,IAAI,CAC/B,CAAC,EACCC,OAAO,GAAG,EACVC,WAAW,gBAAgB,EAC3BC,mBAAmB,KAAK,EACxBC,UAAU,KAAK,EACf,GAAGC,WACU;IACb,MAAMC,cAAcZ,cAAc,CAACO,KAAK;IAExC,qBACE,MAACf;QACCqB,WAAU;QACVC,MAAK;QACJ,GAAGH,SAAS;QACbI,eAAe1B,WAAWU,OAAOiB,IAAI,EAAEN,WAAWX,OAAOW,OAAO;;0BAEhE,KAACE;0BAAaH,mBAAmB,qBAAO,KAACf;oBAAiBa,MAAMA;;;YAC/DjB,aAAakB,2BAAa,KAACf;0BAAgBe;;;;AAGlD,GACA;AAEF,IAAIS,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC5B,4BAA4Bc,SAAS;AACvC"}

package/dist/cssm/components/Spinner/SpinnerAnimation.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useReducedMotion } from "../../lib/animation/index.js";
+/* eslint-disable jsdoc/require-jsdoc */ import { useReducedMotion } from "../../lib/animation/index.js";
 export function SpinnerAnimation({ size = 'm' }) {
     const isReducedMotion = useReducedMotion();
     if (isReducedMotion === undefined) {

package/dist/cssm/components/Spinner/SpinnerAnimation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Spinner/SpinnerAnimation.tsx"],"sourcesContent":["'use client';\n\nimport { useReducedMotion } from '../../lib/animation';\nimport { type SpinnerProps } from './Spinner';\n\ninterface SpinnerAnimationProps {\n  size: SpinnerProps['size'];\n}\n\nexport function SpinnerAnimation({ size = 'm' }: SpinnerAnimationProps) {\n  const isReducedMotion = useReducedMotion();\n\n  if (isReducedMotion === undefined) {\n    return null;\n  }\n\n  if (isReducedMotion) {\n    return (\n      <animate\n        attributeName=\"opacity\"\n        keyTimes=\"0; 0.5; 1\"\n        values=\"1; 0.1; 1\"\n        begin=\"0s\"\n        dur=\"2s\"\n        repeatCount=\"indefinite\"\n      />\n    );\n  }\n\n  const center = { s: 8, m: 12, l: 16, xl: 22 }[size];\n  return (\n    <animateTransform\n      attributeType=\"XML\"\n      attributeName=\"transform\"\n      type=\"rotate\"\n      from={`0 ${center} ${center}`}\n      to={`360 ${center} ${center}`}\n      dur=\"0.7s\"\n      repeatCount=\"indefinite\"\n    />\n  );\n}\n"],"names":["useReducedMotion","SpinnerAnimation","size","isReducedMotion","undefined","animate","attributeName","keyTimes","values","begin","dur","repeatCount","center","s","m","l","xl","animateTransform","attributeType","type","from","to"],"mappings":"AAAA;;AAEA,SAASA,gBAAgB,QAAQ,+BAAsB;AAOvD,OAAO,SAASC,iBAAiB,EAAEC,OAAO,GAAG,EAAyB;IACpE,MAAMC,kBAAkBH;IAExB,IAAIG,oBAAoBC,WAAW;QACjC,OAAO;IACT;IAEA,IAAID,iBAAiB;QACnB,qBACE,KAACE;YACCC,eAAc;YACdC,UAAS;YACTC,QAAO;YACPC,OAAM;YACNC,KAAI;YACJC,aAAY;;IAGlB;IAEA,MAAMC,SAAS;QAAEC,GAAG;QAAGC,GAAG;QAAIC,GAAG;QAAIC,IAAI;IAAG,CAAC,CAACd,KAAK;IACnD,qBACE,KAACe;QACCC,eAAc;QACdZ,eAAc;QACda,MAAK;QACLC,MAAM,CAAC,EAAE,EAAER,OAAO,CAAC,EAAEA,QAAQ;QAC7BS,IAAI,CAAC,IAAI,EAAET,OAAO,CAAC,EAAEA,QAAQ;QAC7BF,KAAI;QACJC,aAAY;;AAGlB"}
+{"version":3,"sources":["../../../../src/components/Spinner/SpinnerAnimation.tsx"],"sourcesContent":["'use client';\n/* eslint-disable jsdoc/require-jsdoc */\n\nimport { useReducedMotion } from '../../lib/animation';\nimport { type SpinnerProps } from './Spinner';\n\ninterface SpinnerAnimationProps {\n  size: SpinnerProps['size'];\n}\n\nexport function SpinnerAnimation({ size = 'm' }: SpinnerAnimationProps) {\n  const isReducedMotion = useReducedMotion();\n\n  if (isReducedMotion === undefined) {\n    return null;\n  }\n\n  if (isReducedMotion) {\n    return (\n      <animate\n        attributeName=\"opacity\"\n        keyTimes=\"0; 0.5; 1\"\n        values=\"1; 0.1; 1\"\n        begin=\"0s\"\n        dur=\"2s\"\n        repeatCount=\"indefinite\"\n      />\n    );\n  }\n\n  const center = { s: 8, m: 12, l: 16, xl: 22 }[size];\n  return (\n    <animateTransform\n      attributeType=\"XML\"\n      attributeName=\"transform\"\n      type=\"rotate\"\n      from={`0 ${center} ${center}`}\n      to={`360 ${center} ${center}`}\n      dur=\"0.7s\"\n      repeatCount=\"indefinite\"\n    />\n  );\n}\n"],"names":["useReducedMotion","SpinnerAnimation","size","isReducedMotion","undefined","animate","attributeName","keyTimes","values","begin","dur","repeatCount","center","s","m","l","xl","animateTransform","attributeType","type","from","to"],"mappings":"AAAA;;AACA,sCAAsC,GAEtC,SAASA,gBAAgB,QAAQ,+BAAsB;AAOvD,OAAO,SAASC,iBAAiB,EAAEC,OAAO,GAAG,EAAyB;IACpE,MAAMC,kBAAkBH;IAExB,IAAIG,oBAAoBC,WAAW;QACjC,OAAO;IACT;IAEA,IAAID,iBAAiB;QACnB,qBACE,KAACE;YACCC,eAAc;YACdC,UAAS;YACTC,QAAO;YACPC,OAAM;YACNC,KAAI;YACJC,aAAY;;IAGlB;IAEA,MAAMC,SAAS;QAAEC,GAAG;QAAGC,GAAG;QAAIC,GAAG;QAAIC,IAAI;IAAG,CAAC,CAACd,KAAK;IACnD,qBACE,KAACe;QACCC,eAAc;QACdZ,eAAc;QACda,MAAK;QACLC,MAAM,CAAC,EAAE,EAAER,OAAO,CAAC,EAAEA,QAAQ;QAC7BS,IAAI,CAAC,IAAI,EAAET,OAAO,CAAC,EAAEA,QAAQ;QAC7BF,KAAI;QACJC,aAAY;;AAGlB"}

package/dist/cssm/components/Spinner/icons.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+export function Icon16Spinner({ children }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        "aria-hidden": "true",
+        width: "16",
+        height: "16",
+        children: /*#__PURE__*/ _jsx("path", {
+            fill: "currentColor",
+            d: "M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z",
+            children: children
+        })
+    });
+}
+export function Icon24Spinner({ children }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        "aria-hidden": "true",
+        width: "24",
+        height: "24",
+        children: /*#__PURE__*/ _jsx("path", {
+            fill: "currentColor",
+            d: "M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123",
+            children: children
+        })
+    });
+}
+export function Icon32Spinner({ children }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        "aria-hidden": "true",
+        width: "32",
+        height: "32",
+        children: /*#__PURE__*/ _jsx("path", {
+            fill: "currentColor",
+            d: "M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16",
+            children: children
+        })
+    });
+}
+export function Icon44Spinner({ children }) {
+    return /*#__PURE__*/ _jsx("svg", {
+        "aria-hidden": "true",
+        width: "44",
+        height: "44",
+        children: /*#__PURE__*/ _jsx("path", {
+            fill: "currentColor",
+            d: "M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22",
+            children: children
+        })
+    });
+}
+
+//# sourceMappingURL=icons.js.map

package/dist/cssm/components/Spinner/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Spinner/icons.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport function Icon16Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg aria-hidden=\"true\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\n        d=\"M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon24Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg aria-hidden=\"true\" width=\"24\" height=\"24\">\n      <path\n        fill=\"currentColor\"\n        d=\"M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon32Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg aria-hidden=\"true\" width=\"32\" height=\"32\">\n      <path\n        fill=\"currentColor\"\n        d=\"M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n\nexport function Icon44Spinner({ children }: React.PropsWithChildren) {\n  return (\n    <svg aria-hidden=\"true\" width=\"44\" height=\"44\">\n      <path\n        fill=\"currentColor\"\n        d=\"M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22\"\n      >\n        {children}\n      </path>\n    </svg>\n  );\n}\n"],"names":["React","Icon16Spinner","children","svg","aria-hidden","width","height","path","fill","d","Icon24Spinner","Icon32Spinner","Icon44Spinner"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,SAASC,cAAc,EAAEC,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACxC,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDP;;;AAIT;AAEA,OAAO,SAASQ,cAAc,EAAER,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACxC,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDP;;;AAIT;AAEA,OAAO,SAASS,cAAc,EAAET,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACxC,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDP;;;AAIT;AAEA,OAAO,SAASU,cAAc,EAAEV,QAAQ,EAA2B;IACjE,qBACE,KAACC;QAAIC,eAAY;QAAOC,OAAM;QAAKC,QAAO;kBACxC,cAAA,KAACC;YACCC,MAAK;YACLC,GAAE;sBAEDP;;;AAIT"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles.viewWidthNone, 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles.viewWidthTabletMinus,\n  smallTabletPlus: styles.viewWidthSmallTabletPlus,\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps): React.ReactNode => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    animate: animateProp,\n    fixed,\n    autoSpaced,\n    stretchedOnMobile,\n    getRootRef,\n    ...restProps\n  } = props;\n  const baseRef = useExternRef(getRootRef);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = React.useMemo(\n    () => ({\n      colRef: baseRef,\n      animate,\n    }),\n    [animate, baseRef],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseStyle={{\n        width,\n        maxWidth,\n        minWidth,\n      }}\n      getRootRef={baseRef}\n      baseClassName={classNames(\n        styles.host,\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        autoSpaced && classNames(styles.spacedAuto, 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles.fixed,\n        stretchedOnMobile && styles.stretchedOnMobile,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles.fixedInner}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","SplitCol","props","children","width","maxWidth","minWidth","fixed","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","useMemo","colRef","baseStyle","baseClassName","host","spacedAuto","Provider","value","div","className","fixedInner"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,gCAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,0BAAuB;AAE/F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGpB;IACtB,MAAM,CAACqB,SAASC,WAAW,GAAGxB,MAAMyB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAevB;IAErBJ,MAAM4B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYjB,UAAUyB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAxB,0BAA0BoB,aAAaV,eAAe,EAAEc;QACxD,OAAO;YACLvB,6BAA6BmB,aAAaV,eAAe,EAAEc;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAqBA;;CAEC,GACD,OAAO,MAAMU,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRf,SAASF,WAAW,EACpBkB,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGT;IACJ,MAAMU,UAAUzC,aAAauC;IAC7B,MAAM,EAAEpB,SAAS,EAAE,GAAGpB;IACtB,MAAMqB,UAAUH,qBAAqBC;IAErC,MAAMwB,eAAe7C,MAAM8C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRrB;QACF,CAAA,GACA;QAACA;QAASqB;KAAQ;IAGpB,qBACE,KAACnC;QACE,GAAGkC,SAAS;QACbK,WAAW;YACTZ;YACAC;YACAC;QACF;QACAI,YAAYE;QACZK,eAAehD,WACbU,OAAOuC,IAAI,EACX5C,qBAAqBM,sBAAsBU,YAC3CkB,cAAcvC,WAAWU,OAAOwC,UAAU,EAAE,sCAC5CZ,SAAS5B,OAAO4B,KAAK,EACrBE,qBAAqB9B,OAAO8B,iBAAiB;kBAG/C,cAAA,KAAC/B,gBAAgB0C,QAAQ;YAACC,OAAOR;sBAC9BN,sBAAQ,KAACe;gBAAIC,WAAW5C,OAAO6C,UAAU;0BAAGrB;iBAAkBA;;;AAIvE,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles.viewWidthNone, 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles.viewWidthTabletMinus,\n  smallTabletPlus: styles.viewWidthSmallTabletPlus,\n  tabletPlus: 'vkuiInternalSplitCol--viewWidth-tabletPlus',\n};\n\nfunction useTransitionAnimate(animateProp?: boolean) {\n  const { viewWidth } = useAdaptivity();\n  const [animate, setAnimate] = React.useState(Boolean(animateProp));\n  const mediaQueries = useMediaQueries();\n\n  React.useEffect(() => {\n    if (animateProp !== undefined) {\n      setAnimate(animateProp);\n      return;\n    }\n\n    if (viewWidth !== undefined) {\n      setAnimate(viewWidth < ViewWidth.TABLET);\n      return;\n    }\n\n    // eslint-disable-next-line no-restricted-properties\n    const listener = () => setAnimate(!mediaQueries.smallTabletPlus.matches);\n    listener();\n\n    matchMediaListAddListener(mediaQueries.smallTabletPlus, listener);\n    return () => {\n      matchMediaListRemoveListener(mediaQueries.smallTabletPlus, listener);\n    };\n  }, [animateProp, viewWidth, mediaQueries]);\n\n  return animate;\n}\n\nexport interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Ширина колонки.\n   */\n  width?: number | string;\n  /**\n   * Максимальная ширина колонки.\n   */\n  maxWidth?: number | string;\n  /**\n   * Минимальная ширина колонки.\n   */\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации.\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`.\n   */\n  autoSpaced?: boolean;\n  /**\n   * Фиксированное положение колонки.\n   */\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`.\n   */\n  stretchedOnMobile?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps): React.ReactNode => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    animate: animateProp,\n    fixed,\n    autoSpaced,\n    stretchedOnMobile,\n    getRootRef,\n    ...restProps\n  } = props;\n  const baseRef = useExternRef(getRootRef);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = React.useMemo(\n    () => ({\n      colRef: baseRef,\n      animate,\n    }),\n    [animate, baseRef],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseStyle={{\n        width,\n        maxWidth,\n        minWidth,\n      }}\n      getRootRef={baseRef}\n      baseClassName={classNames(\n        styles.host,\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        autoSpaced && classNames(styles.spacedAuto, 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles.fixed,\n        stretchedOnMobile && styles.stretchedOnMobile,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles.fixedInner}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useMediaQueries","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","RootComponent","SplitColContext","styles","breakpointClassNames","none","viewWidthNone","tabletMinus","viewWidthTabletMinus","smallTabletPlus","viewWidthSmallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","SplitCol","props","children","width","maxWidth","minWidth","fixed","autoSpaced","stretchedOnMobile","getRootRef","restProps","baseRef","contextValue","useMemo","colRef","baseStyle","baseClassName","host","spacedAuto","Provider","value","div","className","fixedInner"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,gCAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,0BAAuB;AAE/F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,eAAe,QAAQ,uBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,OAAOG,aAAa,EAAE;IACvCC,aAAaJ,OAAOK,oBAAoB;IACxCC,iBAAiBN,OAAOO,wBAAwB;IAChDC,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB;IACjD,MAAM,EAAEC,SAAS,EAAE,GAAGpB;IACtB,MAAM,CAACqB,SAASC,WAAW,GAAGxB,MAAMyB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAevB;IAErBJ,MAAM4B,SAAS,CAAC;QACd,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF;QAEA,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYjB,UAAUyB,MAAM;YACvC;QACF;QAEA,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaV,eAAe,CAACe,OAAO;QACvED;QAEAxB,0BAA0BoB,aAAaV,eAAe,EAAEc;QACxD,OAAO;YACLvB,6BAA6BmB,aAAaV,eAAe,EAAEc;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AAiCA;;CAEC,GACD,OAAO,MAAMU,WAAW,CAACC;IACvB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRf,SAASF,WAAW,EACpBkB,KAAK,EACLC,UAAU,EACVC,iBAAiB,EACjBC,UAAU,EACV,GAAGC,WACJ,GAAGT;IACJ,MAAMU,UAAUzC,aAAauC;IAC7B,MAAM,EAAEpB,SAAS,EAAE,GAAGpB;IACtB,MAAMqB,UAAUH,qBAAqBC;IAErC,MAAMwB,eAAe7C,MAAM8C,OAAO,CAChC,IAAO,CAAA;YACLC,QAAQH;YACRrB;QACF,CAAA,GACA;QAACA;QAASqB;KAAQ;IAGpB,qBACE,KAACnC;QACE,GAAGkC,SAAS;QACbK,WAAW;YACTZ;YACAC;YACAC;QACF;QACAI,YAAYE;QACZK,eAAehD,WACbU,OAAOuC,IAAI,EACX5C,qBAAqBM,sBAAsBU,YAC3CkB,cAAcvC,WAAWU,OAAOwC,UAAU,EAAE,sCAC5CZ,SAAS5B,OAAO4B,KAAK,EACrBE,qBAAqB9B,OAAO8B,iBAAiB;kBAG/C,cAAA,KAAC/B,gBAAgB0C,QAAQ;YAACC,OAAOR;sBAC9BN,sBAAQ,KAACe;gBAAIC,WAAW5C,OAAO6C,UAAU;0BAAGrB;iBAAkBA;;;AAIvE,EAAE"}

package/dist/cssm/components/SplitCol/SplitColContext.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
 export const SplitColContext = /*#__PURE__*/ React.createContext({
     colRef: null,
     animate: true

package/dist/cssm/components/SplitCol/SplitColContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement | null> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext: React.Context<SplitColContextProps> =\n  React.createContext<SplitColContextProps>({\n    colRef: null,\n    animate: true,\n  });\n\nexport const useSplitCol = (): SplitColContextProps => React.useContext(SplitColContext);\n"],"names":["React","SplitColContext","createContext","colRef","animate","useSplitCol","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,gCACXD,MAAME,aAAa,CAAuB;IACxCC,QAAQ;IACRC,SAAS;AACX,GAAG;AAEL,OAAO,MAAMC,cAAc,IAA4BL,MAAMM,UAAU,CAACL,iBAAiB"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitColContext.tsx"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\n\nexport interface SplitColContextProps {\n  colRef: React.RefObject<HTMLDivElement | null> | null;\n  animate: boolean;\n}\n\nexport const SplitColContext: React.Context<SplitColContextProps> =\n  React.createContext<SplitColContextProps>({\n    colRef: null,\n    animate: true,\n  });\n\nexport const useSplitCol = (): SplitColContextProps => React.useContext(SplitColContext);\n"],"names":["React","SplitColContext","createContext","colRef","animate","useSplitCol","useContext"],"mappings":"AAAA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAO/B,OAAO,MAAMC,gCACXD,MAAME,aAAa,CAAuB;IACxCC,QAAQ;IACRC,SAAS;AACX,GAAG;AAEL,OAAO,MAAMC,cAAc,IAA4BL,MAAMM,UAAU,CAACL,iBAAiB"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated будет удалeно в **VKUI v8**.\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated будет удалeно в **VKUI v8**.\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  modal?: React.ReactNode;\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  modal,\n  popout,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={getRootRef}>\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n          className,\n        )}\n      >\n        {children}\n        {modal}\n        {popout}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","styles","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","div","host","ios","ref","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,OAAOC,YAAY,2BAA2B;AA4B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWZ;IAEjB,qBACE,MAACa;QAAIN,WAAWR,WAAWE,OAAOa,IAAI,EAAEF,aAAa,SAASX,OAAOc,GAAG;QAAGC,KAAKX;;YAC7EF;0BACD,MAACU;gBACE,GAAGF,SAAS;gBACbK,KAAKV;gBACLC,WAAWR,WACTE,OAAOgB,KAAK,EACZ,CAAC,CAACd,UAAUF,OAAOiB,WAAW,EAC9BV,UAAUP,OAAOkB,WAAW,EAC5BZ;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitLayout/SplitLayout.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './SplitLayout.module.css';\n\nexport interface SplitLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.\n   *\n   * @deprecated Будет удалeно в **VKUI v8**.\n   * Начиная с **VKUI v7** компоненты можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  popout?: React.ReactNode;\n  /**\n   * Свойство для отрисовки `ModalRoot`.\n   *\n   * @deprecated Будет удалeно в **VKUI v8**.\n   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом\n   * месте приложения в пределах `AppRoot`.\n   */\n  modal?: React.ReactNode;\n  /**\n   * Компонент для отрисовки заголовка.\n   */\n  header?: React.ReactNode;\n  /**\n   * Центрирует контент.\n   */\n  center?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitLayout\n */\nexport const SplitLayout = ({\n  header,\n  children,\n  getRootRef,\n  getRef,\n  className,\n  center,\n  modal,\n  popout,\n  ...restProps\n}: SplitLayoutProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={getRootRef}>\n      {header}\n      <div\n        {...restProps}\n        ref={getRef}\n        className={classNames(\n          styles.inner,\n          !!header && styles.innerHeader,\n          center && styles.innerCenter,\n          className,\n        )}\n      >\n        {children}\n        {modal}\n        {popout}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","styles","SplitLayout","header","children","getRootRef","getRef","className","center","modal","popout","restProps","platform","div","host","ios","ref","inner","innerHeader","innerCenter"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,OAAOC,YAAY,2BAA2B;AA+B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,MAAM,EACN,GAAGC,WACc;IACjB,MAAMC,WAAWZ;IAEjB,qBACE,MAACa;QAAIN,WAAWR,WAAWE,OAAOa,IAAI,EAAEF,aAAa,SAASX,OAAOc,GAAG;QAAGC,KAAKX;;YAC7EF;0BACD,MAACU;gBACE,GAAGF,SAAS;gBACbK,KAAKV;gBACLC,WAAWR,WACTE,OAAOgB,KAAK,EACZ,CAAC,CAACd,UAAUF,OAAOiB,WAAW,EAC9BV,UAAUP,OAAOkB,WAAW,EAC5BZ;;oBAGDH;oBACAK;oBACAC;;;;;AAIT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  type HorizontalScrollProps,\n  type ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  fixed?: boolean;\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  fixed = false,\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps): React.ReactNode => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (fixed) {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent baseClassName={fixed && styles.modeFixed} {...restProps}>\n      <ScrollWrapper className={styles.in} {...scrollWrapperProps}>\n        <ul className={styles.scrollIn}>\n          {React.Children.map(children, (child, idx) =>\n            hasReactNode(child) ? (\n              <li key={idx} className={styles.item}>\n                {child}\n              </li>\n            ) : null,\n          )}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["React","hasReactNode","HorizontalScroll","RootComponent","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","fixed","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","modeFixed","className","in","ul","scrollIn","Children","map","child","idx","li","item"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SACEC,gBAAgB,QAGX,0CAAuC;AAC9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,gCAAgC;AAWnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,QAAQ,KAAK,EACbC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EACvB,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,OAAO;QACTO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBd;QAChBe,qBAAqB;YACnBN;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,KAACX;QAAce,eAAeT,SAASL,OAAOe,SAAS;QAAG,GAAGJ,SAAS;kBACpE,cAAA,KAACC;YAAcI,WAAWhB,OAAOiB,EAAE;YAAG,GAAGJ,kBAAkB;sBACzD,cAAA,KAACK;gBAAGF,WAAWhB,OAAOmB,QAAQ;0BAC3BvB,MAAMwB,QAAQ,CAACC,GAAG,CAACf,UAAU,CAACgB,OAAOC,MACpC1B,aAAayB,uBACX,KAACE;wBAAaR,WAAWhB,OAAOyB,IAAI;kCACjCH;uBADMC,OAGP;;;;AAMhB,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationBar/SubnavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  HorizontalScroll,\n  type HorizontalScrollProps,\n  type ScrollPositionHandler,\n} from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './SubnavigationBar.module.css';\n\nexport interface SubnavigationBarProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    Pick<\n      HorizontalScrollProps,\n      'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'\n    > {\n  /**\n   * Отключение возможности прокручивания компонента по горизонтали.\n   */\n  fixed?: boolean;\n}\n\nconst defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;\n\nconst defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationBar\n */\nexport const SubnavigationBar = ({\n  fixed = false,\n  children,\n  showArrows = true,\n  getScrollToLeft = defaultScrollToLeft,\n  getScrollToRight = defaultScrollToRight,\n  scrollAnimationDuration,\n  ...restProps\n}: SubnavigationBarProps): React.ReactNode => {\n  let ScrollWrapper: React.ElementType;\n  let scrollWrapperProps = {};\n\n  if (fixed) {\n    ScrollWrapper = 'div';\n  } else {\n    ScrollWrapper = HorizontalScroll;\n    scrollWrapperProps = {\n      showArrows,\n      getScrollToLeft,\n      getScrollToRight,\n      scrollAnimationDuration,\n    };\n  }\n\n  return (\n    <RootComponent baseClassName={fixed && styles.modeFixed} {...restProps}>\n      <ScrollWrapper className={styles.in} {...scrollWrapperProps}>\n        <ul className={styles.scrollIn}>\n          {React.Children.map(children, (child, idx) =>\n            hasReactNode(child) ? (\n              <li key={idx} className={styles.item}>\n                {child}\n              </li>\n            ) : null,\n          )}\n        </ul>\n      </ScrollWrapper>\n    </RootComponent>\n  );\n};\n"],"names":["React","hasReactNode","HorizontalScroll","RootComponent","styles","defaultScrollToLeft","x","defaultScrollToRight","SubnavigationBar","fixed","children","showArrows","getScrollToLeft","getScrollToRight","scrollAnimationDuration","restProps","ScrollWrapper","scrollWrapperProps","baseClassName","modeFixed","className","in","ul","scrollIn","Children","map","child","idx","li","item"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAE/C,SACEC,gBAAgB,QAGX,0CAAuC;AAC9C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,gCAAgC;AAcnD,MAAMC,sBAA6C,CAACC,IAAMA,IAAI;AAE9D,MAAMC,uBAA8C,CAACD,IAAMA,IAAI;AAE/D;;CAEC,GACD,OAAO,MAAME,mBAAmB,CAAC,EAC/BC,QAAQ,KAAK,EACbC,QAAQ,EACRC,aAAa,IAAI,EACjBC,kBAAkBP,mBAAmB,EACrCQ,mBAAmBN,oBAAoB,EACvCO,uBAAuB,EACvB,GAAGC,WACmB;IACtB,IAAIC;IACJ,IAAIC,qBAAqB,CAAC;IAE1B,IAAIR,OAAO;QACTO,gBAAgB;IAClB,OAAO;QACLA,gBAAgBd;QAChBe,qBAAqB;YACnBN;YACAC;YACAC;YACAC;QACF;IACF;IAEA,qBACE,KAACX;QAAce,eAAeT,SAASL,OAAOe,SAAS;QAAG,GAAGJ,SAAS;kBACpE,cAAA,KAACC;YAAcI,WAAWhB,OAAOiB,EAAE;YAAG,GAAGJ,kBAAkB;sBACzD,cAAA,KAACK;gBAAGF,WAAWhB,OAAOmB,QAAQ;0BAC3BvB,MAAMwB,QAAQ,CAACC,GAAG,CAACf,UAAU,CAACgB,OAAOC,MACpC1B,aAAayB,uBACX,KAACE;wBAAaR,WAAWhB,OAAOyB,IAAI;kCACjCH;uBADMC,OAGP;;;;AAMhB,EAAE"}

package/dist/cssm/components/SubnavigationButton/SubnavigationButton.js

@@ -42,9 +42,9 @@ const SubnavigationButtonTypography = ({ textLevel, ...restProps })=>{
  */ export const SubnavigationButton = ({ mode = 'primary', appearance = 'accent', size = 'm', selected, textLevel = '1', before, after, chevron, children, ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ _jsx(Tappable, {
-        ...restProps,
         hasActive: false,
         focusVisibleMode: "outside",
+        ...restProps,
         baseClassName: classNames(styles.host, sizeStyles[size], modeStyles[mode], appearanceStyles[appearance], selected && styles.selected, sizeY !== 'regular' && sizeYClassNames[sizeY], restProps.disabled && styles.disabled),
         children: /*#__PURE__*/ _jsxs("span", {
             className: styles.in,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  appearance?: 'accent' | 'neutral';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`\n   */\n  after?: React.ReactNode;\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      baseClassName={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        restProps.disabled && styles.disabled,\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","sizeY","hasActive","focusVisibleMode","baseClassName","host","disabled","span","className","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AA6BA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACR,GAAGV,WACsB;IACzB,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAG1C;IAE3B,qBACE,KAACC;QACE,GAAG8B,SAAS;QACbY,WAAW;QACXC,kBAAiB;QACjBC,eAAe9C,WACbK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BK,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CX,UAAUgB,QAAQ,IAAI3C,OAAO2C,QAAQ;kBAGvC,cAAA,MAACC;YAAKC,WAAW7C,OAAO8C,EAAE;;gBACvBZ,wBAAU,KAACU;oBAAKC,WAAW7C,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXmB,WAAW7C,OAAO+C,KAAK;oBACvBC,WAAU;8BAETX;;gBAEFF,uBAAS,KAACS;oBAAKC,WAAW7C,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAemD,WAAW7C,OAAOiD,WAAW;;;;;AAIjE,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { HasChildren, HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst appearanceStyles = {\n  accent: styles.appearanceAccent,\n  neutral: styles.appearanceNeutral,\n};\n\nconst modeStyles = {\n  primary: styles.modePrimary,\n  outline: styles.modeOutline,\n  tertiary: styles.modeTertiary,\n};\n\nconst sizeStyles = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  /**\n   * Стиль отображения кнопки.\n   */\n  mode?: 'primary' | 'outline' | 'tertiary';\n  /**\n   * Тип внешнего вида кнопки.\n   */\n  appearance?: 'accent' | 'neutral';\n  /**\n   * Размер кнопки.\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Выбранное состояние.\n   */\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`.\n   */\n  textLevel?: '1' | '2' | '3';\n  /**\n   * Рекомендуется использовать только иконки с размером 24.\n   */\n  before?: React.ReactNode;\n  /**\n   * Рекомендуется использовать только `<Counter size=\"s\" />` или `<Badge />`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Нужно ли отображать иконку `\"chevron\"`.\n   */\n  chevron?: boolean;\n}\n\ntype SubnavigationButtonTypographyProps = Pick<\n  SubnavigationButtonProps,\n  'textLevel' | 'className'\n> &\n  HasComponent &\n  HasChildren;\n\nconst SubnavigationButtonTypography = ({\n  textLevel,\n  ...restProps\n}: SubnavigationButtonTypographyProps) => {\n  if (textLevel === '1') {\n    return <Subhead {...restProps} />;\n  }\n\n  return <Caption level={textLevel === '2' ? '1' : '2'} {...restProps} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SubnavigationButton\n */\nexport const SubnavigationButton = ({\n  mode = 'primary',\n  appearance = 'accent',\n  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  chevron,\n  children,\n  ...restProps\n}: SubnavigationButtonProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        sizeStyles[size],\n        modeStyles[mode],\n        appearanceStyles[appearance],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        restProps.disabled && styles.disabled,\n      )}\n    >\n      <span className={styles.in}>\n        {before && <span className={styles.before}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles.label}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles.after}>{after}</span>}\n        {chevron && <Icon16Dropdown className={styles.chevronIcon} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","Tappable","Caption","Subhead","styles","appearanceStyles","accent","appearanceAccent","neutral","appearanceNeutral","modeStyles","primary","modePrimary","outline","modeOutline","tertiary","modeTertiary","sizeStyles","s","sizeS","m","sizeM","l","sizeL","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","appearance","size","selected","before","after","chevron","children","sizeY","hasActive","focusVisibleMode","baseClassName","host","disabled","span","className","in","label","Component","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAE1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,SAASJ,OAAOK,iBAAiB;AACnC;AAEA,MAAMC,aAAa;IACjBC,SAASP,OAAOQ,WAAW;IAC3BC,SAAST,OAAOU,WAAW;IAC3BC,UAAUX,OAAOY,YAAY;AAC/B;AAEA,MAAMC,aAAa;IACjBC,GAAGd,OAAOe,KAAK;IACfC,GAAGhB,OAAOiB,KAAK;IACfC,GAAGlB,OAAOmB,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,MAAMrB,OAAOsB,SAAS;IACtBC,SAASvB,OAAOwB,YAAY;AAC9B;AA4CA,MAAMC,gCAAgC,CAAC,EACrCC,SAAS,EACT,GAAGC,WACgC;IACnC,IAAID,cAAc,KAAK;QACrB,qBAAO,KAAC3B;YAAS,GAAG4B,SAAS;;IAC/B;IAEA,qBAAO,KAAC7B;QAAQ8B,OAAOF,cAAc,MAAM,MAAM;QAAM,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,OAAO,SAAS,EAChBC,aAAa,QAAQ,EACrBC,OAAO,GAAG,EACVC,QAAQ,EACRP,YAAY,GAAG,EACfQ,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACR,GAAGV,WACsB;IACzB,MAAM,EAAEW,QAAQ,MAAM,EAAE,GAAG1C;IAE3B,qBACE,KAACC;QACC0C,WAAW;QACXC,kBAAiB;QAChB,GAAGb,SAAS;QACbc,eAAe9C,WACbK,OAAO0C,IAAI,EACX7B,UAAU,CAACmB,KAAK,EAChB1B,UAAU,CAACwB,KAAK,EAChB7B,gBAAgB,CAAC8B,WAAW,EAC5BE,YAAYjC,OAAOiC,QAAQ,EAC3BK,UAAU,aAAalB,eAAe,CAACkB,MAAM,EAC7CX,UAAUgB,QAAQ,IAAI3C,OAAO2C,QAAQ;kBAGvC,cAAA,MAACC;YAAKC,WAAW7C,OAAO8C,EAAE;;gBACvBZ,wBAAU,KAACU;oBAAKC,WAAW7C,OAAOkC,MAAM;8BAAGA;;8BAC5C,KAACT;oBACCC,WAAWA;oBACXmB,WAAW7C,OAAO+C,KAAK;oBACvBC,WAAU;8BAETX;;gBAEFF,uBAAS,KAACS;oBAAKC,WAAW7C,OAAOmC,KAAK;8BAAGA;;gBACzCC,yBAAW,KAAC1C;oBAAemD,WAAW7C,OAAOiD,WAAW;;;;;AAIjE,EAAE"}

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

@@ -103,9 +103,9 @@
   --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.36, -0.24, 0.26, 1.32);
   /* prettier-ignore */
   --vkui_internal--Switch__handle_shadow:
-    0 3px 8px rgba(0, 0, 0, 0.15),
-    0 3px 1px rgba(0, 0, 0, 0.06),
-    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+    0 3px 8px rgb(0, 0, 0, 0.15),
+    0 3px 1px rgb(0, 0, 0, 0.06),
+    inset 0 0 0 0.5px rgb(0, 0, 0, 0.04);
 }
 
 .ios.sizeYCompact {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS)\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles.host,\n        platform === 'ios' && styles.ios,\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles.shadow,\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName","host","ios","shadow"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAAE,GAAGC,WAAwB;IACvE,MAAMC,WAAWZ;IAEjB,qBACE,KAACC;QACCY,eAAed,WACb,sBACAG,OAAOY,IAAI,EACXF,aAAa,SAASV,OAAOa,GAAG,EAChCZ,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI,SAASP,OAAOc,MAAM;QAExB,GAAGL,SAAS;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Флаг, который скрывает тень (Android) или границы (iOS).\n   */\n  plain?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное).\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  return (\n    <RootComponent\n      baseClassName={classNames(\n        'vkuiInternalTabbar',\n        styles.host,\n        platform === 'ios' && styles.ios,\n        getItemsLayoutClassName(mode, restProps.children),\n        !plain && styles.shadow,\n      )}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","usePlatform","RootComponent","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","plain","mode","restProps","platform","baseClassName","host","ios","shadow"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC;IAEA,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEC,QAAQ,KAAK,EAAEC,IAAI,EAAE,GAAGC,WAAwB;IACvE,MAAMC,WAAWZ;IAEjB,qBACE,KAACC;QACCY,eAAed,WACb,sBACAG,OAAOY,IAAI,EACXF,aAAa,SAASV,OAAOa,GAAG,EAChCZ,wBAAwBO,MAAMC,UAAUN,QAAQ,GAChD,CAACI,SAASP,OAAOc,MAAM;QAExB,GAAGL,SAAS;;AAGnB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  label?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  label,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: TabbarItemProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = label || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  const {\n    focusVisible,\n    onFocus: handleFocusVisibleOnFocus,\n    onBlur: handleFocusVisibleOnBlur,\n  } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n  });\n\n  return (\n    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      onFocus={callMultiple(handleFocusVisibleOnFocus, onFocusProp)}\n      onBlur={callMultiple(handleFocusVisibleOnBlur, onBlurProp)}\n      href={href}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        platform === 'android' && styles.android,\n        selected && styles.selected,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles.tappableActive : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={classNames(styles.tappable, focusVisibleClassNames)}\n        onClick={noop}\n        tabIndex={-1}\n      />\n      <div className={styles.in}>\n        <div className={styles.icon}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {label && (\n          <Footnote Component=\"div\" className={styles.label} weight=\"2\">\n            {label}\n          </Footnote>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","label","href","Component","disabled","onFocus","onFocusProp","onBlur","onBlurProp","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","focusVisible","handleFocusVisibleOnFocus","handleFocusVisibleOnBlur","focusVisibleClassNames","baseClassName","host","ios","android","role","activeMode","tappableActive","activeEffectDelay","hasHover","className","tappable","onClick","tabIndex","div","in","icon","weight"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAE/D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACRC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACa;IAChB,MAAMC,WAAWtB;IAEjB,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBb,SAASQ,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE1F,IAAI,CAACK,mBAAmB;YACtBlB,KAAKN,gBAAgByB,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,MAAM,EACJa,YAAY,EACZX,SAASY,yBAAyB,EAClCV,QAAQW,wBAAwB,EACjC,GAAGhC;IACJ,MAAMiC,yBAAyBhC,yBAAyB;QACtD6B;IACF;IAEA,qBACE,MAACxB;QACCW,WAAWA;QACV,GAAGM,SAAS;QACbL,UAAUA;QACVC,SAAShB,aAAa4B,2BAA2BX;QACjDC,QAAQlB,aAAa6B,0BAA0BV;QAC/CN,MAAMA;QACNkB,eAAerC,WACbY,OAAO0B,IAAI,EACXX,aAAa,SAASf,OAAO2B,GAAG,EAChCZ,aAAa,aAAaf,OAAO4B,OAAO,EACxCxB,YAAYJ,OAAOI,QAAQ;;0BAG7B,KAACN;gBACC+B,MAAK;gBACLpB,UAAUA;gBACVqB,YAAYf,aAAa,QAAQf,OAAO+B,cAAc,GAAG;gBACzDC,mBAAmBjB,aAAa,QAAQ,IAAI;gBAC5CkB,UAAU;gBACVC,WAAW9C,WAAWY,OAAOmC,QAAQ,EAAEX;gBACvCY,SAAS9C;gBACT+C,UAAU,CAAC;;0BAEb,MAACC;gBAAIJ,WAAWlC,OAAOuC,EAAE;;kCACvB,MAACD;wBAAIJ,WAAWlC,OAAOwC,IAAI;;4BACxBrC;0CACD,KAACmC;gCAAIJ,WAAU;0CACZ7C,aAAagB,cAAcA;;;;oBAG/BC,uBACC,KAACP;wBAASS,WAAU;wBAAM0B,WAAWlC,OAAOM,KAAK;wBAAEmC,QAAO;kCACvDnC;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  /**\n   * Выбранное состояние компонента.\n   */\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой.\n   */\n  label?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`.\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  label,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: TabbarItemProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = label || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  const {\n    focusVisible,\n    onFocus: handleFocusVisibleOnFocus,\n    onBlur: handleFocusVisibleOnBlur,\n  } = useFocusVisible();\n  const focusVisibleClassNames = useFocusVisibleClassName({\n    focusVisible,\n  });\n\n  return (\n    <RootComponent\n      Component={Component}\n      {...restProps}\n      disabled={disabled}\n      onFocus={callMultiple(handleFocusVisibleOnFocus, onFocusProp)}\n      onBlur={callMultiple(handleFocusVisibleOnBlur, onBlurProp)}\n      href={href}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        platform === 'android' && styles.android,\n        selected && styles.selected,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        disabled={disabled}\n        activeMode={platform === 'ios' ? styles.tappableActive : 'background'}\n        activeEffectDelay={platform === 'ios' ? 0 : 300}\n        hasHover={false}\n        className={classNames(styles.tappable, focusVisibleClassNames)}\n        onClick={noop}\n        tabIndex={-1}\n      />\n      <div className={styles.in}>\n        <div className={styles.icon}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {label && (\n          <Footnote Component=\"div\" className={styles.label} weight=\"2\">\n            {label}\n          </Footnote>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useFocusVisible","useFocusVisibleClassName","usePlatform","callMultiple","COMMON_WARNINGS","warnOnce","RootComponent","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","label","href","Component","disabled","onFocus","onFocusProp","onBlur","onBlurProp","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","focusVisible","handleFocusVisibleOnFocus","handleFocusVisibleOnBlur","focusVisibleClassNames","baseClassName","host","ios","android","role","activeMode","tappableActive","activeEffectDelay","hasHover","className","tappable","onClick","tabIndex","div","in","icon","weight"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,eAAe,QAAQ,iCAA8B;AAC9D,SAASC,wBAAwB,QAAQ,0CAAuC;AAChF,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAE/D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,0BAAuB;AAChD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAoB7C,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,aAAa,CAAC,EACzBC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,IAAI,EACJC,YAAYD,OAAO,MAAM,QAAQ,EACjCE,QAAQ,EACRC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACa;IAChB,MAAMC,WAAWtB;IAEjB,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBb,SAASQ,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAE1F,IAAI,CAACK,mBAAmB;YACtBlB,KAAKN,gBAAgByB,IAAI,CAACZ,cAAc,MAAM,cAAc,cAAc,EAAE;QAC9E;IACF;IAEA,MAAM,EACJa,YAAY,EACZX,SAASY,yBAAyB,EAClCV,QAAQW,wBAAwB,EACjC,GAAGhC;IACJ,MAAMiC,yBAAyBhC,yBAAyB;QACtD6B;IACF;IAEA,qBACE,MAACxB;QACCW,WAAWA;QACV,GAAGM,SAAS;QACbL,UAAUA;QACVC,SAAShB,aAAa4B,2BAA2BX;QACjDC,QAAQlB,aAAa6B,0BAA0BV;QAC/CN,MAAMA;QACNkB,eAAerC,WACbY,OAAO0B,IAAI,EACXX,aAAa,SAASf,OAAO2B,GAAG,EAChCZ,aAAa,aAAaf,OAAO4B,OAAO,EACxCxB,YAAYJ,OAAOI,QAAQ;;0BAG7B,KAACN;gBACC+B,MAAK;gBACLpB,UAAUA;gBACVqB,YAAYf,aAAa,QAAQf,OAAO+B,cAAc,GAAG;gBACzDC,mBAAmBjB,aAAa,QAAQ,IAAI;gBAC5CkB,UAAU;gBACVC,WAAW9C,WAAWY,OAAOmC,QAAQ,EAAEX;gBACvCY,SAAS9C;gBACT+C,UAAU,CAAC;;0BAEb,MAACC;gBAAIJ,WAAWlC,OAAOuC,EAAE;;kCACvB,MAACD;wBAAIJ,WAAWlC,OAAOwC,IAAI;;4BACxBrC;0CACD,KAACmC;gCAAIJ,WAAU;0CACZ7C,aAAagB,cAAcA;;;;oBAG/BC,uBACC,KAACP;wBAASS,WAAU;wBAAM0B,WAAWlC,OAAOM,KAAK;wBAAEmC,QAAO;kCACvDnC;;;;;;AAMb,EAAE"}

package/dist/cssm/components/Tabs/Tabs.js

@@ -7,7 +7,7 @@ import { usePlatform } from "../../hooks/usePlatform.js";
 import { useTabsNavigation } from "../../hooks/useTabsNavigation.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import styles from "./Tabs.module.css";
-export const TabsModeContext = /*#__PURE__*/ React.createContext({
+/* eslint-enable jsdoc/require-jsdoc */ export const TabsModeContext = /*#__PURE__*/ React.createContext({
     mode: 'default',
     withGaps: false,
     layoutFillMode: 'auto',
@@ -42,8 +42,5 @@ export const TabsModeContext = /*#__PURE__*/ React.createContext({
         })
     });
 };
-// чтобы styleguidist не путал компонент
-// с другими именованными экспортами
-Tabs.displayName = 'Tabs';
 
 //# sourceMappingURL=Tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const direction = useConfigDirection();\n  const isTabFlow = role === 'tablist';\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n\n// чтобы styleguidist не путал компонент\n// с другими именованными экспортами\nTabs.displayName = 'Tabs';\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","styles","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","Tabs","children","role","restProps","platform","direction","isTabFlow","tabsRef","baseClassName","host","modeDefault","div","className","in","ref","Provider","value","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AAiCvC,OAAO,MAAMC,gCACXP,MAAMQ,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;AAC/B,GAAG;AAEL;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQ,EACRN,OAAO,SAAS,EAChBO,OAAO,SAAS,EAChBJ,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCF,iBAAiB,MAAM,EACvB,GAAGM,WACO;IACV,MAAMC,WAAWf;IACjB,MAAMgB,YAAYjB;IAClB,MAAMkB,YAAYJ,SAAS;IAC3B,MAAMN,WAAWD,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEY,OAAO,EAAE,GAAGjB,kBAAkBgB,WAAWD,cAAc;IAE/D,qBACE,KAACd;QACE,GAAGY,SAAS;QACbK,eAAerB,WACbK,OAAOiB,IAAI,EACX,oBACAL,aAAa,WAAW,2BACxBR,YAAYT,WAAWK,OAAOI,QAAQ,EAAE,+BACxCD,SAAS,aAAaH,OAAOkB,WAAW;QAE1CR,MAAMA;kBAEN,cAAA,KAACS;YAAIC,WAAWpB,OAAOqB,EAAE;YAAEC,KAAKP;sBAC9B,cAAA,KAACd,gBAAgBsB,QAAQ;gBACvBC,OAAO;oBACLrB;oBACAC;oBACAC;oBACAC;oBACAC;gBACF;0BAECE;;;;AAKX,EAAE;AAEF,wCAAwC;AACxC,oCAAoC;AACpCD,KAAKiB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Режим отображения компонента.\n   */\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки.\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно.\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const direction = useConfigDirection();\n  const isTabFlow = role === 'tablist';\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","styles","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","Tabs","children","role","restProps","platform","direction","isTabFlow","tabsRef","baseClassName","host","modeDefault","div","className","in","ref","Provider","value"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AAoCvC,qCAAqC,GAErC,OAAO,MAAMC,gCACXP,MAAMQ,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;AAC/B,GAAG;AAEL;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQ,EACRN,OAAO,SAAS,EAChBO,OAAO,SAAS,EAChBJ,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCF,iBAAiB,MAAM,EACvB,GAAGM,WACO;IACV,MAAMC,WAAWf;IACjB,MAAMgB,YAAYjB;IAClB,MAAMkB,YAAYJ,SAAS;IAC3B,MAAMN,WAAWD,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEY,OAAO,EAAE,GAAGjB,kBAAkBgB,WAAWD,cAAc;IAE/D,qBACE,KAACd;QACE,GAAGY,SAAS;QACbK,eAAerB,WACbK,OAAOiB,IAAI,EACX,oBACAL,aAAa,WAAW,2BACxBR,YAAYT,WAAWK,OAAOI,QAAQ,EAAE,+BACxCD,SAAS,aAAaH,OAAOkB,WAAW;QAE1CR,MAAMA;kBAEN,cAAA,KAACS;YAAIC,WAAWpB,OAAOqB,EAAE;YAAEC,KAAKP;sBAC9B,cAAA,KAACd,gBAAgBsB,QAAQ;gBACvBC,OAAO;oBACLrB;oBACAC;oBACAC;oBACAC;oBACAC;gBACF;0BAECE;;;;AAKX,EAAE"}

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

@@ -29,7 +29,7 @@ const fillModeClassNames = {
 const warn = warnOnce('TabsItem');
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
- */ export const TabsItem = ({ before, children, status, after, selected = false, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = styles.hover, activeMode = '', hovered, activated, hasHover, hasActive = false, focusVisibleMode = 'inside', ...restProps })=>{
+ */ export const TabsItem = ({ before, children, status, after, selected = false, role = 'tab', tabIndex: tabIndexProp, getRootRef, hoverMode = styles.hover, activeMode = '', hasActive = false, focusVisibleMode = 'inside', ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const { mode, withGaps, layoutFillMode, scrollBehaviorToSelectedTab, withScrollToSelectedTab } = React.useContext(TabsModeContext);
     let statusComponent = null;
@@ -98,19 +98,16 @@ const warn = warnOnce('TabsItem');
         scrollBehaviorToSelectedTab
     ]);
     return /*#__PURE__*/ _jsxs(Tappable, {
-        ...restProps,
         getRootRef: rootRef,
-        baseClassName: classNames(styles.host, mode && stylesMode[mode], selected && styles.selected, sizeY !== 'regular' && sizeYClassNames[sizeY], withGaps && styles.withGaps, layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode]),
         hoverMode: hoverMode,
         activeMode: activeMode,
-        hasHover: hasHover,
         hasActive: hasActive,
-        hovered: hovered,
-        activated: activated,
         focusVisibleMode: focusVisibleMode,
         role: role,
         "aria-selected": selected,
         tabIndex: tabIndex,
+        baseClassName: classNames(styles.host, mode && stylesMode[mode], selected && styles.selected, sizeY !== 'regular' && sizeYClassNames[sizeY], withGaps && styles.withGaps, layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode]),
+        ...restProps,
         children: [
             before && /*#__PURE__*/ _jsx("div", {
                 className: styles.before,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, type TappableProps } 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.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\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  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hovered,\n  activated,\n  hasHover,\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.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  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      {...restProps}\n      getRootRef={rootRef}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      hovered={hovered}\n      activated={activated}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hovered","activated","hasHover","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","className","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","baseClassName","host","aria-selected","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useDOM } from '../../lib/dom';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { AnchorHTMLAttributesOnly, HTMLAttributesWithRootRef } from '../../types';\nimport { type TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable, type TappableProps } 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.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst stylesMode = {\n  default: styles.modeDefault,\n  accent: styles.modeAccent,\n  secondary: styles.modeSecondary,\n};\n\nconst fillModeClassNames = {\n  stretched: styles.stretched,\n  shrinked: styles.shrinked,\n};\n\nexport interface TabsItemProps\n  extends HTMLAttributesWithRootRef<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    Pick<\n      TappableProps,\n      | 'Component'\n      | 'activeMode'\n      | 'hoverMode'\n      | 'hovered'\n      | 'activated'\n      | 'hasActive'\n      | 'hasHover'\n      | 'focusVisibleMode'\n    > {\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  /**\n   * Флаг для отображения выбранного состояния.\n   */\n  selected?: boolean;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\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  role = 'tab',\n  tabIndex: tabIndexProp,\n  getRootRef,\n  hoverMode = styles.hover,\n  activeMode = '',\n  hasActive = false,\n  focusVisibleMode = 'inside',\n  ...restProps\n}: TabsItemProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const {\n    mode,\n    withGaps,\n    layoutFillMode,\n    scrollBehaviorToSelectedTab,\n    withScrollToSelectedTab,\n  }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (hasReactNode(status)) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles.status, styles.statusCount)}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles.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  const rootRef = useExternRef(getRootRef);\n\n  const prevSelected = usePrevious(selected);\n  const isInitialRender = prevSelected === undefined;\n  const shouldScrollToSelected =\n    withScrollToSelectedTab && !isInitialRender && prevSelected !== selected && selected;\n\n  const { document } = useDOM();\n  React.useEffect(\n    function scrollToSelectedItem() {\n      if (!shouldScrollToSelected || !rootRef.current || !document) {\n        return;\n      }\n\n      const tabDOMRect = rootRef.current.getBoundingClientRect();\n      const isTabVerticallyOutsideOfViewport =\n        tabDOMRect.top < 0 || tabDOMRect.bottom > document.documentElement.clientHeight;\n\n      /* проверяем, возможен ли вертикальный скролл, а он возможен для scrollIntoView если\n       * элемент вертикально вне зоны видимости */\n      if (isTabVerticallyOutsideOfViewport) {\n        return;\n      }\n\n      /* Не все браузеры поддерживают используемые нами опции. */\n      try {\n        rootRef.current.scrollIntoView({\n          inline: scrollBehaviorToSelectedTab,\n          block: 'nearest',\n          behavior: 'smooth',\n        });\n      } catch {\n        /* Вызывать scrollIntoView с булевым аргументом не следует, потому что это повлечёт\n         * вертикальный скролл.\n         **/\n      }\n    },\n    [rootRef, document, shouldScrollToSelected, scrollBehaviorToSelectedTab],\n  );\n\n  return (\n    <Tappable\n      getRootRef={rootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n      baseClassName={classNames(\n        styles.host,\n        mode && stylesMode[mode],\n        selected && styles.selected,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withGaps && styles.withGaps,\n        layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],\n      )}\n      {...restProps}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles.label}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles.after}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles.underline} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","useExternRef","usePrevious","useDOM","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","stylesMode","default","modeDefault","accent","modeAccent","secondary","modeSecondary","fillModeClassNames","stretched","shrinked","warn","TabsItem","before","children","status","after","selected","role","tabIndex","tabIndexProp","getRootRef","hoverMode","hover","activeMode","hasActive","focusVisibleMode","restProps","sizeY","mode","withGaps","layoutFillMode","scrollBehaviorToSelectedTab","withScrollToSelectedTab","useContext","statusComponent","isTabFlow","Component","className","statusCount","weight","span","process","env","NODE_ENV","undefined","rootRef","prevSelected","isInitialRender","shouldScrollToSelected","document","useEffect","scrollToSelectedItem","current","tabDOMRect","getBoundingClientRect","isTabVerticallyOutsideOfViewport","top","bottom","documentElement","clientHeight","scrollIntoView","inline","block","behavior","aria-selected","baseClassName","host","div","label","level","underline","aria-hidden","data-selected"],"mappings":"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"}

package/dist/cssm/components/Tappable/Ripple.js

@@ -4,7 +4,7 @@ import { classNames, hasMouse as hasPointerLib, noop } from "@vkontakte/vkjs";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { getOffsetRect } from "../../lib/offset.js";
 import styles from "./Tappable.module.css";
-/**
+/* eslint-disable jsdoc/require-jsdoc */ /**
  * Возможно нужен Ripple эффект. Данный хук нужен для отказа
  * от двойного ререндера.
  */ export const useMaybeNeedRipple = (activeMode, hasPointer)=>{
@@ -14,11 +14,11 @@ import styles from "./Tappable.module.css";
 const DELAY = 70;
 const WAVE_LIVE = 225;
 /**
- * Хук для создания Ripple эффектов
+ * Хук для создания Ripple эффектов.
  */ export const useRipple = (needRipple, hasPointerContext)=>{
     const [clicks, setClicks] = React.useState([]);
     /**
-   * Коллекция нажатий и таймеров задержки появления волны
+   * Коллекция нажатий и таймеров задержки появления волны.
    */ const pointerDelayTimers = React.useMemo(()=>new Map(), []);
     React.useEffect(function setClearClicksTimeout() {
         const clicksTimeoutId = clicks.length > 0 ? setTimeout(()=>setClicks([]), WAVE_LIVE) : null;