@udixio/ui-react 2.8.0 → 2.8.2

package/dist/lib/components/FabMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FabMenu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FabMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAShD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,+IAerB,UAAU,CAAC,gBAAgB,CAAC,4CAoM9B,CAAC"}
+{"version":3,"file":"FabMenu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/FabMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAUhD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,+IAerB,UAAU,CAAC,gBAAgB,CAAC,4CAsM9B,CAAC"}

package/dist/lib/effects/block-scroll.effect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block-scroll.effect.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/block-scroll.effect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,KAAK,YAAY,GACb;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,KAAK,CAAC;CACtB,GACD;IACE,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEN,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,EAAE,EAAE,WAAW,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqJlD,CAAC"}
+{"version":3,"file":"block-scroll.effect.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/block-scroll.effect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,KAAK,YAAY,GACb;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,MAAM,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,KAAK,CAAC;CACtB,GACD;IACE,IAAI,EAAE,WAAW,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEN,KAAK,gBAAgB,GAAG;IACtB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,EAAE,EAAE,WAAW,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkNlD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/lib/components/FabMenu.tsx

@@ -9,6 +9,7 @@ import { classNames } from '../utils';
 import { IconButton } from './IconButton';
 import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { AnimatePresence, motion } from 'motion/react';
+import { v4 } from 'uuid';
 
 /**
  * Floating action buttons (FABs) help people take primary actions
@@ -88,6 +89,8 @@ export const FabMenu = ({
     />
   );
 
+  const [uuid] = useState(v4());
+
   return (
     <div className={styles.fabMenu} ref={resolvedRef} {...restProps}>
       <AnimatePresence>
@@ -179,13 +182,13 @@ export const FabMenu = ({
           renderFab({
             className: '',
             layout: true,
-            layoutId: 'fab-menu',
+            layoutId: 'fab-menu' + uuid,
           })}
         {open && (
           <>
             <MotionIconButton
               layout
-              layoutId="fab-menu"
+              layoutId={'fab-menu' + uuid}
               variant={'filled'}
               className={() => ({
                 iconButton: classNames('', {

package/src/lib/effects/block-scroll.effect.tsx

@@ -43,7 +43,46 @@ export const BlockScroll: React.FC<BlockScrollProps> = ({
       onScroll?.(payload);
     };
 
+    const findScrollableParent = (
+      node: HTMLElement | null,
+    ): HTMLElement | null => {
+      let elNode: HTMLElement | null = node;
+      while (
+        elNode &&
+        elNode !== document.body &&
+        elNode !== document.documentElement
+      ) {
+        const style = window.getComputedStyle(elNode);
+        const overflowY = style.overflowY || style.overflow;
+        const isScrollableY =
+          (overflowY === 'auto' || overflowY === 'scroll') &&
+          elNode.scrollHeight > elNode.clientHeight;
+        if (isScrollableY) return elNode;
+        elNode = elNode.parentElement;
+      }
+      return null;
+    };
+
     const onWheel = (e: WheelEvent) => {
+      // Auto-detect closest scrollable ancestor and allow native scroll when it can handle the intent
+      const target = e.target as HTMLElement | null;
+
+      const scrollableParent = findScrollableParent(target);
+
+      if (scrollableParent && scrollableParent !== el) {
+        const canScrollDown =
+          scrollableParent.scrollTop <
+          scrollableParent.scrollHeight - scrollableParent.clientHeight;
+        const canScrollUp = scrollableParent.scrollTop > 0;
+
+        // Wheel: positive deltaY => scroll down, negative => scroll up
+        if ((e.deltaY > 0 && canScrollDown) || (e.deltaY < 0 && canScrollUp)) {
+          // Let the native scrolling happen inside the scrollable element
+          return;
+        }
+      }
+
+      // Otherwise, block native scroll and emit intent for global smooth scroll
       e.preventDefault();
       emitIntent({
         type: 'intent',
@@ -64,9 +103,31 @@ export const BlockScroll: React.FC<BlockScrollProps> = ({
       if (!touch) return;
       const t = e.touches[0];
       if (!t || !lastTouch.current) return;
-      e.preventDefault();
+
       const dx = lastTouch.current.x - t.clientX;
       const dy = lastTouch.current.y - t.clientY;
+
+      // Auto-detect closest scrollable ancestor for touch and allow native scroll when possible
+      const target = e.target as HTMLElement | null;
+
+      const scrollableParent = findScrollableParent(target);
+
+      if (scrollableParent && scrollableParent !== el) {
+        const canScrollDown =
+          scrollableParent.scrollTop <
+          scrollableParent.scrollHeight - scrollableParent.clientHeight;
+        const canScrollUp = scrollableParent.scrollTop > 0;
+
+        // Touch: dy > 0 means user moves finger up -> intent to scroll down
+        if ((dy > 0 && canScrollDown) || (dy < 0 && canScrollUp)) {
+          // Update last touch and allow native scroll inside the element
+          lastTouch.current = { x: t.clientX, y: t.clientY };
+          return;
+        }
+      }
+
+      // Otherwise block and emit intent for global smooth scroll
+      e.preventDefault();
       lastTouch.current = { x: t.clientX, y: t.clientY };
       emitIntent({
         type: 'intent',