@indico-data/design-system 2.32.1 → 2.33.1

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, isPortal, floatingOptions, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;

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

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

package/package.json

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

package/src/components/button/styles/Button.scss

@@ -40,10 +40,6 @@
 .btn--icon-only {
   padding-left: var(--pf-padding-2);
   padding-right: var(--pf-padding-2);
-
-  &.btn--md {
-    height: 32px;
-  }
 }
 
 @mixin button-variant($color-name) {

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

@@ -63,6 +63,17 @@ const meta: Meta<typeof FloatUI> = {
         },
       },
     },
+    portalOptions: {
+      control: 'object',
+      description:
+        'Options for configuring the portal behavior. Includes the rootId, which is the id of the root element to render the portal into.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'PortalOptions',
+        },
+      },
+    },
     setIsOpen: {
       control: false,
       description: 'Function to toggle the visibility of the FloatUI (for controlled mode).',

package/src/components/floatUI/FloatUI.tsx

@@ -22,6 +22,7 @@ export function FloatUI({
   isOpen: controlledIsOpen,
   setIsOpen: controlledSetIsOpen,
   isPortal = false,
+  portalOptions = {},
   floatingOptions = defaultOptions,
 }: FloatUIProps) {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
@@ -80,7 +81,12 @@ export function FloatUI({
       <div ref={referenceElementRef} onClick={() => setIsOpen(!isOpen)}>
         {trigger}
       </div>
-      {isOpen && (isPortal ? <FloatingPortal>{tooltipContent}</FloatingPortal> : tooltipContent)}
+      {isOpen &&
+        (isPortal ? (
+          <FloatingPortal id={portalOptions?.rootId}>{tooltipContent}</FloatingPortal>
+        ) : (
+          tooltipContent
+        ))}
     </>
   );
 }

package/src/components/floatUI/types.ts

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