@udixio/ui-react 2.9.6 → 2.9.7

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,4MAqBlB,UAAU,CAAC,aAAa,CAAC,4CA0S3B,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,4MAqBlB,UAAU,CAAC,aAAa,CAAC,4CA2S3B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Chips.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAY,cAAc,EAAE,MAAM,eAAe,CAAC;AAMzD,eAAO,MAAM,KAAK,GAAI,sEAOnB,UAAU,CAAC,cAAc,CAAC,4CAwQ5B,CAAC"}
+{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Chips.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAY,cAAc,EAAE,MAAM,eAAe,CAAC;AAMzD,eAAO,MAAM,KAAK,GAAI,sEAOnB,UAAU,CAAC,cAAc,CAAC,4CAiT5B,CAAC"}

package/dist/lib/effects/smooth-scroll.effect.d.ts

@@ -1,14 +1,38 @@
-import { CustomScrollInterface } from './custom-scroll';
-import { ReactProps } from '../utils';
+import { ReactNode } from 'react';
+export type SmoothScrollProps = {
+    /**
+     * Duration of the scroll animation in seconds or as a CSS string (e.g., '1s', '500ms').
+     * Default: 1.2
+     */
+    transition?: number | string;
+    /**
+     * Easing function for the scroll animation.
+     * Default: easeOutQuint
+     */
+    easing?: (t: number) => number;
+    /**
+     * Scroll orientation.
+     * Default: 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * Enable smooth scrolling on touch devices.
+     * Default: false (native touch scrolling is usually preferred)
+     */
+    smoothTouch?: boolean;
+    /**
+     * Multiplier for touch scroll sensitivity.
+     * Default: 2
+     */
+    touchMultiplier?: number;
+    /**
+     * Children elements (optional, component works at document level)
+     */
+    children?: ReactNode;
+};
 /**
- * WARNING: using this component is not recommended for now.
- * It may block or alter certain scroll events (wheel/touch/keyboard) depending on the context.
- * Rework it later (e.g., via Lenis or another solution) before using it in production.
+ * SmoothScroll component using Lenis for smooth scrolling.
+ * This component enables smooth scrolling at the document level.
  */
-export declare const SmoothScroll: ({ transition, orientation, throttleDuration, }: {
-    transition?: {
-        ease: "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | ((t: number) => number);
-        duration?: number;
-    };
-} & ReactProps<CustomScrollInterface>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SmoothScroll: ({ transition, easing, orientation, smoothTouch, touchMultiplier, children, }: SmoothScrollProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=smooth-scroll.effect.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"smooth-scroll.effect.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/smooth-scroll.effect.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,gDAI1B;IACD,UAAU,CAAC,EAAE;QACX,IAAI,EACA,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,WAAW,GACX,YAAY,GACZ,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;QAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,GAAG,UAAU,CAAC,qBAAqB,CAAC,mDA6GpC,CAAC"}
+{"version":3,"file":"smooth-scroll.effect.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/smooth-scroll.effect.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,8EAO1B,iBAAiB,mDAmDnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.9.6",
+  "version": "2.9.7",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -28,6 +28,7 @@
     "motion": "^12.23.0",
     "tailwind-merge": "^3.3.1",
     "uuid": "^11.0.3",
+    "lenis": "^1.2.3",
     "@fortawesome/fontawesome-svg-core": "^7.0.0",
     "@fortawesome/free-regular-svg-icons": "^7.0.0",
     "@fortawesome/free-solid-svg-icons": "^7.0.0",
@@ -36,8 +37,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/theme": "2.1.9",
-    "@udixio/tailwind": "2.4.7"
+    "@udixio/theme": "2.1.10",
+    "@udixio/tailwind": "2.4.8"
   },
   "repository": {
     "type": "git",

package/src/lib/components/Chip.tsx

@@ -114,7 +114,8 @@ export const Chip = ({
     }
   };
 
-  const isInteractive = !!onToggle || !!onRemove || !!onClick || !!href;
+  const isInteractive =
+    !!onToggle || !!onRemove || !!onClick || !!href || !!editable;
 
   if (activated) {
     icon = faCheck;

package/src/lib/components/Chips.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { ReactProps } from '../utils';
 import { ChipItem, ChipsInterface } from '../interfaces';
 import { useChipsStyle } from '../styles';
@@ -34,12 +34,19 @@ export const Chips = ({
 
   React.useEffect(() => {
     if (isFocused) {
-      ref.current?.focus();
+      if (variant == 'input') {
+        ghostChipRef.current?.focus();
+      } else {
+        ref.current?.focus();
+      }
     }
   }, [isFocused]);
 
   const chipRefs = React.useRef<(HTMLElement | null)[]>([]);
 
+  // Guard to prevent multiple chip creation from fast typing
+  const isCreatingRef = React.useRef(false);
+
   const updateItems = React.useCallback(
     (updater: (prev: ChipItem[]) => ChipItem[]) => {
       onItemsChange?.(updater(list));
@@ -64,6 +71,10 @@ export const Chips = ({
     (seedLabel = '') => {
       if (variant !== 'input') return;
 
+      // Guard against multiple rapid creations
+      if (isCreatingRef.current) return;
+      isCreatingRef.current = true;
+
       const newItem: ChipItem = {
         label: seedLabel,
       } as ChipItem;
@@ -77,6 +88,8 @@ export const Chips = ({
 
       requestAnimationFrame(() => {
         setSelectedChip(newId);
+        // Reset guard after chip is selected
+        isCreatingRef.current = false;
       });
     },
     [variant, onItemsChange, list, getInternalId],
@@ -102,6 +115,11 @@ export const Chips = ({
   }, [selectedChip, list, getInternalId]);
 
   // MODE ITEMS (source de vérité locale ou contrôlée)
+
+  const ghostChipRef = useRef<HTMLButtonElement>(null);
+
+  const isGhostChip = (isFocused || list.length === 0) && variant === 'input';
+
   return (
     <div
       ref={ref}
@@ -114,7 +132,9 @@ export const Chips = ({
           setIsFocused(true);
         }
       }}
-      onBlur={() => setIsFocused(false)}
+      onBlur={() => {
+        setIsFocused(false);
+      }}
       onKeyDown={(e) => {
         if (variant !== 'input') return;
 
@@ -160,13 +180,7 @@ export const Chips = ({
           setSelectedChip(elId);
           return;
         }
-
         if (isContainerFocused) {
-          if (key === 'Enter') {
-            e.preventDefault();
-            createAndStartEdit('');
-            return;
-          }
           if (key === 'Backspace') {
             e.preventDefault();
             // Focus last chip if any
@@ -176,12 +190,6 @@ export const Chips = ({
             }
             return;
           }
-          // Start creation when typing a printable character
-          if (key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
-            createAndStartEdit(key);
-            e.preventDefault();
-            return;
-          }
         }
       }}
     >
@@ -203,7 +211,7 @@ export const Chips = ({
               onEditCancel: () => {
                 setIsFocused(true);
               },
-              onChange: (next: ChipItem[]) => {
+              onChange: () => {
                 if (chipRefs.current.length == index + 1) {
                   const el = ref.current!;
                   requestAnimationFrame(() => {
@@ -275,6 +283,39 @@ export const Chips = ({
           </style>
         </>
       )}
+      {isGhostChip && (
+        <Chip
+          ref={ghostChipRef}
+          className="opacity-0"
+          draggable={draggable}
+          editable={true}
+          editing={true}
+          onChange={(v) => {
+            v = v.replace(/(&nbsp;)+/g, ' ').trim();
+            console.log('Ghost chip onChange', v, !!v);
+            if (v) {
+              createAndStartEdit(v);
+            } else {
+              if (list.length > 0) {
+                const el = chipRefs.current[list.length - 1] as any;
+                el?.focus?.();
+              }
+            }
+          }}
+          onEditCommit={() => {
+            // Ghost chip doesn't commit - it creates a new chip via onChange
+          }}
+          onBlur={() => {
+            setIsFocused(false);
+          }}
+          onFocus={(e: React.FocusEvent) => {
+            setIsFocused(true);
+            e.stopPropagation();
+          }}
+        >
+          &nbsp;
+        </Chip>
+      )}
     </div>
   );
 };

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

@@ -1,142 +1,98 @@
-import { useEffect, useRef, useState } from 'react';
-import { CustomScrollInterface } from './custom-scroll';
-import { ReactProps } from '../utils';
-import { BlockScroll } from './block-scroll.effect';
-import { animate, AnimationPlaybackControls } from 'motion';
+import { useEffect, useRef, ReactNode } from 'react';
+import Lenis from 'lenis';
+
+export type SmoothScrollProps = {
+  /**
+   * Duration of the scroll animation in seconds or as a CSS string (e.g., '1s', '500ms').
+   * Default: 1.2
+   */
+  transition?: number | string;
+  /**
+   * Easing function for the scroll animation.
+   * Default: easeOutQuint
+   */
+  easing?: (t: number) => number;
+  /**
+   * Scroll orientation.
+   * Default: 'vertical'
+   */
+  orientation?: 'vertical' | 'horizontal';
+  /**
+   * Enable smooth scrolling on touch devices.
+   * Default: false (native touch scrolling is usually preferred)
+   */
+  smoothTouch?: boolean;
+  /**
+   * Multiplier for touch scroll sensitivity.
+   * Default: 2
+   */
+  touchMultiplier?: number;
+  /**
+   * Children elements (optional, component works at document level)
+   */
+  children?: ReactNode;
+};
 
 /**
- * WARNING: using this component is not recommended for now.
- * It may block or alter certain scroll events (wheel/touch/keyboard) depending on the context.
- * Rework it later (e.g., via Lenis or another solution) before using it in production.
+ * SmoothScroll component using Lenis for smooth scrolling.
+ * This component enables smooth scrolling at the document level.
  */
 export const SmoothScroll = ({
-  transition,
+  transition = 1.2,
+  easing,
   orientation = 'vertical',
-  throttleDuration = 25,
-}: {
-  transition?: {
-    ease:
-      | 'linear'
-      | 'easeIn'
-      | 'easeOut'
-      | 'easeInOut'
-      | 'circIn'
-      | 'circOut'
-      | 'circInOut'
-      | 'backIn'
-      | 'backOut'
-      | 'backInOut'
-      | 'anticipate'
-      | ((t: number) => number);
-    duration?: number;
-  };
-} & ReactProps<CustomScrollInterface>) => {
-  // Target value (instant), driven by wheel/touch/keyboard or native scroll sync
-  const [scrollY, setScrollY] = useState(0);
-
-  const [el, setEl] = useState<HTMLHtmlElement>();
-
-  const isScrolling = useRef(false);
-  const scrollTimeoutRef = useRef<NodeJS.Timeout>();
-  const lastAppliedYRef = useRef(0);
-
-  useEffect(() => {
-    setEl(document as unknown as HTMLHtmlElement);
-    const y = document.documentElement.scrollTop;
-    setScrollY(y);
-    lastAppliedYRef.current = y;
-  }, []);
+  smoothTouch = false,
+  touchMultiplier = 2,
+  children,
+}: SmoothScrollProps) => {
+  const lenisRef = useRef<Lenis | null>(null);
+  const rafRef = useRef<number | null>(null);
 
-  // Sync native scroll (e.g., scrollbar, programmatic) back to target after a small delay
   useEffect(() => {
-    const onScroll = () => {
-      if (isScrolling.current) return;
-      setScrollY(document.documentElement.scrollTop);
-    };
-
-    el?.addEventListener('scroll', onScroll as unknown as EventListener);
-    return () => {
-      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
-      el?.removeEventListener('scroll', onScroll as unknown as EventListener);
-    };
-  }, [el]);
-
-  // Drive the spring when target changes
-  const currentY = useRef<number | null>();
-  const animationRef = useRef<AnimationPlaybackControls | null>(null);
-  useEffect(() => {
-    const y = scrollY;
-
-    if (animationRef.current) {
-      animationRef.current.stop();
-      animationRef.current = null;
+    // Parse duration from string if needed (e.g., '1s' -> 1, '500ms' -> 0.5)
+    let duration: number;
+    if (typeof transition === 'string') {
+      if (transition.endsWith('ms')) {
+        duration = parseFloat(transition) / 1000;
+      } else if (transition.endsWith('s')) {
+        duration = parseFloat(transition);
+      } else {
+        duration = parseFloat(transition) || 1.2;
+      }
+    } else {
+      duration = transition;
     }
 
-    if (!isScrolling.current) {
-      currentY.current = y;
-      return;
-    }
-    animationRef.current = animate(currentY.current ?? y, y, {
-      duration: (transition?.duration ?? 500) / 1000,
-      ease: transition?.ease ?? 'easeOut',
+    // Default easing: easeOutQuint
+    const defaultEasing = (t: number) => 1 - Math.pow(1 - t, 5);
+
+    // Initialize Lenis
+    lenisRef.current = new Lenis({
+      duration,
+      easing: easing ?? defaultEasing,
+      orientation,
+      smoothWheel: true,
+      touchMultiplier,
+      syncTouch: smoothTouch,
+    });
 
-      onUpdate: (value) => {
-        if (scrollTimeoutRef.current) {
-          clearTimeout(scrollTimeoutRef.current);
-        }
-        currentY.current = value;
+    // Animation frame loop
+    const raf = (time: number) => {
+      lenisRef.current?.raf(time);
+      rafRef.current = requestAnimationFrame(raf);
+    };
 
-        const html = document.documentElement;
-        // Avoid micro-movements causing extra layout work
-        const rounded = Math.round(value * 1000) / 1000;
-        const last = lastAppliedYRef.current;
-        if (Math.abs(rounded - last) < 0.1) return;
-        lastAppliedYRef.current = rounded;
+    rafRef.current = requestAnimationFrame(raf);
 
-        if (isScrolling.current) {
-          html.scrollTo({ top: rounded });
-        }
-      },
-      onComplete: () => {
-        scrollTimeoutRef.current = setTimeout(() => {
-          isScrolling.current = false;
-        }, 300);
-        animationRef.current = null;
-      },
-    });
+    // Cleanup
     return () => {
-      // Safety: stop if effect re-runs quickly
-      if (animationRef.current) {
-        animationRef.current.stop();
-        animationRef.current = null;
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
       }
+      lenisRef.current?.destroy();
+      lenisRef.current = null;
     };
-  }, [scrollY]);
-
-  if (!el) return null;
-
-  return (
-    <BlockScroll
-      touch={false}
-      el={el as unknown as HTMLElement}
-      onScroll={(scroll) => {
-        if (
-          'deltaY' in scroll &&
-          scroll.deltaY !== 0 &&
-          el &&
-          scrollY !== null
-        ) {
-          let y = scrollY + scroll.deltaY;
-          const html = el.querySelector('html');
-          if (html) {
-            y = Math.min(y, html.scrollHeight - html.clientHeight);
-          }
-          y = Math.max(y, 0);
-          setScrollY(y);
+  }, [transition, easing, orientation, smoothTouch, touchMultiplier]);
 
-          isScrolling.current = true;
-        }
-      }}
-    ></BlockScroll>
-  );
+  return children ? <>{children}</> : null;
 };

package/src/stories/effect/smooth-scroll.stories.tsx

@@ -2,42 +2,51 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SmoothScroll } from '../../';
 import { JSX } from 'react/jsx-runtime';
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: 'effect/SmoothScroll',
   component: SmoothScroll,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  parameters: {},
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {},
+  argTypes: {
+    transition: {
+      control: { type: 'text' },
+      description: 'Duration of the scroll animation (e.g., "1s", "500ms", or number in seconds)',
+    },
+    orientation: {
+      control: { type: 'select' },
+      options: ['vertical', 'horizontal'],
+    },
+    smoothTouch: {
+      control: { type: 'boolean' },
+      description: 'Enable smooth scrolling on touch devices',
+    },
+    touchMultiplier: {
+      control: { type: 'number' },
+      description: 'Multiplier for touch scroll sensitivity',
+    },
+  },
 } satisfies Meta<typeof SmoothScroll>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-
 const createSmoothScrollStory = () => {
   const SmoothScrollStory: () => JSX.Element = () => (
-    <div className={'h-96'}>
-      <SmoothScroll transition={'1s'}>
-        <div className={' h-52 bg-primary'} />
-        <div className={' h-52 bg-secondary'} />
-        <div className={' h-52 bg-tertiary'} />{' '}
-        <div className={' h-52 bg-primary'} />
-        <div className={' h-52 bg-secondary'} />
-        <div className={' h-52 bg-tertiary'} />{' '}
-        <div className={' h-52 bg-primary'} />
-        <div className={' h-52 bg-secondary'} />
-        <div className={' h-52 bg-tertiary'} />{' '}
-        <div className={' h-52 bg-primary'} />
-        <div className={' h-52 bg-secondary'} />
-        <div className={' h-52 bg-tertiary'} />
-      </SmoothScroll>
-    </div>
+    <>
+      <SmoothScroll transition="1s" />
+      <div className="h-52 bg-primary" />
+      <div className="h-52 bg-secondary" />
+      <div className="h-52 bg-tertiary" />
+      <div className="h-52 bg-primary" />
+      <div className="h-52 bg-secondary" />
+      <div className="h-52 bg-tertiary" />
+      <div className="h-52 bg-primary" />
+      <div className="h-52 bg-secondary" />
+      <div className="h-52 bg-tertiary" />
+      <div className="h-52 bg-primary" />
+      <div className="h-52 bg-secondary" />
+      <div className="h-52 bg-tertiary" />
+    </>
   );
 
   return SmoothScrollStory;