@udixio/ui-react 2.9.8 → 2.9.10

package/src/stories/communication/tool-tip.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Button, ReactProps, ToolTip, ToolTipInterface } from '../../lib';
+import { Button, ReactProps, Tooltip, ToolTipInterface } from '../../lib';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: 'Communication/ToolTip',
-  component: ToolTip,
+  component: Tooltip,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
   },
@@ -12,7 +12,7 @@ const meta = {
   tags: ['autodocs'],
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {},
-} satisfies Meta<typeof ToolTip>;
+} satisfies Meta<typeof Tooltip>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -27,84 +27,84 @@ const createToolTipStory = (
     <div className="h-96 relative">
       <div className="h-96 relative">
         <div className="absolute top-0 left-0">
-          <ToolTip
+          <Tooltip
             position="bottom-right"
             {...args}
             text="Cliquez pour plus d'infos"
             title="Info rapide"
           >
             <Button variant={'filledTonal'} label={'Bottom-right'}></Button>
-          </ToolTip>
+          </Tooltip>
         </div>
         <div className="absolute top-0 left-1/2 -translate-x-1/2">
-          <ToolTip
+          <Tooltip
             position="bottom"
             {...args}
             text="Cet élément représente les statistiques globales de votre projet."
             title="Statistiques"
           >
             <Button variant={'filledTonal'} label={'Bottom-center'}></Button>
-          </ToolTip>
+          </Tooltip>
         </div>
         <div className="absolute top-0 right-0">
-          <ToolTip
+          <Tooltip
             position="bottom-left"
             {...args}
             text="Cliquez ici pour télécharger le fichier associé."
             title="Téléchargement"
           >
             <Button variant={'filledTonal'} label={'Bottom-left'}></Button>
-          </ToolTip>
+          </Tooltip>
         </div>
         <div className="absolute top-1/2 left-0 -translate-y-1/2">
-          <ToolTip
+          <Tooltip
             position="right"
             {...args}
             text="Cette action ne peut pas être annulée une fois confirmée."
             title="Attention"
           >
             <Button variant={'filledTonal'} label={'Center-right'}></Button>
-          </ToolTip>
+          </Tooltip>
         </div>
         <div className="absolute top-1/2 right-0 -translate-y-1/2">
-          <ToolTip
+          <Tooltip
             position="left"
             {...args}
             text="Modifiez les paramètres dans l'onglet dédié à la personnalisation."
             title="Personnalisation"
           >
             <Button variant={'filledTonal'} label={'Center-left'}></Button>
-          </ToolTip>
+          </Tooltip>
         </div>
         <div className="absolute bottom-0 left-0">
-          <ToolTip
+          <Tooltip
             position="top-right"
             {...args}
             text="L'action demandée supprimera toutes les données correspondantes."
             title="Suppression de données"
           >
             <Button variant={'filledTonal'} label={'Top-right'}></Button>
-          </ToolTip>
+          </Tooltip>
         </div>
         <div className="absolute bottom-0 left-1/2 -translate-x-1/2">
-          <ToolTip
+          <Tooltip
             position="top"
             {...args}
             text="Double-cliquez pour agrandir l'aperçu de l'élément sélectionné."
             title="Aperçu"
           >
             <Button variant={'filledTonal'} label={'Top-center'}></Button>
-          </ToolTip>
+          </Tooltip>
         </div>
         <div className="absolute bottom-0 right-0">
-          <ToolTip
+          <Tooltip
             position="top-left"
             {...args}
             text="Passez la souris sur d'autres icônes pour plus de détails."
             title="Icones et navigation"
           >
             <Button variant={'filledTonal'} label={'Top-left'}></Button>
-          </ToolTip>
+          </Tooltip>
         </div>
       </div>
     </div>

package/dist/lib/components/ToolTip.d.ts

@@ -1,9 +0,0 @@
-import { MotionProps } from '../utils';
-import { ToolTipInterface } from '../interfaces';
-/**
- * Tooltips display brief labels or messages
- * @status beta
- * @category Communication
- */
-export declare const ToolTip: ({ variant, buttons, className, children, title, text, position, targetRef, ref, trigger, transition, ...props }: MotionProps<ToolTipInterface>) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ToolTip.d.ts.map

package/dist/lib/components/ToolTip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolTip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ToolTip.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAMjD;;;;GAIG;AACH,eAAO,MAAM,OAAO,GAAI,iHAarB,WAAW,CAAC,gBAAgB,CAAC,4CA8N/B,CAAC"}

package/src/lib/components/ToolTip.tsx

@@ -1,256 +0,0 @@
-import {
-  cloneElement,
-  isValidElement,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import { MotionProps } from '../utils';
-import { Button } from './Button';
-import { ToolTipInterface } from '../interfaces';
-import { useToolTipStyle } from '../styles';
-import { v4 } from 'uuid';
-import { AnimatePresence, motion } from 'motion/react';
-import { SyncedFixedWrapper } from '../effects';
-
-/**
- * Tooltips display brief labels or messages
- * @status beta
- * @category Communication
- */
-export const ToolTip = ({
-  variant = 'plain',
-  buttons,
-  className,
-  children,
-  title,
-  text,
-  position,
-  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');
-  }
-  if (!Array.isArray(trigger)) {
-    trigger = [trigger];
-  }
-
-  if (buttons && !Array.isArray(buttons)) {
-    buttons = [buttons];
-  }
-
-  const internalRef = useRef<HTMLElement | null>(null); // Ref interne au cas où targetRef est undefined
-  const resolvedRef = targetRef || internalRef; // Utilise targetRef si défini, sinon internalRef
-
-  const [currentToolTipId, setCurrentToolTipId] = useState<string | null>(null);
-  const [id] = useState(v4());
-  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) => {
-      setCurrentToolTipId(event.detail);
-    };
-
-    document.addEventListener('tooltip-update', handleUpdate as EventListener);
-    return () => {
-      document.removeEventListener(
-        'tooltip-update',
-        handleUpdate as EventListener,
-      );
-    };
-  }, []);
-
-  useEffect(() => {
-    if (timeout.current) clearTimeout(timeout.current);
-    if (showTimeout.current) clearTimeout(showTimeout.current);
-
-    if (currentToolTipId) {
-      if (currentToolTipId === id) {
-        showTimeout.current = setTimeout(
-          () => {
-            setIsVisible(true);
-          },
-          (transition?.delay ?? 0) * 1000,
-        );
-      } else {
-        setIsVisible(false);
-      }
-    } else {
-      timeout.current = setTimeout(() => {
-        setIsVisible(false);
-      }, 1200);
-    }
-  }, [currentToolTipId, id]);
-
-  // Ajouter des gestionnaires sur l'élément cible (targetRef ou internalRef)
-
-  const handleMouseEnter = () => {
-    if (trigger.includes('hover')) {
-      const event = new CustomEvent('tooltip-update', { detail: id });
-      document.dispatchEvent(event);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (trigger.includes('hover')) {
-      const event = new CustomEvent('tooltip-update', { detail: null });
-      document.dispatchEvent(event);
-    }
-  };
-
-  const handleClick = () => {
-    if (trigger.includes('click')) {
-      const event = new CustomEvent('tooltip-update', {
-        detail: isVisible ? null : id,
-      });
-      document.dispatchEvent(event);
-    }
-  };
-
-  const handleFocus = () => {
-    if (trigger.includes('focus')) {
-      const event = new CustomEvent('tooltip-update', { detail: id });
-      document.dispatchEvent(event);
-    }
-  };
-
-  const handleBlur = () => {
-    if (trigger.includes('focus')) {
-      const event = new CustomEvent('tooltip-update', { detail: null });
-      document.dispatchEvent(event);
-    }
-  };
-
-  useEffect(() => {
-    if (resolvedRef?.current) {
-      const targetElement = resolvedRef.current;
-
-      targetElement.addEventListener('mouseenter', handleMouseEnter);
-      targetElement.addEventListener('mouseleave', handleMouseLeave);
-      targetElement.addEventListener('click', handleClick);
-      targetElement.addEventListener('focus', handleFocus);
-      targetElement.addEventListener('blur', handleBlur);
-
-      // Nettoyage au démontage
-      return () => {
-        targetElement.removeEventListener('mouseenter', handleMouseEnter);
-        targetElement.removeEventListener('mouseleave', handleMouseLeave);
-        targetElement.removeEventListener('click', handleClick);
-        targetElement.removeEventListener('focus', handleFocus);
-        targetElement.removeEventListener('blur', handleBlur);
-      };
-    }
-    return;
-  }, [resolvedRef, trigger, id, isVisible]);
-
-  // Si targetRef est undefined, on applique la réf au premier enfant
-  const enhancedChildren =
-    !targetRef && isValidElement(children)
-      ? cloneElement(children, { ref: internalRef } as any)
-      : children;
-
-  if (!position && typeof window !== 'undefined') {
-    if (resolvedRef?.current && !position) {
-      const rect = resolvedRef.current.getBoundingClientRect();
-
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-
-      const x = rect.left / viewportWidth; // X entre 0 et 1
-      const y = rect.top / viewportHeight; // Y entre 0 et 1
-
-      if (variant === 'plain') {
-        if (x < 1 / 3) {
-          position = 'right';
-        } else if (x > 2 / 3) {
-          position = 'left';
-        } else {
-          position = y > 0.5 ? 'top' : 'bottom';
-        }
-      } else {
-        if (x < 1 / 2 && y < 1 / 2) {
-          position = 'bottom-right';
-        } else if (x > 1 / 2 && y < 1 / 2) {
-          position = 'bottom-left';
-        } else if (x > 1 / 2 && y > 1 / 2) {
-          position = 'top-left';
-        } else if (x < 1 / 2 && y > 1 / 2) {
-          position = 'top-right';
-        }
-      }
-    }
-  }
-
-  const styles = useToolTipStyle({
-    variant,
-    buttons,
-    className,
-    title,
-    text,
-    position,
-    trigger,
-    targetRef: targetRef as any,
-    children: children as any,
-  });
-
-  const variants = {
-    open: {
-      opacity: 1,
-      height: 'auto',
-    },
-    close: {
-      opacity: 0,
-      height: 16,
-    },
-  };
-
-  return (
-    <>
-      {enhancedChildren}
-      <AnimatePresence>
-        {isVisible && (
-          <SyncedFixedWrapper targetRef={resolvedRef}>
-            <motion.div
-              initial={'close'}
-              variants={variants}
-              animate={'open'}
-              transition={{ duration: transition.duration }}
-              exit={'close'}
-              className={styles.toolTip}
-              {...props}
-              onMouseEnter={handleMouseEnter}
-              onMouseLeave={handleMouseLeave}
-            >
-              <div className={styles.container}>
-                {title && <div className={styles.subHead}>{title}</div>}
-                <div className={styles.supportingText}>{text}</div>
-                {buttons && (
-                  <div className={styles.actions}>
-                    {Array.isArray(buttons) &&
-                      buttons.map((buttonArgs, index) => (
-                        <Button
-                          key={index}
-                          size={'small'}
-                          variant={'text'}
-                          {...buttonArgs}
-                        />
-                      ))}
-                  </div>
-                )}
-              </div>
-            </motion.div>
-          </SyncedFixedWrapper>
-        )}
-      </AnimatePresence>
-    </>
-  );
-};