@vkontakte/vkui 4.28.0 → 4.29.1

package/src/components/Chip/Chip.css

@@ -0,0 +1,56 @@
+.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

@@ -0,0 +1,70 @@
+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
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
+      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 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

@@ -0,0 +1,81 @@
+Представляет собой маленький кусочек информации. С помощью свойств `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

@@ -0,0 +1,72 @@
+.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, var(--vkui--color_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: var(--vkui--opacity_disable_accessibility);
+}
+
+.ChipsInput__el::placeholder {
+  color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
+}
+
+.ChipsInput__el:disabled::placeholder {
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
+}
+
+/**
+ * sizeY COMPACT
+ */
+
+.ChipsInput--sizeY-compact .ChipsInput__container {
+  padding: 1px;
+}

package/src/components/ChipsInput/ChipsInput.tsx

@@ -0,0 +1,239 @@
+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>
+    );
+  },
+};
+
+export 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,
+    before,
+    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}`,
+        focused && "ChipsInput--focused",
+        !!selectedOptions.length && "ChipsInput--withChips"
+      )}
+      className={className}
+      style={style}
+      disabled={restProps.disabled}
+      before={before}
+      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>
+  );
+};

package/src/components/ChipsInput/Readme.md

@@ -0,0 +1,94 @@
+Множественное добавление значений. Поддерживаются любые модели данных с помощью пропсов `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

@@ -0,0 +1,90 @@
+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,
+  };
+};