@udixio/ui-react 2.8.4 → 2.9.4

package/src/lib/components/ToolTip.tsx

@@ -29,8 +29,11 @@ export const ToolTip = ({
   targetRef,
   ref,
   trigger = ['hover', 'focus'],
+  transition,
   ...props
 }: MotionProps<ToolTipInterface>) => {
+  transition = { duration: 0.3, delay: 0.4, ...transition };
+
   if (!children && !targetRef) {
     throw new Error('ToolTip must have a child or a targetRef');
   }
@@ -50,6 +53,7 @@ export const ToolTip = ({
   const [isVisible, setIsVisible] = useState(false);
 
   const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const showTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     const handleUpdate = (event: CustomEvent) => {
@@ -67,9 +71,19 @@ export const ToolTip = ({
 
   useEffect(() => {
     if (timeout.current) clearTimeout(timeout.current);
+    if (showTimeout.current) clearTimeout(showTimeout.current);
 
     if (currentToolTipId) {
-      setIsVisible(currentToolTipId === id);
+      if (currentToolTipId === id) {
+        showTimeout.current = setTimeout(
+          () => {
+            setIsVisible(true);
+          },
+          (transition?.delay ?? 0) * 1000,
+        );
+      } else {
+        setIsVisible(false);
+      }
     } else {
       timeout.current = setTimeout(() => {
         setIsVisible(false);
@@ -188,6 +202,17 @@ export const ToolTip = ({
     children: children as any,
   });
 
+  const variants = {
+    open: {
+      opacity: 1,
+      height: 'auto',
+    },
+    close: {
+      opacity: 0,
+      height: 16,
+    },
+  };
+
   return (
     <>
       {enhancedChildren}
@@ -195,24 +220,17 @@ export const ToolTip = ({
         {isVisible && (
           <SyncedFixedWrapper targetRef={resolvedRef}>
             <motion.div
-              initial={{ opacity: currentToolTipId ? 1 : 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: currentToolTipId ? 0 : 0.3 }}
-              exit={{ opacity: currentToolTipId ? 1 : 0 }}
+              initial={'close'}
+              variants={variants}
+              animate={'open'}
+              transition={{ duration: transition.duration }}
+              exit={'close'}
               className={styles.toolTip}
               {...props}
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
             >
-              <motion.div
-                className={styles.container}
-                layoutId={'tool-tip'}
-                transition={{
-                  type: 'spring',
-                  stiffness: 200,
-                  damping: 20,
-                }}
-              >
+              <div className={styles.container}>
                 {title && <div className={styles.subHead}>{title}</div>}
                 <div className={styles.supportingText}>{text}</div>
                 {buttons && (
@@ -228,7 +246,7 @@ export const ToolTip = ({
                       ))}
                   </div>
                 )}
-              </motion.div>
+              </div>
             </motion.div>
           </SyncedFixedWrapper>
         )}

package/src/lib/components/index.ts

@@ -3,6 +3,8 @@ export * from './Card';
 export * from './Carousel';
 export * from './CarouselItem';
 export * from './CarouselItem';
+export * from './Chip';
+export * from './Chips';
 export * from './Divider';
 export * from './Fab';
 export * from './FabMenu';

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

@@ -22,6 +22,12 @@ type BlockScrollProps = {
   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,
@@ -143,11 +149,73 @@ export const BlockScroll: React.FC<BlockScrollProps> = ({
       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 dx = 0,
-        dy = 0;
+      let dy = 0;
 
       switch (e.key) {
         case 'ArrowDown':
@@ -156,12 +224,6 @@ export const BlockScroll: React.FC<BlockScrollProps> = ({
         case 'ArrowUp':
           dy = -line;
           break;
-        case 'ArrowRight':
-          dx = line;
-          break;
-        case 'ArrowLeft':
-          dx = -line;
-          break;
         case 'PageDown':
           dy = page;
           break;
@@ -174,17 +236,33 @@ export const BlockScroll: React.FC<BlockScrollProps> = ({
         case 'End':
           dy = Number.POSITIVE_INFINITY;
           break;
-        case ' ':
+        case ' ': {
+          // Espace: laisser passer sur boutons/inputs/etc. déjà filtrés ci-dessus
           dy = e.shiftKey ? -page : page;
           break;
+        }
         default:
-          return;
+          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: dx,
+        deltaX: 0,
         deltaY: dy,
         originalEvent: e,
       });

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

@@ -4,6 +4,11 @@ import { ReactProps } from '../utils';
 import { BlockScroll } from './block-scroll.effect';
 import { animate, AnimationPlaybackControls } from 'motion';
 
+/**
+ * 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.
+ */
 export const SmoothScroll = ({
   transition,
   orientation = 'vertical',

package/src/lib/icon/icon.tsx

@@ -17,7 +17,12 @@ interface Props {
   className?: string;
 }
 
-export const Icon: React.FC<Props> = ({ icon, colors = [], className }) => {
+export const Icon: React.FC<Props> = ({
+  icon,
+  colors = [],
+  className,
+  ...restProps
+}) => {
   // Si c'est une chaîne de caractères (SVG raw)
   if (typeof icon === 'string') {
     // Modifier la couleur du SVG en remplaçant les attributs fill/stroke
@@ -98,6 +103,7 @@ export const Icon: React.FC<Props> = ({ icon, colors = [], className }) => {
       viewBox={`0 0 ${width} ${height}`}
       role="img"
       aria-hidden="true"
+      {...restProps}
     >
       {typeof svgPathData === 'string' ? (
         <path className={'fill-current'} d={svgPathData} />

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

@@ -0,0 +1,97 @@
+import { ActionOrLink } from '../utils';
+import { Transition } from 'motion';
+import { Icon } from '../icon';
+
+type ChipVariant = 'outlined' | 'elevated';
+
+export type ChipProps = {
+  /**
+   * The label is the text that is displayed on the chip.
+   */
+  label?: string;
+
+  children?: string;
+
+  /**
+   * The chip variant determines the style.
+   */
+  variant?: ChipVariant;
+
+  /**
+   * Disables the chip if set to true.
+   */
+  disabled?: boolean;
+
+  /**
+   * An optional icon to display in the chip.
+   */
+  icon?: Icon;
+
+  transition?: Transition;
+
+  onToggle?: (isActive: boolean) => void;
+
+  activated?: boolean;
+
+  onRemove?: () => void;
+
+  /**
+   * Enable native HTML drag and drop on the chip.
+   */
+  draggable?: boolean;
+
+  /**
+   * Called when drag starts (composed with internal handler that sets isDragging).
+   */
+  onDragStart?: (e: React.DragEvent) => void;
+
+  /**
+   * Called when drag ends (composed with internal handler that clears isDragging).
+   */
+  onDragEnd?: (e: React.DragEvent) => void;
+} & (
+  | {
+      editable?: false;
+      editing?: never;
+      onEditStart?: never;
+      onEditCommit: never;
+      onEditCancel?: never;
+      onChange?: never;
+    }
+  | {
+      /** Enable label inline edition for this chip (used by Chips variant="input"). */
+      editable?: true;
+
+      /** Affirms that the chip is currently being edited. */
+      editing?: boolean;
+
+      /** Request to start editing (e.g., double-click, Enter/F2). */
+      onEditStart?: () => void;
+
+      /** Commit edition with the new label. */
+      onEditCommit: (nextLabel: string) => void;
+
+      /** Cancel edition and restore previous label. */
+      onEditCancel?: () => void;
+
+      /**
+       * Fired on each edit keystroke when content changes (only while editing).
+       * Useful for live formatting, suggestions, validation, etc.
+       */
+      onChange?: (nextLabel: string) => void;
+    }
+);
+
+type Elements = ['chip', 'stateLayer', 'leadingIcon', 'trailingIcon', 'label'];
+
+export type ChipInterface = ActionOrLink<ChipProps> & {
+  elements: Elements;
+  states: {
+    isActive: boolean;
+    trailingIcon?: boolean;
+    isFocused: boolean;
+    isInteractive: boolean;
+    isDragging?: boolean;
+    isEditing?: boolean;
+  };
+};

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

@@ -0,0 +1,37 @@
+import { ActionOrLink } from '../utils';
+import type { Icon } from '../icon';
+
+// Ce que Chips a besoin de connaître pour (re)construire un Chip
+export type ChipItem = {
+  label: string;
+  icon?: Icon;
+  activated?: boolean;
+  disabled?: boolean;
+  variant?: 'outlined' | 'elevated';
+  href?: string; // si tu utilises ActionOrLink côté Chip
+};
+
+type ChipsVariant = 'input';
+
+type Props = {
+  /** Style du conteneur de chips */
+  variant?: ChipsVariant;
+
+  /** Active/masse un comportement de container (si utile) */
+  scrollable?: boolean;
+
+  draggable?: boolean; // optionnel
+
+  /** Mode contrôlé: la source de vérité */
+  items?: ChipItem[];
+
+  /** Notifie toute modification de la liste (remove, toggle, etc.) */
+  onItemsChange?: (next: ChipItem[]) => void;
+};
+
+type Elements = ['chips'];
+
+export type ChipsInterface = ActionOrLink<Props> & {
+  elements: Elements;
+  states: {};
+};

package/src/lib/interfaces/index.ts

@@ -2,6 +2,8 @@ export * from './button.interface';
 export * from './card.interface';
 export * from './carousel-item.interface';
 export * from './carousel.interface';
+export * from './chip.interface';
+export * from './chips.interface';
 export * from './divider.interface';
 export * from './fab.interface';
 export * from './fab-menu.interface';

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

@@ -1,6 +1,7 @@
 import { ReactProps } from '../utils';
 import { ButtonInterface } from './button.interface';
 import { ReactNode, RefObject } from 'react';
+import { Transition } from 'motion';
 
 type Trigger = 'hover' | 'click' | 'focus' | null;
 
@@ -21,6 +22,7 @@ export type ToolTipInterface<T extends HTMLElement = any> = {
       | 'bottom-left'
       | 'bottom-right';
     trigger?: Trigger | Trigger[];
+    transition?: Transition;
   } & (
     | {
         children?: never;

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

@@ -0,0 +1,62 @@
+import type { ClassNameComponent } from '../utils';
+import { classNames, createUseClassNames, defaultClassNames } from '../utils';
+import { ChipInterface } from '../interfaces';
+
+const chipConfig: ClassNameComponent<ChipInterface> = ({
+  variant,
+
+  disabled,
+  trailingIcon,
+  icon,
+  isActive,
+  isInteractive,
+  activated,
+  isFocused,
+  isDragging,
+  isEditing,
+}) => ({
+  chip: classNames(
+    ' group/chip px-3 py-1.5  rounded-lg flex items-center gap-2 outline-none',
+    {
+      'pl-2': icon,
+      'pr-2': trailingIcon,
+      'cursor-pointer': !disabled && isInteractive,
+    },
+    {
+      ' text-on-surface-variant': (!activated && !isFocused) || isEditing,
+      'bg-secondary-container text-on-secondary-container':
+        (activated || isFocused) && !isEditing,
+    },
+    // Dragging feedback
+    isDragging && ['opacity-100 cursor-grabbing shadow-3'],
+    variant === 'outlined' && [
+      'border border-outline-variant',
+      {
+        'border-transparent': isEditing,
+      },
+    ],
+    variant === 'elevated' &&
+      !isEditing && [
+        'shadow-1 bg-surface-container-low',
+        'border border-outline-variant',
+      ],
+  ),
+
+  stateLayer: classNames('rounded-lg overflow-hidden', {}),
+  label: classNames('outline-none text-nowrap', {
+    'opacity-[0.38]': disabled,
+  }),
+  leadingIcon: classNames('text-primary size-[18px]', {
+    'opacity-[0.38]': disabled,
+  }),
+  trailingIcon: classNames('cursor-pointer size-[18px]', {
+    'opacity-[0.38]': disabled,
+  }),
+});
+
+export const chipStyle = defaultClassNames<ChipInterface>('chip', chipConfig);
+
+export const useChipStyle = createUseClassNames<ChipInterface>(
+  'chip',
+  chipConfig,
+);

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

@@ -0,0 +1,20 @@
+import type { ClassNameComponent } from '../utils';
+import { classNames, createUseClassNames, defaultClassNames } from '../utils';
+import { ChipsInterface } from '../interfaces';
+
+const chipsConfig: ClassNameComponent<ChipsInterface> = ({ scrollable }) => ({
+  chips: classNames(' flex  gap-3 outline-none', {
+    'flex-wrap': !scrollable,
+    'overflow-x-auto': scrollable,
+  }),
+});
+
+export const chipsStyle = defaultClassNames<ChipsInterface>(
+  'chips',
+  chipsConfig,
+);
+
+export const useChipsStyle = createUseClassNames<ChipsInterface>(
+  'chips',
+  chipsConfig,
+);

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

@@ -15,6 +15,7 @@ const fabMenuConfig: ClassNameComponent<FabMenuInterface> = ({
   actions: classNames(
     'flex flex-col gap-1 items-end absolute bottom-[calc(100%_+_8px)] right-0',
   ),
+  label: classNames('text-nowrap'),
 });
 
 export const fabMenuStyle = defaultClassNames<FabMenuInterface>(

package/src/lib/styles/index.ts

@@ -2,6 +2,8 @@ export * from './button.style';
 export * from './card.style';
 export * from './carousel-item.style';
 export * from './carousel.style';
+export * from './chip.style';
+export * from './chips.style';
 export * from './divider.style';
 export * from './fab.style';
 export * from './fab-menu.style';

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

@@ -12,6 +12,9 @@ const toolTipConfig: ClassNameComponent<ToolTipInterface> = ({
 }) => ({
   toolTip: classNames(
     ' pointer-events-auto w-max z-10  absolute  m-1 w-max-content max-w-[312px]',
+    variant == 'rich' &&
+      'bg-surface-container rounded-2xl text-on-surface-container shadow-2',
+    variant == 'plain' && 'bg-inverse-surface rounded text-inverse-on-surface ',
     {
       'bottom-full left-1/2 -translate-x-1/2': position == 'top',
       'top-full left-1/2 -translate-x-1/2': position == 'bottom',
@@ -25,10 +28,8 @@ const toolTipConfig: ClassNameComponent<ToolTipInterface> = ({
   ),
   container: classNames(
     'pb-2',
-    variant == 'rich' &&
-      'bg-surface-container rounded-2xl text-on-surface-container px-4 pt-3 shadow-2',
-    variant == 'plain' &&
-      'bg-inverse-surface rounded text-inverse-on-surface px-2 py-1',
+    variant == 'rich' && 'px-4 pt-3 ',
+    variant == 'plain' && 'px-2 py-1',
   ),
   actions: classNames('flex gap-10 px-1 mt-2', variant == 'plain' && 'hidden'),
   subHead: classNames('text-title-small mb-1', variant == 'plain' && 'hidden'),