@udixio/ui-react 2.7.0 → 2.8.1

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

@@ -5,5 +5,5 @@ import { ReactProps } from '../utils/component';
  * @status beta
  * @category Action
  */
-export declare const FabMenu: ({ className, label, variant, size, href, type, icon, extended, ref, transition, children, open: openProp, defaultOpen, onOpenChange, ...restProps }: ReactProps<FabMenuInterface>) => import("react/jsx-runtime").JSX.Element;
+export declare const FabMenu: ({ className, label, variant, size, href, icon, extended, ref, transition, children, open: openProp, defaultOpen, onOpenChange, ...restProps }: ReactProps<FabMenuInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FabMenu.d.ts.map

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,qJAgBrB,UAAU,CAAC,gBAAgB,CAAC,4CAmM9B,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;AAShD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,+IAerB,UAAU,CAAC,gBAAgB,CAAC,4CAoM9B,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/dist/lib/styles/fab.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fab.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/fab.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAoC3D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8DAAoD,CAAC;AAE1E,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;6DAAsD,CAAC"}
+{"version":3,"file":"fab.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/fab.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAwC3D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8DAAoD,CAAC;AAE1E,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;6DAAsD,CAAC"}

package/package.json

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

package/src/lib/components/FabMenu.tsx

@@ -21,7 +21,6 @@ export const FabMenu = ({
   variant = 'primary',
   size = 'medium',
   href,
-  type,
   icon,
   extended = false,
   ref,
@@ -105,6 +104,7 @@ export const FabMenu = ({
 
                 const variants = {
                   open: {
+                    overflow: 'visible',
                     opacity: 1,
                     width: 'auto',
                     transition: {
@@ -116,13 +116,14 @@ export const FabMenu = ({
                     },
                   },
                   close: {
+                    overflow: 'hidden',
                     opacity: 0,
                     width: 0,
                     transition: {
                       ...transition,
                       delay,
                       opacity: {
-                        duration: transition?.duration / 2,
+                        duration: transition?.duration / 1.5,
                       },
                     },
                   },
@@ -132,7 +133,6 @@ export const FabMenu = ({
                   <motion.div
                     initial={'close'}
                     animate={'open'}
-                    className={'overflow-hidden'}
                     variants={variants}
                     transition={transition}
                     exit={'close'}

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',

package/src/lib/styles/fab.style.ts

@@ -14,14 +14,14 @@ const fabConfig: ClassNameComponent<FabInterface> = ({
   fab: classNames(
     'flex shadow-3 hover:shadow-4 group/fab overflow-hidden outline-none items-center cursor-pointer',
     {
-      'rounded-[12px]': size == 'small' && !extended,
-      'rounded-[16px]': size == 'medium' || extended,
-      'rounded-[28px]': size == 'large' && !extended,
+      'rounded-[12px]': size == 'small',
+      'rounded-[16px]': size == 'medium',
+      'rounded-[28px]': size == 'large',
     },
     {
-      'p-2': size == 'small' && !extended,
-      'p-4': size == 'medium' || extended,
-      'p-[30px]': size == 'large' && !extended,
+      'p-2': size == 'small',
+      'p-4': size == 'medium',
+      'p-[30px]': size == 'large',
     },
     variant === 'primary' && 'bg-primary text-on-primary',
     variant === 'secondary' && 'bg-secondary text-on-secondary',
@@ -34,10 +34,14 @@ const fabConfig: ClassNameComponent<FabInterface> = ({
       'bg-tertiary-container text-on-tertiary-container',
   ),
   icon: classNames({
-    'size-6': size == 'small' || size == 'medium' || extended,
-    'size-9': size == 'large' && !extended,
+    'size-6': size == 'small' || size == 'medium',
+    'size-9': size == 'large',
+  }),
+  label: classNames('text-nowrap', {
+    'text-title-medium': size == 'small',
+    'text-title-large': size == 'medium',
+    'text-headline-small': size == 'large',
   }),
-  label: classNames('text-title-medium text-nowrap'),
 });
 
 export const fabStyle = defaultClassNames<FabInterface>('fab', fabConfig);