@udixio/ui-react 2.8.4 → 2.9.3

package/src/lib/components/Chip.tsx

@@ -0,0 +1,333 @@
+import { classNames, ReactProps } from '../utils';
+import { ChipInterface } from '../interfaces';
+import { useChipStyle } from '../styles';
+import { Icon } from '../icon';
+import { State } from '../effects';
+import React, { useEffect, useRef, useState } from 'react';
+import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
+
+/**
+ * Chips prompt most actions in a UI
+ * @status beta
+ * @category Action
+ */
+export const Chip = ({
+  variant = 'outlined',
+  disabled = false,
+  icon,
+  href,
+  label,
+  className,
+  onClick,
+  onToggle,
+  activated,
+  ref,
+  onRemove,
+  editable,
+  onEditStart,
+  onEditCommit,
+  onEditCancel,
+  onChange,
+  transition,
+  children,
+  editing,
+  ...restProps
+}: ReactProps<ChipInterface>) => {
+  if (children) label = children;
+  // Allow empty string when editable (newly created chips start empty)
+  if (label === undefined && !editable) {
+    throw new Error(
+      'Chip component requires either a label prop or children content',
+    );
+  }
+
+  const ElementType = href ? 'a' : 'button';
+
+  const defaultRef = useRef<HTMLDivElement>(null);
+  const resolvedRef = ref || defaultRef;
+
+  const [isActive, setIsActive] = React.useState(activated);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isEditing, setIsEditing] = useState(editing && editable);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [editValue, setEditValue] = React.useState<string>(
+    typeof label === 'string' ? label : '',
+  );
+  const editSpanRef = React.useRef<HTMLSpanElement>(null);
+  useEffect(() => {
+    setIsActive(activated);
+  }, [activated]);
+
+  useEffect(() => {
+    if (editing) {
+      setIsEditing(editing);
+    }
+    if (editable && isFocused) {
+      // Délai de 1 seconde avant d'activer l'édition
+      const timerId = setTimeout(() => {
+        // Ignore l'édition si draggable et en cours de dragging
+        if ((restProps as any)?.draggable && isDragging) {
+          return;
+        }
+        setIsEditing(true);
+      }, 1000);
+
+      // Cleanup: annule le timer si le focus est perdu avant 1 seconde
+      return () => clearTimeout(timerId);
+    } else if (!isFocused) {
+      // Désactive l'édition immédiatement si le focus est perdu
+      setIsEditing(false);
+    }
+    return;
+  }, [isFocused, editable, isDragging, restProps, editValue]);
+
+  // Sync edit value and focus caret when entering editing mode
+  useEffect(() => {
+    if (isEditing) {
+      setEditValue(typeof label === 'string' ? label : '');
+      // focus contenteditable span and move caret to end
+      const el =
+        (labelRef.current as unknown as HTMLSpanElement) || editSpanRef.current;
+      if (el) {
+        el.focus();
+        const range = document.createRange();
+        range.selectNodeContents(el);
+        range.collapse(false);
+        const sel = window.getSelection();
+        sel?.removeAllRanges();
+        sel?.addRange(range);
+      }
+    }
+  }, [isEditing]);
+
+  transition = { duration: 0.3, ...transition };
+
+  const handleClick = (e: React.MouseEvent<any, MouseEvent>) => {
+    if (disabled) {
+      e.preventDefault();
+    }
+    if (onToggle) {
+      setIsActive(!isActive);
+      onToggle(!isActive);
+    } else if (onClick) {
+      onClick(e);
+    }
+  };
+
+  const isInteractive = !!onToggle || !!onRemove || !!onClick || !!href;
+
+  if (activated) {
+    icon = faCheck;
+  }
+
+  // Extract potential onFocus/onBlur from rest props to compose handlers
+  const {
+    onFocus: restOnFocus,
+    onBlur: restOnBlur,
+    onKeyDown: restOnKeyDown,
+    onDragStart: restOnDragStart,
+    onDragEnd: restOnDragEnd,
+    onDoubleClick: restOnDoubleClick,
+    ...rest
+  } = (restProps as any) ?? {};
+
+  const styles = useChipStyle({
+    href,
+    disabled,
+    icon,
+    variant,
+    transition,
+    className,
+    isActive: isActive ?? false,
+    onToggle,
+    activated: isActive,
+    label,
+    isInteractive,
+    children: label,
+    isFocused: isFocused,
+    isDragging,
+    onEditCommit,
+    isEditing,
+  });
+
+  const labelRef = useRef(null);
+
+  const handleCommit = () => {
+    const trimmed = (editValue ?? '').trim();
+    if (!trimmed) {
+      if (onRemove) {
+        onRemove();
+      }
+      return;
+    }
+    onEditCommit?.(trimmed);
+  };
+
+  return (
+    <ElementType
+      contentEditable={false}
+      ref={resolvedRef}
+      href={href}
+      className={styles.chip}
+      {...(rest as any)}
+      onClick={(e: React.MouseEvent<any>) => {
+        if (!isEditing) handleClick(e);
+      }}
+      draggable={!disabled && !!(restProps as any)?.draggable}
+      onDragStart={(e: React.DragEvent<any>) => {
+        if (!disabled && (restProps as any)?.draggable) {
+          setIsDragging(true);
+        }
+        restOnDragStart?.(e);
+      }}
+      onDragEnd={(e: React.DragEvent<any>) => {
+        if ((restProps as any)?.draggable) {
+          setIsDragging(false);
+        }
+        restOnDragEnd?.(e);
+      }}
+      onDoubleClick={(e: React.MouseEvent<any>) => {
+        if (!disabled && editable && !isEditing) {
+          onEditStart?.();
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        restOnDoubleClick?.(e);
+      }}
+      onFocus={(e: React.FocusEvent<any>) => {
+        if (isInteractive) {
+          setIsFocused(true);
+        }
+        restOnFocus?.(e);
+      }}
+      onBlur={(e: React.FocusEvent<any>) => {
+        setIsFocused(false);
+        restOnBlur?.(e);
+      }}
+      onKeyDown={(e: React.KeyboardEvent<any>) => {
+        const key = e.key;
+
+        // While editing: handle commit/cancel locally
+        if (!disabled && isEditing) {
+          if (key === 'Enter') {
+            e.preventDefault();
+            handleCommit();
+          } else if (key === 'Escape') {
+            e.preventDefault();
+            onEditCancel?.();
+          } else if (
+            onRemove &&
+            editValue?.trim() === '' &&
+            (key === 'Backspace' || key === 'Delete' || key === 'Del')
+          ) {
+            e.preventDefault();
+            e.stopPropagation();
+            onRemove();
+          }
+          return;
+        }
+
+        // Only handle keys when focused/selected and not disabled
+        if (!disabled && isFocused) {
+          // Start editing with F2 or Enter when editable and no toggle behavior
+          if (editable && !onToggle && (key === 'F2' || key === 'Enter')) {
+            e.preventDefault();
+            onEditStart?.();
+            return;
+          }
+
+          // Toggle active state on Enter or Space when togglable
+          if (
+            onToggle &&
+            (key === 'Enter' || key === ' ' || key === 'Spacebar')
+          ) {
+            e.preventDefault();
+            const next = !isActive;
+            setIsActive(next);
+            onToggle(next);
+          }
+
+          // Trigger remove on Backspace or Delete when removable
+          if (
+            onRemove &&
+            (key === 'Backspace' || key === 'Delete' || key === 'Del')
+          ) {
+            e.preventDefault();
+            e.stopPropagation();
+            onRemove();
+          }
+        }
+
+        // Delegate to user handler last
+        restOnKeyDown?.(e);
+      }}
+      disabled={disabled}
+      aria-pressed={onToggle ? isActive : undefined}
+      style={{ transition: transition.duration + 's' }}
+    >
+      {isInteractive && !disabled && !isEditing && (
+        <State
+          style={{ transition: transition.duration + 's' }}
+          className={styles.stateLayer}
+          colorName={classNames({
+            'on-surface-variant': !isActive,
+            'on-secondary-container': isActive,
+          })}
+          stateClassName={'state-ripple-group-[chip]'}
+        />
+      )}
+
+      {icon && <Icon icon={icon} className={styles.leadingIcon} />}
+      <span
+        ref={labelRef}
+        contentEditable={!!editable && !!isEditing}
+        suppressContentEditableWarning
+        className={styles.label}
+        role={editable ? 'textbox' : undefined}
+        spellCheck={false}
+        onInput={(e) => {
+          const text = (e.currentTarget as HTMLSpanElement).innerText;
+          setEditValue(text);
+          onChange?.(text);
+        }}
+        onBlur={(e) => {
+          if (editable && isEditing) {
+            handleCommit();
+          }
+        }}
+        onKeyDown={(e) => {
+          // prevent line breaks inside contenteditable
+          if (editable && isEditing && e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            handleCommit();
+            return;
+          }
+          if (editable && isEditing && e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            onEditCancel?.();
+          }
+        }}
+      >
+        {label}
+      </span>
+      {onRemove && !isEditing && (
+        <Icon
+          icon={faXmark}
+          className={styles.trailingIcon}
+          onMouseDown={(e) => {
+            e.preventDefault(); // ⬅️ clé
+            e.stopPropagation();
+          }}
+          onClick={(e: React.MouseEvent) => {
+            e.stopPropagation();
+            if (!disabled) {
+              onRemove();
+            }
+          }}
+        />
+      )}
+    </ElementType>
+  );
+};

package/src/lib/components/Chips.tsx

@@ -0,0 +1,280 @@
+import React, { useEffect, useState } from 'react';
+import { ReactProps } from '../utils';
+import { ChipItem, ChipsInterface } from '../interfaces';
+import { useChipsStyle } from '../styles';
+import { Chip } from './Chip';
+import { Divider } from './Divider';
+import { v4 } from 'uuid';
+
+export const Chips = ({
+  variant = 'input',
+  className,
+  scrollable = true,
+  draggable = false,
+  items,
+  onItemsChange,
+}: ReactProps<ChipsInterface>) => {
+  const list = items ?? [];
+
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const [isFocused, setIsFocused] = React.useState<boolean>(false);
+
+  // Internal stable ids per item object (since ChipItem no longer exposes id)
+  const idMapRef = React.useRef<WeakMap<ChipItem, string>>(new WeakMap());
+  const getInternalId = React.useCallback((it: ChipItem) => {
+    const map = idMapRef.current;
+    let id = map.get(it);
+    if (!id) {
+      id = v4();
+      map.set(it, id);
+    }
+    return id;
+  }, []);
+
+  React.useEffect(() => {
+    if (isFocused) {
+      ref.current?.focus();
+    }
+  }, [isFocused]);
+
+  const chipRefs = React.useRef<(HTMLElement | null)[]>([]);
+
+  const updateItems = React.useCallback(
+    (updater: (prev: ChipItem[]) => ChipItem[]) => {
+      onItemsChange?.(updater(list));
+    },
+    [onItemsChange, list],
+  );
+
+  const removeAt = React.useCallback(
+    (index: number) => {
+      updateItems((prev) => prev.filter((_, i) => i !== index));
+    },
+    [updateItems],
+  );
+
+  const styles = useChipsStyle({
+    scrollable,
+    className,
+    variant,
+  });
+
+  const createAndStartEdit = React.useCallback(
+    (seedLabel = '') => {
+      if (variant !== 'input') return;
+
+      const newItem: ChipItem = {
+        label: seedLabel,
+      } as ChipItem;
+
+      // Generate internal ID for the new item
+      const newId = getInternalId(newItem);
+
+      // Ask parent to add as well
+      const next = [...list, newItem];
+      onItemsChange?.(next);
+
+      requestAnimationFrame(() => {
+        setSelectedChip(newId);
+      });
+    },
+    [variant, onItemsChange, list, getInternalId],
+  );
+
+  const [selectedChip, setSelectedChip] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (selectedChip) {
+      const index = list.findIndex(
+        (item) => getInternalId(item) === selectedChip,
+      );
+      if (index !== -1) {
+        const el = chipRefs.current[index] as any;
+        el?.focus?.();
+
+        const chipsEl = ref.current!;
+        const scrollLeft =
+          el.offsetLeft + el.offsetWidth / 2 - chipsEl.offsetWidth / 2;
+        chipsEl.scrollTo({ left: scrollLeft, behavior: 'smooth' });
+      }
+    }
+  }, [selectedChip, list, getInternalId]);
+
+  // MODE ITEMS (source de vérité locale ou contrôlée)
+  return (
+    <div
+      ref={ref}
+      role="list"
+      aria-label="Chips"
+      className={styles.chips}
+      tabIndex={variant === 'input' ? 0 : undefined}
+      onFocus={(e) => {
+        if (e.target === e.currentTarget) {
+          setIsFocused(true);
+        }
+      }}
+      onBlur={() => setIsFocused(false)}
+      onKeyDown={(e) => {
+        if (variant !== 'input') return;
+
+        const key = e.key;
+        const target = e.target as HTMLElement;
+        const isContainerFocused = target === e.currentTarget;
+
+        // If currently editing a chip, let the chip handle keys
+        if (!isFocused) return;
+
+        // Determine focused chip index if any
+        const activeEl = document.activeElement as HTMLElement | null;
+        const focusedIndex = chipRefs.current.findIndex(
+          (el) => el === activeEl,
+        );
+
+        if (key === 'ArrowLeft') {
+          e.preventDefault();
+          const nextIdx = focusedIndex > 0 ? focusedIndex - 1 : list.length - 1;
+          const elId = getInternalId(list[nextIdx]);
+          setSelectedChip(elId);
+          return;
+        }
+        if (key === 'ArrowRight') {
+          e.preventDefault();
+          const nextIdx =
+            focusedIndex >= 0
+              ? (focusedIndex + 1) % Math.max(1, list.length)
+              : 0;
+          const elId = getInternalId(list[nextIdx]);
+          setSelectedChip(elId);
+          return;
+        }
+        if (key === 'Home') {
+          e.preventDefault();
+          const elId = getInternalId(list[0]);
+          setSelectedChip(elId);
+          return;
+        }
+        if (key === 'End') {
+          e.preventDefault();
+          const elId = getInternalId(list[list.length - 1]);
+          setSelectedChip(elId);
+          return;
+        }
+
+        if (isContainerFocused) {
+          if (key === 'Enter') {
+            e.preventDefault();
+            createAndStartEdit('');
+            return;
+          }
+          if (key === 'Backspace') {
+            e.preventDefault();
+            // Focus last chip if any
+            if (list.length > 0) {
+              const el = chipRefs.current[list.length - 1] as any;
+              el?.focus?.();
+            }
+            return;
+          }
+          // Start creation when typing a printable character
+          if (key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
+            createAndStartEdit(key);
+            e.preventDefault();
+            return;
+          }
+        }
+      }}
+    >
+      {list.map((item, index) => {
+        const internalId = getInternalId(item);
+        const isInputVariant = variant === 'input';
+        const editProps = isInputVariant
+          ? {
+              editable: true,
+              editing: selectedChip === internalId,
+              onEditCommit: (next: string | undefined) => {
+                setIsFocused(true);
+                updateItems((prev) =>
+                  prev.map((it, i) =>
+                    i === index ? { ...it, label: next as any } : it,
+                  ),
+                );
+              },
+              onEditCancel: () => {
+                setIsFocused(true);
+              },
+              onChange: (next: ChipItem[]) => {
+                if (chipRefs.current.length == index + 1) {
+                  const el = ref.current!;
+                  requestAnimationFrame(() => {
+                    el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });
+                  });
+                }
+              },
+            }
+          : {};
+
+        return (
+          <Chip
+            key={internalId}
+            ref={(el: any) => (chipRefs.current[index] = el)}
+            label={item.label ?? ''}
+            icon={item.icon}
+            activated={item.activated}
+            disabled={item.disabled}
+            variant={item.variant}
+            href={item.href}
+            draggable={draggable}
+            {...editProps}
+            onToggle={
+              item.activated === undefined
+                ? undefined
+                : (next) =>
+                    updateItems((prev) =>
+                      prev.map((it, i) =>
+                        i === index ? { ...it, activated: next } : it,
+                      ),
+                    )
+            }
+            onBlur={() => {
+              if (selectedChip === internalId) {
+                setSelectedChip(null);
+              }
+            }}
+            onRemove={
+              isInputVariant
+                ? () => {
+                    setIsFocused(true);
+                    removeAt(index);
+                  }
+                : undefined
+            }
+          />
+        );
+      })}
+      {isFocused && (
+        <>
+          <Divider
+            orientation="vertical"
+            className="animate-[var(--animate-blink)] border-outline"
+            style={
+              {
+                '--animate-blink':
+                  'blink 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+              } as React.CSSProperties
+            }
+          />
+
+          <style>
+            {`
+        @keyframes blink {
+          0%, 50% { opacity: 1; }
+          50.01%, 100% { opacity: 0; }
+        }
+      `}
+          </style>
+        </>
+      )}
+    </div>
+  );
+};

package/src/lib/components/IconButton.tsx

@@ -48,26 +48,18 @@ export const IconButton = ({
 
   const [isActive, setIsActive] = React.useState(activated);
 
-  let handleClick;
-  if (!onToggle) {
-    handleClick = (e: React.MouseEvent<any, MouseEvent>) => {
-      if (disabled) {
-        e.preventDefault();
-      }
-      if (onClick) {
-        onClick(e);
-      }
-    };
-  } else if (onToggle) {
-    handleClick = (e: React.MouseEvent<any, MouseEvent>) => {
-      if (disabled) {
-        e.preventDefault();
-      }
+  const handleClick = (e: React.MouseEvent<any, MouseEvent>) => {
+    if (disabled) {
+      e.preventDefault();
+    }
+    if (onToggle) {
       setIsActive(!isActive);
-      onToggle(Boolean(isActive));
-    };
-    icon = isActive ? (iconSelected ? iconSelected : icon) : icon;
-  }
+      onToggle(!isActive);
+    } else if (onClick) {
+      onClick(e);
+    }
+  };
+
   useEffect(() => {
     setIsActive(activated);
   }, [activated]);

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