@indico-data/design-system 3.16.1 → 3.18.0

package/package.json

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

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

@@ -85,6 +85,20 @@ const meta: Meta<typeof FloatUI> = {
         },
       },
     },
+    disableAutoUpdate: {
+      control: 'boolean',
+      description:
+        'Disables automatic position updates when the reference element moves. Escape hatch for very performance-critical scenarios.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
   },
   decorators: [
     (Story: React.ComponentType) => (

package/src/components/floatUI/FloatUI.tsx

@@ -13,6 +13,7 @@ import {
   useDismiss,
   ReferenceType,
   VirtualElement,
+  autoUpdate,
 } from '@floating-ui/react';
 import { FloatUIProps } from './types';
 
@@ -32,6 +33,7 @@ export function FloatUI({
   className,
   hover = false,
   onOpenChange,
+  disableAutoUpdate = false,
 }: FloatUIProps) {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
 
@@ -65,6 +67,9 @@ export function FloatUI({
       setIsOpen(isOpen);
       onOpenChange?.(isOpen);
     },
+    whileElementsMounted: disableAutoUpdate
+      ? undefined
+      : (floatingOptions.whileElementsMounted ?? autoUpdate),
     elements: {
       reference: referenceElement as Element | null,
     },

package/src/components/floatUI/types.ts

@@ -23,4 +23,6 @@ export type FloatUIProps = {
   hover?: boolean;
   /** Callback function to be called when the FloatUI is opened or closed. */
   onOpenChange?: (isOpen: boolean) => void;
+  /** If true, disables automatic position updates when the reference element moves (e.g., due to layout shifts). Defaults to false. */
+  disableAutoUpdate?: boolean;
 };

package/src/components/forms/date/datePicker/styles/DatePicker.scss

@@ -13,6 +13,8 @@
   .rdp-root {
     --rdp-accent-color: var(--pf-semantic-font-link);
     --rdp-font-family: var(--pf-font-family-base);
+    --rdp-day-height: 35px;
+    --rdp-day-width: 35px;
 
     // range
     --rdp-range_middle-background-color: var(--pf-semantic-page-background);