@vkontakte/vkui 4.22.1 → 4.25.0

package/src/components/SimpleCell/SimpleCell.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { HasComponent } from '../../types';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import Tappable, { TappableProps } from '../Tappable/Tappable';
-import { Icon24Chevron } from '@vkontakte/icons';
-import { IOS } from '../../lib/platform';
-import { usePlatform } from '../../hooks/usePlatform';
-import { hasReactNode } from '../../lib/utils';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { withAdaptivity, SizeType } from '../../hoc/withAdaptivity';
-import Title from '../Typography/Title/Title';
-import Text from '../Typography/Text/Text';
-import Subhead from '../Typography/Subhead/Subhead';
-import './SimpleCell.css';
+import * as React from "react";
+import { HasComponent } from "../../types";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { Icon24Chevron } from "@vkontakte/icons";
+import { IOS } from "../../lib/platform";
+import { usePlatform } from "../../hooks/usePlatform";
+import { hasReactNode } from "../../lib/utils";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { withAdaptivity, SizeType } from "../../hoc/withAdaptivity";
+import Title from "../Typography/Title/Title";
+import Text from "../Typography/Text/Text";
+import Subhead from "../Typography/Subhead/Subhead";
+import "./SimpleCell.css";
 
 export interface SimpleCellOwnProps extends HasComponent {
   /**
@@ -48,14 +48,19 @@ export interface SimpleCellOwnProps extends HasComponent {
 
 export interface SimpleCellProps extends SimpleCellOwnProps, TappableProps {}
 
-type SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> & HasComponent;
+type SimpleCellTypographyProps = React.HTMLAttributes<HTMLDivElement> &
+  HasComponent;
 
-const SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (props: SimpleCellTypographyProps) => {
+const SimpleCellTypography: React.FC<SimpleCellTypographyProps> = (
+  props: SimpleCellTypographyProps
+) => {
   const { sizeY } = useAdaptivity();
 
-  return sizeY === SizeType.COMPACT
-    ? <Text Component="span" weight="regular" {...props} />
-    : <Title Component="span" level="3" weight="regular" {...props} />;
+  return sizeY === SizeType.COMPACT ? (
+    <Text Component="span" weight="regular" {...props} />
+  ) : (
+    <Title Component="span" level="3" weight="regular" {...props} />
+  );
 };
 
 const SimpleCell: React.FC<SimpleCellProps> = ({
@@ -71,45 +76,57 @@ const SimpleCell: React.FC<SimpleCellProps> = ({
   ...restProps
 }: SimpleCellProps) => {
   const platform = usePlatform();
-  const hasAfter = hasReactNode(after) || expandable && platform === IOS;
+  const hasAfter = hasReactNode(after) || (expandable && platform === IOS);
 
   return (
     <Tappable
       {...restProps}
-      vkuiClass={
-        classNames(
-          getClassName('SimpleCell', platform),
-          {
-            'SimpleCell--exp': expandable,
-            'SimpleCell--mult': multiline,
-          },
-          `SimpleCell--sizeY-${sizeY}`,
-        )
-      }
+      vkuiClass={classNames(
+        getClassName("SimpleCell", platform),
+        {
+          "SimpleCell--exp": expandable,
+          "SimpleCell--mult": multiline,
+        },
+        `SimpleCell--sizeY-${sizeY}`
+      )}
     >
       {before}
       <div vkuiClass="SimpleCell__main">
         <div vkuiClass="SimpleCell__content">
-          <SimpleCellTypography vkuiClass="SimpleCell__children">{children}</SimpleCellTypography>
-          {hasReactNode(badge) &&
-            <span vkuiClass="SimpleCell__badge">
-              {badge}
-            </span>
-          }
+          <SimpleCellTypography vkuiClass="SimpleCell__children">
+            {children}
+          </SimpleCellTypography>
+          {hasReactNode(badge) && (
+            <span vkuiClass="SimpleCell__badge">{badge}</span>
+          )}
         </div>
-        {description && <Subhead Component="span" weight="regular" vkuiClass="SimpleCell__description">{description}</Subhead>}
+        {description && (
+          <Subhead
+            Component="span"
+            weight="regular"
+            vkuiClass="SimpleCell__description"
+          >
+            {description}
+          </Subhead>
+        )}
       </div>
-      {hasReactNode(indicator) &&
-        <SimpleCellTypography Component="span" vkuiClass="SimpleCell__indicator">{indicator}</SimpleCellTypography>
-      }
-      {hasAfter &&
+      {hasReactNode(indicator) && (
+        <SimpleCellTypography
+          Component="span"
+          vkuiClass="SimpleCell__indicator"
+        >
+          {indicator}
+        </SimpleCellTypography>
+      )}
+      {hasAfter && (
         <div vkuiClass="SimpleCell__after">
           {after}
           {expandable && platform === IOS && <Icon24Chevron />}
         </div>
-      }
+      )}
     </Tappable>
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(SimpleCell, { sizeY: true });

package/src/components/SimpleCheckbox/Readme.md

@@ -1,17 +1,25 @@
 Надстройка над `<input type="checkbox" />`. Компонент принимает все валидные для этого элемента свойства.
 
-Компонент является упрощенной версией обычного чекбокса `Checkbox` и предназначен для использования внутри других блоков таких как таблицы 
+Компонент является упрощенной версией обычного чекбокса `Checkbox` и предназначен для использования внутри других блоков таких как таблицы
 
->**Важно**
+> **Важно**
 >
->Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильный компоненты](#/Unstable).
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильный компоненты](#/Unstable).
 
 ```jsx { "props": { "layout": false, "iframe": false } }
-<div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', padding: '24px 16px', background: 'white' }}>
-  <SimpleCheckbox defaultChecked style={{ margin: '0 10px' }} />
-  <SimpleCheckbox style={{ margin: '0 10px' }} />
-  <SimpleCheckbox defaultChecked style={{ margin: '0 10px' }} />
-  <SimpleCheckbox indeterminate style={{ margin: '0 10px' }} />
-  <SimpleCheckbox defaultIndeterminate style={{ margin: '0 10px' }} />
+<div
+  style={{
+    display: "flex",
+    alignItems: "center",
+    flexDirection: "row",
+    padding: "24px 16px",
+    background: "white",
+  }}
+>
+  <SimpleCheckbox defaultChecked style={{ margin: "0 10px" }} />
+  <SimpleCheckbox style={{ margin: "0 10px" }} />
+  <SimpleCheckbox defaultChecked style={{ margin: "0 10px" }} />
+  <SimpleCheckbox indeterminate style={{ margin: "0 10px" }} />
+  <SimpleCheckbox defaultIndeterminate style={{ margin: "0 10px" }} />
 </div>
 ```

package/src/components/SimpleCheckbox/SimpleCheckbox.css

@@ -42,26 +42,38 @@
   color: var(--icon_tertiary);
 }
 
-.SimpleCheckbox__input:checked ~ .SimpleCheckbox__container .SimpleCheckbox__icon--on {
+.SimpleCheckbox__input:checked
+  ~ .SimpleCheckbox__container
+  .SimpleCheckbox__icon--on {
   display: flex;
 }
 
-.SimpleCheckbox__input:indeterminate ~ .SimpleCheckbox__container .SimpleCheckbox__icon--indeterminate,
-.SimpleCheckbox__input:checked ~ .SimpleCheckbox__container .SimpleCheckbox__icon--off {
+.SimpleCheckbox__input:indeterminate
+  ~ .SimpleCheckbox__container
+  .SimpleCheckbox__icon--indeterminate,
+.SimpleCheckbox__input:checked
+  ~ .SimpleCheckbox__container
+  .SimpleCheckbox__icon--off {
   display: none;
 }
 
-.SimpleCheckbox__input:indeterminate ~ .SimpleCheckbox__container .SimpleCheckbox__icon--indeterminate {
+.SimpleCheckbox__input:indeterminate
+  ~ .SimpleCheckbox__container
+  .SimpleCheckbox__icon--indeterminate {
   display: flex;
 }
 
-.SimpleCheckbox__input:indeterminate ~ .SimpleCheckbox__container .SimpleCheckbox__icon--on,
-.SimpleCheckbox__input:indeterminate ~ .SimpleCheckbox__container .SimpleCheckbox__icon--off {
+.SimpleCheckbox__input:indeterminate
+  ~ .SimpleCheckbox__container
+  .SimpleCheckbox__icon--on,
+.SimpleCheckbox__input:indeterminate
+  ~ .SimpleCheckbox__container
+  .SimpleCheckbox__icon--off {
   display: none;
 }
 
 .SimpleCheckbox__input[disabled] ~ .SimpleCheckbox__container {
-  opacity: .6;
+  opacity: 0.6;
 }
 
 .SimpleCheckbox--ios.SimpleCheckbox--sizeY-compact,
@@ -110,6 +122,8 @@
   border-width: 1px;
 }
 
-.SimpleCheckbox--vkcom .SimpleCheckbox__input[disabled] ~ .SimpleCheckbox__container {
-  opacity: .4;
+.SimpleCheckbox--vkcom
+  .SimpleCheckbox__input[disabled]
+  ~ .SimpleCheckbox__container {
+  opacity: 0.4;
 }

package/src/components/SimpleCheckbox/SimpleCheckbox.tsx

@@ -1,62 +1,90 @@
-import * as React from 'react';
-import Tappable, { ACTIVE_EFFECT_DELAY } from '../Tappable/Tappable';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { IOS, VKCOM } from '../../lib/platform';
+import * as React from "react";
+import Tappable, { ACTIVE_EFFECT_DELAY } from "../Tappable/Tappable";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { IOS, VKCOM } from "../../lib/platform";
 
-import { Icon20CheckBoxOn, Icon20CheckBoxOff, Icon24CheckBoxOn, Icon24CheckBoxOff, Icon20CheckBoxIndetermanate } from '@vkontakte/icons';
+import {
+  Icon20CheckBoxOn,
+  Icon20CheckBoxOff,
+  Icon24CheckBoxOn,
+  Icon24CheckBoxOff,
+  Icon20CheckBoxIndetermanate,
+} from "@vkontakte/icons";
 
-import { HasRef, HasRootRef } from '../../types';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useExternRef } from '../../hooks/useExternRef';
-import { SizeType } from '../../hoc/withAdaptivity';
-import { warnOnce } from '../../lib/warnOnce';
+import { HasRef, HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useExternRef } from "../../hooks/useExternRef";
+import { SizeType } from "../../hoc/withAdaptivity";
+import { warnOnce } from "../../lib/warnOnce";
 
-import './SimpleCheckbox.css';
+import "./SimpleCheckbox.css";
 
-const warn = warnOnce('SimpleCheckbox');
-const IS_DEV = process.env.NODE_ENV === 'development';
+const warn = warnOnce("SimpleCheckbox");
+const IS_DEV = process.env.NODE_ENV === "development";
 
-export interface SimpleCheckboxProps extends
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HasRootRef<HTMLLabelElement>,
-  HasRef<HTMLInputElement> {
+export interface SimpleCheckboxProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRootRef<HTMLLabelElement>,
+    HasRef<HTMLInputElement> {
   indeterminate?: boolean;
   defaultIndeterminate?: boolean;
 }
 
-export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (props: SimpleCheckboxProps) => {
-  const { className, style, getRootRef, getRef, indeterminate, defaultIndeterminate, onChange, ...restProps } = props;
+export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
+  props: SimpleCheckboxProps
+) => {
+  const {
+    className,
+    style,
+    getRootRef,
+    getRef,
+    indeterminate,
+    defaultIndeterminate,
+    onChange,
+    ...restProps
+  } = props;
   const { sizeY } = useAdaptivity();
   const platform = usePlatform();
   const inputRef = useExternRef(getRef);
 
   React.useEffect(() => {
-    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;
+    const indeterminateValue =
+      indeterminate === undefined ? defaultIndeterminate : indeterminate;
 
     if (inputRef.current) {
-      inputRef.current.indeterminate = indeterminateValue;
+      inputRef.current.indeterminate = Boolean(indeterminateValue);
     }
-  }, [indeterminate]);
+  }, [defaultIndeterminate, indeterminate, inputRef]);
 
-  const handleChange: SimpleCheckboxProps['onChange'] = React.useCallback((event) => {
-    if (defaultIndeterminate !== undefined && indeterminate === undefined && restProps.checked === undefined) {
-      inputRef.current.indeterminate = false;
-    }
-    if (indeterminate !== undefined) {
-      inputRef.current.indeterminate = indeterminate;
-    }
-    onChange && onChange(event);
-  }, [onChange, indeterminate, restProps.checked]);
+  const handleChange: SimpleCheckboxProps["onChange"] = React.useCallback(
+    (event) => {
+      if (
+        defaultIndeterminate !== undefined &&
+        indeterminate === undefined &&
+        restProps.checked === undefined &&
+        inputRef.current
+      ) {
+        inputRef.current.indeterminate = false;
+      }
+      if (indeterminate !== undefined && inputRef.current) {
+        inputRef.current.indeterminate = indeterminate;
+      }
+      onChange && onChange(event);
+    },
+    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]
+  );
 
   if (IS_DEV) {
     if (defaultIndeterminate && restProps.defaultChecked) {
-      warn('defaultIndeterminate and defaultChecked cannot be true at the same time');
+      warn(
+        "defaultIndeterminate and defaultChecked cannot be true at the same time"
+      );
     }
 
     if (indeterminate && restProps.checked) {
-      warn('indeterminate and checked cannot be true at the same time');
+      warn("indeterminate and checked cannot be true at the same time");
     }
   }
 
@@ -64,30 +92,38 @@ export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (props: SimpleCheck
     <Tappable
       Component="label"
       vkuiClass={classNames(
-        getClassName('SimpleCheckbox', platform),
-        `SimpleCheckbox--sizeY-${sizeY}`,
+        getClassName("SimpleCheckbox", platform),
+        `SimpleCheckbox--sizeY-${sizeY}`
       )}
       className={className}
       style={style}
       disabled={restProps.disabled}
-      activeMode={platform === VKCOM ? 'SimpleCheckbox--active' : 'background'}
-      hoverMode={platform === VKCOM ? 'SimpleCheckbox--hover' : 'background'}
+      activeMode={platform === VKCOM ? "SimpleCheckbox--active" : "background"}
+      hoverMode={platform === VKCOM ? "SimpleCheckbox--hover" : "background"}
       activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}
       getRootRef={getRootRef}
     >
-      <input {...restProps} onChange={handleChange} type="checkbox" vkuiClass="SimpleCheckbox__input" ref={inputRef} />
+      <input
+        {...restProps}
+        onChange={handleChange}
+        type="checkbox"
+        vkuiClass="SimpleCheckbox__input"
+        ref={inputRef}
+      />
       <div vkuiClass="SimpleCheckbox__container">
         <div vkuiClass="SimpleCheckbox__icon SimpleCheckbox__icon--on">
-          {sizeY === SizeType.COMPACT || platform === VKCOM
-            ? <Icon20CheckBoxOn />
-            : <Icon24CheckBoxOn />
-          }
+          {sizeY === SizeType.COMPACT || platform === VKCOM ? (
+            <Icon20CheckBoxOn />
+          ) : (
+            <Icon24CheckBoxOn />
+          )}
         </div>
         <div vkuiClass="SimpleCheckbox__icon SimpleCheckbox__icon--off">
-          {sizeY === SizeType.COMPACT || platform === VKCOM
-            ? <Icon20CheckBoxOff />
-            : <Icon24CheckBoxOff />
-          }
+          {sizeY === SizeType.COMPACT || platform === VKCOM ? (
+            <Icon20CheckBoxOff />
+          ) : (
+            <Icon24CheckBoxOff />
+          )}
         </div>
         <div vkuiClass="SimpleCheckbox__icon SimpleCheckbox__icon--indeterminate">
           <Icon20CheckBoxIndetermanate
@@ -96,10 +132,15 @@ export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (props: SimpleCheck
           />
         </div>
       </div>
-      {platform === VKCOM && <div aria-hidden={true} vkuiClass="SimpleCheckbox__activeShadow" />}
-      {platform === VKCOM && <div aria-hidden={true} vkuiClass="SimpleCheckbox__hoverShadow" />}
+      {platform === VKCOM && (
+        <div aria-hidden={true} vkuiClass="SimpleCheckbox__activeShadow" />
+      )}
+      {platform === VKCOM && (
+        <div aria-hidden={true} vkuiClass="SimpleCheckbox__hoverShadow" />
+      )}
     </Tappable>
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default SimpleCheckbox;

package/src/components/Slider/Readme.md

@@ -1,80 +1,83 @@
 ```jsx
-  class Example extends React.Component {
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
 
-    constructor (props) {
-      super(props);
-
-      this.state = {
-        value1: 24.4234,
-        value2: 0.2,
-        value3: 20,
-        value4: 15
-      };
-    }
+    this.state = {
+      value1: 24.4234,
+      value2: 0.2,
+      value3: 20,
+      value4: 15,
+    };
+  }
 
-    options () {
-      let options = [];
-      for (let i = 0; i <= 10; i += 2) {
-        options.push({ value: `${i / 10}`, label: `${i / 10}` });
-      }
-      return options;
+  options() {
+    let options = [];
+    for (let i = 0; i <= 10; i += 2) {
+      options.push({ value: `${i / 10}`, label: `${i / 10}` });
     }
+    return options;
+  }
 
-    render() {
-      return (
-        <View activePanel="slider">
-          <Panel id="slider">
-            <PanelHeader>Slider</PanelHeader>
-            <Group>
-              <FormItem top="Simple [10, 30]">
-                <Slider
-                  min={10}
-                  max={30}
-                  value={Number(this.state.value1)}
-                  onChange={value1 => this.setState({value1})}
-                />
-              </FormItem>
-              <FormItem>
-                <Input value={String(this.state.value1)} onChange={e => this.setState({ value1: e.target.value })} type="number"/>
-              </FormItem>
-              <FormItem top="Step [0, 1]">
-                <Slider
-                  step={0.2}
-                  min={0}
-                  max={1}
-                  value={Number(this.state.value2)}
-                  onChange={value2 => this.setState({value2})}
-                />
-              </FormItem>
-              <FormItem>
-                <Select
-                  onChange={e => this.setState({ value2: e.target.value })} 
-                  value={String(this.state.value2)}
-                  options={this.options()} 
-                />
-              </FormItem>
-              <FormItem top="Uncontrolled">
-                <Slider
-                  onChange={value3 => this.setState({value3})}
-                  defaultValue={this.state.value3}
-                  bottom={`${this.state.value3}`}
-                />
-              </FormItem>
-              <FormItem top="Disabled">
-                <Slider
-                  min={10}
-                  max={30}
-                  defaultValue={this.state.value4}
-                  onChange={value4 => this.setState({value4})}
-                  disabled
-                />
-              </FormItem>
-            </Group>
-          </Panel>
-        </View>
-      );
-    }
+  render() {
+    return (
+      <View activePanel="slider">
+        <Panel id="slider">
+          <PanelHeader>Slider</PanelHeader>
+          <Group>
+            <FormItem top="Simple [10, 30]">
+              <Slider
+                min={10}
+                max={30}
+                value={Number(this.state.value1)}
+                onChange={(value1) => this.setState({ value1 })}
+              />
+            </FormItem>
+            <FormItem>
+              <Input
+                value={String(this.state.value1)}
+                onChange={(e) => this.setState({ value1: e.target.value })}
+                type="number"
+              />
+            </FormItem>
+            <FormItem top="Step [0, 1]">
+              <Slider
+                step={0.2}
+                min={0}
+                max={1}
+                value={Number(this.state.value2)}
+                onChange={(value2) => this.setState({ value2 })}
+              />
+            </FormItem>
+            <FormItem>
+              <Select
+                onChange={(e) => this.setState({ value2: e.target.value })}
+                value={String(this.state.value2)}
+                options={this.options()}
+              />
+            </FormItem>
+            <FormItem top="Uncontrolled">
+              <Slider
+                onChange={(value3) => this.setState({ value3 })}
+                defaultValue={this.state.value3}
+                bottom={`${this.state.value3}`}
+              />
+            </FormItem>
+            <FormItem top="Disabled">
+              <Slider
+                min={10}
+                max={30}
+                defaultValue={this.state.value4}
+                onChange={(value4) => this.setState({ value4 })}
+                disabled
+              />
+            </FormItem>
+          </Group>
+        </Panel>
+      </View>
+    );
   }
+}
 
-  <Example />
+<Example />;
 ```

package/src/components/Slider/Slider.css

@@ -10,7 +10,7 @@
   left: 0;
   width: 100%;
   background-color: var(--placeholder_icon_background);
-  content: '';
+  content: "";
   z-index: -1;
   top: 13px;
   height: 2px;
@@ -35,7 +35,7 @@
   top: 0;
   width: calc(100% + 28px);
   background: var(--accent);
-  content: '';
+  content: "";
   left: -14px;
   height: 2px;
   border-radius: 1px;
@@ -46,10 +46,10 @@
   top: -13px;
   width: 28px;
   height: 28px;
-  transition: transform .1s ease;
+  transition: transform 0.1s ease;
   border-radius: 14px;
   background: var(--white);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
 }
 
 .Slider__thumb--start {
@@ -61,7 +61,7 @@
 }
 
 .Slider--disabled {
-  opacity: .4;
+  opacity: 0.4;
 }
 
 /**