Improve grid integration with new datepicker

packages/bbui/src/Actions/position_dropdown.js

@@ -39,11 +39,13 @@ export default function positionDropdown(element, opts) {
       styles = customUpdate(anchorBounds, elementBounds, styles)
     } else {
       // Determine vertical styles
+      const topSpace = anchorBounds.top
+      const bottomSpace = window.innerHeight - anchorBounds.bottom
       if (align === "right-outside") {
         styles.top = anchorBounds.top
       } else if (
-        window.innerHeight - anchorBounds.bottom <
+        window.innerHeight - anchorBounds.bottom < (maxHeight || 100) &&
-        (maxHeight || 100)
+        topSpace - bottomSpace > 100
       ) {
         styles.top = anchorBounds.top - elementBounds.height - offset
         styles.maxHeight = maxHeight || 240

packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte

@@ -1,10 +1,15 @@
 <script>
   import FlatpickrDatePicker from "./FlatpickrDatePicker.svelte"
   import SpectrumDatePicker from "./SpectrumDatePicker.svelte"
+
+  export let api
 </script>
 
 <svelte:component
   this={$$props.range ? FlatpickrDatePicker : SpectrumDatePicker}
   {...$$props}
   on:change
+  on:open
+  on:close
+  bind:api
 />

packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte

@@ -4,7 +4,7 @@
   import "@spectrum-css/textfield/dist/index-vars.css"
   import Popover from "../../../Popover/Popover.svelte"
   import dayjs from "dayjs"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, onMount } from "svelte"
   import TimePicker from "./TimePicker.svelte"
   import Calendar from "./Calendar.svelte"
   import DateTimeInput from "./DateInput.svelte"
@@ -19,6 +19,9 @@
   export let timeOnly = false
   export let ignoreTimezones = false
   export let useKeyboardShortcuts = true
+  export let appendTo = null
+  export let api = null
+  export let align = "left"
 
   const dispatch = createEventDispatcher()
 
@@ -114,6 +117,13 @@
     calendar?.setDate(now)
     handleChange(now)
   }
+
+  onMount(() => {
+    api = {
+      open: () => popover?.show(),
+      close: () => popover?.hide(),
+    }
+  })
 </script>
 
 <DateTimeInput
@@ -132,9 +142,14 @@
 
 <Popover
   bind:this={popover}
+  on:open
+  on:close
   on:open={onOpen}
   on:close={onClose}
   {anchor}
+  portalTarget={appendTo}
+  maxHeight={374}
+  maxWidth={296}
   align="left"
 >
   {#if isOpen}

packages/frontend-core/src/components/grid/cells/DateCell.svelte

@@ -10,7 +10,7 @@
   export let readonly = false
   export let api
 
-  let flatpickr
+  let datePickerAPI
   let isOpen
 
   // Adding the 0- will turn a string like 00:00:00 into a valid ISO
@@ -41,7 +41,7 @@
   // Ensure we close flatpickr when unselected
   $: {
     if (!focused) {
-      flatpickr?.close()
+      datePickerAPI?.close()
     }
   }
 
@@ -52,8 +52,8 @@
   onMount(() => {
     api = {
       onKeyDown,
-      focus: () => flatpickr?.open(),
+      focus: () => datePickerAPI?.open(),
-      blur: () => flatpickr?.close(),
+      blur: () => datePickerAPI?.close(),
       isActive: () => isOpen,
     }
   })
@@ -75,12 +75,10 @@
     <CoreDatePicker
       {value}
       on:change={e => onChange(e.detail)}
-      appendTo={document.documentElement}
       enableTime={!dateOnly}
       {timeOnly}
-      time24hr
       ignoreTimezones={schema.ignoreTimezones}
-      bind:flatpickr
+      bind:api={datePickerAPI}
       on:open={() => (isOpen = true)}
       on:close={() => (isOpen = false)}
       useKeyboardShortcuts={false}
@@ -110,9 +108,6 @@
     position: absolute;
     opacity: 0;
   }
-  .picker :global(.flatpickr) {
-    min-width: 0;
-  }
   .picker :global(.spectrum-Textfield-input) {
     width: 100%;
   }