@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/Chip/Chip.css

@@ -1,56 +0,0 @@
-.Chip {
-  display: inline-block;
-  border: 1px solid var(--image_border);
-  background: var(--background_content);
-  border-radius: 4px;
-  height: 28px;
-  box-sizing: border-box;
-}
-
-.Chip__in {
-  position: relative;
-  display: flex;
-  height: 100%;
-  padding: 0 8px;
-  align-items: center;
-}
-
-.Chip--removable .Chip__in {
-  padding-right: 0;
-}
-
-.Chip__content {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: var(--text_primary);
-  display: inline-block;
-}
-
-.Chip__remove {
-  position: relative;
-  flex-grow: 0;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 6px;
-  margin: -1px;
-  transform: translateX(-1px);
-  color: var(--icon_secondary);
-  border: none;
-  border-radius: 2px;
-  background: transparent;
-  box-sizing: border-box;
-}
-
-.Chip__before {
-  margin-right: 6px;
-}
-
-.Chip__after {
-  margin-left: 6px;
-}

package/src/components/Chip/Chip.tsx

@@ -1,75 +0,0 @@
-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;
-
-export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
-  value: ChipValue;
-  option?: { value?: ChipValue };
-  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;
-  removable?: boolean;
-  removeAriaLabel?: string;
-  before?: React.ReactNode;
-  after?: React.ReactNode;
-}
-
-export const Chip: React.FC<ChipProps> = ({
-  value = "",
-  option,
-  removable = true,
-  onRemove = noop,
-  removeAriaLabel = "Удалить",
-  before = null,
-  after,
-  children,
-  ...restProps
-}: ChipProps) => {
-  const onRemoveWrapper = React.useCallback(
-    (event: React.MouseEvent) => {
-      onRemove(event, value);
-    },
-    [onRemove, value]
-  );
-  const title = getTitleFromChildren(children);
-
-  return (
-    <div
-      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>
-        {hasReactNode(after) && <div vkuiClass="Chip__after">{after}</div>}
-
-        {removable && (
-          <Tappable
-            Component="button"
-            vkuiClass="Chip__remove"
-            onClick={onRemoveWrapper}
-            hasHover={false}
-            hasActive={false}
-            aria-label={`${removeAriaLabel} ${title}`}
-          >
-            <Icon16Cancel aria-hidden={true} />
-          </Tappable>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/Chip/Readme.md

@@ -1,81 +0,0 @@
-Представляет собой маленький кусочек информации. С помощью свойств `removable` и `onRemove` можно управлять удалением.
-Используется внутри [ChipsInput](#!/ChipsInput) и [ChipsSelect](#!/ChipsSelect)
-
-```jsx
-const colors = [
-  { value: "1", label: "Красный" },
-  { value: "2", label: "Синий" },
-];
-
-const Example = () => {
-  const [selectedColors, setSelectedColors] = React.useState([
-    { value: "1", label: "Красный" },
-  ]);
-
-  const colorsChipsProps = {
-    value: selectedColors,
-    onChange: setSelectedColors,
-    options: colors,
-    top: "Выберите или добавьте цвета",
-    placeholder: "Не выбраны",
-    creatable: true,
-    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 <Example />;
-```

package/src/components/ChipsInput/ChipsInput.css

@@ -1,72 +0,0 @@
-.ChipsInput {
-  max-width: 100%;
-}
-
-.ChipsInput__container {
-  flex-grow: 1;
-  flex-shrink: 1;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  max-width: 100%;
-  padding: 3px;
-  z-index: 2;
-  overflow: hidden;
-}
-
-.ChipsInput__chip {
-  max-width: 100%;
-  margin: 2px;
-}
-
-.ChipsInput__input-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  margin: 2px;
-  margin-left: 10px;
-}
-
-.ChipsInput__el {
-  position: relative;
-  width: 100%;
-  margin-bottom: 2px;
-  padding: 0;
-  /* Визуальная компенсация - центрируем строчные буквы */
-  font-size: 15px;
-  line-height: 26px;
-  color: var(--text_primary);
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  appearance: none;
-  z-index: 2;
-}
-
-.ChipsInput__el:focus {
-  min-width: 64px;
-}
-
-.ChipsInput__el::-ms-clear {
-  display: none;
-}
-
-.ChipsInput__el:disabled {
-  opacity: 0.4;
-}
-
-.ChipsInput__el::placeholder {
-  color: var(--field_text_placeholder);
-}
-
-.ChipsInput__el:disabled::placeholder {
-  color: var(--text_secondary);
-}
-
-/**
- * sizeY COMPACT
- */
-
-.ChipsInput--sizeY-compact .ChipsInput__container {
-  padding: 1px;
-}

package/src/components/ChipsInput/ChipsInput.tsx

@@ -1,238 +0,0 @@
-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;
-
-export interface ChipsInputOption {
-  value?: ChipsInputValue;
-  label?: string;
-  [otherProp: string]: any;
-}
-
-export interface RenderChip<Option extends ChipsInputOption> extends ChipProps {
-  label: string;
-  option: Option;
-  disabled: boolean;
-}
-
-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;
-  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;
-  getOptionValue?: (o?: Option) => ChipsInputValue;
-  getOptionLabel?: (o?: Option) => string;
-  getNewOptionData?: (v?: ChipsInputValue, l?: string) => Option;
-  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;
-  inputAriaLabel?: string;
-}
-
-export const chipsInputDefaultProps: ChipsInputProps<any> = {
-  type: "text",
-  onChange: noop,
-  onInputChange: noop,
-  onKeyDown: noop,
-  onBlur: noop,
-  onFocus: noop,
-  value: [],
-  inputValue: "",
-  inputAriaLabel: "Введите ваше значение...",
-  getOptionValue: (option) => option.value,
-  getOptionLabel: (option) => option.label,
-  getNewOptionData: (_, label) => ({
-    value: label,
-    label,
-  }),
-  renderChip(props) {
-    if (!props) {
-      return null;
-    }
-
-    const { disabled, value, label, ...rest } = props;
-    return (
-      <Chip value={value} removable={!disabled} {...rest}>
-        {label}
-      </Chip>
-    );
-  },
-};
-
-const ChipsInput = <Option extends ChipsInputOption>(
-  props: ChipsInputProps<Option>
-) => {
-  const propsWithDefault = { ...chipsInputDefaultProps, ...props };
-  const {
-    style,
-    value,
-    onChange,
-    onInputChange,
-    onKeyDown,
-    onBlur,
-    onFocus,
-    children,
-    className,
-    inputValue,
-    getRef,
-    getRootRef,
-    placeholder,
-    getOptionValue,
-    getOptionLabel,
-    getNewOptionData,
-    renderChip,
-    after,
-    inputAriaLabel,
-    ...restProps
-  } = propsWithDefault;
-  const { sizeY } = useAdaptivity();
-
-  const [focused, setFocused] = React.useState(false);
-  const {
-    fieldValue,
-    addOptionFromInput,
-    removeOption,
-    selectedOptions,
-    handleInputChange,
-  } = useChipsInput(propsWithDefault);
-  const inputRef = useExternRef(getRef);
-
-  const isDisabled = restProps.disabled || restProps.readOnly;
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    onKeyDown!(e);
-
-    if (
-      e.key === "Backspace" &&
-      !e.defaultPrevented &&
-      !fieldValue &&
-      selectedOptions.length
-    ) {
-      removeOption(
-        getOptionValue!(selectedOptions[selectedOptions.length - 1])
-      );
-      e.preventDefault();
-    }
-
-    if (e.key === "Enter" && !e.defaultPrevented && fieldValue) {
-      addOptionFromInput();
-      e.preventDefault();
-    }
-  };
-
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    if (focused) {
-      setFocused(false);
-    }
-    onBlur!(e);
-  };
-
-  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-    if (!focused) {
-      setFocused(true);
-    }
-    onFocus!(e);
-  };
-
-  const handleChipRemove = (
-    _: React.MouseEvent | undefined,
-    value: ChipsInputValue | undefined
-  ) => {
-    if (value !== undefined) {
-      removeOption(value);
-    }
-  };
-
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    if (inputRef?.current !== null && !focused) {
-      inputRef.current.focus();
-    }
-  };
-
-  return (
-    <FormField
-      getRootRef={getRootRef}
-      vkuiClass={classNames("ChipsInput", `ChipsInput--sizeY-${sizeY}`, {
-        "ChipsInput--focused": focused,
-        "ChipsInput--withChips": !!selectedOptions.length,
-      })}
-      className={className}
-      style={style}
-      disabled={restProps.disabled}
-      after={after}
-      onClick={handleClick}
-      role="application"
-      aria-disabled={restProps.disabled}
-      aria-readonly={restProps.readOnly}
-    >
-      <div vkuiClass="ChipsInput__container" role="presentation">
-        {selectedOptions.map((option: Option) => {
-          const value = getOptionValue!(option);
-          const label = getOptionLabel!(option);
-
-          return (
-            <React.Fragment key={`${typeof value}-${value}`}>
-              {renderChip!({
-                option,
-                value,
-                label,
-                onRemove: handleChipRemove,
-                disabled: Boolean(restProps.disabled),
-                className: prefixClass("ChipsInput__chip"),
-              })}
-            </React.Fragment>
-          );
-        })}
-        <label
-          vkuiClass="ChipsInput__input-container"
-          aria-label={inputAriaLabel}
-        >
-          <input
-            ref={inputRef}
-            value={fieldValue}
-            autoCapitalize="none"
-            autoComplete="off"
-            autoCorrect="off"
-            spellCheck={false}
-            aria-autocomplete="list"
-            vkuiClass="ChipsInput__el"
-            onChange={handleInputChange}
-            onKeyDown={handleKeyDown}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            placeholder={selectedOptions.length ? undefined : placeholder}
-            {...restProps}
-          />
-        </label>
-      </div>
-    </FormField>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ChipsInput;

package/src/components/ChipsInput/Readme.md

@@ -1,94 +0,0 @@
-Множественное добавление значений. Поддерживаются любые модели данных с помощью пропсов `getOptionValue`, `getOptionLabel` и `getNewOptionData`. Изменить визуальное оформление значений можно с помощью `renderChip`.
-
-Поле ввода принимает все валидные для `<input>` значения.
-
-```jsx
-const Example = () => {
-  const [colors, setColors] = React.useState([
-    {
-      value: "navarin",
-      label: "Наваринского пламени с дымом",
-    },
-    {
-      value: "red",
-      label: "Красный",
-    },
-    {
-      value: "blue",
-      label: "Синий",
-    },
-  ]);
-
-  const onClick = (e) => {
-    e.stopPropagation();
-    setColors([]);
-  };
-
-  return (
-    <View activePanel="panel">
-      <Panel id="panel">
-        <PanelHeader>ChipsInput</PanelHeader>
-        <Group>
-          <FormItem top="Цвет">
-            <ChipsInput
-              value={colors}
-              after={
-                <IconButton
-                  hoverMode="opacity"
-                  aria-label="Очистить поле"
-                  onClick={onClick}
-                >
-                  <Icon16Clear />
-                </IconButton>
-              }
-            />
-          </FormItem>
-          <FormItem top="Список">
-            <ChipsInput placeholder="Введите название и нажмите Enter" />
-          </FormItem>
-          <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"),
-                },
-              ]}
-              renderChip={({ value, label, option: { src }, ...rest }) => (
-                <Chip
-                  value={value}
-                  removable={false}
-                  before={<Avatar size={20} src={src} role="presentation" />}
-                  {...rest}
-                >
-                  {label}
-                </Chip>
-              )}
-            />
-          </FormItem>
-        </Group>
-      </Panel>
-    </View>
-  );
-};
-
-return <Example />;
-```

package/src/components/ChipsInput/useChipsInput.ts

@@ -1,90 +0,0 @@
-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;
-
-  const [fieldValue, setFieldValue] = React.useState(props.inputValue);
-  const [selectedOptions, setSelectedOptions] = React.useState(value ?? []);
-
-  const clearInput = React.useCallback(() => {
-    setFieldValue("");
-    onInputChange!({ target: { value: "" } } as any);
-  }, [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)
-      );
-
-      if (value === true) {
-        newSelectedOptions.push(newOption);
-      }
-
-      setSelectedOptions(newSelectedOptions);
-      onChange!(newSelectedOptions);
-    },
-    [selectedOptions, getOptionValue, onChange]
-  );
-
-  const addOption = React.useCallback(
-    (newOption: Option) => toggleOption(newOption, true),
-    [toggleOption]
-  );
-  const addOptionFromInput = React.useCallback(() => {
-    const trimmedValue = fieldValue?.trim();
-
-    if (trimmedValue) {
-      addOption(getNewOptionData!(undefined, trimmedValue));
-      clearInput();
-    }
-  }, [addOption, clearInput, getNewOptionData, fieldValue]);
-  const removeOption = React.useCallback(
-    (value: ChipsInputValue) => {
-      toggleOption(getNewOptionData!(undefined, value as string), false);
-    },
-    [toggleOption, getNewOptionData]
-  );
-
-  React.useEffect(() => {
-    setSelectedOptions(value as Option[]);
-
-    return () => setSelectedOptions([]);
-  }, [props.value, value]);
-
-  React.useEffect(() => {
-    setFieldValue(props.inputValue);
-
-    return () => setFieldValue("");
-  }, [props.inputValue]);
-
-  return {
-    fieldValue,
-    setFieldValue,
-    selectedOptions,
-    setSelectedOptions,
-    clearInput,
-    toggleOption,
-    addOption,
-    addOptionFromInput,
-    removeOption,
-    handleInputChange,
-  };
-};