@vkontakte/vkui 4.35.4 → 4.37.0

package/src/components/ChipsInput/ChipsInput.tsx

@@ -1,242 +1,42 @@
-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 { ChipOption } from "../Chip/Chip";
+import {
+  ChipsInputBase,
+  ChipsInputBaseProps,
+} from "../ChipsInputBase/ChipsInputBase";
 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 interface ChipsInputProps<Option extends ChipOption>
+  extends ChipsInputBaseProps<Option>,
+    FormFieldProps {}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
  */
-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();
-    }
-  };
-
+export const ChipsInput = <Option extends ChipOption>({
+  style,
+  className,
+  getRootRef,
+  before,
+  after,
+  status,
+  ...restProps
+}: ChipsInputProps<Option>) => {
   return (
     <FormField
       getRootRef={getRootRef}
-      vkuiClass={classNames(
-        "ChipsInput",
-        `ChipsInput--sizeY-${sizeY}`,
-        focused && "ChipsInput--focused",
-        !!selectedOptions.length && "ChipsInput--withChips"
-      )}
+      vkuiClass="ChipsInput"
       className={className}
       style={style}
       disabled={restProps.disabled}
       before={before}
       after={after}
-      onClick={handleClick}
       role="application"
       aria-disabled={restProps.disabled}
       aria-readonly={restProps.readOnly}
+      status={status}
     >
-      <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>
+      <ChipsInputBase {...restProps} />
     </FormField>
   );
 };

package/src/components/ChipsInputBase/ChipsInputBase.css

@@ -0,0 +1,73 @@
+.ChipsInputBase {
+  flex-grow: 1;
+  flex-shrink: 1;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  max-width: 100%;
+  padding: 3px;
+  z-index: 6;
+  overflow: hidden;
+}
+
+.ChipsInputBase__chip {
+  max-width: 100%;
+  margin: 2px;
+}
+
+.ChipsInputBase__label {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  margin: 2px;
+  margin-left: 10px;
+}
+
+.ChipsInputBase__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;
+}
+
+.ChipsInputBase__el:focus {
+  min-width: 64px;
+}
+
+.ChipsInputBase__el::-ms-clear {
+  display: none;
+}
+
+.ChipsInputBase__el:disabled {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.ChipsInputBase__el::placeholder {
+  color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
+  /* Для Firefox */
+  opacity: 1;
+}
+
+.ChipsInputBase__el:disabled::placeholder {
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
+}
+
+.ChipsInputBase__el[readonly] {
+  cursor: default;
+}
+
+/**
+ * sizeY COMPACT
+ */
+.ChipsInputBase--sizeY-compact {
+  padding: 1px;
+}

package/src/components/ChipsInputBase/ChipsInputBase.tsx

@@ -0,0 +1,206 @@
+import * as React from "react";
+import { HasAlign, HasRef, HasRootRef } from "../../types";
+import { classNames } from "../../lib/classNames";
+import { Chip, ChipOption, ChipValue, RenderChip } from "../Chip/Chip";
+import { noop } from "../../lib/utils";
+import { useChipsInput } from "../../hooks/useChipsInput";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { prefixClass } from "../../lib/prefixClass";
+import { useExternRef } from "../../hooks/useExternRef";
+import "./ChipsInputBase.css";
+
+export interface ChipsInputBaseProps<Option extends ChipOption>
+  extends Omit<
+      React.InputHTMLAttributes<HTMLInputElement>,
+      "value" | "onChange"
+    >,
+    HasRef<HTMLInputElement>,
+    HasRootRef<HTMLDivElement>,
+    HasAlign {
+  value: Option[];
+  inputValue?: string;
+  onChange?: (o: Option[]) => void;
+  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;
+  getOptionValue?: (o?: Option) => ChipValue;
+  getOptionLabel?: (o?: Option) => string;
+  getNewOptionData?: (v?: ChipValue, l?: string) => Option;
+  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;
+  inputAriaLabel?: string;
+}
+
+export const chipsInputDefaultProps: ChipsInputBaseProps<any> = {
+  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 ChipsInputBase = <Option extends ChipOption>(
+  props: ChipsInputBaseProps<Option>
+) => {
+  const propsWithDefault = { ...chipsInputDefaultProps, ...props };
+  const {
+    style,
+    className,
+    getRootRef,
+    value,
+    onChange,
+    onInputChange,
+    onKeyDown,
+    onBlur,
+    onFocus,
+    children,
+    inputValue,
+    getRef,
+    placeholder,
+    getOptionValue,
+    getOptionLabel,
+    getNewOptionData,
+    renderChip,
+    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: ChipValue | 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 (
+    <div
+      vkuiClass={classNames("ChipsInputBase", `ChipsInputBase--sizeY-${sizeY}`)}
+      onClick={handleClick}
+      role="presentation"
+      style={style}
+      className={className}
+      ref={getRootRef}
+    >
+      {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("ChipsInputBase__chip"),
+            })}
+          </React.Fragment>
+        );
+      })}
+      <label vkuiClass="ChipsInputBase__label" aria-label={inputAriaLabel}>
+        <input
+          type="text"
+          autoCapitalize="none"
+          autoComplete="off"
+          autoCorrect="off"
+          spellCheck={false}
+          aria-autocomplete="list"
+          vkuiClass="ChipsInputBase__el"
+          {...restProps}
+          ref={inputRef}
+          value={fieldValue}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholder={selectedOptions.length ? undefined : placeholder}
+        />
+      </label>
+    </div>
+  );
+};

package/src/components/ChipsSelect/ChipsSelect.css

@@ -2,6 +2,14 @@
   position: relative;
 }
 
+.ChipsSelect__dropdown {
+  cursor: pointer;
+}
+
+.ChipsSelect__icon {
+  pointer-events: none;
+}
+
 .ChipsSelect__empty {
   padding: 12px 0;
   text-align: center;