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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export function useEffect(fn, ...args) {
|
||||
if (fn.__cleanup) {
|
||||
fn.__cleanup();
|
||||
}
|
||||
fn.__cleanup = fn(...args);
|
||||
if (fn.__cleanup) {
|
||||
fn.__cleanup();
|
||||
}
|
||||
fn.__cleanup = fn(...args);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
let id = 0
|
||||
let id = 0;
|
||||
function generateId() {
|
||||
return ++id
|
||||
return ++id;
|
||||
}
|
||||
|
||||
export function useId() {
|
||||
return generateId()
|
||||
return generateId();
|
||||
}
|
||||
|
||||
@@ -1,100 +1,103 @@
|
||||
let interactables = new Set<HTMLElement>()
|
||||
let originals = new Map<HTMLElement, { 'aria-hidden': string | null; inert: boolean }>()
|
||||
let interactables = new Set<HTMLElement>();
|
||||
let originals = new Map<
|
||||
HTMLElement,
|
||||
{ "aria-hidden": string | null; inert: boolean }
|
||||
>();
|
||||
|
||||
function inert(element: HTMLElement) {
|
||||
element.setAttribute('aria-hidden', 'true')
|
||||
// @ts-expect-error `inert` does not exist on HTMLElement (yet!)
|
||||
element.inert = true
|
||||
element.setAttribute("aria-hidden", "true");
|
||||
// @ts-expect-error `inert` does not exist on HTMLElement (yet!)
|
||||
element.inert = true;
|
||||
}
|
||||
|
||||
function restore(element: HTMLElement) {
|
||||
let original = originals.get(element)
|
||||
if (!original) return
|
||||
let original = originals.get(element);
|
||||
if (!original) return;
|
||||
|
||||
if (original['aria-hidden'] === null) element.removeAttribute('aria-hidden')
|
||||
else element.setAttribute('aria-hidden', original['aria-hidden'])
|
||||
// @ts-expect-error `inert` does not exist on HTMLElement (yet!)
|
||||
element.inert = original.inert
|
||||
if (original["aria-hidden"] === null) element.removeAttribute("aria-hidden");
|
||||
else element.setAttribute("aria-hidden", original["aria-hidden"]);
|
||||
// @ts-expect-error `inert` does not exist on HTMLElement (yet!)
|
||||
element.inert = original.inert;
|
||||
}
|
||||
|
||||
export function useInertOthers<TElement extends HTMLElement>(
|
||||
container: TElement | null,
|
||||
enabled: boolean = true
|
||||
container: TElement | null,
|
||||
enabled: boolean = true
|
||||
) {
|
||||
if (!enabled) return
|
||||
if (!container) return
|
||||
if (!enabled) return;
|
||||
if (!container) return;
|
||||
|
||||
let element = container
|
||||
let element = container;
|
||||
|
||||
// Mark myself as an interactable element
|
||||
interactables.add(element)
|
||||
// Mark myself as an interactable element
|
||||
interactables.add(element);
|
||||
|
||||
// Restore elements that now contain an interactable child
|
||||
for (let original of originals.keys()) {
|
||||
if (original.contains(element)) {
|
||||
restore(original)
|
||||
originals.delete(original)
|
||||
}
|
||||
// Restore elements that now contain an interactable child
|
||||
for (let original of originals.keys()) {
|
||||
if (original.contains(element)) {
|
||||
restore(original);
|
||||
originals.delete(original);
|
||||
}
|
||||
}
|
||||
|
||||
// Collect direct children of the body
|
||||
document.querySelectorAll("body > *").forEach((child) => {
|
||||
if (!(child instanceof HTMLElement)) return; // Skip non-HTMLElements
|
||||
|
||||
// Skip the interactables, and the parents of the interactables
|
||||
for (let interactable of interactables) {
|
||||
if (child.contains(interactable)) return;
|
||||
}
|
||||
|
||||
// Collect direct children of the body
|
||||
document.querySelectorAll('body > *').forEach(child => {
|
||||
if (!(child instanceof HTMLElement)) return // Skip non-HTMLElements
|
||||
// Keep track of the elements
|
||||
if (interactables.size === 1) {
|
||||
originals.set(child, {
|
||||
"aria-hidden": child.getAttribute("aria-hidden"),
|
||||
// @ts-expect-error `inert` does not exist on HTMLElement (yet!)
|
||||
inert: child.inert,
|
||||
});
|
||||
|
||||
// Mutate the element
|
||||
inert(child);
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
// Inert is disabled on the current element
|
||||
interactables.delete(element);
|
||||
|
||||
// We still have interactable elements, therefore this one and its parent
|
||||
// will become inert as well.
|
||||
if (interactables.size > 0) {
|
||||
// Collect direct children of the body
|
||||
document.querySelectorAll("body > *").forEach((child) => {
|
||||
if (!(child instanceof HTMLElement)) return; // Skip non-HTMLElements
|
||||
|
||||
// Skip already inert parents
|
||||
if (originals.has(child)) return;
|
||||
|
||||
// Skip the interactables, and the parents of the interactables
|
||||
for (let interactable of interactables) {
|
||||
if (child.contains(interactable)) return
|
||||
if (child.contains(interactable)) return;
|
||||
}
|
||||
|
||||
// Keep track of the elements
|
||||
if (interactables.size === 1) {
|
||||
originals.set(child, {
|
||||
'aria-hidden': child.getAttribute('aria-hidden'),
|
||||
// @ts-expect-error `inert` does not exist on HTMLElement (yet!)
|
||||
inert: child.inert,
|
||||
})
|
||||
originals.set(child, {
|
||||
"aria-hidden": child.getAttribute("aria-hidden"),
|
||||
// @ts-expect-error `inert` does not exist on HTMLElement (yet!)
|
||||
inert: child.inert,
|
||||
});
|
||||
|
||||
// Mutate the element
|
||||
inert(child)
|
||||
}
|
||||
})
|
||||
// Mutate the element
|
||||
inert(child);
|
||||
});
|
||||
} else {
|
||||
for (let element of originals.keys()) {
|
||||
// Restore
|
||||
restore(element);
|
||||
|
||||
return () => {
|
||||
// Inert is disabled on the current element
|
||||
interactables.delete(element)
|
||||
|
||||
// We still have interactable elements, therefore this one and its parent
|
||||
// will become inert as well.
|
||||
if (interactables.size > 0) {
|
||||
// Collect direct children of the body
|
||||
document.querySelectorAll('body > *').forEach(child => {
|
||||
if (!(child instanceof HTMLElement)) return // Skip non-HTMLElements
|
||||
|
||||
// Skip already inert parents
|
||||
if (originals.has(child)) return
|
||||
|
||||
// Skip the interactables, and the parents of the interactables
|
||||
for (let interactable of interactables) {
|
||||
if (child.contains(interactable)) return
|
||||
}
|
||||
|
||||
originals.set(child, {
|
||||
'aria-hidden': child.getAttribute('aria-hidden'),
|
||||
// @ts-expect-error `inert` does not exist on HTMLElement (yet!)
|
||||
inert: child.inert,
|
||||
})
|
||||
|
||||
// Mutate the element
|
||||
inert(child)
|
||||
})
|
||||
} else {
|
||||
for (let element of originals.keys()) {
|
||||
// Restore
|
||||
restore(element)
|
||||
|
||||
// Cleanup
|
||||
originals.delete(element)
|
||||
}
|
||||
}
|
||||
// Cleanup
|
||||
originals.delete(element);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
export function portal(element: HTMLElement, target: HTMLElement) {
|
||||
target.append(element);
|
||||
return {
|
||||
update(newTarget: HTMLElement) {
|
||||
target = newTarget;
|
||||
newTarget.append(element);
|
||||
},
|
||||
destroy() {
|
||||
if (target.childNodes.length <= 0) {
|
||||
target.parentElement?.removeChild(target);
|
||||
}
|
||||
},
|
||||
}
|
||||
target.append(element);
|
||||
return {
|
||||
update(newTarget: HTMLElement) {
|
||||
target = newTarget;
|
||||
newTarget.append(element);
|
||||
},
|
||||
destroy() {
|
||||
if (target.childNodes.length <= 0) {
|
||||
target.parentElement?.removeChild(target);
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,28 +1,35 @@
|
||||
type AcceptNode = (
|
||||
node: HTMLElement
|
||||
node: HTMLElement
|
||||
) =>
|
||||
| typeof NodeFilter.FILTER_ACCEPT
|
||||
| typeof NodeFilter.FILTER_SKIP
|
||||
| typeof NodeFilter.FILTER_REJECT
|
||||
| typeof NodeFilter.FILTER_ACCEPT
|
||||
| typeof NodeFilter.FILTER_SKIP
|
||||
| typeof NodeFilter.FILTER_REJECT;
|
||||
|
||||
export function treeWalker({
|
||||
container,
|
||||
accept,
|
||||
walk,
|
||||
enabled,
|
||||
container,
|
||||
accept,
|
||||
walk,
|
||||
enabled,
|
||||
}: {
|
||||
container: HTMLElement | null
|
||||
accept: AcceptNode
|
||||
walk(node: HTMLElement): void
|
||||
enabled?: boolean
|
||||
container: HTMLElement | null;
|
||||
accept: AcceptNode;
|
||||
walk(node: HTMLElement): void;
|
||||
enabled?: boolean;
|
||||
}) {
|
||||
let root = container
|
||||
if (!root) return
|
||||
if (enabled !== undefined && !enabled) return
|
||||
let root = container;
|
||||
if (!root) return;
|
||||
if (enabled !== undefined && !enabled) return;
|
||||
|
||||
let acceptNode = Object.assign((node: HTMLElement) => accept(node), { acceptNode: accept })
|
||||
// @ts-ignore-error Typescript bug thinks this can only have 3 args
|
||||
let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, acceptNode, false)
|
||||
let acceptNode = Object.assign((node: HTMLElement) => accept(node), {
|
||||
acceptNode: accept,
|
||||
});
|
||||
// @ts-ignore-error Typescript bug thinks this can only have 3 args
|
||||
let walker = document.createTreeWalker(
|
||||
root,
|
||||
NodeFilter.SHOW_ELEMENT,
|
||||
acceptNode,
|
||||
false
|
||||
);
|
||||
|
||||
while (walker.nextNode()) walk(walker.currentNode as HTMLElement)
|
||||
while (walker.nextNode()) walk(walker.currentNode as HTMLElement);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
<script lang="ts" context="module">
|
||||
import { getContext, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
const FORCE_PORTAL_ROOT_CONTEXT_NAME =
|
||||
"headlessui-force-portal-root-context";
|
||||
import { getContext, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
const FORCE_PORTAL_ROOT_CONTEXT_NAME = "headlessui-force-portal-root-context";
|
||||
|
||||
export function usePortalRoot(): Writable<boolean> | undefined {
|
||||
return getContext(FORCE_PORTAL_ROOT_CONTEXT_NAME);
|
||||
}
|
||||
export function usePortalRoot(): Writable<boolean> | undefined {
|
||||
return getContext(FORCE_PORTAL_ROOT_CONTEXT_NAME);
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export let force: boolean;
|
||||
setContext(FORCE_PORTAL_ROOT_CONTEXT_NAME, writable(force));
|
||||
export let force: boolean;
|
||||
setContext(FORCE_PORTAL_ROOT_CONTEXT_NAME, writable(force));
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
|
||||
@@ -1,42 +1,39 @@
|
||||
<script lang="ts" context="module">
|
||||
export enum StackMessage {
|
||||
Add,
|
||||
Remove,
|
||||
}
|
||||
export enum StackMessage {
|
||||
Add,
|
||||
Remove,
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { getContext, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
type OnUpdate = (
|
||||
message: StackMessage,
|
||||
element: HTMLElement | null
|
||||
) => void;
|
||||
import { getContext, setContext } from "svelte";
|
||||
import { writable, Writable } from "svelte/store";
|
||||
type OnUpdate = (message: StackMessage, element: HTMLElement | null) => void;
|
||||
|
||||
export let onUpdate: OnUpdate | undefined;
|
||||
export let element: HTMLElement | null;
|
||||
export let onUpdate: OnUpdate | undefined;
|
||||
export let element: HTMLElement | null;
|
||||
|
||||
let parentUpdateStore: Writable<OnUpdate> | undefined =
|
||||
getContext("StackContext");
|
||||
let notifyStore: Writable<OnUpdate> = writable(() => {});
|
||||
setContext("StackContext", notifyStore);
|
||||
let parentUpdateStore: Writable<OnUpdate> | undefined =
|
||||
getContext("StackContext");
|
||||
let notifyStore: Writable<OnUpdate> = writable(() => {});
|
||||
setContext("StackContext", notifyStore);
|
||||
|
||||
$: notifyStore.set((...args: Parameters<OnUpdate>) => {
|
||||
// Notify our layer
|
||||
onUpdate?.(...args);
|
||||
$: notifyStore.set((...args: Parameters<OnUpdate>) => {
|
||||
// Notify our layer
|
||||
onUpdate?.(...args);
|
||||
|
||||
// Notify the parent
|
||||
$parentUpdateStore?.(...args);
|
||||
});
|
||||
// Notify the parent
|
||||
$parentUpdateStore?.(...args);
|
||||
});
|
||||
|
||||
$: _cleanup = (() => {
|
||||
if (_cleanup) {
|
||||
_cleanup();
|
||||
}
|
||||
if (!element) return null;
|
||||
$notifyStore(StackMessage.Add, element);
|
||||
return () => $notifyStore(StackMessage.Remove, element);
|
||||
})();
|
||||
$: _cleanup = (() => {
|
||||
if (_cleanup) {
|
||||
_cleanup();
|
||||
}
|
||||
if (!element) return null;
|
||||
$notifyStore(StackMessage.Add, element);
|
||||
return () => $notifyStore(StackMessage.Remove, element);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export function contains(containers: Set<HTMLElement>, element: HTMLElement) {
|
||||
for (let container of containers) {
|
||||
if (container.contains(element)) return true
|
||||
}
|
||||
for (let container of containers) {
|
||||
if (container.contains(element)) return true;
|
||||
}
|
||||
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -2,20 +2,19 @@ import { getContext, setContext } from "svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
export enum State {
|
||||
Open,
|
||||
Closed,
|
||||
Open,
|
||||
Closed,
|
||||
}
|
||||
|
||||
const OPEN_CLOSED_CONTEXT_NAME = "OpenClosed";
|
||||
export function hasOpenClosed() {
|
||||
return useOpenClosed() !== undefined
|
||||
return useOpenClosed() !== undefined;
|
||||
}
|
||||
|
||||
export function useOpenClosed(): Writable<State> | undefined {
|
||||
return getContext(OPEN_CLOSED_CONTEXT_NAME);
|
||||
return getContext(OPEN_CLOSED_CONTEXT_NAME);
|
||||
}
|
||||
|
||||
export function useOpenClosedProvider(value: Writable<State>) {
|
||||
setContext(OPEN_CLOSED_CONTEXT_NAME, value);
|
||||
setContext(OPEN_CLOSED_CONTEXT_NAME, value);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts" context="module">
|
||||
export enum RenderStrategy {
|
||||
Unmount,
|
||||
Hidden,
|
||||
}
|
||||
export enum RenderStrategy {
|
||||
Unmount,
|
||||
Hidden,
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,84 +1,89 @@
|
||||
function assertNever(x: never): never {
|
||||
throw new Error('Unexpected object: ' + x)
|
||||
throw new Error("Unexpected object: " + x);
|
||||
}
|
||||
|
||||
export enum Focus {
|
||||
/** Focus the first non-disabled item. */
|
||||
First,
|
||||
/** Focus the first non-disabled item. */
|
||||
First,
|
||||
|
||||
/** Focus the previous non-disabled item. */
|
||||
Previous,
|
||||
/** Focus the previous non-disabled item. */
|
||||
Previous,
|
||||
|
||||
/** Focus the next non-disabled item. */
|
||||
Next,
|
||||
/** Focus the next non-disabled item. */
|
||||
Next,
|
||||
|
||||
/** Focus the last non-disabled item. */
|
||||
Last,
|
||||
/** Focus the last non-disabled item. */
|
||||
Last,
|
||||
|
||||
/** Focus a specific item based on the `id` of the item. */
|
||||
Specific,
|
||||
/** Focus a specific item based on the `id` of the item. */
|
||||
Specific,
|
||||
|
||||
/** Focus no items at all. */
|
||||
Nothing,
|
||||
/** Focus no items at all. */
|
||||
Nothing,
|
||||
}
|
||||
|
||||
export function calculateActiveIndex<TItem>(
|
||||
action: { focus: Focus.Specific; id: string } | { focus: Exclude<Focus, Focus.Specific> },
|
||||
resolvers: {
|
||||
resolveItems(): TItem[]
|
||||
resolveActiveIndex(): number | null
|
||||
resolveId(item: TItem): string
|
||||
resolveDisabled(item: TItem): boolean
|
||||
}
|
||||
action:
|
||||
| { focus: Focus.Specific; id: string }
|
||||
| { focus: Exclude<Focus, Focus.Specific> },
|
||||
resolvers: {
|
||||
resolveItems(): TItem[];
|
||||
resolveActiveIndex(): number | null;
|
||||
resolveId(item: TItem): string;
|
||||
resolveDisabled(item: TItem): boolean;
|
||||
}
|
||||
) {
|
||||
let items = resolvers.resolveItems()
|
||||
if (items.length <= 0) return null
|
||||
let items = resolvers.resolveItems();
|
||||
if (items.length <= 0) return null;
|
||||
|
||||
let currentActiveIndex = resolvers.resolveActiveIndex()
|
||||
let activeIndex = currentActiveIndex ?? -1
|
||||
let currentActiveIndex = resolvers.resolveActiveIndex();
|
||||
let activeIndex = currentActiveIndex ?? -1;
|
||||
|
||||
let nextActiveIndex = (() => {
|
||||
switch (action.focus) {
|
||||
case Focus.First:
|
||||
return items.findIndex(item => !resolvers.resolveDisabled(item))
|
||||
let nextActiveIndex = (() => {
|
||||
switch (action.focus) {
|
||||
case Focus.First:
|
||||
return items.findIndex((item) => !resolvers.resolveDisabled(item));
|
||||
|
||||
case Focus.Previous: {
|
||||
let idx = items
|
||||
.slice()
|
||||
.reverse()
|
||||
.findIndex((item, idx, all) => {
|
||||
if (activeIndex !== -1 && all.length - idx - 1 >= activeIndex) return false
|
||||
return !resolvers.resolveDisabled(item)
|
||||
})
|
||||
if (idx === -1) return idx
|
||||
return items.length - 1 - idx
|
||||
}
|
||||
case Focus.Previous: {
|
||||
let idx = items
|
||||
.slice()
|
||||
.reverse()
|
||||
.findIndex((item, idx, all) => {
|
||||
if (activeIndex !== -1 && all.length - idx - 1 >= activeIndex)
|
||||
return false;
|
||||
return !resolvers.resolveDisabled(item);
|
||||
});
|
||||
if (idx === -1) return idx;
|
||||
return items.length - 1 - idx;
|
||||
}
|
||||
|
||||
case Focus.Next:
|
||||
return items.findIndex((item, idx) => {
|
||||
if (idx <= activeIndex) return false
|
||||
return !resolvers.resolveDisabled(item)
|
||||
})
|
||||
case Focus.Next:
|
||||
return items.findIndex((item, idx) => {
|
||||
if (idx <= activeIndex) return false;
|
||||
return !resolvers.resolveDisabled(item);
|
||||
});
|
||||
|
||||
case Focus.Last: {
|
||||
let idx = items
|
||||
.slice()
|
||||
.reverse()
|
||||
.findIndex(item => !resolvers.resolveDisabled(item))
|
||||
if (idx === -1) return idx
|
||||
return items.length - 1 - idx
|
||||
}
|
||||
case Focus.Last: {
|
||||
let idx = items
|
||||
.slice()
|
||||
.reverse()
|
||||
.findIndex((item) => !resolvers.resolveDisabled(item));
|
||||
if (idx === -1) return idx;
|
||||
return items.length - 1 - idx;
|
||||
}
|
||||
|
||||
case Focus.Specific:
|
||||
return items.findIndex(item => resolvers.resolveId(item) === action.id)
|
||||
case Focus.Specific:
|
||||
return items.findIndex(
|
||||
(item) => resolvers.resolveId(item) === action.id
|
||||
);
|
||||
|
||||
case Focus.Nothing:
|
||||
return null
|
||||
case Focus.Nothing:
|
||||
return null;
|
||||
|
||||
default:
|
||||
assertNever(action)
|
||||
}
|
||||
})()
|
||||
default:
|
||||
assertNever(action);
|
||||
}
|
||||
})();
|
||||
|
||||
return nextActiveIndex === -1 ? currentActiveIndex : nextActiveIndex
|
||||
return nextActiveIndex === -1 ? currentActiveIndex : nextActiveIndex;
|
||||
}
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
export function disposables() {
|
||||
let disposables: Function[] = []
|
||||
let disposables: Function[] = [];
|
||||
|
||||
let api = {
|
||||
requestAnimationFrame(...args: Parameters<typeof requestAnimationFrame>) {
|
||||
let raf = requestAnimationFrame(...args)
|
||||
api.add(() => cancelAnimationFrame(raf))
|
||||
},
|
||||
let api = {
|
||||
requestAnimationFrame(...args: Parameters<typeof requestAnimationFrame>) {
|
||||
let raf = requestAnimationFrame(...args);
|
||||
api.add(() => cancelAnimationFrame(raf));
|
||||
},
|
||||
|
||||
nextFrame(...args: Parameters<typeof requestAnimationFrame>) {
|
||||
api.requestAnimationFrame(() => {
|
||||
api.requestAnimationFrame(...args)
|
||||
})
|
||||
},
|
||||
nextFrame(...args: Parameters<typeof requestAnimationFrame>) {
|
||||
api.requestAnimationFrame(() => {
|
||||
api.requestAnimationFrame(...args);
|
||||
});
|
||||
},
|
||||
|
||||
setTimeout(...args: Parameters<typeof setTimeout>) {
|
||||
let timer = setTimeout(...args)
|
||||
api.add(() => clearTimeout(timer))
|
||||
},
|
||||
setTimeout(...args: Parameters<typeof setTimeout>) {
|
||||
let timer = setTimeout(...args);
|
||||
api.add(() => clearTimeout(timer));
|
||||
},
|
||||
|
||||
add(cb: () => void) {
|
||||
disposables.push(cb)
|
||||
},
|
||||
add(cb: () => void) {
|
||||
disposables.push(cb);
|
||||
},
|
||||
|
||||
dispose() {
|
||||
for (let dispose of disposables.splice(0)) {
|
||||
dispose()
|
||||
}
|
||||
},
|
||||
}
|
||||
dispose() {
|
||||
for (let dispose of disposables.splice(0)) {
|
||||
dispose();
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return api
|
||||
return api;
|
||||
}
|
||||
|
||||
@@ -1,155 +1,165 @@
|
||||
import { match } from './match'
|
||||
import { match } from "./match";
|
||||
|
||||
// Credit:
|
||||
// - https://stackoverflow.com/a/30753870
|
||||
let focusableSelector = [
|
||||
'[contentEditable=true]',
|
||||
'[tabindex]',
|
||||
'a[href]',
|
||||
'area[href]',
|
||||
'button:not([disabled])',
|
||||
'iframe',
|
||||
'input:not([disabled])',
|
||||
'select:not([disabled])',
|
||||
'textarea:not([disabled])',
|
||||
"[contentEditable=true]",
|
||||
"[tabindex]",
|
||||
"a[href]",
|
||||
"area[href]",
|
||||
"button:not([disabled])",
|
||||
"iframe",
|
||||
"input:not([disabled])",
|
||||
"select:not([disabled])",
|
||||
"textarea:not([disabled])",
|
||||
]
|
||||
.map(
|
||||
process.env.NODE_ENV === 'test'
|
||||
? // TODO: Remove this once JSDOM fixes the issue where an element that is
|
||||
// "hidden" can be the document.activeElement, because this is not possible
|
||||
// in real browsers.
|
||||
selector => `${selector}:not([tabindex='-1']):not([style*='display: none'])`
|
||||
: selector => `${selector}:not([tabindex='-1'])`
|
||||
)
|
||||
.join(',')
|
||||
.map(
|
||||
process.env.NODE_ENV === "test"
|
||||
? // TODO: Remove this once JSDOM fixes the issue where an element that is
|
||||
// "hidden" can be the document.activeElement, because this is not possible
|
||||
// in real browsers.
|
||||
(selector) =>
|
||||
`${selector}:not([tabindex='-1']):not([style*='display: none'])`
|
||||
: (selector) => `${selector}:not([tabindex='-1'])`
|
||||
)
|
||||
.join(",");
|
||||
|
||||
export enum Focus {
|
||||
/** Focus the first non-disabled element */
|
||||
First = 1 << 0,
|
||||
/** Focus the first non-disabled element */
|
||||
First = 1 << 0,
|
||||
|
||||
/** Focus the previous non-disabled element */
|
||||
Previous = 1 << 1,
|
||||
/** Focus the previous non-disabled element */
|
||||
Previous = 1 << 1,
|
||||
|
||||
/** Focus the next non-disabled element */
|
||||
Next = 1 << 2,
|
||||
/** Focus the next non-disabled element */
|
||||
Next = 1 << 2,
|
||||
|
||||
/** Focus the last non-disabled element */
|
||||
Last = 1 << 3,
|
||||
/** Focus the last non-disabled element */
|
||||
Last = 1 << 3,
|
||||
|
||||
/** Wrap tab around */
|
||||
WrapAround = 1 << 4,
|
||||
/** Wrap tab around */
|
||||
WrapAround = 1 << 4,
|
||||
|
||||
/** Prevent scrolling the focusable elements into view */
|
||||
NoScroll = 1 << 5,
|
||||
/** Prevent scrolling the focusable elements into view */
|
||||
NoScroll = 1 << 5,
|
||||
}
|
||||
|
||||
export enum FocusResult {
|
||||
Error,
|
||||
Overflow,
|
||||
Success,
|
||||
Underflow,
|
||||
Error,
|
||||
Overflow,
|
||||
Success,
|
||||
Underflow,
|
||||
}
|
||||
|
||||
enum Direction {
|
||||
Previous = -1,
|
||||
Next = 1,
|
||||
Previous = -1,
|
||||
Next = 1,
|
||||
}
|
||||
|
||||
export function getFocusableElements(container: HTMLElement | null = document.body) {
|
||||
if (container == null) return []
|
||||
return Array.from(container.querySelectorAll<HTMLElement>(focusableSelector))
|
||||
export function getFocusableElements(
|
||||
container: HTMLElement | null = document.body
|
||||
) {
|
||||
if (container == null) return [];
|
||||
return Array.from(container.querySelectorAll<HTMLElement>(focusableSelector));
|
||||
}
|
||||
|
||||
export enum FocusableMode {
|
||||
/** The element itself must be focusable. */
|
||||
Strict,
|
||||
/** The element itself must be focusable. */
|
||||
Strict,
|
||||
|
||||
/** The element should be inside of a focusable element. */
|
||||
Loose,
|
||||
/** The element should be inside of a focusable element. */
|
||||
Loose,
|
||||
}
|
||||
|
||||
export function isFocusableElement(
|
||||
element: HTMLElement,
|
||||
mode: FocusableMode = FocusableMode.Strict
|
||||
element: HTMLElement,
|
||||
mode: FocusableMode = FocusableMode.Strict
|
||||
) {
|
||||
if (element === document.body) return false
|
||||
if (element === document.body) return false;
|
||||
|
||||
return match(mode, {
|
||||
[FocusableMode.Strict]() {
|
||||
return element.matches(focusableSelector)
|
||||
},
|
||||
[FocusableMode.Loose]() {
|
||||
let next: HTMLElement | null = element
|
||||
return match(mode, {
|
||||
[FocusableMode.Strict]() {
|
||||
return element.matches(focusableSelector);
|
||||
},
|
||||
[FocusableMode.Loose]() {
|
||||
let next: HTMLElement | null = element;
|
||||
|
||||
while (next !== null) {
|
||||
if (next.matches(focusableSelector)) return true
|
||||
next = next.parentElement
|
||||
}
|
||||
while (next !== null) {
|
||||
if (next.matches(focusableSelector)) return true;
|
||||
next = next.parentElement;
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
})
|
||||
return false;
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function focusElement(element: HTMLElement | null) {
|
||||
element?.focus({ preventScroll: true })
|
||||
element?.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
export function focusIn(container: HTMLElement | HTMLElement[], focus: Focus) {
|
||||
let elements = Array.isArray(container) ? container : getFocusableElements(container)
|
||||
let active = document.activeElement as HTMLElement
|
||||
let elements = Array.isArray(container)
|
||||
? container
|
||||
: getFocusableElements(container);
|
||||
let active = document.activeElement as HTMLElement;
|
||||
|
||||
let direction = (() => {
|
||||
if (focus & (Focus.First | Focus.Next)) return Direction.Next
|
||||
if (focus & (Focus.Previous | Focus.Last)) return Direction.Previous
|
||||
let direction = (() => {
|
||||
if (focus & (Focus.First | Focus.Next)) return Direction.Next;
|
||||
if (focus & (Focus.Previous | Focus.Last)) return Direction.Previous;
|
||||
|
||||
throw new Error('Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last')
|
||||
})()
|
||||
throw new Error(
|
||||
"Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last"
|
||||
);
|
||||
})();
|
||||
|
||||
let startIndex = (() => {
|
||||
if (focus & Focus.First) return 0
|
||||
if (focus & Focus.Previous) return Math.max(0, elements.indexOf(active)) - 1
|
||||
if (focus & Focus.Next) return Math.max(0, elements.indexOf(active)) + 1
|
||||
if (focus & Focus.Last) return elements.length - 1
|
||||
let startIndex = (() => {
|
||||
if (focus & Focus.First) return 0;
|
||||
if (focus & Focus.Previous)
|
||||
return Math.max(0, elements.indexOf(active)) - 1;
|
||||
if (focus & Focus.Next) return Math.max(0, elements.indexOf(active)) + 1;
|
||||
if (focus & Focus.Last) return elements.length - 1;
|
||||
|
||||
throw new Error('Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last')
|
||||
})()
|
||||
throw new Error(
|
||||
"Missing Focus.First, Focus.Previous, Focus.Next or Focus.Last"
|
||||
);
|
||||
})();
|
||||
|
||||
let focusOptions = focus & Focus.NoScroll ? { preventScroll: true } : {}
|
||||
let focusOptions = focus & Focus.NoScroll ? { preventScroll: true } : {};
|
||||
|
||||
let offset = 0
|
||||
let total = elements.length
|
||||
let next = undefined
|
||||
do {
|
||||
// Guard against infinite loops
|
||||
if (offset >= total || offset + total <= 0) return FocusResult.Error
|
||||
let offset = 0;
|
||||
let total = elements.length;
|
||||
let next = undefined;
|
||||
do {
|
||||
// Guard against infinite loops
|
||||
if (offset >= total || offset + total <= 0) return FocusResult.Error;
|
||||
|
||||
let nextIdx = startIndex + offset
|
||||
let nextIdx = startIndex + offset;
|
||||
|
||||
if (focus & Focus.WrapAround) {
|
||||
nextIdx = (nextIdx + total) % total
|
||||
} else {
|
||||
if (nextIdx < 0) return FocusResult.Underflow
|
||||
if (nextIdx >= total) return FocusResult.Overflow
|
||||
}
|
||||
if (focus & Focus.WrapAround) {
|
||||
nextIdx = (nextIdx + total) % total;
|
||||
} else {
|
||||
if (nextIdx < 0) return FocusResult.Underflow;
|
||||
if (nextIdx >= total) return FocusResult.Overflow;
|
||||
}
|
||||
|
||||
next = elements[nextIdx]
|
||||
next = elements[nextIdx];
|
||||
|
||||
// Try the focus the next element, might not work if it is "hidden" to the user.
|
||||
next?.focus(focusOptions)
|
||||
// Try the focus the next element, might not work if it is "hidden" to the user.
|
||||
next?.focus(focusOptions);
|
||||
|
||||
// Try the next one in line
|
||||
offset += direction
|
||||
} while (next !== document.activeElement)
|
||||
// Try the next one in line
|
||||
offset += direction;
|
||||
} while (next !== document.activeElement);
|
||||
|
||||
// This is a little weird, but let me try and explain: There are a few scenario's
|
||||
// in chrome for example where a focused `<a>` tag does not get the default focus
|
||||
// styles and sometimes they do. This highly depends on whether you started by
|
||||
// clicking or by using your keyboard. When you programmatically add focus `anchor.focus()`
|
||||
// then the active element (document.activeElement) is this anchor, which is expected.
|
||||
// However in that case the default focus styles are not applied *unless* you
|
||||
// also add this tabindex.
|
||||
if (!next.hasAttribute('tabindex')) next.setAttribute('tabindex', '0')
|
||||
// This is a little weird, but let me try and explain: There are a few scenario's
|
||||
// in chrome for example where a focused `<a>` tag does not get the default focus
|
||||
// styles and sometimes they do. This highly depends on whether you started by
|
||||
// clicking or by using your keyboard. When you programmatically add focus `anchor.focus()`
|
||||
// then the active element (document.activeElement) is this anchor, which is expected.
|
||||
// However in that case the default focus styles are not applied *unless* you
|
||||
// also add this tabindex.
|
||||
if (!next.hasAttribute("tabindex")) next.setAttribute("tabindex", "0");
|
||||
|
||||
return FocusResult.Success
|
||||
return FocusResult.Success;
|
||||
}
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
// TODO: This must already exist somewhere, right? 🤔
|
||||
// Ref: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
|
||||
export enum Keys {
|
||||
Space = ' ',
|
||||
Enter = 'Enter',
|
||||
Escape = 'Escape',
|
||||
Backspace = 'Backspace',
|
||||
Space = " ",
|
||||
Enter = "Enter",
|
||||
Escape = "Escape",
|
||||
Backspace = "Backspace",
|
||||
|
||||
ArrowLeft = 'ArrowLeft',
|
||||
ArrowUp = 'ArrowUp',
|
||||
ArrowRight = 'ArrowRight',
|
||||
ArrowDown = 'ArrowDown',
|
||||
ArrowLeft = "ArrowLeft",
|
||||
ArrowUp = "ArrowUp",
|
||||
ArrowRight = "ArrowRight",
|
||||
ArrowDown = "ArrowDown",
|
||||
|
||||
Home = 'Home',
|
||||
End = 'End',
|
||||
Home = "Home",
|
||||
End = "End",
|
||||
|
||||
PageUp = 'PageUp',
|
||||
PageDown = 'PageDown',
|
||||
PageUp = "PageUp",
|
||||
PageDown = "PageDown",
|
||||
|
||||
Tab = 'Tab',
|
||||
Tab = "Tab",
|
||||
}
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
export function match<TValue extends string | number = string, TReturnValue = unknown>(
|
||||
value: TValue,
|
||||
lookup: Record<TValue, TReturnValue | ((...args: any[]) => TReturnValue)>,
|
||||
...args: any[]
|
||||
export function match<
|
||||
TValue extends string | number = string,
|
||||
TReturnValue = unknown
|
||||
>(
|
||||
value: TValue,
|
||||
lookup: Record<TValue, TReturnValue | ((...args: any[]) => TReturnValue)>,
|
||||
...args: any[]
|
||||
): TReturnValue {
|
||||
if (value in lookup) {
|
||||
let returnValue = lookup[value]
|
||||
return typeof returnValue === 'function' ? returnValue(...args) : returnValue
|
||||
}
|
||||
if (value in lookup) {
|
||||
let returnValue = lookup[value];
|
||||
return typeof returnValue === "function"
|
||||
? returnValue(...args)
|
||||
: returnValue;
|
||||
}
|
||||
|
||||
let error = new Error(
|
||||
`Tried to handle "${value}" but there is no handler defined. Only defined handlers are: ${Object.keys(
|
||||
lookup
|
||||
)
|
||||
.map(key => `"${key}"`)
|
||||
.join(', ')}.`
|
||||
let error = new Error(
|
||||
`Tried to handle "${value}" but there is no handler defined. Only defined handlers are: ${Object.keys(
|
||||
lookup
|
||||
)
|
||||
if (Error.captureStackTrace) Error.captureStackTrace(error, match)
|
||||
throw error
|
||||
.map((key) => `"${key}"`)
|
||||
.join(", ")}.`
|
||||
);
|
||||
if (Error.captureStackTrace) Error.captureStackTrace(error, match);
|
||||
throw error;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
export function once<T>(cb: (...args: T[]) => void) {
|
||||
let state = { called: false }
|
||||
let state = { called: false };
|
||||
|
||||
return (...args: T[]) => {
|
||||
if (state.called) return
|
||||
state.called = true
|
||||
return cb(...args)
|
||||
}
|
||||
return (...args: T[]) => {
|
||||
if (state.called) return;
|
||||
state.called = true;
|
||||
return cb(...args);
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,95 +1,97 @@
|
||||
import { once } from './once'
|
||||
import { disposables } from './disposables'
|
||||
import { once } from "./once";
|
||||
import { disposables } from "./disposables";
|
||||
|
||||
function addClasses(node: HTMLElement, ...classes: string[]) {
|
||||
node && classes.length > 0 && node.classList.add(...classes)
|
||||
node && classes.length > 0 && node.classList.add(...classes);
|
||||
}
|
||||
|
||||
function removeClasses(node: HTMLElement, ...classes: string[]) {
|
||||
node && classes.length > 0 && node.classList.remove(...classes)
|
||||
node && classes.length > 0 && node.classList.remove(...classes);
|
||||
}
|
||||
|
||||
export enum Reason {
|
||||
Finished = 'finished',
|
||||
Cancelled = 'cancelled',
|
||||
Finished = "finished",
|
||||
Cancelled = "cancelled",
|
||||
}
|
||||
|
||||
function waitForTransition(node: HTMLElement, done: (reason: Reason) => void) {
|
||||
let d = disposables()
|
||||
let d = disposables();
|
||||
|
||||
if (!node) return d.dispose
|
||||
if (!node) return d.dispose;
|
||||
|
||||
// Safari returns a comma separated list of values, so let's sort them and take the highest value.
|
||||
let { transitionDuration, transitionDelay } = getComputedStyle(node)
|
||||
// Safari returns a comma separated list of values, so let's sort them and take the highest value.
|
||||
let { transitionDuration, transitionDelay } = getComputedStyle(node);
|
||||
|
||||
let [durationMs, delaysMs] = [transitionDuration, transitionDelay].map(value => {
|
||||
let [resolvedValue = 0] = value
|
||||
.split(',')
|
||||
// Remove falsy we can't work with
|
||||
.filter(Boolean)
|
||||
// Values are returned as `0.3s` or `75ms`
|
||||
.map(v => (v.includes('ms') ? parseFloat(v) : parseFloat(v) * 1000))
|
||||
.sort((a, z) => z - a)
|
||||
let [durationMs, delaysMs] = [transitionDuration, transitionDelay].map(
|
||||
(value) => {
|
||||
let [resolvedValue = 0] = value
|
||||
.split(",")
|
||||
// Remove falsy we can't work with
|
||||
.filter(Boolean)
|
||||
// Values are returned as `0.3s` or `75ms`
|
||||
.map((v) => (v.includes("ms") ? parseFloat(v) : parseFloat(v) * 1000))
|
||||
.sort((a, z) => z - a);
|
||||
|
||||
return resolvedValue
|
||||
})
|
||||
|
||||
// Waiting for the transition to end. We could use the `transitionend` event, however when no
|
||||
// actual transition/duration is defined then the `transitionend` event is not fired.
|
||||
//
|
||||
// TODO: Downside is, when you slow down transitions via devtools this timeout is still using the
|
||||
// full 100% speed instead of the 25% or 10%.
|
||||
if (durationMs !== 0) {
|
||||
d.setTimeout(() => {
|
||||
done(Reason.Finished)
|
||||
}, durationMs + delaysMs)
|
||||
} else {
|
||||
// No transition is happening, so we should cleanup already. Otherwise we have to wait until we
|
||||
// get disposed.
|
||||
done(Reason.Finished)
|
||||
return resolvedValue;
|
||||
}
|
||||
);
|
||||
|
||||
// If we get disposed before the timeout runs we should cleanup anyway
|
||||
d.add(() => done(Reason.Cancelled))
|
||||
// Waiting for the transition to end. We could use the `transitionend` event, however when no
|
||||
// actual transition/duration is defined then the `transitionend` event is not fired.
|
||||
//
|
||||
// TODO: Downside is, when you slow down transitions via devtools this timeout is still using the
|
||||
// full 100% speed instead of the 25% or 10%.
|
||||
if (durationMs !== 0) {
|
||||
d.setTimeout(() => {
|
||||
done(Reason.Finished);
|
||||
}, durationMs + delaysMs);
|
||||
} else {
|
||||
// No transition is happening, so we should cleanup already. Otherwise we have to wait until we
|
||||
// get disposed.
|
||||
done(Reason.Finished);
|
||||
}
|
||||
|
||||
return d.dispose
|
||||
// If we get disposed before the timeout runs we should cleanup anyway
|
||||
d.add(() => done(Reason.Cancelled));
|
||||
|
||||
return d.dispose;
|
||||
}
|
||||
|
||||
export function transition(
|
||||
node: HTMLElement,
|
||||
base: string[],
|
||||
from: string[],
|
||||
to: string[],
|
||||
entered: string[],
|
||||
done?: (reason: Reason) => void
|
||||
node: HTMLElement,
|
||||
base: string[],
|
||||
from: string[],
|
||||
to: string[],
|
||||
entered: string[],
|
||||
done?: (reason: Reason) => void
|
||||
) {
|
||||
let d = disposables()
|
||||
let _done = done !== undefined ? once(done) : () => { }
|
||||
let d = disposables();
|
||||
let _done = done !== undefined ? once(done) : () => {};
|
||||
|
||||
removeClasses(node, ...entered)
|
||||
addClasses(node, ...base, ...from)
|
||||
removeClasses(node, ...entered);
|
||||
addClasses(node, ...base, ...from);
|
||||
|
||||
d.nextFrame(() => {
|
||||
removeClasses(node, ...from)
|
||||
addClasses(node, ...to)
|
||||
d.nextFrame(() => {
|
||||
removeClasses(node, ...from);
|
||||
addClasses(node, ...to);
|
||||
|
||||
d.add(
|
||||
waitForTransition(node, reason => {
|
||||
removeClasses(node, ...to, ...base)
|
||||
addClasses(node, ...entered)
|
||||
return _done(reason)
|
||||
})
|
||||
)
|
||||
})
|
||||
d.add(
|
||||
waitForTransition(node, (reason) => {
|
||||
removeClasses(node, ...to, ...base);
|
||||
addClasses(node, ...entered);
|
||||
return _done(reason);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
// Once we get disposed, we should ensure that we cleanup after ourselves. In case of an unmount,
|
||||
// the node itself will be nullified and will be a no-op. In case of a full transition the classes
|
||||
// are already removed which is also a no-op. However if you go from enter -> leave mid-transition
|
||||
// then we have some leftovers that should be cleaned.
|
||||
d.add(() => removeClasses(node, ...base, ...from, ...to, ...entered))
|
||||
// Once we get disposed, we should ensure that we cleanup after ourselves. In case of an unmount,
|
||||
// the node itself will be nullified and will be a no-op. In case of a full transition the classes
|
||||
// are already removed which is also a no-op. However if you go from enter -> leave mid-transition
|
||||
// then we have some leftovers that should be cleaned.
|
||||
d.add(() => removeClasses(node, ...base, ...from, ...to, ...entered));
|
||||
|
||||
// When we get disposed early, than we should also call the done method but switch the reason.
|
||||
d.add(() => _done(Reason.Cancelled))
|
||||
// When we get disposed early, than we should also call the done method but switch the reason.
|
||||
d.add(() => _done(Reason.Cancelled));
|
||||
|
||||
return d.dispose
|
||||
return d.dispose;
|
||||
}
|
||||
|
||||
@@ -1,28 +1,35 @@
|
||||
type AcceptNode = (
|
||||
node: HTMLElement
|
||||
node: HTMLElement
|
||||
) =>
|
||||
| typeof NodeFilter.FILTER_ACCEPT
|
||||
| typeof NodeFilter.FILTER_SKIP
|
||||
| typeof NodeFilter.FILTER_REJECT
|
||||
| typeof NodeFilter.FILTER_ACCEPT
|
||||
| typeof NodeFilter.FILTER_SKIP
|
||||
| typeof NodeFilter.FILTER_REJECT;
|
||||
|
||||
export function treeWalker({
|
||||
container,
|
||||
accept,
|
||||
walk,
|
||||
enabled,
|
||||
container,
|
||||
accept,
|
||||
walk,
|
||||
enabled,
|
||||
}: {
|
||||
container: HTMLElement | null
|
||||
accept: AcceptNode
|
||||
walk(node: HTMLElement): void
|
||||
enabled?: boolean
|
||||
container: HTMLElement | null;
|
||||
accept: AcceptNode;
|
||||
walk(node: HTMLElement): void;
|
||||
enabled?: boolean;
|
||||
}) {
|
||||
let root = container
|
||||
if (!root) return
|
||||
if (enabled !== undefined && !enabled) return
|
||||
let root = container;
|
||||
if (!root) return;
|
||||
if (enabled !== undefined && !enabled) return;
|
||||
|
||||
let acceptNode = Object.assign((node: HTMLElement) => accept(node), { acceptNode: accept })
|
||||
// @ts-ignore-error Typescript bug thinks this can only have 3 args
|
||||
let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, acceptNode, false)
|
||||
let acceptNode = Object.assign((node: HTMLElement) => accept(node), {
|
||||
acceptNode: accept,
|
||||
});
|
||||
// @ts-ignore-error Typescript bug thinks this can only have 3 args
|
||||
let walker = document.createTreeWalker(
|
||||
root,
|
||||
NodeFilter.SHOW_ELEMENT,
|
||||
acceptNode,
|
||||
false
|
||||
);
|
||||
|
||||
while (walker.nextNode()) walk(walker.currentNode as HTMLElement)
|
||||
while (walker.nextNode()) walk(walker.currentNode as HTMLElement);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user