Improve placement of the DateInput dialog (#2775)

sumup-oss · Nov 13, 2024 · 1b12634 · 1b12634
1 parent 49a17da
commit 1b12634
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 3 deletions.
diff --git a/.changeset/quiet-apples-develop.md b/.changeset/quiet-apples-develop.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Improved the DateInput component's calendar dialog to be placed on the side with the most available space and to scroll when it overflows the viewport.
diff --git a/.changeset/silent-lobsters-peel.md b/.changeset/silent-lobsters-peel.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": patch
+---
+
+Stretched the DateInput component to take up the available width.
diff --git a/packages/circuit-ui/components/DateInput/DateInput.module.css b/packages/circuit-ui/components/DateInput/DateInput.module.css
@@ -10,6 +10,7 @@
   position: relative;
   z-index: var(--cui-z-index-absolute);
   display: flex;
+  flex-grow: 1;
   gap: 2px;
   min-width: 170px;
   padding: var(--cui-spacings-byte) var(--cui-spacings-mega);

diff --git a/packages/circuit-ui/components/DateInput/DateInput.tsx b/packages/circuit-ui/components/DateInput/DateInput.tsx
@@ -24,7 +24,7 @@ import {
   type InputHTMLAttributes,
 } from 'react';
 import type { Temporal } from 'temporal-polyfill';
-import { flip, offset, shift, useFloating } from '@floating-ui/react-dom';
+import { flip, offset, shift, size, useFloating } from '@floating-ui/react-dom';
 import { Calendar as CalendarIcon } from '@sumup-oss/icons';
 
 import type { ClickEvent } from '../../types/events.js';
@@ -211,7 +211,16 @@ export const DateInput = forwardRef<HTMLInputElement, DateInputProps>(
     const { floatingStyles, update } = useFloating({
       open,
       placement: 'bottom-start',
-      middleware: [offset(4), flip(), shift()],
+      middleware: [
+        offset(4),
+        flip({ fallbackAxisSideDirection: 'end', crossAxis: false }),
+        shift(),
+        size({
+          apply({ availableHeight, elements }) {
+            elements.floating.style.maxHeight = `${availableHeight}px`;
+          },
+        }),
+      ],
       elements: {
         reference: fieldRef.current,
         floating: dialogRef.current,

diff --git a/packages/circuit-ui/components/DateInput/components/Dialog.tsx b/packages/circuit-ui/components/DateInput/components/Dialog.tsx
@@ -94,7 +94,7 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>(
         dialogElement.removeEventListener('close', onClose);
         dialogElement.removeEventListener('click', onClickListener);
       };
-    }, [onClose]);
+    }, [onClose, onClickListener]);
 
     useEffect(() => {
       const dialogElement = dialogRef.current;