@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/Radio/Radio.tsx

@@ -1,47 +1,82 @@
-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 { HasRef, HasRootRef } from '../../types';
-import { usePlatform } from '../../hooks/usePlatform';
-import { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';
-import { hasReactNode } from '../../lib/utils';
-import Subhead from '../Typography/Subhead/Subhead';
-import Headline from '../Typography/Headline/Headline';
-import Text from '../Typography/Text/Text';
-import './Radio.css';
+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 { HasRef, HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  SizeType,
+} from "../../hoc/withAdaptivity";
+import { hasReactNode } from "../../lib/utils";
+import Caption from "../Typography/Caption/Caption";
+import Headline from "../Typography/Headline/Headline";
+import Text from "../Typography/Text/Text";
+import "./Radio.css";
 
-export interface RadioProps extends
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HasRef<HTMLInputElement>,
-  HasRootRef<HTMLLabelElement>,
-  AdaptivityProps {
+export interface RadioProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    HasRef<HTMLInputElement>,
+    HasRootRef<HTMLLabelElement>,
+    AdaptivityProps {
   description?: React.ReactNode;
 }
 
 const Radio: React.FC<RadioProps> = (props: RadioProps) => {
-  const { children, description, style, className, getRef, getRootRef, sizeY, ...restProps } = props;
+  const {
+    children,
+    description,
+    style,
+    className,
+    getRef,
+    getRootRef,
+    sizeY,
+    ...restProps
+  } = props;
   const platform = usePlatform();
 
-  const ContentComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
+  const ContentComponent =
+    platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;
 
   return (
     <Tappable
       Component="label"
       style={style}
       className={className}
-      vkuiClass={classNames(getClassName('Radio', platform), `Radio--sizeY-${sizeY}`)}
+      vkuiClass={classNames(
+        getClassName("Radio", platform),
+        `Radio--sizeY-${sizeY}`
+      )}
       activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}
       disabled={restProps.disabled}
       getRootRef={getRootRef}
     >
-      <input {...restProps} type="radio" vkuiClass="Radio__input" ref={getRef} />
+      <input
+        {...restProps}
+        type="radio"
+        vkuiClass="Radio__input"
+        ref={getRef}
+      />
       <div vkuiClass="Radio__container">
         <i vkuiClass="Radio__icon" role="presentation" />
-        <ContentComponent weight="regular" vkuiClass="Radio__content" Component="div">
+        <ContentComponent
+          weight="regular"
+          vkuiClass="Radio__content"
+          Component="div"
+        >
           <div vkuiClass="Radio__children">{children}</div>
-          {hasReactNode(description) && <Subhead Component="span" weight="regular" vkuiClass="Radio__description">{description}</Subhead>}
+          {hasReactNode(description) && (
+            <Caption
+              level="1"
+              Component="span"
+              weight="regular"
+              vkuiClass="Radio__description"
+            >
+              {description}
+            </Caption>
+          )}
         </ContentComponent>
       </div>
     </Tappable>

package/src/components/Radio/Readme.md

@@ -1,20 +1,29 @@
 Надстройка над `<input type="radio" />`. Компонент принимает все валидные для этого элемента свойства.
 
 ```jsx
-  <View activePanel="panel">
-    <Panel id="panel">
-      <PanelHeader>Radio</PanelHeader>
-      <Group>
-        <FormLayout>
-          <FormItem top="Откуда списать">
-            <Radio name="radio" value="1" description="Баланс 7 320 ₽" defaultChecked>
-              VK Pay  
-            </Radio>
-            <Radio name="radio" value="2">Mastercard **** 1234</Radio>
-            <Radio name="radio" value="3" description="Заблокирована" disabled>Visa **** 4321</Radio>
-          </FormItem>
-        </FormLayout>
-      </Group>
-    </Panel>
-  </View>
+<View activePanel="panel">
+  <Panel id="panel">
+    <PanelHeader>Radio</PanelHeader>
+    <Group>
+      <FormLayout>
+        <FormItem top="Откуда списать">
+          <Radio
+            name="radio"
+            value="1"
+            description="Баланс 7 320 ₽"
+            defaultChecked
+          >
+            VK Pay
+          </Radio>
+          <Radio name="radio" value="2">
+            Mastercard **** 1234
+          </Radio>
+          <Radio name="radio" value="3" description="Заблокирована" disabled>
+            Visa **** 4321
+          </Radio>
+        </FormItem>
+      </FormLayout>
+    </Group>
+  </Panel>
+</View>
 ```

package/src/components/RadioGroup/RadioGroup.css

@@ -0,0 +1,12 @@
+.RadioGroup--horizontal {
+  display: flex;
+}
+
+/**
+ * CMP:
+ * FormItem
+ */
+.FormItem .RadioGroup {
+  margin: 0 calc(-1 * var(--formitem_padding));
+  box-sizing: content-box;
+}

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { classNames } from "../../lib/classNames";
+import "./RadioGroup.css";
+
+export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  mode?: "vertical" | "horizontal";
+}
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  mode = "vertical",
+  children,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+
+  return (
+    <div
+      vkuiClass={classNames(
+        getClassName("RadioGroup", platform),
+        `RadioGroup--${mode}`
+      )}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/RadioGroup/Readme.md

@@ -0,0 +1,56 @@
+Помогает сгруппировать несколько `Radio`, расположив их по горизонтали или вертикали.
+
+```jsx
+<View activePanel="panel">
+  <Panel id="panel">
+    <PanelHeader>RadioGroup</PanelHeader>
+    <Group header={<Header>Внутри FormItem</Header>}>
+      <FormLayout>
+        <FormItem top="Выберите посадку">
+          <RadioGroup>
+            <Radio name="fit" value="classic" defaultChecked>
+              Classic
+            </Radio>
+            <Radio name="fit" value="regular">
+              Regular
+            </Radio>
+            <Radio name="fit" value="slim" disabled description="Нет в наличии">
+              Slim
+            </Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem top="Выберите размер">
+          <RadioGroup mode="horizontal">
+            <Radio name="size" value="sm">
+              S-M
+            </Radio>
+            <Radio name="size" value="lxl">
+              L-XL
+            </Radio>
+          </RadioGroup>
+        </FormItem>
+      </FormLayout>
+    </Group>
+    <Group header={<Header>Без FormItem</Header>}>
+      <FormLayout>
+        <RadioGroup mode="horizontal">
+          <Radio name="pay" value="cash">
+            Оплата наличными
+          </Radio>
+          <Radio name="pay" value="card">
+            Оплата картой
+          </Radio>
+        </RadioGroup>
+        <RadioGroup>
+          <Radio name="delivery" value="courier">
+            Курьерская доставка
+          </Radio>
+          <Radio name="delivery" value="pickup">
+            Доставка в пункт выдачи заказов
+          </Radio>
+        </RadioGroup>
+      </FormLayout>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/RangeSlider/RangeSlider.tsx

@@ -1,24 +1,39 @@
-import * as React from 'react';
-import { clamp } from '../../helpers/math';
-import { UniversalSlider, UniversalSliderProps } from './UniversalSlider';
+import * as React from "react";
+import { clamp } from "../../helpers/math";
+import { UniversalSlider, UniversalSliderProps } from "./UniversalSlider";
 
 export type Value = [number, number];
 export type RangeSliderProps = UniversalSliderProps<Value>;
 
-const RangeSlider: React.FC<RangeSliderProps> = ({ onChange, defaultValue, ...props }: RangeSliderProps) => {
+const RangeSlider: React.FC<RangeSliderProps> = ({
+  onChange,
+  defaultValue,
+  ...props
+}: RangeSliderProps) => {
   const isControlled = Boolean(props.value);
 
-  const [localValue, setValue] = React.useState(defaultValue || [props.min, props.max] as Value);
+  const [localValue, setValue] = React.useState(
+    defaultValue || ([props.min, props.max] as Value)
+  );
   const [start, end] = props.value || localValue;
-  const value = [clamp(start, props.min, props.max), clamp(end, props.min, props.max)] as Value;
+  const value = [
+    clamp(start, props.min, props.max),
+    clamp(end, props.min, props.max),
+  ] as Value;
 
-  const handleChange: RangeSliderProps['onChange'] = React.useCallback((nextValue, event) => {
-    if (props.disabled || value[0] === nextValue[0] && value[1] === nextValue[1]) {
-      return;
-    }
-    !isControlled && setValue(nextValue);
-    onChange && onChange(nextValue, event);
-  }, [onChange, isControlled, value]);
+  const handleChange: RangeSliderProps["onChange"] = React.useCallback(
+    (nextValue, event) => {
+      if (
+        props.disabled ||
+        (value[0] === nextValue[0] && value[1] === nextValue[1])
+      ) {
+        return;
+      }
+      !isControlled && setValue(nextValue);
+      onChange && onChange(nextValue, event);
+    },
+    [onChange, isControlled, value]
+  );
 
   return <UniversalSlider {...props} value={value} onChange={handleChange} />;
 };

package/src/components/RangeSlider/Readme.md

@@ -2,37 +2,31 @@
 Они должны переданы в виде массива `[startValue, endValue]`. `onChange` так же возвращает подобный массив.
 
 ```jsx
-  class Example extends React.Component {
-
-    render() {
-      return (
-        <View activePanel="slider">
-          <Panel id="slider">
-            <PanelHeader>RangerSlider</PanelHeader>
-            <Group>
-              <FormItem top="Uncontrolled">
-                <RangeSlider
-                  min={10}
-                  max={20}
-                  step={1}
-                  defaultValue={[12, 16]}
-                />
-              </FormItem>
-              <FormItem top="Disabled">
-                <RangeSlider
-                  min={10}
-                  max={20}
-                  step={1}
-                  defaultValue={[12, 16]}
-                  disabled
-                />
-              </FormItem>
-            </Group>
-          </Panel>
-        </View>
-      );
-    }
+class Example extends React.Component {
+  render() {
+    return (
+      <View activePanel="slider">
+        <Panel id="slider">
+          <PanelHeader>RangerSlider</PanelHeader>
+          <Group>
+            <FormItem top="Uncontrolled">
+              <RangeSlider min={10} max={20} step={1} defaultValue={[12, 16]} />
+            </FormItem>
+            <FormItem top="Disabled">
+              <RangeSlider
+                min={10}
+                max={20}
+                step={1}
+                defaultValue={[12, 16]}
+                disabled
+              />
+            </FormItem>
+          </Group>
+        </Panel>
+      </View>
+    );
   }
+}
 
-  <Example />
+<Example />;
 ```

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,
+  max,
+  step,
+  value,
+  defaultValue,
+  onChange,
   getRootRef,
   sizeY,
   disabled,
@@ -36,7 +43,7 @@ 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;
@@ -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];
@@ -76,12 +83,12 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
 
   const snapDirection = (pos: number, target: EventTarget) => {
     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 - pos) <= Math.abs(end - pos) ? "start" : "end";
   };
 
   const onStart: TouchEventHandler = (e: TouchEvent) => {
@@ -109,29 +116,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)}%`,
+        left: `${toPercent(start)}%`,
+      }
+    : {
+        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;
 }