Run prettier over everything and fix some imports
This commit is contained in:
Ryan Gossiaux
@@ -1,21 +1,21 @@
|
||||
<script lang="ts">
|
||||
import { useId } from "./use-id";
|
||||
import { getContext, onMount } from "svelte";
|
||||
import { Writable } from "svelte/store";
|
||||
import { DescriptionContext } from "./DescriptionProvider.svelte";
|
||||
const id = `headlessui-description-${useId()}`;
|
||||
let contextStore: Writable<DescriptionContext> | undefined = getContext(
|
||||
"headlessui-description-context"
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { getContext, onMount } from "svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
import type { DescriptionContext } from "./DescriptionProvider.svelte";
|
||||
const id = `headlessui-description-${useId()}`;
|
||||
let contextStore: Writable<DescriptionContext> | undefined = getContext(
|
||||
"headlessui-description-context"
|
||||
);
|
||||
if (!contextStore) {
|
||||
throw new Error(
|
||||
"You used a <Description /> component, but it is not inside a relevant parent."
|
||||
);
|
||||
if (!contextStore) {
|
||||
throw new Error(
|
||||
"You used a <Description /> component, but it is not inside a relevant parent."
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => $contextStore.register(id));
|
||||
onMount(() => $contextStore.register(id));
|
||||
</script>
|
||||
|
||||
<p {...$$restProps} {...$contextStore?.props} {id}>
|
||||
<slot />
|
||||
<slot />
|
||||
</p>
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
<script lang="ts" context="module">
|
||||
export interface DescriptionContext {
|
||||
name?: string;
|
||||
props?: object;
|
||||
register: (value: string) => void;
|
||||
descriptionIds?: string;
|
||||
}
|
||||
export interface DescriptionContext {
|
||||
name?: string;
|
||||
props?: object;
|
||||
register: (value: string) => void;
|
||||
descriptionIds?: string;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
export let name: string;
|
||||
let descriptionIds = [];
|
||||
let contextStore: Writable<DescriptionContext> = writable({
|
||||
name,
|
||||
register,
|
||||
props: $$restProps,
|
||||
});
|
||||
setContext("headlessui-description-context", contextStore);
|
||||
import { setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
export let name: string;
|
||||
let descriptionIds = [];
|
||||
let contextStore: Writable<DescriptionContext> = writable({
|
||||
name,
|
||||
register,
|
||||
props: $$restProps,
|
||||
});
|
||||
setContext("headlessui-description-context", contextStore);
|
||||
|
||||
$: contextStore.set({
|
||||
name,
|
||||
props: $$restProps,
|
||||
register,
|
||||
descriptionIds:
|
||||
descriptionIds.length > 0 ? descriptionIds.join(" ") : undefined,
|
||||
});
|
||||
$: contextStore.set({
|
||||
name,
|
||||
props: $$restProps,
|
||||
register,
|
||||
descriptionIds:
|
||||
descriptionIds.length > 0 ? descriptionIds.join(" ") : undefined,
|
||||
});
|
||||
|
||||
function register(value: string) {
|
||||
descriptionIds = [...descriptionIds, value];
|
||||
return () => {
|
||||
descriptionIds = descriptionIds.filter(
|
||||
(descriptionId) => descriptionId !== value
|
||||
);
|
||||
};
|
||||
}
|
||||
function register(value: string) {
|
||||
descriptionIds = [...descriptionIds, value];
|
||||
return () => {
|
||||
descriptionIds = descriptionIds.filter(
|
||||
(descriptionId) => descriptionId !== value
|
||||
);
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<slot describedby={$contextStore.descriptionIds} />
|
||||
|
||||
@@ -1,243 +1,235 @@
|
||||
<script lang="ts" context="module">
|
||||
import {
|
||||
getContext,
|
||||
setContext,
|
||||
createEventDispatcher,
|
||||
tick,
|
||||
} from "svelte";
|
||||
export enum DialogStates {
|
||||
Open,
|
||||
Closed,
|
||||
}
|
||||
|
||||
export interface StateDefinition {
|
||||
dialogState: DialogStates;
|
||||
|
||||
titleId: string | null;
|
||||
|
||||
setTitleId(id: string | null): void;
|
||||
|
||||
close(): void;
|
||||
}
|
||||
|
||||
const DIALOG_CONTEXT_NAME = "DialogContext";
|
||||
|
||||
export function useDialogContext(
|
||||
component: string
|
||||
): Writable<StateDefinition | undefined> {
|
||||
let context = getContext(DIALOG_CONTEXT_NAME) as
|
||||
| Writable<StateDefinition | undefined>
|
||||
| undefined;
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
`<${component} /> is missing a parent <Dialog /> component.`
|
||||
);
|
||||
}
|
||||
return context;
|
||||
import { getContext, setContext, createEventDispatcher, tick } from "svelte";
|
||||
export enum DialogStates {
|
||||
Open,
|
||||
Closed,
|
||||
}
|
||||
|
||||
export interface StateDefinition {
|
||||
dialogState: DialogStates;
|
||||
|
||||
titleId: string | null;
|
||||
|
||||
setTitleId(id: string | null): void;
|
||||
|
||||
close(): void;
|
||||
}
|
||||
|
||||
const DIALOG_CONTEXT_NAME = "DialogContext";
|
||||
|
||||
export function useDialogContext(
|
||||
component: string
|
||||
): Writable<StateDefinition | undefined> {
|
||||
let context = getContext(DIALOG_CONTEXT_NAME) as
|
||||
| Writable<StateDefinition | undefined>
|
||||
| undefined;
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
`<${component} /> is missing a parent <Dialog /> component.`
|
||||
);
|
||||
}
|
||||
return context;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { State } from "./open-closed";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { match } from "./match";
|
||||
import { useId } from "./use-id";
|
||||
import { useInertOthers } from "./use-inert-others";
|
||||
import { contains } from "./dom-containers";
|
||||
import { Keys } from "./keyboard";
|
||||
import FocusTrap from "./FocusTrap.svelte";
|
||||
import StackContextProvider, {
|
||||
StackMessage,
|
||||
} from "./StackContextProvider.svelte";
|
||||
import DescriptionProvider from "./DescriptionProvider.svelte";
|
||||
import ForcePortalRootContext from "./ForcePortalRootContext.svelte";
|
||||
import Portal from "./Portal.svelte";
|
||||
import PortalGroup from "./PortalGroup.svelte";
|
||||
export let open: Boolean | undefined = undefined;
|
||||
export let initialFocus: HTMLElement | null = null;
|
||||
import { State } from "$lib/internal/open-closed";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { match } from "$lib/utils/match";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { useInertOthers } from "$lib/hooks/use-inert-others";
|
||||
import { contains } from "$lib/internal/dom-containers";
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
import FocusTrap from "$lib/components/FocusTrap/FocusTrap.svelte";
|
||||
import StackContextProvider, {
|
||||
StackMessage,
|
||||
} from "$lib/internal/StackContextProvider.svelte";
|
||||
import DescriptionProvider from "./DescriptionProvider.svelte";
|
||||
import ForcePortalRootContext from "./ForcePortalRootContext.svelte";
|
||||
import Portal from "./Portal.svelte";
|
||||
import PortalGroup from "./PortalGroup.svelte";
|
||||
export let open: Boolean | undefined = undefined;
|
||||
export let initialFocus: HTMLElement | null = null;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let containers: Set<HTMLElement> = new Set();
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
let containers: Set<HTMLElement> = new Set();
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
|
||||
$: open =
|
||||
open === undefined && openClosedState !== undefined
|
||||
? match($openClosedState, {
|
||||
[State.Open]: true,
|
||||
[State.Closed]: false,
|
||||
})
|
||||
: open;
|
||||
$: open =
|
||||
open === undefined && openClosedState !== undefined
|
||||
? match($openClosedState, {
|
||||
[State.Open]: true,
|
||||
[State.Closed]: false,
|
||||
})
|
||||
: open;
|
||||
|
||||
// Validations
|
||||
let hasOpen = open !== undefined || openClosedState !== null;
|
||||
// Validations
|
||||
let hasOpen = open !== undefined || openClosedState !== null;
|
||||
|
||||
if (!hasOpen) {
|
||||
throw new Error(
|
||||
`You forgot to provide an \`open\` prop to the \`Dialog\`.`
|
||||
);
|
||||
if (!hasOpen) {
|
||||
throw new Error(
|
||||
`You forgot to provide an \`open\` prop to the \`Dialog\`.`
|
||||
);
|
||||
}
|
||||
|
||||
if (typeof open !== "boolean") {
|
||||
throw new Error(
|
||||
`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${open}`
|
||||
);
|
||||
}
|
||||
|
||||
$: dialogState = open ? DialogStates.Open : DialogStates.Closed;
|
||||
$: visible =
|
||||
openClosedState !== undefined
|
||||
? $openClosedState === State.Open
|
||||
: dialogState === DialogStates.Open;
|
||||
|
||||
let internalDialogRef: HTMLDivElement | null = null;
|
||||
$: enabled = dialogState === DialogStates.Open;
|
||||
|
||||
const id = `headlessui-dialog-${useId()}`;
|
||||
|
||||
$: _cleanup = (() => {
|
||||
if (_cleanup) {
|
||||
_cleanup();
|
||||
}
|
||||
return useInertOthers(internalDialogRef, enabled);
|
||||
})();
|
||||
|
||||
if (typeof open !== "boolean") {
|
||||
throw new Error(
|
||||
`You provided an \`open\` prop to the \`Dialog\`, but the value is not a boolean. Received: ${open}`
|
||||
);
|
||||
let titleId: StateDefinition["titleId"] = null;
|
||||
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext(DIALOG_CONTEXT_NAME, api);
|
||||
$: api.set({
|
||||
titleId,
|
||||
dialogState,
|
||||
setTitleId(id: string | null) {
|
||||
if (titleId === id) return;
|
||||
titleId = id;
|
||||
},
|
||||
close() {
|
||||
dispatch("close", false);
|
||||
},
|
||||
});
|
||||
|
||||
// Handle outside click
|
||||
async function handleWindowMousedown(event: MouseEvent) {
|
||||
let target = event.target as HTMLElement;
|
||||
|
||||
if (dialogState !== DialogStates.Open) return;
|
||||
if (containers.size !== 1) return;
|
||||
if (contains(containers, target)) return;
|
||||
|
||||
$api.close();
|
||||
await tick();
|
||||
target?.focus();
|
||||
}
|
||||
|
||||
// Handle `Escape` to close
|
||||
function handleWindowKeydown(event: KeyboardEvent) {
|
||||
if (event.key !== Keys.Escape) return;
|
||||
if (dialogState !== DialogStates.Open) return;
|
||||
if (containers.size > 1) return; // 1 is myself, otherwise other elements in the Stack
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.close();
|
||||
}
|
||||
|
||||
$: _cleanupScrollLock = (() => {
|
||||
if (_cleanupScrollLock) {
|
||||
_cleanupScrollLock();
|
||||
}
|
||||
if (dialogState !== DialogStates.Open) return;
|
||||
|
||||
$: dialogState = open ? DialogStates.Open : DialogStates.Closed;
|
||||
$: visible =
|
||||
openClosedState !== undefined
|
||||
? $openClosedState === State.Open
|
||||
: dialogState === DialogStates.Open;
|
||||
let overflow = document.documentElement.style.overflow;
|
||||
let paddingRight = document.documentElement.style.paddingRight;
|
||||
|
||||
let internalDialogRef: HTMLDivElement | null = null;
|
||||
$: enabled = dialogState === DialogStates.Open;
|
||||
let scrollbarWidth =
|
||||
window.innerWidth - document.documentElement.clientWidth;
|
||||
|
||||
const id = `headlessui-dialog-${useId()}`;
|
||||
document.documentElement.style.overflow = "hidden";
|
||||
document.documentElement.style.paddingRight = `${scrollbarWidth}px`;
|
||||
|
||||
$: _cleanup = (() => {
|
||||
if (_cleanup) {
|
||||
_cleanup();
|
||||
return () => {
|
||||
document.documentElement.style.overflow = overflow;
|
||||
document.documentElement.style.paddingRight = paddingRight;
|
||||
};
|
||||
})();
|
||||
|
||||
$: _cleanupClose = () => {
|
||||
if (_cleanupClose) {
|
||||
_cleanupClose();
|
||||
}
|
||||
if (dialogState !== DialogStates.Open) return;
|
||||
let container = internalDialogRef;
|
||||
if (!container) return;
|
||||
|
||||
let observer = new IntersectionObserver((entries) => {
|
||||
for (let entry of entries) {
|
||||
if (
|
||||
entry.boundingClientRect.x === 0 &&
|
||||
entry.boundingClientRect.y === 0 &&
|
||||
entry.boundingClientRect.width === 0 &&
|
||||
entry.boundingClientRect.height === 0
|
||||
) {
|
||||
$api.close();
|
||||
}
|
||||
return useInertOthers(internalDialogRef, enabled);
|
||||
})();
|
||||
|
||||
let titleId: StateDefinition["titleId"] = null;
|
||||
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext(DIALOG_CONTEXT_NAME, api);
|
||||
$: api.set({
|
||||
titleId,
|
||||
dialogState,
|
||||
setTitleId(id: string | null) {
|
||||
if (titleId === id) return;
|
||||
titleId = id;
|
||||
},
|
||||
close() {
|
||||
dispatch("close", false);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
// Handle outside click
|
||||
async function handleWindowMousedown(event: MouseEvent) {
|
||||
let target = event.target as HTMLElement;
|
||||
observer.observe(container);
|
||||
|
||||
if (dialogState !== DialogStates.Open) return;
|
||||
if (containers.size !== 1) return;
|
||||
if (contains(containers, target)) return;
|
||||
return () => observer.disconnect();
|
||||
};
|
||||
|
||||
$api.close();
|
||||
await tick();
|
||||
target?.focus();
|
||||
}
|
||||
function handleClick(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
// Handle `Escape` to close
|
||||
function handleWindowKeydown(event: KeyboardEvent) {
|
||||
if (event.key !== Keys.Escape) return;
|
||||
if (dialogState !== DialogStates.Open) return;
|
||||
if (containers.size > 1) return; // 1 is myself, otherwise other elements in the Stack
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.close();
|
||||
}
|
||||
|
||||
$: _cleanupScrollLock = (() => {
|
||||
if (_cleanupScrollLock) {
|
||||
_cleanupScrollLock();
|
||||
}
|
||||
if (dialogState !== DialogStates.Open) return;
|
||||
|
||||
let overflow = document.documentElement.style.overflow;
|
||||
let paddingRight = document.documentElement.style.paddingRight;
|
||||
|
||||
let scrollbarWidth =
|
||||
window.innerWidth - document.documentElement.clientWidth;
|
||||
|
||||
document.documentElement.style.overflow = "hidden";
|
||||
document.documentElement.style.paddingRight = `${scrollbarWidth}px`;
|
||||
|
||||
return () => {
|
||||
document.documentElement.style.overflow = overflow;
|
||||
document.documentElement.style.paddingRight = paddingRight;
|
||||
};
|
||||
})();
|
||||
|
||||
$: _cleanupClose = () => {
|
||||
if (_cleanupClose) {
|
||||
_cleanupClose();
|
||||
}
|
||||
if (dialogState !== DialogStates.Open) return;
|
||||
let container = internalDialogRef;
|
||||
if (!container) return;
|
||||
|
||||
let observer = new IntersectionObserver((entries) => {
|
||||
for (let entry of entries) {
|
||||
if (
|
||||
entry.boundingClientRect.x === 0 &&
|
||||
entry.boundingClientRect.y === 0 &&
|
||||
entry.boundingClientRect.width === 0 &&
|
||||
entry.boundingClientRect.height === 0
|
||||
) {
|
||||
$api.close();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(container);
|
||||
|
||||
return () => observer.disconnect();
|
||||
};
|
||||
|
||||
function handleClick(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "dialog",
|
||||
"aria-modal": dialogState === DialogStates.Open ? true : undefined,
|
||||
"aria-labelledby": titleId,
|
||||
};
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "dialog",
|
||||
"aria-modal": dialogState === DialogStates.Open ? true : undefined,
|
||||
"aria-labelledby": titleId,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:mousedown={handleWindowMousedown}
|
||||
on:keydown={handleWindowKeydown}
|
||||
on:mousedown={handleWindowMousedown}
|
||||
on:keydown={handleWindowKeydown}
|
||||
/>
|
||||
{#if open}
|
||||
<FocusTrap {containers} {enabled} options={{ initialFocus }} />
|
||||
<StackContextProvider
|
||||
element={internalDialogRef}
|
||||
onUpdate={(message, element) => {
|
||||
return match(message, {
|
||||
[StackMessage.Add]() {
|
||||
containers.add(element);
|
||||
},
|
||||
[StackMessage.Remove]() {
|
||||
containers.delete(element);
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<ForcePortalRootContext force={true}>
|
||||
<Portal>
|
||||
<PortalGroup target={internalDialogRef}>
|
||||
<ForcePortalRootContext force={false}>
|
||||
<DescriptionProvider
|
||||
name={"Dialog.Description"}
|
||||
let:describedby
|
||||
>
|
||||
<div
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
aria-describedby={describedby}
|
||||
on:click={handleClick}
|
||||
>
|
||||
<slot {open} />
|
||||
</div>
|
||||
</DescriptionProvider>
|
||||
</ForcePortalRootContext>
|
||||
</PortalGroup>
|
||||
</Portal>
|
||||
</ForcePortalRootContext>
|
||||
</StackContextProvider>
|
||||
{#if visible}
|
||||
<FocusTrap {containers} {enabled} options={{ initialFocus }} />
|
||||
<StackContextProvider
|
||||
element={internalDialogRef}
|
||||
onUpdate={(message, element) => {
|
||||
return match(message, {
|
||||
[StackMessage.Add]() {
|
||||
containers.add(element);
|
||||
},
|
||||
[StackMessage.Remove]() {
|
||||
containers.delete(element);
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<ForcePortalRootContext force={true}>
|
||||
<Portal>
|
||||
<PortalGroup target={internalDialogRef}>
|
||||
<ForcePortalRootContext force={false}>
|
||||
<DescriptionProvider name={"Dialog.Description"} let:describedby>
|
||||
<div
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
aria-describedby={describedby}
|
||||
on:click={handleClick}
|
||||
>
|
||||
<slot {open} />
|
||||
</div>
|
||||
</DescriptionProvider>
|
||||
</ForcePortalRootContext>
|
||||
</PortalGroup>
|
||||
</Portal>
|
||||
</ForcePortalRootContext>
|
||||
</StackContextProvider>
|
||||
{/if}
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { DialogStates, useDialogContext } from "./Dialog.svelte";
|
||||
import { useId } from "./use-id";
|
||||
let api = useDialogContext("DialogOverlay");
|
||||
let id = `headlessui-dialog-overlay-${useId()}`;
|
||||
function handleClick(event: MouseEvent) {
|
||||
if (event.target !== event.currentTarget) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.close();
|
||||
}
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
"aria-hidden": true,
|
||||
};
|
||||
import { DialogStates, useDialogContext } from "./Dialog.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
let api = useDialogContext("DialogOverlay");
|
||||
let id = `headlessui-dialog-overlay-${useId()}`;
|
||||
function handleClick(event: MouseEvent) {
|
||||
if (event.target !== event.currentTarget) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.close();
|
||||
}
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
"aria-hidden": true,
|
||||
};
|
||||
</script>
|
||||
|
||||
<div {...{ ...$$restProps, ...propsWeControl }} on:click={handleClick}>
|
||||
<slot open={$api.dialogState === DialogStates.Open} />
|
||||
<slot open={$api.dialogState === DialogStates.Open} />
|
||||
</div>
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { DialogStates, useDialogContext } from "./Dialog.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { onMount } from "svelte";
|
||||
let api = useDialogContext("DialogTitle");
|
||||
let id = `headlessui-dialog-title-${useId()}`;
|
||||
import { DialogStates, useDialogContext } from "./Dialog.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { onMount } from "svelte";
|
||||
let api = useDialogContext("DialogTitle");
|
||||
let id = `headlessui-dialog-title-${useId()}`;
|
||||
|
||||
onMount(() => {
|
||||
$api.setTitleId(id);
|
||||
return () => $api.setTitleId(null);
|
||||
});
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
};
|
||||
onMount(() => {
|
||||
$api.setTitleId(id);
|
||||
return () => $api.setTitleId(null);
|
||||
});
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
};
|
||||
</script>
|
||||
|
||||
<h2 {...{ ...$$restProps, ...propsWeControl }}>
|
||||
<slot open={$api.dialogState === DialogStates.Open} />
|
||||
<slot open={$api.dialogState === DialogStates.Open} />
|
||||
</h2>
|
||||
|
||||
@@ -1,105 +1,102 @@
|
||||
<script lang="ts" context="module">
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { getContext, setContext } from "svelte";
|
||||
export enum DisclosureStates {
|
||||
Open,
|
||||
Closed,
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { getContext, setContext } from "svelte";
|
||||
export enum DisclosureStates {
|
||||
Open,
|
||||
Closed,
|
||||
}
|
||||
|
||||
export interface StateDefinition {
|
||||
// State
|
||||
disclosureState: DisclosureStates;
|
||||
panelStore: Writable<HTMLElement | null>;
|
||||
panelId: string;
|
||||
buttonStore: Writable<HTMLButtonElement | null>;
|
||||
buttonId: string;
|
||||
|
||||
// State mutators
|
||||
toggleDisclosure(): void;
|
||||
closeDisclosure(): void;
|
||||
|
||||
// Exposed functions
|
||||
close(focusableElement: HTMLElement | HTMLElement | null): void;
|
||||
}
|
||||
|
||||
let DISCLOSURE_CONTEXT_NAME = "DisclosureContext";
|
||||
|
||||
export function useDisclosureContext(
|
||||
component: string
|
||||
): Writable<StateDefinition | undefined> {
|
||||
let context: Writable<StateDefinition | undefined> | undefined = getContext(
|
||||
DISCLOSURE_CONTEXT_NAME
|
||||
);
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
`<${component} /> is missing a parent <Disclosure /> component.`
|
||||
);
|
||||
}
|
||||
|
||||
export interface StateDefinition {
|
||||
// State
|
||||
disclosureState: DisclosureStates;
|
||||
panelStore: Writable<HTMLElement | null>;
|
||||
panelId: string;
|
||||
buttonStore: Writable<HTMLButtonElement | null>;
|
||||
buttonId: string;
|
||||
|
||||
// State mutators
|
||||
toggleDisclosure(): void;
|
||||
closeDisclosure(): void;
|
||||
|
||||
// Exposed functions
|
||||
close(focusableElement: HTMLElement | HTMLElement | null): void;
|
||||
}
|
||||
|
||||
let DISCLOSURE_CONTEXT_NAME = "DisclosureContext";
|
||||
|
||||
export function useDisclosureContext(
|
||||
component: string
|
||||
): Writable<StateDefinition | undefined> {
|
||||
let context: Writable<StateDefinition | undefined> | undefined =
|
||||
getContext(DISCLOSURE_CONTEXT_NAME);
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
`<${component} /> is missing a parent <Disclosure /> component.`
|
||||
);
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
return context;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { useId } from "./use-id";
|
||||
import { match } from "./match";
|
||||
import { State } from "./open-closed";
|
||||
export let defaultOpen = false;
|
||||
let buttonId = `headlessui-disclosure-button-${useId()}`;
|
||||
let panelId = `headlessui-disclosure-panel-${useId()}`;
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { match } from "$lib/utils/match";
|
||||
import { State } from "$lib/internal/open-closed";
|
||||
export let defaultOpen = false;
|
||||
let buttonId = `headlessui-disclosure-button-${useId()}`;
|
||||
let panelId = `headlessui-disclosure-panel-${useId()}`;
|
||||
|
||||
let disclosureState: StateDefinition["disclosureState"] = defaultOpen
|
||||
? DisclosureStates.Open
|
||||
: DisclosureStates.Closed;
|
||||
let panelStore: StateDefinition["panelStore"] = writable(null);
|
||||
let buttonStore: StateDefinition["buttonStore"] = writable(null);
|
||||
let disclosureState: StateDefinition["disclosureState"] = defaultOpen
|
||||
? DisclosureStates.Open
|
||||
: DisclosureStates.Closed;
|
||||
let panelStore: StateDefinition["panelStore"] = writable(null);
|
||||
let buttonStore: StateDefinition["buttonStore"] = writable(null);
|
||||
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext(DISCLOSURE_CONTEXT_NAME, api);
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext(DISCLOSURE_CONTEXT_NAME, api);
|
||||
|
||||
$: api.set({
|
||||
buttonId,
|
||||
panelId,
|
||||
disclosureState,
|
||||
panelStore,
|
||||
buttonStore,
|
||||
toggleDisclosure() {
|
||||
disclosureState = match(disclosureState, {
|
||||
[DisclosureStates.Open]: DisclosureStates.Closed,
|
||||
[DisclosureStates.Closed]: DisclosureStates.Open,
|
||||
});
|
||||
},
|
||||
closeDisclosure() {
|
||||
if (disclosureState === DisclosureStates.Closed) return;
|
||||
disclosureState = DisclosureStates.Closed;
|
||||
},
|
||||
close(focusableElement: HTMLElement | null) {
|
||||
$api.closeDisclosure();
|
||||
$: api.set({
|
||||
buttonId,
|
||||
panelId,
|
||||
disclosureState,
|
||||
panelStore,
|
||||
buttonStore,
|
||||
toggleDisclosure() {
|
||||
disclosureState = match(disclosureState, {
|
||||
[DisclosureStates.Open]: DisclosureStates.Closed,
|
||||
[DisclosureStates.Closed]: DisclosureStates.Open,
|
||||
});
|
||||
},
|
||||
closeDisclosure() {
|
||||
if (disclosureState === DisclosureStates.Closed) return;
|
||||
disclosureState = DisclosureStates.Closed;
|
||||
},
|
||||
close(focusableElement: HTMLElement | null) {
|
||||
$api.closeDisclosure();
|
||||
|
||||
let restoreElement = (() => {
|
||||
if (!focusableElement) return $buttonStore;
|
||||
if (focusableElement instanceof HTMLElement)
|
||||
return focusableElement;
|
||||
let restoreElement = (() => {
|
||||
if (!focusableElement) return $buttonStore;
|
||||
if (focusableElement instanceof HTMLElement) return focusableElement;
|
||||
|
||||
return $buttonStore;
|
||||
})();
|
||||
return $buttonStore;
|
||||
})();
|
||||
|
||||
restoreElement?.focus();
|
||||
},
|
||||
});
|
||||
restoreElement?.focus();
|
||||
},
|
||||
});
|
||||
|
||||
let openClosedState: Writable<State> | undefined = writable();
|
||||
setContext("OpenClosed", openClosedState);
|
||||
let openClosedState: Writable<State> | undefined = writable();
|
||||
setContext("OpenClosed", openClosedState);
|
||||
|
||||
$: $openClosedState = match(disclosureState, {
|
||||
[DisclosureStates.Open]: State.Open,
|
||||
[DisclosureStates.Closed]: State.Closed,
|
||||
});
|
||||
$: $openClosedState = match(disclosureState, {
|
||||
[DisclosureStates.Open]: State.Open,
|
||||
[DisclosureStates.Closed]: State.Closed,
|
||||
});
|
||||
</script>
|
||||
|
||||
<div {...$$restProps}>
|
||||
<slot
|
||||
open={disclosureState === DisclosureStates.Open}
|
||||
close={$api?.close}
|
||||
/>
|
||||
<slot open={disclosureState === DisclosureStates.Open} close={$api?.close} />
|
||||
</div>
|
||||
|
||||
@@ -1,103 +1,100 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
useDisclosureContext,
|
||||
DisclosureStates,
|
||||
} from "./Disclosure.svelte";
|
||||
import { usePanelContext } from "./DisclosurePanel.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { Keys } from "./keyboard";
|
||||
export let disabled = false;
|
||||
const api = useDisclosureContext("DisclosureButton");
|
||||
const panelContext = usePanelContext();
|
||||
const id = `headlessui-disclosure-button-${useId()}`;
|
||||
import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
|
||||
import { usePanelContext } from "./DisclosurePanel.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
export let disabled = false;
|
||||
const api = useDisclosureContext("DisclosureButton");
|
||||
const panelContext = usePanelContext();
|
||||
const id = `headlessui-disclosure-button-${useId()}`;
|
||||
|
||||
$: buttonStore = $api?.buttonStore;
|
||||
$: panelStore = $api?.panelStore;
|
||||
$: buttonStore = $api?.buttonStore;
|
||||
$: panelStore = $api?.panelStore;
|
||||
|
||||
$: isWithinPanel =
|
||||
panelContext === null ? false : panelContext === $api?.panelId;
|
||||
$: isWithinPanel =
|
||||
panelContext === null ? false : panelContext === $api?.panelId;
|
||||
|
||||
function handleClick() {
|
||||
if (disabled) return;
|
||||
function handleClick() {
|
||||
if (disabled) return;
|
||||
|
||||
if (isWithinPanel) {
|
||||
$api.toggleDisclosure();
|
||||
$buttonStore?.focus();
|
||||
} else {
|
||||
$api.toggleDisclosure();
|
||||
}
|
||||
if (isWithinPanel) {
|
||||
$api.toggleDisclosure();
|
||||
$buttonStore?.focus();
|
||||
} else {
|
||||
$api.toggleDisclosure();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (disabled) return;
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (disabled) return;
|
||||
|
||||
if (isWithinPanel) {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.toggleDisclosure();
|
||||
$buttonStore?.focus();
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.toggleDisclosure();
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (isWithinPanel) {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.toggleDisclosure();
|
||||
$buttonStore?.focus();
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.toggleDisclosure();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
// Required for firefox, event.preventDefault() in handleKeyDown for
|
||||
// the Space key doesn't cancel the handleKeyUp, which in turn
|
||||
// triggers a *click*.
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
// Required for firefox, event.preventDefault() in handleKeyDown for
|
||||
// the Space key doesn't cancel the handleKeyUp, which in turn
|
||||
// triggers a *click*.
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$: propsWeControl = isWithinPanel
|
||||
? {}
|
||||
: {
|
||||
id,
|
||||
"aria-expanded": disabled
|
||||
? undefined
|
||||
: $api.disclosureState === DisclosureStates.Open,
|
||||
"aria-controls": $panelStore ? $api?.panelId : undefined,
|
||||
disabled: disabled ? true : undefined,
|
||||
};
|
||||
$: propsWeControl = isWithinPanel
|
||||
? {}
|
||||
: {
|
||||
id,
|
||||
"aria-expanded": disabled
|
||||
? undefined
|
||||
: $api.disclosureState === DisclosureStates.Open,
|
||||
"aria-controls": $panelStore ? $api?.panelId : undefined,
|
||||
disabled: disabled ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if isWithinPanel}
|
||||
<button
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
on:click={handleClick}
|
||||
on:keydown={handleKeyDown}
|
||||
>
|
||||
<slot
|
||||
open={$api?.disclosureState === DisclosureStates.Open}
|
||||
close={$api?.close}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
on:click={handleClick}
|
||||
on:keydown={handleKeyDown}
|
||||
>
|
||||
<slot
|
||||
open={$api?.disclosureState === DisclosureStates.Open}
|
||||
close={$api?.close}
|
||||
/>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={$buttonStore}
|
||||
on:click={handleClick}
|
||||
on:keydown={handleKeyDown}
|
||||
on:keyup={handleKeyUp}
|
||||
>
|
||||
<slot
|
||||
open={$api?.disclosureState === DisclosureStates.Open}
|
||||
close={$api?.close}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={$buttonStore}
|
||||
on:click={handleClick}
|
||||
on:keydown={handleKeyDown}
|
||||
on:keyup={handleKeyUp}
|
||||
>
|
||||
<slot
|
||||
open={$api?.disclosureState === DisclosureStates.Open}
|
||||
close={$api?.close}
|
||||
/>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@@ -1,40 +1,37 @@
|
||||
<script lang="ts" context="module">
|
||||
import { getContext, setContext } from "svelte";
|
||||
let DISCLOSURE_PANEL_CONTEXT_NAME = "DisclosurePanelContext";
|
||||
import { getContext, setContext } from "svelte";
|
||||
let DISCLOSURE_PANEL_CONTEXT_NAME = "DisclosurePanelContext";
|
||||
|
||||
export function usePanelContext(): string | undefined {
|
||||
return getContext(DISCLOSURE_PANEL_CONTEXT_NAME);
|
||||
}
|
||||
export function usePanelContext(): string | undefined {
|
||||
return getContext(DISCLOSURE_PANEL_CONTEXT_NAME);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
useDisclosureContext,
|
||||
DisclosureStates,
|
||||
} from "./Disclosure.svelte";
|
||||
import { Writable } from "svelte/store";
|
||||
import { State } from "./open-closed";
|
||||
const api = useDisclosureContext("DisclosureButton");
|
||||
$: id = $api?.panelId;
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
import { State } from "$lib/internal/open-closed";
|
||||
const api = useDisclosureContext("DisclosureButton");
|
||||
$: id = $api?.panelId;
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
|
||||
setContext(DISCLOSURE_PANEL_CONTEXT_NAME, id);
|
||||
setContext(DISCLOSURE_PANEL_CONTEXT_NAME, id);
|
||||
|
||||
$: panelStore = $api?.panelStore;
|
||||
$: panelStore = $api?.panelStore;
|
||||
|
||||
$: visible =
|
||||
$openClosedState !== null
|
||||
? $openClosedState === State.Open
|
||||
: $api?.disclosureState === DisclosureStates.Open;
|
||||
$: visible =
|
||||
$openClosedState !== null
|
||||
? $openClosedState === State.Open
|
||||
: $api?.disclosureState === DisclosureStates.Open;
|
||||
|
||||
$: propsWeControl = { id };
|
||||
$: propsWeControl = { id };
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div {...{ ...$$restProps, ...propsWeControl }} bind:this={$panelStore}>
|
||||
<slot
|
||||
open={$api?.disclosureState === DisclosureStates.Open}
|
||||
close={$api?.close}
|
||||
/>
|
||||
</div>
|
||||
<div {...{ ...$$restProps, ...propsWeControl }} bind:this={$panelStore}>
|
||||
<slot
|
||||
open={$api?.disclosureState === DisclosureStates.Open}
|
||||
close={$api?.close}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,127 +1,126 @@
|
||||
<script lang="ts">
|
||||
import { Keys } from "./keyboard";
|
||||
import {
|
||||
focusElement,
|
||||
focusIn,
|
||||
Focus,
|
||||
FocusResult,
|
||||
} from "./focus-management";
|
||||
import { contains } from "./dom-containers";
|
||||
import { afterUpdate, onMount, onDestroy } from "svelte";
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
import {
|
||||
focusElement,
|
||||
focusIn,
|
||||
Focus,
|
||||
FocusResult,
|
||||
} from "$lib/utils/focus-management";
|
||||
import { contains } from "$lib/internal/dom-containers";
|
||||
import { afterUpdate, onMount, onDestroy } from "svelte";
|
||||
|
||||
export let containers: Set<HTMLElement>;
|
||||
export let enabled: boolean = true;
|
||||
export let options: { initialFocus?: HTMLElement | null } = {};
|
||||
export let containers: Set<HTMLElement>;
|
||||
export let enabled: boolean = true;
|
||||
export let options: { initialFocus?: HTMLElement | null } = {};
|
||||
|
||||
let restoreElement: HTMLElement | null =
|
||||
typeof window !== "undefined"
|
||||
? (document.activeElement as HTMLElement)
|
||||
: null;
|
||||
let restoreElement: HTMLElement | null =
|
||||
typeof window !== "undefined"
|
||||
? (document.activeElement as HTMLElement)
|
||||
: null;
|
||||
|
||||
let previousActiveElement: HTMLElement | null = null;
|
||||
let previousActiveElement: HTMLElement | null = null;
|
||||
|
||||
function handleFocus() {
|
||||
if (!enabled) return;
|
||||
if (containers.size !== 1) return;
|
||||
let { initialFocus } = options;
|
||||
function handleFocus() {
|
||||
if (!enabled) return;
|
||||
if (containers.size !== 1) return;
|
||||
let { initialFocus } = options;
|
||||
|
||||
let activeElement = document.activeElement as HTMLElement;
|
||||
let activeElement = document.activeElement as HTMLElement;
|
||||
|
||||
if (initialFocus) {
|
||||
if (initialFocus === activeElement) {
|
||||
return; // Initial focus ref is already the active element
|
||||
}
|
||||
} else if (contains(containers, activeElement)) {
|
||||
return; // Already focused within Dialog
|
||||
if (initialFocus) {
|
||||
if (initialFocus === activeElement) {
|
||||
return; // Initial focus ref is already the active element
|
||||
}
|
||||
} else if (contains(containers, activeElement)) {
|
||||
return; // Already focused within Dialog
|
||||
}
|
||||
|
||||
restoreElement = activeElement;
|
||||
|
||||
// Try to focus the initialFocus ref
|
||||
if (initialFocus) {
|
||||
focusElement(initialFocus);
|
||||
} else {
|
||||
let couldFocus = false;
|
||||
for (let container of containers) {
|
||||
let result = focusIn(container, Focus.First);
|
||||
if (result === FocusResult.Success) {
|
||||
couldFocus = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
restoreElement = activeElement;
|
||||
if (!couldFocus)
|
||||
console.warn(
|
||||
"There are no focusable elements inside the <FocusTrap />"
|
||||
);
|
||||
}
|
||||
|
||||
// Try to focus the initialFocus ref
|
||||
if (initialFocus) {
|
||||
focusElement(initialFocus);
|
||||
} else {
|
||||
let couldFocus = false;
|
||||
for (let container of containers) {
|
||||
let result = focusIn(container, Focus.First);
|
||||
if (result === FocusResult.Success) {
|
||||
couldFocus = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
previousActiveElement = document.activeElement as HTMLElement;
|
||||
}
|
||||
|
||||
if (!couldFocus)
|
||||
console.warn(
|
||||
"There are no focusable elements inside the <FocusTrap />"
|
||||
);
|
||||
}
|
||||
// Restore when `enabled` becomes false
|
||||
function restore() {
|
||||
focusElement(restoreElement);
|
||||
restoreElement = null;
|
||||
previousActiveElement = null;
|
||||
}
|
||||
|
||||
// Handle initial focus
|
||||
onMount(handleFocus);
|
||||
|
||||
afterUpdate(() => (enabled ? handleFocus() : restore()));
|
||||
|
||||
onDestroy(restore);
|
||||
|
||||
// Handle Tab & Shift+Tab keyboard events
|
||||
function handleWindowKeyDown(event: KeyboardEvent) {
|
||||
if (!enabled) return;
|
||||
if (event.key !== Keys.Tab) return;
|
||||
if (!document.activeElement) return;
|
||||
if (containers.size !== 1) return;
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
for (let element of containers) {
|
||||
let result = focusIn(
|
||||
element,
|
||||
(event.shiftKey ? Focus.Previous : Focus.Next) | Focus.WrapAround
|
||||
);
|
||||
|
||||
if (result === FocusResult.Success) {
|
||||
previousActiveElement = document.activeElement as HTMLElement;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Restore when `enabled` becomes false
|
||||
function restore() {
|
||||
focusElement(restoreElement);
|
||||
restoreElement = null;
|
||||
previousActiveElement = null;
|
||||
}
|
||||
// Prevent programmatically escaping
|
||||
function handleWindowFocus(event: FocusEvent) {
|
||||
if (!enabled) return;
|
||||
if (containers.size !== 1) return;
|
||||
|
||||
// Handle initial focus
|
||||
onMount(handleFocus);
|
||||
let previous = previousActiveElement;
|
||||
if (!previous) return;
|
||||
|
||||
afterUpdate(() => (enabled ? handleFocus() : restore()));
|
||||
|
||||
onDestroy(restore);
|
||||
|
||||
// Handle Tab & Shift+Tab keyboard events
|
||||
function handleWindowKeyDown(event: KeyboardEvent) {
|
||||
if (!enabled) return;
|
||||
if (event.key !== Keys.Tab) return;
|
||||
if (!document.activeElement) return;
|
||||
if (containers.size !== 1) return;
|
||||
let toElement = event.target as HTMLElement | null;
|
||||
|
||||
if (toElement && toElement instanceof HTMLElement) {
|
||||
if (!contains(containers, toElement)) {
|
||||
event.preventDefault();
|
||||
|
||||
for (let element of containers) {
|
||||
let result = focusIn(
|
||||
element,
|
||||
(event.shiftKey ? Focus.Previous : Focus.Next) |
|
||||
Focus.WrapAround
|
||||
);
|
||||
|
||||
if (result === FocusResult.Success) {
|
||||
previousActiveElement = document.activeElement as HTMLElement;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent programmatically escaping
|
||||
function handleWindowFocus(event: FocusEvent) {
|
||||
if (!enabled) return;
|
||||
if (containers.size !== 1) return;
|
||||
|
||||
let previous = previousActiveElement;
|
||||
if (!previous) return;
|
||||
|
||||
let toElement = event.target as HTMLElement | null;
|
||||
|
||||
if (toElement && toElement instanceof HTMLElement) {
|
||||
if (!contains(containers, toElement)) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
focusElement(previous);
|
||||
} else {
|
||||
previousActiveElement = toElement;
|
||||
focusElement(toElement);
|
||||
}
|
||||
} else {
|
||||
focusElement(previousActiveElement);
|
||||
}
|
||||
event.stopPropagation();
|
||||
focusElement(previous);
|
||||
} else {
|
||||
previousActiveElement = toElement;
|
||||
focusElement(toElement);
|
||||
}
|
||||
} else {
|
||||
focusElement(previousActiveElement);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:keydown={handleWindowKeyDown}
|
||||
on:focus|capture={handleWindowFocus}
|
||||
on:keydown={handleWindowKeyDown}
|
||||
on:focus|capture={handleWindowFocus}
|
||||
/>
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
<script lang="ts">
|
||||
import { useId } from "./use-id";
|
||||
import { getContext, onMount } from "svelte";
|
||||
import { Writable } from "svelte/store";
|
||||
import { LabelContext } from "./LabelProvider.svelte";
|
||||
const id = `headlessui-label-${useId()}`;
|
||||
export let passive = false;
|
||||
let contextStore: Writable<LabelContext> | undefined = getContext(
|
||||
"headlessui-label-context"
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { getContext, onMount } from "svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
import type { LabelContext } from "./LabelProvider.svelte";
|
||||
const id = `headlessui-label-${useId()}`;
|
||||
export let passive = false;
|
||||
let contextStore: Writable<LabelContext> | undefined = getContext(
|
||||
"headlessui-label-context"
|
||||
);
|
||||
if (!contextStore) {
|
||||
throw new Error(
|
||||
"You used a <Label /> component, but it is not inside a relevant parent."
|
||||
);
|
||||
if (!contextStore) {
|
||||
throw new Error(
|
||||
"You used a <Label /> component, but it is not inside a relevant parent."
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => $contextStore.register(id));
|
||||
onMount(() => $contextStore.register(id));
|
||||
|
||||
let allProps = { ...$$restProps, ...$contextStore.props, id };
|
||||
if (passive) delete allProps["onClick"];
|
||||
let allProps = { ...$$restProps, ...$contextStore.props, id };
|
||||
if (passive) delete allProps["onClick"];
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label
|
||||
{...allProps}
|
||||
on:blur
|
||||
on:click
|
||||
on:focus
|
||||
on:keyup
|
||||
on:keydown
|
||||
on:keypress
|
||||
on:click={(event) => {
|
||||
if (!passive) allProps["onClick"]?.(event);
|
||||
}}
|
||||
{...allProps}
|
||||
on:blur
|
||||
on:click
|
||||
on:focus
|
||||
on:keyup
|
||||
on:keydown
|
||||
on:keypress
|
||||
on:click={(event) => {
|
||||
if (!passive) allProps["onClick"]?.(event);
|
||||
}}
|
||||
>
|
||||
<slot />
|
||||
<slot />
|
||||
</label>
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
<script lang="ts" context="module">
|
||||
export interface LabelContext {
|
||||
name?: string;
|
||||
props?: object;
|
||||
register: (value: string) => void;
|
||||
labelIds?: string;
|
||||
}
|
||||
export interface LabelContext {
|
||||
name?: string;
|
||||
props?: object;
|
||||
register: (value: string) => void;
|
||||
labelIds?: string;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
export let name: string;
|
||||
let labelIds = [];
|
||||
let contextStore: Writable<LabelContext> = writable({
|
||||
name,
|
||||
register,
|
||||
props: $$restProps,
|
||||
});
|
||||
setContext("headlessui-label-context", contextStore);
|
||||
import { setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
export let name: string;
|
||||
let labelIds = [];
|
||||
let contextStore: Writable<LabelContext> = writable({
|
||||
name,
|
||||
register,
|
||||
props: $$restProps,
|
||||
});
|
||||
setContext("headlessui-label-context", contextStore);
|
||||
|
||||
$: contextStore.set({
|
||||
name,
|
||||
props: $$restProps,
|
||||
register,
|
||||
labelIds: labelIds.length > 0 ? labelIds.join(" ") : undefined,
|
||||
});
|
||||
$: contextStore.set({
|
||||
name,
|
||||
props: $$restProps,
|
||||
register,
|
||||
labelIds: labelIds.length > 0 ? labelIds.join(" ") : undefined,
|
||||
});
|
||||
|
||||
function register(value: string) {
|
||||
labelIds = [...labelIds, value];
|
||||
return () => {
|
||||
labelIds = labelIds.filter((labelId) => labelId !== value);
|
||||
};
|
||||
}
|
||||
function register(value: string) {
|
||||
labelIds = [...labelIds, value];
|
||||
return () => {
|
||||
labelIds = labelIds.filter((labelId) => labelId !== value);
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<slot labelledby={$contextStore.labelIds} />
|
||||
|
||||
@@ -1,190 +1,187 @@
|
||||
<script lang="ts" context="module">
|
||||
export enum ListboxStates {
|
||||
Open,
|
||||
Closed,
|
||||
}
|
||||
export type ListboxOptionDataRef = {
|
||||
textValue: string;
|
||||
disabled: boolean;
|
||||
value: unknown;
|
||||
};
|
||||
export enum ListboxStates {
|
||||
Open,
|
||||
Closed,
|
||||
}
|
||||
export type ListboxOptionDataRef = {
|
||||
textValue: string;
|
||||
disabled: boolean;
|
||||
value: unknown;
|
||||
};
|
||||
|
||||
export type StateDefinition = {
|
||||
// State
|
||||
listboxState: ListboxStates;
|
||||
value: any;
|
||||
orientation: "vertical" | "horizontal";
|
||||
export type StateDefinition = {
|
||||
// State
|
||||
listboxState: ListboxStates;
|
||||
value: any;
|
||||
orientation: "vertical" | "horizontal";
|
||||
|
||||
labelRef: HTMLLabelElement | null;
|
||||
buttonRef: HTMLButtonElement | null;
|
||||
optionsRef: HTMLDivElement | null;
|
||||
labelRef: HTMLLabelElement | null;
|
||||
buttonRef: HTMLButtonElement | null;
|
||||
optionsRef: HTMLDivElement | null;
|
||||
|
||||
disabled: boolean;
|
||||
options: { id: string; dataRef: ListboxOptionDataRef }[];
|
||||
searchQuery: string;
|
||||
activeOptionIndex: number | null;
|
||||
disabled: boolean;
|
||||
options: { id: string; dataRef: ListboxOptionDataRef }[];
|
||||
searchQuery: string;
|
||||
activeOptionIndex: number | null;
|
||||
|
||||
// State mutators
|
||||
closeListbox(): void;
|
||||
openListbox(): void;
|
||||
goToOption(focus: Focus, id?: string): void;
|
||||
search(value: string): void;
|
||||
clearSearch(): void;
|
||||
registerOption(id: string, dataRef: ListboxOptionDataRef): void;
|
||||
unregisterOption(id: string): void;
|
||||
select(value: unknown): void;
|
||||
};
|
||||
// State mutators
|
||||
closeListbox(): void;
|
||||
openListbox(): void;
|
||||
goToOption(focus: Focus, id?: string): void;
|
||||
search(value: string): void;
|
||||
clearSearch(): void;
|
||||
registerOption(id: string, dataRef: ListboxOptionDataRef): void;
|
||||
unregisterOption(id: string): void;
|
||||
select(value: unknown): void;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { Focus, calculateActiveIndex } from "./calculate-active-index";
|
||||
import { createEventDispatcher, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { match } from "./match";
|
||||
import { State, useOpenClosedProvider } from "./open-closed";
|
||||
import {
|
||||
Focus,
|
||||
calculateActiveIndex,
|
||||
} from "$lib/utils/calculate-active-index";
|
||||
import { createEventDispatcher, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { match } from "$lib/utils/match";
|
||||
import { State, useOpenClosedProvider } from "$lib/internal/open-closed";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let listboxState = ListboxStates.Closed;
|
||||
let labelStore = writable(null);
|
||||
setContext("labelStore", labelStore);
|
||||
$: labelRef = $labelStore;
|
||||
let buttonStore = writable(null);
|
||||
setContext("buttonStore", buttonStore);
|
||||
$: buttonRef = $buttonStore;
|
||||
let optionsStore = writable(null);
|
||||
setContext("optionsStore", optionsStore);
|
||||
$: optionsRef = $optionsStore;
|
||||
let options = [];
|
||||
let searchQuery = "";
|
||||
let activeOptionIndex = null;
|
||||
let listboxState = ListboxStates.Closed;
|
||||
let labelStore = writable(null);
|
||||
setContext("labelStore", labelStore);
|
||||
$: labelRef = $labelStore;
|
||||
let buttonStore = writable(null);
|
||||
setContext("buttonStore", buttonStore);
|
||||
$: buttonRef = $buttonStore;
|
||||
let optionsStore = writable(null);
|
||||
setContext("optionsStore", optionsStore);
|
||||
$: optionsRef = $optionsStore;
|
||||
let options = [];
|
||||
let searchQuery = "";
|
||||
let activeOptionIndex = null;
|
||||
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext("api", api);
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext("api", api);
|
||||
|
||||
let openClosedState = writable(State.Closed);
|
||||
useOpenClosedProvider(openClosedState);
|
||||
$: openClosedState.set(
|
||||
match(listboxState, {
|
||||
[ListboxStates.Open]: State.Open,
|
||||
[ListboxStates.Closed]: State.Closed,
|
||||
})
|
||||
);
|
||||
let openClosedState = writable(State.Closed);
|
||||
useOpenClosedProvider(openClosedState);
|
||||
$: openClosedState.set(
|
||||
match(listboxState, {
|
||||
[ListboxStates.Open]: State.Open,
|
||||
[ListboxStates.Closed]: State.Closed,
|
||||
})
|
||||
);
|
||||
|
||||
export let disabled = false;
|
||||
export let horizontal = false;
|
||||
export let value: any;
|
||||
export let disabled = false;
|
||||
export let horizontal = false;
|
||||
export let value: any;
|
||||
|
||||
$: orientation = (horizontal ? "horizontal" : "vertical") as
|
||||
| "horizontal"
|
||||
| "vertical";
|
||||
$: api.set({
|
||||
listboxState,
|
||||
labelRef,
|
||||
value,
|
||||
buttonRef,
|
||||
optionsRef,
|
||||
options,
|
||||
searchQuery,
|
||||
activeOptionIndex,
|
||||
disabled,
|
||||
orientation,
|
||||
closeListbox() {
|
||||
if (disabled) return;
|
||||
if (listboxState === ListboxStates.Closed) return;
|
||||
listboxState = ListboxStates.Closed;
|
||||
activeOptionIndex = null;
|
||||
},
|
||||
openListbox() {
|
||||
if (disabled) return;
|
||||
if (listboxState === ListboxStates.Open) return;
|
||||
listboxState = ListboxStates.Open;
|
||||
},
|
||||
goToOption(focus: Focus, id?: string) {
|
||||
if (disabled) return;
|
||||
if (listboxState === ListboxStates.Closed) return;
|
||||
$: orientation = (horizontal ? "horizontal" : "vertical") as
|
||||
| "horizontal"
|
||||
| "vertical";
|
||||
$: api.set({
|
||||
listboxState,
|
||||
labelRef,
|
||||
value,
|
||||
buttonRef,
|
||||
optionsRef,
|
||||
options,
|
||||
searchQuery,
|
||||
activeOptionIndex,
|
||||
disabled,
|
||||
orientation,
|
||||
closeListbox() {
|
||||
if (disabled) return;
|
||||
if (listboxState === ListboxStates.Closed) return;
|
||||
listboxState = ListboxStates.Closed;
|
||||
activeOptionIndex = null;
|
||||
},
|
||||
openListbox() {
|
||||
if (disabled) return;
|
||||
if (listboxState === ListboxStates.Open) return;
|
||||
listboxState = ListboxStates.Open;
|
||||
},
|
||||
goToOption(focus: Focus, id?: string) {
|
||||
if (disabled) return;
|
||||
if (listboxState === ListboxStates.Closed) return;
|
||||
|
||||
let nextActiveOptionIndex = calculateActiveIndex(
|
||||
focus === Focus.Specific
|
||||
? { focus: Focus.Specific, id: id! }
|
||||
: { focus: focus as Exclude<Focus, Focus.Specific> },
|
||||
{
|
||||
resolveItems: () => options,
|
||||
resolveActiveIndex: () => activeOptionIndex,
|
||||
resolveId: (option) => option.id,
|
||||
resolveDisabled: (option) => option.disabled,
|
||||
}
|
||||
);
|
||||
|
||||
if (
|
||||
searchQuery === "" &&
|
||||
activeOptionIndex === nextActiveOptionIndex
|
||||
)
|
||||
return;
|
||||
activeOptionIndex = nextActiveOptionIndex;
|
||||
searchQuery = "";
|
||||
},
|
||||
search(value: string) {
|
||||
if (disabled) return;
|
||||
if (listboxState === ListboxStates.Closed) return;
|
||||
|
||||
searchQuery += value.toLowerCase();
|
||||
|
||||
let match = options.findIndex(
|
||||
(option) =>
|
||||
!option.disabled && option.textValue.startsWith(searchQuery)
|
||||
);
|
||||
|
||||
if (match === -1 || match === activeOptionIndex) return;
|
||||
activeOptionIndex = match;
|
||||
},
|
||||
clearSearch() {
|
||||
if (disabled) return;
|
||||
if (listboxState === ListboxStates.Closed) return;
|
||||
if (searchQuery === "") return;
|
||||
|
||||
searchQuery = "";
|
||||
},
|
||||
registerOption(id: string, dataRef) {
|
||||
options = [...options, { id, dataRef }];
|
||||
},
|
||||
unregisterOption(id: string) {
|
||||
let nextOptions = options.slice();
|
||||
let currentActiveOption =
|
||||
activeOptionIndex !== null
|
||||
? nextOptions[activeOptionIndex]
|
||||
: null;
|
||||
let idx = nextOptions.findIndex((a) => a.id === id);
|
||||
if (idx !== -1) nextOptions.splice(idx, 1);
|
||||
options = nextOptions;
|
||||
activeOptionIndex = (() => {
|
||||
if (idx === activeOptionIndex) return null;
|
||||
if (currentActiveOption === null) return null;
|
||||
|
||||
// If we removed the option before the actual active index, then it would be out of sync. To
|
||||
// fix this, we will find the correct (new) index position.
|
||||
return nextOptions.indexOf(currentActiveOption);
|
||||
})();
|
||||
},
|
||||
select(value: unknown) {
|
||||
if (disabled) return;
|
||||
dispatch("updateValue", { value });
|
||||
},
|
||||
});
|
||||
|
||||
function handleMousedown(event: MouseEvent) {
|
||||
let target = event.target as HTMLElement;
|
||||
let active = document.activeElement;
|
||||
|
||||
if (listboxState !== ListboxStates.Open) return;
|
||||
if (buttonRef?.contains(target)) return;
|
||||
|
||||
if (!optionsRef?.contains(target)) $api.closeListbox();
|
||||
if (active !== document.body && active?.contains(target)) return; // Keep focus on newly clicked/focused element
|
||||
if (!event.defaultPrevented) {
|
||||
buttonRef?.focus({ preventScroll: true });
|
||||
let nextActiveOptionIndex = calculateActiveIndex(
|
||||
focus === Focus.Specific
|
||||
? { focus: Focus.Specific, id: id! }
|
||||
: { focus: focus as Exclude<Focus, Focus.Specific> },
|
||||
{
|
||||
resolveItems: () => options,
|
||||
resolveActiveIndex: () => activeOptionIndex,
|
||||
resolveId: (option) => option.id,
|
||||
resolveDisabled: (option) => option.disabled,
|
||||
}
|
||||
);
|
||||
|
||||
if (searchQuery === "" && activeOptionIndex === nextActiveOptionIndex)
|
||||
return;
|
||||
activeOptionIndex = nextActiveOptionIndex;
|
||||
searchQuery = "";
|
||||
},
|
||||
search(value: string) {
|
||||
if (disabled) return;
|
||||
if (listboxState === ListboxStates.Closed) return;
|
||||
|
||||
searchQuery += value.toLowerCase();
|
||||
|
||||
let match = options.findIndex(
|
||||
(option) => !option.disabled && option.textValue.startsWith(searchQuery)
|
||||
);
|
||||
|
||||
if (match === -1 || match === activeOptionIndex) return;
|
||||
activeOptionIndex = match;
|
||||
},
|
||||
clearSearch() {
|
||||
if (disabled) return;
|
||||
if (listboxState === ListboxStates.Closed) return;
|
||||
if (searchQuery === "") return;
|
||||
|
||||
searchQuery = "";
|
||||
},
|
||||
registerOption(id: string, dataRef) {
|
||||
options = [...options, { id, dataRef }];
|
||||
},
|
||||
unregisterOption(id: string) {
|
||||
let nextOptions = options.slice();
|
||||
let currentActiveOption =
|
||||
activeOptionIndex !== null ? nextOptions[activeOptionIndex] : null;
|
||||
let idx = nextOptions.findIndex((a) => a.id === id);
|
||||
if (idx !== -1) nextOptions.splice(idx, 1);
|
||||
options = nextOptions;
|
||||
activeOptionIndex = (() => {
|
||||
if (idx === activeOptionIndex) return null;
|
||||
if (currentActiveOption === null) return null;
|
||||
|
||||
// If we removed the option before the actual active index, then it would be out of sync. To
|
||||
// fix this, we will find the correct (new) index position.
|
||||
return nextOptions.indexOf(currentActiveOption);
|
||||
})();
|
||||
},
|
||||
select(value: unknown) {
|
||||
if (disabled) return;
|
||||
dispatch("updateValue", { value });
|
||||
},
|
||||
});
|
||||
|
||||
function handleMousedown(event: MouseEvent) {
|
||||
let target = event.target as HTMLElement;
|
||||
let active = document.activeElement;
|
||||
|
||||
if (listboxState !== ListboxStates.Open) return;
|
||||
if (buttonRef?.contains(target)) return;
|
||||
|
||||
if (!optionsRef?.contains(target)) $api.closeListbox();
|
||||
if (active !== document.body && active?.contains(target)) return; // Keep focus on newly clicked/focused element
|
||||
if (!event.defaultPrevented) {
|
||||
buttonRef?.focus({ preventScroll: true });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:mousedown={handleMousedown} />
|
||||
|
||||
@@ -1,85 +1,85 @@
|
||||
<script lang="ts">
|
||||
import { getContext, tick } from "svelte";
|
||||
import { ListboxStates, StateDefinition } from "./Listbox.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { Keys } from "./keyboard";
|
||||
import { Focus } from "./calculate-active-index";
|
||||
let api: SvelteStore<StateDefinition> = getContext("api");
|
||||
let id = `headlessui-listbox-button-${useId()}`;
|
||||
let buttonStore: SvelteStore<HTMLButtonElement> = getContext("buttonStore");
|
||||
import { getContext, tick } from "svelte";
|
||||
import { ListboxStates, StateDefinition } from "./Listbox.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
import { Focus } from "$lib/utils/calculate-active-index";
|
||||
let api: SvelteStore<StateDefinition> = getContext("api");
|
||||
let id = `headlessui-listbox-button-${useId()}`;
|
||||
let buttonStore: SvelteStore<HTMLButtonElement> = getContext("buttonStore");
|
||||
|
||||
async function handleKeyDown(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
// Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
case Keys.ArrowDown:
|
||||
event.preventDefault();
|
||||
$api.openListbox();
|
||||
await tick();
|
||||
$api.optionsRef?.focus({ preventScroll: true });
|
||||
if (!$api.value) $api.goToOption(Focus.First);
|
||||
break;
|
||||
async function handleKeyDown(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
// Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
case Keys.ArrowDown:
|
||||
event.preventDefault();
|
||||
$api.openListbox();
|
||||
await tick();
|
||||
$api.optionsRef?.focus({ preventScroll: true });
|
||||
if (!$api.value) $api.goToOption(Focus.First);
|
||||
break;
|
||||
|
||||
case Keys.ArrowUp:
|
||||
event.preventDefault();
|
||||
$api.openListbox();
|
||||
await tick();
|
||||
$api.optionsRef?.focus({ preventScroll: true });
|
||||
if (!$api.value) $api.goToOption(Focus.Last);
|
||||
break;
|
||||
}
|
||||
case Keys.ArrowUp:
|
||||
event.preventDefault();
|
||||
$api.openListbox();
|
||||
await tick();
|
||||
$api.optionsRef?.focus({ preventScroll: true });
|
||||
if (!$api.value) $api.goToOption(Focus.Last);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
// Required for firefox, event.preventDefault() in handleKeyDown for
|
||||
// the Space key doesn't cancel the handleKeyUp, which in turn
|
||||
// triggers a *click*.
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
// Required for firefox, event.preventDefault() in handleKeyDown for
|
||||
// the Space key doesn't cancel the handleKeyUp, which in turn
|
||||
// triggers a *click*.
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClick(event: MouseEvent) {
|
||||
if ($api.disabled) return;
|
||||
if ($api.listboxState === ListboxStates.Open) {
|
||||
$api.closeListbox();
|
||||
await tick();
|
||||
$api.buttonRef?.focus({ preventScroll: true });
|
||||
} else {
|
||||
event.preventDefault();
|
||||
$api.openListbox();
|
||||
await tick();
|
||||
$api.optionsRef?.focus({ preventScroll: true });
|
||||
}
|
||||
async function handleClick(event: MouseEvent) {
|
||||
if ($api.disabled) return;
|
||||
if ($api.listboxState === ListboxStates.Open) {
|
||||
$api.closeListbox();
|
||||
await tick();
|
||||
$api.buttonRef?.focus({ preventScroll: true });
|
||||
} else {
|
||||
event.preventDefault();
|
||||
$api.openListbox();
|
||||
await tick();
|
||||
$api.optionsRef?.focus({ preventScroll: true });
|
||||
}
|
||||
}
|
||||
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
"aria-haspopup": true,
|
||||
"aria-controls": $api?.optionsRef?.id,
|
||||
"aria-expanded": $api?.disabled
|
||||
? undefined
|
||||
: $api?.listboxState === ListboxStates.Open,
|
||||
"aria-labelledby": $api?.labelRef
|
||||
? [$api?.labelRef?.id, id].join(" ")
|
||||
: undefined,
|
||||
disabled: $api?.disabled === true ? true : undefined,
|
||||
};
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
"aria-haspopup": true,
|
||||
"aria-controls": $api?.optionsRef?.id,
|
||||
"aria-expanded": $api?.disabled
|
||||
? undefined
|
||||
: $api?.listboxState === ListboxStates.Open,
|
||||
"aria-labelledby": $api?.labelRef
|
||||
? [$api?.labelRef?.id, id].join(" ")
|
||||
: undefined,
|
||||
disabled: $api?.disabled === true ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
{...$$restProps}
|
||||
{...propsWeControl}
|
||||
bind:this={$buttonStore}
|
||||
on:click={handleClick}
|
||||
on:keydown={handleKeyDown}
|
||||
on:keyup={handleKeyUp}
|
||||
{...$$restProps}
|
||||
{...propsWeControl}
|
||||
bind:this={$buttonStore}
|
||||
on:click={handleClick}
|
||||
on:keydown={handleKeyDown}
|
||||
on:keyup={handleKeyUp}
|
||||
>
|
||||
<slot
|
||||
open={$api.listboxState === ListboxStates.Open}
|
||||
disabled={$api.disabled}
|
||||
/>
|
||||
<slot
|
||||
open={$api.listboxState === ListboxStates.Open}
|
||||
disabled={$api.disabled}
|
||||
/>
|
||||
</button>
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { getContext } from "svelte";
|
||||
import { ListboxStates, StateDefinition } from "./Listbox.svelte";
|
||||
import { useId } from "./use-id";
|
||||
let api: SvelteStore<StateDefinition> = getContext("api");
|
||||
let id = `headlessui-listbox-label-${useId()}`;
|
||||
let labelStore: SvelteStore<HTMLLabelElement> = getContext("labelStore");
|
||||
import { getContext } from "svelte";
|
||||
import { ListboxStates, StateDefinition } from "./Listbox.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
let api: SvelteStore<StateDefinition> = getContext("api");
|
||||
let id = `headlessui-listbox-label-${useId()}`;
|
||||
let labelStore: SvelteStore<HTMLLabelElement> = getContext("labelStore");
|
||||
|
||||
function handleClick() {
|
||||
$api.buttonRef?.focus({ preventScroll: true });
|
||||
}
|
||||
function handleClick() {
|
||||
$api.buttonRef?.focus({ preventScroll: true });
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label {...$$restProps} {id} bind:this={$labelStore} on:click={handleClick}>
|
||||
<slot
|
||||
open={$api.listboxState === ListboxStates.Open}
|
||||
disabled={$api.disabled}
|
||||
/>
|
||||
<slot
|
||||
open={$api.listboxState === ListboxStates.Open}
|
||||
disabled={$api.disabled}
|
||||
/>
|
||||
</label>
|
||||
|
||||
@@ -1,114 +1,112 @@
|
||||
<script lang="ts">
|
||||
import { getContext, onDestroy, onMount, tick } from "svelte";
|
||||
import { ListboxStates, StateDefinition } from "./Listbox.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { Focus } from "./calculate-active-index";
|
||||
export let value: any;
|
||||
export let disabled = false;
|
||||
let api: SvelteStore<StateDefinition> = getContext("api");
|
||||
let id = `headlessui-listbox-option-${useId()}`;
|
||||
import { getContext, onDestroy, onMount, tick } from "svelte";
|
||||
import { ListboxStates, StateDefinition } from "./Listbox.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { Focus } from "$lib/utils/calculate-active-index";
|
||||
export let value: any;
|
||||
export let disabled = false;
|
||||
let api: SvelteStore<StateDefinition> = getContext("api");
|
||||
let id = `headlessui-listbox-option-${useId()}`;
|
||||
|
||||
$: active =
|
||||
$api?.activeOptionIndex !== null
|
||||
? $api?.options[$api.activeOptionIndex].id === id
|
||||
: false;
|
||||
$: active =
|
||||
$api?.activeOptionIndex !== null
|
||||
? $api?.options[$api.activeOptionIndex].id === id
|
||||
: false;
|
||||
|
||||
$: selected = $api?.value === value;
|
||||
$: dataRef = {
|
||||
disabled,
|
||||
value,
|
||||
textValue: "",
|
||||
};
|
||||
$: selected = $api?.value === value;
|
||||
$: dataRef = {
|
||||
disabled,
|
||||
value,
|
||||
textValue: "",
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
let textValue = document
|
||||
.getElementById(id)
|
||||
?.textContent?.toLowerCase()
|
||||
.trim();
|
||||
if (textValue !== undefined) dataRef.textValue = 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));
|
||||
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;
|
||||
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);
|
||||
}
|
||||
}
|
||||
$: updateFocus($api?.listboxState, selected, active);
|
||||
|
||||
async function handleClick(event: MouseEvent) {
|
||||
if (disabled) return event.preventDefault();
|
||||
$api.select(value);
|
||||
$api.closeListbox();
|
||||
await tick();
|
||||
$api.buttonRef?.focus({ preventScroll: true });
|
||||
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);
|
||||
|
||||
function handleFocus() {
|
||||
if (disabled) return $api.goToOption(Focus.Nothing);
|
||||
$api.goToOption(Focus.Specific, id);
|
||||
}
|
||||
async function handleClick(event: MouseEvent) {
|
||||
if (disabled) return event.preventDefault();
|
||||
$api.select(value);
|
||||
$api.closeListbox();
|
||||
await tick();
|
||||
$api.buttonRef?.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
function handleMove() {
|
||||
if (disabled) return;
|
||||
if (active) return;
|
||||
$api.goToOption(Focus.Specific, id);
|
||||
}
|
||||
function handleFocus() {
|
||||
if (disabled) return $api.goToOption(Focus.Nothing);
|
||||
$api.goToOption(Focus.Specific, id);
|
||||
}
|
||||
|
||||
function handleLeave() {
|
||||
if (disabled) return;
|
||||
if (!active) return;
|
||||
$api.goToOption(Focus.Nothing);
|
||||
}
|
||||
function handleMove() {
|
||||
if (disabled) return;
|
||||
if (active) return;
|
||||
$api.goToOption(Focus.Specific, id);
|
||||
}
|
||||
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "option",
|
||||
tabIndex: disabled === true ? undefined : -1,
|
||||
"aria-disabled": disabled === true ? true : undefined,
|
||||
"aria-selected": selected === true ? selected : undefined,
|
||||
};
|
||||
function handleLeave() {
|
||||
if (disabled) return;
|
||||
if (!active) return;
|
||||
$api.goToOption(Focus.Nothing);
|
||||
}
|
||||
|
||||
$: classStyle = $$props.class
|
||||
? typeof $$props.class === "function"
|
||||
? $$props.class({ active, selected, disabled })
|
||||
: $$props.class
|
||||
: "";
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "option",
|
||||
tabIndex: disabled === true ? undefined : -1,
|
||||
"aria-disabled": disabled === true ? true : undefined,
|
||||
"aria-selected": selected === true ? selected : undefined,
|
||||
};
|
||||
|
||||
$: classStyle = $$props.class
|
||||
? typeof $$props.class === "function"
|
||||
? $$props.class({ active, selected, disabled })
|
||||
: $$props.class
|
||||
: "";
|
||||
</script>
|
||||
|
||||
<li
|
||||
{...$$restProps}
|
||||
class={classStyle}
|
||||
{...propsWeControl}
|
||||
on:click={handleClick}
|
||||
on:focus={handleFocus}
|
||||
on:pointermove={handleMove}
|
||||
on:mousemove={handleMove}
|
||||
on:pointerleave={handleLeave}
|
||||
on:mouseleave={handleLeave}
|
||||
{...$$restProps}
|
||||
class={classStyle}
|
||||
{...propsWeControl}
|
||||
on:click={handleClick}
|
||||
on:focus={handleFocus}
|
||||
on:pointermove={handleMove}
|
||||
on:mousemove={handleMove}
|
||||
on:pointerleave={handleLeave}
|
||||
on:mouseleave={handleLeave}
|
||||
>
|
||||
<slot {active} {selected} {disabled} />
|
||||
<slot {active} {selected} {disabled} />
|
||||
</li>
|
||||
|
||||
@@ -1,118 +1,117 @@
|
||||
<script lang="ts">
|
||||
import { getContext, tick } from "svelte";
|
||||
import { ListboxStates, StateDefinition } from "./Listbox.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { match } from "./match";
|
||||
import { Keys } from "./keyboard";
|
||||
import { Focus } from "./calculate-active-index";
|
||||
import { State, useOpenClosed } from "./open-closed";
|
||||
let api: SvelteStore<StateDefinition> = getContext("api");
|
||||
let id = `headlessui-listbox-options-${useId()}`;
|
||||
let optionsStore: SvelteStore<HTMLUListElement> =
|
||||
getContext("optionsStore");
|
||||
import { getContext, tick } from "svelte";
|
||||
import { ListboxStates, StateDefinition } from "./Listbox.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { match } from "$lib/utils/match";
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
import { Focus } from "$lib/utils/calculate-active-index";
|
||||
import { State, useOpenClosed } from "$lib/internal/open-closed";
|
||||
let api: SvelteStore<StateDefinition> = getContext("api");
|
||||
let id = `headlessui-listbox-options-${useId()}`;
|
||||
let optionsStore: SvelteStore<HTMLUListElement> = getContext("optionsStore");
|
||||
|
||||
let searchDebounce: ReturnType<typeof setTimeout> | null = null;
|
||||
async function handleKeyDown(event: KeyboardEvent) {
|
||||
if (searchDebounce) clearTimeout(searchDebounce);
|
||||
let searchDebounce: ReturnType<typeof setTimeout> | null = null;
|
||||
async function handleKeyDown(event: KeyboardEvent) {
|
||||
if (searchDebounce) clearTimeout(searchDebounce);
|
||||
|
||||
switch (event.key) {
|
||||
// Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
|
||||
switch (event.key) {
|
||||
// Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
|
||||
|
||||
case Keys.Space:
|
||||
if ($api.searchQuery !== "") {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.search(event.key);
|
||||
}
|
||||
// When in type ahead mode, fallthrough
|
||||
case Keys.Enter:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if ($api.activeOptionIndex !== null) {
|
||||
let { dataRef } = $api.options[$api.activeOptionIndex];
|
||||
$api.select(dataRef.value);
|
||||
}
|
||||
$api.closeListbox();
|
||||
await tick();
|
||||
$api.buttonRef?.focus({ preventScroll: true });
|
||||
break;
|
||||
|
||||
case match($api.orientation, {
|
||||
vertical: Keys.ArrowDown,
|
||||
horizontal: Keys.ArrowRight,
|
||||
}):
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToOption(Focus.Next);
|
||||
|
||||
case match($api.orientation, {
|
||||
vertical: Keys.ArrowUp,
|
||||
horizontal: Keys.ArrowLeft,
|
||||
}):
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToOption(Focus.Previous);
|
||||
|
||||
case Keys.Home:
|
||||
case Keys.PageUp:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToOption(Focus.First);
|
||||
|
||||
case Keys.End:
|
||||
case Keys.PageDown:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToOption(Focus.Last);
|
||||
|
||||
case Keys.Escape:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.closeListbox();
|
||||
await tick();
|
||||
$api.buttonRef?.focus({ preventScroll: true });
|
||||
break;
|
||||
|
||||
case Keys.Tab:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
break;
|
||||
|
||||
default:
|
||||
if (event.key.length === 1) {
|
||||
$api.search(event.key);
|
||||
searchDebounce = setTimeout(() => $api.clearSearch(), 350);
|
||||
}
|
||||
break;
|
||||
case Keys.Space:
|
||||
if ($api.searchQuery !== "") {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.search(event.key);
|
||||
}
|
||||
// When in type ahead mode, fallthrough
|
||||
case Keys.Enter:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if ($api.activeOptionIndex !== null) {
|
||||
let { dataRef } = $api.options[$api.activeOptionIndex];
|
||||
$api.select(dataRef.value);
|
||||
}
|
||||
$api.closeListbox();
|
||||
await tick();
|
||||
$api.buttonRef?.focus({ preventScroll: true });
|
||||
break;
|
||||
|
||||
case match($api.orientation, {
|
||||
vertical: Keys.ArrowDown,
|
||||
horizontal: Keys.ArrowRight,
|
||||
}):
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToOption(Focus.Next);
|
||||
|
||||
case match($api.orientation, {
|
||||
vertical: Keys.ArrowUp,
|
||||
horizontal: Keys.ArrowLeft,
|
||||
}):
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToOption(Focus.Previous);
|
||||
|
||||
case Keys.Home:
|
||||
case Keys.PageUp:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToOption(Focus.First);
|
||||
|
||||
case Keys.End:
|
||||
case Keys.PageDown:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToOption(Focus.Last);
|
||||
|
||||
case Keys.Escape:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.closeListbox();
|
||||
await tick();
|
||||
$api.buttonRef?.focus({ preventScroll: true });
|
||||
break;
|
||||
|
||||
case Keys.Tab:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
break;
|
||||
|
||||
default:
|
||||
if (event.key.length === 1) {
|
||||
$api.search(event.key);
|
||||
searchDebounce = setTimeout(() => $api.clearSearch(), 350);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$: propsWeControl = {
|
||||
"aria-activedescendant":
|
||||
$api?.activeOptionIndex === null
|
||||
? undefined
|
||||
: $api?.options[$api.activeOptionIndex]?.id,
|
||||
"aria-labelledby": $api?.labelRef?.id ?? $api?.buttonRef?.id,
|
||||
"aria-orientation": $api?.orientation,
|
||||
id,
|
||||
role: "listbox",
|
||||
tabIndex: 0,
|
||||
};
|
||||
$: propsWeControl = {
|
||||
"aria-activedescendant":
|
||||
$api?.activeOptionIndex === null
|
||||
? undefined
|
||||
: $api?.options[$api.activeOptionIndex]?.id,
|
||||
"aria-labelledby": $api?.labelRef?.id ?? $api?.buttonRef?.id,
|
||||
"aria-orientation": $api?.orientation,
|
||||
id,
|
||||
role: "listbox",
|
||||
tabIndex: 0,
|
||||
};
|
||||
|
||||
let usesOpenClosedState = useOpenClosed();
|
||||
$: visible =
|
||||
usesOpenClosedState !== undefined
|
||||
? $usesOpenClosedState === State.Open
|
||||
: $api.listboxState === ListboxStates.Open;
|
||||
let usesOpenClosedState = useOpenClosed();
|
||||
$: visible =
|
||||
usesOpenClosedState !== undefined
|
||||
? $usesOpenClosedState === State.Open
|
||||
: $api.listboxState === ListboxStates.Open;
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<ul
|
||||
bind:this={$optionsStore}
|
||||
on:keydown={handleKeyDown}
|
||||
{...$$restProps}
|
||||
{...propsWeControl}
|
||||
>
|
||||
<slot open={$api?.listboxState === ListboxStates.Open} />
|
||||
</ul>
|
||||
<ul
|
||||
bind:this={$optionsStore}
|
||||
on:keydown={handleKeyDown}
|
||||
{...$$restProps}
|
||||
{...propsWeControl}
|
||||
>
|
||||
<slot open={$api?.listboxState === ListboxStates.Open} />
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
@@ -1,151 +1,151 @@
|
||||
<script lang="ts" context="module">
|
||||
import { Focus, calculateActiveIndex } from "./calculate-active-index";
|
||||
import { getContext, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { State } from "./open-closed";
|
||||
import { match } from "./match";
|
||||
export enum MenuStates {
|
||||
Open,
|
||||
Closed,
|
||||
}
|
||||
export type MenuItemData = { textValue: string; disabled: boolean };
|
||||
export type StateDefinition = {
|
||||
// State
|
||||
menuState: MenuStates;
|
||||
buttonStore: Writable<HTMLButtonElement | null>;
|
||||
itemsStore: Writable<HTMLDivElement | null>;
|
||||
items: { id: string; data: MenuItemData }[];
|
||||
searchQuery: string;
|
||||
activeItemIndex: number | null;
|
||||
|
||||
// State mutators
|
||||
closeMenu(): void;
|
||||
openMenu(): void;
|
||||
goToItem(focus: Focus, id?: string): void;
|
||||
search(value: string): void;
|
||||
clearSearch(): void;
|
||||
registerItem(id: string, dataRef: MenuItemData): void;
|
||||
unregisterItem(id: string): void;
|
||||
};
|
||||
|
||||
const MENU_CONTEXT_NAME = "MenuContext";
|
||||
|
||||
export function useMenuContext(
|
||||
componentName: string
|
||||
): Writable<StateDefinition | undefined> {
|
||||
let context: Writable<StateDefinition | undefined> | undefined =
|
||||
getContext(MENU_CONTEXT_NAME);
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
`<${componentName} /> is missing a parent <Menu /> component.`
|
||||
);
|
||||
}
|
||||
return context;
|
||||
import {
|
||||
Focus,
|
||||
calculateActiveIndex,
|
||||
} from "$lib/utils/calculate-active-index";
|
||||
import { getContext, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { State } from "$lib/internal/open-closed";
|
||||
import { match } from "$lib/utils/match";
|
||||
export enum MenuStates {
|
||||
Open,
|
||||
Closed,
|
||||
}
|
||||
export type MenuItemData = { textValue: string; disabled: boolean };
|
||||
export type StateDefinition = {
|
||||
// State
|
||||
menuState: MenuStates;
|
||||
buttonStore: Writable<HTMLButtonElement | null>;
|
||||
itemsStore: Writable<HTMLDivElement | null>;
|
||||
items: { id: string; data: MenuItemData }[];
|
||||
searchQuery: string;
|
||||
activeItemIndex: number | null;
|
||||
|
||||
// State mutators
|
||||
closeMenu(): void;
|
||||
openMenu(): void;
|
||||
goToItem(focus: Focus, id?: string): void;
|
||||
search(value: string): void;
|
||||
clearSearch(): void;
|
||||
registerItem(id: string, dataRef: MenuItemData): void;
|
||||
unregisterItem(id: string): void;
|
||||
};
|
||||
|
||||
const MENU_CONTEXT_NAME = "MenuContext";
|
||||
|
||||
export function useMenuContext(
|
||||
componentName: string
|
||||
): Writable<StateDefinition | undefined> {
|
||||
let context: Writable<StateDefinition | undefined> | undefined =
|
||||
getContext(MENU_CONTEXT_NAME);
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
`<${componentName} /> is missing a parent <Menu /> component.`
|
||||
);
|
||||
}
|
||||
return context;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
let menuState: StateDefinition["menuState"] = MenuStates.Closed;
|
||||
let buttonStore: StateDefinition["buttonStore"] = writable(null);
|
||||
let itemsStore: StateDefinition["itemsStore"] = writable(null);
|
||||
let items: StateDefinition["items"] = [];
|
||||
let searchQuery: StateDefinition["searchQuery"] = "";
|
||||
let activeItemIndex: StateDefinition["activeItemIndex"] = null;
|
||||
let menuState: StateDefinition["menuState"] = MenuStates.Closed;
|
||||
let buttonStore: StateDefinition["buttonStore"] = writable(null);
|
||||
let itemsStore: StateDefinition["itemsStore"] = writable(null);
|
||||
let items: StateDefinition["items"] = [];
|
||||
let searchQuery: StateDefinition["searchQuery"] = "";
|
||||
let activeItemIndex: StateDefinition["activeItemIndex"] = null;
|
||||
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext(MENU_CONTEXT_NAME, api);
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext(MENU_CONTEXT_NAME, api);
|
||||
|
||||
$: api.set({
|
||||
menuState,
|
||||
buttonStore,
|
||||
itemsStore: itemsStore,
|
||||
items,
|
||||
searchQuery,
|
||||
activeItemIndex,
|
||||
closeMenu: () => {
|
||||
menuState = MenuStates.Closed;
|
||||
activeItemIndex = null;
|
||||
},
|
||||
openMenu: () => (menuState = MenuStates.Open),
|
||||
goToItem(focus: Focus, id?: string) {
|
||||
let nextActiveItemIndex = calculateActiveIndex(
|
||||
focus === Focus.Specific
|
||||
? { focus: Focus.Specific, id: id! }
|
||||
: { focus: focus as Exclude<Focus, Focus.Specific> },
|
||||
{
|
||||
resolveItems: () => items,
|
||||
resolveActiveIndex: () => activeItemIndex,
|
||||
resolveId: (item) => item.id,
|
||||
resolveDisabled: (item) => item.data.disabled,
|
||||
}
|
||||
);
|
||||
$: api.set({
|
||||
menuState,
|
||||
buttonStore,
|
||||
itemsStore: itemsStore,
|
||||
items,
|
||||
searchQuery,
|
||||
activeItemIndex,
|
||||
closeMenu: () => {
|
||||
menuState = MenuStates.Closed;
|
||||
activeItemIndex = null;
|
||||
},
|
||||
openMenu: () => (menuState = MenuStates.Open),
|
||||
goToItem(focus: Focus, id?: string) {
|
||||
let nextActiveItemIndex = calculateActiveIndex(
|
||||
focus === Focus.Specific
|
||||
? { focus: Focus.Specific, id: id! }
|
||||
: { focus: focus as Exclude<Focus, Focus.Specific> },
|
||||
{
|
||||
resolveItems: () => items,
|
||||
resolveActiveIndex: () => activeItemIndex,
|
||||
resolveId: (item) => item.id,
|
||||
resolveDisabled: (item) => item.data.disabled,
|
||||
}
|
||||
);
|
||||
|
||||
if (searchQuery === "" && activeItemIndex === nextActiveItemIndex)
|
||||
return;
|
||||
searchQuery = "";
|
||||
activeItemIndex = nextActiveItemIndex;
|
||||
},
|
||||
search(value: string) {
|
||||
searchQuery += value.toLowerCase();
|
||||
if (searchQuery === "" && activeItemIndex === nextActiveItemIndex) return;
|
||||
searchQuery = "";
|
||||
activeItemIndex = nextActiveItemIndex;
|
||||
},
|
||||
search(value: string) {
|
||||
searchQuery += value.toLowerCase();
|
||||
|
||||
let match = items.findIndex(
|
||||
(item) =>
|
||||
item.data.textValue.startsWith(searchQuery) &&
|
||||
!item.data.disabled
|
||||
);
|
||||
let match = items.findIndex(
|
||||
(item) =>
|
||||
item.data.textValue.startsWith(searchQuery) && !item.data.disabled
|
||||
);
|
||||
|
||||
if (match === -1 || match === activeItemIndex) return;
|
||||
if (match === -1 || match === activeItemIndex) return;
|
||||
|
||||
activeItemIndex = match;
|
||||
},
|
||||
clearSearch() {
|
||||
searchQuery = "";
|
||||
},
|
||||
registerItem(id: string, data: MenuItemData) {
|
||||
items.push({ id, data });
|
||||
},
|
||||
unregisterItem(id: string) {
|
||||
let nextItems = items.slice();
|
||||
let currentActiveItem =
|
||||
activeItemIndex !== null ? nextItems[activeItemIndex] : null;
|
||||
let idx = nextItems.findIndex((a) => a.id === id);
|
||||
if (idx !== -1) nextItems.splice(idx, 1);
|
||||
items = nextItems;
|
||||
activeItemIndex = (() => {
|
||||
if (idx === activeItemIndex) return null;
|
||||
if (currentActiveItem === null) return null;
|
||||
activeItemIndex = match;
|
||||
},
|
||||
clearSearch() {
|
||||
searchQuery = "";
|
||||
},
|
||||
registerItem(id: string, data: MenuItemData) {
|
||||
items.push({ id, data });
|
||||
},
|
||||
unregisterItem(id: string) {
|
||||
let nextItems = items.slice();
|
||||
let currentActiveItem =
|
||||
activeItemIndex !== null ? nextItems[activeItemIndex] : null;
|
||||
let idx = nextItems.findIndex((a) => a.id === id);
|
||||
if (idx !== -1) nextItems.splice(idx, 1);
|
||||
items = nextItems;
|
||||
activeItemIndex = (() => {
|
||||
if (idx === activeItemIndex) return null;
|
||||
if (currentActiveItem === null) return null;
|
||||
|
||||
// If we removed the item before the actual active index, then it would be out of sync. To
|
||||
// fix this, we will find the correct (new) index position.
|
||||
return nextItems.indexOf(currentActiveItem);
|
||||
})();
|
||||
},
|
||||
});
|
||||
// If we removed the item before the actual active index, then it would be out of sync. To
|
||||
// fix this, we will find the correct (new) index position.
|
||||
return nextItems.indexOf(currentActiveItem);
|
||||
})();
|
||||
},
|
||||
});
|
||||
|
||||
function handleWindowMousedown(event: MouseEvent): void {
|
||||
let target = event.target as HTMLElement;
|
||||
let active = document.activeElement;
|
||||
function handleWindowMousedown(event: MouseEvent): void {
|
||||
let target = event.target as HTMLElement;
|
||||
let active = document.activeElement;
|
||||
|
||||
if (menuState !== MenuStates.Open) return;
|
||||
if ($buttonStore?.contains(target)) return;
|
||||
if (menuState !== MenuStates.Open) return;
|
||||
if ($buttonStore?.contains(target)) return;
|
||||
|
||||
if (!$itemsStore?.contains(target)) $api.closeMenu();
|
||||
if (active !== document.body && active?.contains(target)) return; // Keep focus on newly clicked/focused element
|
||||
if (!event.defaultPrevented)
|
||||
$buttonStore?.focus({ preventScroll: true });
|
||||
}
|
||||
if (!$itemsStore?.contains(target)) $api.closeMenu();
|
||||
if (active !== document.body && active?.contains(target)) return; // Keep focus on newly clicked/focused element
|
||||
if (!event.defaultPrevented) $buttonStore?.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
let openClosedState: Writable<State> | undefined = writable();
|
||||
setContext("OpenClosed", openClosedState);
|
||||
let openClosedState: Writable<State> | undefined = writable();
|
||||
setContext("OpenClosed", openClosedState);
|
||||
|
||||
$: $openClosedState = match(menuState, {
|
||||
[MenuStates.Open]: State.Open,
|
||||
[MenuStates.Closed]: State.Closed,
|
||||
});
|
||||
$: $openClosedState = match(menuState, {
|
||||
[MenuStates.Open]: State.Open,
|
||||
[MenuStates.Closed]: State.Closed,
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window on:mousedown={handleWindowMousedown} />
|
||||
<div {...$$restProps}>
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@@ -1,83 +1,81 @@
|
||||
<script lang="ts">
|
||||
import { useMenuContext, MenuStates } from "./Menu.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { Keys } from "./keyboard";
|
||||
import { Focus } from "./calculate-active-index";
|
||||
import { tick } from "svelte";
|
||||
export let disabled = false;
|
||||
const api = useMenuContext("MenuButton");
|
||||
const id = `headlessui-menu-button-${useId()}`;
|
||||
import { useMenuContext, MenuStates } from "./Menu.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
import { Focus } from "$lib/utils/calculate-active-index";
|
||||
import { tick } from "svelte";
|
||||
export let disabled = false;
|
||||
const api = useMenuContext("MenuButton");
|
||||
const id = `headlessui-menu-button-${useId()}`;
|
||||
|
||||
$: buttonStore = $api?.buttonStore;
|
||||
$: itemsStore = $api?.itemsStore;
|
||||
async function handleKeyDown(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
// Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
|
||||
$: buttonStore = $api?.buttonStore;
|
||||
$: itemsStore = $api?.itemsStore;
|
||||
async function handleKeyDown(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
// Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
|
||||
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
case Keys.ArrowDown:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.openMenu();
|
||||
await tick();
|
||||
$itemsStore?.focus({ preventScroll: true });
|
||||
$api.goToItem(Focus.First);
|
||||
break;
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
case Keys.ArrowDown:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.openMenu();
|
||||
await tick();
|
||||
$itemsStore?.focus({ preventScroll: true });
|
||||
$api.goToItem(Focus.First);
|
||||
break;
|
||||
|
||||
case Keys.ArrowUp:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.openMenu();
|
||||
await tick();
|
||||
$itemsStore?.focus({ preventScroll: true });
|
||||
$api.goToItem(Focus.Last);
|
||||
break;
|
||||
}
|
||||
case Keys.ArrowUp:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.openMenu();
|
||||
await tick();
|
||||
$itemsStore?.focus({ preventScroll: true });
|
||||
$api.goToItem(Focus.Last);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
// Required for firefox, event.preventDefault() in handleKeyDown for
|
||||
// the Space key doesn't cancel the handleKeyUp, which in turn
|
||||
// triggers a *click*.
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
// Required for firefox, event.preventDefault() in handleKeyDown for
|
||||
// the Space key doesn't cancel the handleKeyUp, which in turn
|
||||
// triggers a *click*.
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleClick(event: MouseEvent) {
|
||||
if (disabled) return;
|
||||
if ($api.menuState === MenuStates.Open) {
|
||||
$api.closeMenu();
|
||||
await tick();
|
||||
$buttonStore?.focus({ preventScroll: true });
|
||||
} else {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.openMenu();
|
||||
await tick();
|
||||
$itemsStore?.focus({ preventScroll: true });
|
||||
}
|
||||
async function handleClick(event: MouseEvent) {
|
||||
if (disabled) return;
|
||||
if ($api.menuState === MenuStates.Open) {
|
||||
$api.closeMenu();
|
||||
await tick();
|
||||
$buttonStore?.focus({ preventScroll: true });
|
||||
} else {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.openMenu();
|
||||
await tick();
|
||||
$itemsStore?.focus({ preventScroll: true });
|
||||
}
|
||||
}
|
||||
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
"aria-haspopup": true,
|
||||
"aria-controls": $itemsStore?.id,
|
||||
"aria-expanded": disabled
|
||||
? undefined
|
||||
: $api.menuState === MenuStates.Open,
|
||||
};
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
"aria-haspopup": true,
|
||||
"aria-controls": $itemsStore?.id,
|
||||
"aria-expanded": disabled ? undefined : $api.menuState === MenuStates.Open,
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={$buttonStore}
|
||||
on:click={handleClick}
|
||||
on:keydown={handleKeyDown}
|
||||
on:keyup={handleKeyUp}
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={$buttonStore}
|
||||
on:click={handleClick}
|
||||
on:keydown={handleKeyDown}
|
||||
on:keyup={handleKeyUp}
|
||||
>
|
||||
<slot open={$api?.menuState === MenuStates.Open} />
|
||||
<slot open={$api?.menuState === MenuStates.Open} />
|
||||
</button>
|
||||
|
||||
@@ -1,79 +1,79 @@
|
||||
<script lang="ts">
|
||||
import { useMenuContext, MenuStates, MenuItemData } from "./Menu.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { Focus } from "./calculate-active-index";
|
||||
import { afterUpdate, onDestroy, onMount, tick } from "svelte";
|
||||
export let disabled = false;
|
||||
const api = useMenuContext("MenuItem");
|
||||
const id = `headlessui-menu-item-${useId()}`;
|
||||
import { useMenuContext, MenuStates, MenuItemData } from "./Menu.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { Focus } from "$lib/utils/calculate-active-index";
|
||||
import { afterUpdate, onDestroy, onMount, tick } from "svelte";
|
||||
export let disabled = false;
|
||||
const api = useMenuContext("MenuItem");
|
||||
const id = `headlessui-menu-item-${useId()}`;
|
||||
|
||||
$: active =
|
||||
$api?.activeItemIndex !== null
|
||||
? $api?.items[$api?.activeItemIndex].id === id
|
||||
: false;
|
||||
$: active =
|
||||
$api?.activeItemIndex !== null
|
||||
? $api?.items[$api?.activeItemIndex].id === id
|
||||
: false;
|
||||
|
||||
$: buttonStore = $api?.buttonStore;
|
||||
$: buttonStore = $api?.buttonStore;
|
||||
|
||||
let elementRef: HTMLDivElement | undefined;
|
||||
$: textValue = elementRef?.textContent?.toLowerCase().trim();
|
||||
$: data = { disabled, textValue } as MenuItemData;
|
||||
let elementRef: HTMLDivElement | undefined;
|
||||
$: textValue = elementRef?.textContent?.toLowerCase().trim();
|
||||
$: data = { disabled, textValue } as MenuItemData;
|
||||
|
||||
onMount(async () => {
|
||||
await tick();
|
||||
$api?.registerItem(id, data);
|
||||
});
|
||||
onMount(async () => {
|
||||
await tick();
|
||||
$api?.registerItem(id, data);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
$api.unregisterItem(id);
|
||||
});
|
||||
onDestroy(() => {
|
||||
$api.unregisterItem(id);
|
||||
});
|
||||
|
||||
afterUpdate(async () => {
|
||||
if ($api.menuState !== MenuStates.Open) return;
|
||||
if (!active) return;
|
||||
await tick();
|
||||
elementRef?.scrollIntoView?.({ block: "nearest" });
|
||||
});
|
||||
afterUpdate(async () => {
|
||||
if ($api.menuState !== MenuStates.Open) return;
|
||||
if (!active) return;
|
||||
await tick();
|
||||
elementRef?.scrollIntoView?.({ block: "nearest" });
|
||||
});
|
||||
|
||||
async function handleClick(event: MouseEvent) {
|
||||
if (disabled) return event.preventDefault();
|
||||
$api.closeMenu();
|
||||
$buttonStore?.focus({ preventScroll: true });
|
||||
}
|
||||
async function handleClick(event: MouseEvent) {
|
||||
if (disabled) return event.preventDefault();
|
||||
$api.closeMenu();
|
||||
$buttonStore?.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
function handleFocus() {
|
||||
if (disabled) return $api.goToItem(Focus.Nothing);
|
||||
$api.goToItem(Focus.Specific, id);
|
||||
}
|
||||
function handleFocus() {
|
||||
if (disabled) return $api.goToItem(Focus.Nothing);
|
||||
$api.goToItem(Focus.Specific, id);
|
||||
}
|
||||
|
||||
function handleMove() {
|
||||
if (disabled) return;
|
||||
if (active) return;
|
||||
$api.goToItem(Focus.Specific, id);
|
||||
}
|
||||
function handleMove() {
|
||||
if (disabled) return;
|
||||
if (active) return;
|
||||
$api.goToItem(Focus.Specific, id);
|
||||
}
|
||||
|
||||
function handleLeave() {
|
||||
if (disabled) return;
|
||||
if (!active) return;
|
||||
$api.goToItem(Focus.Nothing);
|
||||
}
|
||||
function handleLeave() {
|
||||
if (disabled) return;
|
||||
if (!active) return;
|
||||
$api.goToItem(Focus.Nothing);
|
||||
}
|
||||
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "menuitem",
|
||||
tabIndex: disabled === true ? undefined : -1,
|
||||
"aria-disabled": disabled === true ? true : undefined,
|
||||
};
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "menuitem",
|
||||
tabIndex: disabled === true ? undefined : -1,
|
||||
"aria-disabled": disabled === true ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={elementRef}
|
||||
on:click={handleClick}
|
||||
on:focus={handleFocus}
|
||||
on:pointermove={handleMove}
|
||||
on:mousemove={handleMove}
|
||||
on:pointerleave={handleLeave}
|
||||
on:mouseleave={handleLeave}
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={elementRef}
|
||||
on:click={handleClick}
|
||||
on:focus={handleFocus}
|
||||
on:pointermove={handleMove}
|
||||
on:mousemove={handleMove}
|
||||
on:pointerleave={handleLeave}
|
||||
on:mouseleave={handleLeave}
|
||||
>
|
||||
<slot {active} {disabled} />
|
||||
<slot {active} {disabled} />
|
||||
</div>
|
||||
|
||||
@@ -1,139 +1,139 @@
|
||||
<script lang="ts">
|
||||
import { useMenuContext, MenuStates } from "./Menu.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { Keys } from "./keyboard";
|
||||
import { Focus } from "./calculate-active-index";
|
||||
import { treeWalker } from "./tree-walker";
|
||||
import { State } from "./open-closed";
|
||||
import { getContext, tick } from "svelte";
|
||||
import { Writable } from "svelte/store";
|
||||
const api = useMenuContext("MenuButton");
|
||||
const id = `headlessui-menu-items-${useId()}`;
|
||||
let searchDebounce: ReturnType<typeof setTimeout> | null = null;
|
||||
import { useMenuContext, MenuStates } from "./Menu.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
import { Focus } from "$lib/utils/calculate-active-index";
|
||||
import { treeWalker } from "$lib/utils/tree-walker";
|
||||
import { State } from "$lib/internal/open-closed";
|
||||
import { getContext, tick } from "svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
const api = useMenuContext("MenuButton");
|
||||
const id = `headlessui-menu-items-${useId()}`;
|
||||
let searchDebounce: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
$: buttonStore = $api?.buttonStore;
|
||||
$: itemsStore = $api?.itemsStore;
|
||||
$: buttonStore = $api?.buttonStore;
|
||||
$: itemsStore = $api?.itemsStore;
|
||||
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
|
||||
$: visible =
|
||||
openClosedState !== undefined
|
||||
? $openClosedState === State.Open
|
||||
: $api.menuState === MenuStates.Open;
|
||||
$: visible =
|
||||
openClosedState !== undefined
|
||||
? $openClosedState === State.Open
|
||||
: $api.menuState === MenuStates.Open;
|
||||
|
||||
$: treeWalker({
|
||||
container: $itemsStore,
|
||||
enabled: $api?.menuState === MenuStates.Open,
|
||||
accept(node) {
|
||||
if (node.getAttribute("role") === "menuitem")
|
||||
return NodeFilter.FILTER_REJECT;
|
||||
if (node.hasAttribute("role")) return NodeFilter.FILTER_SKIP;
|
||||
return NodeFilter.FILTER_ACCEPT;
|
||||
},
|
||||
walk(node) {
|
||||
node.setAttribute("role", "none");
|
||||
},
|
||||
});
|
||||
$: treeWalker({
|
||||
container: $itemsStore,
|
||||
enabled: $api?.menuState === MenuStates.Open,
|
||||
accept(node) {
|
||||
if (node.getAttribute("role") === "menuitem")
|
||||
return NodeFilter.FILTER_REJECT;
|
||||
if (node.hasAttribute("role")) return NodeFilter.FILTER_SKIP;
|
||||
return NodeFilter.FILTER_ACCEPT;
|
||||
},
|
||||
walk(node) {
|
||||
node.setAttribute("role", "none");
|
||||
},
|
||||
});
|
||||
|
||||
async function handleKeyDown(event: KeyboardEvent) {
|
||||
if (searchDebounce) clearTimeout(searchDebounce);
|
||||
async function handleKeyDown(event: KeyboardEvent) {
|
||||
if (searchDebounce) clearTimeout(searchDebounce);
|
||||
|
||||
switch (event.key) {
|
||||
// Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
|
||||
switch (event.key) {
|
||||
// Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-12
|
||||
|
||||
case Keys.Space:
|
||||
if ($api.searchQuery !== "") {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.search(event.key);
|
||||
}
|
||||
// When in type ahead mode, fallthrough
|
||||
case Keys.Enter:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if ($api.activeItemIndex !== null) {
|
||||
let { id } = $api.items[$api.activeItemIndex];
|
||||
document.getElementById(id)?.click();
|
||||
}
|
||||
$api.closeMenu();
|
||||
await tick();
|
||||
$buttonStore?.focus({ preventScroll: true });
|
||||
break;
|
||||
|
||||
case Keys.ArrowDown:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToItem(Focus.Next);
|
||||
|
||||
case Keys.ArrowUp:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToItem(Focus.Previous);
|
||||
|
||||
case Keys.Home:
|
||||
case Keys.PageUp:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToItem(Focus.First);
|
||||
|
||||
case Keys.End:
|
||||
case Keys.PageDown:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToItem(Focus.Last);
|
||||
|
||||
case Keys.Escape:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.closeMenu();
|
||||
await tick();
|
||||
$buttonStore?.focus({ preventScroll: true });
|
||||
break;
|
||||
|
||||
case Keys.Tab:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
break;
|
||||
|
||||
default:
|
||||
if (event.key.length === 1) {
|
||||
$api.search(event.key);
|
||||
searchDebounce = setTimeout(() => $api.clearSearch(), 350);
|
||||
}
|
||||
break;
|
||||
case Keys.Space:
|
||||
if ($api.searchQuery !== "") {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.search(event.key);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
// Required for firefox, event.preventDefault() in handleKeyDown for
|
||||
// the Space key doesn't cancel the handleKeyUp, which in turn
|
||||
// triggers a *click*.
|
||||
event.preventDefault();
|
||||
break;
|
||||
// When in type ahead mode, fallthrough
|
||||
case Keys.Enter:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if ($api.activeItemIndex !== null) {
|
||||
let { id } = $api.items[$api.activeItemIndex];
|
||||
document.getElementById(id)?.click();
|
||||
}
|
||||
}
|
||||
$api.closeMenu();
|
||||
await tick();
|
||||
$buttonStore?.focus({ preventScroll: true });
|
||||
break;
|
||||
|
||||
$: propsWeControl = {
|
||||
"aria-activedescendant":
|
||||
$api.activeItemIndex === null
|
||||
? undefined
|
||||
: $api.items[$api.activeItemIndex]?.id,
|
||||
"aria-labelledby": $buttonStore?.id,
|
||||
id,
|
||||
role: "menu",
|
||||
tabIndex: 0,
|
||||
};
|
||||
case Keys.ArrowDown:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToItem(Focus.Next);
|
||||
|
||||
case Keys.ArrowUp:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToItem(Focus.Previous);
|
||||
|
||||
case Keys.Home:
|
||||
case Keys.PageUp:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToItem(Focus.First);
|
||||
|
||||
case Keys.End:
|
||||
case Keys.PageDown:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return $api.goToItem(Focus.Last);
|
||||
|
||||
case Keys.Escape:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.closeMenu();
|
||||
await tick();
|
||||
$buttonStore?.focus({ preventScroll: true });
|
||||
break;
|
||||
|
||||
case Keys.Tab:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
break;
|
||||
|
||||
default:
|
||||
if (event.key.length === 1) {
|
||||
$api.search(event.key);
|
||||
searchDebounce = setTimeout(() => $api.clearSearch(), 350);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
// Required for firefox, event.preventDefault() in handleKeyDown for
|
||||
// the Space key doesn't cancel the handleKeyUp, which in turn
|
||||
// triggers a *click*.
|
||||
event.preventDefault();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$: propsWeControl = {
|
||||
"aria-activedescendant":
|
||||
$api.activeItemIndex === null
|
||||
? undefined
|
||||
: $api.items[$api.activeItemIndex]?.id,
|
||||
"aria-labelledby": $buttonStore?.id,
|
||||
id,
|
||||
role: "menu",
|
||||
tabIndex: 0,
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={$itemsStore}
|
||||
on:keydown={handleKeyDown}
|
||||
on:keyup={handleKeyUp}
|
||||
>
|
||||
<slot open={$api.menuState === MenuStates.Open} />
|
||||
</div>
|
||||
<div
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={$itemsStore}
|
||||
on:keydown={handleKeyDown}
|
||||
on:keyup={handleKeyUp}
|
||||
>
|
||||
<slot open={$api.menuState === MenuStates.Open} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,145 +1,147 @@
|
||||
<script lang="ts" context="module">
|
||||
export enum PopoverStates {
|
||||
Open,
|
||||
Closed,
|
||||
}
|
||||
export interface StateDefinition {
|
||||
// State
|
||||
popoverState: PopoverStates;
|
||||
button: HTMLElement | null;
|
||||
buttonId: string;
|
||||
panel: HTMLElement | null;
|
||||
panelId: string;
|
||||
export enum PopoverStates {
|
||||
Open,
|
||||
Closed,
|
||||
}
|
||||
export interface StateDefinition {
|
||||
// State
|
||||
popoverState: PopoverStates;
|
||||
button: HTMLElement | null;
|
||||
buttonId: string;
|
||||
panel: HTMLElement | null;
|
||||
panelId: string;
|
||||
|
||||
// State mutators
|
||||
togglePopover(): void;
|
||||
closePopover(): void;
|
||||
// State mutators
|
||||
togglePopover(): void;
|
||||
closePopover(): void;
|
||||
|
||||
// Exposed functions
|
||||
close(focusableElement: HTMLElement | null): void;
|
||||
}
|
||||
// Exposed functions
|
||||
close(focusableElement: HTMLElement | null): void;
|
||||
}
|
||||
|
||||
export interface PopoverRegisterBag {
|
||||
buttonId: string;
|
||||
panelId: string;
|
||||
close(): void;
|
||||
}
|
||||
export interface PopoverRegisterBag {
|
||||
buttonId: string;
|
||||
panelId: string;
|
||||
close(): void;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { match } from "./match";
|
||||
import { useId } from "./use-id";
|
||||
import { isFocusableElement, FocusableMode } from "./focus-management";
|
||||
import { State } from "./open-closed";
|
||||
import type { PopoverGroupContext } from "./PopoverGroup.svelte";
|
||||
import { getContext, setContext, onMount } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
const buttonId = `headlessui-popover-button-${useId()}`;
|
||||
const panelId = `headlessui-popover-panel-${useId()}`;
|
||||
import { match } from "$lib/utils/match";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import {
|
||||
isFocusableElement,
|
||||
FocusableMode,
|
||||
} from "$lib/utils/focus-management";
|
||||
import { State } from "$lib/internal/open-closed";
|
||||
import type { PopoverGroupContext } from "./PopoverGroup.svelte";
|
||||
import { getContext, setContext, onMount } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
const buttonId = `headlessui-popover-button-${useId()}`;
|
||||
const panelId = `headlessui-popover-panel-${useId()}`;
|
||||
|
||||
let popoverState: PopoverStates = PopoverStates.Closed;
|
||||
let popoverState: PopoverStates = PopoverStates.Closed;
|
||||
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext("PopoverApi", api);
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext("PopoverApi", api);
|
||||
|
||||
let openClosedState: Writable<State> | undefined = writable();
|
||||
setContext("OpenClosed", openClosedState);
|
||||
let openClosedState: Writable<State> | undefined = writable();
|
||||
setContext("OpenClosed", openClosedState);
|
||||
|
||||
$: $openClosedState = match(popoverState, {
|
||||
[PopoverStates.Open]: State.Open,
|
||||
[PopoverStates.Closed]: State.Closed,
|
||||
});
|
||||
$: $openClosedState = match(popoverState, {
|
||||
[PopoverStates.Open]: State.Open,
|
||||
[PopoverStates.Closed]: State.Closed,
|
||||
});
|
||||
|
||||
let panelStore = writable(null);
|
||||
setContext("PopoverPanelRef", panelStore);
|
||||
$: panel = $panelStore;
|
||||
let panelStore = writable(null);
|
||||
setContext("PopoverPanelRef", panelStore);
|
||||
$: panel = $panelStore;
|
||||
|
||||
let buttonStore = writable(null);
|
||||
setContext("PopoverButtonRef", buttonStore);
|
||||
$: button = $buttonStore;
|
||||
let buttonStore = writable(null);
|
||||
setContext("PopoverButtonRef", buttonStore);
|
||||
$: button = $buttonStore;
|
||||
|
||||
$: api.set({
|
||||
popoverState,
|
||||
buttonId,
|
||||
panelId,
|
||||
panel,
|
||||
button,
|
||||
togglePopover() {
|
||||
popoverState = match(popoverState, {
|
||||
[PopoverStates.Open]: PopoverStates.Closed,
|
||||
[PopoverStates.Closed]: PopoverStates.Open,
|
||||
});
|
||||
},
|
||||
closePopover() {
|
||||
if (popoverState === PopoverStates.Closed) return;
|
||||
popoverState = PopoverStates.Closed;
|
||||
},
|
||||
close(focusableElement: HTMLElement | null) {
|
||||
$api.closePopover();
|
||||
$: api.set({
|
||||
popoverState,
|
||||
buttonId,
|
||||
panelId,
|
||||
panel,
|
||||
button,
|
||||
togglePopover() {
|
||||
popoverState = match(popoverState, {
|
||||
[PopoverStates.Open]: PopoverStates.Closed,
|
||||
[PopoverStates.Closed]: PopoverStates.Open,
|
||||
});
|
||||
},
|
||||
closePopover() {
|
||||
if (popoverState === PopoverStates.Closed) return;
|
||||
popoverState = PopoverStates.Closed;
|
||||
},
|
||||
close(focusableElement: HTMLElement | null) {
|
||||
$api.closePopover();
|
||||
|
||||
let restoreElement = (() => {
|
||||
if (!focusableElement) return $api.button;
|
||||
if (focusableElement instanceof HTMLElement)
|
||||
return focusableElement;
|
||||
let restoreElement = (() => {
|
||||
if (!focusableElement) return $api.button;
|
||||
if (focusableElement instanceof HTMLElement) return focusableElement;
|
||||
|
||||
return $api.button;
|
||||
})();
|
||||
return $api.button;
|
||||
})();
|
||||
|
||||
restoreElement?.focus();
|
||||
},
|
||||
});
|
||||
restoreElement?.focus();
|
||||
},
|
||||
});
|
||||
|
||||
const registerBag = {
|
||||
buttonId,
|
||||
panelId,
|
||||
close() {
|
||||
$api.closePopover();
|
||||
},
|
||||
};
|
||||
const registerBag = {
|
||||
buttonId,
|
||||
panelId,
|
||||
close() {
|
||||
$api.closePopover();
|
||||
},
|
||||
};
|
||||
|
||||
const groupContext: PopoverGroupContext | undefined =
|
||||
getContext("PopoverGroup");
|
||||
const registerPopover = groupContext?.registerPopover;
|
||||
const groupContext: PopoverGroupContext | undefined =
|
||||
getContext("PopoverGroup");
|
||||
const registerPopover = groupContext?.registerPopover;
|
||||
|
||||
function isFocusWithinPopoverGroup() {
|
||||
return (
|
||||
groupContext?.isFocusWithinPopoverGroup() ??
|
||||
(button?.contains(document.activeElement) ||
|
||||
panel?.contains(document.activeElement))
|
||||
);
|
||||
}
|
||||
|
||||
onMount(() => registerPopover?.(registerBag));
|
||||
|
||||
// Handle focus out
|
||||
function handleFocus() {
|
||||
if (popoverState !== PopoverStates.Open) return;
|
||||
if (isFocusWithinPopoverGroup()) return;
|
||||
if (!button) return;
|
||||
if (!panel) return;
|
||||
|
||||
$api.closePopover();
|
||||
}
|
||||
|
||||
// Handle outside click
|
||||
function handleMousedown(event: MouseEvent) {
|
||||
let target = event.target as HTMLElement;
|
||||
|
||||
if (popoverState !== PopoverStates.Open) return;
|
||||
|
||||
if (button?.contains(target)) return;
|
||||
if (panel?.contains(target)) return;
|
||||
|
||||
$api.closePopover();
|
||||
|
||||
if (!isFocusableElement(target, FocusableMode.Loose)) {
|
||||
event.preventDefault();
|
||||
button?.focus();
|
||||
}
|
||||
function isFocusWithinPopoverGroup() {
|
||||
return (
|
||||
groupContext?.isFocusWithinPopoverGroup() ??
|
||||
(button?.contains(document.activeElement) ||
|
||||
panel?.contains(document.activeElement))
|
||||
);
|
||||
}
|
||||
|
||||
onMount(() => registerPopover?.(registerBag));
|
||||
|
||||
// Handle focus out
|
||||
function handleFocus() {
|
||||
if (popoverState !== PopoverStates.Open) return;
|
||||
if (isFocusWithinPopoverGroup()) return;
|
||||
if (!button) return;
|
||||
if (!panel) return;
|
||||
|
||||
$api.closePopover();
|
||||
}
|
||||
|
||||
// Handle outside click
|
||||
function handleMousedown(event: MouseEvent) {
|
||||
let target = event.target as HTMLElement;
|
||||
|
||||
if (popoverState !== PopoverStates.Open) return;
|
||||
|
||||
if (button?.contains(target)) return;
|
||||
if (panel?.contains(target)) return;
|
||||
|
||||
$api.closePopover();
|
||||
|
||||
if (!isFocusableElement(target, FocusableMode.Loose)) {
|
||||
event.preventDefault();
|
||||
button?.focus();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:focus|capture={handleFocus} on:mousedown={handleMousedown} />
|
||||
<div {...$$restProps}>
|
||||
<slot open={popoverState === PopoverStates.Open} close={$api.close} />
|
||||
<slot open={popoverState === PopoverStates.Open} close={$api.close} />
|
||||
</div>
|
||||
|
||||
@@ -1,176 +1,177 @@
|
||||
<script lang="ts">
|
||||
import { Keys } from "./keyboard";
|
||||
import { getFocusableElements, Focus, focusIn } from "./focus-management";
|
||||
import { getContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { PopoverStates, StateDefinition } from "./Popover.svelte";
|
||||
import type { PopoverGroupContext } from "./PopoverGroup.svelte";
|
||||
import type { PopoverPanelContext } from "./PopoverPanel.svelte";
|
||||
let buttonStore: Writable<HTMLButtonElement> =
|
||||
getContext("PopoverButtonRef");
|
||||
export let disabled: Boolean = false;
|
||||
let api: Writable<StateDefinition> | undefined = getContext("PopoverApi");
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
import {
|
||||
getFocusableElements,
|
||||
Focus,
|
||||
focusIn,
|
||||
} from "$lib/utils/focus-management";
|
||||
import { getContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { PopoverStates, StateDefinition } from "./Popover.svelte";
|
||||
import type { PopoverGroupContext } from "./PopoverGroup.svelte";
|
||||
import type { PopoverPanelContext } from "./PopoverPanel.svelte";
|
||||
let buttonStore: Writable<HTMLButtonElement> = getContext("PopoverButtonRef");
|
||||
export let disabled: Boolean = false;
|
||||
let api: Writable<StateDefinition> | undefined = getContext("PopoverApi");
|
||||
|
||||
const groupContext: PopoverGroupContext | undefined =
|
||||
getContext("PopoverGroup");
|
||||
const closeOthers = groupContext?.closeOthers;
|
||||
const groupContext: PopoverGroupContext | undefined =
|
||||
getContext("PopoverGroup");
|
||||
const closeOthers = groupContext?.closeOthers;
|
||||
|
||||
let panelContext: PopoverPanelContext | undefined =
|
||||
getContext("PopoverPanel");
|
||||
let isWithinPanel =
|
||||
panelContext === null ? false : panelContext === $api.panelId;
|
||||
let panelContext: PopoverPanelContext | undefined =
|
||||
getContext("PopoverPanel");
|
||||
let isWithinPanel =
|
||||
panelContext === null ? false : panelContext === $api.panelId;
|
||||
if (isWithinPanel) {
|
||||
buttonStore = writable();
|
||||
}
|
||||
|
||||
// TODO: Revisit when handling Tab/Shift+Tab when using Portal's
|
||||
let activeElementRef: Element | null = null;
|
||||
let previousActiveElementRef: Element | null =
|
||||
typeof window === "undefined" ? null : document.activeElement;
|
||||
|
||||
function handleFocus() {
|
||||
previousActiveElementRef = activeElementRef;
|
||||
activeElementRef = document.activeElement;
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (isWithinPanel) {
|
||||
buttonStore = writable();
|
||||
if ($api.popoverState === PopoverStates.Closed) return;
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
event.preventDefault(); // Prevent triggering a *click* event
|
||||
event.stopPropagation();
|
||||
$api.closePopover();
|
||||
$api.button?.focus(); // Re-focus the original opening Button
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
event.preventDefault(); // Prevent triggering a *click* event
|
||||
event.stopPropagation();
|
||||
if ($api.popoverState === PopoverStates.Closed)
|
||||
closeOthers?.($api.buttonId);
|
||||
$api.togglePopover();
|
||||
break;
|
||||
|
||||
case Keys.Escape:
|
||||
if ($api.popoverState !== PopoverStates.Open)
|
||||
return closeOthers?.($api.buttonId);
|
||||
if (!$api.button) return;
|
||||
if (!$api.button?.contains(document.activeElement)) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.closePopover();
|
||||
break;
|
||||
|
||||
case Keys.Tab:
|
||||
if ($api.popoverState !== PopoverStates.Open) return;
|
||||
if (!$api.panel) return;
|
||||
if (!$api.button) return;
|
||||
|
||||
// TODO: Revisit when handling Tab/Shift+Tab when using Portal's
|
||||
if (event.shiftKey) {
|
||||
// Check if the last focused element exists, and check that it is not inside button or panel itself
|
||||
if (!previousActiveElementRef) return;
|
||||
if ($api.button?.contains(previousActiveElementRef)) return;
|
||||
if ($api.panel?.contains(previousActiveElementRef)) return;
|
||||
|
||||
// Check if the last focused element is *after* the button in the DOM
|
||||
let focusableElements = getFocusableElements();
|
||||
let previousIdx = focusableElements.indexOf(
|
||||
previousActiveElementRef as HTMLElement
|
||||
);
|
||||
let buttonIdx = focusableElements.indexOf($api.button!);
|
||||
if (buttonIdx > previousIdx) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
focusIn($api.panel!, Focus.Last);
|
||||
} else {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
focusIn($api.panel!, Focus.First);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
if (isWithinPanel) return;
|
||||
if (event.key === Keys.Space) {
|
||||
// Required for firefox, event.preventDefault() in handleKeyDown for
|
||||
// the Space key doesn't cancel the handleKeyUp, which in turn
|
||||
// triggers a *click*.
|
||||
event.preventDefault();
|
||||
}
|
||||
if ($api.popoverState !== PopoverStates.Open) return;
|
||||
if (!$api.panel) return;
|
||||
if (!$api.button) return;
|
||||
|
||||
// TODO: Revisit when handling Tab/Shift+Tab when using Portal's
|
||||
let activeElementRef: Element | null = null;
|
||||
let previousActiveElementRef: Element | null =
|
||||
typeof window === "undefined" ? null : document.activeElement;
|
||||
switch (event.key) {
|
||||
case Keys.Tab:
|
||||
// Check if the last focused element exists, and check that it is not inside button or panel itself
|
||||
if (!previousActiveElementRef) return;
|
||||
if ($api.button?.contains(previousActiveElementRef)) return;
|
||||
if ($api.panel?.contains(previousActiveElementRef)) return;
|
||||
|
||||
function handleFocus() {
|
||||
previousActiveElementRef = activeElementRef;
|
||||
activeElementRef = document.activeElement;
|
||||
// Check if the last focused element is *after* the button in the DOM
|
||||
let focusableElements = getFocusableElements();
|
||||
let previousIdx = focusableElements.indexOf(
|
||||
previousActiveElementRef as HTMLElement
|
||||
);
|
||||
let buttonIdx = focusableElements.indexOf($api.button!);
|
||||
if (buttonIdx > previousIdx) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
focusIn($api.panel!, Focus.Last);
|
||||
break;
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (isWithinPanel) {
|
||||
if ($api.popoverState === PopoverStates.Closed) return;
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
event.preventDefault(); // Prevent triggering a *click* event
|
||||
event.stopPropagation();
|
||||
$api.closePopover();
|
||||
$api.button?.focus(); // Re-focus the original opening Button
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
switch (event.key) {
|
||||
case Keys.Space:
|
||||
case Keys.Enter:
|
||||
event.preventDefault(); // Prevent triggering a *click* event
|
||||
event.stopPropagation();
|
||||
if ($api.popoverState === PopoverStates.Closed)
|
||||
closeOthers?.($api.buttonId);
|
||||
$api.togglePopover();
|
||||
break;
|
||||
|
||||
case Keys.Escape:
|
||||
if ($api.popoverState !== PopoverStates.Open)
|
||||
return closeOthers?.($api.buttonId);
|
||||
if (!$api.button) return;
|
||||
if (!$api.button?.contains(document.activeElement)) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.closePopover();
|
||||
break;
|
||||
|
||||
case Keys.Tab:
|
||||
if ($api.popoverState !== PopoverStates.Open) return;
|
||||
if (!$api.panel) return;
|
||||
if (!$api.button) return;
|
||||
|
||||
// TODO: Revisit when handling Tab/Shift+Tab when using Portal's
|
||||
if (event.shiftKey) {
|
||||
// Check if the last focused element exists, and check that it is not inside button or panel itself
|
||||
if (!previousActiveElementRef) return;
|
||||
if ($api.button?.contains(previousActiveElementRef))
|
||||
return;
|
||||
if ($api.panel?.contains(previousActiveElementRef))
|
||||
return;
|
||||
|
||||
// Check if the last focused element is *after* the button in the DOM
|
||||
let focusableElements = getFocusableElements();
|
||||
let previousIdx = focusableElements.indexOf(
|
||||
previousActiveElementRef as HTMLElement
|
||||
);
|
||||
let buttonIdx = focusableElements.indexOf($api.button!);
|
||||
if (buttonIdx > previousIdx) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
focusIn($api.panel!, Focus.Last);
|
||||
} else {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
focusIn($api.panel!, Focus.First);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
function handleClick() {
|
||||
if (disabled) return;
|
||||
if (isWithinPanel) {
|
||||
$api.closePopover();
|
||||
$api.button?.focus(); // Re-focus the original opening Button
|
||||
} else {
|
||||
if ($api.popoverState === PopoverStates.Closed)
|
||||
closeOthers?.($api.buttonId);
|
||||
$api.button?.focus();
|
||||
$api.togglePopover();
|
||||
}
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
if (isWithinPanel) return;
|
||||
if (event.key === Keys.Space) {
|
||||
// Required for firefox, event.preventDefault() in handleKeyDown for
|
||||
// the Space key doesn't cancel the handleKeyUp, which in turn
|
||||
// triggers a *click*.
|
||||
event.preventDefault();
|
||||
}
|
||||
if ($api.popoverState !== PopoverStates.Open) return;
|
||||
if (!$api.panel) return;
|
||||
if (!$api.button) return;
|
||||
}
|
||||
|
||||
// TODO: Revisit when handling Tab/Shift+Tab when using Portal's
|
||||
switch (event.key) {
|
||||
case Keys.Tab:
|
||||
// Check if the last focused element exists, and check that it is not inside button or panel itself
|
||||
if (!previousActiveElementRef) return;
|
||||
if ($api.button?.contains(previousActiveElementRef)) return;
|
||||
if ($api.panel?.contains(previousActiveElementRef)) return;
|
||||
|
||||
// Check if the last focused element is *after* the button in the DOM
|
||||
let focusableElements = getFocusableElements();
|
||||
let previousIdx = focusableElements.indexOf(
|
||||
previousActiveElementRef as HTMLElement
|
||||
);
|
||||
let buttonIdx = focusableElements.indexOf($api.button!);
|
||||
if (buttonIdx > previousIdx) return;
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
focusIn($api.panel!, Focus.Last);
|
||||
break;
|
||||
}
|
||||
}
|
||||
function handleClick() {
|
||||
if (disabled) return;
|
||||
if (isWithinPanel) {
|
||||
$api.closePopover();
|
||||
$api.button?.focus(); // Re-focus the original opening Button
|
||||
} else {
|
||||
if ($api.popoverState === PopoverStates.Closed)
|
||||
closeOthers?.($api.buttonId);
|
||||
$api.button?.focus();
|
||||
$api.togglePopover();
|
||||
}
|
||||
}
|
||||
|
||||
$: propsWeControl = isWithinPanel
|
||||
? {}
|
||||
: {
|
||||
id: $api.buttonId,
|
||||
"aria-expanded": disabled
|
||||
? undefined
|
||||
: $api.popoverState === PopoverStates.Open,
|
||||
"aria-controls": $api.panel ? $api.panelId : undefined,
|
||||
disabled: disabled ? true : undefined,
|
||||
};
|
||||
$: propsWeControl = isWithinPanel
|
||||
? {}
|
||||
: {
|
||||
id: $api.buttonId,
|
||||
"aria-expanded": disabled
|
||||
? undefined
|
||||
: $api.popoverState === PopoverStates.Open,
|
||||
"aria-controls": $api.panel ? $api.panelId : undefined,
|
||||
disabled: disabled ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window on:focus|capture={handleFocus} />
|
||||
|
||||
<button
|
||||
{...$$restProps}
|
||||
{...propsWeControl}
|
||||
on:click={handleClick}
|
||||
on:keydown={handleKeyDown}
|
||||
on:keyup={handleKeyUp}
|
||||
bind:this={$buttonStore}
|
||||
{...$$restProps}
|
||||
{...propsWeControl}
|
||||
on:click={handleClick}
|
||||
on:keydown={handleKeyDown}
|
||||
on:keyup={handleKeyUp}
|
||||
bind:this={$buttonStore}
|
||||
>
|
||||
<slot open={$api.popoverState === PopoverStates.Open} />
|
||||
<slot open={$api.popoverState === PopoverStates.Open} />
|
||||
</button>
|
||||
|
||||
@@ -1,57 +1,57 @@
|
||||
<script lang="ts" context="module">
|
||||
export interface PopoverGroupContext {
|
||||
registerPopover(registerbag: PopoverRegisterBag): void;
|
||||
unregisterPopover(registerbag: PopoverRegisterBag): void;
|
||||
isFocusWithinPopoverGroup(): boolean;
|
||||
closeOthers(buttonId: string): void;
|
||||
}
|
||||
export interface PopoverGroupContext {
|
||||
registerPopover(registerbag: PopoverRegisterBag): void;
|
||||
unregisterPopover(registerbag: PopoverRegisterBag): void;
|
||||
isFocusWithinPopoverGroup(): boolean;
|
||||
closeOthers(buttonId: string): void;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { PopoverRegisterBag } from "./Popover.svelte";
|
||||
import { setContext } from "svelte";
|
||||
let groupRef: HTMLDivElement | undefined;
|
||||
let popovers: PopoverRegisterBag[] = [];
|
||||
import type { PopoverRegisterBag } from "./Popover.svelte";
|
||||
import { setContext } from "svelte";
|
||||
let groupRef: HTMLDivElement | undefined;
|
||||
let popovers: PopoverRegisterBag[] = [];
|
||||
|
||||
function unregisterPopover(registerBag: PopoverRegisterBag) {
|
||||
popovers = popovers.filter((bag) => bag != registerBag);
|
||||
}
|
||||
function unregisterPopover(registerBag: PopoverRegisterBag) {
|
||||
popovers = popovers.filter((bag) => bag != registerBag);
|
||||
}
|
||||
|
||||
function registerPopover(registerBag: PopoverRegisterBag) {
|
||||
popovers = [...popovers, registerBag];
|
||||
return () => {
|
||||
unregisterPopover(registerBag);
|
||||
};
|
||||
}
|
||||
function registerPopover(registerBag: PopoverRegisterBag) {
|
||||
popovers = [...popovers, registerBag];
|
||||
return () => {
|
||||
unregisterPopover(registerBag);
|
||||
};
|
||||
}
|
||||
|
||||
function isFocusWithinPopoverGroup() {
|
||||
let element = document.activeElement as HTMLElement;
|
||||
function isFocusWithinPopoverGroup() {
|
||||
let element = document.activeElement as HTMLElement;
|
||||
|
||||
if (groupRef?.contains(element)) return true;
|
||||
if (groupRef?.contains(element)) return true;
|
||||
|
||||
// Check if the focus is in one of the button or panel elements. This is important in case you are rendering inside a Portal.
|
||||
return popovers.some((bag) => {
|
||||
return (
|
||||
document.getElementById(bag.buttonId)?.contains(element) ||
|
||||
document.getElementById(bag.panelId)?.contains(element)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function closeOthers(buttonId: string) {
|
||||
for (let popover of popovers) {
|
||||
if (popover.buttonId !== buttonId) popover.close();
|
||||
}
|
||||
}
|
||||
|
||||
setContext("PopoverGroup", {
|
||||
unregisterPopover,
|
||||
registerPopover,
|
||||
isFocusWithinPopoverGroup,
|
||||
closeOthers,
|
||||
// Check if the focus is in one of the button or panel elements. This is important in case you are rendering inside a Portal.
|
||||
return popovers.some((bag) => {
|
||||
return (
|
||||
document.getElementById(bag.buttonId)?.contains(element) ||
|
||||
document.getElementById(bag.panelId)?.contains(element)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function closeOthers(buttonId: string) {
|
||||
for (let popover of popovers) {
|
||||
if (popover.buttonId !== buttonId) popover.close();
|
||||
}
|
||||
}
|
||||
|
||||
setContext("PopoverGroup", {
|
||||
unregisterPopover,
|
||||
registerPopover,
|
||||
isFocusWithinPopoverGroup,
|
||||
closeOthers,
|
||||
});
|
||||
</script>
|
||||
|
||||
<div {...$$restProps} bind:this={groupRef}>
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { State } from "./open-closed";
|
||||
import { getContext } from "svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
import { PopoverStates, StateDefinition } from "./Popover.svelte";
|
||||
import { State } from "$lib/internal/open-closed";
|
||||
import { getContext } from "svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
import { PopoverStates, StateDefinition } from "./Popover.svelte";
|
||||
|
||||
let api: Writable<StateDefinition> | undefined = getContext("PopoverApi");
|
||||
let api: Writable<StateDefinition> | undefined = getContext("PopoverApi");
|
||||
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
|
||||
$: visible =
|
||||
openClosedState !== undefined
|
||||
? $openClosedState === State.Open
|
||||
: $api.popoverState === PopoverStates.Open;
|
||||
$: visible =
|
||||
openClosedState !== undefined
|
||||
? $openClosedState === State.Open
|
||||
: $api.popoverState === PopoverStates.Open;
|
||||
|
||||
function handleClick() {
|
||||
$api.closePopover();
|
||||
}
|
||||
function handleClick() {
|
||||
$api.closePopover();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div {...$$restProps} on:click={handleClick} aria-hidden>
|
||||
<slot open={$api.popoverState === PopoverStates.Open} />
|
||||
</div>
|
||||
<div {...$$restProps} on:click={handleClick} aria-hidden>
|
||||
<slot open={$api.popoverState === PopoverStates.Open} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,117 +1,114 @@
|
||||
<script lang="ts" context="module">
|
||||
export type PopoverPanelContext = string | null;
|
||||
export type PopoverPanelContext = string | null;
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { Keys } from "./keyboard";
|
||||
import { State } from "./open-closed";
|
||||
import {
|
||||
getFocusableElements,
|
||||
Focus,
|
||||
FocusResult,
|
||||
focusIn,
|
||||
} from "./focus-management";
|
||||
import { getContext, setContext, onMount } from "svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
import { PopoverStates, StateDefinition } from "./Popover.svelte";
|
||||
let panelStore: SvelteStore<HTMLDivElement> = getContext("PopoverPanelRef");
|
||||
export let focus = false;
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
import { State } from "$lib/internal/open-closed";
|
||||
import {
|
||||
getFocusableElements,
|
||||
Focus,
|
||||
FocusResult,
|
||||
focusIn,
|
||||
} from "$lib/utils/focus-management";
|
||||
import { getContext, setContext, onMount } from "svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
import { PopoverStates, StateDefinition } from "./Popover.svelte";
|
||||
let panelStore: SvelteStore<HTMLDivElement> = getContext("PopoverPanelRef");
|
||||
export let focus = false;
|
||||
|
||||
let api: Writable<StateDefinition> | undefined = getContext("PopoverApi");
|
||||
setContext("PopoverPanelContext", $api.panelId);
|
||||
let api: Writable<StateDefinition> | undefined = getContext("PopoverApi");
|
||||
setContext("PopoverPanelContext", $api.panelId);
|
||||
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
|
||||
$: visible =
|
||||
openClosedState !== undefined
|
||||
? $openClosedState === State.Open
|
||||
: $api.popoverState === PopoverStates.Open;
|
||||
$: visible =
|
||||
openClosedState !== undefined
|
||||
? $openClosedState === State.Open
|
||||
: $api.popoverState === PopoverStates.Open;
|
||||
|
||||
onMount(() => {
|
||||
if (!focus) return;
|
||||
onMount(() => {
|
||||
if (!focus) return;
|
||||
if ($api.popoverState !== PopoverStates.Open) return;
|
||||
if (!$api.panel) return;
|
||||
|
||||
let activeElement = document.activeElement as HTMLElement;
|
||||
if ($api.panel?.contains(activeElement)) return; // Already focused within Dialog
|
||||
|
||||
focusIn($api.panel!, Focus.First);
|
||||
});
|
||||
|
||||
function handleWindowKeydown(event: KeyboardEvent) {
|
||||
if ($api.popoverState !== PopoverStates.Open) return;
|
||||
if (!$api.panel) return;
|
||||
|
||||
if (event.key !== Keys.Tab) return;
|
||||
if (!document.activeElement) return;
|
||||
if (!$api.panel?.contains(document.activeElement)) return;
|
||||
|
||||
// We will take-over the default tab behaviour so that we have a bit
|
||||
// control over what is focused next. It will behave exactly the same,
|
||||
// but it will also "fix" some issues based on whether you are using a
|
||||
// Portal or not.
|
||||
event.preventDefault();
|
||||
|
||||
let result = focusIn(
|
||||
$api.panel!,
|
||||
event.shiftKey ? Focus.Previous : Focus.Next
|
||||
);
|
||||
|
||||
if (result === FocusResult.Underflow) {
|
||||
return $api.button?.focus();
|
||||
} else if (result === FocusResult.Overflow) {
|
||||
if (!$api.button) return;
|
||||
|
||||
let elements = getFocusableElements();
|
||||
let buttonIdx = elements.indexOf($api.button!);
|
||||
|
||||
let nextElements = elements
|
||||
.splice(buttonIdx + 1) // Elements after button
|
||||
.filter((element) => !$api.panel?.contains(element)); // Ignore items in panel
|
||||
|
||||
// Try to focus the next element, however it could fail if we are in a
|
||||
// Portal that happens to be the very last one in the DOM. In that
|
||||
// case we would Error (because nothing after the button is
|
||||
// focusable). Therefore we will try and focus the very first item in
|
||||
// the document.body.
|
||||
if (focusIn(nextElements, Focus.First) === FocusResult.Error) {
|
||||
focusIn(document.body, Focus.First);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleFocus() {
|
||||
if (!focus) return;
|
||||
if ($api.popoverState !== PopoverStates.Open) return;
|
||||
if (!$api.panel) return;
|
||||
if ($api.panel?.contains(document.activeElement as HTMLElement)) return;
|
||||
$api.closePopover();
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case Keys.Escape:
|
||||
if ($api.popoverState !== PopoverStates.Open) return;
|
||||
if (!$api.panel) return;
|
||||
|
||||
let activeElement = document.activeElement as HTMLElement;
|
||||
if ($api.panel?.contains(activeElement)) return; // Already focused within Dialog
|
||||
|
||||
focusIn($api.panel!, Focus.First);
|
||||
});
|
||||
|
||||
function handleWindowKeydown(event: KeyboardEvent) {
|
||||
if ($api.popoverState !== PopoverStates.Open) return;
|
||||
if (!$api.panel) return;
|
||||
|
||||
if (event.key !== Keys.Tab) return;
|
||||
if (!document.activeElement) return;
|
||||
if (!$api.panel?.contains(document.activeElement)) return;
|
||||
|
||||
// We will take-over the default tab behaviour so that we have a bit
|
||||
// control over what is focused next. It will behave exactly the same,
|
||||
// but it will also "fix" some issues based on whether you are using a
|
||||
// Portal or not.
|
||||
event.preventDefault();
|
||||
|
||||
let result = focusIn(
|
||||
$api.panel!,
|
||||
event.shiftKey ? Focus.Previous : Focus.Next
|
||||
);
|
||||
|
||||
if (result === FocusResult.Underflow) {
|
||||
return $api.button?.focus();
|
||||
} else if (result === FocusResult.Overflow) {
|
||||
if (!$api.button) return;
|
||||
|
||||
let elements = getFocusableElements();
|
||||
let buttonIdx = elements.indexOf($api.button!);
|
||||
|
||||
let nextElements = elements
|
||||
.splice(buttonIdx + 1) // Elements after button
|
||||
.filter((element) => !$api.panel?.contains(element)); // Ignore items in panel
|
||||
|
||||
// Try to focus the next element, however it could fail if we are in a
|
||||
// Portal that happens to be the very last one in the DOM. In that
|
||||
// case we would Error (because nothing after the button is
|
||||
// focusable). Therefore we will try and focus the very first item in
|
||||
// the document.body.
|
||||
if (focusIn(nextElements, Focus.First) === FocusResult.Error) {
|
||||
focusIn(document.body, Focus.First);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleFocus() {
|
||||
if (!focus) return;
|
||||
if ($api.popoverState !== PopoverStates.Open) return;
|
||||
if (!$api.panel) return;
|
||||
if ($api.panel?.contains(document.activeElement as HTMLElement)) return;
|
||||
event.stopPropagation();
|
||||
$api.closePopover();
|
||||
$api.button?.focus();
|
||||
break;
|
||||
}
|
||||
|
||||
function handleKeydown(event: KeyboardEvent) {
|
||||
switch (event.key) {
|
||||
case Keys.Escape:
|
||||
if ($api.popoverState !== PopoverStates.Open) return;
|
||||
if (!$api.panel) return;
|
||||
if (!$api.panel?.contains(document.activeElement)) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$api.closePopover();
|
||||
$api.button?.focus();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window
|
||||
on:keydown={handleWindowKeydown}
|
||||
on:focus|capture={handleFocus}
|
||||
on:keydown={handleWindowKeydown}
|
||||
on:focus|capture={handleFocus}
|
||||
/>
|
||||
{#if visible}
|
||||
<div {...$$restProps} on:keydown={handleKeydown} bind:this={$panelStore}>
|
||||
<slot
|
||||
open={$api.popoverState === PopoverStates.Open}
|
||||
close={$api.close}
|
||||
/>
|
||||
</div>
|
||||
<div {...$$restProps} on:keydown={handleKeydown} bind:this={$panelStore}>
|
||||
<slot open={$api.popoverState === PopoverStates.Open} close={$api.close} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { usePortalGroupContext } from "./PortalGroup.svelte";
|
||||
import { usePortalRoot } from "./ForcePortalRootContext.svelte";
|
||||
import { portal } from "./use-portal";
|
||||
let forceInRoot = usePortalRoot();
|
||||
let groupTarget = usePortalGroupContext();
|
||||
$: target = (() => {
|
||||
// Group context is used, but still null
|
||||
if (
|
||||
!(forceInRoot && $forceInRoot) &&
|
||||
groupTarget !== undefined &&
|
||||
$groupTarget !== null
|
||||
)
|
||||
return $groupTarget;
|
||||
import { usePortalGroupContext } from "./PortalGroup.svelte";
|
||||
import { usePortalRoot } from "$lib/internal/ForcePortalRootContext.svelte";
|
||||
import { portal } from "$lib/hooks/use-portal";
|
||||
let forceInRoot = usePortalRoot();
|
||||
let groupTarget = usePortalGroupContext();
|
||||
$: target = (() => {
|
||||
// Group context is used, but still null
|
||||
if (
|
||||
!(forceInRoot && $forceInRoot) &&
|
||||
groupTarget !== undefined &&
|
||||
$groupTarget !== null
|
||||
)
|
||||
return $groupTarget;
|
||||
|
||||
// No group context is used, let's create a default portal root
|
||||
if (typeof window === "undefined") return null;
|
||||
let existingRoot = document.getElementById("headlessui-portal-root");
|
||||
if (existingRoot) return existingRoot;
|
||||
// No group context is used, let's create a default portal root
|
||||
if (typeof window === "undefined") return null;
|
||||
let existingRoot = document.getElementById("headlessui-portal-root");
|
||||
if (existingRoot) return existingRoot;
|
||||
|
||||
let root = document.createElement("div");
|
||||
root.setAttribute("id", "headlessui-portal-root");
|
||||
return document.body.appendChild(root);
|
||||
})();
|
||||
let root = document.createElement("div");
|
||||
root.setAttribute("id", "headlessui-portal-root");
|
||||
return document.body.appendChild(root);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<div use:portal={target}>
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<script lang="ts" context="module">
|
||||
import { getContext, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
const PORTAL_GROUP_CONTEXT_NAME = "headlessui-portal-group-context";
|
||||
import { getContext, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
const PORTAL_GROUP_CONTEXT_NAME = "headlessui-portal-group-context";
|
||||
|
||||
export function usePortalGroupContext():
|
||||
| Writable<HTMLElement | null>
|
||||
| undefined {
|
||||
return getContext(PORTAL_GROUP_CONTEXT_NAME);
|
||||
}
|
||||
export function usePortalGroupContext():
|
||||
| Writable<HTMLElement | null>
|
||||
| undefined {
|
||||
return getContext(PORTAL_GROUP_CONTEXT_NAME);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let target: HTMLElement | null;
|
||||
setContext(PORTAL_GROUP_CONTEXT_NAME, writable(target));
|
||||
export let target: HTMLElement | null;
|
||||
setContext(PORTAL_GROUP_CONTEXT_NAME, writable(target));
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
|
||||
@@ -1,182 +1,175 @@
|
||||
<script lang="ts" context="module">
|
||||
import DescriptionProvider from "./DescriptionProvider.svelte";
|
||||
import LabelProvider from "./LabelProvider.svelte";
|
||||
import { createEventDispatcher, getContext, setContext } from "svelte";
|
||||
import { Writable, writable } from "svelte/store";
|
||||
import { Focus, focusIn, FocusResult } from "./focus-management";
|
||||
import { Keys } from "./keyboard";
|
||||
import { useId } from "./use-id";
|
||||
export interface Option {
|
||||
id: string;
|
||||
element: HTMLElement | null;
|
||||
propsRef: { value: unknown; disabled: boolean };
|
||||
import DescriptionProvider from "./DescriptionProvider.svelte";
|
||||
import LabelProvider from "./LabelProvider.svelte";
|
||||
import { createEventDispatcher, getContext, setContext } from "svelte";
|
||||
import { Writable, writable } from "svelte/store";
|
||||
import { Focus, focusIn, FocusResult } from "$lib/utils/focus-management";
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
export interface Option {
|
||||
id: string;
|
||||
element: HTMLElement | null;
|
||||
propsRef: { value: unknown; disabled: boolean };
|
||||
}
|
||||
|
||||
export interface StateDefinition {
|
||||
// State
|
||||
options: Option[];
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
firstOption: Option | undefined;
|
||||
containsCheckedOption: boolean;
|
||||
|
||||
// State mutators
|
||||
change(nextValue: unknown): boolean;
|
||||
registerOption(action: Option): void;
|
||||
unregisterOption(id: Option["id"]): void;
|
||||
}
|
||||
|
||||
const RADIO_GROUP_CONTEXT_NAME = "RadioGroupContext";
|
||||
export function useRadioGroupContext(
|
||||
component: string
|
||||
): Writable<StateDefinition | undefined> {
|
||||
const context = getContext(RADIO_GROUP_CONTEXT_NAME) as
|
||||
| Writable<StateDefinition | undefined>
|
||||
| undefined;
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
`<${component} /> is missing a parent <RadioGroup /> component.`
|
||||
);
|
||||
}
|
||||
|
||||
export interface StateDefinition {
|
||||
// State
|
||||
options: Option[];
|
||||
value: unknown;
|
||||
disabled: boolean;
|
||||
firstOption: Option | undefined;
|
||||
containsCheckedOption: boolean;
|
||||
|
||||
// State mutators
|
||||
change(nextValue: unknown): boolean;
|
||||
registerOption(action: Option): void;
|
||||
unregisterOption(id: Option["id"]): void;
|
||||
}
|
||||
|
||||
const RADIO_GROUP_CONTEXT_NAME = "RadioGroupContext";
|
||||
export function useRadioGroupContext(
|
||||
component: string
|
||||
): Writable<StateDefinition | undefined> {
|
||||
const context = getContext(RADIO_GROUP_CONTEXT_NAME) as
|
||||
| Writable<StateDefinition | undefined>
|
||||
| undefined;
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
`<${component} /> is missing a parent <RadioGroup /> component.`
|
||||
);
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
return context;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { treeWalker } from "./use-tree-walker";
|
||||
export let disabled = false;
|
||||
export let value: any;
|
||||
let radioGroupRef: HTMLElement | null = null;
|
||||
let options: StateDefinition["options"] = [];
|
||||
import { treeWalker } from "$lib/hooks/use-tree-walker";
|
||||
export let disabled = false;
|
||||
export let value: any;
|
||||
let radioGroupRef: HTMLElement | null = null;
|
||||
let options: StateDefinition["options"] = [];
|
||||
|
||||
let id = `headlessui-radiogroup-${useId()}`;
|
||||
let id = `headlessui-radiogroup-${useId()}`;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext(RADIO_GROUP_CONTEXT_NAME, api);
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext(RADIO_GROUP_CONTEXT_NAME, api);
|
||||
|
||||
$: api.set({
|
||||
options,
|
||||
value,
|
||||
disabled,
|
||||
firstOption: options.find((option) => !option.propsRef.disabled),
|
||||
containsCheckedOption: options.some(
|
||||
(option) => option.propsRef.value === value
|
||||
),
|
||||
change(nextValue: unknown) {
|
||||
if (disabled) return false;
|
||||
if (value === nextValue) return false;
|
||||
let nextOption = options.find(
|
||||
(option) => option.propsRef.value === nextValue
|
||||
)?.propsRef;
|
||||
if (nextOption?.disabled) return false;
|
||||
dispatch("updateValue", nextValue);
|
||||
return true;
|
||||
},
|
||||
registerOption(action: Option) {
|
||||
options = [...options, action];
|
||||
},
|
||||
unregisterOption(id: Option["id"]) {
|
||||
options = options.filter((radio) => radio.id !== id);
|
||||
},
|
||||
});
|
||||
$: api.set({
|
||||
options,
|
||||
value,
|
||||
disabled,
|
||||
firstOption: options.find((option) => !option.propsRef.disabled),
|
||||
containsCheckedOption: options.some(
|
||||
(option) => option.propsRef.value === value
|
||||
),
|
||||
change(nextValue: unknown) {
|
||||
if (disabled) return false;
|
||||
if (value === nextValue) return false;
|
||||
let nextOption = options.find(
|
||||
(option) => option.propsRef.value === nextValue
|
||||
)?.propsRef;
|
||||
if (nextOption?.disabled) return false;
|
||||
dispatch("updateValue", nextValue);
|
||||
return true;
|
||||
},
|
||||
registerOption(action: Option) {
|
||||
options = [...options, action];
|
||||
},
|
||||
unregisterOption(id: Option["id"]) {
|
||||
options = options.filter((radio) => radio.id !== id);
|
||||
},
|
||||
});
|
||||
|
||||
$: treeWalker({
|
||||
container: radioGroupRef,
|
||||
accept(node) {
|
||||
if (node.getAttribute("role") === "radio")
|
||||
return NodeFilter.FILTER_REJECT;
|
||||
if (node.hasAttribute("role")) return NodeFilter.FILTER_SKIP;
|
||||
return NodeFilter.FILTER_ACCEPT;
|
||||
},
|
||||
walk(node) {
|
||||
node.setAttribute("role", "none");
|
||||
},
|
||||
});
|
||||
$: treeWalker({
|
||||
container: radioGroupRef,
|
||||
accept(node) {
|
||||
if (node.getAttribute("role") === "radio")
|
||||
return NodeFilter.FILTER_REJECT;
|
||||
if (node.hasAttribute("role")) return NodeFilter.FILTER_SKIP;
|
||||
return NodeFilter.FILTER_ACCEPT;
|
||||
},
|
||||
walk(node) {
|
||||
node.setAttribute("role", "none");
|
||||
},
|
||||
});
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (!radioGroupRef) return;
|
||||
if (!radioGroupRef.contains(event.target as HTMLElement)) return;
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (!radioGroupRef) return;
|
||||
if (!radioGroupRef.contains(event.target as HTMLElement)) return;
|
||||
|
||||
let all = options
|
||||
.filter((option) => option.propsRef.disabled === false)
|
||||
.map((radio) => radio.element) as HTMLElement[];
|
||||
let all = options
|
||||
.filter((option) => option.propsRef.disabled === false)
|
||||
.map((radio) => radio.element) as HTMLElement[];
|
||||
|
||||
switch (event.key) {
|
||||
case Keys.ArrowLeft:
|
||||
case Keys.ArrowUp:
|
||||
{
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
switch (event.key) {
|
||||
case Keys.ArrowLeft:
|
||||
case Keys.ArrowUp:
|
||||
{
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
let result = focusIn(
|
||||
all,
|
||||
Focus.Previous | Focus.WrapAround
|
||||
);
|
||||
let result = focusIn(all, Focus.Previous | Focus.WrapAround);
|
||||
|
||||
if (result === FocusResult.Success) {
|
||||
let activeOption = options.find(
|
||||
(option) =>
|
||||
option.element === document.activeElement
|
||||
);
|
||||
if (activeOption)
|
||||
$api.change(activeOption.propsRef.value);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case Keys.ArrowRight:
|
||||
case Keys.ArrowDown:
|
||||
{
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
let result = focusIn(all, Focus.Next | Focus.WrapAround);
|
||||
|
||||
if (result === FocusResult.Success) {
|
||||
let activeOption = options.find(
|
||||
(option) =>
|
||||
option.element === document.activeElement
|
||||
);
|
||||
if (activeOption)
|
||||
$api.change(activeOption.propsRef.value);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case Keys.Space:
|
||||
{
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
let activeOption = options.find(
|
||||
(option) => option.element === document.activeElement
|
||||
);
|
||||
if (activeOption) $api.change(activeOption.propsRef.value);
|
||||
}
|
||||
break;
|
||||
if (result === FocusResult.Success) {
|
||||
let activeOption = options.find(
|
||||
(option) => option.element === document.activeElement
|
||||
);
|
||||
if (activeOption) $api.change(activeOption.propsRef.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "radiogroup",
|
||||
};
|
||||
case Keys.ArrowRight:
|
||||
case Keys.ArrowDown:
|
||||
{
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
let result = focusIn(all, Focus.Next | Focus.WrapAround);
|
||||
|
||||
if (result === FocusResult.Success) {
|
||||
let activeOption = options.find(
|
||||
(option) => option.element === document.activeElement
|
||||
);
|
||||
if (activeOption) $api.change(activeOption.propsRef.value);
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
||||
case Keys.Space:
|
||||
{
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
let activeOption = options.find(
|
||||
(option) => option.element === document.activeElement
|
||||
);
|
||||
if (activeOption) $api.change(activeOption.propsRef.value);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "radiogroup",
|
||||
};
|
||||
</script>
|
||||
|
||||
<DescriptionProvider name="RadioGroup.Description" let:describedby>
|
||||
<LabelProvider name="RadioGroup.Label" let:labelledby>
|
||||
<div
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={radioGroupRef}
|
||||
aria-labelledby={labelledby}
|
||||
aria-describedby={describedby}
|
||||
on:keydown={handleKeyDown}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</LabelProvider>
|
||||
<LabelProvider name="RadioGroup.Label" let:labelledby>
|
||||
<div
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={radioGroupRef}
|
||||
aria-labelledby={labelledby}
|
||||
aria-describedby={describedby}
|
||||
on:keydown={handleKeyDown}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</LabelProvider>
|
||||
</DescriptionProvider>
|
||||
|
||||
@@ -1,91 +1,91 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy } from "svelte";
|
||||
import DescriptionProvider from "./DescriptionProvider.svelte";
|
||||
import LabelProvider from "./LabelProvider.svelte";
|
||||
import { onDestroy } from "svelte";
|
||||
import DescriptionProvider from "./DescriptionProvider.svelte";
|
||||
import LabelProvider from "./LabelProvider.svelte";
|
||||
|
||||
import { useRadioGroupContext, Option } from "./RadioGroup.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { useRadioGroupContext, Option } from "./RadioGroup.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
|
||||
enum OptionState {
|
||||
Empty = 1 << 0,
|
||||
Active = 1 << 1,
|
||||
}
|
||||
enum OptionState {
|
||||
Empty = 1 << 0,
|
||||
Active = 1 << 1,
|
||||
}
|
||||
|
||||
export let value: any;
|
||||
export let disabled: boolean = false;
|
||||
let api = useRadioGroupContext("RadioGroupOption");
|
||||
let id = `headlessui-radiogroup-option-${useId()}`;
|
||||
let optionRef: HTMLElement | null = null;
|
||||
$: propsRef = { value, disabled };
|
||||
let state = OptionState.Empty;
|
||||
export let value: any;
|
||||
export let disabled: boolean = false;
|
||||
let api = useRadioGroupContext("RadioGroupOption");
|
||||
let id = `headlessui-radiogroup-option-${useId()}`;
|
||||
let optionRef: HTMLElement | null = null;
|
||||
$: propsRef = { value, disabled };
|
||||
let state = OptionState.Empty;
|
||||
|
||||
function updateOption(option: Option) {
|
||||
$api?.unregisterOption(option.id);
|
||||
$api?.registerOption(option);
|
||||
}
|
||||
$: updateOption({ id, element: optionRef, propsRef });
|
||||
onDestroy(() => $api?.unregisterOption(id));
|
||||
function updateOption(option: Option) {
|
||||
$api?.unregisterOption(option.id);
|
||||
$api?.registerOption(option);
|
||||
}
|
||||
$: updateOption({ id, element: optionRef, propsRef });
|
||||
onDestroy(() => $api?.unregisterOption(id));
|
||||
|
||||
$: isFirstOption = $api?.firstOption?.id === id;
|
||||
$: isDisabled = $api?.disabled || disabled;
|
||||
$: checked = $api?.value === value;
|
||||
$: isFirstOption = $api?.firstOption?.id === id;
|
||||
$: isDisabled = $api?.disabled || disabled;
|
||||
$: checked = $api?.value === value;
|
||||
|
||||
$: tabIndex = (() => {
|
||||
if (isDisabled) return -1;
|
||||
if (checked) return 0;
|
||||
if (!$api.containsCheckedOption && isFirstOption) return 0;
|
||||
return -1;
|
||||
})();
|
||||
$: tabIndex = (() => {
|
||||
if (isDisabled) return -1;
|
||||
if (checked) return 0;
|
||||
if (!$api.containsCheckedOption && isFirstOption) return 0;
|
||||
return -1;
|
||||
})();
|
||||
|
||||
function handleClick() {
|
||||
if (!$api.change(value)) return;
|
||||
function handleClick() {
|
||||
if (!$api.change(value)) return;
|
||||
|
||||
state |= OptionState.Active;
|
||||
optionRef?.focus();
|
||||
}
|
||||
function handleFocus() {
|
||||
state |= OptionState.Active;
|
||||
}
|
||||
function handleBlur() {
|
||||
state &= ~OptionState.Active;
|
||||
}
|
||||
state |= OptionState.Active;
|
||||
optionRef?.focus();
|
||||
}
|
||||
function handleFocus() {
|
||||
state |= OptionState.Active;
|
||||
}
|
||||
function handleBlur() {
|
||||
state &= ~OptionState.Active;
|
||||
}
|
||||
|
||||
$: classStyle = $$props.class
|
||||
? typeof $$props.class === "function"
|
||||
? $$props.class({
|
||||
active: state & OptionState.Active,
|
||||
checked,
|
||||
disabled: isDisabled,
|
||||
})
|
||||
: $$props.class
|
||||
: "";
|
||||
$: classStyle = $$props.class
|
||||
? typeof $$props.class === "function"
|
||||
? $$props.class({
|
||||
active: state & OptionState.Active,
|
||||
checked,
|
||||
disabled: isDisabled,
|
||||
})
|
||||
: $$props.class
|
||||
: "";
|
||||
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
class: classStyle,
|
||||
role: "radio",
|
||||
"aria-checked": checked ? ("true" as const) : ("false" as const),
|
||||
"aria-disabled": isDisabled ? true : undefined,
|
||||
tabIndex: tabIndex,
|
||||
};
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
class: classStyle,
|
||||
role: "radio",
|
||||
"aria-checked": checked ? ("true" as const) : ("false" as const),
|
||||
"aria-disabled": isDisabled ? true : undefined,
|
||||
tabIndex: tabIndex,
|
||||
};
|
||||
</script>
|
||||
|
||||
<DescriptionProvider name="RadioGroup.Description" let:describedby>
|
||||
<LabelProvider name="RadioGroup.Label" let:labelledby>
|
||||
<div
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={optionRef}
|
||||
aria-labelledby={labelledby}
|
||||
aria-describedby={describedby}
|
||||
on:click={isDisabled ? undefined : handleClick}
|
||||
on:focus={isDisabled ? undefined : handleFocus}
|
||||
on:blur={isDisabled ? undefined : handleBlur}
|
||||
>
|
||||
<slot
|
||||
{checked}
|
||||
disabled={isDisabled}
|
||||
active={state & OptionState.Active}
|
||||
/>
|
||||
</div>
|
||||
</LabelProvider>
|
||||
<LabelProvider name="RadioGroup.Label" let:labelledby>
|
||||
<div
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={optionRef}
|
||||
aria-labelledby={labelledby}
|
||||
aria-describedby={describedby}
|
||||
on:click={isDisabled ? undefined : handleClick}
|
||||
on:focus={isDisabled ? undefined : handleFocus}
|
||||
on:blur={isDisabled ? undefined : handleBlur}
|
||||
>
|
||||
<slot
|
||||
{checked}
|
||||
disabled={isDisabled}
|
||||
active={state & OptionState.Active}
|
||||
/>
|
||||
</div>
|
||||
</LabelProvider>
|
||||
</DescriptionProvider>
|
||||
|
||||
@@ -1,71 +1,72 @@
|
||||
<script lang="ts">
|
||||
import { StateDefinition } from "./SwitchGroup.svelte";
|
||||
import { LabelContext } from "./LabelProvider.svelte";
|
||||
import { DescriptionContext } from "./DescriptionProvider.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { Keys } from "./keyboard";
|
||||
import { getContext, createEventDispatcher } from "svelte";
|
||||
import { Writable } from "svelte/store";
|
||||
import type { StateDefinition } from "./SwitchGroup.svelte";
|
||||
import type { LabelContext } from "$lib/components/label/LabelProvider.svelte";
|
||||
import type { DescriptionContext } from "$lib/components/description/DescriptionProvider.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
import { getContext, createEventDispatcher } from "svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
export let checked = false;
|
||||
let api: Writable<StateDefinition> | undefined = getContext("SwitchApi");
|
||||
let labelContext: Writable<LabelContext> | undefined = getContext(
|
||||
"headlessui-label-context"
|
||||
);
|
||||
let descriptionContext: Writable<DescriptionContext> | undefined =
|
||||
getContext("headlessui-description-context");
|
||||
let id = `headlessui-switch-${useId()}`;
|
||||
$: switchStore = $api?.switchStore;
|
||||
let internalSwitchRef = null;
|
||||
const dispatch = createEventDispatcher();
|
||||
export let checked = false;
|
||||
let api: Writable<StateDefinition> | undefined = getContext("SwitchApi");
|
||||
let labelContext: Writable<LabelContext> | undefined = getContext(
|
||||
"headlessui-label-context"
|
||||
);
|
||||
let descriptionContext: Writable<DescriptionContext> | undefined = getContext(
|
||||
"headlessui-description-context"
|
||||
);
|
||||
let id = `headlessui-switch-${useId()}`;
|
||||
$: switchStore = $api?.switchStore;
|
||||
let internalSwitchRef = null;
|
||||
|
||||
function toggle() {
|
||||
dispatch("updateValue", !checked);
|
||||
}
|
||||
function toggle() {
|
||||
dispatch("updateValue", !checked);
|
||||
}
|
||||
|
||||
function handleClick(event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
toggle();
|
||||
}
|
||||
function handleClick(event: MouseEvent) {
|
||||
event.preventDefault();
|
||||
toggle();
|
||||
}
|
||||
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
if (event.key !== Keys.Tab) event.preventDefault();
|
||||
if (event.key === Keys.Space) toggle();
|
||||
}
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
if (event.key !== Keys.Tab) event.preventDefault();
|
||||
if (event.key === Keys.Space) toggle();
|
||||
}
|
||||
|
||||
// This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
|
||||
function handleKeyPress(event: KeyboardEvent) {
|
||||
event.preventDefault();
|
||||
}
|
||||
// This is needed so that we can "cancel" the click event when we use the `Enter` key on a button.
|
||||
function handleKeyPress(event: KeyboardEvent) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "switch",
|
||||
tabIndex: 0,
|
||||
"aria-checked": checked,
|
||||
"aria-labelledby": $labelContext?.labelIds,
|
||||
"aria-describedby": $descriptionContext?.descriptionIds,
|
||||
};
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "switch",
|
||||
tabIndex: 0,
|
||||
"aria-checked": checked,
|
||||
"aria-labelledby": $labelContext?.labelIds,
|
||||
"aria-describedby": $descriptionContext?.descriptionIds,
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if switchStore}
|
||||
<button
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={$switchStore}
|
||||
on:click={handleClick}
|
||||
on:keyup={handleKeyUp}
|
||||
on:keypress={handleKeyPress}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
<button
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={$switchStore}
|
||||
on:click={handleClick}
|
||||
on:keyup={handleKeyUp}
|
||||
on:keypress={handleKeyPress}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={$internalSwitchRef}
|
||||
on:click={handleClick}
|
||||
on:keyup={handleKeyUp}
|
||||
on:keypress={handleKeyPress}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
<button
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={$internalSwitchRef}
|
||||
on:click={handleClick}
|
||||
on:keyup={handleKeyUp}
|
||||
on:keypress={handleKeyPress}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
<script lang="ts" context="module">
|
||||
export interface StateDefinition {
|
||||
switchStore: Writable<HTMLButtonElement | null>;
|
||||
}
|
||||
export interface StateDefinition {
|
||||
switchStore: Writable<HTMLButtonElement | null>;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import DescriptionProvider from "./DescriptionProvider.svelte";
|
||||
import LabelProvider from "./LabelProvider.svelte";
|
||||
import { setContext } from "svelte";
|
||||
import { Writable, writable } from "svelte/store";
|
||||
import DescriptionProvider from "./DescriptionProvider.svelte";
|
||||
import LabelProvider from "./LabelProvider.svelte";
|
||||
import { setContext } from "svelte";
|
||||
import { Writable, writable } from "svelte/store";
|
||||
|
||||
let switchStore: Writable<HTMLButtonElement | null> = writable(null);
|
||||
let switchStore: Writable<HTMLButtonElement | null> = writable(null);
|
||||
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext("SwitchApi", api);
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext("SwitchApi", api);
|
||||
|
||||
function onClick() {
|
||||
if (!$switchStore) return;
|
||||
$switchStore.click();
|
||||
$switchStore.focus({ preventScroll: true });
|
||||
}
|
||||
function onClick() {
|
||||
if (!$switchStore) return;
|
||||
$switchStore.click();
|
||||
$switchStore.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
$: api.set({
|
||||
switchStore,
|
||||
});
|
||||
$: api.set({
|
||||
switchStore,
|
||||
});
|
||||
</script>
|
||||
|
||||
<div {...$$restProps}>
|
||||
<DescriptionProvider name="Switch.Description">
|
||||
<LabelProvider name="Switch.Label" {onClick}>
|
||||
<slot />
|
||||
</LabelProvider>
|
||||
</DescriptionProvider>
|
||||
<DescriptionProvider name="Switch.Description">
|
||||
<LabelProvider name="Switch.Label" {onClick}>
|
||||
<slot />
|
||||
</LabelProvider>
|
||||
</DescriptionProvider>
|
||||
</div>
|
||||
|
||||
@@ -1,98 +1,98 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { Focus, focusIn } from "./focus-management";
|
||||
import { Keys } from "./keyboard";
|
||||
import { match } from "./match";
|
||||
import { onMount } from "svelte";
|
||||
import { Focus, focusIn } from "$lib/utils/focus-management";
|
||||
import { Keys } from "$lib/utils/keyboard";
|
||||
import { match } from "$lib/utils/match";
|
||||
|
||||
import { useTabsContext } from "./TabGroup.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { useTabsContext } from "./TabGroup.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
|
||||
export let disabled = false;
|
||||
export let disabled = false;
|
||||
|
||||
let api = useTabsContext("Tab");
|
||||
let id = `headlessui-tabs-tab-${useId()}`;
|
||||
let tabRef = null;
|
||||
let api = useTabsContext("Tab");
|
||||
let id = `headlessui-tabs-tab-${useId()}`;
|
||||
let tabRef = null;
|
||||
|
||||
onMount(() => {
|
||||
$api.registerTab(tabRef);
|
||||
return () => $api.unregisterTab(tabRef);
|
||||
onMount(() => {
|
||||
$api.registerTab(tabRef);
|
||||
return () => $api.unregisterTab(tabRef);
|
||||
});
|
||||
|
||||
$: myIndex = $api.tabs.indexOf(tabRef);
|
||||
$: selected = myIndex === $api.selectedIndex;
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
let list = $api?.tabs.filter(Boolean) as HTMLElement[];
|
||||
|
||||
if (event.key === Keys.Space || event.key === Keys.Enter) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
$api?.setSelectedIndex(myIndex);
|
||||
return;
|
||||
}
|
||||
|
||||
switch (event.key) {
|
||||
case Keys.Home:
|
||||
case Keys.PageUp:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
return focusIn(list, Focus.First);
|
||||
|
||||
case Keys.End:
|
||||
case Keys.PageDown:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
return focusIn(list, Focus.Last);
|
||||
}
|
||||
|
||||
return match($api.orientation, {
|
||||
vertical() {
|
||||
if (event.key === Keys.ArrowUp)
|
||||
return focusIn(list, Focus.Previous | Focus.WrapAround);
|
||||
if (event.key === Keys.ArrowDown)
|
||||
return focusIn(list, Focus.Next | Focus.WrapAround);
|
||||
return;
|
||||
},
|
||||
horizontal() {
|
||||
if (event.key === Keys.ArrowLeft)
|
||||
return focusIn(list, Focus.Previous | Focus.WrapAround);
|
||||
if (event.key === Keys.ArrowRight)
|
||||
return focusIn(list, Focus.Next | Focus.WrapAround);
|
||||
return;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
$: myIndex = $api.tabs.indexOf(tabRef);
|
||||
$: selected = myIndex === $api.selectedIndex;
|
||||
function handleFocus() {
|
||||
tabRef?.focus();
|
||||
}
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
let list = $api?.tabs.filter(Boolean) as HTMLElement[];
|
||||
function handleSelection() {
|
||||
if (disabled) return;
|
||||
|
||||
if (event.key === Keys.Space || event.key === Keys.Enter) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
tabRef?.focus();
|
||||
$api?.setSelectedIndex(myIndex);
|
||||
}
|
||||
|
||||
$api?.setSelectedIndex(myIndex);
|
||||
return;
|
||||
}
|
||||
|
||||
switch (event.key) {
|
||||
case Keys.Home:
|
||||
case Keys.PageUp:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
return focusIn(list, Focus.First);
|
||||
|
||||
case Keys.End:
|
||||
case Keys.PageDown:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
return focusIn(list, Focus.Last);
|
||||
}
|
||||
|
||||
return match($api.orientation, {
|
||||
vertical() {
|
||||
if (event.key === Keys.ArrowUp)
|
||||
return focusIn(list, Focus.Previous | Focus.WrapAround);
|
||||
if (event.key === Keys.ArrowDown)
|
||||
return focusIn(list, Focus.Next | Focus.WrapAround);
|
||||
return;
|
||||
},
|
||||
horizontal() {
|
||||
if (event.key === Keys.ArrowLeft)
|
||||
return focusIn(list, Focus.Previous | Focus.WrapAround);
|
||||
if (event.key === Keys.ArrowRight)
|
||||
return focusIn(list, Focus.Next | Focus.WrapAround);
|
||||
return;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleFocus() {
|
||||
tabRef?.focus();
|
||||
}
|
||||
|
||||
function handleSelection() {
|
||||
if (disabled) return;
|
||||
|
||||
tabRef?.focus();
|
||||
$api?.setSelectedIndex(myIndex);
|
||||
}
|
||||
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "tab",
|
||||
"aria-controls": $api.panels[myIndex]?.id,
|
||||
"aria-selected": selected,
|
||||
tabIndex: selected ? 0 : -1,
|
||||
disabled: disabled ? true : undefined,
|
||||
};
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "tab",
|
||||
"aria-controls": $api.panels[myIndex]?.id,
|
||||
"aria-selected": selected,
|
||||
tabIndex: selected ? 0 : -1,
|
||||
disabled: disabled ? true : undefined,
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={tabRef}
|
||||
on:keydown={handleKeyDown}
|
||||
on:click={handleSelection}
|
||||
on:focus={$api.activation === "manual" ? handleFocus : handleSelection}
|
||||
{...{ ...$$restProps, ...propsWeControl }}
|
||||
bind:this={tabRef}
|
||||
on:keydown={handleKeyDown}
|
||||
on:click={handleSelection}
|
||||
on:focus={$api.activation === "manual" ? handleFocus : handleSelection}
|
||||
>
|
||||
<slot />
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
@@ -1,122 +1,120 @@
|
||||
<script lang="ts" context="module">
|
||||
import {
|
||||
createEventDispatcher,
|
||||
getContext,
|
||||
onMount,
|
||||
setContext,
|
||||
} from "svelte";
|
||||
import {
|
||||
createEventDispatcher,
|
||||
getContext,
|
||||
onMount,
|
||||
setContext,
|
||||
} from "svelte";
|
||||
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
|
||||
export type StateDefinition = {
|
||||
// State
|
||||
selectedIndex: number | null;
|
||||
orientation: "vertical" | "horizontal";
|
||||
activation: "auto" | "manual";
|
||||
export type StateDefinition = {
|
||||
// State
|
||||
selectedIndex: number | null;
|
||||
orientation: "vertical" | "horizontal";
|
||||
activation: "auto" | "manual";
|
||||
|
||||
tabs: (HTMLElement | null)[];
|
||||
panels: (HTMLElement | null)[];
|
||||
tabs: (HTMLElement | null)[];
|
||||
panels: (HTMLElement | null)[];
|
||||
|
||||
// State mutators
|
||||
setSelectedIndex(index: number): void;
|
||||
registerTab(tab: HTMLElement | null): void;
|
||||
unregisterTab(tab: HTMLElement | null): void;
|
||||
registerPanel(panel: HTMLElement | null): void;
|
||||
unregisterPanel(panel: HTMLElement | null): void;
|
||||
};
|
||||
// State mutators
|
||||
setSelectedIndex(index: number): void;
|
||||
registerTab(tab: HTMLElement | null): void;
|
||||
unregisterTab(tab: HTMLElement | null): void;
|
||||
registerPanel(panel: HTMLElement | null): void;
|
||||
unregisterPanel(panel: HTMLElement | null): void;
|
||||
};
|
||||
|
||||
const TABS_CONTEXT_NAME = "TabsContext";
|
||||
const TABS_CONTEXT_NAME = "TabsContext";
|
||||
|
||||
export function useTabsContext(
|
||||
component: string
|
||||
): Writable<StateDefinition | undefined> {
|
||||
let context: Writable<StateDefinition | undefined> | undefined =
|
||||
getContext(TABS_CONTEXT_NAME);
|
||||
export function useTabsContext(
|
||||
component: string
|
||||
): Writable<StateDefinition | undefined> {
|
||||
let context: Writable<StateDefinition | undefined> | undefined =
|
||||
getContext(TABS_CONTEXT_NAME);
|
||||
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
`<${component} /> is missing a parent <TabGroup /> component.`
|
||||
);
|
||||
}
|
||||
|
||||
return context;
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
`<${component} /> is missing a parent <TabGroup /> component.`
|
||||
);
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let defaultIndex = 0;
|
||||
export let vertical = false;
|
||||
export let manual = false;
|
||||
export let defaultIndex = 0;
|
||||
export let vertical = false;
|
||||
export let manual = false;
|
||||
|
||||
let selectedIndex: StateDefinition["selectedIndex"] = null;
|
||||
let tabs: StateDefinition["tabs"] = [];
|
||||
let panels: StateDefinition["panels"] = [];
|
||||
let selectedIndex: StateDefinition["selectedIndex"] = null;
|
||||
let tabs: StateDefinition["tabs"] = [];
|
||||
let panels: StateDefinition["panels"] = [];
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext(TABS_CONTEXT_NAME, api);
|
||||
let api: Writable<StateDefinition | undefined> = writable();
|
||||
setContext(TABS_CONTEXT_NAME, api);
|
||||
|
||||
$: api.set({
|
||||
selectedIndex,
|
||||
orientation: vertical ? "vertical" : "horizontal",
|
||||
activation: manual ? "manual" : "auto",
|
||||
tabs,
|
||||
panels,
|
||||
setSelectedIndex(index: number) {
|
||||
if (selectedIndex === index) return;
|
||||
selectedIndex = index;
|
||||
dispatch("updateValue", index);
|
||||
},
|
||||
registerTab(tab: typeof tabs[number]) {
|
||||
if (!tabs.includes(tab)) tabs = [...tabs, tab];
|
||||
},
|
||||
unregisterTab(tab: typeof tabs[number]) {
|
||||
tabs = tabs.filter((t) => t !== tab);
|
||||
},
|
||||
registerPanel(panel: typeof panels[number]) {
|
||||
if (!panels.includes(panel)) panels = [...panels, panel];
|
||||
},
|
||||
unregisterPanel(panel: typeof panels[number]) {
|
||||
panels = panels.filter((p) => p !== panel);
|
||||
},
|
||||
});
|
||||
$: api.set({
|
||||
selectedIndex,
|
||||
orientation: vertical ? "vertical" : "horizontal",
|
||||
activation: manual ? "manual" : "auto",
|
||||
tabs,
|
||||
panels,
|
||||
setSelectedIndex(index: number) {
|
||||
if (selectedIndex === index) return;
|
||||
selectedIndex = index;
|
||||
dispatch("updateValue", index);
|
||||
},
|
||||
registerTab(tab: typeof tabs[number]) {
|
||||
if (!tabs.includes(tab)) tabs = [...tabs, tab];
|
||||
},
|
||||
unregisterTab(tab: typeof tabs[number]) {
|
||||
tabs = tabs.filter((t) => t !== tab);
|
||||
},
|
||||
registerPanel(panel: typeof panels[number]) {
|
||||
if (!panels.includes(panel)) panels = [...panels, panel];
|
||||
},
|
||||
unregisterPanel(panel: typeof panels[number]) {
|
||||
panels = panels.filter((p) => p !== panel);
|
||||
},
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if ($api.tabs.length <= 0) return;
|
||||
if (selectedIndex !== null) return;
|
||||
onMount(() => {
|
||||
if ($api.tabs.length <= 0) return;
|
||||
if (selectedIndex !== null) return;
|
||||
|
||||
let tabs = $api.tabs.filter(Boolean) as HTMLElement[];
|
||||
let focusableTabs = tabs.filter((tab) => !tab.hasAttribute("disabled"));
|
||||
if (focusableTabs.length <= 0) return;
|
||||
let tabs = $api.tabs.filter(Boolean) as HTMLElement[];
|
||||
let focusableTabs = tabs.filter((tab) => !tab.hasAttribute("disabled"));
|
||||
if (focusableTabs.length <= 0) return;
|
||||
|
||||
// Underflow
|
||||
if (defaultIndex < 0) {
|
||||
selectedIndex = tabs.indexOf(focusableTabs[0]);
|
||||
}
|
||||
// Underflow
|
||||
if (defaultIndex < 0) {
|
||||
selectedIndex = tabs.indexOf(focusableTabs[0]);
|
||||
}
|
||||
|
||||
// Overflow
|
||||
else if (defaultIndex > $api.tabs.length) {
|
||||
selectedIndex = tabs.indexOf(
|
||||
focusableTabs[focusableTabs.length - 1]
|
||||
);
|
||||
}
|
||||
// Overflow
|
||||
else if (defaultIndex > $api.tabs.length) {
|
||||
selectedIndex = tabs.indexOf(focusableTabs[focusableTabs.length - 1]);
|
||||
}
|
||||
|
||||
// Middle
|
||||
else {
|
||||
let before = tabs.slice(0, defaultIndex);
|
||||
let after = tabs.slice(defaultIndex);
|
||||
// Middle
|
||||
else {
|
||||
let before = tabs.slice(0, defaultIndex);
|
||||
let after = tabs.slice(defaultIndex);
|
||||
|
||||
let next = [...after, ...before].find((tab) =>
|
||||
focusableTabs.includes(tab)
|
||||
);
|
||||
if (!next) return;
|
||||
let next = [...after, ...before].find((tab) =>
|
||||
focusableTabs.includes(tab)
|
||||
);
|
||||
if (!next) return;
|
||||
|
||||
selectedIndex = tabs.indexOf(next);
|
||||
}
|
||||
});
|
||||
selectedIndex = tabs.indexOf(next);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div {...$$restProps}>
|
||||
<slot {selectedIndex} />
|
||||
<slot {selectedIndex} />
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { useTabsContext } from "./TabGroup.svelte";
|
||||
import { useTabsContext } from "./TabGroup.svelte";
|
||||
|
||||
let api = useTabsContext("TabList");
|
||||
$: propsWeControl = {
|
||||
role: "tablist",
|
||||
"aria-orientation": $api.orientation,
|
||||
};
|
||||
let api = useTabsContext("TabList");
|
||||
$: propsWeControl = {
|
||||
role: "tablist",
|
||||
"aria-orientation": $api.orientation,
|
||||
};
|
||||
</script>
|
||||
|
||||
<div {...{ ...$$restProps, ...propsWeControl }}>
|
||||
<slot selectedIndex={$api.selectedIndex} />
|
||||
<slot selectedIndex={$api.selectedIndex} />
|
||||
</div>
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { useTabsContext } from "./TabGroup.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import { onMount } from "svelte";
|
||||
import { useTabsContext } from "./TabGroup.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
|
||||
let api = useTabsContext("TabPanel");
|
||||
let id = `headlessui-tabs-panel-${useId()}`;
|
||||
let panelRef = null;
|
||||
let api = useTabsContext("TabPanel");
|
||||
let id = `headlessui-tabs-panel-${useId()}`;
|
||||
let panelRef = null;
|
||||
|
||||
onMount(() => {
|
||||
$api.registerPanel(panelRef);
|
||||
return () => $api.unregisterPanel(panelRef);
|
||||
});
|
||||
onMount(() => {
|
||||
$api.registerPanel(panelRef);
|
||||
return () => $api.unregisterPanel(panelRef);
|
||||
});
|
||||
|
||||
$: myIndex = $api.panels.indexOf(panelRef);
|
||||
$: selected = myIndex === $api.selectedIndex;
|
||||
$: myIndex = $api.panels.indexOf(panelRef);
|
||||
$: selected = myIndex === $api.selectedIndex;
|
||||
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "tabpanel",
|
||||
"aria-labelledby": $api.tabs[myIndex]?.id,
|
||||
tabIndex: selected ? 0 : -1,
|
||||
};
|
||||
$: propsWeControl = {
|
||||
id,
|
||||
role: "tabpanel",
|
||||
"aria-labelledby": $api.tabs[myIndex]?.id,
|
||||
tabIndex: selected ? 0 : -1,
|
||||
};
|
||||
</script>
|
||||
|
||||
<div {...{ ...$$restProps, ...propsWeControl }} bind:this={panelRef}>
|
||||
{#if selected}
|
||||
<slot />
|
||||
{/if}
|
||||
{#if selected}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { useTabsContext } from "./TabGroup.svelte";
|
||||
import { useTabsContext } from "./TabGroup.svelte";
|
||||
|
||||
let api = useTabsContext("TabPanels");
|
||||
let api = useTabsContext("TabPanels");
|
||||
</script>
|
||||
|
||||
<div {...$$restProps}>
|
||||
<slot selectedIndex={$api.selectedIndex} />
|
||||
<slot selectedIndex={$api.selectedIndex} />
|
||||
</div>
|
||||
|
||||
@@ -1,173 +1,168 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
createEventDispatcher,
|
||||
getContext,
|
||||
onMount,
|
||||
setContext,
|
||||
} from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { match } from "./match";
|
||||
import { State } from "./open-closed";
|
||||
import { Reason, transition } from "./transition";
|
||||
import { createEventDispatcher, onMount, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { match } from "$lib/utils/match";
|
||||
import { State } from "$lib/internal/open-closed";
|
||||
import { Reason, transition } from "$lib/utils/transition";
|
||||
|
||||
import {
|
||||
hasChildren,
|
||||
NestingContextValues,
|
||||
NESTING_CONTEXT_NAME,
|
||||
TreeStates,
|
||||
useNesting,
|
||||
useParentNesting,
|
||||
useTransitionContext,
|
||||
} from "./TransitionRoot.svelte";
|
||||
import { useId } from "./use-id";
|
||||
import {
|
||||
hasChildren,
|
||||
NestingContextValues,
|
||||
NESTING_CONTEXT_NAME,
|
||||
TreeStates,
|
||||
useNesting,
|
||||
useParentNesting,
|
||||
useTransitionContext,
|
||||
} from "./TransitionRoot.svelte";
|
||||
import { useId } from "$lib/hooks/use-id";
|
||||
|
||||
export let unmount = true;
|
||||
export let enter = "";
|
||||
export let enterFrom = "";
|
||||
export let enterTo = "";
|
||||
export let entered = "";
|
||||
export let leave = "";
|
||||
export let leaveFrom = "";
|
||||
export let leaveTo = "";
|
||||
export let unmount = true;
|
||||
export let enter = "";
|
||||
export let enterFrom = "";
|
||||
export let enterTo = "";
|
||||
export let entered = "";
|
||||
export let leave = "";
|
||||
export let leaveFrom = "";
|
||||
export let leaveTo = "";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let container: HTMLElement | null = null;
|
||||
let state = TreeStates.Visible;
|
||||
let container: HTMLElement | null = null;
|
||||
let state = TreeStates.Visible;
|
||||
|
||||
let transitionContext = useTransitionContext();
|
||||
let nestingContext = useParentNesting();
|
||||
let transitionContext = useTransitionContext();
|
||||
let nestingContext = useParentNesting();
|
||||
|
||||
let initial = true;
|
||||
let initial = true;
|
||||
|
||||
let id = useId();
|
||||
let id = useId();
|
||||
|
||||
let isTransitioning = false;
|
||||
let isTransitioning = false;
|
||||
|
||||
let nesting: Writable<NestingContextValues> = writable();
|
||||
nesting.set(
|
||||
useNesting(() => {
|
||||
// When all children have been unmounted we can only hide ourselves if and only if we are not
|
||||
// transitioning ourselves. Otherwise we would unmount before the transitions are finished.
|
||||
if (!isTransitioning) {
|
||||
state = TreeStates.Hidden;
|
||||
$nestingContext.unregister(id);
|
||||
dispatch("afterLeave");
|
||||
let nesting: Writable<NestingContextValues> = writable();
|
||||
nesting.set(
|
||||
useNesting(() => {
|
||||
// When all children have been unmounted we can only hide ourselves if and only if we are not
|
||||
// transitioning ourselves. Otherwise we would unmount before the transitions are finished.
|
||||
if (!isTransitioning) {
|
||||
state = TreeStates.Hidden;
|
||||
$nestingContext.unregister(id);
|
||||
dispatch("afterLeave");
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
onMount(() => $nestingContext.register(id));
|
||||
|
||||
$: {
|
||||
(() => {
|
||||
// If we are in another mode than the Hidden mode then ignore
|
||||
/* if (strategy.value !== RenderStrategy.Hidden) return */
|
||||
if (!id) return;
|
||||
|
||||
// Make sure that we are visible
|
||||
if ($transitionContext.show && state !== TreeStates.Visible) {
|
||||
state = TreeStates.Visible;
|
||||
return;
|
||||
}
|
||||
|
||||
match(state, {
|
||||
[TreeStates.Hidden]: () => $nestingContext.unregister(id),
|
||||
[TreeStates.Visible]: () => $nestingContext.register(id),
|
||||
});
|
||||
})();
|
||||
}
|
||||
|
||||
function splitClasses(classes: string = "") {
|
||||
return classes
|
||||
.split(" ")
|
||||
.filter((className) => className.trim().length > 1);
|
||||
}
|
||||
|
||||
let enterClasses = splitClasses(enter);
|
||||
let enterFromClasses = splitClasses(enterFrom);
|
||||
let enterToClasses = splitClasses(enterTo);
|
||||
|
||||
let enteredClasses = splitClasses(entered);
|
||||
|
||||
let leaveClasses = splitClasses(leave);
|
||||
let leaveFromClasses = splitClasses(leaveFrom);
|
||||
let leaveToClasses = splitClasses(leaveTo);
|
||||
|
||||
let mounted = false;
|
||||
onMount(() => (mounted = true));
|
||||
|
||||
function executeTransition(show: boolean, appear: boolean) {
|
||||
// Skipping initial transition
|
||||
let skip = initial && !appear;
|
||||
|
||||
let node = container;
|
||||
if (!node || !(node instanceof HTMLElement)) return;
|
||||
if (skip) return;
|
||||
|
||||
isTransitioning = true;
|
||||
|
||||
if (show) dispatch("beforeEnter");
|
||||
if (!show) dispatch("beforeLeave");
|
||||
|
||||
return show
|
||||
? transition(
|
||||
node,
|
||||
enterClasses,
|
||||
enterFromClasses,
|
||||
enterToClasses,
|
||||
enteredClasses,
|
||||
(reason) => {
|
||||
isTransitioning = false;
|
||||
if (reason === Reason.Finished) dispatch("afterEnter");
|
||||
}
|
||||
)
|
||||
: transition(
|
||||
node,
|
||||
leaveClasses,
|
||||
leaveFromClasses,
|
||||
leaveToClasses,
|
||||
enteredClasses,
|
||||
(reason) => {
|
||||
isTransitioning = false;
|
||||
|
||||
if (reason !== Reason.Finished) return;
|
||||
|
||||
// When we don't have children anymore we can safely unregister from the parent and hide
|
||||
// ourselves.
|
||||
if (!hasChildren($nesting)) {
|
||||
state = TreeStates.Hidden;
|
||||
$nestingContext.unregister(id);
|
||||
dispatch("afterLeave");
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
onMount(() => $nestingContext.register(id));
|
||||
|
||||
$: {
|
||||
(() => {
|
||||
// If we are in another mode than the Hidden mode then ignore
|
||||
/* if (strategy.value !== RenderStrategy.Hidden) return */
|
||||
if (!id) return;
|
||||
|
||||
// Make sure that we are visible
|
||||
if ($transitionContext.show && state !== TreeStates.Visible) {
|
||||
state = TreeStates.Visible;
|
||||
return;
|
||||
}
|
||||
|
||||
match(state, {
|
||||
[TreeStates.Hidden]: () => $nestingContext.unregister(id),
|
||||
[TreeStates.Visible]: () => $nestingContext.register(id),
|
||||
});
|
||||
})();
|
||||
}
|
||||
|
||||
function splitClasses(classes: string = "") {
|
||||
return classes
|
||||
.split(" ")
|
||||
.filter((className) => className.trim().length > 1);
|
||||
}
|
||||
|
||||
let enterClasses = splitClasses(enter);
|
||||
let enterFromClasses = splitClasses(enterFrom);
|
||||
let enterToClasses = splitClasses(enterTo);
|
||||
|
||||
let enteredClasses = splitClasses(entered);
|
||||
|
||||
let leaveClasses = splitClasses(leave);
|
||||
let leaveFromClasses = splitClasses(leaveFrom);
|
||||
let leaveToClasses = splitClasses(leaveTo);
|
||||
|
||||
let mounted = false;
|
||||
onMount(() => (mounted = true));
|
||||
|
||||
function executeTransition(show: boolean, appear: boolean) {
|
||||
// Skipping initial transition
|
||||
let skip = initial && !appear;
|
||||
|
||||
let node = container;
|
||||
if (!node || !(node instanceof HTMLElement)) return;
|
||||
if (skip) return;
|
||||
|
||||
isTransitioning = true;
|
||||
|
||||
if (show) dispatch("beforeEnter");
|
||||
if (!show) dispatch("beforeLeave");
|
||||
|
||||
return show
|
||||
? transition(
|
||||
node,
|
||||
enterClasses,
|
||||
enterFromClasses,
|
||||
enterToClasses,
|
||||
enteredClasses,
|
||||
(reason) => {
|
||||
isTransitioning = false;
|
||||
if (reason === Reason.Finished) dispatch("afterEnter");
|
||||
}
|
||||
)
|
||||
: transition(
|
||||
node,
|
||||
leaveClasses,
|
||||
leaveFromClasses,
|
||||
leaveToClasses,
|
||||
enteredClasses,
|
||||
(reason) => {
|
||||
isTransitioning = false;
|
||||
|
||||
if (reason !== Reason.Finished) return;
|
||||
|
||||
// When we don't have children anymore we can safely unregister from the parent and hide
|
||||
// ourselves.
|
||||
if (!hasChildren($nesting)) {
|
||||
state = TreeStates.Hidden;
|
||||
$nestingContext.unregister(id);
|
||||
dispatch("afterLeave");
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
let _cleanup = null;
|
||||
$: if (mounted) {
|
||||
if (_cleanup) {
|
||||
_cleanup();
|
||||
}
|
||||
_cleanup = executeTransition(
|
||||
$transitionContext.show,
|
||||
$transitionContext.appear
|
||||
}
|
||||
);
|
||||
initial = false;
|
||||
}
|
||||
|
||||
let _cleanup = null;
|
||||
$: if (mounted) {
|
||||
if (_cleanup) {
|
||||
_cleanup();
|
||||
}
|
||||
|
||||
setContext(NESTING_CONTEXT_NAME, nesting);
|
||||
let openClosedState: Writable<State> | undefined = writable();
|
||||
setContext("OpenClosed", openClosedState);
|
||||
|
||||
$: openClosedState.set(
|
||||
match(state, {
|
||||
[TreeStates.Visible]: State.Open,
|
||||
[TreeStates.Hidden]: State.Closed,
|
||||
})
|
||||
_cleanup = executeTransition(
|
||||
$transitionContext.show,
|
||||
$transitionContext.appear
|
||||
);
|
||||
initial = false;
|
||||
}
|
||||
|
||||
setContext(NESTING_CONTEXT_NAME, nesting);
|
||||
let openClosedState: Writable<State> | undefined = writable();
|
||||
setContext("OpenClosed", openClosedState);
|
||||
|
||||
$: openClosedState.set(
|
||||
match(state, {
|
||||
[TreeStates.Visible]: State.Open,
|
||||
[TreeStates.Hidden]: State.Closed,
|
||||
})
|
||||
);
|
||||
</script>
|
||||
|
||||
<div bind:this={container} {...$$restProps}>
|
||||
<slot />
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@@ -1,177 +1,173 @@
|
||||
<script lang="ts" context="module">
|
||||
export enum TreeStates {
|
||||
Visible = "visible",
|
||||
Hidden = "hidden",
|
||||
export enum TreeStates {
|
||||
Visible = "visible",
|
||||
Hidden = "hidden",
|
||||
}
|
||||
|
||||
type ID = ReturnType<typeof useId>;
|
||||
|
||||
export interface NestingContextValues {
|
||||
children: { id: ID; state: TreeStates }[];
|
||||
register: (id: ID) => () => void;
|
||||
unregister: (id: ID, strategy?: RenderStrategy) => void;
|
||||
}
|
||||
|
||||
interface TransitionContextValues {
|
||||
show: boolean;
|
||||
appear: boolean;
|
||||
}
|
||||
|
||||
const TRANSITION_CONTEXT_NAME = "TransitionContext";
|
||||
export const NESTING_CONTEXT_NAME = "NestingContext";
|
||||
export function hasTransitionContext() {
|
||||
return getContext(TRANSITION_CONTEXT_NAME) !== undefined;
|
||||
}
|
||||
export function useTransitionContext(): Writable<TransitionContextValues> {
|
||||
let context = getContext(TRANSITION_CONTEXT_NAME) as
|
||||
| Writable<TransitionContextValues>
|
||||
| undefined;
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
"A <TransitionChild /> is used but it is missing a parent <TransitionRoot />."
|
||||
);
|
||||
}
|
||||
|
||||
type ID = ReturnType<typeof useId>;
|
||||
return context;
|
||||
}
|
||||
|
||||
export interface NestingContextValues {
|
||||
children: { id: ID; state: TreeStates }[];
|
||||
register: (id: ID) => () => void;
|
||||
unregister: (id: ID, strategy?: RenderStrategy) => void;
|
||||
export function useParentNesting(): Writable<NestingContextValues> {
|
||||
let context = getContext(NESTING_CONTEXT_NAME) as
|
||||
| Writable<NestingContextValues>
|
||||
| undefined;
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
"A <TransitionChild /> is used but it is missing a parent <TransitionRoot />."
|
||||
);
|
||||
}
|
||||
|
||||
interface TransitionContextValues {
|
||||
show: boolean;
|
||||
appear: boolean;
|
||||
return context;
|
||||
}
|
||||
|
||||
export function hasChildren(
|
||||
bag:
|
||||
| NestingContextValues["children"]
|
||||
| { children: NestingContextValues["children"] }
|
||||
): boolean {
|
||||
if ("children" in bag) return hasChildren(bag.children);
|
||||
return bag.filter(({ state }) => state === TreeStates.Visible).length > 0;
|
||||
}
|
||||
|
||||
export function useNesting(done?: () => void) {
|
||||
let transitionableChildren: NestingContextValues["children"] = [];
|
||||
|
||||
let mounted = false;
|
||||
onMount(() => (mounted = true));
|
||||
onDestroy(() => (mounted = false));
|
||||
|
||||
function unregister(childId: ID, strategy = RenderStrategy.Hidden) {
|
||||
let idx = transitionableChildren.findIndex(({ id }) => id === childId);
|
||||
if (idx === -1) return;
|
||||
|
||||
match(strategy, {
|
||||
[RenderStrategy.Unmount]() {
|
||||
transitionableChildren.splice(idx, 1);
|
||||
},
|
||||
[RenderStrategy.Hidden]() {
|
||||
transitionableChildren[idx].state = TreeStates.Hidden;
|
||||
},
|
||||
});
|
||||
|
||||
if (!hasChildren(transitionableChildren) && mounted) {
|
||||
done?.();
|
||||
}
|
||||
}
|
||||
|
||||
const TRANSITION_CONTEXT_NAME = "TransitionContext";
|
||||
export const NESTING_CONTEXT_NAME = "NestingContext";
|
||||
export function hasTransitionContext() {
|
||||
return getContext(TRANSITION_CONTEXT_NAME) !== undefined;
|
||||
}
|
||||
export function useTransitionContext(): Writable<TransitionContextValues> {
|
||||
let context = getContext(TRANSITION_CONTEXT_NAME) as
|
||||
| Writable<TransitionContextValues>
|
||||
| undefined;
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
"A <TransitionChild /> is used but it is missing a parent <TransitionRoot />."
|
||||
);
|
||||
}
|
||||
function register(childId: ID) {
|
||||
let child = transitionableChildren.find(({ id }) => id === childId);
|
||||
if (!child) {
|
||||
transitionableChildren.push({
|
||||
id: childId,
|
||||
state: TreeStates.Visible,
|
||||
});
|
||||
} else if (child.state !== TreeStates.Visible) {
|
||||
child.state = TreeStates.Visible;
|
||||
}
|
||||
|
||||
return context;
|
||||
return () => unregister(childId, RenderStrategy.Unmount);
|
||||
}
|
||||
|
||||
export function useParentNesting(): Writable<NestingContextValues> {
|
||||
let context = getContext(NESTING_CONTEXT_NAME) as
|
||||
| Writable<NestingContextValues>
|
||||
| undefined;
|
||||
if (context === undefined) {
|
||||
throw new Error(
|
||||
"A <TransitionChild /> is used but it is missing a parent <TransitionRoot />."
|
||||
);
|
||||
}
|
||||
|
||||
return context;
|
||||
}
|
||||
|
||||
export function hasChildren(
|
||||
bag:
|
||||
| NestingContextValues["children"]
|
||||
| { children: NestingContextValues["children"] }
|
||||
): boolean {
|
||||
if ("children" in bag) return hasChildren(bag.children);
|
||||
return (
|
||||
bag.filter(({ state }) => state === TreeStates.Visible).length > 0
|
||||
);
|
||||
}
|
||||
|
||||
export function useNesting(done?: () => void) {
|
||||
let transitionableChildren: NestingContextValues["children"] = [];
|
||||
|
||||
let mounted = false;
|
||||
onMount(() => (mounted = true));
|
||||
onDestroy(() => (mounted = false));
|
||||
|
||||
function unregister(childId: ID, strategy = RenderStrategy.Hidden) {
|
||||
let idx = transitionableChildren.findIndex(
|
||||
({ id }) => id === childId
|
||||
);
|
||||
if (idx === -1) return;
|
||||
|
||||
match(strategy, {
|
||||
[RenderStrategy.Unmount]() {
|
||||
transitionableChildren.splice(idx, 1);
|
||||
},
|
||||
[RenderStrategy.Hidden]() {
|
||||
transitionableChildren[idx].state = TreeStates.Hidden;
|
||||
},
|
||||
});
|
||||
|
||||
if (!hasChildren(transitionableChildren) && mounted) {
|
||||
done?.();
|
||||
}
|
||||
}
|
||||
|
||||
function register(childId: ID) {
|
||||
let child = transitionableChildren.find(({ id }) => id === childId);
|
||||
if (!child) {
|
||||
transitionableChildren.push({
|
||||
id: childId,
|
||||
state: TreeStates.Visible,
|
||||
});
|
||||
} else if (child.state !== TreeStates.Visible) {
|
||||
child.state = TreeStates.Visible;
|
||||
}
|
||||
|
||||
return () => unregister(childId, RenderStrategy.Unmount);
|
||||
}
|
||||
|
||||
return {
|
||||
children: transitionableChildren,
|
||||
register,
|
||||
unregister,
|
||||
};
|
||||
}
|
||||
return {
|
||||
children: transitionableChildren,
|
||||
register,
|
||||
unregister,
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { getContext, onDestroy, onMount, setContext } from "svelte";
|
||||
import { getContext, onDestroy, onMount, setContext } from "svelte";
|
||||
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { match } from "./match";
|
||||
import { State } from "./open-closed";
|
||||
import { RenderStrategy } from "./Render.svelte";
|
||||
import TransitionChild from "./TransitionChild.svelte";
|
||||
import type { useId } from "./use-id";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
import { match } from "$lib/utils/match";
|
||||
import { State } from "$lib/internal/open-closed";
|
||||
import { RenderStrategy } from "$lib/utils/Render.svelte";
|
||||
import TransitionChild from "./TransitionChild.svelte";
|
||||
import type { useId } from "$lib/hooks/use-id";
|
||||
|
||||
export let show: boolean;
|
||||
export let unmount = true;
|
||||
export let appear = false;
|
||||
export let show: boolean;
|
||||
export let unmount = true;
|
||||
export let appear = false;
|
||||
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
let openClosedState: Writable<State> | undefined = getContext("OpenClosed");
|
||||
|
||||
$: shouldShow = (() => {
|
||||
if (show === null && openClosedState !== undefined) {
|
||||
return match($openClosedState, {
|
||||
[State.Open]: true,
|
||||
[State.Closed]: false,
|
||||
});
|
||||
}
|
||||
|
||||
return show;
|
||||
})();
|
||||
|
||||
$: if (shouldShow !== true && shouldShow !== false) {
|
||||
throw new Error(
|
||||
"A <Transition /> is used but it is missing a `show={true | false}` prop."
|
||||
);
|
||||
$: shouldShow = (() => {
|
||||
if (show === null && openClosedState !== undefined) {
|
||||
return match($openClosedState, {
|
||||
[State.Open]: true,
|
||||
[State.Closed]: false,
|
||||
});
|
||||
}
|
||||
$: state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
|
||||
|
||||
let nestingBag: Writable<NestingContextValues> = writable();
|
||||
nestingBag.set(
|
||||
useNesting(() => {
|
||||
state = TreeStates.Hidden;
|
||||
})
|
||||
return show;
|
||||
})();
|
||||
|
||||
$: if (shouldShow !== true && shouldShow !== false) {
|
||||
throw new Error(
|
||||
"A <Transition /> is used but it is missing a `show={true | false}` prop."
|
||||
);
|
||||
}
|
||||
$: state = shouldShow ? TreeStates.Visible : TreeStates.Hidden;
|
||||
|
||||
let initial = true;
|
||||
let transitionBag: Writable<TransitionContextValues> = writable();
|
||||
$: transitionBag.set({
|
||||
show: shouldShow,
|
||||
appear: appear || !initial,
|
||||
});
|
||||
let nestingBag: Writable<NestingContextValues> = writable();
|
||||
nestingBag.set(
|
||||
useNesting(() => {
|
||||
state = TreeStates.Hidden;
|
||||
})
|
||||
);
|
||||
|
||||
onMount(() => {
|
||||
initial = false;
|
||||
});
|
||||
let initial = true;
|
||||
let transitionBag: Writable<TransitionContextValues> = writable();
|
||||
$: transitionBag.set({
|
||||
show: shouldShow,
|
||||
appear: appear || !initial,
|
||||
});
|
||||
|
||||
$: if (!initial) {
|
||||
if (shouldShow) {
|
||||
state = TreeStates.Visible;
|
||||
} else if (!hasChildren($nestingBag)) {
|
||||
state = TreeStates.Hidden;
|
||||
}
|
||||
onMount(() => {
|
||||
initial = false;
|
||||
});
|
||||
|
||||
$: if (!initial) {
|
||||
if (shouldShow) {
|
||||
state = TreeStates.Visible;
|
||||
} else if (!hasChildren($nestingBag)) {
|
||||
state = TreeStates.Hidden;
|
||||
}
|
||||
}
|
||||
|
||||
setContext(NESTING_CONTEXT_NAME, nestingBag);
|
||||
setContext(TRANSITION_CONTEXT_NAME, transitionBag);
|
||||
setContext(NESTING_CONTEXT_NAME, nestingBag);
|
||||
setContext(TRANSITION_CONTEXT_NAME, transitionBag);
|
||||
</script>
|
||||
|
||||
<TransitionChild {...$$restProps} {unmount}>
|
||||
<slot />
|
||||
<slot />
|
||||
</TransitionChild>
|
||||
|
||||
Reference in New Issue
Block a user