144 lines
4.0 KiB
Svelte
144 lines
4.0 KiB
Svelte
<script lang="ts" context="module">
|
|
type TListboxOptionProps<
|
|
TSlotProps extends {},
|
|
TAsProp extends SupportedAs
|
|
> = TPassThroughProps<TSlotProps, TAsProp, "li"> & {
|
|
/** The option value */
|
|
value: unknown;
|
|
/** Whether the option should be disabled for keyboard navigation and ARIA purposes */
|
|
disabled?: boolean;
|
|
};
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { onDestroy, onMount, tick } from "svelte";
|
|
import { ListboxStates, useListboxContext } from "./Listbox.svelte";
|
|
import { useId } from "$lib/hooks/use-id";
|
|
import { Focus } from "$lib/utils/calculate-active-index";
|
|
import Render, { type TPassThroughProps } from "$lib/utils/Render.svelte";
|
|
import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
|
|
import type { SupportedAs } from "$lib/internal/elements";
|
|
import { get_current_component } from "svelte/internal";
|
|
import type { HTMLActionArray } from "$lib/hooks/use-actions";
|
|
|
|
/***** Props *****/
|
|
type TAsProp = $$Generic<SupportedAs>;
|
|
type $$Props = TListboxOptionProps<typeof slotProps, TAsProp>;
|
|
|
|
export let as: SupportedAs = "li";
|
|
export let use: HTMLActionArray = [];
|
|
export let value: unknown;
|
|
export let disabled = false;
|
|
|
|
/***** Events *****/
|
|
const forwardEvents = forwardEventsBuilder(get_current_component());
|
|
|
|
/***** Component *****/
|
|
let api = useListboxContext("ListboxOption");
|
|
let id = `headlessui-listbox-option-${useId()}`;
|
|
|
|
let buttonRef = $api.buttonRef;
|
|
|
|
$: active =
|
|
$api.activeOptionIndex !== null
|
|
? $api.options[$api.activeOptionIndex].id === id
|
|
: false;
|
|
|
|
$: selected = $api.value === value;
|
|
$: dataRef = {
|
|
disabled,
|
|
value,
|
|
textValue: "",
|
|
};
|
|
|
|
onMount(() => {
|
|
let textValue = document
|
|
.getElementById(id)
|
|
?.textContent?.toLowerCase()
|
|
.trim();
|
|
if (textValue !== undefined) dataRef.textValue = textValue;
|
|
});
|
|
|
|
onMount(() => $api.registerOption(id, dataRef));
|
|
onDestroy(() => $api.unregisterOption(id));
|
|
|
|
let oldState = $api.listboxState;
|
|
let oldSelected = selected;
|
|
let oldActive = active;
|
|
async function updateFocus(
|
|
newState: ListboxStates,
|
|
newSelected: boolean,
|
|
newActive: boolean
|
|
) {
|
|
// Wait for a tick since we need to ensure registerOption has been applied
|
|
await tick();
|
|
if (newState !== oldState || newSelected !== oldSelected) {
|
|
if (newState === ListboxStates.Open && newSelected) {
|
|
$api.goToOption(Focus.Specific, id);
|
|
}
|
|
}
|
|
if (newState !== oldState || newActive !== oldActive) {
|
|
if (newState === ListboxStates.Open && newActive) {
|
|
document.getElementById(id)?.scrollIntoView?.({ block: "nearest" });
|
|
}
|
|
}
|
|
oldState = newState;
|
|
oldSelected = newSelected;
|
|
oldActive = newActive;
|
|
}
|
|
$: updateFocus($api.listboxState, selected, active);
|
|
|
|
async function handleClick(e: CustomEvent) {
|
|
let event = e as any as MouseEvent;
|
|
if (disabled) return event.preventDefault();
|
|
$api.select(value);
|
|
$api.closeListbox();
|
|
await tick();
|
|
$buttonRef?.focus({ preventScroll: true });
|
|
}
|
|
|
|
function handleFocus() {
|
|
if (disabled) return $api.goToOption(Focus.Nothing);
|
|
$api.goToOption(Focus.Specific, id);
|
|
}
|
|
|
|
function handleMove() {
|
|
if (disabled) return;
|
|
if (active) return;
|
|
$api.goToOption(Focus.Specific, id);
|
|
}
|
|
|
|
function handleLeave() {
|
|
if (disabled) return;
|
|
if (!active) return;
|
|
$api.goToOption(Focus.Nothing);
|
|
}
|
|
|
|
$: propsWeControl = {
|
|
id,
|
|
role: "option",
|
|
tabIndex: disabled === true ? undefined : -1,
|
|
"aria-disabled": disabled === true ? true : undefined,
|
|
"aria-selected": selected === true ? selected : undefined,
|
|
};
|
|
|
|
$: slotProps = { active, selected, disabled };
|
|
</script>
|
|
|
|
<Render
|
|
{...$$restProps}
|
|
{...propsWeControl}
|
|
{as}
|
|
{slotProps}
|
|
use={[...use, forwardEvents]}
|
|
name={"ListboxOption"}
|
|
on:click={handleClick}
|
|
on:focus={handleFocus}
|
|
on:pointermove={handleMove}
|
|
on:mousemove={handleMove}
|
|
on:pointerleave={handleLeave}
|
|
on:mouseleave={handleLeave}
|
|
>
|
|
<slot {...slotProps} />
|
|
</Render>
|