Merge branch 'main' into edit-crag

Author: demshy

src/app/sandbox/date-picker/page.tsx

@@ -19,6 +19,12 @@ function DatePickerPage() {
     year: 2024,
   });
 
+  const [value3, setValue3] = useState<TDate>({
+    day: 19,
+    month: 5,
+    year: 2024,
+  });
+
   return (
     <div>
       <div className="relative mx-auto mt-8 w-80">
@@ -33,6 +39,12 @@ function DatePickerPage() {
           <DatePicker value={value1} onChange={setValue1} />
         </div>
       </div>
+      <div className="relative mx-auto mt-8 w-80">
+        A second regular datepicker to test overflow
+        <div className="mt-2">
+          <DatePicker value={value3} onChange={setValue3} />
+        </div>
+      </div>
     </div>
   );
 }

src/components/ui/date-picker.tsx

@@ -572,7 +572,7 @@ function DatePicker({
         <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
           <div
             ref={calendarPaneRef}
-            className="absolute mt-2 w-[256px] min-[400px]:w-[298px] rounded-lg border border-neutral-400 bg-white px-2 py-3"
+            className="absolute z-50 mt-2 w-[256px] min-[400px]:w-[298px] rounded-lg border border-neutral-400 bg-white px-2 py-3"
           >
             <div className="flex justify-between">
               {/* month shuffler */}

src/components/ui/select.tsx

@@ -193,19 +193,14 @@ function InnerListBox({
         <Description className="text-sm mt-1">{description}</Description>
       )}
 
-      <div
-        className={`absolute z-10 pb-2 ${
-          customTrigger
-            ? "w-auto whitespace-nowrap max-xs:fixed max-xs:left-4 max-xs:right-4"
-            : "w-full"
-        }`}
+      <ListboxOptions
+        anchor="bottom start"
+        className={`${!customTrigger && "min-w-[var(--button-width)] "} [--anchor-gap:8px] [--anchor-padding:8px] overflow-hidden rounded-lg border border-neutral-400 bg-white focus-visible:outline-none focus-visible:ring focus-visible:ring-blue-100`}
       >
-        <ListboxOptions className="mt-2 overflow-hidden rounded-lg border border-neutral-400 bg-white focus-visible:outline-none focus-visible:ring focus-visible:ring-blue-100">
-          <div ref={listboxOptionsRef} className="max-h-80 overflow-auto">
-            {children}
-          </div>
-        </ListboxOptions>
-      </div>
+        <div ref={listboxOptionsRef} className="max-h-80 overflow-auto">
+          {children}
+        </div>
+      </ListboxOptions>
     </Field>
   );
 }