@udixio/ui-react 2.10.13 → 2.10.14

package/src/lib/effects/State.tsx

@@ -1,90 +0,0 @@
-import { RippleEffect } from './ripple';
-import {
-  ClassNameComponent,
-  classNames,
-  createUseClassNames,
-  ReactProps,
-} from '../utils';
-import { useEffect, useRef, useState } from 'react';
-
-export interface StateInterface {
-  type: 'div';
-  props: {
-    colorName: string;
-    stateClassName?:
-      | string
-      | 'state-ripple-group'
-      | 'state-group'
-      | 'state-layer';
-    className?: string;
-    style?: React.CSSProperties;
-    children?: React.ReactNode;
-  };
-  states: { isClient: boolean };
-  elements: ['stateLayer'];
-}
-
-export const State = ({
-  style,
-  colorName,
-  stateClassName = 'state-ripple-group',
-  children,
-  className,
-}: ReactProps<StateInterface>) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const groupStateRef = useRef<HTMLElement | null>(null);
-
-  const [isClient, setIsClient] = useState(false);
-  const styles = useStateStyle({
-    isClient,
-    stateClassName,
-    className,
-    colorName,
-  });
-
-  useEffect(() => {
-    if (ref.current && stateClassName !== 'state-layer') {
-      const groupName = !stateClassName.includes('[')
-        ? 'group'
-        : 'group/' + stateClassName.split('[')[1].split(']')[0];
-
-      // On échappe le slash pour le sélecteur CSS
-      const safeGroupName = groupName.replace(/\//g, '\\/');
-
-      const furthestGroupState = ref.current.closest(
-        `.${safeGroupName}:not(.${safeGroupName} .${safeGroupName})`,
-      );
-      groupStateRef.current = furthestGroupState as HTMLElement | null;
-    }
-    setIsClient(true);
-  }, []);
-
-  return (
-    <div
-      ref={ref}
-      className={styles.stateLayer}
-      style={{
-        ['--state-color' as any]: `var(--default-color, var(--color-${colorName}))`,
-        ...style,
-      }}
-    >
-      {isClient && <RippleEffect triggerRef={groupStateRef} />}
-      {children}
-    </div>
-  );
-};
-// ... existing code ...
-const cardConfig: ClassNameComponent<StateInterface> = ({
-  isClient,
-  stateClassName,
-}) => ({
-  stateLayer: classNames([
-    'w-full top-0 left-0 h-full absolute pointer-events-none overflow-hidden',
-    stateClassName,
-  ]),
-});
-
-export const useStateStyle = createUseClassNames<StateInterface>(
-  'stateLayer',
-  cardConfig,
-);

package/src/lib/effects/SyncedFixedWrapper.tsx

@@ -1,62 +0,0 @@
-import {
-  type ReactNode,
-  type RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { createPortal } from 'react-dom';
-
-type SyncedFixedWrapperProps = {
-  targetRef: RefObject<any>;
-  children: ReactNode;
-};
-
-export const SyncedFixedWrapper = ({
-  targetRef,
-  children,
-}: SyncedFixedWrapperProps) => {
-  const [style, setStyle] = useState<React.CSSProperties | null>(null);
-  const resizeObserver = useRef<ResizeObserver | null>(null);
-
-  const updatePosition = () => {
-    const target = targetRef.current;
-    if (!target) return;
-
-    const rect = target.getBoundingClientRect();
-
-    setStyle({
-      position: 'fixed',
-      top: rect.top,
-      left: rect.left,
-      width: rect.width,
-      height: rect.height,
-      pointerEvents: 'none', // si le wrapper ne doit pas capter les events
-      zIndex: 999, // personnalise si besoin
-    });
-  };
-
-  useEffect(() => {
-    const target = targetRef.current;
-    if (!target) return;
-
-    updatePosition();
-
-    window.addEventListener('scroll', updatePosition, true);
-    window.addEventListener('resize', updatePosition);
-
-    // Observe resize of the target element
-    resizeObserver.current = new ResizeObserver(updatePosition);
-    resizeObserver.current.observe(target);
-
-    return () => {
-      window.removeEventListener('scroll', updatePosition, true);
-      window.removeEventListener('resize', updatePosition);
-      resizeObserver.current?.disconnect();
-    };
-  }, [targetRef]);
-
-  if (!style) return null;
-
-  return createPortal(<div style={style}>{children}</div>, document.body);
-};

package/src/lib/effects/ThemeProvider.tsx

@@ -1,174 +0,0 @@
-import {
-  type API,
-  type ConfigInterface,
-  ContextOptions,
-  FontPlugin,
-  loader,
-  serializeThemeContext,
-} from '@udixio/theme';
-import { useEffect, useRef, useState } from 'react';
-import { TailwindPlugin } from '@udixio/tailwind';
-import type {
-  WorkerInboundMessage,
-  WorkerOutboundMessage,
-} from './theme.worker';
-
-function isValidHexColor(hexColorString: string) {
-  const regex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-  return regex.test(hexColorString);
-}
-
-export const ThemeProvider = ({
-  config,
-  throttleDelay = 100,
-  onLoad,
-  loadTheme = false,
-}: {
-  config: Readonly<ConfigInterface>;
-  onLoad?: (api: API) => void;
-  throttleDelay?: number;
-  loadTheme?: boolean;
-}) => {
-  const [themeApi, setThemeApi] = useState<API | null>(null);
-  const [outputCss, setOutputCss] = useState<string | null>(null);
-
-  const workerRef = useRef<Worker | null>(null);
-  const generationRef = useRef(0);
-  const lastAppliedIdRef = useRef(0);
-  const themeApiRef = useRef<API | null>(null);
-  const firstLoadDoneRef = useRef(false);
-  const onLoadRef = useRef(onLoad);
-  useEffect(() => {
-    onLoadRef.current = onLoad;
-  }, [onLoad]);
-
-  // Initialisation de l'API et du Worker
-  useEffect(() => {
-    let cancelled = false;
-
-    (async () => {
-      const api = await loader(config, loadTheme);
-      if (cancelled) return;
-
-      themeApiRef.current = api;
-      setThemeApi(api);
-
-      const worker = new Worker(
-        new URL('./theme.worker.ts', import.meta.url),
-        { type: 'module' },
-      );
-      workerRef.current = worker;
-
-      worker.onmessage = (e: MessageEvent<WorkerOutboundMessage>) => {
-        if (e.data.id > lastAppliedIdRef.current) {
-          lastAppliedIdRef.current = e.data.id;
-          firstLoadDoneRef.current = true;
-          setOutputCss(e.data.css);
-          onLoadRef.current?.(themeApiRef.current!);
-        }
-      };
-    })();
-
-    return () => {
-      cancelled = true;
-      workerRef.current?.terminate();
-      workerRef.current = null;
-    };
-  }, []);
-
-  // Throttle avec exécution en tête (leading) et en fin (trailing)
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const lastExecTimeRef = useRef<number>(0);
-  const lastArgsRef = useRef<Partial<ContextOptions> | null>(null);
-
-  useEffect(() => {
-    if (!themeApi) return;
-
-    const ctx: Partial<ContextOptions> = {
-      ...config,
-      sourceColor: config.sourceColor,
-    };
-
-    const now = Date.now();
-    const timeSinceLast = now - lastExecTimeRef.current;
-
-    const invoke = async (args: Partial<ContextOptions>) => {
-      await applyThemeChange(args);
-    };
-
-    if (lastExecTimeRef.current === 0 || timeSinceLast >= throttleDelay) {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-      lastArgsRef.current = null;
-      lastExecTimeRef.current = now;
-      void invoke(ctx);
-    } else {
-      lastArgsRef.current = ctx;
-      if (!timeoutRef.current) {
-        const remaining = Math.max(0, throttleDelay - timeSinceLast);
-        timeoutRef.current = setTimeout(async () => {
-          timeoutRef.current = null;
-          const args = lastArgsRef.current;
-          lastArgsRef.current = null;
-          if (args) {
-            lastExecTimeRef.current = Date.now();
-            await invoke(args);
-          }
-        }, remaining);
-      }
-    }
-
-    return () => {};
-  }, [config, throttleDelay, themeApi]);
-
-  const applyThemeChange = async (ctx: Partial<ContextOptions>) => {
-    if (typeof ctx.sourceColor === 'string' && !isValidHexColor(ctx.sourceColor)) {
-      throw new Error('Invalid hex color');
-    }
-
-    const api = themeApiRef.current;
-    if (!api) return;
-
-    // Toujours évaluer sur le main thread (rapide)
-    api.context.update(ctx);
-    api.palettes.sync((ctx as any).palettes);
-
-    const worker = workerRef.current;
-
-    // Fallback synchrone : premier rendu ou Worker pas encore prêt
-    if (!worker || !firstLoadDoneRef.current) {
-      await api.load();
-      const css = api.plugins.getPlugin(TailwindPlugin).getInstance().outputCss;
-      setOutputCss(css);
-      firstLoadDoneRef.current = true;
-      onLoad?.(api);
-      return;
-    }
-
-    // Offload au Worker
-    const id = ++generationRef.current;
-    worker.postMessage({
-      id,
-      snapshot: serializeThemeContext(api),
-      tailwindOptions: api.plugins.getPlugin(TailwindPlugin).options,
-      fontOptions: api.plugins.getPlugin(FontPlugin).options,
-    } satisfies WorkerInboundMessage);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
-      }
-    };
-  }, []);
-
-  if (!outputCss) {
-    return null;
-  }
-
-  return <style dangerouslySetInnerHTML={{ __html: outputCss }} />;
-};

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

@@ -1,313 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-type ScrollIntent =
-  | {
-      type: 'intent';
-      source: 'wheel' | 'touch' | 'keyboard';
-      deltaX: number;
-      deltaY: number;
-      originalEvent: Event;
-    }
-  | {
-      type: 'scrollbar';
-      scrollTop: number;
-      scrollLeft: number;
-      maxScrollTop: number;
-      maxScrollLeft: number;
-    };
-
-type BlockScrollProps = {
-  onScroll?: (evt: ScrollIntent) => void; // log des intentions + du scroll via scrollbar
-  touch?: boolean;
-  el: HTMLElement;
-};
-
-/**
- * @deprecated Potentially blocks scroll events unintentionally (wheel/touch/keyboard)
- * and may interfere with internal scrollable areas (modals, lists, overflow containers).
- * This API will be removed soon. Avoid using it and migrate to native behaviors
- * or to local scroll handling at the component level.
- */
-export const BlockScroll: React.FC<BlockScrollProps> = ({
-  onScroll,
-  el,
-  touch = true,
-}) => {
-  const lastTouch = useRef<{ x: number; y: number } | null>(null);
-  const lastScrollTop = useRef<number>(0);
-  const lastScrollLeft = useRef<number>(0);
-
-  useEffect(() => {
-    if (!el) return;
-
-    // Initialize last known scroll positions to block scrollbar-based scrolling
-    lastScrollTop.current = el.scrollTop;
-    lastScrollLeft.current = el.scrollLeft;
-
-    const emitIntent = (payload: Extract<ScrollIntent, { type: 'intent' }>) => {
-      // Log the desired deltaY for every scroll attempt (wheel/touch/keyboard)
-      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',
-        source: 'wheel',
-        deltaX: e.deltaX,
-        deltaY: e.deltaY,
-        originalEvent: e,
-      });
-    };
-
-    const onTouchStart = (e: TouchEvent) => {
-      if (!touch) return;
-      const t = e.touches[0];
-      if (t) lastTouch.current = { x: t.clientX, y: t.clientY };
-    };
-
-    const onTouchMove = (e: TouchEvent) => {
-      if (!touch) return;
-      const t = e.touches[0];
-      if (!t || !lastTouch.current) return;
-
-      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',
-        source: 'touch',
-        deltaX: dx,
-        deltaY: dy,
-        originalEvent: e,
-      });
-    };
-
-    const onTouchEnd = () => {
-      if (!touch) return;
-      lastTouch.current = null;
-    };
-
-    const interactiveRoles = new Set([
-      'textbox',
-      'listbox',
-      'menu',
-      'menubar',
-      'grid',
-      'tree',
-      'tablist',
-      'toolbar',
-      'radiogroup',
-      'combobox',
-      'spinbutton',
-      'slider',
-    ]);
-
-    const isEditableOrInteractive = (node: HTMLElement | null) => {
-      if (!node) return false;
-      const tag = node.tagName.toLowerCase();
-      if (tag === 'input' || tag === 'textarea' || tag === 'select')
-        return true;
-      if ((node as HTMLInputElement).isContentEditable) return true;
-      if (tag === 'button') return true;
-      if (tag === 'a' && (node as HTMLAnchorElement).href) return true;
-      const role = node.getAttribute('role');
-      if (role && interactiveRoles.has(role)) return true;
-      return false;
-    };
-
-    const hasInteractiveAncestor = (el: HTMLElement | null) => {
-      let n: HTMLElement | null = el;
-      while (n && n !== document.body && n !== document.documentElement) {
-        if (isEditableOrInteractive(n)) return true;
-        n = n.parentElement;
-      }
-      return false;
-    };
-
-    const canAncestorScroll = (start: HTMLElement | null, dy: number) => {
-      let n: HTMLElement | null = start;
-      while (n && n !== el) {
-        const style = window.getComputedStyle(n);
-        const overflowY = style.overflowY || style.overflow;
-        const canScrollY =
-          (overflowY === 'auto' || overflowY === 'scroll') &&
-          n.scrollHeight > n.clientHeight;
-        if (canScrollY) {
-          const canDown = n.scrollTop < n.scrollHeight - n.clientHeight;
-          const canUp = n.scrollTop > 0;
-          if ((dy > 0 && canDown) || (dy < 0 && canUp)) return true;
-        }
-        n = n.parentElement;
-      }
-      return false;
-    };
-
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.defaultPrevented) return;
-
-      // Garder les comportements natifs pour les éléments interactifs
-      const target = e.target as HTMLElement | null;
-      if (isEditableOrInteractive(target) || hasInteractiveAncestor(target)) {
-        return; // ne pas empêcher
-      }
-
-      const line = 40;
-      const page = el.clientHeight * 0.9;
-      let dy = 0;
-
-      switch (e.key) {
-        case 'ArrowDown':
-          dy = line;
-          break;
-        case 'ArrowUp':
-          dy = -line;
-          break;
-        case 'PageDown':
-          dy = page;
-          break;
-        case 'PageUp':
-          dy = -page;
-          break;
-        case 'Home':
-          dy = Number.NEGATIVE_INFINITY;
-          break;
-        case 'End':
-          dy = Number.POSITIVE_INFINITY;
-          break;
-        case ' ': {
-          // Espace: laisser passer sur boutons/inputs/etc. déjà filtrés ci-dessus
-          dy = e.shiftKey ? -page : page;
-          break;
-        }
-        default:
-          return; // ne pas gérer, laisser natif
-      }
-
-      // Si un ancêtre (≠ el) peut scroller dans ce sens, laisser le natif
-      if (canAncestorScroll(target, dy)) return;
-
-      // Ne gérer que si focus est sur body/html ou dans el
-      const ae = document.activeElement as HTMLElement | null;
-      const focusInsideEl =
-        ae &&
-        (ae === document.body ||
-          ae === document.documentElement ||
-          el.contains(ae));
-      if (!focusInsideEl) return;
-
-      // OK on prend en charge: empêcher le natif et émettre l’intention
-      e.preventDefault();
-      emitIntent({
-        type: 'intent',
-        source: 'keyboard',
-        deltaX: 0,
-        deltaY: dy,
-        originalEvent: e,
-      });
-    };
-
-    // const onScrollEvent = (e) => {
-    //   const currentScrollTop = e.target.scrollTop;
-    //   const currentScrollLeft = e.target.scrollLeft;
-    //
-    //   // Check if scroll position changed from last known position
-    //   if (
-    //     currentScrollTop !== lastScrollTop.current ||
-    //     currentScrollLeft !== lastScrollLeft.current
-    //   ) {
-    //     console.log('onScrollllllllllll', e, document);
-    //     onScroll?.({
-    //       type: 'scrollbar',
-    //       scrollTop: currentScrollTop,
-    //       scrollLeft: currentScrollLeft,
-    //       maxScrollTop: e.target.scrollHeight - e.target.clientHeight,
-    //       maxScrollLeft: e.target.scrollWidth - e.target.clientWidth,
-    //     });
-    //   }
-    //
-    //   // Update last known scroll positions
-    //   lastScrollTop.current = currentScrollTop;
-    //   lastScrollLeft.current = currentScrollLeft;
-    //
-    //   document.querySelector('html')?.scrollTo({ top: 0 });
-    // };
-
-    el.addEventListener('wheel', onWheel, { passive: false });
-    el.addEventListener('touchstart', onTouchStart, { passive: true });
-    el.addEventListener('touchmove', onTouchMove, { passive: false });
-    el.addEventListener('touchend', onTouchEnd, { passive: true });
-    el.addEventListener('keydown', onKeyDown);
-    // el.addEventListener('scroll', onScrollEvent, { passive: true });
-
-    return () => {
-      el.removeEventListener('wheel', onWheel as EventListener);
-      el.removeEventListener('touchstart', onTouchStart as EventListener);
-      el.removeEventListener('touchmove', onTouchMove as EventListener);
-      el.removeEventListener('touchend', onTouchEnd as EventListener);
-      el.removeEventListener('keydown', onKeyDown as EventListener);
-      // el.removeEventListener('scroll', onScrollEvent as EventListener);
-    };
-  }, [onScroll]);
-};