@vkontakte/vkui 4.22.0 → 4.24.0

package/src/components/Card/Readme.md

@@ -1,30 +1,39 @@
 ```jsx
-  <View activePanel="card">
-    <Panel id="card">
-      <PanelHeader>Card</PanelHeader>
-      <Group>
-      <Group mode="plain" header={<Header mode="secondary">Дефолтный стиль</Header>}>
+<View activePanel="card">
+  <Panel id="card">
+    <PanelHeader>Card</PanelHeader>
+    <Group>
+      <Group
+        mode="plain"
+        header={<Header mode="secondary">Дефолтный стиль</Header>}
+      >
         <CardGrid size="l">
           <Card>
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      <Group mode="plain" header={<Header mode="secondary">С внутренней обводкой</Header>}>
+      <Group
+        mode="plain"
+        header={<Header mode="secondary">С внутренней обводкой</Header>}
+      >
         <CardGrid size="l">
           <Card mode="outline">
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      <Group mode="plain" header={<Header mode="secondary">С внешней тенью</Header>}>
+      <Group
+        mode="plain"
+        header={<Header mode="secondary">С внешней тенью</Header>}
+      >
         <CardGrid size="l">
           <Card mode="shadow">
             <div style={{ height: 96 }} />
           </Card>
         </CardGrid>
       </Group>
-      </Group>
-    </Panel>
-  </View>
+    </Group>
+  </Panel>
+</View>
 ```

package/src/components/CardGrid/CardGrid.tsx

@@ -1,24 +1,31 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
-import './CardGrid.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import "./CardGrid.css";
 
-export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps {
-  size: 's' | 'm' | 'l';
+export interface CardGridProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    AdaptivityProps {
+  size: "s" | "m" | "l";
 }
 
-const CardGrid: React.FunctionComponent<CardGridProps> = ({ children, size, sizeX, ...restProps }: CardGridProps) => {
+const CardGrid: React.FunctionComponent<CardGridProps> = ({
+  children,
+  size,
+  sizeX,
+  ...restProps
+}: CardGridProps) => {
   const platform = usePlatform();
 
   return (
     <div
       {...restProps}
       vkuiClass={classNames(
-        getClassName('CardGrid', platform),
+        getClassName("CardGrid", platform),
         `CardGrid--${size}`,
-        `CardGrid--sizeX-${sizeX}`,
+        `CardGrid--sizeX-${sizeX}`
       )}
     >
       {children}
@@ -27,7 +34,7 @@ const CardGrid: React.FunctionComponent<CardGridProps> = ({ children, size, size
 };
 
 CardGrid.defaultProps = {
-  size: 's',
+  size: "s",
 };
 
 export default withAdaptivity(CardGrid, { sizeX: true });

package/src/components/CardGrid/Readme.md

@@ -1,40 +1,41 @@
-Сетка для [Card](#!/Card). Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины. В 
+Сетка для [Card](#!/Card). Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины. В
 примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
+
 - `size="s"`: высота равна 92% ширины;
 - `size="m"`: высота равна 62% ширины;
 - `size="l"`: высота равна 30% ширины.
 
 ```jsx
-  <View activePanel="card">
-    <Panel id="card">
-      <PanelHeader>CardGrid</PanelHeader>
-      <Group description="Внутри Group">
-        <CardGrid size="s">
-          <Card>
-            <div style={{ paddingBottom: '92%' }} />
-          </Card>
-          <Card>
-            <div style={{ paddingBottom: '92%' }} />
-          </Card>
-          <Card>
-            <div style={{ paddingBottom: '92%' }} />
-          </Card>
-        </CardGrid>
-      </Group>
-      <CardGrid size="m">
+<View activePanel="card">
+  <Panel id="card">
+    <PanelHeader>CardGrid</PanelHeader>
+    <Group description="Внутри Group">
+      <CardGrid size="s">
         <Card>
-          <div style={{ paddingBottom: '62%' }} />
+          <div style={{ paddingBottom: "92%" }} />
         </Card>
         <Card>
-          <div style={{ paddingBottom: '62%' }} />
+          <div style={{ paddingBottom: "92%" }} />
         </Card>
-      </CardGrid>
-      <CardGrid size="l">
         <Card>
-          <div style={{ paddingBottom: '30%' }} />
+          <div style={{ paddingBottom: "92%" }} />
         </Card>
       </CardGrid>
-      <Separator expanded />
-    </Panel>
-  </View>
+    </Group>
+    <CardGrid size="m">
+      <Card>
+        <div style={{ paddingBottom: "62%" }} />
+      </Card>
+      <Card>
+        <div style={{ paddingBottom: "62%" }} />
+      </Card>
+    </CardGrid>
+    <CardGrid size="l">
+      <Card>
+        <div style={{ paddingBottom: "30%" }} />
+      </Card>
+    </CardGrid>
+    <Separator expanded />
+  </Panel>
+</View>
 ```

package/src/components/CardScroll/CardScroll.tsx

@@ -1,17 +1,24 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import { usePlatform } from '../../hooks/usePlatform';
-import HorizontalScroll from '../HorizontalScroll/HorizontalScroll';
-import { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
-import { useDOM } from '../../lib/dom';
-import './CardScroll.css';
-
-export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps {
-  size?: 's' | 'm' | 'l';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import HorizontalScroll from "../HorizontalScroll/HorizontalScroll";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { useDOM } from "../../lib/dom";
+import "./CardScroll.css";
+
+export interface CardScrollProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    AdaptivityProps {
+  size?: "s" | "m" | "l";
 }
 
-const CardScroll: React.FC<CardScrollProps> = ({ children, size, sizeX, ...restProps }: CardScrollProps) => {
+const CardScroll: React.FC<CardScrollProps> = ({
+  children,
+  size,
+  sizeX,
+  ...restProps
+}: CardScrollProps) => {
   const platform = usePlatform();
 
   const refContainer = React.useRef<HTMLDivElement>(null);
@@ -21,9 +28,14 @@ const CardScroll: React.FC<CardScrollProps> = ({ children, size, sizeX, ...restP
 
   function getScrollToLeft(offset: number): number {
     const containerWidth = refContainer.current.offsetWidth;
-    const slideIndex = Array
-      .from(refContainer.current.children)
-      .findIndex((el: HTMLElement) => el.offsetLeft + el.offsetWidth + parseInt(window.getComputedStyle(el).marginRight) - offset >= 0);
+    const slideIndex = Array.from(refContainer.current.children).findIndex(
+      (el: HTMLElement) =>
+        el.offsetLeft +
+          el.offsetWidth +
+          parseInt(window.getComputedStyle(el).marginRight) -
+          offset >=
+        0
+    );
 
     if (slideIndex === -1) {
       return offset;
@@ -35,7 +47,10 @@ const CardScroll: React.FC<CardScrollProps> = ({ children, size, sizeX, ...restP
 
     const slide = refContainer.current.children[slideIndex] as HTMLElement;
 
-    const scrollTo = slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;
+    const scrollTo =
+      slide.offsetLeft -
+      (containerWidth - slide.offsetWidth) +
+      gapRef.current.offsetWidth;
 
     if (scrollTo <= 2 * gapRef.current.offsetWidth) {
       return 0;
@@ -46,7 +61,11 @@ const CardScroll: React.FC<CardScrollProps> = ({ children, size, sizeX, ...restP
 
   function getScrollToRight(offset: number): number {
     const containerWidth = refContainer.current.offsetWidth;
-    const slide = Array.from(refContainer.current.children).find((el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth) as HTMLElement;
+    const slide = Array.prototype.find.call(
+      refContainer.current.children,
+      (el: HTMLElement) =>
+        el.offsetLeft + el.offsetWidth - offset > containerWidth
+    ) as HTMLElement;
 
     if (!slide) {
       return offset;
@@ -59,12 +78,16 @@ const CardScroll: React.FC<CardScrollProps> = ({ children, size, sizeX, ...restP
     <div
       {...restProps}
       vkuiClass={classNames(
-        getClassName('CardScroll', platform),
+        getClassName("CardScroll", platform),
         `CardScroll--${size}`,
-        `CardScroll--sizeX-${sizeX}`,
+        `CardScroll--sizeX-${sizeX}`
       )}
     >
-      <HorizontalScroll getScrollToLeft={getScrollToLeft} getScrollToRight={getScrollToRight} showArrows={true}>
+      <HorizontalScroll
+        getScrollToLeft={getScrollToLeft}
+        getScrollToRight={getScrollToRight}
+        showArrows={true}
+      >
         <div vkuiClass="CardScroll__in" ref={refContainer}>
           <span vkuiClass="CardScroll__gap" ref={gapRef} />
           {children}
@@ -76,7 +99,7 @@ const CardScroll: React.FC<CardScrollProps> = ({ children, size, sizeX, ...restP
 };
 
 CardScroll.defaultProps = {
-  size: 's',
+  size: "s",
 };
 
 export default withAdaptivity(CardScroll, { sizeX: true });

package/src/components/CardScroll/Readme.md

@@ -1,5 +1,6 @@
 Горизонтальный скролл для [Card](#!/Card). Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины.  
 В примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
+
 - `size="s"`: высота равна 66% ширины;
 - `size="m"`: высота равна 42% ширины;
 - `size="l"`: высота равна 29% ширины.
@@ -11,48 +12,48 @@
     <Group description="Внутри Group">
       <CardScroll size="s">
         <Card>
-          <div style={{ paddingBottom: '66%' }} />
+          <div style={{ paddingBottom: "66%" }} />
         </Card>
         <Card>
-          <div style={{ paddingBottom: '66%' }} />
+          <div style={{ paddingBottom: "66%" }} />
         </Card>
         <Card>
-          <div style={{ paddingBottom: '66%' }} />
+          <div style={{ paddingBottom: "66%" }} />
         </Card>
         <Card>
-          <div style={{ paddingBottom: '66%' }} />
+          <div style={{ paddingBottom: "66%" }} />
         </Card>
         <Card>
-          <div style={{ paddingBottom: '66%' }} />
+          <div style={{ paddingBottom: "66%" }} />
         </Card>
         <Card>
-          <div style={{ paddingBottom: '66%' }} />
+          <div style={{ paddingBottom: "66%" }} />
         </Card>
       </CardScroll>
     </Group>
     <CardScroll size="m">
       <Card>
-        <div style={{ paddingBottom: '42%' }} />
+        <div style={{ paddingBottom: "42%" }} />
       </Card>
       <Card>
-        <div style={{ paddingBottom: '42%' }} />
+        <div style={{ paddingBottom: "42%" }} />
       </Card>
       <Card>
-        <div style={{ paddingBottom: '42%' }} />
+        <div style={{ paddingBottom: "42%" }} />
       </Card>
       <Card>
-        <div style={{ paddingBottom: '42%' }} />
+        <div style={{ paddingBottom: "42%" }} />
       </Card>
     </CardScroll>
     <CardScroll size="l">
       <Card>
-        <div style={{ paddingBottom: '29%' }} />
+        <div style={{ paddingBottom: "29%" }} />
       </Card>
       <Card>
-        <div style={{ paddingBottom: '29%' }} />
+        <div style={{ paddingBottom: "29%" }} />
       </Card>
       <Card>
-        <div style={{ paddingBottom: '29%' }} />
+        <div style={{ paddingBottom: "29%" }} />
       </Card>
     </CardScroll>
   </Panel>

package/src/components/Cell/Cell.css

@@ -1,16 +1,16 @@
 .List--dragging .Cell:not(.Cell--dragging) {
-  transition: transform .3s ease;
+  transition: transform 0.3s ease;
   pointer-events: none;
 }
 
 .Cell--dragging {
   background-color: var(--background_content);
-  box-shadow: 0 0 5px rgba(0, 0, 0, .25);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
   z-index: 3;
 }
 
 .Cell--selectable.Cell--disabled {
-  opacity: .6;
+  opacity: 0.6;
 }
 
 .Cell__checkbox,

package/src/components/Cell/Cell.tsx

@@ -1,20 +1,24 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { warnOnce } from '../../lib/warnOnce';
-import { getClassName } from '../../helpers/getClassName';
-import { ANDROID, IOS, VKCOM } from '../../lib/platform';
-import SimpleCell, { SimpleCellProps } from '../SimpleCell/SimpleCell';
-import { HasPlatform } from '../../types';
-import { Removable, RemovableProps } from '../Removable/Removable';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useDraggable } from './useDraggable';
-import { ListContext } from '../List/ListContext';
-import { CellDragger } from './CellDragger/CellDragger';
-import { CellCheckbox, CellCheckboxProps } from './CellCheckbox/CellCheckbox';
-import './Cell.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { noop } from "../../lib/utils";
+import { warnOnce } from "../../lib/warnOnce";
+import { getClassName } from "../../helpers/getClassName";
+import { ANDROID, IOS, VKCOM } from "../../lib/platform";
+import SimpleCell, { SimpleCellProps } from "../SimpleCell/SimpleCell";
+import { HasPlatform } from "../../types";
+import { Removable, RemovableProps } from "../Removable/Removable";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useDraggable } from "./useDraggable";
+import { ListContext } from "../List/ListContext";
+import { CellDragger } from "./CellDragger/CellDragger";
+import { CellCheckbox, CellCheckboxProps } from "./CellCheckbox/CellCheckbox";
+import "./Cell.css";
 
-export interface CellProps extends SimpleCellProps, HasPlatform, RemovableProps {
-  mode?: 'removable' | 'selectable';
+export interface CellProps
+  extends SimpleCellProps,
+    HasPlatform,
+    RemovableProps {
+  mode?: "removable" | "selectable";
   /**
    * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет
    */
@@ -52,11 +56,11 @@ export interface CellProps extends SimpleCellProps, HasPlatform, RemovableProps
   draggerLabel?: string;
 }
 
-const warn = warnOnce('Cell');
+const warn = warnOnce("Cell");
 export const Cell: React.FC<CellProps> = ({
   mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0
-  onRemove,
-  removePlaceholder = 'Удалить',
+  onRemove = noop,
+  removePlaceholder = "Удалить",
   onDragFinish,
   before,
   after,
@@ -67,35 +71,42 @@ export const Cell: React.FC<CellProps> = ({
   Component,
   onChange,
   name,
+  value,
   checked,
   defaultChecked,
   getRootRef,
-  draggerLabel = 'Перенести ячейку',
+  draggerLabel = "Перенести ячейку",
   className,
   style,
   ...restProps
 }: CellProps) => {
   // TODO: удалить перед 5.0.0
-  let mode: CellProps['mode'] = propsMode;
+  let mode: CellProps["mode"] = propsMode;
 
   if (!propsMode && (deprecatedSelectable || deprecatedRemovable)) {
-    mode = deprecatedSelectable
-      ? 'selectable'
-      : 'removable';
+    mode = deprecatedSelectable ? "selectable" : "removable";
 
-    if (process.env.NODE_ENV === 'development') {
-      deprecatedSelectable && warn('Свойство selectable устарелo и будет удалено в 5.0.0. Используйте mode="selectable".');
-      deprecatedRemovable && warn('Свойство removable устарелo и будет удалено в 5.0.0. Используйте mode="removable".');
+    if (process.env.NODE_ENV === "development") {
+      deprecatedSelectable &&
+        warn(
+          'Свойство selectable устарелo и будет удалено в 5.0.0. Используйте mode="selectable".'
+        );
+      deprecatedRemovable &&
+        warn(
+          'Свойство removable устарелo и будет удалено в 5.0.0. Используйте mode="removable".'
+        );
     }
   }
   // /end TODO
 
-  const selectable = mode === 'selectable';
-  const removable = mode === 'removable';
+  const selectable = mode === "selectable";
+  const removable = mode === "removable";
 
   const platform = usePlatform();
 
-  const { dragging, rootElRef, ...draggableProps } = useDraggable({ onDragFinish });
+  const { dragging, rootElRef, ...draggableProps } = useDraggable({
+    onDragFinish,
+  });
 
   const { toggleDrag } = React.useContext(ListContext);
   React.useEffect(() => {
@@ -108,23 +119,37 @@ export const Cell: React.FC<CellProps> = ({
 
   let dragger;
   if (draggable) {
-    dragger = <CellDragger vkuiClass="Cell__dragger" aria-label={draggerLabel} {...draggableProps} />;
+    dragger = (
+      <CellDragger
+        vkuiClass="Cell__dragger"
+        aria-label={draggerLabel}
+        {...draggableProps}
+      />
+    );
   }
 
   let checkbox;
   if (selectable) {
-    const checkboxProps: CellCheckboxProps = { name, onChange, defaultChecked, checked, disabled };
+    const checkboxProps: CellCheckboxProps = {
+      name,
+      value,
+      onChange,
+      defaultChecked,
+      checked,
+      disabled,
+    };
     checkbox = <CellCheckbox vkuiClass="Cell__checkbox" {...checkboxProps} />;
   }
 
-  const simpleCellDisabled = draggable && !selectable || removable || disabled;
+  const simpleCellDisabled =
+    (draggable && !selectable) || removable || disabled;
   const hasActive = !simpleCellDisabled && !dragging;
 
-  const cellClasses = classNames(getClassName('Cell', platform), {
-    'Cell--dragging': dragging,
-    'Cell--removable': removable,
-    'Cell--selectable': selectable,
-    'Cell--disabled': disabled,
+  const cellClasses = classNames(getClassName("Cell", platform), {
+    "Cell--dragging": dragging,
+    "Cell--removable": removable,
+    "Cell--selectable": selectable,
+    "Cell--disabled": disabled,
   });
 
   const simpleCell = (
@@ -134,7 +159,7 @@ export const Cell: React.FC<CellProps> = ({
       {...restProps}
       vkuiClass="Cell__content"
       disabled={simpleCellDisabled}
-      Component={selectable ? 'label' : Component}
+      Component={selectable ? "label" : Component}
       before={
         <React.Fragment>
           {draggable && (platform === ANDROID || platform === VKCOM) && dragger}

package/src/components/Cell/CellCheckbox/CellCheckbox.tsx

@@ -1,13 +1,19 @@
-import * as React from 'react';
-import { Icon24CheckBoxOff, Icon24CheckBoxOn, Icon24CheckCircleOff, Icon24CheckCircleOn } from '@vkontakte/icons';
-import { getClassName } from '../../../helpers/getClassName';
-import { usePlatform } from '../../../hooks/usePlatform';
-import { classNames } from '../../../lib/classNames';
-import { ANDROID } from '../../../lib/platform';
-import { CellProps } from '../Cell';
-import './CellCheckbox.css';
+import * as React from "react";
+import {
+  Icon24CheckBoxOff,
+  Icon24CheckBoxOn,
+  Icon24CheckCircleOff,
+  Icon24CheckCircleOn,
+} from "@vkontakte/icons";
+import { getClassName } from "../../../helpers/getClassName";
+import { usePlatform } from "../../../hooks/usePlatform";
+import { classNames } from "../../../lib/classNames";
+import { ANDROID } from "../../../lib/platform";
+import { CellProps } from "../Cell";
+import "./CellCheckbox.css";
 
-export type CellCheckboxProps = Pick<CellProps, 'defaultChecked' | 'checked'> & React.InputHTMLAttributes<HTMLInputElement>;
+export type CellCheckboxProps = Pick<CellProps, "defaultChecked" | "checked"> &
+  React.InputHTMLAttributes<HTMLInputElement>;
 
 export const CellCheckbox: React.FC<CellCheckboxProps> = ({
   className,
@@ -16,25 +22,18 @@ export const CellCheckbox: React.FC<CellCheckboxProps> = ({
 }) => {
   const platform = usePlatform();
 
-  const IconOff = platform === ANDROID
-    ? Icon24CheckBoxOff
-    : Icon24CheckCircleOff;
+  const IconOff =
+    platform === ANDROID ? Icon24CheckBoxOff : Icon24CheckCircleOff;
 
-  const IconOn = platform === ANDROID
-    ? Icon24CheckBoxOn
-    : Icon24CheckCircleOn;
+  const IconOn = platform === ANDROID ? Icon24CheckBoxOn : Icon24CheckCircleOn;
 
   return (
     <div
-      vkuiClass={classNames(getClassName('CellCheckbox', platform))}
+      vkuiClass={classNames(getClassName("CellCheckbox", platform))}
       className={className}
       style={style}
     >
-      <input
-        vkuiClass="CellCheckbox__input"
-        type="checkbox"
-        {...restProps}
-      />
+      <input vkuiClass="CellCheckbox__input" type="checkbox" {...restProps} />
       <IconOff vkuiClass="CellCheckbox__icon CellCheckbox__icon--off" />
       <IconOn vkuiClass="CellCheckbox__icon CellCheckbox__icon--on" />
     </div>

package/src/components/Cell/CellDragger/CellDragger.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';
-import { getClassName } from '../../../helpers/getClassName';
-import { usePlatform } from '../../../hooks/usePlatform';
-import { classNames } from '../../../lib/classNames';
-import { IOS } from '../../../lib/platform';
-import { Touch } from '../../Touch/Touch';
-import { DraggableProps } from '../useDraggable';
-import './CellDragger.css';
+import * as React from "react";
+import { Icon24Reorder, Icon24ReorderIos } from "@vkontakte/icons";
+import { getClassName } from "../../../helpers/getClassName";
+import { usePlatform } from "../../../hooks/usePlatform";
+import { classNames } from "../../../lib/classNames";
+import { IOS } from "../../../lib/platform";
+import { Touch } from "../../Touch/Touch";
+import { DraggableProps } from "../useDraggable";
+import "./CellDragger.css";
 
 type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
 
@@ -24,17 +24,14 @@ export const CellDragger: React.FC<CellDraggerProps> = ({
 
   return (
     <Touch
-      vkuiClass={classNames(getClassName('CellDragger', platform))}
+      vkuiClass={classNames(getClassName("CellDragger", platform))}
       onStart={onDragStart}
       onMoveY={onDragMove}
       onEnd={onDragEnd}
       onClick={onClick}
       {...restProps}
     >
-      {platform === IOS
-        ? <Icon24ReorderIos />
-        : <Icon24Reorder />
-      }
+      {platform === IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}
     </Touch>
   );
 };