@indico-data/design-system 2.34.1 → 2.34.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.34.1",
+  "version": "2.34.3",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/floatUI/FloatUI.test.tsx

@@ -27,24 +27,6 @@ describe('FloatUI Component', () => {
     expect(screen.getByText('FloatUI Content')).toBeInTheDocument();
   });
 
-  it('closes the FloatUI when clicked outside in uncontrolled mode', () => {
-    render(
-      <div>
-        <div data-testid="outside">Outside Element</div>
-        <FloatUI ariaLabel="Example FloatUI">
-          <Button ariaLabel="Toggle FloatUI">Toggle</Button>
-          <div>FloatUI Content</div>
-        </FloatUI>
-      </div>,
-    );
-
-    // Open the FloatUI
-    fireEvent.click(screen.getByText('Toggle'));
-
-    fireEvent.mouseDown(screen.getByTestId('outside'));
-    expect(screen.queryByText('FloatUI Content')).not.toBeInTheDocument();
-  });
-
   it('renders the correct children inside the FloatUI when open in uncontrolled mode', () => {
     render(
       <FloatUI ariaLabel="Example FloatUI">
@@ -124,6 +106,6 @@ describe('FloatUI Component', () => {
     );
 
     fireEvent.click(screen.getByText('Toggle'));
-    expect(setIsOpen).toHaveBeenCalledWith(true);
+    expect(setIsOpen).toHaveBeenCalledWith(true, expect.any(Object), 'click');
   });
 });

package/src/components/floatUI/FloatUI.tsx

@@ -1,14 +1,16 @@
-import React, { useState, useRef, isValidElement, ReactNode } from 'react';
+import React, { useRef, isValidElement, useState } from 'react';
 import {
+  FloatingPortal,
+  useClick,
   useFloating,
+  useInteractions,
   UseFloatingOptions,
   offset,
   flip,
   shift,
   Placement,
-} from '@floating-ui/react-dom';
-import { FloatingPortal } from '@floating-ui/react';
-import { useClickOutside } from '@/hooks/useClickOutside';
+  useDismiss,
+} from '@floating-ui/react';
 import { FloatUIProps } from './types';
 
 const defaultOptions: UseFloatingOptions = {
@@ -48,24 +50,25 @@ export function FloatUI({
     throw new Error('Both children of FloatUI must be valid React elements.');
   }
 
-  const { x, y, strategy, refs } = useFloating({
+  const { refs, floatingStyles, context } = useFloating({
+    ...floatingOptions,
+    open: isOpen,
+    onOpenChange: setIsOpen,
     elements: {
       reference: referenceElementRef.current,
     },
-    ...floatingOptions,
   });
 
-  useClickOutside(floatUIContentRef, () => setIsOpen(false));
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
 
   const tooltipContent = (
     <div
-      // Used to position the floating element relative to the reference element
       ref={refs.setFloating}
-      style={{
-        position: strategy,
-        top: y ?? 0,
-        left: x ?? 0,
-      }}
+      {...getFloatingProps()}
+      style={floatingStyles}
       role="dialog"
       aria-label={ariaLabel}
       className="floatui-container"
@@ -78,7 +81,7 @@ export function FloatUI({
 
   return (
     <>
-      <div ref={referenceElementRef} onClick={() => setIsOpen(!isOpen)}>
+      <div ref={refs.setReference} {...getReferenceProps()}>
         {trigger}
       </div>
       {isOpen &&

package/src/components/forms/checkbox/Checkbox.tsx

@@ -24,6 +24,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
             id={id}
             name={name}
             value={value}
+            checked={isChecked}
             disabled={isDisabled}
             ref={ref}
             onChange={onChange}

package/lib/src/hooks/useClickOutside.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const useClickOutside: (ref: React.MutableRefObject<HTMLElement>, handler: (e: MouseEvent | TouchEvent) => void) => void;

package/src/hooks/useClickOutside.tsx

@@ -1,22 +0,0 @@
-import React, { useEffect } from 'react';
-
-export const useClickOutside = (
-  ref: React.MutableRefObject<HTMLElement>,
-  handler: (e: MouseEvent | TouchEvent) => void,
-) => {
-  useEffect(() => {
-    const listener = (e: MouseEvent | TouchEvent) => {
-      if (!ref.current || ref.current.contains(e.target as Node)) {
-        return;
-      }
-      handler(e);
-    };
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, handler]);
-};