@vkontakte/vkui 7.8.2 → 7.9.1

package/src/components/ChipsInputBase/ChipsInputBase.tsx

@@ -5,12 +5,15 @@ import { classNames } from '@vkontakte/vkjs';
 import { isHTMLElement } from '@vkontakte/vkui-floating-ui/utils/dom';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useMergeProps } from '../../hooks/useMergeProps';
 import { getHorizontalFocusGoTo, Keys } from '../../lib/accessibility';
+import { callMultiple } from '../../lib/callMultiple';
 import {
   contains as checkTargetIsInputEl,
   contains,
   getActiveElementByAnotherElement,
 } from '../../lib/dom';
+import { warnOnce } from '../../lib/warnOnce';
 import { FormField } from '../FormField/FormField';
 import { FormFieldClearButton } from '../FormFieldClearButton/FormFieldClearButton';
 import { Text } from '../Typography/Text/Text';
@@ -25,6 +28,8 @@ import {
 import type { ChipOption, ChipOptionValue, ChipsInputBasePrivateProps, NavigateTo } from './types';
 import styles from './ChipsInputBase.module.css';
 
+const warn = warnOnce('ChipsInputBase');
+
 const sizeYClassNames = {
   none: styles.sizeYNone,
   compact: styles.sizeYCompact,
@@ -32,9 +37,9 @@ const sizeYClassNames = {
 
 export const ChipsInputBase = <O extends ChipOption>({
   // FormFieldProps
-  getRootRef,
-  style,
-  className,
+  'getRootRef': rootGetRootRef,
+  'style': rootStyle,
+  'className': rootClassName,
   before,
   after,
   status,
@@ -49,13 +54,8 @@ export const ChipsInputBase = <O extends ChipOption>({
 
   // input
   getRef,
-  'id': idProp,
-  inputValue = DEFAULT_INPUT_VALUE,
-  placeholder,
-  disabled,
-  readOnly,
+  'inputValue': inputValueProp = DEFAULT_INPUT_VALUE,
   addOnBlur,
-  onBlur,
   onInputChange,
 
   // clear
@@ -67,11 +67,55 @@ export const ChipsInputBase = <O extends ChipOption>({
   // a11y
   chipsListLabel = 'Выбранные элементы',
   'aria-label': ariaLabel = '',
+
+  slotProps,
   ...restProps
 }: ChipsInputBasePrivateProps<O>): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
+
+  /* istanbul ignore if: не проверяем в тестах */
+  if (process.env.NODE_ENV === 'development' && getRef) {
+    warn('Свойство `getRef` устаревшее, используйте `slotProps={ input: { getRootRef: ... } }`');
+  }
+
+  const {
+    className,
+    style,
+    getRootRef,
+    onClick: onRootClick,
+    onMouseDown: onRootMouseDown,
+    ...rootRest
+  } = useMergeProps(
+    {
+      getRootRef: rootGetRootRef,
+      style: rootStyle,
+      className: rootClassName,
+    },
+    slotProps?.root,
+  );
+
+  const {
+    getRootRef: getInputRef,
+    onBlur,
+    placeholder,
+    readOnly,
+    disabled,
+    id,
+    value: inputValue = DEFAULT_INPUT_VALUE,
+    ...inputRest
+  } = useMergeProps(
+    {
+      getRootRef: getRef,
+      className: styles.el,
+      value: inputValueProp,
+      onChange: onInputChange,
+      ...restProps,
+    },
+    slotProps?.input,
+  );
+
   const idGenerated = React.useId();
-  const inputRef = useExternRef(getRef);
+  const inputRef = useExternRef(getInputRef);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const listboxRef = React.useRef<HTMLDivElement>(null);
 
@@ -232,7 +276,7 @@ export const ChipsInputBase = <O extends ChipOption>({
     return undefined;
   }, [after, clearButton]);
 
-  const inputId = idProp || `chips-input-base-generated-id-${idGenerated}`;
+  const inputId = id || `chips-input-base-generated-id-${idGenerated}`;
 
   const handleRootMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
     // Если клик был в один из чипов, то preventDefault делать не нужно, так как не будет срабатывать выделение текста
@@ -273,8 +317,9 @@ export const ChipsInputBase = <O extends ChipOption>({
       mode={mode}
       className={className}
       maxHeight={maxHeight}
-      onClick={disabled ? undefined : handleRootClick}
-      onMouseDown={handleRootMouseDown}
+      onClick={disabled ? onRootClick : callMultiple(handleRootClick, onRootClick)}
+      onMouseDown={callMultiple(handleRootMouseDown, onRootMouseDown)}
+      {...rootRest}
     >
       <div
         className={classNames(
@@ -329,19 +374,17 @@ export const ChipsInputBase = <O extends ChipOption>({
           autoComplete="off"
           autoCorrect="off"
           spellCheck={false}
-          {...restProps}
           aria-label={ariaLabel}
           Component="input"
           type="text"
           id={inputId}
           getRootRef={inputRef}
-          className={styles.el}
           disabled={disabled}
           readOnly={readOnly}
-          placeholder={withPlaceholder ? placeholder : undefined}
           value={inputValue}
-          onChange={onInputChange}
+          placeholder={withPlaceholder ? placeholder : undefined}
           onBlur={handleInputBlur}
+          {...inputRest}
         />
       </div>
     </FormField>

package/src/components/ChipsInputBase/types.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { HasAlign, HasRef } from '../../types';
+import type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';
 import { type FormFieldProps } from '../FormField/FormField';
 import { type FormFieldClearButtonProps } from '../FormFieldClearButton/FormFieldClearButton';
 import { type ChipProps } from './Chip/Chip';
@@ -119,12 +119,23 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
       React.InputHTMLAttributes<HTMLInputElement>,
       keyof UseChipsInputBaseProps<O> | 'defaultChecked'
     >,
-    HasRef<HTMLInputElement>,
+    HasRootRef<HTMLDivElement>,
     HasAlign {
   /**
-   * Ссылка на корневой элемент.
+   * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`.
    */
-  getRootRef?: React.Ref<HTMLDivElement>;
+  getRef?: React.Ref<HTMLInputElement>;
+  /**
+   * Свойства, которые можно прокинуть внутрь компонента:
+   * - `root`: свойства для прокидывания в корень компонента;
+   * - `input`: свойства для прокидывания в поле ввода.
+   */
+  slotProps?: {
+    root?: React.HTMLAttributes<HTMLDivElement> & HasRootRef<HTMLDivElement> & HasDataAttribute;
+    input?: React.InputHTMLAttributes<HTMLInputElement> &
+      HasRootRef<HTMLInputElement> &
+      HasDataAttribute;
+  };
   /**
    * Добавляет значение в список на событие `onBlur`.
    */

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -5,6 +5,7 @@ import { type MouseEventHandler } from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalOnEventOutside } from '../../hooks/useGlobalOnClickOutside';
+import { useMergeProps } from '../../hooks/useMergeProps';
 import { Keys } from '../../lib/accessibility';
 import type { Placement } from '../../lib/floating';
 import { defaultFilterFn } from '../../lib/select';
@@ -147,7 +148,6 @@ export interface ChipsSelectProps<O extends ChipOption>
  */
 export const ChipsSelect = <Option extends ChipOption>({
   // FormFieldProps
-  id: labelledbyId,
   getRootRef,
   className,
   status = 'default',
@@ -178,19 +178,14 @@ export const ChipsSelect = <Option extends ChipOption>({
   value: valueProp,
   defaultValue,
   inputValue: inputValueProp,
-  defaultInputValue,
-  disabled,
-  readOnly,
+  defaultInputValue: defaultInputValueProp,
   getOptionValue = getOptionValueDefault,
   getOptionLabel = getOptionLabelDefault,
   getNewOptionData = getNewOptionDataDefault,
   renderChip = renderChipDefault,
   renderOption = renderOptionDefault,
   onChange,
-  onFocus: onFocusProp,
   onInputChange: onInputChangeProp,
-  onBlur: onBlurProp,
-  onKeyDown: onKeyDownProp,
   dropdownOffsetDistance = 0,
   allowClearButton,
   clearButtonTestId,
@@ -198,8 +193,46 @@ export const ChipsSelect = <Option extends ChipOption>({
 
   // a11y
   chipsListLabel,
+
+  // input native props
+  disabled: disabledProp,
+  readOnly: readOnlyProp,
+  id: idProp,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
+  onKeyDown: onKeyDownProp,
+
+  slotProps,
   ...restProps
 }: ChipsSelectProps<Option>): React.ReactNode => {
+  const {
+    getRootRef: getInputRef,
+    value: resolvedInputValue,
+    defaultValue: resolvedDefaultInputValue,
+    onChange: resolvedOnInputChange,
+    disabled,
+    readOnly,
+    id: labelledbyId,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    ...inputRest
+  } = useMergeProps(
+    {
+      getRootRef: getRef,
+      value: inputValueProp,
+      defaultValue: defaultInputValueProp,
+      onChange: onInputChangeProp,
+      disabled: disabledProp,
+      readOnly: readOnlyProp,
+      id: idProp,
+      onFocus: onFocusProp,
+      onBlur: onBlurProp,
+      onKeyDown: onKeyDownProp,
+    },
+    slotProps?.input,
+  );
+
   const {
     // Связано с ChipsInputProps
     // option
@@ -232,9 +265,9 @@ export const ChipsSelect = <Option extends ChipOption>({
     getNewOptionData,
 
     // input
-    inputValue: inputValueProp,
-    defaultInputValue,
-    onInputChange: onInputChangeProp,
+    inputValue: resolvedInputValue as string,
+    defaultInputValue: resolvedDefaultInputValue as string,
+    onInputChange: resolvedOnInputChange,
 
     // dropdown
     options: optionsProp,
@@ -253,7 +286,7 @@ export const ChipsSelect = <Option extends ChipOption>({
 
   // Связано с ChipsInputProps
   const rootRef = useExternRef(getRootRef);
-  const inputRef = useExternRef(getRef, inputRefHook);
+  const inputRef = useExternRef(getInputRef, inputRefHook);
 
   // Связано с CustomSelectDropdownProps
   const [dropdownVerticalPlacement, setDropdownVerticalPlacement] = React.useState<
@@ -274,8 +307,8 @@ export const ChipsSelect = <Option extends ChipOption>({
   const dropdownScrollBoxRef = React.useRef<HTMLDivElement>(null);
 
   const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
-    if (onFocusProp) {
-      onFocusProp(event);
+    if (onFocus) {
+      onFocus(event);
     }
 
     if (!readOnly) {
@@ -285,8 +318,8 @@ export const ChipsSelect = <Option extends ChipOption>({
   };
 
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-    if (onBlurProp) {
-      onBlurProp(event);
+    if (onBlur) {
+      onBlur(event);
     }
 
     // Не добавляем значение, если его нужно выбрать строго из списка
@@ -352,8 +385,8 @@ export const ChipsSelect = <Option extends ChipOption>({
   };
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (onKeyDownProp) {
-      onKeyDownProp(event);
+    if (onKeyDown) {
+      onKeyDown(event);
     }
 
     if (event.defaultPrevented || readOnly) {
@@ -554,13 +587,9 @@ export const ChipsSelect = <Option extends ChipOption>({
   return (
     <>
       <ChipsInputBase
-        {...restProps}
-        disabled={disabled}
-        readOnly={readOnly}
         clearButtonShown={clearButtonShown}
         clearButtonTestId={clearButtonTestId}
         // FormFieldProps
-        id={labelledbyId}
         getRootRef={rootRef}
         className={classNames(styles.host, openedClassNames, className)}
         status={status}
@@ -582,20 +611,29 @@ export const ChipsSelect = <Option extends ChipOption>({
         onRemoveChipOption={removeOption}
         renderChip={renderChip}
         onClear={clearOptions}
-        // input
-        getRef={inputRef}
-        inputValue={inputValue}
-        onInputChange={onInputChange}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
         // a11y
-        role="combobox"
-        aria-expanded={opened}
-        aria-autocomplete="list"
-        aria-activedescendant={opened ? dropdownCurrentItemId : undefined}
-        aria-haspopup="listbox"
         chipsListLabel={chipsListLabel}
+        slotProps={{
+          ...slotProps,
+          input: {
+            'role': 'combobox',
+            'aria-expanded': opened,
+            'aria-autocomplete': 'list',
+            'aria-activedescendant': opened ? dropdownCurrentItemId : undefined,
+            'aria-haspopup': 'listbox',
+            'getRootRef': inputRef,
+            'value': inputValue,
+            'onChange': onInputChange,
+            disabled,
+            readOnly,
+            'id': labelledbyId,
+            'onFocus': handleFocus,
+            'onBlur': handleBlur,
+            'onKeyDown': handleKeyDown,
+            ...inputRest,
+          },
+        }}
+        {...restProps}
       />
       {opened && (
         <CustomSelectDropdown