@vkontakte/vkui 5.3.2 → 5.4.0

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

@@ -1 +1,153 @@
-.vkuiRemovable__content{align-items:center;display:flex;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);position:relative}.vkuiRemovable__action{border:none;flex-grow:0;flex-shrink:0;position:relative}.vkuiRemovable__action.vkuiRemovable__action{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiRemovable--align-start .vkuiRemovable__action{align-self:flex-start}.vkuiRemovable--ios{overflow:hidden}.vkuiRemovable__remove{background-color:#e64646;background-color:var(--vkui--color_background_negative);border:none;border-radius:0;color:#fff;color:var(--vkui_internal--white);font-size:15px;height:100%;left:100%;line-height:45px;padding:0 10px;position:absolute;top:0}.vkuiRemovable__remove-in{align-items:center;display:flex;height:100%;justify-content:center;width:100%}@media (prefers-reduced-motion:no-preference){.vkuiRemovable--ios .vkuiRemovable__content{transition:transform .6s cubic-bezier(.4,0,.2,1);transition:transform .6s var(--vkui--animation_easing_platform)}}.vkuiRemovable__toggle{background:none;display:block;height:44px;margin:0 2px;width:44px}.vkuiRemovable__toggle-in{align-content:center;align-items:center;border:none;display:flex;height:100%;justify-content:center;position:relative;width:100%}.vkuiRemovable__toggle-in:after{background-color:#e64646;background-color:var(--vkui--color_background_negative);border-radius:50%;content:"";height:22px;width:22px}.vkuiRemovable__toggle-in:before{background-color:#fff;background-color:var(--vkui_internal--white);content:"";display:block;height:2px;position:absolute;width:12px}.vkuiRemovable--ios .vkuiRemovable__content{padding-left:0;padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular)}.vkuiInternalFormItem--removable .vkuiRemovable__content,.vkuiInternalFormLayoutGroup--removable .vkuiRemovable__content{align-items:flex-start;flex-wrap:wrap}.vkuiRemovable__offset{display:none}.vkuiInternalFormItem--withTop .vkuiInternalFormItem__removable~.vkuiRemovable__offset,.vkuiInternalFormLayoutGroup--removable .vkuiInternalFormItem--withTop~.vkuiRemovable__offset{display:block;height:calc(2px + 18px + 8px);height:calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);order:-1;width:100%}.vkuiInternalFormItem--sizeY-compact.vkuiInternalFormItem--withTop .vkuiInternalFormItem__removable~.vkuiRemovable__offset,.vkuiInternalFormLayoutGroup--sizeY-compact.vkuiInternalFormLayoutGroup--removable .vkuiInternalFormItem--withTop~.vkuiRemovable__offset{height:calc(2px + 16px + 6px);height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiInternalFormItem--sizeY-none.vkuiInternalFormItem--withTop .vkuiInternalFormItem__removable~.vkuiRemovable__offset,.vkuiInternalFormLayoutGroup--sizeY-none.vkuiInternalFormLayoutGroup--removable .vkuiInternalFormItem--withTop~.vkuiRemovable__offset{height:calc(2px + 16px + 6px);height:calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px)}}
+.Removable__content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
+}
+
+.Removable__action {
+  position: relative;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border: none;
+}
+
+/* Увеличиваем вес селектора */
+
+.Removable__action.Removable__action {
+  color: var(--vkui--color_icon_secondary);
+}
+
+.Removable--align-start .Removable__action {
+  align-self: flex-start;
+}
+
+/**
+ * iOS
+ */
+
+.Removable--ios {
+  overflow: hidden;
+}
+
+.Removable__remove {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  height: 100%;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 45px;
+  color: var(--vkui_internal--white);
+  background-color: var(--vkui--color_background_negative);
+  border: none;
+  border-radius: 0;
+}
+
+.Removable__remove-in {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .Removable--ios .Removable__content {
+    transition: transform 0.6s var(--vkui--animation_easing_platform);
+  }
+}
+
+.Removable__toggle {
+  display: block;
+  width: 44px;
+  height: 44px;
+  margin: 0 2px;
+  background: none;
+}
+
+.Removable__toggle-in {
+  position: relative;
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.Removable__toggle-in::after {
+  content: '';
+  width: 22px;
+  height: 22px;
+  background-color: var(--vkui--color_background_negative);
+  border-radius: 50%;
+}
+
+.Removable__toggle-in::before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 12px;
+  height: 2px;
+  background-color: var(--vkui_internal--white);
+}
+
+.Removable--ios .Removable__content {
+  padding-left: 0;
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
+}
+
+.Removable--indent .Removable__action {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/**
+ * CMP:
+ * FormLayoutGroup
+ * FormItem
+ */
+
+:global(.vkuiInternalFormItem--removable) .Removable__content,
+:global(.vkuiInternalFormLayoutGroup--removable) .Removable__content {
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.Removable__offset {
+  display: none;
+}
+
+:global(.vkuiInternalFormItem--withTop)
+  :global(.vkuiInternalFormItem__removable)
+  ~ .Removable__offset,
+:global(.vkuiInternalFormLayoutGroup--removable)
+  :global(.vkuiInternalFormItem--withTop)
+  ~ .Removable__offset {
+  order: -1;
+  display: block;
+  width: 100%;
+  height: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
+}
+
+:global(.vkuiInternalFormItem--sizeY-compact):global(.vkuiInternalFormItem--withTop)
+  :global(.vkuiInternalFormItem__removable)
+  ~ .Removable__offset,
+:global(.vkuiInternalFormLayoutGroup--sizeY-compact):global(.vkuiInternalFormLayoutGroup--removable)
+  :global(.vkuiInternalFormItem--withTop)
+  ~ .Removable__offset {
+  height: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  :global(.vkuiInternalFormItem--sizeY-none):global(.vkuiInternalFormItem--withTop)
+    :global(.vkuiInternalFormItem__removable)
+    ~ .Removable__offset,
+  :global(.vkuiInternalFormLayoutGroup--sizeY-none):global(.vkuiInternalFormLayoutGroup--removable)
+    :global(.vkuiInternalFormItem--withTop)
+    ~ .Removable__offset {
+    height: calc(2px + var(--vkui--font_subhead--line_height--compact) + 6px);
+  }
+}

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

@@ -1 +1,144 @@
-.vkuiRichCell{box-sizing:border-box;color:#000;color:var(--vkui--color_text_primary);display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);min-height:64px;padding:8px 16px;padding:8px var(--vkui--size_base_padding_horizontal--regular);text-decoration:none}.vkuiRichCell--sizeY-compact{min-height:60px}.vkuiRichCell__before{margin-right:12px}.vkuiRichCell__in{display:flex;flex-direction:column;flex-grow:1;justify-content:center;max-width:100%;min-width:0}.vkuiRichCell__content{display:flex;word-break:break-word}.vkuiRichCell__content-before{flex-grow:1;min-width:0}.vkuiRichCell__content-after{align-items:flex-end;box-sizing:border-box;display:flex;flex-direction:column;flex-shrink:0;padding-left:12px}.vkuiRichCell__after-children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell__after-caption{color:#818c99;color:var(--vkui--color_text_secondary);font-size:13px;font-size:var(--vkui--font_footnote--font_size--regular);line-height:16px;line-height:var(--vkui--font_footnote--line_height--regular);margin-top:2px}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-caption{font-size:12px;font-size:var(--vkui--font_caption1--font_size--regular);line-height:14px;line-height:var(--vkui--font_caption1--line_height--regular)}}.vkuiRichCell__caption,.vkuiRichCell__subhead{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiRichCell__caption{margin-top:1px}.vkuiRichCell__children{font-weight:500;font-weight:var(--vkui--font_weight_accent2)}.vkuiRichCell--text-ellipsis .vkuiRichCell__caption,.vkuiRichCell--text-ellipsis .vkuiRichCell__children,.vkuiRichCell--text-ellipsis .vkuiRichCell__subhead,.vkuiRichCell--text-ellipsis .vkuiRichCell__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiRichCell__bottom{margin-top:5px}.vkuiRichCell__actions{margin-top:8px}.vkuiRichCell__after-children,.vkuiRichCell__children,.vkuiRichCell__text{font-size:15px;font-size:var(--vkui--font_paragraph--font_size--regular);line-height:20px;line-height:var(--vkui--font_paragraph--line_height--regular)}.vkuiRichCell--sizeY-compact .vkuiRichCell__after-children,.vkuiRichCell--sizeY-compact .vkuiRichCell__children,.vkuiRichCell--sizeY-compact .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none .vkuiRichCell__after-children,.vkuiRichCell--sizeY-none .vkuiRichCell__children,.vkuiRichCell--sizeY-none .vkuiRichCell__text{font-size:14px;font-size:var(--vkui--font_subhead--font_size--regular);line-height:18px;line-height:var(--vkui--font_subhead--line_height--regular)}}.vkuiInternalFormItem .vkuiRichCell{margin-left:calc(-1 * 16px);margin-left:calc(-1 * var(--vkui--size_base_padding_horizontal--regular));margin-right:calc(-1 * 16px);margin-right:calc(-1 * var(--vkui--size_base_padding_horizontal--regular))}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiRichCell--sizeY-none{min-height:60px}}
+.RichCell {
+  display: flex;
+  padding: 8px var(--vkui--size_base_padding_horizontal--regular);
+  min-height: 64px;
+  box-sizing: border-box;
+  color: var(--vkui--color_text_primary);
+  text-decoration: none; /* в случае если Component="a" */
+  font-family: var(--vkui--font_family_base);
+}
+
+.RichCell--sizeY-compact {
+  min-height: 60px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .RichCell--sizeY-none {
+    min-height: 60px;
+  }
+}
+
+.RichCell__before {
+  margin-right: 12px;
+}
+
+.RichCell__in {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.RichCell__content {
+  display: flex;
+  word-break: break-word;
+}
+
+.RichCell__content-before {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.RichCell__content-after {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  flex-shrink: 0;
+  padding-left: 12px;
+  box-sizing: border-box;
+}
+
+.RichCell__after-children {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.RichCell__after-caption {
+  margin-top: 2px;
+  font-size: var(--vkui--font_footnote--font_size--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
+  color: var(--vkui--color_text_secondary);
+}
+
+.RichCell--sizeY-compact .RichCell__after-caption {
+  font-size: var(--vkui--font_caption1--font_size--regular);
+  line-height: var(--vkui--font_caption1--line_height--regular);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .RichCell--sizeY-none .RichCell__after-caption {
+    font-size: var(--vkui--font_caption1--font_size--regular);
+    line-height: var(--vkui--font_caption1--line_height--regular);
+  }
+}
+
+.RichCell__subhead {
+  color: var(--vkui--color_text_secondary);
+}
+
+.RichCell__caption {
+  margin-top: 1px;
+  color: var(--vkui--color_text_secondary);
+}
+
+.RichCell__children {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.RichCell--text-ellipsis .RichCell__subhead,
+.RichCell--text-ellipsis .RichCell__children,
+.RichCell--text-ellipsis .RichCell__text,
+.RichCell--text-ellipsis .RichCell__caption {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.RichCell__bottom {
+  margin-top: 5px;
+}
+
+.RichCell__actions {
+  margin-top: 8px;
+}
+
+.RichCell__children,
+.RichCell__text,
+.RichCell__after-children {
+  font-size: var(--vkui--font_paragraph--font_size--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+}
+
+.RichCell--sizeY-compact .RichCell__children,
+.RichCell--sizeY-compact .RichCell__text,
+.RichCell--sizeY-compact .RichCell__after-children {
+  font-size: var(--vkui--font_subhead--font_size--regular);
+  line-height: var(--vkui--font_subhead--line_height--regular);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .RichCell--sizeY-none .RichCell__children,
+  .RichCell--sizeY-none .RichCell__text,
+  .RichCell--sizeY-none .RichCell__after-children {
+    font-size: var(--vkui--font_subhead--font_size--regular);
+    line-height: var(--vkui--font_subhead--line_height--regular);
+  }
+}
+
+/**
+ * CMP:
+ * FormItem
+ **/
+
+:global(.vkuiInternalFormItem) .RichCell {
+  margin-right: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+  margin-left: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .RichCell--sizeY-none {
+    min-height: 60px;
+  }
+}

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.module.css

@@ -1 +1,11 @@
-.vkuiRichCellIcon{align-items:center;box-sizing:border-box;color:#2688eb;color:var(--vkui--color_icon_accent_themed);display:flex;flex-direction:row;height:40px;justify-content:flex-end;padding:6px 0 6px 12px;width:48px}
+.RichCellIcon {
+  width: 48px;
+  height: 40px;
+  box-sizing: border-box;
+  color: var(--vkui--color_icon_accent_themed);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 6px 0 6px 12px;
+}

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

@@ -1 +1,57 @@
-.vkuiRichTooltip{animation:vkui-popper-fadein .2s ease;background-color:#fff;background-color:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3);color:#000;color:var(--vkui--color_text_primary)}.vkuiRichTooltip__arrow{color:#fff;color:var(--vkui--color_background_modal)}.vkuiRichTooltip--appearance-accent{background-color:#5a9eff;background-color:var(--vkui--color_background_accent_tint);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiRichTooltip--appearance-accent .vkuiRichTooltip__arrow{color:#5a9eff;color:var(--vkui--color_background_accent_tint)}.vkuiRichTooltip--appearance-white{background-color:#fff;background-color:var(--vkui--color_background_contrast);color:#000;color:var(--vkui--color_text_primary_invariably)}.vkuiRichTooltip--appearance-white .vkuiRichTooltip__arrow{color:#fff;color:var(--vkui--color_background_contrast)}.vkuiRichTooltip--appearance-black{background-color:#2d2d2e;background-color:var(--vkui--color_background_contrast_inverse);color:#fff;color:var(--vkui--color_text_contrast)}.vkuiRichTooltip--appearance-black .vkuiRichTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_contrast_inverse)}.vkuiRichTooltip--appearance-inversion{background-color:#2d2d2e;background-color:var(--vkui--color_background_modal_inverse);color:#fff;color:var(--vkui--color_text_contrast_themed)}.vkuiRichTooltip--appearance-inversion .vkuiRichTooltip__arrow{color:#2d2d2e;color:var(--vkui--color_background_modal_inverse)}
+.RichTooltip {
+  box-shadow: var(--vkui--elevation3);
+  border-radius: var(--vkui--size_border_radius--regular);
+  background-color: var(--vkui--color_background_modal);
+  animation: vkui-richtooltip-fadein 0.2s ease;
+  color: var(--vkui--color_text_primary);
+}
+
+.RichTooltip__arrow {
+  color: var(--vkui--color_background_modal);
+}
+
+.RichTooltip--appearance-accent {
+  background-color: var(--vkui--color_background_accent_tint);
+  color: var(--vkui--color_text_contrast);
+}
+
+.RichTooltip--appearance-accent .RichTooltip__arrow {
+  color: var(--vkui--color_background_accent_tint);
+}
+
+.RichTooltip--appearance-white {
+  background-color: var(--vkui--color_background_contrast);
+  color: var(--vkui--color_text_primary_invariably);
+}
+
+.RichTooltip--appearance-white .RichTooltip__arrow {
+  color: var(--vkui--color_background_contrast);
+}
+
+.RichTooltip--appearance-black {
+  background-color: var(--vkui--color_background_contrast_inverse);
+  color: var(--vkui--color_text_contrast);
+}
+
+.RichTooltip--appearance-black .RichTooltip__arrow {
+  color: var(--vkui--color_background_contrast_inverse);
+}
+
+.RichTooltip--appearance-inversion {
+  background-color: var(--vkui--color_background_modal_inverse);
+  color: var(--vkui--color_text_contrast_themed);
+}
+
+.RichTooltip--appearance-inversion .RichTooltip__arrow {
+  color: var(--vkui--color_background_modal_inverse);
+}
+
+@keyframes vkui-richtooltip-fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/dist/cssm/components/Root/Root.js

@@ -88,10 +88,10 @@ const warn = warnOnce('Root');
     ]);
     const onAnimationEnd = (e)=>{
         if ([
-            'vkui-root-android-animation-hide-back',
-            'vkui-root-android-animation-show-forward',
-            'vkui-root-ios-animation-hide-back',
-            'vkui-root-ios-animation-show-forward'
+            styles['vkui-root-android-animation-hide-back'],
+            styles['vkui-root-android-animation-show-forward'],
+            styles['vkui-root-ios-animation-hide-back'],
+            styles['vkui-root-ios-animation-show-forward']
         ].includes(e.animationName)) {
             finishTransition();
         }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        'vkui-root-android-animation-hide-back',\n        'vkui-root-android-animation-show-forward',\n        'vkui-root-ios-animation-hide-back',\n        'vkui-root-ios-animation-show-forward',\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","useTimeout","useDOM","getNavId","Platform","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","entering","style","marginTop"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Root/Root.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId, NavIdProps } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport styles from './Root.module.css';\n\nexport interface RootProps extends React.HTMLAttributes<HTMLDivElement>, NavIdProps {\n  activeView: string;\n  onTransition?(params: { isBack: boolean; from: string; to: string }): void;\n}\n\nexport interface RootState {\n  activeView: string;\n  transition: boolean;\n  isBack?: boolean;\n  prevView?: string;\n}\n\nconst warn = warnOnce('Root');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Root\n */\nexport const Root = ({\n  children,\n  activeView: _activeView,\n  onTransition,\n  nav,\n  className,\n  ...restProps\n}: RootProps) => {\n  const scroll = React.useContext(ScrollContext);\n  const platform = usePlatform();\n  const { document } = useDOM();\n  const scrolls = React.useRef<Record<string, number>>({}).current;\n  const viewNodes = React.useRef<Record<string, HTMLElement | null>>({}).current;\n\n  const { transitionMotionEnabled = true } = useConfigProvider();\n  const { animate } = React.useContext(SplitColContext);\n  const disableAnimation = !transitionMotionEnabled || !animate;\n\n  const views = React.Children.toArray(children) as React.ReactElement[];\n\n  const [{ prevView, activeView, transition, isBack }, _setState] = React.useState<RootState>({\n    activeView: _activeView,\n    transition: false,\n  });\n  const transitionTo = (panel: string) => {\n    if (panel !== activeView) {\n      const viewIds = views.map((view) => getNavId(view.props, warn));\n      const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);\n      scrolls[activeView] = scroll.getScroll().y;\n      _setState({\n        activeView: panel,\n        prevView: activeView,\n        transition: !disableAnimation,\n        isBack,\n      });\n    }\n  };\n  const finishTransition = React.useCallback(\n    () => _setState({ activeView, prevView, isBack, transition: false }),\n    [activeView, isBack, prevView],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    (document!.activeElement as HTMLElement).blur();\n  }, [activeView]);\n\n  // Нужен переход\n  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);\n  useIsomorphicLayoutEffect(() => {\n    if (!transition && prevView) {\n      // Закончился переход\n      scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);\n      onTransition &&\n        onTransition({\n          isBack: Boolean(isBack),\n          from: prevView,\n          to: activeView,\n        });\n    }\n  }, [transition, prevView]);\n\n  const fallbackTransition = useTimeout(finishTransition, platform === Platform.IOS ? 600 : 300);\n  React.useEffect(() => {\n    if (!transition) {\n      fallbackTransition.clear();\n      return;\n    }\n    fallbackTransition.set();\n  }, [fallbackTransition, transition]);\n\n  const onAnimationEnd = (e: React.AnimationEvent) => {\n    if (\n      [\n        styles['vkui-root-android-animation-hide-back'],\n        styles['vkui-root-android-animation-show-forward'],\n        styles['vkui-root-ios-animation-hide-back'],\n        styles['vkui-root-ios-animation-show-forward'],\n      ].includes(e.animationName)\n    ) {\n      finishTransition();\n    }\n  };\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['Root'],\n        platform === Platform.IOS && styles['Root--ios'],\n        transition && styles['Root--transition'],\n        className,\n      )}\n    >\n      {views.map((view) => {\n        const viewId = getNavId(view.props, warn);\n        if (viewId !== activeView && !(transition && viewId === prevView)) {\n          return null;\n        }\n        const isTransitionTarget = transition && viewId === (isBack ? prevView : activeView);\n        const compensateScroll =\n          transition && (viewId === prevView || (isBack && viewId === activeView));\n        return (\n          <div\n            key={viewId}\n            ref={(e) => viewId && (viewNodes[viewId] = e)}\n            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}\n            className={classNames(\n              styles['Root__view'],\n              transition && viewId === prevView && isBack && styles['Root__view--hide-back'],\n              transition && viewId === prevView && !isBack && styles['Root__view--hide-forward'],\n              transition && viewId === activeView && isBack && styles['Root__view--show-back'],\n              transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],\n            )}\n          >\n            <NavTransitionProvider entering={transition && viewId === activeView}>\n              <div\n                className={styles['Root__scrollCompensation']}\n                style={{\n                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,\n                }}\n              >\n                {view}\n              </div>\n            </NavTransitionProvider>\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","useTimeout","useDOM","getNavId","Platform","useIsomorphicLayoutEffect","warnOnce","ScrollContext","useConfigProvider","NavTransitionProvider","SplitColContext","styles","warn","Root","children","activeView","_activeView","onTransition","nav","className","restProps","scroll","useContext","platform","document","scrolls","useRef","current","viewNodes","transitionMotionEnabled","animate","disableAnimation","views","Children","toArray","prevView","transition","isBack","_setState","useState","transitionTo","panel","viewIds","map","view","props","indexOf","getScroll","y","finishTransition","useCallback","activeElement","blur","scrollTo","Boolean","from","to","fallbackTransition","IOS","useEffect","clear","set","onAnimationEnd","e","includes","animationName","div","viewId","isTransitionTarget","compensateScroll","key","ref","undefined","entering","style","marginTop"],"mappings":"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"}

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

@@ -1 +1,136 @@
-.vkuiRoot{height:100%;position:relative;width:100%}.vkuiRoot--transition{pointer-events:none}.vkuiRoot__view{height:100%;position:relative;width:100%}.vkuiRoot--transition .vkuiRoot__view{left:0;overflow:hidden;position:fixed;top:0}.vkuiRoot__scrollCompensation{height:100%;width:100%}.vkuiRoot__view--show-forward{animation:vkui-root-android-animation-show-forward .3s cubic-bezier(.4,0,.2,1);animation:vkui-root-android-animation-show-forward .3s var(--vkui--animation_easing_platform)}.vkuiRoot__view--hide-back{animation:vkui-root-android-animation-hide-back .3s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-root-android-animation-hide-back .3s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after,.vkuiRoot--ios .vkuiRoot__view--show-back:after{background-color:#000;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.vkuiRoot--ios .vkuiRoot__view--show-back:after{animation:vkui-root-ios-animation-show-back .6s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-root-ios-animation-show-back .6s var(--vkui--animation_easing_platform) forwards}.vkuiRoot--ios .vkuiRoot__view--hide-forward:after{animation:vkui-root-ios-animation-hide-forward .6s cubic-bezier(.4,0,.2,1);animation:vkui-root-ios-animation-hide-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--show-forward{animation:vkui-root-ios-animation-show-forward .6s cubic-bezier(.4,0,.2,1);animation:vkui-root-ios-animation-show-forward .6s var(--vkui--animation_easing_platform)}.vkuiRoot--ios .vkuiRoot__view--hide-back{animation:vkui-root-ios-animation-hide-back .6s cubic-bezier(.4,0,.2,1) forwards;animation:vkui-root-ios-animation-hide-back .6s var(--vkui--animation_easing_platform) forwards}@keyframes vkui-root-ios-animation-show-back{0%{opacity:.3}to{opacity:0}}@keyframes vkui-root-ios-animation-hide-forward{0%{opacity:0}to{opacity:.3}}@keyframes vkui-root-ios-animation-hide-back{0%{transform:translateZ(0)}to{transform:translate3d(0,100%,0)}}@keyframes vkui-root-ios-animation-show-forward{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(0)}}@keyframes vkui-root-android-animation-hide-back{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.05)}}@keyframes vkui-root-android-animation-show-forward{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
+.Root {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.Root--transition {
+  pointer-events: none;
+}
+
+.Root__view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.Root--transition .Root__view {
+  position: fixed;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.Root__scrollCompensation {
+  width: 100%;
+  height: 100%;
+}
+
+.Root__view--show-forward {
+  animation: vkui-root-android-animation-show-forward 0.3s var(--vkui--animation_easing_platform);
+}
+
+.Root__view--hide-back {
+  animation: vkui-root-android-animation-hide-back 0.3s var(--vkui--animation_easing_platform)
+    forwards;
+}
+
+/**
+ * iOS
+ */
+
+.Root--ios .Root__view--show-back::after,
+.Root--ios .Root__view--hide-forward::after {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: block;
+  content: '';
+  background-color: #000;
+}
+
+.Root--ios .Root__view--show-back::after {
+  animation: vkui-root-ios-animation-show-back 0.6s var(--vkui--animation_easing_platform) forwards;
+}
+
+.Root--ios .Root__view--hide-forward::after {
+  animation: vkui-root-ios-animation-hide-forward 0.6s var(--vkui--animation_easing_platform);
+}
+
+.Root--ios .Root__view--show-forward {
+  animation: vkui-root-ios-animation-show-forward 0.6s var(--vkui--animation_easing_platform);
+}
+
+.Root--ios .Root__view--hide-back {
+  animation: vkui-root-ios-animation-hide-back 0.6s var(--vkui--animation_easing_platform) forwards;
+}
+
+@keyframes vkui-root-ios-animation-show-back {
+  from {
+    opacity: 0.3;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes vkui-root-ios-animation-hide-forward {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 0.3;
+  }
+}
+
+@keyframes vkui-root-ios-animation-hide-back {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes vkui-root-ios-animation-show-forward {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+/**
+ * Android
+ */
+
+@keyframes vkui-root-android-animation-hide-back {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  to {
+    transform: scale(1.05);
+    opacity: 0;
+  }
+}
+
+@keyframes vkui-root-android-animation-show-forward {
+  from {
+    transform: scale(1.05);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

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

@@ -1 +1,66 @@
-.vkuiScreenSpinner{animation:vkui-screen-spinner-intro .3s ease}.vkuiScreenSpinner--state-cancelable{cursor:pointer}.vkuiScreenSpinner__spinner{opacity:1}.vkuiScreenSpinner--hideSpinner .vkuiScreenSpinner__spinner{opacity:0;transition:opacity .1s ease}.vkuiScreenSpinner__container{background:#fff;background:var(--vkui--color_background_modal);border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-shadow:0 0 8px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.16);box-shadow:var(--vkui--elevation4);color:#818c99;color:var(--vkui--color_icon_medium);height:88px;position:relative;width:88px}.vkuiScreenSpinner__icon{align-items:center;display:flex;height:100%;justify-content:center;position:absolute;top:0;width:100%}.vkuiScreenSpinner__icon .vkuiIcon{animation:vkui-screen-spinner-intro .2s ease}.vkuiScreenSpinner--state-done .vkuiScreenSpinner__icon .vkuiIcon path{stroke-dasharray:50;stroke-dashoffset:50;animation:vkui-screen-spinner-iconDone .6s cubic-bezier(.4,0,.2,1) .3s forwards;animation:vkui-screen-spinner-iconDone .6s .3s var(--vkui--animation_easing_platform) forwards}@keyframes vkui-screen-spinner-iconDone{0%{stroke-dashoffset:50}to{stroke-dashoffset:0}}@keyframes vkui-screen-spinner-intro{0%{opacity:0}to{opacity:1}}
+.ScreenSpinner {
+  animation: vkui-screen-spinner-intro 0.3s ease;
+}
+
+.ScreenSpinner--state-cancelable {
+  cursor: pointer;
+}
+
+.ScreenSpinner__spinner {
+  opacity: 1;
+}
+
+.ScreenSpinner--hideSpinner .ScreenSpinner__spinner {
+  opacity: 0;
+  transition: opacity 0.1s ease;
+}
+
+.ScreenSpinner__container {
+  position: relative;
+  width: 88px;
+  height: 88px;
+  background: var(--vkui--color_background_modal);
+  box-shadow: var(--vkui--elevation4);
+  border-radius: var(--vkui--size_border_radius--regular);
+  color: var(--vkui--color_icon_medium);
+}
+
+.ScreenSpinner__icon {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ScreenSpinner__icon :global(.vkuiIcon) {
+  animation: vkui-screen-spinner-intro 0.2s ease;
+}
+
+.ScreenSpinner--state-done .ScreenSpinner__icon :global(.vkuiIcon) path {
+  stroke-dasharray: 50;
+  stroke-dashoffset: 50;
+  animation: vkui-screen-spinner-iconDone 0.6s 0.3s var(--vkui--animation_easing_platform) forwards;
+}
+
+@keyframes vkui-screen-spinner-iconDone {
+  from {
+    stroke-dashoffset: 50;
+  }
+
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes vkui-screen-spinner-intro {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

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

@@ -10,8 +10,10 @@ export interface SearchProps extends React.InputHTMLAttributes<HTMLInputElement>
     icon?: React.ReactNode;
     onIconClick?: (e: VKUITouchEvent) => void;
     defaultValue?: string;
+    iconAriaLabel?: string;
+    clearAriaLabel?: string;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Search
  */
-export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, ...inputProps }: SearchProps) => JSX.Element;
+export declare const Search: ({ before, className, defaultValue, placeholder, after, getRef, icon, onIconClick, style, autoComplete, onChange: onChangeProp, value: valueProp, iconAriaLabel, clearAriaLabel, ...inputProps }: SearchProps) => JSX.Element;