@udixio/ui-react 2.8.4 → 2.9.3

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