@vkontakte/vkui 5.3.2 → 5.4.0

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

@@ -1 +1,165 @@
-.vkuiSnackbar{bottom:0;left:auto;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:100;z-index:var(--vkui--z_index_popout)}.vkuiInternalEpic--hasTabbar .vkuiSnackbar{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiSnackbar__body,.vkuiSnackbar__in{transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s var(--vkui--animation_easing_platform)}.vkuiSnackbar__in{animation:vkui-animation-snackbar-intro-vertical .34s cubic-bezier(.4,0,.2,1);animation:vkui-animation-snackbar-intro-vertical .34s var(--vkui--animation_easing_platform);padding:8px}.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(0,140%,0)}.vkuiSnackbar__body{align-items:center;background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4);box-sizing:border-box;display:flex;min-height:56px;padding:12px}.vkuiSnackbar--mode-dark .vkuiSnackbar__body{background:#2d2d2e;background:var(--vkui--color_background_contrast_inverse)}.vkuiSnackbar__before{margin-right:12px}.vkuiSnackbar__after{margin-left:12px}.vkuiSnackbar__content{align-items:center;display:flex;flex:1;overflow:hidden}.vkuiSnackbar--layout-vertical .vkuiSnackbar__content{align-items:flex-start;flex-direction:column}.vkuiSnackbar__content-text{-webkit-line-clamp:3;-webkit-box-orient:vertical;color:#000;color:var(--vkui--color_text_primary);display:-webkit-box;flex:1;overflow:hidden;width:100%}.vkuiSnackbar__content-subtitle{color:#6d7885;color:var(--vkui--color_text_subhead);margin-top:2px}.vkuiSnackbar--mode-dark .vkuiSnackbar__content-text{color:#fff;color:var(--vkui--color_text_contrast)}.vkuiSnackbar--layout-horizontal .vkuiSnackbar__action{margin-left:12px;position:relative}.vkuiSnackbar--layout-vertical .vkuiSnackbar__action{margin-top:2px;min-height:auto}.vkuiModalRoot .vkuiSnackbar{padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom)}.vkuiSnackbar--ios .vkuiSnackbar__body,.vkuiSnackbar--ios .vkuiSnackbar__in{transition:transform .4s cubic-bezier(.4,0,.2,1);transition:transform .4s var(--vkui--animation_easing_platform)}.vkuiSnackbar--desktop{bottom:0;left:0;max-width:351px}.vkuiSnackbar--desktop .vkuiSnackbar__in{animation-name:vkui-animation-snackbar-intro-horizontal;padding:12px}.vkuiSnackbar--desktop.vkuiSnackbar--closing .vkuiSnackbar__in{transform:translate3d(-140%,0,0)}.vkuiSnackbar--touched .vkuiSnackbar__body{transition:none}@keyframes vkui-animation-snackbar-intro-vertical{0%{transform:translate3d(0,140%,0)}to{transform:translateZ(0)}}@keyframes vkui-animation-snackbar-intro-horizontal{0%{transform:translate3d(-140%,0,0)}to{transform:translateZ(0)}}
+.Snackbar {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  z-index: var(--vkui--z_index_popout);
+  position: fixed;
+  bottom: 0;
+  left: auto;
+  width: 100%;
+  padding-left: var(--vkui_internal--safe_area_inset_left);
+  padding-right: var(--vkui_internal--safe_area_inset_right);
+  padding-bottom: var(--vkui_internal--safe_area_inset_bottom);
+}
+
+/**
+ * CMP:
+ * Epic
+ */
+
+:global(.vkuiInternalEpic--hasTabbar) .Snackbar {
+  padding-bottom: calc(
+    var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom)
+  );
+}
+
+.Snackbar__in,
+.Snackbar__body {
+  transition: transform 320ms var(--vkui--animation_easing_platform);
+}
+
+.Snackbar__in {
+  padding: 8px;
+  animation: vkui-animation-snackbar-intro-vertical 340ms var(--vkui--animation_easing_platform);
+}
+
+.Snackbar--closing .Snackbar__in {
+  transform: translate3d(0, 140%, 0);
+}
+
+.Snackbar__body {
+  box-sizing: border-box;
+  padding: 12px;
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  background: var(--vkui--color_background_modal);
+  box-shadow: var(--vkui--elevation4);
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+.Snackbar--mode-dark .Snackbar__body {
+  background: var(--vkui--color_background_contrast_inverse);
+}
+
+.Snackbar__before {
+  margin-right: 12px;
+}
+
+.Snackbar__after {
+  margin-left: 12px;
+}
+
+.Snackbar__content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.Snackbar--layout-vertical .Snackbar__content {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.Snackbar__content-text {
+  flex: 1;
+  color: var(--vkui--color_text_primary);
+  width: 100%;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.Snackbar__content-subtitle {
+  color: var(--vkui--color_text_subhead);
+  margin-top: 2px;
+}
+
+.Snackbar--mode-dark .Snackbar__content-text {
+  color: var(--vkui--color_text_contrast);
+}
+
+.Snackbar--layout-horizontal .Snackbar__action {
+  margin-left: 12px;
+  position: relative;
+}
+
+.Snackbar--layout-vertical .Snackbar__action {
+  margin-top: 2px;
+  min-height: initial;
+}
+
+.ModalRoot .Snackbar {
+  padding-bottom: var(--vkui_internal--safe_area_inset_bottom);
+}
+
+/* iOS */
+
+.Snackbar--ios .Snackbar__in,
+.Snackbar--ios .Snackbar__body {
+  transition: transform 400ms var(--vkui--animation_easing_platform);
+}
+
+/**
+ * Desktop
+ */
+
+.Snackbar--desktop {
+  max-width: 351px;
+  left: 0;
+  bottom: 0;
+}
+
+.Snackbar--desktop .Snackbar__in {
+  padding: 12px;
+  animation-name: vkui-animation-snackbar-intro-horizontal;
+}
+
+.Snackbar--desktop.Snackbar--closing .Snackbar__in {
+  transform: translate3d(-140%, 0, 0);
+}
+
+/**
+ * Touch-interaction
+ */
+
+.Snackbar--touched .Snackbar__body {
+  transition: none;
+}
+
+/**
+ * Animations
+ */
+
+@keyframes vkui-animation-snackbar-intro-vertical {
+  from {
+    transform: translate3d(0, 140%, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes vkui-animation-snackbar-intro-horizontal {
+  from {
+    transform: translate3d(-140%, 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HasChildren } from '../../types';
+export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {
     /**
      * Высота спэйсинга
      */
     size?: number;
-    children?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing

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 styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","styles","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,uBAAuB;AAU1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,MAAO,EAAC,EAAEC,OAAOC,UAAS,EAAEC,UAAS,EAAE,GAAGC,WAAyB,GAAK;IAChG,MAAMH,QAA6B;QACjCI,QAAQL;QACRM,SAAS,CAAC,EAAEN,OAAO,EAAE,IAAI,CAAC;QAC1B,GAAGE,SAAS;IACd;IAEA,qBAAO,oBAACK;QAAK,GAAGH,SAAS;QAAED,WAAWN,WAAWM,WAAWL,MAAM,CAAC,UAAU;QAAGG,OAAOA;;AACzF,EAAE"}
+{"version":3,"sources":["../../../../src/components/Spacing/Spacing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasChildren } from '../../types';\nimport styles from './Spacing.module.css';\n\nexport interface SpacingProps extends React.HTMLAttributes<HTMLDivElement>, HasChildren {\n  /**\n   * Высота спэйсинга\n   */\n  size?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Spacing\n */\nexport const Spacing = ({ size = 8, style: styleProp, className, ...restProps }: SpacingProps) => {\n  const style: React.CSSProperties = {\n    height: size,\n    padding: `${size / 2}px 0`,\n    ...styleProp,\n  };\n\n  return <div {...restProps} className={classNames(className, styles['Spacing'])} style={style} />;\n};\n"],"names":["React","classNames","styles","Spacing","size","style","styleProp","className","restProps","height","padding","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,uBAAuB;AAS1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EAAEC,MAAO,EAAC,EAAEC,OAAOC,UAAS,EAAEC,UAAS,EAAE,GAAGC,WAAyB,GAAK;IAChG,MAAMH,QAA6B;QACjCI,QAAQL;QACRM,SAAS,CAAC,EAAEN,OAAO,EAAE,IAAI,CAAC;QAC1B,GAAGE,SAAS;IACd;IAEA,qBAAO,oBAACK;QAAK,GAAGH,SAAS;QAAED,WAAWN,WAAWM,WAAWL,MAAM,CAAC,UAAU;QAAGG,OAAOA;;AACzF,EAAE"}

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

@@ -1 +1,4 @@
-.vkuiSpacing{box-sizing:border-box;position:relative}
+.Spacing {
+  position: relative;
+  box-sizing: border-box;
+}

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

@@ -1 +1,36 @@
-.vkuiSpinner{align-items:center;color:#818c99;color:var(--vkui--color_icon_medium);display:flex;height:100%;justify-content:center;width:100%}.vkuiSpinner__self{animation:vkui-rotator .7s linear infinite;animation:vkui-rotator var(--vkui_internal--duration) linear infinite;transform-origin:center}.vkuiSpinner__self svg{transform:scale(1)}.vkuiButton .vkuiSpinner,.vkuiPanelHeader .vkuiSpinner{color:currentColor}
+.Spinner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vkui--color_icon_medium);
+}
+
+.Spinner__self {
+  animation: vkui-spinner-rotator var(--vkui_internal--duration) linear infinite;
+  transform-origin: center;
+}
+
+.Spinner__self svg {
+  transform: scale(1);
+}
+
+/**
+ * CMP:
+ * PanelHeader
+ */
+
+:global(.vkuiInternalPanelHeader) .Spinner {
+  color: currentColor;
+}
+
+@keyframes vkui-spinner-rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

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

@@ -54,6 +54,7 @@ const warn = warnOnce('SplitCol');
         animate
     });
     if (process.env.NODE_ENV === 'development' && spaced !== undefined) {
+        // TODO [>=6]: Удалить spaced
         warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');
     }
     return /*#__PURE__*/ React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\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 React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","SplitColContext","styles","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","warn","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","colRef","process","env","NODE_ENV","div","ref","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAC/F,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,MAAM,CAAC,2BAA2B,EAAE;IACrDG,aAAaH,MAAM,CAAC,kCAAkC;IACtDI,iBAAiBJ,MAAM,CAAC,sCAAsC;IAC9DK,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB,EAAE;IACnD,MAAM,EAAEC,UAAS,EAAE,GAAGjB;IACtB,MAAM,CAACkB,SAASC,WAAW,GAAGrB,MAAMsB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAerB;IAErBH,MAAMyB,SAAS,CAAC,IAAM;QACpB,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF,CAAC;QAED,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYd,UAAUsB,MAAM;YACvC;QACF,CAAC;QAED,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaT,eAAe,CAACc,OAAO;QACvED;QAEArB,0BAA0BiB,aAAaT,eAAe,EAAEa;QACxD,OAAO,IAAM;YACXpB,6BAA6BgB,aAAaT,eAAe,EAAEa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AA2BA,MAAMU,OAAOrB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMsB,WAAW,CAACC,QAAyB;IAChD,MAAM,EACJC,SAAQ,EACRC,MAAK,EACLC,SAAQ,EACRC,SAAQ,EACRC,OAAM,EACNjB,SAASF,YAAW,EACpBoB,MAAK,EACLC,MAAK,EACLC,WAAU,EACVC,kBAAiB,EACjBC,UAAS,EACT,GAAGC,WACJ,GAAGX;IACJ,MAAMY,UAAU5C,MAAM6C,MAAM,CAAiB,IAAI;IACjD,MAAM,EAAE1B,UAAS,EAAE,GAAGjB;IACtB,MAAMkB,UAAUH,qBAAqBC;IAErC,MAAM4B,eAAe1C,cAAc;QACjC2C,QAAQH;QACRxB;IACF;IAEA,IAAI4B,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBb,WAAWX,WAAW;QAClEI,KAAK;IACP,CAAC;IAED,qBACE,oBAACqB;QACE,GAAGR,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACRL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;QACZ;QACAgB,KAAKR;QACLF,WAAWzC,WACTU,MAAM,CAAC,WAAW,EAClBL,qBAAqBM,sBAAsBO,YAC3CkB,UAAUpC,WAAWU,MAAM,CAAC,mBAAmB,EAAE,iCACjD0B,WAAWX,aACTzB,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C6B,cACEvC,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C2B,SAAS3B,MAAM,CAAC,kBAAkB,EAClC8B,qBAAqB9B,MAAM,CAAC,gCAAgC,EAC5D+B;qBAGF,oBAAChC,gBAAgB2C,QAAQ;QAACC,OAAOR;OAC9BR,sBAAQ,oBAACa;QAAIT,WAAW/B,MAAM,CAAC,uBAAuB;OAAGsB,YAAkBA,QAAQ;AAI5F,EAAE"}
+{"version":3,"sources":["../../../../src/components/SplitCol/SplitCol.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useMediaQueries } from '../../hooks/useMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SplitColContext } from './SplitColContext';\nimport styles from './SplitCol.module.css';\n\nconst breakpointClassNames = {\n  none: classNames(styles['SplitCol--viewWidth-none'], 'vkuiInternalSplitCol--viewWidth-none'),\n  tabletMinus: styles['SplitCol--viewWidth-tabletMinus'],\n  smallTabletPlus: styles['SplitCol--viewWidth-smallTabletPlus'],\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 React.HTMLAttributes<HTMLDivElement> {\n  width?: number | string;\n  maxWidth?: number | string;\n  minWidth?: number | string;\n  /**\n   * Если false, то переходы между Panel происходят без анимации\n   */\n  animate?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины\n   *\n   * @deprecated используйте autoSpaced\n   */\n  spaced?: boolean;\n  /**\n   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`\n   */\n  autoSpaced?: boolean;\n  fixed?: boolean;\n  /**\n   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`\n   */\n  stretchedOnMobile?: boolean;\n}\n\nconst warn = warnOnce('SplitCol');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SplitCol\n */\nexport const SplitCol = (props: SplitColProps) => {\n  const {\n    children,\n    width,\n    maxWidth,\n    minWidth,\n    spaced,\n    animate: animateProp,\n    fixed,\n    style,\n    autoSpaced,\n    stretchedOnMobile,\n    className,\n    ...restProps\n  } = props;\n  const baseRef = React.useRef<HTMLDivElement>(null);\n  const { viewWidth } = useAdaptivity();\n  const animate = useTransitionAnimate(animateProp);\n\n  const contextValue = useObjectMemo({\n    colRef: baseRef,\n    animate,\n  });\n\n  if (process.env.NODE_ENV === 'development' && spaced !== undefined) {\n    // TODO [>=6]: Удалить spaced\n    warn('Свойство spaced устарело и будет удалено в v6. Используйте autoSpaced');\n  }\n\n  return (\n    <div\n      {...restProps}\n      style={{\n        ...style,\n        width: width,\n        maxWidth: maxWidth,\n        minWidth: minWidth,\n      }}\n      ref={baseRef}\n      className={classNames(\n        styles['SplitCol'],\n        viewWidthToClassName(breakpointClassNames, viewWidth),\n        spaced && classNames(styles['SplitCol--spaced'], 'vkuiInternalSplitCol--spaced'),\n        spaced === undefined &&\n          classNames(styles['SplitCol--spaced-none'], 'vkuiInternalSplitCol--spaced-none'),\n        autoSpaced &&\n          classNames(styles['SplitCol--spaced-auto'], 'vkuiInternalSplitCol--spaced-auto'),\n        fixed && styles['SplitCol--fixed'],\n        stretchedOnMobile && styles['SplitCol--stretched-on-mobile'],\n        className,\n      )}\n    >\n      <SplitColContext.Provider value={contextValue}>\n        {fixed ? <div className={styles['SplitCol__fixedInner']}>{children}</div> : children}\n      </SplitColContext.Provider>\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useMediaQueries","useObjectMemo","ViewWidth","viewWidthToClassName","matchMediaListAddListener","matchMediaListRemoveListener","warnOnce","SplitColContext","styles","breakpointClassNames","none","tabletMinus","smallTabletPlus","tabletPlus","useTransitionAnimate","animateProp","viewWidth","animate","setAnimate","useState","Boolean","mediaQueries","useEffect","undefined","TABLET","listener","matches","warn","SplitCol","props","children","width","maxWidth","minWidth","spaced","fixed","style","autoSpaced","stretchedOnMobile","className","restProps","baseRef","useRef","contextValue","colRef","process","env","NODE_ENV","div","ref","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,SAAS,EAAEC,oBAAoB,QAAQ,uBAAuB;AACvE,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,uBAAuB;AAC/F,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,uBAAuB;IAC3BC,MAAMZ,WAAWU,MAAM,CAAC,2BAA2B,EAAE;IACrDG,aAAaH,MAAM,CAAC,kCAAkC;IACtDI,iBAAiBJ,MAAM,CAAC,sCAAsC;IAC9DK,YAAY;AACd;AAEA,SAASC,qBAAqBC,WAAqB,EAAE;IACnD,MAAM,EAAEC,UAAS,EAAE,GAAGjB;IACtB,MAAM,CAACkB,SAASC,WAAW,GAAGrB,MAAMsB,QAAQ,CAACC,QAAQL;IACrD,MAAMM,eAAerB;IAErBH,MAAMyB,SAAS,CAAC,IAAM;QACpB,IAAIP,gBAAgBQ,WAAW;YAC7BL,WAAWH;YACX;QACF,CAAC;QAED,IAAIC,cAAcO,WAAW;YAC3BL,WAAWF,YAAYd,UAAUsB,MAAM;YACvC;QACF,CAAC;QAED,oDAAoD;QACpD,MAAMC,WAAW,IAAMP,WAAW,CAACG,aAAaT,eAAe,CAACc,OAAO;QACvED;QAEArB,0BAA0BiB,aAAaT,eAAe,EAAEa;QACxD,OAAO,IAAM;YACXpB,6BAA6BgB,aAAaT,eAAe,EAAEa;QAC7D;IACF,GAAG;QAACV;QAAaC;QAAWK;KAAa;IAEzC,OAAOJ;AACT;AA2BA,MAAMU,OAAOrB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMsB,WAAW,CAACC,QAAyB;IAChD,MAAM,EACJC,SAAQ,EACRC,MAAK,EACLC,SAAQ,EACRC,SAAQ,EACRC,OAAM,EACNjB,SAASF,YAAW,EACpBoB,MAAK,EACLC,MAAK,EACLC,WAAU,EACVC,kBAAiB,EACjBC,UAAS,EACT,GAAGC,WACJ,GAAGX;IACJ,MAAMY,UAAU5C,MAAM6C,MAAM,CAAiB,IAAI;IACjD,MAAM,EAAE1B,UAAS,EAAE,GAAGjB;IACtB,MAAMkB,UAAUH,qBAAqBC;IAErC,MAAM4B,eAAe1C,cAAc;QACjC2C,QAAQH;QACRxB;IACF;IAEA,IAAI4B,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBb,WAAWX,WAAW;QAClE,6BAA6B;QAC7BI,KAAK;IACP,CAAC;IAED,qBACE,oBAACqB;QACE,GAAGR,SAAS;QACbJ,OAAO;YACL,GAAGA,KAAK;YACRL,OAAOA;YACPC,UAAUA;YACVC,UAAUA;QACZ;QACAgB,KAAKR;QACLF,WAAWzC,WACTU,MAAM,CAAC,WAAW,EAClBL,qBAAqBM,sBAAsBO,YAC3CkB,UAAUpC,WAAWU,MAAM,CAAC,mBAAmB,EAAE,iCACjD0B,WAAWX,aACTzB,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C6B,cACEvC,WAAWU,MAAM,CAAC,wBAAwB,EAAE,sCAC9C2B,SAAS3B,MAAM,CAAC,kBAAkB,EAClC8B,qBAAqB9B,MAAM,CAAC,gCAAgC,EAC5D+B;qBAGF,oBAAChC,gBAAgB2C,QAAQ;QAACC,OAAOR;OAC9BR,sBAAQ,oBAACa;QAAIT,WAAW/B,MAAM,CAAC,uBAAuB;OAAGsB,YAAkBA,QAAQ;AAI5F,EAAE"}

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

@@ -1 +1,51 @@
-.vkuiSplitCol{flex-grow:1;flex-shrink:1;height:100%;position:relative;width:1px}.vkuiSplitCol--spaced,.vkuiSplitCol--viewWidth-smallTabletPlus.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto{margin:0 16px;margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}@media (min-width:768px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--spaced-none.vkuiSplitCol--spaced-auto{margin:0 16px;margin:0 var(--vkui--size_split_col_padding_horizontal--regular)}}.vkuiSplitCol--viewWidth-tabletMinus.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}@media (max-width:1023.9px){.vkuiSplitCol--viewWidth-none.vkuiSplitCol--stretched-on-mobile{max-width:100%!important;width:100%!important}}.vkuiSplitCol--fixed{flex-grow:1;flex-shrink:1;height:100%;width:1px}.vkuiSplitCol__fixedInner{height:inherit;max-width:inherit;min-width:inherit;overflow:hidden;position:fixed;top:0;transform:translateZ(0);width:inherit}
+.SplitCol {
+  height: 100%;
+  width: 1px;
+  flex-grow: 1;
+  flex-shrink: 1;
+  position: relative;
+}
+
+.SplitCol--spaced {
+  margin: 0 var(--vkui--size_split_col_padding_horizontal--regular);
+}
+
+.SplitCol--viewWidth-smallTabletPlus.SplitCol--spaced-none.SplitCol--spaced-auto {
+  margin: 0 var(--vkui--size_split_col_padding_horizontal--regular);
+}
+
+@media (min-width: 768px) {
+  .SplitCol--viewWidth-none.SplitCol--spaced-none.SplitCol--spaced-auto {
+    margin: 0 var(--vkui--size_split_col_padding_horizontal--regular);
+  }
+}
+
+.SplitCol--viewWidth-tabletMinus.SplitCol--stretched-on-mobile {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+@media (max-width: 1023.9px) {
+  .SplitCol--viewWidth-none.SplitCol--stretched-on-mobile {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+}
+
+.SplitCol--fixed {
+  height: 100%;
+  width: 1px;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.SplitCol__fixedInner {
+  height: inherit;
+  width: inherit;
+  min-width: inherit;
+  max-width: inherit;
+  position: fixed;
+  transform: translateZ(0);
+  overflow: hidden;
+  top: 0;
+}

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

@@ -1 +1,29 @@
-.vkuiSplitLayout{height:100%;position:relative;width:100%}.vkuiSplitLayout__inner{display:flex;height:100%;width:100%}.vkuiSplitLayout__inner--header{position:relative;z-index:11;z-index:var(--vkui_internal--z_index_split_layout_panel_header)}.vkuiSplitLayout--ios .vkuiSplitLayout__inner--header,.vkuiSplitLayout__inner--header{margin-top:calc(-1 * (56px + 0px));margin-top:calc(-1 * (var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top)))}
+.SplitLayout {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.SplitLayout__inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+/* Hack with using PanelHeaderSimple */
+
+/* Better to implement simple header-like here */
+
+.SplitLayout__inner--header {
+  position: relative;
+  z-index: var(--vkui_internal--z_index_split_layout_panel_header);
+  margin-top: calc(
+    -1 * (var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top))
+  );
+}
+
+.SplitLayout--ios .SplitLayout__inner--header {
+  margin-top: calc(
+    -1 * (var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top))
+  );
+}

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

@@ -1 +1,16 @@
-.vkuiSubnavigationBar__in{margin:-8px 0}.vkuiSubnavigationBar__scrollIn{display:flex;padding-bottom:calc(12px + 8px);padding-bottom:calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);padding-top:calc(12px + 8px);padding-top:calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px)}.vkuiSubnavigationBar__scrollIn:after,.vkuiSubnavigationBar__scrollIn:before{content:"";min-width:16px;min-width:var(--vkui--size_base_padding_horizontal--regular)}
+.SubnavigationBar__in {
+  /* Отрицательный margin нужен, чтобы компенсировать увеличенный из-за тени padding (12px -> 20px) */
+  margin: -8px 0;
+}
+
+.SubnavigationBar__scrollIn {
+  padding-top: calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);
+  padding-bottom: calc(var(--vkui--size_subnavigation_bar_padding_vertical--regular) + 8px);
+  display: flex;
+}
+
+.SubnavigationBar__scrollIn::before,
+.SubnavigationBar__scrollIn::after {
+  content: '';
+  min-width: var(--vkui--size_base_padding_horizontal--regular);
+}

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

@@ -3,7 +3,6 @@ import { Icon16Dropdown } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { SizeType } from '../../lib/adaptivity';
-import { getTitleFromChildren } from '../../lib/utils';
 import { Tappable } from '../Tappable/Tappable';
 import { Caption } from '../Typography/Caption/Caption';
 import { Subhead } from '../Typography/Subhead/Subhead';
@@ -37,8 +36,7 @@ const SubnavigationButtonTypography = ({ textLevel , ...restProps })=>{
             primary: styles['SubnavigationButton--mode-primary'],
             outline: styles['SubnavigationButton--mode-outline'],
             tertiary: styles['SubnavigationButton--mode-tertiary']
-        }[mode], selected && styles['SubnavigationButton--selected'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
-        "aria-label": getTitleFromChildren(children)
+        }[mode], selected && styles['SubnavigationButton--selected'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)
     }, /*#__PURE__*/ React.createElement("span", {
         className: styles['SubnavigationButton__in']
     }, before && /*#__PURE__*/ React.createElement("span", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"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  expandable?: 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  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n      aria-label={getTitleFromChildren(children)}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","getTitleFromChildren","Tappable","Caption","Subhead","styles","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","s","m","l","primary","outline","tertiary","REGULAR","aria-label","span","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,oBAAoB,QAAQ,kBAAkB;AAEvD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,kCAAkC;IAC/C,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,qCAAqC;AAClE;AA4BA,MAAMI,gCAAgC,CAAC,EACrCC,UAAS,EACT,GAAGC,WACgC,GAAK;IACxC,IAAID,cAAc,KAAK;QACrB,qBAAO,oBAACN,SAAYO;IACtB,CAAC;IAED,qBAAO,oBAACR;QAAQS,OAAOF,cAAc,MAAM,MAAM,GAAG;QAAG,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,MAAO,UAAS,EAChBC,MAAO,IAAG,EACVC,SAAQ,EACRN,WAAY,IAAG,EACfO,OAAM,EACNC,MAAK,EACLC,WAAU,EACVC,SAAQ,EACRC,UAAS,EACT,GAAGV,WACsB,GAAK;IAC9B,MAAM,EAAEW,OAAQ,OAAM,EAAE,GAAGvB;IAE3B,qBACE,oBAACG;QACE,GAAGS,SAAS;QACbY,WAAW,KAAK;QAChBC,kBAAiB;QACjBH,WAAWvB,WACTO,MAAM,CAAC,sBAAsB,EAC7B;YACEoB,GAAGpB,MAAM,CAAC,8BAA8B;YACxCqB,GAAGrB,MAAM,CAAC,8BAA8B;YACxCsB,GAAGtB,MAAM,CAAC,8BAA8B;QAC1C,CAAC,CAACU,KAAK,EACP;YACEa,SAASvB,MAAM,CAAC,oCAAoC;YACpDwB,SAASxB,MAAM,CAAC,oCAAoC;YACpDyB,UAAUzB,MAAM,CAAC,qCAAqC;QACxD,CAAC,CAACS,KAAK,EACPE,YAAYX,MAAM,CAAC,gCAAgC,EACnDiB,UAAUtB,SAAS+B,OAAO,IAAIzB,eAAe,CAACgB,MAAM,EACpDD;QAEFW,cAAY/B,qBAAqBmB;qBAEjC,oBAACa;QAAKZ,WAAWhB,MAAM,CAAC,0BAA0B;OAC/CY,wBAAU,oBAACgB;QAAKZ,WAAWhB,MAAM,CAAC,8BAA8B;OAAGY,uBACpE,oBAACR;QACCC,WAAWA;QACXW,WAAWhB,MAAM,CAAC,6BAA6B;QAC/C6B,WAAU;OAETd,WAEFF,uBAAS,oBAACe;QAAKZ,WAAWhB,MAAM,CAAC,6BAA6B;OAAGa,QACjEC,4BAAc,oBAACtB;QAAewB,WAAWhB,MAAM,CAAC,sCAAsC;;AAI/F,EAAE"}
+{"version":3,"sources":["../../../../src/components/SubnavigationButton/SubnavigationButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Dropdown } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasChildren, HasComponent } from '../../types';\nimport { Tappable, TappableProps } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './SubnavigationButton.module.css';\n\nconst sizeYClassNames = {\n  none: styles['SubnavigationButton--sizeY-none'],\n  [SizeType.COMPACT]: styles['SubnavigationButton--sizeY-compact'],\n};\n\nexport interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {\n  mode?: 'primary' | 'outline' | 'tertiary';\n  size?: 's' | 'm' | 'l';\n  selected?: boolean;\n  /**\n   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode=\"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  expandable?: 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  size = 'm',\n  selected,\n  textLevel = '1',\n  before,\n  after,\n  expandable,\n  children,\n  className,\n  ...restProps\n}: SubnavigationButtonProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      hasActive={false}\n      focusVisibleMode=\"outside\"\n      className={classNames(\n        styles['SubnavigationButton'],\n        {\n          s: styles['SubnavigationButton--size-s'],\n          m: styles['SubnavigationButton--size-m'],\n          l: styles['SubnavigationButton--size-l'],\n        }[size],\n        {\n          primary: styles['SubnavigationButton--mode-primary'],\n          outline: styles['SubnavigationButton--mode-outline'],\n          tertiary: styles['SubnavigationButton--mode-tertiary'],\n        }[mode],\n        selected && styles['SubnavigationButton--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      <span className={styles['SubnavigationButton__in']}>\n        {before && <span className={styles['SubnavigationButton__before']}>{before}</span>}\n        <SubnavigationButtonTypography\n          textLevel={textLevel}\n          className={styles['SubnavigationButton__label']}\n          Component=\"span\"\n        >\n          {children}\n        </SubnavigationButtonTypography>\n        {after && <span className={styles['SubnavigationButton__after']}>{after}</span>}\n        {expandable && <Icon16Dropdown className={styles['SubnavigationButton__expandableIcon']} />}\n      </span>\n    </Tappable>\n  );\n};\n"],"names":["React","Icon16Dropdown","classNames","useAdaptivity","SizeType","Tappable","Caption","Subhead","styles","sizeYClassNames","none","COMPACT","SubnavigationButtonTypography","textLevel","restProps","level","SubnavigationButton","mode","size","selected","before","after","expandable","children","className","sizeY","hasActive","focusVisibleMode","s","m","l","primary","outline","tertiary","REGULAR","span","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,QAAQ,QAAuB,uBAAuB;AAC/D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,mCAAmC;AAEtD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,kCAAkC;IAC/C,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,qCAAqC;AAClE;AA4BA,MAAMI,gCAAgC,CAAC,EACrCC,UAAS,EACT,GAAGC,WACgC,GAAK;IACxC,IAAID,cAAc,KAAK;QACrB,qBAAO,oBAACN,SAAYO;IACtB,CAAC;IAED,qBAAO,oBAACR;QAAQS,OAAOF,cAAc,MAAM,MAAM,GAAG;QAAG,GAAGC,SAAS;;AACrE;AAEA;;CAEC,GACD,OAAO,MAAME,sBAAsB,CAAC,EAClCC,MAAO,UAAS,EAChBC,MAAO,IAAG,EACVC,SAAQ,EACRN,WAAY,IAAG,EACfO,OAAM,EACNC,MAAK,EACLC,WAAU,EACVC,SAAQ,EACRC,UAAS,EACT,GAAGV,WACsB,GAAK;IAC9B,MAAM,EAAEW,OAAQ,OAAM,EAAE,GAAGtB;IAE3B,qBACE,oBAACE;QACE,GAAGS,SAAS;QACbY,WAAW,KAAK;QAChBC,kBAAiB;QACjBH,WAAWtB,WACTM,MAAM,CAAC,sBAAsB,EAC7B;YACEoB,GAAGpB,MAAM,CAAC,8BAA8B;YACxCqB,GAAGrB,MAAM,CAAC,8BAA8B;YACxCsB,GAAGtB,MAAM,CAAC,8BAA8B;QAC1C,CAAC,CAACU,KAAK,EACP;YACEa,SAASvB,MAAM,CAAC,oCAAoC;YACpDwB,SAASxB,MAAM,CAAC,oCAAoC;YACpDyB,UAAUzB,MAAM,CAAC,qCAAqC;QACxD,CAAC,CAACS,KAAK,EACPE,YAAYX,MAAM,CAAC,gCAAgC,EACnDiB,UAAUrB,SAAS8B,OAAO,IAAIzB,eAAe,CAACgB,MAAM,EACpDD;qBAGF,oBAACW;QAAKX,WAAWhB,MAAM,CAAC,0BAA0B;OAC/CY,wBAAU,oBAACe;QAAKX,WAAWhB,MAAM,CAAC,8BAA8B;OAAGY,uBACpE,oBAACR;QACCC,WAAWA;QACXW,WAAWhB,MAAM,CAAC,6BAA6B;QAC/C4B,WAAU;OAETb,WAEFF,uBAAS,oBAACc;QAAKX,WAAWhB,MAAM,CAAC,6BAA6B;OAAGa,QACjEC,4BAAc,oBAACrB;QAAeuB,WAAWhB,MAAM,CAAC,sCAAsC;;AAI/F,EAAE"}

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

@@ -1 +1,166 @@
-.vkuiSubnavigationButton{border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiSubnavigationButton__in{align-items:center;display:flex;justify-content:center}.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:30px;height:var(--vkui--size_button_small_height--regular)}.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_medium_height--regular)}.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:44px;height:var(--vkui--size_button_large_height--regular)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-compact.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-s .vkuiSubnavigationButton__in{height:28px;height:var(--vkui--size_button_small_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-m .vkuiSubnavigationButton__in{height:32px;height:var(--vkui--size_button_medium_height--compact)}.vkuiSubnavigationButton--sizeY-none.vkuiSubnavigationButton--size-l .vkuiSubnavigationButton__in{height:36px;height:var(--vkui--size_button_large_height--compact)}}.vkuiSubnavigationButton__before{color:#2688eb;color:var(--vkui--color_icon_accent);margin-right:8px}.vkuiSubnavigationButton__label{flex-grow:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiSubnavigationButton__after{margin-left:8px}.vkuiSubnavigationButton__expandableIcon{color:#99a2ad;color:var(--vkui--color_icon_secondary);margin-left:8px;margin-top:1px}.vkuiSubnavigationButton__before:first-child,.vkuiSubnavigationButton__label:first-child{padding-left:12px;padding-left:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton__after:last-child,.vkuiSubnavigationButton__expandableIcon,.vkuiSubnavigationButton__label:last-child{padding-right:12px;padding-right:var(--vkui--size_button_base_small_padding_horizontal_icon--regular)}.vkuiSubnavigationButton--mode-primary{background-color:#fff;background-color:var(--vkui--color_background_modal);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3)}.vkuiSubnavigationButton--mode-outline{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha)}.vkuiSubnavigationButton--selected{background-color:#2688eb;background-color:var(--vkui--color_background_accent_themed);border:none;box-shadow:none;color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton--selected.vkuiSubnavigationButton--mode-tertiary{background-color:rgba(0,16,61,.08);background-color:var(--vkui--color_transparent--active);color:#000;color:var(--vkui--color_text_primary)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__before,.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary) .vkuiSubnavigationButton__expandableIcon{color:#fff;color:var(--vkui--color_icon_contrast_themed)}.vkuiSubnavigationButton{--vkui_internal--counter_inherit_background:var(--vkui--color_background_accent_themed);--vkui_internal--counter_inherit_color:var(--vkui--color_text_contrast_themed)}.vkuiSubnavigationButton--selected:not(.vkuiSubnavigationButton--mode-tertiary){--vkui_internal--counter_inherit_background:var(--vkui--color_background_content);--vkui_internal--counter_inherit_color:var(--vkui--color_text_accent_themed)}.vkuiInternalSubnavigationBar .vkuiSubnavigationButton+.vkuiSubnavigationButton{margin-left:8px;margin-left:var(--vkui--size_subnavigation_bar_gap--regular)}.vkuiInternalSubnavigationBar--mode-fixed .vkuiSubnavigationButton{flex:1;min-width:0}
+.SubnavigationButton {
+  display: inline-block;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+.SubnavigationButton__in {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/**
+ * size s
+ */
+
+.SubnavigationButton--size-s .SubnavigationButton__in {
+  height: var(--vkui--size_button_small_height--regular);
+}
+
+/**
+ * size m
+ */
+
+.SubnavigationButton--size-m .SubnavigationButton__in {
+  height: var(--vkui--size_button_medium_height--regular);
+}
+
+/**
+ * size l
+ */
+
+.SubnavigationButton--size-l .SubnavigationButton__in {
+  height: var(--vkui--size_button_large_height--regular);
+}
+
+/**
+ * SizeY = compact
+ */
+
+.SubnavigationButton--sizeY-compact.SubnavigationButton--size-s .SubnavigationButton__in {
+  height: var(--vkui--size_button_small_height--compact);
+}
+
+.SubnavigationButton--sizeY-compact.SubnavigationButton--size-m .SubnavigationButton__in {
+  height: var(--vkui--size_button_medium_height--compact);
+}
+
+.SubnavigationButton--sizeY-compact.SubnavigationButton--size-l .SubnavigationButton__in {
+  height: var(--vkui--size_button_large_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .SubnavigationButton--sizeY-none.SubnavigationButton--size-s .SubnavigationButton__in {
+    height: var(--vkui--size_button_small_height--compact);
+  }
+
+  .SubnavigationButton--sizeY-none.SubnavigationButton--size-m .SubnavigationButton__in {
+    height: var(--vkui--size_button_medium_height--compact);
+  }
+
+  .SubnavigationButton--sizeY-none.SubnavigationButton--size-l .SubnavigationButton__in {
+    height: var(--vkui--size_button_large_height--compact);
+  }
+}
+
+.SubnavigationButton__before {
+  margin-right: 8px;
+  color: var(--vkui--color_icon_accent);
+}
+
+.SubnavigationButton__label {
+  flex-grow: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.SubnavigationButton__after {
+  margin-left: 8px;
+}
+
+.SubnavigationButton__expandableIcon {
+  margin-left: 8px;
+  margin-top: 1px; /* Смещает иконку относительно текста */
+  color: var(--vkui--color_icon_secondary);
+}
+
+.SubnavigationButton__before:first-child,
+.SubnavigationButton__label:first-child {
+  padding-left: var(--vkui--size_button_base_small_padding_horizontal_icon--regular);
+}
+
+.SubnavigationButton__after:last-child,
+.SubnavigationButton__label:last-child,
+.SubnavigationButton__expandableIcon {
+  padding-right: var(--vkui--size_button_base_small_padding_horizontal_icon--regular);
+}
+
+/**
+ * mode
+ */
+
+.SubnavigationButton--mode-primary {
+  background-color: var(--vkui--color_background_modal);
+  box-shadow: var(--vkui--elevation3);
+}
+
+.SubnavigationButton--mode-outline {
+  box-shadow: inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha);
+}
+
+/**
+ * selected
+ */
+
+.SubnavigationButton--selected {
+  background-color: var(--vkui--color_background_accent_themed);
+  color: var(--vkui--color_text_contrast_themed);
+  box-shadow: none;
+  border: none;
+}
+
+.SubnavigationButton--selected.SubnavigationButton--mode-tertiary {
+  background-color: var(--vkui--color_transparent--active);
+  color: var(--vkui--color_text_primary);
+}
+
+.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary)
+  .SubnavigationButton__before,
+.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary)
+  .SubnavigationButton__expandableIcon {
+  color: var(--vkui--color_icon_contrast_themed);
+}
+
+/**
+ * Impact:
+ * Counter
+ */
+
+.SubnavigationButton {
+  --vkui_internal--counter_inherit_background: var(--vkui--color_background_accent_themed);
+  --vkui_internal--counter_inherit_color: var(--vkui--color_text_contrast_themed);
+}
+
+.SubnavigationButton--selected:not(.SubnavigationButton--mode-tertiary) {
+  --vkui_internal--counter_inherit_background: var(--vkui--color_background_content);
+  --vkui_internal--counter_inherit_color: var(--vkui--color_text_accent_themed);
+}
+
+/**
+ * CMP:
+ * SubnavigationBar
+ */
+
+:global(.vkuiInternalSubnavigationBar) .SubnavigationButton + .SubnavigationButton {
+  margin-left: var(--vkui--size_subnavigation_bar_gap--regular);
+}
+
+:global(.vkuiInternalSubnavigationBar--mode-fixed) .SubnavigationButton {
+  flex: 1;
+  min-width: 0;
+}

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { HasRootRef } from '../../types';
-import { VisuallyHiddenInputProps } from '../VisuallyHiddenInput/VisuallyHiddenInput';
-export interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {
+import * as React from 'react';
+import { HasRef, HasRootRef } from '../../types';
+export interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement>, HasRootRef<HTMLLabelElement>, HasRef<HTMLInputElement> {
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
  */
-export declare const Switch: ({ style, className, getRootRef, ...restProps }: SwitchProps) => JSX.Element;
+export declare const Switch: ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => JSX.Element;