Add support for honouring original popover height in position dropdown utility

This commit is contained in:
Andrew Kingston 2024-04-25 09:01:31 +01:00
parent 80cbd70687
commit f08562e0e4
4 changed files with 12 additions and 3 deletions

View File

@ -19,6 +19,7 @@ export default function positionDropdown(element, opts) {
useAnchorWidth, useAnchorWidth,
offset = 5, offset = 5,
customUpdate, customUpdate,
noShrink,
} = opts } = opts
if (!anchor) { if (!anchor) {
return return
@ -82,6 +83,11 @@ export default function positionDropdown(element, opts) {
} else { } else {
styles.left = anchorBounds.left styles.left = anchorBounds.left
} }
// Remove max height restriction if we don't want to shrink
if (noShrink) {
delete styles.maxHeight
}
} }
// Apply styles // Apply styles

View File

@ -25,6 +25,7 @@
export let handlePostionUpdate export let handlePostionUpdate
export let showPopover = true export let showPopover = true
export let clickOutsideOverride = false export let clickOutsideOverride = false
export let noShrink = false
$: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum" $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
@ -91,6 +92,7 @@
useAnchorWidth, useAnchorWidth,
offset, offset,
customUpdate: handlePostionUpdate, customUpdate: handlePostionUpdate,
noShrink,
}} }}
use:clickOutside={{ use:clickOutside={{
callback: dismissible ? handleOutsideClick : () => {}, callback: dismissible ? handleOutsideClick : () => {},

View File

@ -101,7 +101,8 @@
<style> <style>
.wrapper { .wrapper {
flex: 0 0 100px; padding-top: 400px;
flex: 0 0 400px;
margin: -28px -40px -40px -40px; margin: -28px -40px -40px -40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -8,7 +8,6 @@
} from "../lib/constants" } from "../lib/constants"
export let anchor export let anchor
export let invertX
export let minWidth = PopoverMinWidth export let minWidth = PopoverMinWidth
export let maxWidth = PopoverMaxWidth export let maxWidth = PopoverMaxWidth
export let maxHeight = PopoverMaxHeight export let maxHeight = PopoverMaxHeight
@ -21,7 +20,7 @@
$: style = buildStyles(minWidth, maxWidth, maxHeight) $: style = buildStyles(minWidth, maxWidth, maxHeight)
const buildStyles = (minWidth, maxWidth, maxHeight) => { const buildStyles = (minWidth, maxWidth, maxHeight) => {
let style = "" let style = "min-height: 100px;"
if (minWidth != null) { if (minWidth != null) {
style += `min-width: ${minWidth}px;` style += `min-width: ${minWidth}px;`
} }
@ -39,6 +38,7 @@
{open} {open}
{anchor} {anchor}
{align} {align}
noShrink
portalTarget="#{gridID} .grid-popover-container" portalTarget="#{gridID} .grid-popover-container"
offset={0} offset={0}
> >