@udixio/ui-react 2.4.2 → 2.5.0

package/src/lib/components/CarouselItem.tsx

@@ -1,6 +1,5 @@
 import React, { useRef } from 'react';
 import { CarouselItemInterface } from '../interfaces';
-import { motion } from 'motion/react';
 import { carouselItemStyle } from '../styles';
 import { MotionProps } from '../utils';
 
@@ -26,8 +25,9 @@ export const normalize = (
 export const CarouselItem = ({
   className,
   children,
-  width = 1,
+  width,
   index = 0,
+  outputRange,
   ref: optionalRef,
   ...restProps
 }: MotionProps<CarouselItemInterface>) => {
@@ -37,14 +37,20 @@ export const CarouselItem = ({
   const styles = carouselItemStyle({
     className,
     index,
-    width: width,
+    width,
     children,
+    outputRange,
   });
 
   return (
-    <motion.div
+    <div
       ref={ref}
-      animate={{ width: width + 'px' }}
+      style={{
+        width: width + 'px',
+        maxWidth: outputRange[1] + 'px',
+        minWidth: outputRange[0] + 'px',
+        willChange: 'width',
+      }}
       transition={{
         duration: 0.5,
         ease: 'linear',
@@ -53,6 +59,6 @@ export const CarouselItem = ({
       {...restProps}
     >
       {children}
-    </motion.div>
+    </div>
   );
 };

package/src/lib/components/Slider.tsx

@@ -31,7 +31,7 @@ export const Slider = ({
   onChange,
   ...restProps
 }: ReactProps<SliderInterface>) => {
-  const getPourcentFromValue = (value: number) => {
+  const getpercentFromValue = (value: number) => {
     const min = getMin();
     const max = getMax();
 
@@ -56,10 +56,10 @@ export const Slider = ({
     return min == -Infinity ? marks[0].value : min;
   };
 
-  const getValueFromPourcent = (pourcent: number) => {
+  const getValueFrompercent = (percent: number) => {
     const min = getMin(false);
     const max = getMax(false);
-    return ((max - min) * pourcent) / 100 + min;
+    return ((max - min) * percent) / 100 + min;
   };
 
   const [isChanging, setIsChanging] = useState(false);
@@ -68,7 +68,7 @@ export const Slider = ({
     ref || defaultRef;
 
   const [value, setValue] = useState(defaultValue);
-  const [pourcent, setPourcent] = useState(getPourcentFromValue(defaultValue));
+  const [percent, setpercent] = useState(getpercentFromValue(defaultValue));
   const [mouseDown, setMouseDown] = useState(false);
   const handleMouseDown = (e: any) => {
     setMouseDown(true);
@@ -130,31 +130,31 @@ export const Slider = ({
           ? event.touches[0].clientX
           : event.clientX;
 
-      const pourcent = ((clientX - refPosition) / current.offsetWidth) * 100;
+      const percent = ((clientX - refPosition) / current.offsetWidth) * 100;
 
-      updateSliderValues({ pourcent });
+      updateSliderValues({ percent });
     }
   };
   const updateSliderValues = ({
-    pourcent,
+    percent,
     value,
   }: {
-    pourcent?: number;
+    percent?: number;
     value?: number;
   }) => {
-    if (pourcent) {
-      if (pourcent >= 100) {
+    if (percent) {
+      if (percent >= 100) {
         setValue(getMax(true));
-        setPourcent(100);
+        setpercent(100);
         return;
       }
-      if (pourcent <= 0) {
+      if (percent <= 0) {
         setValue(getMin(true));
-        setPourcent(0);
+        setpercent(0);
         return;
       }
 
-      value = getValueFromPourcent(pourcent);
+      value = getValueFrompercent(percent);
       if (value == getMin()) {
         value = getMin(true);
       }
@@ -164,15 +164,15 @@ export const Slider = ({
     } else if (value != undefined) {
       if (value >= getMax()) {
         setValue(getMax(true));
-        setPourcent(100);
+        setpercent(100);
         return;
       }
       if (value <= getMin()) {
         setValue(getMin(true));
-        setPourcent(0);
+        setpercent(0);
         return;
       }
-      pourcent = getPourcentFromValue(value);
+      percent = getpercentFromValue(value);
     } else {
       return;
     }
@@ -206,10 +206,10 @@ export const Slider = ({
       value = getMin(true);
     }
 
-    pourcent = getPourcentFromValue(value);
+    percent = getpercentFromValue(value);
 
     setValue(value);
-    setPourcent(pourcent);
+    setpercent(percent);
     if (onChange) {
       onChange(value);
     }
@@ -295,10 +295,7 @@ export const Slider = ({
       {...restProps}
     >
       <input type="hidden" name={name} value={value} />
-      <div
-        className={styles.activeTrack}
-        style={{ flex: pourcent / 100 }}
-      ></div>
+      <div className={styles.activeTrack} style={{ flex: percent / 100 }}></div>
       <div className={styles.handle}>
         <AnimatePresence>
           {isChanging && (
@@ -325,7 +322,7 @@ export const Slider = ({
       </div>
       <div
         className={styles.inactiveTrack}
-        style={{ flex: 1 - pourcent / 100 }}
+        style={{ flex: 1 - percent / 100 }}
       ></div>
       <div
         className={
@@ -338,11 +335,11 @@ export const Slider = ({
 
             const handleAndGapPercent =
               ((isChanging ? 9 : 10) / sliderWidth) * 100;
-            const markPercent = getPourcentFromValue(mark.value);
+            const markPercent = getpercentFromValue(mark.value);
 
-            if (markPercent <= pourcent - handleAndGapPercent) {
+            if (markPercent <= percent - handleAndGapPercent) {
               isUnderActiveTrack = true;
-            } else if (markPercent >= pourcent + handleAndGapPercent) {
+            } else if (markPercent >= percent + handleAndGapPercent) {
               isUnderActiveTrack = false;
             }
             return (
@@ -355,7 +352,7 @@ export const Slider = ({
                     isUnderActiveTrack != null && !isUnderActiveTrack,
                 })}
                 style={{
-                  left: `${getPourcentFromValue(mark.value)}%`,
+                  left: `${getpercentFromValue(mark.value)}%`,
                 }}
               ></div>
             );

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

@@ -1,10 +1,48 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { motion, useMotionValueEvent, useScroll } from 'motion/react';
-import { throttle } from 'throttle-debounce';
 import { CustomScrollInterface } from './custom-scroll.interface';
 import { customScrollStyle } from './custom-scroll.style';
 import { ReactProps } from '../../utils';
 
+// Throttle helper that guarantees execution of the latest call after the wait window (leading + trailing)
+function createScrollThrottle(
+  wait: number,
+  fn: (latestValue: number, scrollOrientation: 'x' | 'y') => void,
+) {
+  let lastInvokeTime = 0;
+  let trailingTimeout: ReturnType<typeof setTimeout> | null = null;
+  let lastArgs: { v: number; o: 'x' | 'y' } | null = null;
+
+  const invoke = (v: number, o: 'x' | 'y') => {
+    lastInvokeTime = Date.now();
+    fn(v, o);
+  };
+
+  return (v: number, o: 'x' | 'y') => {
+    const now = Date.now();
+    const remaining = wait - (now - lastInvokeTime);
+
+    if (remaining <= 0) {
+      if (trailingTimeout) {
+        clearTimeout(trailingTimeout);
+        trailingTimeout = null;
+      }
+      invoke(v, o);
+    } else {
+      // Save the latest call and schedule a trailing execution
+      lastArgs = { v, o };
+      if (!trailingTimeout) {
+        trailingTimeout = setTimeout(() => {
+          trailingTimeout = null;
+          const args = lastArgs;
+          lastArgs = null;
+          if (args) invoke(args.v, args.o);
+        }, remaining);
+      }
+    }
+  };
+}
+
 export const CustomScroll = ({
   children,
   orientation = 'vertical',
@@ -13,6 +51,8 @@ export const CustomScroll = ({
   className,
   draggable = false,
   throttleDuration = 75,
+  scroll,
+  setScroll,
 }: ReactProps<CustomScrollInterface>) => {
   const ref = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -87,7 +127,7 @@ export const CustomScroll = ({
   >(null);
 
   if (!handleScrollThrottledRef.current) {
-    handleScrollThrottledRef.current = throttle(
+    handleScrollThrottledRef.current = createScrollThrottle(
       throttleDuration,
       (latestValue, scrollOrientation: 'x' | 'y') => {
         if (
@@ -96,6 +136,12 @@ export const CustomScroll = ({
           !ref.current
         )
           return;
+
+        // Notify simple percentage if requested
+        if (scrollOrientation === (orientation === 'horizontal' ? 'x' : 'y')) {
+          setScroll?.(latestValue);
+        }
+
         if (onScroll) {
           if (orientation === 'horizontal' && scrollOrientation === 'x') {
             onScroll({
@@ -136,6 +182,22 @@ export const CustomScroll = ({
     if (dimensions.height) handleScroll(scrollYProgress.get(), 'y'); // Nouvelle ligne : mise à jour pour la hauteur
   }, [dimensions]);
 
+  // Apply controlled scroll percentage to DOM when provided
+  useEffect(() => {
+    const container = ref.current;
+    const content = contentRef.current;
+    if (!container || !content) return;
+    if (typeof scroll !== 'number') return;
+    const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));
+    if (orientation === 'horizontal') {
+      const total = Math.max(0, (scrollSize ?? content.scrollWidth) - container.clientWidth);
+      container.scrollLeft = clamp(scroll * total, 0, total);
+    } else {
+      const total = Math.max(0, (scrollSize ?? content.scrollHeight) - container.clientHeight);
+      container.scrollTop = clamp(scroll * total, 0, total);
+    }
+  }, [scroll, orientation, scrollSize]);
+
   useMotionValueEvent(scrollXProgress, 'change', (latestValue) => {
     handleScroll(latestValue, 'x');
   });
@@ -228,6 +290,53 @@ export const CustomScroll = ({
     };
   }, []);
 
+  // External controller: listen for bubbling custom event to set scroll programmatically
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const handler = (ev: Event) => {
+      const detail = (ev as CustomEvent).detail as
+        | { progress?: number; scroll?: number; orientation?: 'horizontal' | 'vertical' }
+        | undefined;
+      const container = ref.current;
+      if (!container || !detail) return;
+      const ori = detail.orientation ?? orientation;
+      if (typeof detail.progress === 'number') {
+        if (ori === 'horizontal') {
+          const total = Math.max(
+            0,
+            (contentScrollSize.current?.width ?? 0) - container.clientWidth,
+          );
+          container.scrollLeft = Math.min(total, Math.max(0, detail.progress * total));
+        } else {
+          const total = Math.max(
+            0,
+            (contentScrollSize.current?.height ?? 0) - container.clientHeight,
+          );
+          container.scrollTop = Math.min(total, Math.max(0, detail.progress * total));
+        }
+      } else if (typeof detail.scroll === 'number') {
+        if (ori === 'horizontal') {
+          const total = Math.max(
+            0,
+            (contentScrollSize.current?.width ?? 0) - container.clientWidth,
+          );
+          container.scrollLeft = Math.min(total, Math.max(0, detail.scroll));
+        } else {
+          const total = Math.max(
+            0,
+            (contentScrollSize.current?.height ?? 0) - container.clientHeight,
+          );
+          container.scrollTop = Math.min(total, Math.max(0, detail.scroll));
+        }
+      }
+    };
+    el.addEventListener('udx:customScroll:set', handler as EventListener);
+    return () => {
+      el.removeEventListener('udx:customScroll:set', handler as EventListener);
+    };
+  }, [orientation]);
+
   return (
     <div
       className={styles.customScroll}

package/src/lib/effects/custom-scroll/custom-scroll.interface.ts

@@ -10,6 +10,10 @@ type Props = {
     scrollTotal: number;
     scrollVisible: number;
   }) => void;
+  // Controlled percentage (0..1). If provided, the container will reflect this progress.
+  scroll?: number;
+  // Callback fired with the latest scroll percentage (0..1) when user scrolls/drags.
+  setScroll?: (progress: number) => void;
   draggable?: boolean;
   throttleDuration?: number;
 };

package/src/lib/interfaces/carousel-item.interface.ts

@@ -6,6 +6,7 @@ export interface CarouselItemInterface {
     children?: ReactNode | undefined;
     width?: number;
     index?: number;
+    outputRange?: [number, number];
   };
   elements: ['carouselItem'];
 }

package/src/lib/interfaces/carousel.interface.ts

@@ -1,15 +1,34 @@
 import { ReactElement } from 'react';
 import { CarouselItem } from '../components';
 
+export interface CarouselMetrics {
+  total: number;
+  selectedIndex: number;
+  visibleApprox: number; // fractional approximate number of visible items
+  visibleFull: number; // floored count of fully visible-width items
+  stepHalf: number; // suggested step = half of visibleFull (>=1)
+  canPrev: boolean;
+  canNext: boolean;
+  scrollProgress: number; // 0..1 (smoothed)
+  viewportWidth: number;
+  itemMaxWidth: number;
+  gap: number;
+}
+
 export interface CarouselInterface {
   type: 'div';
   props: {
     children?: ReactElement<typeof CarouselItem>[];
     marginPourcent?: number;
     onChange?: (index: number) => void;
+    /**
+     * Receive live metrics to better control the carousel externally
+     */
+    onMetricsChange?: (metrics: CarouselMetrics) => void;
+    index?: number; // Controlled index for programmatic centering
     variant?:
       | 'hero'
-      | 'center-aligned hero'
+      | 'center-aligned'
       | 'multi-browse'
       | 'un-contained'
       | 'full-screen';

package/src/lib/styles/carousel-item.style.ts

@@ -3,9 +3,12 @@ import { classNames, defaultClassNames } from '../utils';
 
 export const carouselItemStyle = defaultClassNames<CarouselItemInterface>(
   'carouselItem',
-  () => {
+  ({ width }) => {
     return {
-      carouselItem: classNames('rounded-[28px] overflow-hidden flex-none'),
+      carouselItem: classNames('rounded-[28px] overflow-hidden flex-none', {
+        hidden: width === undefined,
+        'flex-1': width == null,
+      }),
     };
   },
 );

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

@@ -5,8 +5,6 @@ export const carouselStyle = defaultClassNames<CarouselInterface>(
   'carousel',
   () => ({
     carousel: classNames(['w-full h-[400px]']),
-    track: classNames(
-      'grid grid-flow-col h-full transition-transform  ease-out w-fit',
-    ),
+    track: classNames('flex h-full w-full'),
   }),
 );

package/src/lib/styles/icon-button.style.ts

@@ -20,31 +20,21 @@ export const iconButtonStyle = defaultClassNames<IconButtonInterface>(
         {
           'cursor-default': disabled,
         },
-        (shape === 'rounded' ||
-          (shape === 'squared' &&
-            onToggle &&
-            !disabled &&
-            isActive &&
-            allowShapeTransformation)) && {
+        shape === 'rounded' && {
           'rounded-[30px]': size === 'xSmall' || size == 'small',
           'rounded-[40px]': size === 'medium',
           'rounded-[70px]': size === 'large' || size == 'xLarge',
         },
-        (shape === 'squared' ||
-          (shape === 'rounded' &&
-            onToggle &&
-            !disabled &&
-            isActive &&
-            allowShapeTransformation)) && {
+        (shape === 'squared' || (allowShapeTransformation && isActive)) && {
           'rounded-[12px]': size === 'xSmall' || size == 'small',
           'rounded-[16px]': size === 'medium',
           'rounded-[28px]': size === 'large' || size == 'xLarge',
         },
         allowShapeTransformation &&
           !disabled && {
-            'group-active:rounded-[12px]': size === 'xSmall' || size == 'small',
-            'group-active:rounded-[16px]': size === 'medium',
-            'group-active:rounded-[28px]': size === 'large' || size == 'xLarge',
+            'active:rounded-[12px]': size === 'xSmall' || size == 'small',
+            'active:rounded-[16px]': size === 'medium',
+            'active:rounded-[28px]': size === 'large' || size == 'xLarge',
           },
         variant === 'filled' && [
           !disabled && {

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

@@ -14,7 +14,7 @@ export const sliderStyle = defaultClassNames<SliderInterface>(
       'h-4 relative transition-all duration-100 bg-primary-container rounded-r-full overflow-hidden',
     ]),
     handle: classNames([
-      'transform transition-all duration-100 bg-primary h-full rounded-full ',
+      'transform relative transition-all duration-100 bg-primary h-full rounded-full ',
       { 'w-0.5': isChanging, 'w-1': !isChanging },
     ]),
     valueIndicator: classNames([