@vkontakte/vkui 7.3.2 → 7.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.3.2",
+  "version": "7.3.3",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

package/src/components/FormItem/FormItem.tsx

@@ -104,6 +104,7 @@ export const FormItem: React.FC<FormItemProps> & {
   bottomId,
   noPadding,
   required = false,
+  disabled,
   ...restProps
 }: FormItemProps) => {
   const rootEl = useExternRef(getRootRef);
@@ -161,6 +162,7 @@ export const FormItem: React.FC<FormItemProps> & {
             removePlaceholder={removePlaceholder}
             indent={removable === 'indent'}
             noPadding={noPadding}
+            disabled={disabled}
           >
             <div className={classNames(styles.removable, 'vkuiInternalFormItem__removable')}>
               {wrappedChildren}

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -45,6 +45,7 @@ export const FormLayoutGroup = ({
   removePlaceholder = 'Удалить',
   onRemove,
   getRootRef,
+  disabled,
   ...restProps
 }: FormLayoutGroupProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
@@ -64,6 +65,7 @@ export const FormLayoutGroup = ({
         isRemovable && classNames(styles.withRemovable, 'vkuiInternalFormLayoutGroup--removable'),
         segmented && classNames(styles.segmented, 'vkuiInternalFormLayoutGroup--segmented'),
       )}
+      disabled={disabled}
       {...restProps}
     >
       {isRemovable ? (
@@ -76,6 +78,7 @@ export const FormLayoutGroup = ({
               onRemove?.(e, rootEl.current);
             }
           }}
+          disabled={disabled}
           indent={removable === 'indent'}
         >
           {children}

package/src/components/Search/Search.tsx

@@ -13,7 +13,7 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { callMultiple } from '../../lib/callMultiple';
 import { touchEnabled } from '../../lib/touch';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import type { HasRef, HasRootRef } from '../../types';
+import type { HasDataAttribute, HasRef, HasRootRef } from '../../types';
 import { Button } from '../Button/Button';
 import { IconButton, type IconButtonProps } from '../IconButton/IconButton';
 import { Headline } from '../Typography/Headline/Headline';
@@ -22,8 +22,8 @@ import styles from './Search.module.css';
 
 export type RenderIconButtonFn = (
   icon: React.ReactNode,
-  props?: Partial<IconButtonProps>,
-) => React.ReactNode;
+  props?: Partial<IconButtonProps> & HasDataAttribute,
+) => React.ReactElement;
 
 export interface SearchProps
   extends React.InputHTMLAttributes<HTMLInputElement>,

package/src/components/Touch/Touch.tsx

@@ -1,9 +1,11 @@
 'use client';
 
 import * as React from 'react';
+import { useExternRef } from '../../hooks/useExternRef';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import { getWindow, isHTMLElement, isSVGElement } from '../../lib/dom';
 import { coordX, coordY, touchEnabled, type VKUITouchEvent } from '../../lib/touch';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasComponent, HasRootRef } from '../../types';
 
 /**
@@ -228,6 +230,7 @@ export const Touch = ({
   stopPropagation = false,
   ...restProps
 }: TouchProps) => {
+  const hostRef = useExternRef(getRootRef);
   const [isTouchEnabled] = React.useState(touchEnabled);
   const gestureRef = React.useRef<Gesture | null>(null);
   const didSlide = React.useRef(false);
@@ -329,58 +332,58 @@ export const Touch = ({
     }
   });
 
-  const handlePointerDown = (
-    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>,
-  ) => {
-    const nativeEvent = event.nativeEvent;
-
-    gestureRef.current = initGesture(coordX(nativeEvent), coordY(nativeEvent));
-
-    const shouldCallDirectionHandlerOnlyIsSlide = false;
-    dispatchUserHandlers(
-      event,
-      gestureRef.current,
-      [onStart, onStartX, onStartY],
-      stopPropagation,
-      shouldCallDirectionHandlerOnlyIsSlide,
-    );
-
-    const eventOptions = { capture: useCapture, passive: false };
-
-    // FIXME: заменить touch/mouse-события ниже на pointer-события после того, как бразуеры из
-    // .browserslistrc начнут поддерживать его (см. https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#browser_compatibility).
-    if (isTouchEnabled) {
-      if (isHTMLElement(event.target) || isSVGElement(event.target)) {
-        // Тач-события не всплывают, поэтому навешиваем события на целевой элемент
-        // см. #235, #1968, https://stackoverflow.com/a/45760014
-        const target: HTMLorSVGElementWithEvents = event.target;
-
-        target.addEventListener('touchmove', handleNativePointerMove, eventOptions);
-        target.addEventListener('touchend', handleNativePointerUp, eventOptions);
-        target.addEventListener('touchcancel', handleNativePointerUp, eventOptions);
+  const handlePointerDown = useStableCallback(
+    (event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement> | TouchEvent) => {
+      const nativeEvent = 'nativeEvent' in event ? event.nativeEvent : event;
+
+      gestureRef.current = initGesture(coordX(nativeEvent), coordY(nativeEvent));
+
+      const shouldCallDirectionHandlerOnlyIsSlide = false;
+      dispatchUserHandlers(
+        event,
+        gestureRef.current,
+        [onStart, onStartX, onStartY],
+        stopPropagation,
+        shouldCallDirectionHandlerOnlyIsSlide,
+      );
+
+      const eventOptions = { capture: useCapture, passive: false };
+
+      // FIXME: заменить touch/mouse-события ниже на pointer-события после того, как бразуеры из
+      // .browserslistrc начнут поддерживать его (см. https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#browser_compatibility).
+      if (isTouchEnabled) {
+        if (isHTMLElement(event.target) || isSVGElement(event.target)) {
+          // Тач-события не всплывают, поэтому навешиваем события на целевой элемент
+          // см. #235, #1968, https://stackoverflow.com/a/45760014
+          const target: HTMLorSVGElementWithEvents = event.target;
+
+          target.addEventListener('touchmove', handleNativePointerMove, eventOptions);
+          target.addEventListener('touchend', handleNativePointerUp, eventOptions);
+          target.addEventListener('touchcancel', handleNativePointerUp, eventOptions);
+
+          disposeTargetNativeGestureEvents.current = () => {
+            target.removeEventListener('touchmove', handleNativePointerMove, eventOptions);
+            target.removeEventListener('touchend', handleNativePointerUp, eventOptions);
+            target.removeEventListener('touchcancel', handleNativePointerUp, eventOptions);
+          };
+        }
+      } else {
+        // Используем события на Document, т.к. mouse-события на целевом элементе могут теряться при
+        // выходе за границы этого элемента.
+        const doc = getWindow(event.currentTarget).document;
+
+        doc.addEventListener('mousemove', handleNativePointerMove, eventOptions);
+        doc.addEventListener('mouseup', handleNativePointerUp, eventOptions);
+        doc.addEventListener('mouseleave', handleNativePointerUp, eventOptions);
 
         disposeTargetNativeGestureEvents.current = () => {
-          target.removeEventListener('touchmove', handleNativePointerMove, eventOptions);
-          target.removeEventListener('touchend', handleNativePointerUp, eventOptions);
-          target.removeEventListener('touchcancel', handleNativePointerUp, eventOptions);
+          doc.removeEventListener('mousemove', handleNativePointerMove, eventOptions);
+          doc.removeEventListener('mouseup', handleNativePointerUp, eventOptions);
+          doc.removeEventListener('mouseleave', handleNativePointerUp, eventOptions);
         };
       }
-    } else {
-      // Используем события на Document, т.к. mouse-события на целевом элементе могут теряться при
-      // выходе за границы этого элемента.
-      const doc = getWindow(event.currentTarget).document;
-
-      doc.addEventListener('mousemove', handleNativePointerMove, eventOptions);
-      doc.addEventListener('mouseup', handleNativePointerUp, eventOptions);
-      doc.addEventListener('mouseleave', handleNativePointerUp, eventOptions);
-
-      disposeTargetNativeGestureEvents.current = () => {
-        doc.removeEventListener('mousemove', handleNativePointerMove, eventOptions);
-        doc.removeEventListener('mouseup', handleNativePointerUp, eventOptions);
-        doc.removeEventListener('mouseleave', handleNativePointerUp, eventOptions);
-      };
-    }
-  };
+    },
+  );
 
   const handlePointerEnter = onEnter
     ? (event: React.MouseEvent<HTMLElement>) => onEnter(event.nativeEvent)
@@ -421,10 +424,27 @@ export const Touch = ({
     didSlide.current = false;
   };
 
+  useIsomorphicLayoutEffect(
+    function initializeNativeTouchStartEventWithPassiveFalse() {
+      const hostEl = hostRef.current;
+      if (!hostEl || !isTouchEnabled) {
+        return;
+      }
+
+      const options = { capture: useCapture, passive: false };
+      hostEl.addEventListener('touchstart', handlePointerDown, options);
+
+      return () => {
+        hostEl.removeEventListener('touchstart', handlePointerDown, options);
+      };
+    },
+    [hostRef, isTouchEnabled, useCapture, handlePointerDown],
+  );
+
   return (
     <Component
       {...restProps}
-      ref={getRootRef}
+      ref={hostRef}
       onDragStart={handleDragStart}
       onClickCapture={handleClickCapture}
       // onEnter
@@ -433,9 +453,7 @@ export const Touch = ({
       // onLeave
       onPointerLeave={usePointerHover ? handlePointerLeave : undefined}
       onMouseLeave={!usePointerHover ? handlePointerLeave : undefined}
-      // handlePointerDown
-      onTouchStartCapture={isTouchEnabled && useCapture ? handlePointerDown : undefined}
-      onTouchStart={isTouchEnabled && !useCapture ? handlePointerDown : undefined}
+      // handlePointerDown (onTouchStart устанавливается отдельно через initializeNativeTouchEventStartWithPassiveFalse)
       onMouseDownCapture={!isTouchEnabled && useCapture ? handlePointerDown : undefined}
       onMouseDown={!isTouchEnabled && !useCapture ? handlePointerDown : undefined}
     />

package/src/components/WriteBar/WriteBar.module.css

@@ -38,8 +38,15 @@
   border: 0;
 }
 
+.textarea:placeholder-shown {
+  text-overflow: ellipsis;
+}
+
 .textarea::placeholder {
+  overflow: hidden;
+  text-overflow: ellipsis;
   color: var(--vkui--color_text_subhead);
+  white-space: nowrap;
   /* Для Firefox */
   opacity: 1;
 }

package/src/components/WriteBar/WriteBar.module.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["./WriteBar.module.css"],"names":["host","shadow","before","form","after","formIn","textarea","inlineAfter","ios"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,Q,WAJA;AAAA,E,aAQAC,Q,WARA;AAAA,E,aASAC,M,WATA;AAAA,E,aAUAC,O,WAVA;AAAA,E,aAeAD,M,WAfA;AAAA,E,aAmBAE,Q,WAnBA;AAAA,E,aA0BAC,U,WA1BA;AAAA,E,aAwCAA,U,WAxCA;AAAA,E,aA8CAA,U,WA9CA;AAAA,E,aAkDAC,a,WAlDA;AAAA,E,aAuDAL,Q,WAvDA;AAAA,E,aA2DAE,O,WA3DA;AAAA,E,aA+DAE,U,WA/DA;AAAA,E,aAwEAE,K,WAxEA;AAAA,E,aA4EAA,K,WA5EA;AAAA,E,aA4EKN,Q,WA5EL;AAAA,E,aA6EAM,K,WA7EA;AAAA,E,aA6EKJ,O,WA7EL;AAAA,E,aAkFAI,K,WAlFA;AAAA,E,aAkFKH,Q,WAlFL;AAAA,E,aA2FAG,K,WA3FA;AAAA,E,aA2FKH,Q,WA3FL;AAAA,E,aA+FAG,K,WA/FA;AAAA,E,aA+FKD,a,WA/FL;AAAA,E,aAwGAC,K,WAxGA;AAAA,E,aAwGKF,U,WAxGL;AAAA;AAAA","file":"WriteBar.module.css.d.ts","sourceRoot":""}
+{"version":3,"sources":["./WriteBar.module.css"],"names":["host","shadow","before","form","after","formIn","textarea","inlineAfter","ios"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,Q,WAJA;AAAA,E,aAQAC,Q,WARA;AAAA,E,aASAC,M,WATA;AAAA,E,aAUAC,O,WAVA;AAAA,E,aAeAD,M,WAfA;AAAA,E,aAmBAE,Q,WAnBA;AAAA,E,aA0BAC,U,WA1BA;AAAA,E,aAwCAA,U,WAxCA;AAAA,E,aA4CAA,U,WA5CA;AAAA,E,aAqDAA,U,WArDA;AAAA,E,aAyDAC,a,WAzDA;AAAA,E,aA8DAL,Q,WA9DA;AAAA,E,aAkEAE,O,WAlEA;AAAA,E,aAsEAE,U,WAtEA;AAAA,E,aA+EAE,K,WA/EA;AAAA,E,aAmFAA,K,WAnFA;AAAA,E,aAmFKN,Q,WAnFL;AAAA,E,aAoFAM,K,WApFA;AAAA,E,aAoFKJ,O,WApFL;AAAA,E,aAyFAI,K,WAzFA;AAAA,E,aAyFKH,Q,WAzFL;AAAA,E,aAkGAG,K,WAlGA;AAAA,E,aAkGKH,Q,WAlGL;AAAA,E,aAsGAG,K,WAtGA;AAAA,E,aAsGKD,a,WAtGL;AAAA,E,aA+GAC,K,WA/GA;AAAA,E,aA+GKF,U,WA/GL;AAAA;AAAA","file":"WriteBar.module.css.d.ts","sourceRoot":""}