@placeholderco/placeholder-ui 2.1.0 → 2.2.0

package/dist/form/CronBuilder.svelte

@@ -194,7 +194,13 @@
 		isParsingExpression = true;
 
 		// Try to detect frequency type
-		if (min.startsWith('*/') && hour === '*' && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
+		if (
+			min.startsWith('*/') &&
+			hour === '*' &&
+			dayOfMonth === '*' &&
+			month === '*' &&
+			dayOfWeek === '*'
+		) {
 			frequency = 'minute';
 			minuteInterval = parseInt(min.split('/')[1]) || 1;
 		} else if (hour.startsWith('*/') && dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
@@ -210,7 +216,10 @@
 			frequency = 'weekly';
 			weeklyMinute = parseInt(min) || 0;
 			weeklyHour = parseInt(hour) || 0;
-			weeklyDays = dayOfWeek.split(',').map(d => parseInt(d)).filter(d => !isNaN(d));
+			weeklyDays = dayOfWeek
+				.split(',')
+				.map((d) => parseInt(d))
+				.filter((d) => !isNaN(d));
 		} else if (month === '*' && dayOfWeek === '*' && !dayOfMonth.includes('*')) {
 			frequency = 'monthly';
 			monthlyMinute = parseInt(min) || 0;
@@ -236,7 +245,7 @@
 
 	function toggleWeekday(day: number) {
 		if (weeklyDays.includes(day)) {
-			weeklyDays = weeklyDays.filter(d => d !== day);
+			weeklyDays = weeklyDays.filter((d) => d !== day);
 		} else {
 			weeklyDays = [...weeklyDays, day];
 		}
@@ -298,14 +307,16 @@
 				return `Every ${dayText} at ${dailyHour.toString().padStart(2, '0')}:${dailyMinute.toString().padStart(2, '0')}`;
 
 			case 'weekly':
-				const dayNames = weeklyDays.map(d => weekDays.find(wd => wd.value === d)?.label).join(', ');
+				const dayNames = weeklyDays
+					.map((d) => weekDays.find((wd) => wd.value === d)?.label)
+					.join(', ');
 				return `Every ${dayNames} at ${weeklyHour.toString().padStart(2, '0')}:${weeklyMinute.toString().padStart(2, '0')}`;
 
 			case 'monthly':
 				return `Day ${monthlyDay} of every month at ${monthlyHour.toString().padStart(2, '0')}:${monthlyMinute.toString().padStart(2, '0')}`;
 
 			case 'yearly':
-				const monthName = monthOptions.find(m => m.value === yearlyMonth.toString())?.label;
+				const monthName = monthOptions.find((m) => m.value === yearlyMonth.toString())?.label;
 				return `${monthName} ${yearlyDay} at ${yearlyHour.toString().padStart(2, '0')}:${yearlyMinute.toString().padStart(2, '0')}`;
 
 			case 'custom':
@@ -329,12 +340,7 @@
 >
 	<div class="cron-builder {classes}" class:disabled>
 		<div class="cron-frequency">
-			<Select
-				label="Frequency"
-				bind:value={frequency}
-				options={frequencyOptions}
-				{disabled}
-			/>
+			<Select label="Frequency" bind:value={frequency} options={frequencyOptions} {disabled} />
 		</div>
 
 		<div class="cron-settings">
@@ -347,42 +353,12 @@
 					{disabled}
 				/>
 			{:else if frequency === 'hourly'}
-				<Number
-					label="Interval (hours)"
-					bind:value={hourlyInterval}
-					min={1}
-					max={23}
-					{disabled}
-				/>
-				<Number
-					label="At minute"
-					bind:value={hourlyMinute}
-					min={0}
-					max={59}
-					{disabled}
-				/>
+				<Number label="Interval (hours)" bind:value={hourlyInterval} min={1} max={23} {disabled} />
+				<Number label="At minute" bind:value={hourlyMinute} min={0} max={59} {disabled} />
 			{:else if frequency === 'daily'}
-				<Number
-					label="Interval (days)"
-					bind:value={dailyInterval}
-					min={1}
-					max={31}
-					{disabled}
-				/>
-				<Number
-					label="Hour"
-					bind:value={dailyHour}
-					min={0}
-					max={23}
-					{disabled}
-				/>
-				<Number
-					label="Minute"
-					bind:value={dailyMinute}
-					min={0}
-					max={59}
-					{disabled}
-				/>
+				<Number label="Interval (days)" bind:value={dailyInterval} min={1} max={31} {disabled} />
+				<Number label="Hour" bind:value={dailyHour} min={0} max={23} {disabled} />
+				<Number label="Minute" bind:value={dailyMinute} min={0} max={59} {disabled} />
 			{:else if frequency === 'weekly'}
 				<div class="weekday-selector">
 					<span class="weekday-label">Days of Week</span>
@@ -400,71 +376,17 @@
 						{/each}
 					</div>
 				</div>
-				<Number
-					label="Hour"
-					bind:value={weeklyHour}
-					min={0}
-					max={23}
-					{disabled}
-				/>
-				<Number
-					label="Minute"
-					bind:value={weeklyMinute}
-					min={0}
-					max={59}
-					{disabled}
-				/>
+				<Number label="Hour" bind:value={weeklyHour} min={0} max={23} {disabled} />
+				<Number label="Minute" bind:value={weeklyMinute} min={0} max={59} {disabled} />
 			{:else if frequency === 'monthly'}
-				<Number
-					label="Day of Month"
-					bind:value={monthlyDay}
-					min={1}
-					max={31}
-					{disabled}
-				/>
-				<Number
-					label="Hour"
-					bind:value={monthlyHour}
-					min={0}
-					max={23}
-					{disabled}
-				/>
-				<Number
-					label="Minute"
-					bind:value={monthlyMinute}
-					min={0}
-					max={59}
-					{disabled}
-				/>
+				<Number label="Day of Month" bind:value={monthlyDay} min={1} max={31} {disabled} />
+				<Number label="Hour" bind:value={monthlyHour} min={0} max={23} {disabled} />
+				<Number label="Minute" bind:value={monthlyMinute} min={0} max={59} {disabled} />
 			{:else if frequency === 'yearly'}
-				<Number
-					label="Month"
-					bind:value={yearlyMonth}
-					min={1}
-					max={12}
-					{disabled}
-				/>
-				<Number
-					label="Day"
-					bind:value={yearlyDay}
-					min={1}
-					max={31}
-					{disabled}
-				/>
-				<Number
-					label="Hour"
-					bind:value={yearlyHour}
-					min={0}
-					max={23}
-					{disabled}
-				/>
-				<Number
-					label="Minute"
-					bind:value={yearlyMinute}
-					min={0}
-					max={59}
-					{disabled}
-				/>
+				<Number label="Month" bind:value={yearlyMonth} min={1} max={12} {disabled} />
+				<Number label="Day" bind:value={yearlyDay} min={1} max={31} {disabled} />
+				<Number label="Hour" bind:value={yearlyHour} min={0} max={23} {disabled} />
+				<Number label="Minute" bind:value={yearlyMinute} min={0} max={59} {disabled} />
 			{:else if frequency === 'custom'}
 				<div class="custom-inputs">
 					<FormGroup label="Minute">
@@ -708,4 +630,4 @@
 			grid-template-columns: 1fr;
 		}
 	}
-</style>
+</style>

package/dist/form/DatePicker.svelte

@@ -32,6 +32,7 @@
 	import { fade } from 'svelte/transition';
 	import dayjs from '../util/dayjs.js';
 	import { clickOutside } from '../util/ClickOutside.js';
+	import { floating } from '../util/Floating.js';
 	import ActionIcon from '../ui/ActionIcon.svelte';
 	import { iconChevronLeft, iconChevronRight, iconX } from '../icon/index.js';
 
@@ -204,7 +205,6 @@
 	let readableDate: string = $state('');
 	let showCalendar = $state(false);
 	let showYearPicker = $state(false);
-	let dropdownPosition: 'above' | 'below' = $state('below');
 
 	// Year picker: show a range of years centered around the focused year
 	const yearRangeSize = 12;
@@ -241,22 +241,6 @@
 		showYearPicker = !showYearPicker;
 	}
 
-	function checkDropdownPosition() {
-		if (!textboxElement) return;
-		
-		const rect = textboxElement.getBoundingClientRect();
-		const dropdownHeight = 300; // Approximate height of the calendar dropdown
-		const spaceBelow = window.innerHeight - rect.bottom;
-		const spaceAbove = rect.top;
-		
-		// If not enough space below and more space above, position above
-		if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
-			dropdownPosition = 'above';
-		} else {
-			dropdownPosition = 'below';
-		}
-	}
-
 	function onClickOutside(event: MouseEvent) {
 		if (!showCalendar) return;
 
@@ -315,7 +299,6 @@
 		bind:textboxElement
 		value={readableDate}
 		onfocus={() => {
-			checkDropdownPosition();
 			showCalendar = true;
 		}}
 		onkeyup={onDateTextChange}
@@ -339,7 +322,13 @@
 		{/snippet}
 		<div class="date-picker">
 			{#if showCalendar}
-				<div class="calendar {dropdownPosition}" transition:fade={{ duration: 200 }} use:clickOutside={onClickOutside}>
+				<!-- Rendered in the top layer so a scrolling Dialog body cannot clip it -->
+				<div
+					class="calendar"
+					transition:fade={{ duration: 200 }}
+					use:floating={{ anchor: () => textboxElement, placement: 'bottom-start', offset: 4 }}
+					use:clickOutside={onClickOutside}
+				>
 					<div class="month-buttons">
 						{#if showYearPicker}
 							<ActionIcon
@@ -426,10 +415,10 @@
 		line-height: 0;
 	}
 
+	/* Position and top-layer promotion come from use:floating */
 	.calendar {
 		width: 18rem;
 		text-align: center;
-		position: absolute;
 		z-index: 10;
 		user-select: none;
 		background-color: var(--paper-body-bg);
@@ -439,14 +428,6 @@
 		padding: 0.5rem;
 	}
 
-	.calendar.below {
-		top: 0
-	}
-
-	.calendar.above {
-		bottom: 2.25rem;
-	}
-
 	.month-buttons {
 		display: flex;
 		justify-content: space-between;

package/dist/form/DateRangePicker.svelte

@@ -26,6 +26,7 @@
 	import { fade } from 'svelte/transition';
 	import dayjs from '../util/dayjs.js';
 	import { clickOutside } from '../util/ClickOutside.js';
+	import { floating } from '../util/Floating.js';
 	import ActionIcon from '../ui/ActionIcon.svelte';
 	import { iconChevronLeft, iconChevronRight, iconX } from '../icon/index.js';
 
@@ -65,7 +66,7 @@
 	let focusedMonth = $state((selectedStart ?? todayDate).startOf('month'));
 	let showCalendar = $state(false);
 	let showYearPicker = $state(false);
-	let dropdownPosition: 'above' | 'below' = $state('below');
+	let inputWrapElement: HTMLElement | undefined = $state(undefined);
 	let containerElement: HTMLElement | undefined = $state(undefined);
 
 	const yearRangeSize = 12;
@@ -163,7 +164,15 @@
 				isInRange = date.isSame(effStart, 'date');
 			}
 
-			displayedDates.push({ date, text: date.date().toString(), color, isRangeStart, isRangeEnd, isInRange, isDisabled });
+			displayedDates.push({
+				date,
+				text: date.date().toString(),
+				color,
+				isRangeStart,
+				isRangeEnd,
+				isInRange,
+				isDisabled
+			});
 		}
 
 		return displayedDates;
@@ -242,14 +251,6 @@
 		focusedMonth = focusedMonth.add(delta, 'month');
 	}
 
-	function checkDropdownPosition() {
-		if (!containerElement) return;
-		const rect = containerElement.getBoundingClientRect();
-		const spaceBelow = window.innerHeight - rect.bottom;
-		const spaceAbove = rect.top;
-		dropdownPosition = spaceBelow < 340 && spaceAbove > spaceBelow ? 'above' : 'below';
-	}
-
 	function onClickOutside(event: MouseEvent) {
 		if (!showCalendar) return;
 		const target = event.target as HTMLElement;
@@ -301,16 +302,15 @@
 			class:drp-open={showCalendar}
 			role="button"
 			tabindex={disabled ? -1 : 0}
+			bind:this={inputWrapElement}
 			onclick={() => {
 				if (!disabled) {
-					checkDropdownPosition();
 					showCalendar = true;
 				}
 			}}
 			onkeydown={(e) => {
 				if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
 					e.preventDefault();
-					checkDropdownPosition();
 					showCalendar = true;
 				}
 			}}
@@ -321,36 +321,49 @@
 
 			{#if displayText && !disabled}
 				<div class="drp-clear">
-					<ActionIcon
-						variant="secondary-subtle"
-						svg={iconX}
-						size="0.75rem"
-						onclick={clearRange}
-					/>
+					<ActionIcon variant="secondary-subtle" svg={iconX} size="0.75rem" onclick={clearRange} />
 				</div>
 			{/if}
 
 			<div class="drp-calendar-anchor">
 				{#if showCalendar}
+					<!-- Rendered in the top layer so a scrolling Dialog body cannot clip it -->
 					<div
-						class="calendar {dropdownPosition}"
+						class="calendar"
 						transition:fade={{ duration: 150 }}
+						use:floating={{ anchor: () => inputWrapElement, placement: 'bottom-start', offset: 4 }}
 						use:clickOutside={onClickOutside}
 					>
 						<!-- Month navigation -->
 						<div class="month-buttons">
 							{#if showYearPicker}
-								<ActionIcon svg={iconChevronLeft} size="1.5rem" onclick={() => incrementYearRange(-1)} />
+								<ActionIcon
+									svg={iconChevronLeft}
+									size="1.5rem"
+									onclick={() => incrementYearRange(-1)}
+								/>
 								<button class="month-label clickable" onclick={toggleYearPicker}>
 									{yearRangeStart} – {yearRangeStart + yearRangeSize - 1}
 								</button>
-								<ActionIcon svg={iconChevronRight} size="1.5rem" onclick={() => incrementYearRange(1)} />
+								<ActionIcon
+									svg={iconChevronRight}
+									size="1.5rem"
+									onclick={() => incrementYearRange(1)}
+								/>
 							{:else}
-								<ActionIcon svg={iconChevronLeft} size="1.5rem" onclick={() => incrementFocusedMonth(-1)} />
+								<ActionIcon
+									svg={iconChevronLeft}
+									size="1.5rem"
+									onclick={() => incrementFocusedMonth(-1)}
+								/>
 								<button class="month-label clickable" onclick={toggleYearPicker}>
 									{focusedMonth.format('MMMM YYYY')}
 								</button>
-								<ActionIcon svg={iconChevronRight} size="1.5rem" onclick={() => incrementFocusedMonth(1)} />
+								<ActionIcon
+									svg={iconChevronRight}
+									size="1.5rem"
+									onclick={() => incrementFocusedMonth(1)}
+								/>
 							{/if}
 						</div>
 
@@ -383,12 +396,16 @@
 							<!-- svelte-ignore a11y_no_static_element_interactions -->
 							<div
 								class="days-grid"
-								onmouseleave={() => { if (selectingEnd) hoverDate = undefined; }}
+								onmouseleave={() => {
+									if (selectingEnd) hoverDate = undefined;
+								}}
 							>
 								{#each calculateDays(effectiveStart, effectiveEnd, focusedMonth) as d, i (i)}
 									<div
 										class={buildCellClasses(d)}
-										onmouseenter={() => { if (selectingEnd && !d.isDisabled) hoverDate = d.date; }}
+										onmouseenter={() => {
+											if (selectingEnd && !d.isDisabled) hoverDate = d.date;
+										}}
 									>
 										<button
 											class={buildButtonClasses(d)}
@@ -477,10 +494,10 @@
 
 	/* ---- Calendar ---- */
 
+	/* Position and top-layer promotion come from use:floating */
 	.calendar {
 		width: 19rem;
 		text-align: center;
-		position: absolute;
 		z-index: 10;
 		background-color: var(--paper-body-bg);
 		border: 1px solid var(--border-color);
@@ -489,15 +506,6 @@
 		padding: 0.5rem;
 	}
 
-	.calendar.below {
-		top: 0.25rem;
-	}
-
-	.calendar.above {
-		bottom: calc(100% + 0.25rem);
-		top: auto;
-	}
-
 	.month-buttons {
 		display: flex;
 		justify-content: space-between;
@@ -655,7 +663,9 @@
 		background: transparent;
 		cursor: pointer;
 		font-size: 0.875rem;
-		transition: background-color 0.15s ease, color 0.15s ease;
+		transition:
+			background-color 0.15s ease,
+			color 0.15s ease;
 		flex-shrink: 0;
 		display: flex;
 		align-items: center;

package/dist/form/DateTimePicker.svelte

@@ -24,6 +24,7 @@
 	import { fade } from 'svelte/transition';
 	import dayjs from '../util/dayjs.js';
 	import { clickOutside } from '../util/ClickOutside.js';
+	import { floating } from '../util/Floating.js';
 	import ActionIcon from '../ui/ActionIcon.svelte';
 	import { iconChevronLeft, iconChevronRight, iconX } from '../icon/index.js';
 	import TimePicker from './TimePicker.svelte';
@@ -208,7 +209,6 @@
 	let readableDate: string = $state('');
 	let showCalendar = $state(false);
 	let showYearPicker = $state(false);
-	let dropdownPosition: 'above' | 'below' = $state('below');
 
 	// Year picker: show a range of years centered around the focused year
 	const yearRangeSize = 12;
@@ -245,22 +245,6 @@
 		showYearPicker = !showYearPicker;
 	}
 
-	function checkDropdownPosition() {
-		if (!textboxElement) return;
-		
-		const rect = textboxElement.getBoundingClientRect();
-		const dropdownHeight = 400; // Approximate height of the calendar + time picker dropdown
-		const spaceBelow = window.innerHeight - rect.bottom;
-		const spaceAbove = rect.top;
-		
-		// If not enough space below and more space above, position above
-		if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
-			dropdownPosition = 'above';
-		} else {
-			dropdownPosition = 'below';
-		}
-	}
-
 	function onClickOutside(event: MouseEvent) {
 		if (!showCalendar) return;
 
@@ -311,7 +295,6 @@
 		bind:textboxElement
 		value={readableDate}
 		onfocus={() => {
-			checkDropdownPosition();
 			showCalendar = true;
 		}}
 		onkeyup={onDateTextChange}
@@ -334,7 +317,13 @@
 		{/snippet}
 		<div class="date-picker">
 			{#if showCalendar}
-				<div class="calendar {dropdownPosition}" transition:fade={{ duration: 200 }} use:clickOutside={onClickOutside}>
+				<!-- Rendered in the top layer so a scrolling Dialog body cannot clip it -->
+				<div
+					class="calendar"
+					transition:fade={{ duration: 200 }}
+					use:floating={{ anchor: () => textboxElement, placement: 'bottom-start', offset: 4 }}
+					use:clickOutside={onClickOutside}
+				>
 					<div class="month-buttons">
 						{#if showYearPicker}
 							<ActionIcon
@@ -405,8 +394,8 @@
 
 					<TimePicker
 						bind:value={selectedTime}
-						minDate={minDate}
-						maxDate={maxDate}
+						{minDate}
+						{maxDate}
 						selectedDate={selectedDate?.format('YYYY-MM-DD')}
 						onchange={(t) => {
 							selectedTime = t!;
@@ -439,10 +428,10 @@
 		line-height: 0;
 	}
 
+	/* Position and top-layer promotion come from use:floating */
 	.calendar {
 		width: 18rem;
 		text-align: center;
-		position: absolute;
 		z-index: 10;
 		user-select: none;
 		background-color: var(--paper-body-bg);
@@ -452,14 +441,6 @@
 		padding: 0.5rem;
 	}
 
-	.calendar.below {
-		top: 0
-	}
-
-	.calendar.above {
-		bottom: 2.25rem;
-	}
-
 	.month-buttons {
 		display: flex;
 		justify-content: space-between;

package/dist/form/Number.svelte

@@ -108,9 +108,7 @@
 		children
 	}: NumberProps = $props();
 
-	let resolvedName = $derived(
-		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
-	);
+	let resolvedName = $derived((name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_'));
 
 	let id = $derived.by(() => {
 		if (inputId) return inputId;

package/dist/form/RadioGroup.svelte

@@ -52,9 +52,7 @@
 	}: RadioGroupProps = $props();
 
 	const autoName = `radio-${crypto.randomUUID()}`;
-	const resolvedName = $derived(
-		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
-	);
+	const resolvedName = $derived((name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_'));
 
 	function handleChange(option: ComboBoxItem) {
 		if (option.value === value) return;

package/dist/form/Select.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { clickOutside } from '../util/ClickOutside.js';
+	import { floating } from '../util/Floating.js';
 	import type {
 		ComboBoxGroup,
 		ComboBoxItem,
@@ -209,6 +210,7 @@
 	}
 
 	let comboBoxEl: ReturnType<typeof ComboBoxMulti> | undefined = $state(undefined);
+	let containerElement: HTMLElement | undefined = $state(undefined);
 	let textboxElement: HTMLElement | undefined = $state(undefined);
 	let buttonElement: HTMLElement | undefined = $state(undefined);
 	let comboBoxKeyDown: ((e: KeyboardEvent) => void) | undefined = $state(undefined);
@@ -253,7 +255,7 @@
 	});
 </script>
 
-<div class="select-container {containerClass}">
+<div class="select-container {containerClass}" bind:this={containerElement}>
 	<FormGroup {label} {required} {tooltipContent} {tooltipText} {tooltipLocation}>
 		{#if computedAllowSearch && open}
 			<div class="select-input-wrapper">
@@ -375,26 +377,28 @@
 			</button>
 		{/if}
 	</FormGroup>
-	<div
-		class="select-panel
-			{isEmpty ? 'bottom-0' : 'top-full'}
-			{open ? '' : 'hidden'}"
-	>
-		<div class="select-panel-inner" use:clickOutside={closePopover}>
-			<ComboBoxMulti
-				bind:this={comboBoxEl}
-				{filterString}
-				values={rawValue ? [rawValue] : []}
-				{onSelection}
-				onkeydown={comboBoxKeyDown}
-				groupedOptions={core.filteredGroups}
-				{open}
-				loading={core.searching}
-				{hideNoResults}
-				{loadingText}
-			/>
+	{#if open}
+		<!-- Rendered in the top layer so a scrolling Dialog body cannot clip it -->
+		<div
+			class="select-panel"
+			use:floating={{ anchor: () => containerElement, placement: 'bottom-start', matchWidth: true }}
+		>
+			<div class="select-panel-inner" use:clickOutside={closePopover}>
+				<ComboBoxMulti
+					bind:this={comboBoxEl}
+					{filterString}
+					values={rawValue ? [rawValue] : []}
+					{onSelection}
+					onkeydown={comboBoxKeyDown}
+					groupedOptions={core.filteredGroups}
+					{open}
+					loading={core.searching}
+					{hideNoResults}
+					{loadingText}
+				/>
+			</div>
 		</div>
-	</div>
+	{/if}
 	{#if showError && errorText}
 		<div class="text-error text-xs">{errorText}</div>
 	{/if}
@@ -473,14 +477,11 @@
 		right: 0.4rem;
 	}
 
+	/* Position, width and top-layer promotion come from use:floating */
 	.select-panel {
-		position: absolute;
-		width: 100%;
-		left: 0;
 		z-index: 70;
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
-		/* absolute w-full left-0 z-20 */
 	}
 
 	.select-panel-inner {
@@ -493,10 +494,6 @@
 		/* text-zinc-400 dark:text-neutral-500 */
 	}
 
-	.hidden {
-		display: none;
-	}
-
 	.disabled {
 		opacity: 0.5;
 		cursor: not-allowed;