@udixio/ui-react 2.10.12 → 2.10.14

package/src/lib/components/Chip.tsx

@@ -1,341 +0,0 @@
-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
- * @devx
- * - `editable` relies on contentEditable; label should be a string.
- * - `onToggle` uses internal state; pair with `activated` for controlled usage.
- * @a11y
- * - Uses `aria-pressed` only when togglable.
- * @limitations
- * - Edit mode starts after a 1s focus delay (no prop to customize).
- */
-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 || !!editable;
-
-  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

@@ -1,331 +0,0 @@
-import React, { useEffect, useRef, 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';
-
-/**
- * Chips group for input or selection lists
- * @status beta
- * @category Input
- * @devx
- * - Works best as controlled: pass `items` + `onItemsChange`.
- * - Internal ids are derived from object identity; replace items carefully.
- * @limitations
- * - No virtualization; very large lists can be slow.
- */
-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) {
-      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));
-    },
-    [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;
-
-      // Guard against multiple rapid creations
-      if (isCreatingRef.current) return;
-      isCreatingRef.current = true;
-
-      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);
-        // Reset guard after chip is selected
-        isCreatingRef.current = false;
-      });
-    },
-    [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)
-
-  const ghostChipRef = useRef<HTMLButtonElement>(null);
-
-  const isGhostChip = (isFocused || list.length === 0) && variant === 'input';
-
-  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 === 'Backspace') {
-            e.preventDefault();
-            // Focus last chip if any
-            if (list.length > 0) {
-              const el = chipRefs.current[list.length - 1] as any;
-              el?.focus?.();
-            }
-            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: () => {
-                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>
-        </>
-      )}
-      {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>
-  );
-};