Improve position dropdown and update click handlers to ignore new datepicker

packages/bbui/src/Actions/click_outside.js

@@ -1,5 +1,6 @@
 const ignoredClasses = [
   ".flatpickr-calendar",
+  ".spectrum-Calendar",
   ".spectrum-Popover",
   ".download-js-link",
 ]

packages/bbui/src/Actions/position_dropdown.js

@@ -41,6 +41,8 @@ export default function positionDropdown(element, opts) {
         offset: opts.offset,
       })
     } else {
+      const renderHeight = maxHeight || elementBounds.height
+
       // Determine vertical styles
       const topSpace = anchorBounds.top
       const bottomSpace = window.innerHeight - anchorBounds.bottom
@@ -52,11 +54,11 @@ export default function positionDropdown(element, opts) {
           styles.top = window.innerHeight - elementBounds.height
         }
       } else if (
-        window.innerHeight - anchorBounds.bottom < (maxHeight || 100) &&
+        window.innerHeight - anchorBounds.bottom < renderHeight + offset &&
         topSpace - bottomSpace > 100
       ) {
-        styles.top = anchorBounds.top - elementBounds.height - offset
+        styles.top = anchorBounds.top - renderHeight - offset
-        styles.maxHeight = maxHeight || 240
+        styles.maxHeight = maxHeight
       } else {
         styles.top = anchorBounds.bottom + offset
         styles.maxHeight =

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

@@ -3,12 +3,13 @@
 
   export let anchor
   export let disabled
+  export let readonly
   export let error
   export let focused
   export let placeholder
   export let id
   export let value
-  export let icon = "Calendar"
+  export let icon
   export let enableTime
   export let timeOnly
 
@@ -32,11 +33,11 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   bind:this={anchor}
-  class:is-disabled={disabled}
+  class:is-disabled={disabled || readonly}
   class:is-invalid={!!error}
   class="spectrum-InputGroup spectrum-Datepicker"
   class:is-focused={focused}
-  aria-readonly="false"
+  aria-readonly={readonly}
   aria-required="false"
   aria-haspopup="true"
   on:click
@@ -57,6 +58,7 @@
     {/if}
     <input
       {disabled}
+      {readonly}
       data-input
       type="text"
       class="spectrum-Textfield-input spectrum-InputGroup-input"

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

@@ -13,6 +13,7 @@
 
   export let id = null
   export let disabled = false
+  export let readonly = false
   export let error = null
   export let enableTime = true
   export let value = null
@@ -108,6 +109,7 @@
 <DateTimeInput
   bind:anchor
   {disabled}
+  {readonly}
   {error}
   {placeholder}
   {id}
@@ -125,8 +127,9 @@
   on:close
   on:open={onOpen}
   on:close={onClose}
-  {anchor}
   portalTarget={appendTo}
+  maxHeight={null}
+  {anchor}
   {align}
 >
   {#if isOpen}

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

@@ -155,6 +155,7 @@
   useAnchorWidth={!autoWidth}
   maxWidth={autoWidth ? 400 : null}
   customHeight={customPopoverHeight}
+  maxHeight={240}
 >
   <div
     class="popover-content"

packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte

@@ -20,6 +20,7 @@
 
   const ignoredOriginSelectors = [
     ".spectrum-Modal",
+    ".spectrum-Calendar",
     "#builder-side-panel-container",
     "[data-grid-ignore]",
   ]