@vkontakte/vkui 7.0.0-dev-efd91c.2 → 7.0.0-dev-efd91c.4

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n  type VirtualElement,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowRef'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'onShownChange'\n  | 'defaultShown'\n  | 'hideWhenReferenceHidden'\n  | 'sameWidth'\n  | 'zIndex'\n  | 'usePortal'\n  | 'customMiddlewares'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n>;\n\nexport interface PopperCommonProps\n  extends AllowedFloatingComponentProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: FloatingArrowProps;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement> | VirtualElement;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  // UseFloatingMiddlewaresBootstrapProps\n  placement: placementProp = 'bottom-start',\n  sameWidth,\n  hideWhenReferenceHidden,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  customMiddlewares,\n  disableFlipMiddleware = false,\n\n  // UseFloatingProps\n  autoUpdateOnTargetResize = false,\n\n  // ArrowProps\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // rest\n  targetRef,\n  getRootRef,\n  children,\n  usePortal = true,\n  style: styleProp,\n  onPlacementChange,\n  ...restProps\n}: PopperProps): React.ReactNode => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    sameWidth,\n    arrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    customMiddlewares,\n    disableFlipMiddleware,\n  });\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData,\n  } = useFloating({\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted(...args) {\n      /* istanbul ignore next: не знаю как проверить */\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  const { arrow: arrowCoords } = middlewareData;\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n  }, [refs.setReference, targetRef]);\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      baseClassName={styles.host}\n      getRootRef={handleRootRef}\n      style={{\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n          middlewareData,\n        ),\n        ...styleProp,\n      }}\n    >\n      {arrow && (\n        <FloatingArrow\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {children}\n    </RootComponent>\n  );\n\n  return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","styles","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","autoUpdateOnTargetResize","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","style","styleProp","onPlacementChange","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","args","elementResize","arrowCoords","handleRootRef","setFloating","setReference","current","dropdown","baseClassName","host","undefined","coords","Icon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SACEC,yBAAyB,EACzBC,uCAAuC,EAEvCC,WAAW,EACXC,+BAA+B,EAC/BC,0BAA0B,QAErB,8BAAqB;AAC5B,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,WAAW,QACN,kCAA+B;AACtC,SACEC,aAAa,QAER,oCAAiC;AACxC,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AA4DzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrB,uCAAuC;AACvCC,WAAWC,gBAAgB,cAAc,EACzCC,SAAS,EACTC,uBAAuB,EACvBC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,KAAK,EACLC,cAAcd,oBAAoB,EAClCe,eAAed,qBAAqB,EACpCe,iBAAiB,EACjBC,wBAAwB,KAAK,EAE7B,mBAAmB;AACnBC,2BAA2B,KAAK,EAEhC,aAAa;AACbC,UAAU,EACVC,YAAYlB,WAAW,EAEvB,OAAO;AACPmB,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,YAAY,IAAI,EAChBC,OAAOC,SAAS,EAChBC,iBAAiB,EACjB,GAAGC,WACS;IACZ,MAAM,CAACC,UAAUC,YAAY,GAAGvC,MAAMwC,QAAQ,CAAwB;IAEtE,MAAM,EAAEC,eAAe,EAAEC,WAAW,EAAE,GAAGrC,gCAAgC;QACvEW,WAAWC;QACXC;QACAI;QACAgB;QACAf;QACAC;QACAJ;QACAC;QACAF;QACAM;QACAC;IACF;IAEA,MAAM,EACJiB,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,UAAUC,wBAAwB,EAClChC,WAAWiC,iBAAiB,EAC5BC,IAAI,EACJC,cAAc,EACf,GAAG/C,YAAY;QACdY,WAAWyB;QACXW,YAAYV;QACZW,sBAAqB,GAAGC,IAAI;YAC1B,+CAA+C,GAC/C,OAAOpD,6BAA6BoD,MAAM;gBACxCC,eAAe5B;YACjB;QACF;IACF;IAEArB,2BAA2BW,eAAegC,mBAAmBb;IAE7D,MAAM,EAAEd,OAAOkC,WAAW,EAAE,GAAGL;IAE/B,MAAMM,gBAAgBxD,aAA6BiD,KAAKQ,WAAW,EAAE3B;IAErExB,0BAA0B;QACxB2C,KAAKS,YAAY,CAAC,aAAa7B,YAAYA,UAAU8B,OAAO,GAAG9B;IACjE,GAAG;QAACoB,KAAKS,YAAY;QAAE7B;KAAU;IAEjC,MAAM+B,yBACJ,MAAChD;QACE,GAAGwB,SAAS;QACbyB,eAAehD,OAAOiD,IAAI;QAC1BhC,YAAY0B;QACZvB,OAAO;YACL,GAAG/B,wCACD6C,0BACAJ,eACAE,eACA5B,YAAY,OAAO8C,WACnBb,eACD;YACD,GAAGhB,SAAS;QACd;;YAECb,uBACC,KAACV;gBACE,GAAGgB,UAAU;gBACdqC,QAAQT;gBACRxC,WAAWiC;gBACXlB,YAAYQ;gBACZ2B,MAAMrC;;YAGTG;;;IAIL,qBAAO,KAACxB;QAAcyB,WAAWA;kBAAY4B;;AAC/C,EAAE"}
+{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n  type VirtualElement,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowRef'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'onShownChange'\n  | 'defaultShown'\n  | 'hideWhenReferenceHidden'\n  | 'sameWidth'\n  | 'zIndex'\n  | 'usePortal'\n  | 'customMiddlewares'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n>;\n\nexport interface PopperCommonProps\n  extends AllowedFloatingComponentProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: FloatingArrowProps;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement> | VirtualElement;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  // UseFloatingMiddlewaresBootstrapProps\n  placement: placementProp = 'bottom-start',\n  sameWidth,\n  hideWhenReferenceHidden,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  customMiddlewares,\n  disableFlipMiddleware = false,\n\n  // UseFloatingProps\n  autoUpdateOnTargetResize = false,\n\n  // ArrowProps\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // rest\n  targetRef,\n  getRootRef,\n  children,\n  usePortal = true,\n  onPlacementChange,\n  ...restProps\n}: PopperProps): React.ReactNode => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    sameWidth,\n    arrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    customMiddlewares,\n    disableFlipMiddleware,\n  });\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData,\n  } = useFloating({\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted(...args) {\n      /* istanbul ignore next: не знаю как проверить */\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  const { arrow: arrowCoords } = middlewareData;\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n  }, [refs.setReference, targetRef]);\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      baseClassName={styles.host}\n      getRootRef={handleRootRef}\n      baseStyle={convertFloatingDataToReactCSSProperties(\n        floatingPositionStrategy,\n        floatingDataX,\n        floatingDataY,\n        sameWidth ? null : undefined,\n        middlewareData,\n      )}\n    >\n      {arrow && (\n        <FloatingArrow\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {children}\n    </RootComponent>\n  );\n\n  return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","styles","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","autoUpdateOnTargetResize","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","onPlacementChange","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","args","elementResize","arrowCoords","handleRootRef","setFloating","setReference","current","dropdown","baseClassName","host","baseStyle","undefined","coords","Icon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SACEC,yBAAyB,EACzBC,uCAAuC,EAEvCC,WAAW,EACXC,+BAA+B,EAC/BC,0BAA0B,QAErB,8BAAqB;AAC5B,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,WAAW,QACN,kCAA+B;AACtC,SACEC,aAAa,QAER,oCAAiC;AACxC,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AA4DzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrB,uCAAuC;AACvCC,WAAWC,gBAAgB,cAAc,EACzCC,SAAS,EACTC,uBAAuB,EACvBC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,KAAK,EACLC,cAAcd,oBAAoB,EAClCe,eAAed,qBAAqB,EACpCe,iBAAiB,EACjBC,wBAAwB,KAAK,EAE7B,mBAAmB;AACnBC,2BAA2B,KAAK,EAEhC,aAAa;AACbC,UAAU,EACVC,YAAYlB,WAAW,EAEvB,OAAO;AACPmB,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,YAAY,IAAI,EAChBC,iBAAiB,EACjB,GAAGC,WACS;IACZ,MAAM,CAACC,UAAUC,YAAY,GAAGrC,MAAMsC,QAAQ,CAAwB;IAEtE,MAAM,EAAEC,eAAe,EAAEC,WAAW,EAAE,GAAGnC,gCAAgC;QACvEW,WAAWC;QACXC;QACAI;QACAc;QACAb;QACAC;QACAJ;QACAC;QACAF;QACAM;QACAC;IACF;IAEA,MAAM,EACJe,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,UAAUC,wBAAwB,EAClC9B,WAAW+B,iBAAiB,EAC5BC,IAAI,EACJC,cAAc,EACf,GAAG7C,YAAY;QACdY,WAAWuB;QACXW,YAAYV;QACZW,sBAAqB,GAAGC,IAAI;YAC1B,+CAA+C,GAC/C,OAAOlD,6BAA6BkD,MAAM;gBACxCC,eAAe1B;YACjB;QACF;IACF;IAEArB,2BAA2BW,eAAe8B,mBAAmBb;IAE7D,MAAM,EAAEZ,OAAOgC,WAAW,EAAE,GAAGL;IAE/B,MAAMM,gBAAgBtD,aAA6B+C,KAAKQ,WAAW,EAAEzB;IAErExB,0BAA0B;QACxByC,KAAKS,YAAY,CAAC,aAAa3B,YAAYA,UAAU4B,OAAO,GAAG5B;IACjE,GAAG;QAACkB,KAAKS,YAAY;QAAE3B;KAAU;IAEjC,MAAM6B,yBACJ,MAAC9C;QACE,GAAGsB,SAAS;QACbyB,eAAe9C,OAAO+C,IAAI;QAC1B9B,YAAYwB;QACZO,WAAW3D,wCACT2C,0BACAJ,eACAE,eACA1B,YAAY,OAAO6C,WACnBd;;YAGD3B,uBACC,KAACV;gBACE,GAAGgB,UAAU;gBACdoC,QAAQV;gBACRtC,WAAW+B;gBACXhB,YAAYM;gBACZ4B,MAAMpC;;YAGTG;;;IAIL,qBAAO,KAACxB;QAAcyB,WAAWA;kBAAY0B;;AAC/C,EAAE"}

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

@@ -19,22 +19,19 @@ const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
- */ export const Progress = ({ value = 0, appearance = 'accent', height, style, ...restProps })=>{
+ */ export const Progress = ({ value = 0, appearance = 'accent', height, ...restProps })=>{
     const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
     const title = `${progress} / ${PROGRESS_MAX_VALUE}`;
     const styleHeight = progressCustomHeightStyle(height);
     return /*#__PURE__*/ _jsx(RootComponent, {
         "aria-valuenow": value,
         title: title,
-        style: {
-            ...styleHeight,
-            ...style
-        },
         ...restProps,
         role: "progressbar",
         "aria-valuemin": PROGRESS_MIN_VALUE,
         "aria-valuemax": PROGRESS_MAX_VALUE,
         baseClassName: classNames(styles.host, stylesAppearance[appearance]),
+        baseStyle: styleHeight,
         children: /*#__PURE__*/ _jsx("div", {
             className: styles.in,
             style: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Progress.module.css';\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  positive: styles.appearancePositive,\n  negative: styles.appearanceNegative,\n};\n\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nexport interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  appearance = 'accent',\n  height,\n  style,\n  ...restProps\n}: ProgressProps): React.ReactNode => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n  const styleHeight = progressCustomHeightStyle(height);\n\n  return (\n    <RootComponent\n      aria-valuenow={value}\n      title={title}\n      style={{ ...styleHeight, ...style }}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      baseClassName={classNames(styles.host, stylesAppearance[appearance])}\n    >\n      <div className={styles.in} style={{ width: `${progress}%` }} />\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","clamp","RootComponent","styles","stylesAppearance","accent","appearanceAccent","positive","appearancePositive","negative","appearanceNegative","progressCustomHeightStyle","height","borderRadius","undefined","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","appearance","style","restProps","progress","title","styleHeight","aria-valuenow","role","aria-valuemin","aria-valuemax","baseClassName","host","div","className","in","width"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,wBAAqB;AAE3C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,UAAUJ,OAAOK,kBAAkB;IACnCC,UAAUN,OAAOO,kBAAkB;AACrC;AAEA,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAcA,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,QAAQ,CAAC,EACTC,aAAa,QAAQ,EACrBP,MAAM,EACNQ,KAAK,EACL,GAAGC,WACW;IACd,MAAMC,WAAWrB,MAAMiB,OAAOH,oBAAoBC;IAClD,MAAMO,QAAQ,GAAGD,SAAS,GAAG,EAAEN,oBAAoB;IACnD,MAAMQ,cAAcb,0BAA0BC;IAE9C,qBACE,KAACV;QACCuB,iBAAeP;QACfK,OAAOA;QACPH,OAAO;YAAE,GAAGI,WAAW;YAAE,GAAGJ,KAAK;QAAC;QACjC,GAAGC,SAAS;QACbK,MAAK;QACLC,iBAAeZ;QACfa,iBAAeZ;QACfa,eAAe7B,WAAWG,OAAO2B,IAAI,EAAE1B,gBAAgB,CAACe,WAAW;kBAEnE,cAAA,KAACY;YAAIC,WAAW7B,OAAO8B,EAAE;YAAEb,OAAO;gBAAEc,OAAO,GAAGZ,SAAS,CAAC,CAAC;YAAC;;;AAGhE,EAAE"}
+{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Progress.module.css';\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  positive: styles.appearancePositive,\n  negative: styles.appearanceNegative,\n};\n\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nexport interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  appearance = 'accent',\n  height,\n  ...restProps\n}: ProgressProps): React.ReactNode => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n  const styleHeight = progressCustomHeightStyle(height);\n\n  return (\n    <RootComponent\n      aria-valuenow={value}\n      title={title}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      baseClassName={classNames(styles.host, stylesAppearance[appearance])}\n      baseStyle={styleHeight}\n    >\n      <div className={styles.in} style={{ width: `${progress}%` }} />\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","clamp","RootComponent","styles","stylesAppearance","accent","appearanceAccent","positive","appearancePositive","negative","appearanceNegative","progressCustomHeightStyle","height","borderRadius","undefined","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","appearance","restProps","progress","title","styleHeight","aria-valuenow","role","aria-valuemin","aria-valuemax","baseClassName","host","baseStyle","div","className","in","style","width"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,wBAAqB;AAE3C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,UAAUJ,OAAOK,kBAAkB;IACnCC,UAAUN,OAAOO,kBAAkB;AACrC;AAEA,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAcA,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,QAAQ,CAAC,EACTC,aAAa,QAAQ,EACrBP,MAAM,EACN,GAAGQ,WACW;IACd,MAAMC,WAAWpB,MAAMiB,OAAOH,oBAAoBC;IAClD,MAAMM,QAAQ,GAAGD,SAAS,GAAG,EAAEL,oBAAoB;IACnD,MAAMO,cAAcZ,0BAA0BC;IAE9C,qBACE,KAACV;QACCsB,iBAAeN;QACfI,OAAOA;QACN,GAAGF,SAAS;QACbK,MAAK;QACLC,iBAAeX;QACfY,iBAAeX;QACfY,eAAe5B,WAAWG,OAAO0B,IAAI,EAAEzB,gBAAgB,CAACe,WAAW;QACnEW,WAAWP;kBAEX,cAAA,KAACQ;YAAIC,WAAW7B,OAAO8B,EAAE;YAAEC,OAAO;gBAAEC,OAAO,GAAGd,SAAS,CAAC,CAAC;YAAC;;;AAGhE,EAAE"}

package/dist/cssm/components/RichCell/RichCell.js

@@ -18,7 +18,7 @@ const alignAfterClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/RichCell
- */ export const RichCell = ({ overTitle, children, subtitle, extraSubtitle, before, after, afterCaption, bottom, actions, multiline, className, afterAlign = 'start', ...restProps })=>{
+ */ export const RichCell = ({ overTitle, children, subtitle, extraSubtitle, before, after, afterCaption, bottom, actions, multiline, afterAlign = 'start', ...restProps })=>{
     const { sizeY = 'none' } = useAdaptivity();
     const afterRender = ()=>{
         if (!after && !afterCaption) {
@@ -40,7 +40,7 @@ const alignAfterClassNames = {
     };
     return /*#__PURE__*/ _jsxs(Tappable, {
         ...restProps,
-        className: classNames(styles.host, !multiline && styles.textEllipsis, sizeY !== 'regular' && sizeYClassNames[sizeY], className),
+        baseClassName: classNames(styles.host, !multiline && styles.textEllipsis, sizeY !== 'regular' && sizeYClassNames[sizeY]),
         children: [
             before && /*#__PURE__*/ _jsx("div", {
                 className: styles.before,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst alignAfterClassNames = {\n  start: styles.contentAfterAlignStart,\n  center: styles.contentAfterAlignCenter,\n  end: styles.contentAfterAlignEnd,\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Выравнивание after компонента по вертикали\n   */\n  afterAlign?: 'start' | 'center' | 'end';\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell: React.FC<RichCellProps> & {\n  Icon: typeof RichCellIcon;\n} = ({\n  overTitle,\n  children,\n  subtitle,\n  extraSubtitle,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  className,\n  afterAlign = 'start',\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const afterRender = () => {\n    if (!after && !afterCaption) {\n      return;\n    }\n    return (\n      <div className={classNames(styles.contentAfter, alignAfterClassNames[afterAlign])}>\n        {after && <div className={styles.afterChildren}>{after}</div>}\n        {afterCaption && <div className={styles.afterCaption}>{afterCaption}</div>}\n      </div>\n    );\n  };\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles.host,\n        !multiline && styles.textEllipsis,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        className,\n      )}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <div className={styles.inWrapper}>\n        <div className={styles.in}>\n          <div className={styles.content}>\n            <div className={styles.contentBefore}>\n              {overTitle && (\n                <Subhead Component=\"div\" className={styles.overTitle}>\n                  {overTitle}\n                </Subhead>\n              )}\n              <div className={styles.children}>{children}</div>\n              {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n              {extraSubtitle && (\n                <Subhead Component=\"div\" className={styles.extraSubtitle}>\n                  {extraSubtitle}\n                </Subhead>\n              )}\n            </div>\n            {afterAlign === 'start' && afterRender()}\n          </div>\n          {bottom && <div className={styles.bottom}>{bottom}</div>}\n          {actions && <div className={styles.actions}>{actions}</div>}\n        </div>\n        {afterAlign !== 'start' && afterRender()}\n      </div>\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","alignAfterClassNames","start","contentAfterAlignStart","center","contentAfterAlignCenter","end","contentAfterAlignEnd","RichCell","overTitle","children","subtitle","extraSubtitle","before","after","afterCaption","bottom","actions","multiline","className","afterAlign","restProps","sizeY","afterRender","div","contentAfter","afterChildren","host","textEllipsis","inWrapper","in","content","contentBefore","Component","Icon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,MAAMC,uBAAuB;IAC3BC,OAAOP,OAAOQ,sBAAsB;IACpCC,QAAQT,OAAOU,uBAAuB;IACtCC,KAAKX,OAAOY,oBAAoB;AAClC;AAwDA;;CAEC,GACD,OAAO,MAAMC,WAET,CAAC,EACHC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,aAAa,OAAO,EACpB,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG/B;IAE3B,MAAMgC,cAAc;QAClB,IAAI,CAACT,SAAS,CAACC,cAAc;YAC3B;QACF;QACA,qBACE,MAACS;YAAIL,WAAW7B,WAAWK,OAAO8B,YAAY,EAAExB,oBAAoB,CAACmB,WAAW;;gBAC7EN,uBAAS,KAACU;oBAAIL,WAAWxB,OAAO+B,aAAa;8BAAGZ;;gBAChDC,8BAAgB,KAACS;oBAAIL,WAAWxB,OAAOoB,YAAY;8BAAGA;;;;IAG7D;IAEA,qBACE,MAACvB;QACE,GAAG6B,SAAS;QACbF,WAAW7B,WACTK,OAAOgC,IAAI,EACX,CAACT,aAAavB,OAAOiC,YAAY,EACjCN,UAAU,aAAa1B,eAAe,CAAC0B,MAAM,EAC7CH;;YAGDN,wBAAU,KAACW;gBAAIL,WAAWxB,OAAOkB,MAAM;0BAAGA;;0BAC3C,MAACW;gBAAIL,WAAWxB,OAAOkC,SAAS;;kCAC9B,MAACL;wBAAIL,WAAWxB,OAAOmC,EAAE;;0CACvB,MAACN;gCAAIL,WAAWxB,OAAOoC,OAAO;;kDAC5B,MAACP;wCAAIL,WAAWxB,OAAOqC,aAAa;;4CACjCvB,2BACC,KAAChB;gDAAQwC,WAAU;gDAAMd,WAAWxB,OAAOc,SAAS;0DACjDA;;0DAGL,KAACe;gDAAIL,WAAWxB,OAAOe,QAAQ;0DAAGA;;4CACjCC,0BAAY,KAACa;gDAAIL,WAAWxB,OAAOgB,QAAQ;0DAAGA;;4CAC9CC,+BACC,KAACnB;gDAAQwC,WAAU;gDAAMd,WAAWxB,OAAOiB,aAAa;0DACrDA;;;;oCAINQ,eAAe,WAAWG;;;4BAE5BP,wBAAU,KAACQ;gCAAIL,WAAWxB,OAAOqB,MAAM;0CAAGA;;4BAC1CC,yBAAW,KAACO;gCAAIL,WAAWxB,OAAOsB,OAAO;0CAAGA;;;;oBAE9CG,eAAe,WAAWG;;;;;AAInC,EAAE;AAEFf,SAAS0B,IAAI,GAAGxC"}
+{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst alignAfterClassNames = {\n  start: styles.contentAfterAlignStart,\n  center: styles.contentAfterAlignCenter,\n  end: styles.contentAfterAlignEnd,\n};\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Выравнивание after компонента по вертикали\n   */\n  afterAlign?: 'start' | 'center' | 'end';\n  /**\n   * Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell: React.FC<RichCellProps> & {\n  Icon: typeof RichCellIcon;\n} = ({\n  overTitle,\n  children,\n  subtitle,\n  extraSubtitle,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  afterAlign = 'start',\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const afterRender = () => {\n    if (!after && !afterCaption) {\n      return;\n    }\n    return (\n      <div className={classNames(styles.contentAfter, alignAfterClassNames[afterAlign])}>\n        {after && <div className={styles.afterChildren}>{after}</div>}\n        {afterCaption && <div className={styles.afterCaption}>{afterCaption}</div>}\n      </div>\n    );\n  };\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        !multiline && styles.textEllipsis,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <div className={styles.inWrapper}>\n        <div className={styles.in}>\n          <div className={styles.content}>\n            <div className={styles.contentBefore}>\n              {overTitle && (\n                <Subhead Component=\"div\" className={styles.overTitle}>\n                  {overTitle}\n                </Subhead>\n              )}\n              <div className={styles.children}>{children}</div>\n              {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n              {extraSubtitle && (\n                <Subhead Component=\"div\" className={styles.extraSubtitle}>\n                  {extraSubtitle}\n                </Subhead>\n              )}\n            </div>\n            {afterAlign === 'start' && afterRender()}\n          </div>\n          {bottom && <div className={styles.bottom}>{bottom}</div>}\n          {actions && <div className={styles.actions}>{actions}</div>}\n        </div>\n        {afterAlign !== 'start' && afterRender()}\n      </div>\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","alignAfterClassNames","start","contentAfterAlignStart","center","contentAfterAlignCenter","end","contentAfterAlignEnd","RichCell","overTitle","children","subtitle","extraSubtitle","before","after","afterCaption","bottom","actions","multiline","afterAlign","restProps","sizeY","afterRender","div","className","contentAfter","afterChildren","baseClassName","host","textEllipsis","inWrapper","in","content","contentBefore","Component","Icon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,MAAMC,uBAAuB;IAC3BC,OAAOP,OAAOQ,sBAAsB;IACpCC,QAAQT,OAAOU,uBAAuB;IACtCC,KAAKX,OAAOY,oBAAoB;AAClC;AAwDA;;CAEC,GACD,OAAO,MAAMC,WAET,CAAC,EACHC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,aAAa,OAAO,EACpB,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG9B;IAE3B,MAAM+B,cAAc;QAClB,IAAI,CAACR,SAAS,CAACC,cAAc;YAC3B;QACF;QACA,qBACE,MAACQ;YAAIC,WAAWlC,WAAWK,OAAO8B,YAAY,EAAExB,oBAAoB,CAACkB,WAAW;;gBAC7EL,uBAAS,KAACS;oBAAIC,WAAW7B,OAAO+B,aAAa;8BAAGZ;;gBAChDC,8BAAgB,KAACQ;oBAAIC,WAAW7B,OAAOoB,YAAY;8BAAGA;;;;IAG7D;IAEA,qBACE,MAACvB;QACE,GAAG4B,SAAS;QACbO,eAAerC,WACbK,OAAOiC,IAAI,EACX,CAACV,aAAavB,OAAOkC,YAAY,EACjCR,UAAU,aAAazB,eAAe,CAACyB,MAAM;;YAG9CR,wBAAU,KAACU;gBAAIC,WAAW7B,OAAOkB,MAAM;0BAAGA;;0BAC3C,MAACU;gBAAIC,WAAW7B,OAAOmC,SAAS;;kCAC9B,MAACP;wBAAIC,WAAW7B,OAAOoC,EAAE;;0CACvB,MAACR;gCAAIC,WAAW7B,OAAOqC,OAAO;;kDAC5B,MAACT;wCAAIC,WAAW7B,OAAOsC,aAAa;;4CACjCxB,2BACC,KAAChB;gDAAQyC,WAAU;gDAAMV,WAAW7B,OAAOc,SAAS;0DACjDA;;0DAGL,KAACc;gDAAIC,WAAW7B,OAAOe,QAAQ;0DAAGA;;4CACjCC,0BAAY,KAACY;gDAAIC,WAAW7B,OAAOgB,QAAQ;0DAAGA;;4CAC9CC,+BACC,KAACnB;gDAAQyC,WAAU;gDAAMV,WAAW7B,OAAOiB,aAAa;0DACrDA;;;;oCAINO,eAAe,WAAWG;;;4BAE5BN,wBAAU,KAACO;gCAAIC,WAAW7B,OAAOqB,MAAM;0CAAGA;;4BAC1CC,yBAAW,KAACM;gCAAIC,WAAW7B,OAAOsB,OAAO;0CAAGA;;;;oBAE9CE,eAAe,WAAWG;;;;;AAInC,EAAE;AAEFd,SAAS2B,IAAI,GAAGzC"}

package/dist/cssm/components/RootComponent/RootComponent.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { mergeStyle } from "../../helpers/mergeStyle.js";
 import styles from "./RootComponent.module.css";
 /**
  * Базовый корневой компонент.
- */ export const RootComponent = ({ Component = 'div', baseClassName, className, getRootRef, ...restProps })=>/*#__PURE__*/ _jsx(Component, {
+ */ export const RootComponent = ({ Component = 'div', baseClassName, className, baseStyle, style, getRootRef, ...restProps })=>/*#__PURE__*/ _jsx(Component, {
         ref: getRootRef,
         className: classNames(className, baseClassName, styles.host, restProps.hidden === true && styles.hidden),
+        style: mergeStyle(baseStyle, style),
         ...restProps
     });
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport styles from './RootComponent.module.css';\n\nexport interface RootComponentProps<T>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  baseClassName?: string | false;\n}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n  Component = 'div',\n  baseClassName,\n  className,\n  getRootRef,\n  ...restProps\n}: RootComponentProps<T>): React.ReactNode => (\n  <Component\n    ref={getRootRef}\n    className={classNames(\n      className,\n      baseClassName,\n      styles.host,\n      restProps.hidden === true && styles.hidden,\n    )}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","styles","RootComponent","Component","baseClassName","className","getRootRef","restProps","ref","host","hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,6BAA6B;AAShD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,UAAU,EACV,GAAGC,WACmB,iBACtB,KAACJ;QACCK,KAAKF;QACLD,WAAWL,WACTK,WACAD,eACAH,OAAOQ,IAAI,EACXF,UAAUG,MAAM,KAAK,QAAQT,OAAOS,MAAM;QAE3C,GAAGH,SAAS;OAEf"}
+{"version":3,"sources":["../../../../src/components/RootComponent/RootComponent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport styles from './RootComponent.module.css';\n\nexport interface RootComponentProps<T>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  baseClassName?: string | false;\n  baseStyle?: React.CSSProperties;\n}\n\n/**\n * Базовый корневой компонент.\n */\nexport const RootComponent = <T,>({\n  Component = 'div',\n  baseClassName,\n  className,\n  baseStyle,\n  style,\n  getRootRef,\n  ...restProps\n}: RootComponentProps<T>): React.ReactNode => (\n  <Component\n    ref={getRootRef}\n    className={classNames(\n      className,\n      baseClassName,\n      styles.host,\n      restProps.hidden === true && styles.hidden,\n    )}\n    style={mergeStyle(baseStyle, style)}\n    {...restProps}\n  />\n);\n"],"names":["React","classNames","mergeStyle","styles","RootComponent","Component","baseClassName","className","baseStyle","style","getRootRef","restProps","ref","host","hidden"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,8BAA2B;AAEtD,OAAOC,YAAY,6BAA6B;AAUhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAK,EAChCC,YAAY,KAAK,EACjBC,aAAa,EACbC,SAAS,EACTC,SAAS,EACTC,KAAK,EACLC,UAAU,EACV,GAAGC,WACmB,iBACtB,KAACN;QACCO,KAAKF;QACLH,WAAWN,WACTM,WACAD,eACAH,OAAOU,IAAI,EACXF,UAAUG,MAAM,KAAK,QAAQX,OAAOW,MAAM;QAE5CL,OAAOP,WAAWM,WAAWC;QAC5B,GAAGE,SAAS;OAEf"}

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { ModalPopoutPortal } from "../AppRoot/ModalPopoutPortal.js";
+import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
 import { useScrollLock } from "../AppRoot/ScrollContext.js";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper.js";
 import { ScreenSpinnerContainer } from "./ScreenSpinnerContainer.js";
@@ -11,7 +11,7 @@ import { ScreenSpinnerSwapIcon } from "./ScreenSpinnerSwapIcon.js";
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
  */ export const ScreenSpinner = ({ style, className, state = 'loading', onClick, cancelLabel, mode, label, customIcon, usePortal, ...restProps })=>{
     useScrollLock();
-    return /*#__PURE__*/ _jsx(ModalPopoutPortal, {
+    return /*#__PURE__*/ _jsx(AppRootPortal, {
         usePortal: usePortal,
         children: /*#__PURE__*/ _jsx(PopoutWrapper, {
             className: className,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  label,\n  customIcon,\n  usePortal,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <ModalPopoutPortal usePortal={usePortal}>\n      <PopoutWrapper className={className} style={style} noBackground>\n        <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>\n          <ScreenSpinnerLoader {...restProps} />\n          <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n        </ScreenSpinnerContainer>\n      </PopoutWrapper>\n    </ModalPopoutPortal>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","ModalPopoutPortal","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","label","customIcon","usePortal","restProps","noBackground","displayName","Container","Loader","SwapIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,kCAA+B;AACjE,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,QAAQ,6BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT,CAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EACT,GAAGC,WACgB;IACnBf;IAEA,qBACE,KAACD;QAAkBe,WAAWA;kBAC5B,cAAA,KAACb;YAAcM,WAAWA;YAAWD,OAAOA;YAAOU,YAAY;sBAC7D,cAAA,MAACd;gBAAuBM,OAAOA;gBAAOG,MAAMA;gBAAMC,OAAOA;gBAAOC,YAAYA;;kCAC1E,KAACV;wBAAqB,GAAGY,SAAS;;kCAClC,KAACX;wBAAsBK,SAASA;wBAASC,aAAaA;;;;;;AAKhE,EAAE;AAEFL,cAAcY,WAAW,GAAG;AAE5BZ,cAAca,SAAS,GAAGhB;AAC1BG,cAAca,SAAS,CAACD,WAAW,GAAG;AAEtCZ,cAAcc,MAAM,GAAGhB;AACvBE,cAAcc,MAAM,CAACF,WAAW,GAAG;AAEnCZ,cAAce,QAAQ,GAAGhB;AACzBC,cAAce,QAAQ,CAACH,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  label,\n  customIcon,\n  usePortal,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <AppRootPortal usePortal={usePortal}>\n      <PopoutWrapper className={className} style={style} noBackground>\n        <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>\n          <ScreenSpinnerLoader {...restProps} />\n          <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n        </ScreenSpinnerContainer>\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","AppRootPortal","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","label","customIcon","usePortal","restProps","noBackground","displayName","Container","Loader","SwapIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,QAAQ,6BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT,CAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EACT,GAAGC,WACgB;IACnBf;IAEA,qBACE,KAACD;QAAce,WAAWA;kBACxB,cAAA,KAACb;YAAcM,WAAWA;YAAWD,OAAOA;YAAOU,YAAY;sBAC7D,cAAA,MAACd;gBAAuBM,OAAOA;gBAAOG,MAAMA;gBAAMC,OAAOA;gBAAOC,YAAYA;;kCAC1E,KAACV;wBAAqB,GAAGY,SAAS;;kCAClC,KAACX;wBAAsBK,SAASA;wBAASC,aAAaA;;;;;;AAKhE,EAAE;AAEFL,cAAcY,WAAW,GAAG;AAE5BZ,cAAca,SAAS,GAAGhB;AAC1BG,cAAca,SAAS,CAACD,WAAW,GAAG;AAEtCZ,cAAcc,MAAM,GAAGhB;AACvBE,cAAcc,MAAM,CAACF,WAAW,GAAG;AAEnCZ,cAAce,QAAQ,GAAGhB;AACzBC,cAAce,QAAQ,CAACH,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 export const ScreenSpinnerContext = React.createContext({
     state: 'loading',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/context.ts"],"sourcesContent":["import * as React from 'react';\nimport { type ScreenSpinnerProps } from './types';\n\nexport interface ScreenSpinnerContextProps {\n  state: NonNullable<ScreenSpinnerProps['state']>;\n  label?: ScreenSpinnerProps['label'];\n  customIcon?: ScreenSpinnerProps['customIcon'];\n}\n\nexport const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =\n  React.createContext<ScreenSpinnerContextProps>({\n    state: 'loading',\n    label: undefined,\n    customIcon: undefined,\n  });\n"],"names":["React","ScreenSpinnerContext","createContext","state","label","undefined","customIcon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAS/B,OAAO,MAAMC,uBACXD,MAAME,aAAa,CAA4B;IAC7CC,OAAO;IACPC,OAAOC;IACPC,YAAYD;AACd,GAAG"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/context.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type ScreenSpinnerProps } from './types';\n\nexport interface ScreenSpinnerContextProps {\n  state: NonNullable<ScreenSpinnerProps['state']>;\n  label?: ScreenSpinnerProps['label'];\n  customIcon?: ScreenSpinnerProps['customIcon'];\n}\n\nexport const ScreenSpinnerContext: React.Context<ScreenSpinnerContextProps> =\n  React.createContext<ScreenSpinnerContextProps>({\n    state: 'loading',\n    label: undefined,\n    customIcon: undefined,\n  });\n"],"names":["React","ScreenSpinnerContext","createContext","state","label","undefined","customIcon"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAS/B,OAAO,MAAMC,uBACXD,MAAME,aAAa,CAA4B;IAC7CC,OAAO;IACPC,OAAOC;IACPC,YAAYD;AACd,GAAG"}

package/dist/cssm/components/Separator/Separator.js

@@ -19,15 +19,12 @@ const alignClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Separator
- */ export const Separator = ({ padding = false, appearance = 'primary', direction = 'horizontal', align = 'center', style, size, ...restProps })=>{
+ */ export const Separator = ({ padding = false, appearance = 'primary', direction = 'horizontal', align = 'center', size, ...restProps })=>{
     const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(CUSTOM_CSS_TOKEN_FOR_USER_SIZE, size);
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         baseClassName: classNames(padding && styles.padded, appearanceClassNames[appearance], directionClassNames[direction], size !== undefined && styles.sized, align !== 'center' && alignClassNames[align], spacingSizeClassName),
-        style: spacingSizeStyle ? {
-            ...spacingSizeStyle,
-            ...style
-        } : style,
+        baseStyle: spacingSizeStyle,
         children: /*#__PURE__*/ _jsx("hr", {
             className: styles.in
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { 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 './Separator.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_SIZE = '--vkui_internal--spacing_size';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения разделителя\n   */\n  appearance?: 'primary' | 'secondary' | 'primary-alpha';\n  /**\n   * Добавляет стандартные отступы у разделителя\n   */\n  padding?: boolean;\n  /**\n   * Направление отображения разделителя\n   */\n  direction?: 'horizontal' | 'vertical';\n  /**\n   * Размер контейнера, в который вложен разделитель\n   *\n   * Принимает значения дизайн-системы, числовые значения и css-переменные\n   */\n  size?: SpacingSizeProp;\n  /**\n   * Выравнивание разделителя в контейнере\n   */\n  align?: 'start' | 'center' | 'end';\n}\n\nconst appearanceClassNames = {\n  'primary': styles.appearancePrimary,\n  'secondary': styles.appearanceSecondary,\n  'primary-alpha': styles.appearancePrimaryAlpha,\n};\n\nconst directionClassNames = {\n  horizontal: styles.directionHorizontal,\n  vertical: styles.directionVertical,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({\n  padding = false,\n  appearance = 'primary',\n  direction = 'horizontal',\n  align = 'center',\n  style,\n  size,\n  ...restProps\n}: SeparatorProps): React.ReactNode => {\n  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n    CUSTOM_CSS_TOKEN_FOR_USER_SIZE,\n    size,\n  );\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        padding && styles.padded,\n        appearanceClassNames[appearance],\n        directionClassNames[direction],\n        size !== undefined && styles.sized,\n        align !== 'center' && alignClassNames[align],\n        spacingSizeClassName,\n      )}\n      style={\n        spacingSizeStyle\n          ? {\n              ...spacingSizeStyle,\n              ...style,\n            }\n          : style\n      }\n    >\n      <hr className={styles.in} />\n    </RootComponent>\n  );\n};\n"],"names":["classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_SIZE","appearanceClassNames","appearancePrimary","appearanceSecondary","appearancePrimaryAlpha","directionClassNames","horizontal","directionHorizontal","vertical","directionVertical","alignClassNames","start","alignStart","end","alignEnd","Separator","padding","appearance","direction","align","style","size","restProps","spacingSizeClassName","spacingSizeStyle","baseClassName","padded","undefined","sized","hr","className","in"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,yBAAyB;AAE5C,OAAO,MAAMC,iCAAiC,gCAAgC;AA2B9E,MAAMC,uBAAuB;IAC3B,WAAWF,OAAOG,iBAAiB;IACnC,aAAaH,OAAOI,mBAAmB;IACvC,iBAAiBJ,OAAOK,sBAAsB;AAChD;AAEA,MAAMC,sBAAsB;IAC1BC,YAAYP,OAAOQ,mBAAmB;IACtCC,UAAUT,OAAOU,iBAAiB;AACpC;AAEA,MAAMC,kBAAkB;IACtBC,OAAOZ,OAAOa,UAAU;IACxBC,KAAKd,OAAOe,QAAQ;AACtB;AAEA;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,UAAU,KAAK,EACfC,aAAa,SAAS,EACtBC,YAAY,YAAY,EACxBC,QAAQ,QAAQ,EAChBC,KAAK,EACLC,IAAI,EACJ,GAAGC,WACY;IACf,MAAM,CAACC,sBAAsBC,iBAAiB,GAAG3B,mBAC/CG,gCACAqB;IAEF,qBACE,KAACvB;QACE,GAAGwB,SAAS;QACbG,eAAe7B,WACboB,WAAWjB,OAAO2B,MAAM,EACxBzB,oBAAoB,CAACgB,WAAW,EAChCZ,mBAAmB,CAACa,UAAU,EAC9BG,SAASM,aAAa5B,OAAO6B,KAAK,EAClCT,UAAU,YAAYT,eAAe,CAACS,MAAM,EAC5CI;QAEFH,OACEI,mBACI;YACE,GAAGA,gBAAgB;YACnB,GAAGJ,KAAK;QACV,IACAA;kBAGN,cAAA,KAACS;YAAGC,WAAW/B,OAAOgC,EAAE;;;AAG9B,EAAE"}
+{"version":3,"sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { 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 './Separator.module.css';\n\nexport const CUSTOM_CSS_TOKEN_FOR_USER_SIZE = '--vkui_internal--spacing_size';\n\nexport interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения разделителя\n   */\n  appearance?: 'primary' | 'secondary' | 'primary-alpha';\n  /**\n   * Добавляет стандартные отступы у разделителя\n   */\n  padding?: boolean;\n  /**\n   * Направление отображения разделителя\n   */\n  direction?: 'horizontal' | 'vertical';\n  /**\n   * Размер контейнера, в который вложен разделитель\n   *\n   * Принимает значения дизайн-системы, числовые значения и css-переменные\n   */\n  size?: SpacingSizeProp;\n  /**\n   * Выравнивание разделителя в контейнере\n   */\n  align?: 'start' | 'center' | 'end';\n}\n\nconst appearanceClassNames = {\n  'primary': styles.appearancePrimary,\n  'secondary': styles.appearanceSecondary,\n  'primary-alpha': styles.appearancePrimaryAlpha,\n};\n\nconst directionClassNames = {\n  horizontal: styles.directionHorizontal,\n  vertical: styles.directionVertical,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Separator\n */\nexport const Separator = ({\n  padding = false,\n  appearance = 'primary',\n  direction = 'horizontal',\n  align = 'center',\n  size,\n  ...restProps\n}: SeparatorProps): React.ReactNode => {\n  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(\n    CUSTOM_CSS_TOKEN_FOR_USER_SIZE,\n    size,\n  );\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        padding && styles.padded,\n        appearanceClassNames[appearance],\n        directionClassNames[direction],\n        size !== undefined && styles.sized,\n        align !== 'center' && alignClassNames[align],\n        spacingSizeClassName,\n      )}\n      baseStyle={spacingSizeStyle}\n    >\n      <hr className={styles.in} />\n    </RootComponent>\n  );\n};\n"],"names":["classNames","resolveSpacingSize","RootComponent","styles","CUSTOM_CSS_TOKEN_FOR_USER_SIZE","appearanceClassNames","appearancePrimary","appearanceSecondary","appearancePrimaryAlpha","directionClassNames","horizontal","directionHorizontal","vertical","directionVertical","alignClassNames","start","alignStart","end","alignEnd","Separator","padding","appearance","direction","align","size","restProps","spacingSizeClassName","spacingSizeStyle","baseClassName","padded","undefined","sized","baseStyle","hr","className","in"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAA8B,8BAA2B;AAEpF,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,yBAAyB;AAE5C,OAAO,MAAMC,iCAAiC,gCAAgC;AA2B9E,MAAMC,uBAAuB;IAC3B,WAAWF,OAAOG,iBAAiB;IACnC,aAAaH,OAAOI,mBAAmB;IACvC,iBAAiBJ,OAAOK,sBAAsB;AAChD;AAEA,MAAMC,sBAAsB;IAC1BC,YAAYP,OAAOQ,mBAAmB;IACtCC,UAAUT,OAAOU,iBAAiB;AACpC;AAEA,MAAMC,kBAAkB;IACtBC,OAAOZ,OAAOa,UAAU;IACxBC,KAAKd,OAAOe,QAAQ;AACtB;AAEA;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,UAAU,KAAK,EACfC,aAAa,SAAS,EACtBC,YAAY,YAAY,EACxBC,QAAQ,QAAQ,EAChBC,IAAI,EACJ,GAAGC,WACY;IACf,MAAM,CAACC,sBAAsBC,iBAAiB,GAAG1B,mBAC/CG,gCACAoB;IAEF,qBACE,KAACtB;QACE,GAAGuB,SAAS;QACbG,eAAe5B,WACboB,WAAWjB,OAAO0B,MAAM,EACxBxB,oBAAoB,CAACgB,WAAW,EAChCZ,mBAAmB,CAACa,UAAU,EAC9BE,SAASM,aAAa3B,OAAO4B,KAAK,EAClCR,UAAU,YAAYT,eAAe,CAACS,MAAM,EAC5CG;QAEFM,WAAWL;kBAEX,cAAA,KAACM;YAAGC,WAAW/B,OAAOgC,EAAE;;;AAG9B,EAAE"}

package/dist/cssm/components/SimpleCell/SimpleCell.js

@@ -16,14 +16,14 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/SimpleCell
- */ export const SimpleCell = ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, chevron, multiline, overTitle, subtitle, extraSubtitle, className, chevronSize = 'm', ...restProps })=>{
+ */ export const SimpleCell = ({ badgeBeforeTitle, badgeAfterTitle, badgeBeforeSubtitle, badgeAfterSubtitle, before, indicator, children, after, chevron, multiline, overTitle, subtitle, extraSubtitle, chevronSize = 'm', ...restProps })=>{
     const platform = usePlatform();
     const hasChevron = chevron === 'always' || chevron === 'auto' && platform === 'ios';
     const hasAfter = hasReactNode(after) || hasChevron;
     const { sizeY = 'none' } = useAdaptivity();
     return /*#__PURE__*/ _jsxs(Tappable, {
         ...restProps,
-        className: classNames(styles.host, restProps.disabled && styles.disabled, sizeY !== 'regular' && sizeYClassNames[sizeY], multiline && styles.mult, className),
+        baseClassName: classNames(styles.host, restProps.disabled && styles.disabled, sizeY !== 'regular' && sizeYClassNames[sizeY], multiline && styles.mult),
         children: [
             /*#__PURE__*/ _jsx("div", {
                 className: classNames(styles.before, platform === 'ios' && styles.beforeIos),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Помечает ячейку неактивной\n   */\n  disabled?: boolean;\n  /**\n   * Управляет видимостью иконки шеврона `›`\n   *\n   * - `auto` - добавляет шеврон справа только для платформы `ios`;\n   * - `always` - всегда показывает шеврон.\n   */\n  chevron?: 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  chevron,\n  multiline,\n  overTitle,\n  subtitle,\n  extraSubtitle,\n  className,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const hasChevron = chevron === 'always' || (chevron === 'auto' && platform === 'ios');\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles.host,\n        restProps.disabled && styles.disabled,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        multiline && styles.mult,\n        className,\n      )}\n    >\n      <div className={classNames(styles.before, platform === 'ios' && styles.beforeIos)}>\n        {before}\n      </div>\n      <div className={styles.middle}>\n        {overTitle && (\n          <Subhead Component=\"span\" className={classNames(styles.text, styles.overTitle)}>\n            {overTitle}\n          </Subhead>\n        )}\n        <div className={styles.content}>\n          {badgeBeforeTitle && <span className={styles.badge}>{badgeBeforeTitle}</span>}\n          <Headline Component=\"span\" className={styles.children} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && <span className={styles.badge}>{badgeAfterTitle}</span>}\n        </div>\n        {subtitle && (\n          <div className={styles.content}>\n            {badgeBeforeSubtitle && <span className={styles.badge}>{badgeBeforeSubtitle}</span>}\n            <Footnote normalize={false} className={classNames(styles.text, styles.subtitle)}>\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && <span className={styles.badge}>{badgeAfterSubtitle}</span>}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote className={classNames(styles.text, styles.extraSubtitle)}>\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles.indicator}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles.after, 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && <Chevron size={chevronSize} className={styles.chevronIcon} />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Tappable","Footnote","Headline","Subhead","Chevron","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","chevron","multiline","overTitle","subtitle","extraSubtitle","className","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","host","disabled","mult","div","beforeIos","middle","Component","text","content","span","badge","weight","normalize","size","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,uBAAoB;AAC5C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAkEA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,SAAS,EACTC,cAAc,GAAG,EACjB,GAAGC,WACa;IAChB,MAAMC,WAAW7B;IAEjB,MAAM8B,aAAaT,YAAY,YAAaA,YAAY,UAAUQ,aAAa;IAE/E,MAAME,WAAWjC,aAAasB,UAAUU;IACxC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGjC;IAE3B,qBACE,MAACE;QACE,GAAG2B,SAAS;QACbF,WAAW7B,WACTS,OAAO2B,IAAI,EACXL,UAAUM,QAAQ,IAAI5B,OAAO4B,QAAQ,EACrCF,UAAU,aAAazB,eAAe,CAACyB,MAAM,EAC7CV,aAAahB,OAAO6B,IAAI,EACxBT;;0BAGF,KAACU;gBAAIV,WAAW7B,WAAWS,OAAOW,MAAM,EAAEY,aAAa,SAASvB,OAAO+B,SAAS;0BAC7EpB;;0BAEH,MAACmB;gBAAIV,WAAWpB,OAAOgC,MAAM;;oBAC1Bf,2BACC,KAACnB;wBAAQmC,WAAU;wBAAOb,WAAW7B,WAAWS,OAAOkC,IAAI,EAAElC,OAAOiB,SAAS;kCAC1EA;;kCAGL,MAACa;wBAAIV,WAAWpB,OAAOmC,OAAO;;4BAC3B5B,kCAAoB,KAAC6B;gCAAKhB,WAAWpB,OAAOqC,KAAK;0CAAG9B;;0CACrD,KAACV;gCAASoC,WAAU;gCAAOb,WAAWpB,OAAOa,QAAQ;gCAAEyB,QAAO;0CAC3DzB;;4BAEFrB,aAAagB,kCAAoB,KAAC4B;gCAAKhB,WAAWpB,OAAOqC,KAAK;0CAAG7B;;;;oBAEnEU,0BACC,MAACY;wBAAIV,WAAWpB,OAAOmC,OAAO;;4BAC3B1B,qCAAuB,KAAC2B;gCAAKhB,WAAWpB,OAAOqC,KAAK;0CAAG5B;;0CACxD,KAACb;gCAAS2C,WAAW;gCAAOnB,WAAW7B,WAAWS,OAAOkC,IAAI,EAAElC,OAAOkB,QAAQ;0CAC3EA;;4BAEFR,oCAAsB,KAAC0B;gCAAKhB,WAAWpB,OAAOqC,KAAK;0CAAG3B;;;;oBAG1DS,+BACC,KAACvB;wBAASwB,WAAW7B,WAAWS,OAAOkC,IAAI,EAAElC,OAAOmB,aAAa;kCAC9DA;;;;YAIN3B,aAAaoB,4BACZ,KAACf;gBAASoC,WAAU;gBAAOK,QAAO;gBAAIlB,WAAWpB,OAAOY,SAAS;0BAC9DA;;YAGJa,0BACC,MAACK;gBAAIV,WAAW7B,WAAWS,OAAOc,KAAK,EAAE;;oBACtCA;oBACAU,4BAAc,KAACzB;wBAAQyC,MAAMnB;wBAAaD,WAAWpB,OAAOyC,WAAW;;;;;;AAKlF,EAAE"}
+{"version":3,"sources":["../../../../src/components/SimpleCell/SimpleCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasComponent } from '../../types';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Chevron } from './Chevron/Chevron';\nimport styles from './SimpleCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SimpleCellOwnProps extends HasComponent {\n  /**\n   * Иконка 28 или `<Avatar size={28|32|40|48|72} />`\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится слева от текста `children`.\n   */\n  badgeBeforeTitle?: React.ReactNode;\n  /**\n   * Иконка 12 или `<Badge />`. Добавится справа от текста `children`.\n   */\n  badgeAfterTitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится слева от текста `subtitle`.\n   */\n  badgeBeforeSubtitle?: React.ReactNode;\n  /**\n   * Иконка 12. Добавится справа от текста `subtitle`.\n   */\n  badgeAfterSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста справа от `children`.\n   */\n  indicator?: React.ReactNode;\n  /**\n   * Дополнительная строка текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Дополнительная строка текста под `children` и `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Иконка 24|28 или `<Switch />`. Располагается справа от `indicator`.\n   */\n  after?: React.ReactNode;\n  /**\n   * Помечает ячейку неактивной\n   */\n  disabled?: boolean;\n  /**\n   * Управляет видимостью иконки шеврона `›`\n   *\n   * - `auto` - добавляет шеврон справа только для платформы `ios`;\n   * - `always` - всегда показывает шеврон.\n   */\n  chevron?: 'auto' | 'always';\n  /**\n   * Размер chevron\n   */\n  chevronSize?: 's' | 'm';\n  /**\n   * Включает многострочный режим для отображения текста\n   */\n  multiline?: boolean;\n}\n\nexport interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SimpleCell\n */\nexport const SimpleCell = ({\n  badgeBeforeTitle,\n  badgeAfterTitle,\n  badgeBeforeSubtitle,\n  badgeAfterSubtitle,\n  before,\n  indicator,\n  children,\n  after,\n  chevron,\n  multiline,\n  overTitle,\n  subtitle,\n  extraSubtitle,\n  chevronSize = 'm',\n  ...restProps\n}: SimpleCellProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const hasChevron = chevron === 'always' || (chevron === 'auto' && platform === 'ios');\n\n  const hasAfter = hasReactNode(after) || hasChevron;\n  const { sizeY = 'none' } = useAdaptivity();\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        restProps.disabled && styles.disabled,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        multiline && styles.mult,\n      )}\n    >\n      <div className={classNames(styles.before, platform === 'ios' && styles.beforeIos)}>\n        {before}\n      </div>\n      <div className={styles.middle}>\n        {overTitle && (\n          <Subhead Component=\"span\" className={classNames(styles.text, styles.overTitle)}>\n            {overTitle}\n          </Subhead>\n        )}\n        <div className={styles.content}>\n          {badgeBeforeTitle && <span className={styles.badge}>{badgeBeforeTitle}</span>}\n          <Headline Component=\"span\" className={styles.children} weight=\"3\">\n            {children}\n          </Headline>\n          {hasReactNode(badgeAfterTitle) && <span className={styles.badge}>{badgeAfterTitle}</span>}\n        </div>\n        {subtitle && (\n          <div className={styles.content}>\n            {badgeBeforeSubtitle && <span className={styles.badge}>{badgeBeforeSubtitle}</span>}\n            <Footnote normalize={false} className={classNames(styles.text, styles.subtitle)}>\n              {subtitle}\n            </Footnote>\n            {badgeAfterSubtitle && <span className={styles.badge}>{badgeAfterSubtitle}</span>}\n          </div>\n        )}\n        {extraSubtitle && (\n          <Footnote className={classNames(styles.text, styles.extraSubtitle)}>\n            {extraSubtitle}\n          </Footnote>\n        )}\n      </div>\n      {hasReactNode(indicator) && (\n        <Headline Component=\"span\" weight=\"3\" className={styles.indicator}>\n          {indicator}\n        </Headline>\n      )}\n      {hasAfter && (\n        <div className={classNames(styles.after, 'vkuiInternalSimpleCell__after')}>\n          {after}\n          {hasChevron && <Chevron size={chevronSize} className={styles.chevronIcon} />}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","Tappable","Footnote","Headline","Subhead","Chevron","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SimpleCell","badgeBeforeTitle","badgeAfterTitle","badgeBeforeSubtitle","badgeAfterSubtitle","before","indicator","children","after","chevron","multiline","overTitle","subtitle","extraSubtitle","chevronSize","restProps","platform","hasChevron","hasAfter","sizeY","baseClassName","host","disabled","mult","div","className","beforeIos","middle","Component","text","content","span","badge","weight","normalize","size","chevronIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,OAAO,QAAQ,uBAAoB;AAC5C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAkEA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,gBAAgB,EAChBC,eAAe,EACfC,mBAAmB,EACnBC,kBAAkB,EAClBC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,aAAa,EACbC,cAAc,GAAG,EACjB,GAAGC,WACa;IAChB,MAAMC,WAAW5B;IAEjB,MAAM6B,aAAaR,YAAY,YAAaA,YAAY,UAAUO,aAAa;IAE/E,MAAME,WAAWhC,aAAasB,UAAUS;IACxC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGhC;IAE3B,qBACE,MAACE;QACE,GAAG0B,SAAS;QACbK,eAAenC,WACbS,OAAO2B,IAAI,EACXN,UAAUO,QAAQ,IAAI5B,OAAO4B,QAAQ,EACrCH,UAAU,aAAaxB,eAAe,CAACwB,MAAM,EAC7CT,aAAahB,OAAO6B,IAAI;;0BAG1B,KAACC;gBAAIC,WAAWxC,WAAWS,OAAOW,MAAM,EAAEW,aAAa,SAAStB,OAAOgC,SAAS;0BAC7ErB;;0BAEH,MAACmB;gBAAIC,WAAW/B,OAAOiC,MAAM;;oBAC1BhB,2BACC,KAACnB;wBAAQoC,WAAU;wBAAOH,WAAWxC,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOiB,SAAS;kCAC1EA;;kCAGL,MAACa;wBAAIC,WAAW/B,OAAOoC,OAAO;;4BAC3B7B,kCAAoB,KAAC8B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG/B;;0CACrD,KAACV;gCAASqC,WAAU;gCAAOH,WAAW/B,OAAOa,QAAQ;gCAAE0B,QAAO;0CAC3D1B;;4BAEFrB,aAAagB,kCAAoB,KAAC6B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG9B;;;;oBAEnEU,0BACC,MAACY;wBAAIC,WAAW/B,OAAOoC,OAAO;;4BAC3B3B,qCAAuB,KAAC4B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG7B;;0CACxD,KAACb;gCAAS4C,WAAW;gCAAOT,WAAWxC,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOkB,QAAQ;0CAC3EA;;4BAEFR,oCAAsB,KAAC2B;gCAAKN,WAAW/B,OAAOsC,KAAK;0CAAG5B;;;;oBAG1DS,+BACC,KAACvB;wBAASmC,WAAWxC,WAAWS,OAAOmC,IAAI,EAAEnC,OAAOmB,aAAa;kCAC9DA;;;;YAIN3B,aAAaoB,4BACZ,KAACf;gBAASqC,WAAU;gBAAOK,QAAO;gBAAIR,WAAW/B,OAAOY,SAAS;0BAC9DA;;YAGJY,0BACC,MAACM;gBAAIC,WAAWxC,WAAWS,OAAOc,KAAK,EAAE;;oBACtCA;oBACAS,4BAAc,KAACxB;wBAAQ0C,MAAMrB;wBAAaW,WAAW/B,OAAO0C,WAAW;;;;;;AAKlF,EAAE"}

package/dist/cssm/components/SimpleGrid/SimpleGrid.js

@@ -15,7 +15,7 @@ const alignClassNames = {
     stretch: styles.alignStretch,
     baseline: styles.alignBaseline
 };
-export const SimpleGrid = ({ columns = 1, gap, style: styleProp, margin = 'none', minColWidth, align = 'stretch', ...props })=>{
+export const SimpleGrid = ({ columns = 1, gap, margin = 'none', minColWidth, align = 'stretch', ...props })=>{
     const style = {};
     const [rowGap, columnGap] = calculateGap(gap);
     if (typeof rowGap === 'number') {
@@ -31,10 +31,7 @@ export const SimpleGrid = ({ columns = 1, gap, style: styleProp, margin = 'none'
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...props,
         baseClassName: classNames(styles.host, margin !== 'none' && marginClassNames[margin], alignClassNames[align], minColWidth && styles.withMinWidth, typeof columnGap === 'string' && columnGapClassNames[columnGap], typeof rowGap === 'string' && rowGapClassNames[rowGap]),
-        style: {
-            ...style,
-            ...styleProp
-        }
+        baseStyle: style
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\nconst marginClassNames = {\n  'auto': styles.marginAuto,\n  'auto-inline': styles.marginAutoInline,\n  'auto-block': styles.marginAutoBlock,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nexport interface SimpleGridProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  /**\n   * Количество колонок\n   */\n  columns?: number;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Управляет отступами вокруг контейнера\n   * Значение `none` позволяет отключить отступы\n   * Значение `auto` позволяет задать платформенные отступы\n   * Значение `auto-inline` позволяет задать платформенные inline-отступы\n   * Значение `auto-block` позволяет задать платформенные block-отступы\n   */\n  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block';\n  /**\n   * Вместо задания количества колонок, можно указать минимальную ширину элементов\n   */\n  minColWidth?: number;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n}\n\nexport const SimpleGrid = ({\n  columns = 1,\n  gap,\n  style: styleProp,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  ...props\n}: SimpleGridProps) => {\n  const style: CSSCustomProperties = {};\n  const [rowGap, columnGap] = calculateGap(gap);\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n  style['--vkui_internal--grid_columns'] = `${columns}`;\n  if (minColWidth) {\n    style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n  }\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(\n        styles.host,\n        margin !== 'none' && marginClassNames[margin],\n        alignClassNames[align],\n        minColWidth && styles.withMinWidth,\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n      )}\n      style={{ ...style, ...styleProp }}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","styles","marginClassNames","marginAuto","marginAutoInline","marginAutoBlock","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","SimpleGrid","columns","gap","style","styleProp","margin","minColWidth","align","props","rowGap","columnGap","baseClassName","host","withMinWidth"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,gBAAgB,QACX,6BAAoB;AAE3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,mBAAmB;IACvB,QAAQD,OAAOE,UAAU;IACzB,eAAeF,OAAOG,gBAAgB;IACtC,cAAcH,OAAOI,eAAe;AACtC;AAEA,MAAMC,kBAAkB;IACtBC,OAAON,OAAOO,UAAU;IACxBC,KAAKR,OAAOS,QAAQ;IACpBC,QAAQV,OAAOW,WAAW;IAC1BC,SAASZ,OAAOa,YAAY;IAC5BC,UAAUd,OAAOe,aAAa;AAChC;AA+BA,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,GAAG,EACHC,OAAOC,SAAS,EAChBC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EACjB,GAAGC,OACa;IAChB,MAAML,QAA6B,CAAC;IACpC,MAAM,CAACM,QAAQC,UAAU,GAAG9B,aAAasB;IACzC,IAAI,OAAOO,WAAW,UAAU;QAC9BN,KAAK,CAAC,2BAA2B,GAAG,GAAGM,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCP,KAAK,CAAC,8BAA8B,GAAG,GAAGO,UAAU,EAAE,CAAC;IACzD;IACAP,KAAK,CAAC,gCAAgC,GAAG,GAAGF,SAAS;IACrD,IAAIK,aAAa;QACfH,KAAK,CAAC,iCAAiC,GAAG,GAAGG,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACvB;QACE,GAAGyB,KAAK;QACTG,eAAehC,WACbK,OAAO4B,IAAI,EACXP,WAAW,UAAUpB,gBAAgB,CAACoB,OAAO,EAC7ChB,eAAe,CAACkB,MAAM,EACtBD,eAAetB,OAAO6B,YAAY,EAClC,OAAOH,cAAc,YAAY7B,mBAAmB,CAAC6B,UAAU,EAC/D,OAAOD,WAAW,YAAY3B,gBAAgB,CAAC2B,OAAO;QAExDN,OAAO;YAAE,GAAGA,KAAK;YAAE,GAAGC,SAAS;QAAC;;AAGtC,EAAE"}
+{"version":3,"sources":["../../../../src/components/SimpleGrid/SimpleGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport {\n  calculateGap,\n  columnGapClassNames,\n  type GapsProp,\n  rowGapClassNames,\n} from '../../lib/layouts';\nimport type { CSSCustomProperties } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport type { RootComponentProps } from '../RootComponent/RootComponent';\nimport styles from './SimpleGrid.module.css';\n\nconst marginClassNames = {\n  'auto': styles.marginAuto,\n  'auto-inline': styles.marginAutoInline,\n  'auto-block': styles.marginAutoBlock,\n};\n\nconst alignClassNames = {\n  start: styles.alignStart,\n  end: styles.alignEnd,\n  center: styles.alignCenter,\n  stretch: styles.alignStretch,\n  baseline: styles.alignBaseline,\n};\n\nexport interface SimpleGridProps extends Omit<RootComponentProps<HTMLElement>, 'baseClassName'> {\n  /**\n   * Количество колонок\n   */\n  columns?: number;\n  /**\n   * Отступы между элементами.\n   * Значение из списка предопределённых пресетов или число, которое будет приведено к пикселям.\n   * Через массив можно задать отступ между столбцами и строками [row, column], если они отличаются.\n   */\n  gap?: GapsProp;\n  /**\n   * Управляет отступами вокруг контейнера\n   * Значение `none` позволяет отключить отступы\n   * Значение `auto` позволяет задать платформенные отступы\n   * Значение `auto-inline` позволяет задать платформенные inline-отступы\n   * Значение `auto-block` позволяет задать платформенные block-отступы\n   */\n  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block';\n  /**\n   * Вместо задания количества колонок, можно указать минимальную ширину элементов\n   */\n  minColWidth?: number;\n  /**\n   * Выравнивание элементов по вспомогательной оси, эквивалентно `align-items`\n   */\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\n}\n\nexport const SimpleGrid = ({\n  columns = 1,\n  gap,\n  margin = 'none',\n  minColWidth,\n  align = 'stretch',\n  ...props\n}: SimpleGridProps) => {\n  const style: CSSCustomProperties = {};\n  const [rowGap, columnGap] = calculateGap(gap);\n  if (typeof rowGap === 'number') {\n    style['--vkui_internal--row_gap'] = `${rowGap}px`;\n  }\n  if (typeof columnGap === 'number') {\n    style['--vkui_internal--column_gap'] = `${columnGap}px`;\n  }\n  style['--vkui_internal--grid_columns'] = `${columns}`;\n  if (minColWidth) {\n    style['--vkui_internal--min_col_width'] = `${minColWidth}px`;\n  }\n\n  return (\n    <RootComponent\n      {...props}\n      baseClassName={classNames(\n        styles.host,\n        margin !== 'none' && marginClassNames[margin],\n        alignClassNames[align],\n        minColWidth && styles.withMinWidth,\n        typeof columnGap === 'string' && columnGapClassNames[columnGap],\n        typeof rowGap === 'string' && rowGapClassNames[rowGap],\n      )}\n      baseStyle={style}\n    />\n  );\n};\n"],"names":["classNames","calculateGap","columnGapClassNames","rowGapClassNames","RootComponent","styles","marginClassNames","marginAuto","marginAutoInline","marginAutoBlock","alignClassNames","start","alignStart","end","alignEnd","center","alignCenter","stretch","alignStretch","baseline","alignBaseline","SimpleGrid","columns","gap","margin","minColWidth","align","props","style","rowGap","columnGap","baseClassName","host","withMinWidth","baseStyle"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SACEC,YAAY,EACZC,mBAAmB,EAEnBC,gBAAgB,QACX,6BAAoB;AAE3B,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,mBAAmB;IACvB,QAAQD,OAAOE,UAAU;IACzB,eAAeF,OAAOG,gBAAgB;IACtC,cAAcH,OAAOI,eAAe;AACtC;AAEA,MAAMC,kBAAkB;IACtBC,OAAON,OAAOO,UAAU;IACxBC,KAAKR,OAAOS,QAAQ;IACpBC,QAAQV,OAAOW,WAAW;IAC1BC,SAASZ,OAAOa,YAAY;IAC5BC,UAAUd,OAAOe,aAAa;AAChC;AA+BA,OAAO,MAAMC,aAAa,CAAC,EACzBC,UAAU,CAAC,EACXC,GAAG,EACHC,SAAS,MAAM,EACfC,WAAW,EACXC,QAAQ,SAAS,EACjB,GAAGC,OACa;IAChB,MAAMC,QAA6B,CAAC;IACpC,MAAM,CAACC,QAAQC,UAAU,GAAG7B,aAAasB;IACzC,IAAI,OAAOM,WAAW,UAAU;QAC9BD,KAAK,CAAC,2BAA2B,GAAG,GAAGC,OAAO,EAAE,CAAC;IACnD;IACA,IAAI,OAAOC,cAAc,UAAU;QACjCF,KAAK,CAAC,8BAA8B,GAAG,GAAGE,UAAU,EAAE,CAAC;IACzD;IACAF,KAAK,CAAC,gCAAgC,GAAG,GAAGN,SAAS;IACrD,IAAIG,aAAa;QACfG,KAAK,CAAC,iCAAiC,GAAG,GAAGH,YAAY,EAAE,CAAC;IAC9D;IAEA,qBACE,KAACrB;QACE,GAAGuB,KAAK;QACTI,eAAe/B,WACbK,OAAO2B,IAAI,EACXR,WAAW,UAAUlB,gBAAgB,CAACkB,OAAO,EAC7Cd,eAAe,CAACgB,MAAM,EACtBD,eAAepB,OAAO4B,YAAY,EAClC,OAAOH,cAAc,YAAY5B,mBAAmB,CAAC4B,UAAU,EAC/D,OAAOD,WAAW,YAAY1B,gBAAgB,CAAC0B,OAAO;QAExDK,WAAWN;;AAGjB,EAAE"}

package/dist/cssm/components/Skeleton/Skeleton.js

@@ -89,7 +89,7 @@ const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
  * > вписывается в слоты компонентов, которые обычно ожидают текст.
  *
  * @since 6.1.0
- */ export const Skeleton = ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, style, children, colorFrom, colorTo, noAnimation = false, duration, margin, getRootRef, ...restProps })=>{
+ */ export const Skeleton = ({ width, height, inlineSize, blockSize, maxWidth, maxInlineSize, borderRadius, children, colorFrom, colorTo, noAnimation = false, duration, margin, getRootRef, ...restProps })=>{
     const rootRef = useExternRef(getRootRef);
     const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);
     const skeletonGradientLeft = useSkeletonPosition(rootRef);
@@ -117,10 +117,7 @@ const CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';
         getRootRef: rootRef,
         Component: "span",
         baseClassName: classNames(styles.host, disableAnimation && styles.disableAnimation),
-        style: {
-            ...skeletonStyle,
-            ...style
-        },
+        baseStyle: skeletonStyle,
         ...restProps,
         children: children || /*#__PURE__*/ _jsx(_Fragment, {
             children: "‌"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { millisecondsInSecond } from 'date-fns/constants';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`\n *\n * https://developer.chrome.com/blog/page-lifecycle-api/\n *\n * @param duration длительность анимации в секундах\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона\n */\nfunction useSkeletonPosition(rootRef: React.MutableRefObject<HTMLElement | null>) {\n  const { document, window } = useDOM();\n  const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n    useStateWithPrev('0');\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el || !document) {\n      return;\n    }\n\n    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useGlobalEventListener(window, 'resize', updatePosition);\n\n  return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации\n   */\n  colorFrom?: string;\n\n  /**\n   * Финальный цвет анимации\n   */\n  colorTo?: string;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет\n   */\n  noAnimation?: boolean;\n\n  /**\n   * Длительность анимации в секундах\n   */\n  duration?: number;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  style,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(styles.host, disableAnimation && styles.disableAnimation)}\n      style={{ ...skeletonStyle, ...style }}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useGlobalEventListener","useStateWithPrev","useDOM","RootComponent","styles","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","style","children","colorFrom","colorTo","noAnimation","margin","getRootRef","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","host"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { millisecondsInSecond } from 'date-fns/constants';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useStateWithPrev } from '../../hooks/useStateWithPrev';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Skeleton.module.css';\n\nconst CUSTOM_PROPERTY_GRADIENT_LEFT = '--vkui_internal--skeleton_gradient_left';\n\n/**\n * Синхронизирует анимацию скелетонов с помощью временных отрезков\n *\n * ## visibilitychange\n *\n * В синхронизацию не заложен механизм перехода на оптимизации браузеров при\n * переходе на другую вкладку, поскольку нет уверенности в реальности таких\n * кейсов со скелетонами. Если такой кейс принесут, необходимо обработать\n * событие `visibilitychange` используя функцию `syncAnimation`\n *\n * https://developer.chrome.com/blog/page-lifecycle-api/\n *\n * @param duration длительность анимации в секундах\n */\nfunction useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {\n  const [isAnimationStarted, setIsAnimationStarted] = React.useState<boolean>(false);\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const syncAnimation = React.useCallback(() => {\n    clearTimeout(timer.current);\n    setIsAnimationStarted(false);\n\n    const durationInMilliseconds = duration * millisecondsInSecond;\n    const delay = durationInMilliseconds - (performance.now() % durationInMilliseconds);\n\n    timer.current = setTimeout(() => setIsAnimationStarted(true), delay);\n\n    return () => clearTimeout(timer.current);\n  }, [duration]);\n\n  React.useEffect(() => {\n    if (disableAnimation) {\n      setIsAnimationStarted(false);\n      return;\n    }\n\n    if (isAnimationStarted) {\n      return;\n    }\n\n    return syncAnimation();\n  }, [disableAnimation, isAnimationStarted, syncAnimation]);\n\n  return isAnimationStarted;\n}\n\n/**\n * Вычисляет позицию скелетона\n */\nfunction useSkeletonPosition(rootRef: React.MutableRefObject<HTMLElement | null>) {\n  const { document, window } = useDOM();\n  const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =\n    useStateWithPrev('0');\n\n  const updatePosition = React.useCallback(() => {\n    const el = rootRef.current;\n    if (!el || !document) {\n      return;\n    }\n\n    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);\n    const gradientValue = value === 0 ? '0' : `${value}px`;\n    if (prevSkeletonGradientLeft !== gradientValue) {\n      setSkeletonGradientLeft(gradientValue);\n    }\n  }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);\n\n  React.useEffect(updatePosition, [updatePosition]);\n  useGlobalEventListener(window, 'resize', updatePosition);\n\n  return skeletonGradientLeft;\n}\n\nexport interface SkeletonProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement | HTMLSpanElement>,\n    Pick<\n      React.CSSProperties,\n      | 'width'\n      | 'height'\n      | 'inlineSize'\n      | 'blockSize'\n      | 'maxWidth'\n      | 'maxInlineSize'\n      | 'borderRadius'\n      | 'margin'\n    > {\n  /**\n   * Начальный цвет анимации\n   */\n  colorFrom?: string;\n\n  /**\n   * Финальный цвет анимации\n   */\n  colorTo?: string;\n\n  /**\n   * Выключает анимацию, в результате чего показывается только один цвет\n   */\n  noAnimation?: boolean;\n\n  /**\n   * Длительность анимации в секундах\n   */\n  duration?: number;\n}\n\n/**\n * > Старайтесь минимизировать количество заглушек на экране. Не каждый элемент\n * > на экране должен заменяться заглушкой.\n * >\n * > Текстовые блоки лучше сокращать до трёх строк. Ширина последней строки\n * > скелета вычисляется, как 75% от ширины текстового блока. Высота скелетона\n * > автоматически подстраивается под размер шрифта, поэтому идеально\n * > вписывается в слоты компонентов, которые обычно ожидают текст.\n *\n * @since 6.1.0\n */\nexport const Skeleton = ({\n  width,\n  height,\n  inlineSize,\n  blockSize,\n  maxWidth,\n  maxInlineSize,\n  borderRadius,\n  children,\n  colorFrom,\n  colorTo,\n  noAnimation = false,\n  duration,\n  margin,\n  getRootRef,\n  ...restProps\n}: SkeletonProps): React.ReactNode => {\n  const rootRef = useExternRef(getRootRef);\n\n  const disableAnimation = !useSkeletonSyncAnimation(noAnimation, duration);\n  const skeletonGradientLeft = useSkeletonPosition(rootRef);\n\n  const skeletonStyle: React.CSSProperties & CSSCustomProperties = {\n    width,\n    height,\n    inlineSize,\n    blockSize,\n    maxWidth,\n    maxInlineSize,\n    borderRadius,\n    margin,\n    [CUSTOM_PROPERTY_GRADIENT_LEFT]: skeletonGradientLeft,\n  };\n\n  if (colorFrom) {\n    skeletonStyle['--vkui_internal--skeleton_color_from'] = colorFrom;\n  }\n\n  if (colorTo) {\n    skeletonStyle['--vkui_internal--skeleton_color_to'] = colorTo;\n  }\n\n  if (Number.isFinite(duration)) {\n    skeletonStyle['--vkui_internal--skeleton_animation_duration'] = `${duration}s`;\n  }\n\n  return (\n    <RootComponent\n      getRootRef={rootRef}\n      Component=\"span\"\n      baseClassName={classNames(styles.host, disableAnimation && styles.disableAnimation)}\n      baseStyle={skeletonStyle}\n      {...restProps}\n    >\n      {children || <>&zwnj;</>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","millisecondsInSecond","useExternRef","useGlobalEventListener","useStateWithPrev","useDOM","RootComponent","styles","CUSTOM_PROPERTY_GRADIENT_LEFT","useSkeletonSyncAnimation","disableAnimation","duration","isAnimationStarted","setIsAnimationStarted","useState","timer","useRef","undefined","syncAnimation","useCallback","clearTimeout","current","durationInMilliseconds","delay","performance","now","setTimeout","useEffect","useSkeletonPosition","rootRef","document","window","skeletonGradientLeft","prevSkeletonGradientLeft","setSkeletonGradientLeft","updatePosition","el","value","getBoundingClientRect","left","body","gradientValue","Skeleton","width","height","inlineSize","blockSize","maxWidth","maxInlineSize","borderRadius","children","colorFrom","colorTo","noAnimation","margin","getRootRef","restProps","skeletonStyle","Number","isFinite","Component","baseClassName","host","baseStyle"],"mappings":"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"}

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

@@ -34,7 +34,7 @@ const animationStateClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Snackbar
- */ export const Snackbar = ({ placement = 'bottom-start', children, layout, action, before, after, duration = 4000, onActionClick, onClose, mode = 'default', subtitle, offsetY, style, getRootRef, ...restProps })=>{
+ */ export const Snackbar = ({ placement = 'bottom-start', children, layout, action, before, after, duration = 4000, onActionClick, onClose, mode = 'default', subtitle, offsetY, getRootRef, ...restProps })=>{
     const platform = usePlatform();
     const [open, setOpen] = React.useState(true);
     const [touched, setTouched] = React.useState(false);
@@ -139,7 +139,7 @@ const animationStateClassNames = {
         ...restProps,
         role: "presentation",
         baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, touched && styles.touched, placementClassNames[placement], animationStateClassNames[animationState]),
-        style: resolveOffsetYCssStyle(placement, style, offsetY),
+        baseStyle: resolveOffsetYCssStyle(placement, offsetY),
         getRootRef: rootRef,
         children: /*#__PURE__*/ _jsx("div", {
             role: "alert",