@vkontakte/vkui 4.22.2 → 4.25.1

package/src/components/RangeSlider/UniversalSlider.tsx

@@ -1,20 +1,23 @@
-import * as React from 'react';
-import { Touch, TouchEvent, TouchEventHandler } from '../Touch/Touch';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { HasRootRef } from '../../types';
-import { rescale } from '../../helpers/math';
-import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import '../Slider/Slider.css';
+import * as React from "react";
+import { Touch, TouchEvent, TouchEventHandler } from "../Touch/Touch";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { HasRootRef } from "../../types";
+import { rescale } from "../../helpers/math";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import "../Slider/Slider.css";
 
 export type UniversalValue = [number | null, number];
 
-export interface UniversalSliderProps<Value> extends
-  HasRootRef<HTMLDivElement>,
-  Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'defaultValue' | 'onChange'>,
-  AdaptivityProps {
+export interface UniversalSliderProps<Value>
+  extends HasRootRef<HTMLDivElement>,
+    Omit<
+      React.HTMLAttributes<HTMLDivElement>,
+      "value" | "defaultValue" | "onChange"
+    >,
+    AdaptivityProps {
   min?: number;
   max?: number;
   step?: number;
@@ -25,8 +28,12 @@ export interface UniversalSliderProps<Value> extends
 }
 
 const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
-  min, max, step,
-  value, defaultValue, onChange,
+  min = 0,
+  max = 100,
+  step,
+  value = [0, 0],
+  defaultValue,
+  onChange,
   getRootRef,
   sizeY,
   disabled,
@@ -36,13 +43,13 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
   const [start, end] = value;
   const isRange = start != null;
   const gesture = React.useRef({
-    dragging: false as false | 'start' | 'end',
+    dragging: false as false | "start" | "end",
     startX: 0,
     containerWidth: 0,
   }).current;
   const container = useExternRef(getRootRef);
-  const thumbStart = React.useRef<HTMLDivElement>();
-  const thumbEnd = React.useRef<HTMLDivElement>();
+  const thumbStart = React.useRef<HTMLDivElement>(null);
+  const thumbEnd = React.useRef<HTMLDivElement>(null);
 
   const offsetToValue = (absolute: number) => {
     return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });
@@ -54,18 +61,18 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
     }
 
     const { dragging } = gesture;
-    if (dragging === 'start') {
+    if (dragging === "start") {
       if (nextValue > end) {
         // "перехватиться", если перетянули за конец
-        gesture.dragging = 'end';
+        gesture.dragging = "end";
         return [end, nextValue];
       }
       return [nextValue, end];
     }
-    if (dragging === 'end') {
+    if (dragging === "end") {
       if (nextValue < start) {
         // "перехватиться", если перетянули за начало
-        gesture.dragging = 'start';
+        gesture.dragging = "start";
         return [nextValue, start];
       }
       return [start, nextValue];
@@ -74,31 +81,33 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
     return value;
   };
 
-  const snapDirection = (pos: number, target: EventTarget) => {
+  const snapDirection = (pos: number, target: EventTarget | null) => {
     if (target === thumbStart.current) {
-      return 'start';
+      return "start";
     }
     if (target === thumbEnd.current) {
-      return 'end';
+      return "end";
     }
-    return Math.abs(start - pos) <= Math.abs(end - pos) ? 'start' : 'end';
+    return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos)
+      ? "start"
+      : "end";
   };
 
   const onStart: TouchEventHandler = (e: TouchEvent) => {
-    const boundingRect = container.current.getBoundingClientRect();
-    gesture.containerWidth = boundingRect.width;
+    const boundingRect = container.current?.getBoundingClientRect();
+    gesture.containerWidth = boundingRect?.width ?? 0;
 
-    const absolutePosition = e.startX - boundingRect.left;
+    const absolutePosition = e.startX - (boundingRect?.left ?? 0);
     const pos = offsetToValue(absolutePosition);
     gesture.dragging = snapDirection(pos, e.originalEvent.target);
     gesture.startX = absolutePosition;
 
-    onChange(updateRange(pos), e);
+    onChange?.(updateRange(pos), e);
     e.originalEvent.stopPropagation();
   };
 
   const onMove: TouchEventHandler = (e: TouchEvent) => {
-    onChange(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);
+    onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);
 
     e.originalEvent.stopPropagation();
     e.originalEvent.preventDefault();
@@ -109,29 +118,39 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
     e.originalEvent.stopPropagation();
   };
 
-  const toPercent = (v: number) => (v - min) / (max - min) * 100;
-  const draggerStyle = isRange ? {
-    width: `${toPercent(end) - toPercent(start)}%`,
-    left: `${toPercent(start)}%`,
-  } : {
-    width: `${toPercent(end)}%`,
-  };
+  const toPercent = (v: number) => ((v - min) / (max - min)) * 100;
+  const draggerStyle = isRange
+    ? {
+        width: `${toPercent(end) - toPercent(start ?? 0)}%`,
+        left: `${toPercent(start ?? 0)}%`,
+      }
+    : {
+        width: `${toPercent(end)}%`,
+      };
 
   return (
     <Touch
-      data-value={isRange ? value.join(',') : value}
+      data-value={isRange ? value.join(",") : value}
       {...restProps}
       {...(disabled ? {} : { onStart, onMove, onEnd })}
       vkuiClass={classNames(
-        getClassName('Slider', platform),
+        getClassName("Slider", platform),
         `Slider--sizeY-${sizeY}`,
-        disabled && 'Slider--disabled',
+        disabled && "Slider--disabled"
       )}
     >
       <div ref={container} vkuiClass="Slider__in">
         <div vkuiClass="Slider__dragger" style={draggerStyle}>
-          {isRange && <span vkuiClass={classNames('Slider__thumb', 'Slider__thumb--start')} ref={thumbStart} />}
-          <span vkuiClass={classNames('Slider__thumb', 'Slider__thumb--end')} ref={thumbEnd} />
+          {isRange && (
+            <span
+              vkuiClass={classNames("Slider__thumb", "Slider__thumb--start")}
+              ref={thumbStart}
+            />
+          )}
+          <span
+            vkuiClass={classNames("Slider__thumb", "Slider__thumb--end")}
+            ref={thumbEnd}
+          />
         </div>
       </div>
     </Touch>

package/src/components/Removable/Removable.css

@@ -21,8 +21,11 @@
   top: 28px;
 }
 
-.FormItem--sizeY-compact.FormItem--removable.FormItem--withTop .Removable__action,
-.FormLayoutGroup--sizeY-compact.FormLayoutGroup--removable .FormItem--withTop ~ .Removable__action {
+.FormItem--sizeY-compact.FormItem--removable.FormItem--withTop
+  .Removable__action,
+.FormLayoutGroup--sizeY-compact.FormLayoutGroup--removable
+  .FormItem--withTop
+  ~ .Removable__action {
   top: 26px;
 }
 
@@ -57,7 +60,7 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .Removable--ios .Removable__content {
-    transition: transform .6s var(--ios-easing);
+    transition: transform 0.6s var(--ios-easing);
   }
 }
 
@@ -106,13 +109,17 @@
   flex-wrap: wrap;
 }
 
-.FormLayoutGroup--removable .FormItem--ios.FormItem--withTop ~ .Removable__offset {
+.FormLayoutGroup--removable
+  .FormItem--ios.FormItem--withTop
+  ~ .Removable__offset {
   order: -1;
   display: block;
   width: 100%;
   height: 28px;
 }
 
-.FormLayoutGroup--removable.FormLayoutGroup--sizeY-compact .FormItem--ios.FormItem--withTop ~ .Removable__offset {
+.FormLayoutGroup--removable.FormLayoutGroup--sizeY-compact
+  .FormItem--ios.FormItem--withTop
+  ~ .Removable__offset {
   height: 26px;
 }

package/src/components/Removable/Removable.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { HasRootRef } from '../../types';
-import { classNames } from '../../lib/classNames';
-import { getTitleFromChildren, noop } from '../../lib/utils';
-import { useExternRef } from '../../hooks/useExternRef';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getClassName } from '../../helpers/getClassName';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useDOM } from '../../lib/dom';
-import { ANDROID, IOS, VKCOM } from '../../lib/platform';
-import { Icon24Cancel } from '@vkontakte/icons';
-import IconButton from '../IconButton/IconButton';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import Tappable from '../Tappable/Tappable';
-import './Removable.css';
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import { classNames } from "../../lib/classNames";
+import { getTitleFromChildren, noop } from "../../lib/utils";
+import { useExternRef } from "../../hooks/useExternRef";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useDOM } from "../../lib/dom";
+import { ANDROID, IOS, VKCOM } from "../../lib/platform";
+import { Icon24Cancel } from "@vkontakte/icons";
+import IconButton from "../IconButton/IconButton";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import Tappable from "../Tappable/Tappable";
+import "./Removable.css";
 
 export interface RemovableProps {
   /**
@@ -25,7 +25,8 @@ export interface RemovableProps {
   onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
 }
 
-interface RemovableIosOwnProps extends Pick<RemovableProps, 'removePlaceholder'> {
+interface RemovableIosOwnProps
+  extends Pick<RemovableProps, "removePlaceholder"> {
   onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
   removePlaceholderString?: string;
 }
@@ -38,14 +39,19 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
 }) => {
   const { window } = useDOM();
 
-  const removeButtonRef = React.useRef(null);
+  const removeButtonRef = React.useRef<HTMLElement>(null);
   const [removeOffset, updateRemoveOffset] = React.useState(0);
 
-  useGlobalEventListener(window, 'click', () => {
-    if (removeOffset > 0) {
-      updateRemoveOffset(0);
-    }
-  });
+  useGlobalEventListener(
+    window,
+    "click",
+    () => {
+      if (removeOffset > 0) {
+        updateRemoveOffset(0);
+      }
+    },
+    { capture: true }
+  );
 
   const onRemoveTransitionEnd = () => {
     if (removeOffset > 0) {
@@ -55,8 +61,10 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
 
   const onRemoveActivateClick = (e: React.MouseEvent) => {
     e.stopPropagation();
-
-    const { offsetWidth = 0 } = removeButtonRef?.current;
+    if (!removeButtonRef.current) {
+      return;
+    }
+    const { offsetWidth } = removeButtonRef.current;
     updateRemoveOffset(offsetWidth);
   };
 
@@ -95,19 +103,22 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
   );
 };
 
-interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {
+interface RemovableOwnProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    RemovableProps,
+    HasRootRef<HTMLDivElement> {
   /**
    * Расположение кнопки удаления.
    */
-  align?: 'start' | 'center';
+  align?: "start" | "center";
 }
 
 export const Removable: React.FC<RemovableOwnProps> = ({
   getRootRef,
   children,
   onRemove = noop,
-  removePlaceholder = 'Удалить',
-  align = 'center',
+  removePlaceholder = "Удалить",
+  align = "center",
   ...restProps
 }: RemovableOwnProps) => {
   const platform = usePlatform();
@@ -120,16 +131,17 @@ export const Removable: React.FC<RemovableOwnProps> = ({
     onRemove(e);
   };
 
-  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);
+  const removePlaceholderString: string =
+    getTitleFromChildren(removePlaceholder);
 
   return (
     <div
       {...restProps}
       ref={ref}
       vkuiClass={classNames(
-        getClassName('Removable', platform),
+        getClassName("Removable", platform),
         `Removable--${align}`,
-        `Removable--sizeY-${sizeY}`,
+        `Removable--sizeY-${sizeY}`
       )}
     >
       {(platform === ANDROID || platform === VKCOM) && (

package/src/components/RichCell/Readme.md

@@ -1,14 +1,12 @@
 ```jsx
 <View activePanel="list">
   <Panel id="list">
-    <PanelHeader>
-      RichCell
-    </PanelHeader>
+    <PanelHeader>RichCell</PanelHeader>
     <Group>
       <RichCell
         disabled
         multiline
-        before={<Avatar size={72} src={getAvatarUrl('user_ti')} />}
+        before={<Avatar size={72} src={getAvatarUrl("user_ti")} />}
         text="Держи за обед в EZO"
         caption="Вчера в 20:30"
         after="+ 1 500 ₽"
@@ -24,16 +22,18 @@
       <RichCell
         disabled
         after={<Icon28UserAddOutline />}
-        before={<Avatar size={72} src={getAvatarUrl('user_ilyagrshn')} />}
+        before={<Avatar size={72} src={getAvatarUrl("user_ilyagrshn")} />}
         caption="Команда ВКонтакте, Санкт-Петербург"
         bottom={
           <UsersStack
             photos={[
-              getAvatarUrl('user_ox'),
-              getAvatarUrl('user_vitalyavolyn'),
-              getAvatarUrl('user_eee'),
+              getAvatarUrl("user_ox"),
+              getAvatarUrl("user_vitalyavolyn"),
+              getAvatarUrl("user_eee"),
             ]}
-          >73 общих друга</UsersStack>
+          >
+            73 общих друга
+          </UsersStack>
         }
         actions={
           <React.Fragment>
@@ -45,7 +45,7 @@
         Илья Гришин
       </RichCell>
       <RichCell
-        before={<Avatar size={48} src={getAvatarUrl('user_lihachyov')} />}
+        before={<Avatar size={48} src={getAvatarUrl("user_lihachyov")} />}
         text="Поездка в Лиссабон"
         caption="Вчера в 20:30"
         after="+ 1 500 ₽"
@@ -53,7 +53,7 @@
         Михаил Лихачев
       </RichCell>
       <RichCell
-        before={<Avatar size={48} src={getAvatarUrl('user_tc')} />}
+        before={<Avatar size={48} src={getAvatarUrl("user_tc")} />}
         caption="Вчера в 20:30"
         after="- 700 ₽"
       >

package/src/components/RichCell/RichCell.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getClassName } from '../../helpers/getClassName';
-import Tappable, { TappableProps } from '../Tappable/Tappable';
-import { hasReactNode } from '../../lib/utils';
-import Text from '../Typography/Text/Text';
-import Subhead from '../Typography/Subhead/Subhead';
-import { withAdaptivity } from '../../hoc/withAdaptivity';
-import './RichCell.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { hasReactNode } from "../../lib/utils";
+import Text from "../Typography/Text/Text";
+import Subhead from "../Typography/Subhead/Subhead";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
+import "./RichCell.css";
 
 export interface RichCellProps extends TappableProps {
   /**
@@ -58,15 +58,13 @@ const RichCell: React.FC<RichCellProps> = ({
   return (
     <Tappable
       {...restProps}
-      vkuiClass={
-        classNames(
-          getClassName('RichCell', platform),
-          {
-            'RichCell--mult': multiline,
-          },
-          `RichCell--sizeY-${sizeY}`,
-        )
-      }
+      vkuiClass={classNames(
+        getClassName("RichCell", platform),
+        {
+          "RichCell--mult": multiline,
+        },
+        `RichCell--sizeY-${sizeY}`
+      )}
     >
       {before}
       <div vkuiClass="RichCell__in">
@@ -74,14 +72,30 @@ const RichCell: React.FC<RichCellProps> = ({
         {after}
         <Text weight="medium" vkuiClass="RichCell__content">
           <div vkuiClass="RichCell__children">{children}</div>
-          {hasReactNode(after) && <div vkuiClass="RichCell__after">{after}</div>}
+          {hasReactNode(after) && (
+            <div vkuiClass="RichCell__after">{after}</div>
+          )}
         </Text>
-        {hasReactNode(text) && <Text weight="regular" vkuiClass="RichCell__text">{text}</Text>}
-        {hasReactNode(caption) && <Subhead Component="span" weight="regular" vkuiClass="RichCell__caption">{caption}</Subhead>}
+        {hasReactNode(text) && (
+          <Text weight="regular" vkuiClass="RichCell__text">
+            {text}
+          </Text>
+        )}
+        {hasReactNode(caption) && (
+          <Subhead
+            Component="span"
+            weight="regular"
+            vkuiClass="RichCell__caption"
+          >
+            {caption}
+          </Subhead>
+        )}
         {(hasReactNode(bottom) || hasReactNode(actions)) && (
           <div vkuiClass="RichCell__bottom">
             {bottom}
-            {hasReactNode(actions) && <div vkuiClass="RichCell__actions">{actions}</div>}
+            {hasReactNode(actions) && (
+              <div vkuiClass="RichCell__actions">{actions}</div>
+            )}
           </div>
         )}
       </div>
@@ -89,4 +103,5 @@ const RichCell: React.FC<RichCellProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(RichCell, { sizeY: true });

package/src/components/RichTooltip/Readme.md

@@ -0,0 +1,59 @@
+> **Важно**
+>
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+
+Тултип, открывающийся при наведеннии мыши на `children`. В отличие от [TextTooltip](#/TextTooltip), имеет меньше ограничений
+по содержимому. Компонент всё ещё предназначен для информирования пользователей, но внутри допускаются кнопки, ссылки, картинки.
+
+```jsx { "props": { "layout": false, "iframe": true } }
+<Checkbox>
+  Специальные возможности
+  <RichTooltip style={{maxWidth: 320}} content={
+    <Subhead weight="regular" style={{padding: '8px 12px', color: 'var(--text_primary)'}}>
+      Если включить эту настройку, элементы управления на сайте будут определены и озвучены синтезатором речи.
+      <br/><br/>
+      Настройка повышает доступность сайта и подходит для пользователей с ограниченными возможностями.
+    </Subhead>
+  }>
+    <Icon16HelpOutline style={{
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      position: 'relative',
+      top: -1,
+      color: 'var(--icon_secondary)'
+    }}/>
+  </RichTooltip>
+</Checkbox>
+
+<RichTooltip style={{maxWidth: 320}} content={
+  <RichCell
+    disabled
+    after={
+      <TextTooltip text="Добавить">
+        <Icon28UserAddOutline/>
+      </TextTooltip>
+    }
+    before={<Avatar size={72} src={getAvatarUrl('user_ilyagrshn')}/>}
+    caption="Команда ВКонтакте, Санкт-Петербург"
+    bottom={
+      <UsersStack
+        photos={[
+          getAvatarUrl('user_ox'),
+          getAvatarUrl('user_vitalyavolyn'),
+          getAvatarUrl('user_eee'),
+        ]}
+      >73 общих друга</UsersStack>
+    }
+    actions={
+      <React.Fragment>
+        <Button>Добавить</Button>
+        <Button mode="secondary">Скрыть</Button>
+      </React.Fragment>
+    }
+  >
+    Илья Гришин
+  </RichCell>
+}>
+  <Link style={{display: 'inline-block', margin: 20}}>Илья Гришин</Link>
+</RichTooltip>
+```

package/src/components/RichTooltip/RichTooltip.css

@@ -0,0 +1,10 @@
+.RichTooltip {
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.04), 0 4px 32px rgba(0, 0, 0, 0.16);
+  border-radius: 8px;
+  background: var(--background_content);
+  animation: vkui-popper-fadein 0.2s ease;
+}
+
+.RichTooltip__arrow {
+  color: var(--background_content);
+}

package/src/components/RichTooltip/RichTooltip.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useAppearance } from "../../hooks/useAppearance";
+import { classNames } from "../../lib/classNames";
+import { prefixClass } from "../../lib/prefixClass";
+import "./RichTooltip.css";
+
+export type RichTooltipProps = Omit<HoverPopperProps, "arrowClassName">;
+
+export const RichTooltip: React.FC<RichTooltipProps> = ({
+  children,
+  arrow = true,
+  ...popperProps
+}: RichTooltipProps) => {
+  const platform = usePlatform();
+  const appearance = useAppearance();
+
+  return (
+    <HoverPopper
+      vkuiClass={classNames(getClassName("RichTooltip", platform), {
+        [`RichTooltip--${appearance}`]: !!appearance,
+      })}
+      arrow={arrow}
+      arrowClassName={prefixClass("RichTooltip__arrow")}
+      {...popperProps}
+    >
+      {children}
+    </HoverPopper>
+  );
+};

package/src/components/Root/Readme.md

@@ -5,7 +5,7 @@
 Как только он заканчивается, вызывается свойство-функция `onTransition`.
 
 ```jsx
-const [activeView, setActiveView] = useState('view1');
+const [activeView, setActiveView] = useState("view1");
 
 <Root activeView={activeView}>
   <View activePanel="panel1.1" id="view1">
@@ -13,7 +13,7 @@ const [activeView, setActiveView] = useState('view1');
       <PanelHeader>View 1</PanelHeader>
       <Group>
         <div style={{ height: 200 }} />
-        <CellButton onClick={ () => setActiveView('view2') }>
+        <CellButton onClick={() => setActiveView("view2")}>
           Open View 2
         </CellButton>
         <div style={{ height: 600 }} />
@@ -25,12 +25,12 @@ const [activeView, setActiveView] = useState('view1');
       <PanelHeader>View 2</PanelHeader>
       <Group>
         <div style={{ height: 200 }} />
-        <CellButton onClick={ () => setActiveView('view1') }>
+        <CellButton onClick={() => setActiveView("view1")}>
           Back to View 1
         </CellButton>
         <div style={{ height: 600 }} />
       </Group>
     </Panel>
   </View>
-</Root>
+</Root>;
 ```