@indico-data/design-system 2.31.0 → 2.32.0

package/lib/src/components/floatUI/FloatUI.d.ts

@@ -1,2 +1,2 @@
 import { FloatUIProps } from './types';
-export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, floatingOptions, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, floatingOptions, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;

package/lib/src/components/floatUI/types.d.ts

@@ -5,5 +5,6 @@ export type FloatUIProps = {
     ariaLabel: string;
     floatingOptions?: UseFloatingOptions;
     isOpen?: boolean;
+    isPortal?: boolean;
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.31.0",
+  "version": "2.32.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -71,6 +71,7 @@
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@floating-ui/react": "^0.26.22",
     "@mdx-js/loader": "^3.0.1",
     "@react-aria/button": "^3.9.3",
     "@react-aria/focus": "^3.16.2",

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

@@ -51,6 +51,18 @@ const meta: Meta<typeof FloatUI> = {
         },
       },
     },
+    isPortal: {
+      control: 'boolean',
+      defaultValue: false,
+      description:
+        'Controls whether the FloatUI content is rendered as a portal (i.e. rendered outside the app root and into the body)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
     setIsOpen: {
       control: false,
       description: 'Function to toggle the visibility of the FloatUI (for controlled mode).',

package/src/components/floatUI/FloatUI.tsx

@@ -7,6 +7,7 @@ import {
   shift,
   Placement,
 } from '@floating-ui/react-dom';
+import { FloatingPortal } from '@floating-ui/react';
 import { useClickOutside } from '@/hooks/useClickOutside';
 import { FloatUIProps } from './types';
 
@@ -20,6 +21,7 @@ export function FloatUI({
   ariaLabel,
   isOpen: controlledIsOpen,
   setIsOpen: controlledSetIsOpen,
+  isPortal = false,
   floatingOptions = defaultOptions,
 }: FloatUIProps) {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
@@ -54,29 +56,31 @@ export function FloatUI({
 
   useClickOutside(floatUIContentRef, () => setIsOpen(false));
 
+  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,
+      }}
+      role="dialog"
+      aria-label={ariaLabel}
+      className="floatui-container"
+    >
+      <div ref={floatUIContentRef} className="floatui-content">
+        {content}
+      </div>
+    </div>
+  );
+
   return (
     <>
       <div ref={referenceElementRef} onClick={() => setIsOpen(!isOpen)}>
         {trigger}
       </div>
-      {isOpen && (
-        <div
-          // Used to position the floating element relative to the reference element
-          ref={refs.setFloating}
-          style={{
-            position: strategy,
-            top: y ?? 0,
-            left: x ?? 0,
-          }}
-          role="dialog"
-          aria-label={ariaLabel}
-          className="floatui-container"
-        >
-          <div ref={floatUIContentRef} className="floatui-content">
-            {content}
-          </div>
-        </div>
-      )}
+      {isOpen && (isPortal ? <FloatingPortal>{tooltipContent}</FloatingPortal> : tooltipContent)}
     </>
   );
 }

package/src/components/floatUI/types.ts

@@ -6,5 +6,6 @@ export type FloatUIProps = {
   ariaLabel: string;
   floatingOptions?: UseFloatingOptions;
   isOpen?: boolean;
+  isPortal?: boolean;
   setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 };