@pushwoosh/dumb-components 2.9.14 → 2.9.16

package/Combobox/types.d.ts

@@ -54,7 +54,7 @@ type CommonProps<T> = {
     width?: string;
     /** Minimum CSS width, useful together with `autosize`. */
     minWidth?: string;
-    /** Let the dropdown stretch to the field width instead of capping at the default width (use for wide, full-width fields). */
+    /** Make the dropdown exactly as wide as the field instead of capping at the default width. */
     fullWidth?: boolean;
 };
 /**

package/ComboboxMulti/types.d.ts

@@ -57,7 +57,7 @@ export type ComboboxMultiProps<T> = ItemsSource<T> & GetKeyProp<T> & CreatablePr
     width?: string;
     /** Minimum CSS width, useful together with `autosize`. */
     minWidth?: string;
-    /** Let the dropdown stretch to the field width instead of capping at the default width (use for wide, full-width fields). */
+    /** Make the dropdown exactly as wide as the field instead of capping at the default width. */
     fullWidth?: boolean;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "2.9.14",
+  "version": "2.9.16",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/shared/dropdownField/SuggestionsDropdown.js

@@ -5,6 +5,7 @@ import { CreateItemLabel, Dropdown, DropdownEmpty, DropdownItem, DropdownLoading
 import { Spinner } from '../../Spinner';
 const LOAD_MORE_THRESHOLD = 24;
 const CREATE_KEY = '__create__';
+const TOUCH_SCROLL_THRESHOLD = 8;
 /**
  * Internal floating option list shared by the Combobox family: renders the rows,
  * empty/loading text, an optional "create" row and load-more support.
@@ -34,10 +35,44 @@ export function SuggestionsDropdown({
   const activeItem = items.find(item => item.active);
   const activeKey = createActive ? CREATE_KEY : activeItem?.key ?? null;
   useEffect(() => {
-    if (activeKey === null) return;
-    activeItemRef.current?.scrollIntoView({
+    if (activeKey === null) return undefined;
+    const scrollToActive = () => activeItemRef.current?.scrollIntoView({
       block: 'nearest'
     });
+    scrollToActive();
+    const list = activeItemRef.current?.parentElement;
+    if (!list || typeof ResizeObserver === 'undefined') return undefined;
+    const observer = new ResizeObserver(scrollToActive);
+    const stopFollowing = () => observer.disconnect();
+    const onScrollbarPointerDown = event => {
+      if (event.target === list) stopFollowing();
+    };
+    let touchStartY = null;
+    const onTouchStart = event => {
+      touchStartY = event.touches[0]?.clientY ?? null;
+    };
+    const onTouchMove = event => {
+      const y = event.touches[0]?.clientY;
+      if (touchStartY !== null && y !== undefined && Math.abs(y - touchStartY) > TOUCH_SCROLL_THRESHOLD) stopFollowing();
+    };
+    observer.observe(list);
+    list.addEventListener('wheel', stopFollowing, {
+      passive: true
+    });
+    list.addEventListener('touchstart', onTouchStart, {
+      passive: true
+    });
+    list.addEventListener('touchmove', onTouchMove, {
+      passive: true
+    });
+    list.addEventListener('pointerdown', onScrollbarPointerDown);
+    return () => {
+      observer.disconnect();
+      list.removeEventListener('wheel', stopFollowing);
+      list.removeEventListener('touchstart', onTouchStart);
+      list.removeEventListener('touchmove', onTouchMove);
+      list.removeEventListener('pointerdown', onScrollbarPointerDown);
+    };
   }, [activeKey]);
   if (typeof document === 'undefined') return null;
   const isEmpty = !loading && items.length === 0 && !createLabel;

package/shared/dropdownField/constants.d.ts

@@ -2,7 +2,7 @@ import { Color } from '@pushwoosh/kit-constants';
 export declare const LOADING_BORDER_COLORS: readonly [Color.PRIMARY, Color.BRIGHT, Color.BRAND_GREEN, Color.EXCEPTIONAL];
 export declare const LOADING_BORDER_ANIMATION_MS = 3000;
 export declare const DROPDOWN_MAX_HEIGHT = 300;
-/** Default dropdown width cap. A field wider than this stretches the dropdown to its own width only when the field opts in via `fullWidth`; otherwise the dropdown stays capped here. */
+/** Default dropdown width cap. With `fullWidth` the dropdown matches the field width instead. */
 export declare const DROPDOWN_DEFAULT_WIDTH = 320;
 /** Default debounce (ms) before an async `loadItems` call fires after the query changes. */
 export declare const DEFAULT_DEBOUNCE_MS = 250;

package/shared/dropdownField/constants.js

@@ -2,7 +2,7 @@ import { Color } from '@pushwoosh/kit-constants';
 export const LOADING_BORDER_COLORS = [Color.PRIMARY, Color.BRIGHT, Color.BRAND_GREEN, Color.EXCEPTIONAL];
 export const LOADING_BORDER_ANIMATION_MS = 3000;
 export const DROPDOWN_MAX_HEIGHT = 300;
-/** Default dropdown width cap. A field wider than this stretches the dropdown to its own width only when the field opts in via `fullWidth`; otherwise the dropdown stays capped here. */
+/** Default dropdown width cap. With `fullWidth` the dropdown matches the field width instead. */
 export const DROPDOWN_DEFAULT_WIDTH = 320;
 /** Default debounce (ms) before an async `loadItems` call fires after the query changes. */
 export const DEFAULT_DEBOUNCE_MS = 250;

package/shared/dropdownField/useDropdownPosition.d.ts

@@ -6,7 +6,7 @@ type Args = {
 /**
  * Positions the dropdown relative to the field via floating-ui (flip, offset,
  * width/height sizing) and wires click-outside to `onClickOutside`. With
- * `fullWidth` the dropdown stretches to the field width instead of capping at
+ * `fullWidth` the dropdown is exactly as wide as the field instead of capping at
  * `DROPDOWN_DEFAULT_WIDTH`.
  */
 export declare function useDropdownPosition({ isOpen, onClickOutside, fullWidth }: Args): {

package/shared/dropdownField/useDropdownPosition.js

@@ -4,7 +4,7 @@ import { useOnClickOutside } from '../../hooks';
 /**
  * Positions the dropdown relative to the field via floating-ui (flip, offset,
  * width/height sizing) and wires click-outside to `onClickOutside`. With
- * `fullWidth` the dropdown stretches to the field width instead of capping at
+ * `fullWidth` the dropdown is exactly as wide as the field instead of capping at
  * `DROPDOWN_DEFAULT_WIDTH`.
  */
 export function useDropdownPosition({
@@ -27,7 +27,7 @@ export function useDropdownPosition({
         availableHeight
       }) {
         const fieldWidth = rects.reference.width;
-        const maxWidth = fullWidth ? Math.min(Math.max(fieldWidth, DROPDOWN_DEFAULT_WIDTH), availableWidth) : Math.min(DROPDOWN_DEFAULT_WIDTH, availableWidth);
+        const maxWidth = Math.min(fullWidth ? fieldWidth : DROPDOWN_DEFAULT_WIDTH, availableWidth);
         const minWidth = Math.min(fieldWidth, maxWidth);
         Object.assign(elements.floating.style, {
           minWidth: `${minWidth}px`,