@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/Checkbox/Readme.md

@@ -1,16 +1,20 @@
 Надстройка над `<input type="checkbox" />`. Компонент принимает все валидные для этого элемента свойства.
 
 ```jsx
-  <View activePanel="panel">
-    <Panel id="panel">
-      <PanelHeader>Checkbox</PanelHeader>
-      <Group>
-        <FormItem>
-          <Checkbox defaultChecked>Я участвую в сборе</Checkbox>
-          <Checkbox>Закрепить сообщение с запросом</Checkbox>
-          <Checkbox>Автоматически зачислять на карту</Checkbox>
-        </FormItem>
-      </Group>
-    </Panel>
-  </View>
+<View activePanel="panel">
+  <Panel id="panel">
+    <PanelHeader>Checkbox</PanelHeader>
+    <Group>
+      <FormItem>
+        <Checkbox defaultChecked>Я участвую в сборе</Checkbox>
+        <Checkbox description="Все пользователи получат уведомление">
+          Закрепить сообщение
+        </Checkbox>
+        <Checkbox checked disabled>
+          Автоматически зачислять на карту
+        </Checkbox>
+      </FormItem>
+    </Group>
+  </Panel>
+</View>
 ```

package/src/components/Chip/Chip.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { Icon16Cancel } from '@vkontakte/icons';
-import { getTitleFromChildren, hasReactNode, noop } from '../../lib/utils';
-import { classNames } from '../../lib/classNames';
-import Caption from '../Typography/Caption/Caption';
-import Tappable from '../Tappable/Tappable';
-import './Chip.css';
+import * as React from "react";
+import { Icon16Cancel } from "@vkontakte/icons";
+import { getTitleFromChildren, hasReactNode, noop } from "../../lib/utils";
+import { classNames } from "../../lib/classNames";
+import Caption from "../Typography/Caption/Caption";
+import Tappable from "../Tappable/Tappable";
+import "./Chip.css";
 
 type ChipValue = string | number;
 
@@ -19,34 +19,45 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const Chip: React.FC<ChipProps> = ({
-  value = '',
+  value = "",
   option,
   removable = true,
   onRemove = noop,
-  removeAriaLabel = 'Удалить',
+  removeAriaLabel = "Удалить",
   before = null,
   after,
   children,
   ...restProps
 }: ChipProps) => {
-  const onRemoveWrapper = React.useCallback((event: React.MouseEvent) => {
-    onRemove(event, value);
-  }, [onRemove, value]);
+  const onRemoveWrapper = React.useCallback(
+    (event: React.MouseEvent) => {
+      onRemove(event, value);
+    },
+    [onRemove, value]
+  );
   const title = getTitleFromChildren(children);
 
   return (
     <div
-      vkuiClass={classNames('Chip', { 'Chip--removable': removable })}
+      vkuiClass={classNames("Chip", { "Chip--removable": removable })}
       role="option"
       aria-label={title}
       {...restProps}
     >
       <div vkuiClass="Chip__in" role="presentation">
         {hasReactNode(before) && <div vkuiClass="Chip__before">{before}</div>}
-        <Caption level="1" weight="regular" vkuiClass="Chip__content" title={title} aria-hidden="true">{children}</Caption>
+        <Caption
+          level="1"
+          weight="regular"
+          vkuiClass="Chip__content"
+          title={title}
+          aria-hidden="true"
+        >
+          {children}
+        </Caption>
         {hasReactNode(after) && <div vkuiClass="Chip__after">{after}</div>}
 
-        {removable &&
+        {removable && (
           <Tappable
             Component="button"
             vkuiClass="Chip__remove"
@@ -57,7 +68,7 @@ const Chip: React.FC<ChipProps> = ({
           >
             <Icon16Cancel aria-hidden={true} />
           </Tappable>
-        }
+        )}
       </div>
     </div>
   );

package/src/components/Chip/Readme.md

@@ -1,50 +1,81 @@
-Представляет собой маленький кусочек информации. С помощью свойств `removable` и `onRemove` можно управлять удалением. 
+Представляет собой маленький кусочек информации. С помощью свойств `removable` и `onRemove` можно управлять удалением.
 Используется внутри [ChipsInput](#!/ChipsInput) и [ChipsSelect](#!/ChipsSelect)
 
 ```jsx
-const colors = [{value: '1', label: 'Красный'}, {value: '2', label: 'Синий'}];
+const colors = [
+  { value: "1", label: "Красный" },
+  { value: "2", label: "Синий" },
+];
 
 const Example = () => {
-  const [selectedColors, setSelectedColors] = React.useState([{value: '1', label: 'Красный'}]);
+  const [selectedColors, setSelectedColors] = React.useState([
+    { value: "1", label: "Красный" },
+  ]);
 
   const colorsChipsProps = {
     value: selectedColors,
     onChange: setSelectedColors,
     options: colors,
-    top:"Выберите или добавьте цвета",
-    placeholder:"Не выбраны",
+    top: "Выберите или добавьте цвета",
+    placeholder: "Не выбраны",
     creatable: true,
-    creatableText: 'Создать значение'
-  } 
+    creatableText: "Создать значение",
+  };
 
-  return <View activePanel="panel">
-    <Panel id="panel">
-      <PanelHeader>
-        Chip
-      </PanelHeader>
-      <Group>
-        <FormItem top="Любимые группы">
-          <ChipsInput
-            value={[{value: '1', label: 'Arctic Monkeys', src: getAvatarUrl('audio_arctic_monkeys')}, {value: '2', label: 'Звери', src: getAvatarUrl('audio_leto_zveri')}, {value: '4', label: 'FACE', src: getAvatarUrl('audio_face')}, {value: '3', label: 'Depeche Mode', src: getAvatarUrl('audio_depeche_mode')}, {value: '5', label: 'Linkin Park', src: getAvatarUrl('audio_linkin_park')}]}
-            renderChip={({ value, label, option: { src }, ...rest }) => (
-              <Chip key={value}
-                value={value}
-                removable={false}
-                before={<Avatar size={20} src={src} />}
-                {...rest}
-              >
-                {label}
-              </Chip>
-            )}
-          />
-        </FormItem>
-        <FormItem top="Выберите или добавьте цвета">
-          <ChipsSelect {...colorsChipsProps} onClick={() => setActiveView('colors')}/>
-        </FormItem>
-      </Group>
-    </Panel>
-  </View>
-}
+  return (
+    <View activePanel="panel">
+      <Panel id="panel">
+        <PanelHeader>Chip</PanelHeader>
+        <Group>
+          <FormItem top="Любимые группы">
+            <ChipsInput
+              value={[
+                {
+                  value: "1",
+                  label: "Arctic Monkeys",
+                  src: getAvatarUrl("audio_arctic_monkeys"),
+                },
+                {
+                  value: "2",
+                  label: "Звери",
+                  src: getAvatarUrl("audio_leto_zveri"),
+                },
+                { value: "4", label: "FACE", src: getAvatarUrl("audio_face") },
+                {
+                  value: "3",
+                  label: "Depeche Mode",
+                  src: getAvatarUrl("audio_depeche_mode"),
+                },
+                {
+                  value: "5",
+                  label: "Linkin Park",
+                  src: getAvatarUrl("audio_linkin_park"),
+                },
+              ]}
+              renderChip={({ value, label, option: { src }, ...rest }) => (
+                <Chip
+                  key={value}
+                  value={value}
+                  removable={false}
+                  before={<Avatar size={20} src={src} />}
+                  {...rest}
+                >
+                  {label}
+                </Chip>
+              )}
+            />
+          </FormItem>
+          <FormItem top="Выберите или добавьте цвета">
+            <ChipsSelect
+              {...colorsChipsProps}
+              onClick={() => setActiveView("colors")}
+            />
+          </FormItem>
+        </Group>
+      </Panel>
+    </View>
+  );
+};
 
-return <Example />
+return <Example />;
 ```

package/src/components/ChipsInput/ChipsInput.css

@@ -52,7 +52,7 @@
 }
 
 .ChipsInput__el:disabled {
-  opacity: .4;
+  opacity: 0.4;
 }
 
 .ChipsInput__el::placeholder {

package/src/components/ChipsInput/ChipsInput.tsx

@@ -1,14 +1,14 @@
-import * as React from 'react';
-import { HasAlign, HasRef, HasRootRef } from '../../types';
-import { FormField, FormFieldProps } from '../FormField/FormField';
-import { classNames } from '../../lib/classNames';
-import Chip, { ChipProps } from '../Chip/Chip';
-import { noop } from '../../lib/utils';
-import { useChipsInput } from './useChipsInput';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { prefixClass } from '../../lib/prefixClass';
-import { useExternRef } from '../../hooks/useExternRef';
-import './ChipsInput.css';
+import * as React from "react";
+import { HasAlign, HasRef, HasRootRef } from "../../types";
+import { FormField, FormFieldProps } from "../FormField/FormField";
+import { classNames } from "../../lib/classNames";
+import Chip, { ChipProps } from "../Chip/Chip";
+import { noop } from "../../lib/utils";
+import { useChipsInput } from "./useChipsInput";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { prefixClass } from "../../lib/prefixClass";
+import { useExternRef } from "../../hooks/useExternRef";
+import "./ChipsInput.css";
 
 export type ChipsInputValue = string | number;
 
@@ -24,12 +24,15 @@ export interface RenderChip<Option extends ChipsInputOption> extends ChipProps {
   disabled: boolean;
 }
 
-export interface ChipsInputProps<Option extends ChipsInputOption> extends
-  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>,
-  HasRef<HTMLInputElement>,
-  HasRootRef<HTMLDivElement>,
-  HasAlign,
-  FormFieldProps {
+export interface ChipsInputProps<Option extends ChipsInputOption>
+  extends Omit<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      "value" | "onChange"
+    >,
+    HasRef<HTMLInputElement>,
+    HasRootRef<HTMLDivElement>,
+    HasAlign,
+    FormFieldProps {
   value: Option[];
   inputValue?: string;
   onChange?: (o: Option[]) => void;
@@ -41,14 +44,41 @@ export interface ChipsInputProps<Option extends ChipsInputOption> extends
   inputAriaLabel?: string;
 }
 
-const ChipsInput = <Option extends ChipsInputOption>(props: ChipsInputProps<Option>) => {
-  const { style, value, onChange, onInputChange, onKeyDown, onBlur, onFocus, children, className, inputValue,
-    getRef, getRootRef, placeholder, getOptionValue, getOptionLabel, getNewOptionData, renderChip,
-    after, inputAriaLabel, ...restProps } = props;
+const ChipsInput = <Option extends ChipsInputOption>(
+  props: ChipsInputProps<Option>
+) => {
+  const {
+    style,
+    value,
+    onChange,
+    onInputChange,
+    onKeyDown,
+    onBlur,
+    onFocus,
+    children,
+    className,
+    inputValue,
+    getRef,
+    getRootRef,
+    placeholder,
+    getOptionValue,
+    getOptionLabel,
+    getNewOptionData,
+    renderChip,
+    after,
+    inputAriaLabel,
+    ...restProps
+  } = props;
   const { sizeY } = useAdaptivity();
 
   const [focused, setFocused] = React.useState(false);
-  const { fieldValue, addOptionFromInput, removeOption, selectedOptions, handleInputChange } = useChipsInput(props);
+  const {
+    fieldValue,
+    addOptionFromInput,
+    removeOption,
+    selectedOptions,
+    handleInputChange,
+  } = useChipsInput(props);
   const inputRef = useExternRef(getRef);
 
   const isDisabled = restProps.disabled || restProps.readOnly;
@@ -61,12 +91,17 @@ const ChipsInput = <Option extends ChipsInputOption>(props: ChipsInputProps<Opti
 
     onKeyDown(e);
 
-    if (e.key === 'Backspace' && !e.defaultPrevented && !fieldValue && selectedOptions.length) {
+    if (
+      e.key === "Backspace" &&
+      !e.defaultPrevented &&
+      !fieldValue &&
+      selectedOptions.length
+    ) {
       removeOption(getOptionValue(selectedOptions[selectedOptions.length - 1]));
       e.preventDefault();
     }
 
-    if (e.key === 'Enter' && !e.defaultPrevented && fieldValue) {
+    if (e.key === "Enter" && !e.defaultPrevented && fieldValue) {
       addOptionFromInput();
       e.preventDefault();
     }
@@ -86,7 +121,10 @@ const ChipsInput = <Option extends ChipsInputOption>(props: ChipsInputProps<Opti
     onFocus(e);
   };
 
-  const handleChipRemove = (_: React.MouseEvent<HTMLInputElement>, value: ChipsInputValue) => {
+  const handleChipRemove = (
+    _: React.MouseEvent<HTMLInputElement>,
+    value: ChipsInputValue
+  ) => {
     removeOption(value);
   };
 
@@ -104,9 +142,9 @@ const ChipsInput = <Option extends ChipsInputOption>(props: ChipsInputProps<Opti
   return (
     <FormField
       getRootRef={getRootRef}
-      vkuiClass={classNames('ChipsInput', `ChipsInput--sizeY-${sizeY}`, {
-        'ChipsInput--focused': focused,
-        'ChipsInput--withChips': !!selectedOptions.length,
+      vkuiClass={classNames("ChipsInput", `ChipsInput--sizeY-${sizeY}`, {
+        "ChipsInput--focused": focused,
+        "ChipsInput--withChips": !!selectedOptions.length,
       })}
       className={className}
       style={style}
@@ -124,11 +162,21 @@ const ChipsInput = <Option extends ChipsInputOption>(props: ChipsInputProps<Opti
 
           return (
             <React.Fragment key={`${typeof value}-${value}`}>
-              {renderChip({ option, value, label, onRemove: handleChipRemove, disabled: restProps.disabled, className: prefixClass('ChipsInput__chip') })}
+              {renderChip({
+                option,
+                value,
+                label,
+                onRemove: handleChipRemove,
+                disabled: restProps.disabled,
+                className: prefixClass("ChipsInput__chip"),
+              })}
             </React.Fragment>
           );
         })}
-        <label vkuiClass="ChipsInput__input-container" aria-label={inputAriaLabel}>
+        <label
+          vkuiClass="ChipsInput__input-container"
+          aria-label={inputAriaLabel}
+        >
           <input
             ref={inputRef}
             value={fieldValue}
@@ -152,19 +200,27 @@ const ChipsInput = <Option extends ChipsInputOption>(props: ChipsInputProps<Opti
 };
 
 export const chipsInputDefaultProps: ChipsInputProps<any> = {
-  type: 'text',
+  type: "text",
   onChange: noop,
   onInputChange: noop,
   onKeyDown: noop,
   onBlur: noop,
   onFocus: noop,
   value: [],
-  inputValue: '',
-  inputAriaLabel: 'Введите ваше значение...',
+  inputValue: "",
+  inputAriaLabel: "Введите ваше значение...",
   getOptionValue: (option: ChipsInputOption): ChipsInputValue => option.value,
   getOptionLabel: (option: ChipsInputOption): string => option.label,
-  getNewOptionData: (_: ChipsInputValue, label: string): ChipsInputOption => ({ value: label, label }),
-  renderChip({ disabled, value, label, ...rest }: RenderChip<ChipsInputOption>) {
+  getNewOptionData: (_: ChipsInputValue, label: string): ChipsInputOption => ({
+    value: label,
+    label,
+  }),
+  renderChip({
+    disabled,
+    value,
+    label,
+    ...rest
+  }: RenderChip<ChipsInputOption>) {
     return (
       <Chip value={value} removable={!disabled} {...rest}>
         {label}

package/src/components/ChipsInput/Readme.md

@@ -1,4 +1,4 @@
-Множественное добавление значений. Поддерживаются любые модели данных с помощью пропсов `getOptionValue`, `getOptionLabel` и `getNewOptionData`. Изменить визуальное оформление значений можно с помощью `renderChip`.  
+Множественное добавление значений. Поддерживаются любые модели данных с помощью пропсов `getOptionValue`, `getOptionLabel` и `getNewOptionData`. Изменить визуальное оформление значений можно с помощью `renderChip`.
 
 Поле ввода принимает все валидные для `<input>` значения.
 
@@ -6,21 +6,23 @@
 const Example = () => {
   const [colors, setColors] = React.useState([
     {
-      value: 'navarin',
-      label: 'Наваринского пламени с дымом',
-    }, {
-      value: 'red',
-      label: 'Красный',
-    }, {
-      value: 'blue',    
-      label: 'Синий',
-    }
+      value: "navarin",
+      label: "Наваринского пламени с дымом",
+    },
+    {
+      value: "red",
+      label: "Красный",
+    },
+    {
+      value: "blue",
+      label: "Синий",
+    },
   ]);
 
   const onClick = (e) => {
     e.stopPropagation();
     setColors([]);
-  }
+  };
 
   return (
     <View activePanel="panel">
@@ -30,7 +32,15 @@ const Example = () => {
           <FormItem top="Цвет">
             <ChipsInput
               value={colors}
-              after={<IconButton hoverMode="opacity" aria-label="Очистить поле" onClick={onClick}><Icon16Clear/></IconButton>}
+              after={
+                <IconButton
+                  hoverMode="opacity"
+                  aria-label="Очистить поле"
+                  onClick={onClick}
+                >
+                  <Icon16Clear />
+                </IconButton>
+              }
             />
           </FormItem>
           <FormItem top="Список">
@@ -39,7 +49,29 @@ const Example = () => {
           <FormItem top="Любимые группы">
             <ChipsInput
               readOnly
-              value={[{value: '1', label: 'Arctic Monkeys', src: getAvatarUrl('audio_arctic_monkeys')}, {value: '2', label: 'Звери', src: getAvatarUrl('audio_leto_zveri')}, {value: '4', label: 'FACE', src: getAvatarUrl('audio_face')}, {value: '3', label: 'Depeche Mode', src: getAvatarUrl('audio_depeche_mode')}, {value: '5', label: 'Linkin Park', src: getAvatarUrl('audio_linkin_park')}]}
+              value={[
+                {
+                  value: "1",
+                  label: "Arctic Monkeys",
+                  src: getAvatarUrl("audio_arctic_monkeys"),
+                },
+                {
+                  value: "2",
+                  label: "Звери",
+                  src: getAvatarUrl("audio_leto_zveri"),
+                },
+                { value: "4", label: "FACE", src: getAvatarUrl("audio_face") },
+                {
+                  value: "3",
+                  label: "Depeche Mode",
+                  src: getAvatarUrl("audio_depeche_mode"),
+                },
+                {
+                  value: "5",
+                  label: "Linkin Park",
+                  src: getAvatarUrl("audio_linkin_park"),
+                },
+              ]}
               renderChip={({ value, label, option: { src }, ...rest }) => (
                 <Chip
                   value={value}
@@ -55,8 +87,8 @@ const Example = () => {
         </Group>
       </Panel>
     </View>
-  )
-}
+  );
+};
 
 return <Example />;
 ```

package/src/components/ChipsInput/useChipsInput.ts

@@ -1,34 +1,52 @@
-import * as React from 'react';
-import { ChipsInputOption, ChipsInputProps, ChipsInputValue } from './ChipsInput';
+import * as React from "react";
+import {
+  ChipsInputOption,
+  ChipsInputProps,
+  ChipsInputValue,
+} from "./ChipsInput";
 
-export const useChipsInput = <Option extends ChipsInputOption>(props: Partial<ChipsInputProps<Option>>) => {
-  const { value, getOptionValue, onChange, onInputChange, getNewOptionData } = props;
+export const useChipsInput = <Option extends ChipsInputOption>(
+  props: Partial<ChipsInputProps<Option>>
+) => {
+  const { value, getOptionValue, onChange, onInputChange, getNewOptionData } =
+    props;
 
   const [fieldValue, setFieldValue] = React.useState(props.inputValue);
   const [selectedOptions, setSelectedOptions] = React.useState(value);
 
   const clearInput = React.useCallback(() => {
-    setFieldValue('');
-    onInputChange({ target: { value: '' } } as any);
+    setFieldValue("");
+    onInputChange({ target: { value: "" } } as any);
   }, [onInputChange]);
 
-  const handleInputChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setFieldValue(e.target.value);
-    onInputChange(e);
-  }, [onInputChange]);
+  const handleInputChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setFieldValue(e.target.value);
+      onInputChange(e);
+    },
+    [onInputChange]
+  );
 
-  const toggleOption = React.useCallback((newOption: Option, value?: boolean) => {
-    const newSelectedOptions = selectedOptions.filter((option: Option) => getOptionValue(newOption) !== getOptionValue(option));
+  const toggleOption = React.useCallback(
+    (newOption: Option, value?: boolean) => {
+      const newSelectedOptions = selectedOptions.filter(
+        (option: Option) => getOptionValue(newOption) !== getOptionValue(option)
+      );
 
-    if (value === true) {
-      newSelectedOptions.push(newOption);
-    }
+      if (value === true) {
+        newSelectedOptions.push(newOption);
+      }
 
-    setSelectedOptions(newSelectedOptions);
-    onChange(newSelectedOptions);
-  }, [selectedOptions, getOptionValue, onChange]);
+      setSelectedOptions(newSelectedOptions);
+      onChange(newSelectedOptions);
+    },
+    [selectedOptions, getOptionValue, onChange]
+  );
 
-  const addOption = React.useCallback((newOption: Option) => toggleOption(newOption, true), [toggleOption]);
+  const addOption = React.useCallback(
+    (newOption: Option) => toggleOption(newOption, true),
+    [toggleOption]
+  );
   const addOptionFromInput = React.useCallback(() => {
     const trimmedValue = fieldValue?.trim();
 
@@ -37,9 +55,12 @@ export const useChipsInput = <Option extends ChipsInputOption>(props: Partial<Ch
       clearInput();
     }
   }, [addOption, clearInput, getNewOptionData, fieldValue]);
-  const removeOption = React.useCallback((value: ChipsInputValue) => {
-    toggleOption(getNewOptionData(undefined, value as string), false);
-  }, [toggleOption, getNewOptionData]);
+  const removeOption = React.useCallback(
+    (value: ChipsInputValue) => {
+      toggleOption(getNewOptionData(undefined, value as string), false);
+    },
+    [toggleOption, getNewOptionData]
+  );
 
   React.useEffect(() => {
     setSelectedOptions(value);
@@ -50,8 +71,19 @@ export const useChipsInput = <Option extends ChipsInputOption>(props: Partial<Ch
   React.useEffect(() => {
     setFieldValue(props.inputValue);
 
-    return () => setFieldValue('');
+    return () => setFieldValue("");
   }, [props.inputValue]);
 
-  return { fieldValue, setFieldValue, selectedOptions, setSelectedOptions, clearInput, toggleOption, addOption, addOptionFromInput, removeOption, handleInputChange };
+  return {
+    fieldValue,
+    setFieldValue,
+    selectedOptions,
+    setSelectedOptions,
+    clearInput,
+    toggleOption,
+    addOption,
+    addOptionFromInput,
+    removeOption,
+    handleInputChange,
+  };
 };