This commit is contained in:
eewing
2026-02-17 14:10:16 -06:00
parent 2bca5834c5
commit cf73cd3b4c
11246 changed files with 1690552 additions and 0 deletions
+79
View File
@@ -0,0 +1,79 @@
import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
import { PresenceManager } from "../../internal/presence-manager.svelte.js";
interface CollapsibleRootStateOpts extends WithRefOpts, WritableBoxedValues<{
open: boolean;
}>, ReadableBoxedValues<{
disabled: boolean;
onOpenChangeComplete: OnChangeFn<boolean>;
}> {
}
export declare class CollapsibleRootState {
static create(opts: CollapsibleRootStateOpts): CollapsibleRootState;
readonly opts: CollapsibleRootStateOpts;
readonly attachment: RefAttachment;
contentNode: HTMLElement | null;
contentPresence: PresenceManager;
contentId: string | undefined;
constructor(opts: CollapsibleRootStateOpts);
toggleOpen(): void;
readonly props: {
readonly id: string;
readonly "data-state": "open" | "closed";
readonly "data-disabled": "" | undefined;
};
}
interface CollapsibleContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
forceMount: boolean;
hiddenUntilFound: boolean;
}> {
}
export declare class CollapsibleContentState {
#private;
static create(opts: CollapsibleContentStateOpts): CollapsibleContentState;
readonly opts: CollapsibleContentStateOpts;
readonly root: CollapsibleRootState;
readonly attachment: RefAttachment;
readonly present: boolean;
constructor(opts: CollapsibleContentStateOpts, root: CollapsibleRootState);
get shouldRender(): boolean;
readonly snippetProps: {
open: boolean;
};
readonly props: {
readonly hidden: boolean | "until-found" | undefined;
readonly id: string;
readonly style: {
readonly "--bits-collapsible-content-height": string | undefined;
readonly "--bits-collapsible-content-width": string | undefined;
};
readonly "data-state": "open" | "closed";
readonly "data-disabled": "" | undefined;
};
}
interface CollapsibleTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
disabled: boolean | null | undefined;
}> {
}
export declare class CollapsibleTriggerState {
#private;
static create(opts: CollapsibleTriggerStateOpts): CollapsibleTriggerState;
readonly opts: CollapsibleTriggerStateOpts;
readonly root: CollapsibleRootState;
readonly attachment: RefAttachment;
constructor(opts: CollapsibleTriggerStateOpts, root: CollapsibleRootState);
onclick(e: BitsMouseEvent): void;
onkeydown(e: BitsKeyboardEvent): void;
readonly props: {
readonly id: string;
readonly type: "button";
readonly disabled: boolean;
readonly "aria-controls": string | undefined;
readonly "aria-expanded": "true" | "false";
readonly "data-state": "open" | "closed";
readonly "data-disabled": "" | undefined;
readonly onclick: (e: BitsMouseEvent) => void;
readonly onkeydown: (e: BitsKeyboardEvent) => void;
};
}
export {};
+196
View File
@@ -0,0 +1,196 @@
import { afterTick, attachRef, boxWith, } from "svelte-toolbelt";
import { Context, watch } from "runed";
import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed, } from "../../internal/attrs.js";
import { kbd } from "../../internal/kbd.js";
import { on } from "svelte/events";
import { PresenceManager } from "../../internal/presence-manager.svelte.js";
const collapsibleAttrs = createBitsAttrs({
component: "collapsible",
parts: ["root", "content", "trigger"],
});
const CollapsibleRootContext = new Context("Collapsible.Root");
export class CollapsibleRootState {
static create(opts) {
return CollapsibleRootContext.set(new CollapsibleRootState(opts));
}
opts;
attachment;
contentNode = $state(null);
contentPresence;
contentId = $state(undefined);
constructor(opts) {
this.opts = opts;
this.toggleOpen = this.toggleOpen.bind(this);
this.attachment = attachRef(this.opts.ref);
this.contentPresence = new PresenceManager({
ref: boxWith(() => this.contentNode),
open: this.opts.open,
onComplete: () => {
this.opts.onOpenChangeComplete.current(this.opts.open.current);
},
});
}
toggleOpen() {
this.opts.open.current = !this.opts.open.current;
}
props = $derived.by(() => ({
id: this.opts.id.current,
"data-state": getDataOpenClosed(this.opts.open.current),
"data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
[collapsibleAttrs.root]: "",
...this.attachment,
}));
}
export class CollapsibleContentState {
static create(opts) {
return new CollapsibleContentState(opts, CollapsibleRootContext.get());
}
opts;
root;
attachment;
present = $derived.by(() => {
if (this.opts.hiddenUntilFound.current)
return this.root.opts.open.current;
return this.opts.forceMount.current || this.root.opts.open.current;
});
#originalStyles;
#isMountAnimationPrevented = $state(false);
#width = $state(0);
#height = $state(0);
constructor(opts, root) {
this.opts = opts;
this.root = root;
this.#isMountAnimationPrevented = root.opts.open.current;
this.root.contentId = this.opts.id.current;
this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
watch.pre(() => this.opts.id.current, (id) => {
this.root.contentId = id;
});
$effect.pre(() => {
const rAF = requestAnimationFrame(() => {
this.#isMountAnimationPrevented = false;
});
return () => {
cancelAnimationFrame(rAF);
};
});
watch.pre([() => this.opts.ref.current, () => this.opts.hiddenUntilFound.current], ([node, hiddenUntilFound]) => {
if (!node || !hiddenUntilFound)
return;
const handleBeforeMatch = () => {
if (this.root.opts.open.current)
return;
// we need to defer opening until after browser completes search highlighting
// otherwise the browser will immediately open the collapsible
// and the search highlighting will not be visible
requestAnimationFrame(() => {
this.root.opts.open.current = true;
});
};
return on(node, "beforematch", handleBeforeMatch);
});
watch([() => this.opts.ref.current, () => this.present], ([node]) => {
if (!node)
return;
afterTick(() => {
if (!this.opts.ref.current)
return;
// get the dimensions of the element
this.#originalStyles = this.#originalStyles || {
transitionDuration: node.style.transitionDuration,
animationName: node.style.animationName,
};
// block any animations/transitions so the element renders at full dimensions
node.style.transitionDuration = "0s";
node.style.animationName = "none";
const rect = node.getBoundingClientRect();
this.#height = rect.height;
this.#width = rect.width;
// unblock any animations/transitions that were originally set if not the initial render
if (!this.#isMountAnimationPrevented) {
const { animationName, transitionDuration } = this.#originalStyles;
node.style.transitionDuration = transitionDuration;
node.style.animationName = animationName;
}
});
});
}
get shouldRender() {
return this.root.contentPresence.shouldRender;
}
snippetProps = $derived.by(() => ({
open: this.root.opts.open.current,
}));
props = $derived.by(() => ({
id: this.opts.id.current,
style: {
"--bits-collapsible-content-height": this.#height
? `${this.#height}px`
: undefined,
"--bits-collapsible-content-width": this.#width
? `${this.#width}px`
: undefined,
},
hidden: this.opts.hiddenUntilFound.current && !this.root.opts.open.current
? "until-found"
: undefined,
"data-state": getDataOpenClosed(this.root.opts.open.current),
"data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
[collapsibleAttrs.content]: "",
...(this.opts.hiddenUntilFound.current && !this.shouldRender
? {}
: {
hidden: this.opts.hiddenUntilFound.current
? !this.shouldRender
: this.opts.forceMount.current
? undefined
: !this.shouldRender,
}),
...this.attachment,
}));
}
export class CollapsibleTriggerState {
static create(opts) {
return new CollapsibleTriggerState(opts, CollapsibleRootContext.get());
}
opts;
root;
attachment;
#isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
constructor(opts, root) {
this.opts = opts;
this.root = root;
this.attachment = attachRef(this.opts.ref);
this.onclick = this.onclick.bind(this);
this.onkeydown = this.onkeydown.bind(this);
}
onclick(e) {
if (this.#isDisabled)
return;
if (e.button !== 0)
return e.preventDefault();
this.root.toggleOpen();
}
onkeydown(e) {
if (this.#isDisabled)
return;
if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
e.preventDefault();
this.root.toggleOpen();
}
}
props = $derived.by(() => ({
id: this.opts.id.current,
type: "button",
disabled: this.#isDisabled,
"aria-controls": this.root.contentId,
"aria-expanded": boolToStr(this.root.opts.open.current),
"data-state": getDataOpenClosed(this.root.opts.open.current),
"data-disabled": boolToEmptyStrOrUndef(this.#isDisabled),
[collapsibleAttrs.trigger]: "",
//
onclick: this.onclick,
onkeydown: this.onkeydown,
...this.attachment,
}));
}
@@ -0,0 +1,41 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import { CollapsibleContentState } from "../collapsible.svelte.js";
import type { CollapsibleContentProps } from "../types.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
child,
ref = $bindable(null),
forceMount = false,
hiddenUntilFound = false,
children,
id = createId(uid),
...restProps
}: CollapsibleContentProps = $props();
const contentState = CollapsibleContentState.create({
id: boxWith(() => id),
forceMount: boxWith(() => forceMount),
hiddenUntilFound: boxWith(() => hiddenUntilFound),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, contentState.props));
</script>
{#if child}
{@render child({
...contentState.snippetProps,
props: mergedProps,
})}
{:else}
<div {...mergedProps}>
{@render children?.()}
</div>
{/if}
@@ -0,0 +1,4 @@
import type { CollapsibleContentProps } from "../types.js";
declare const CollapsibleContent: import("svelte").Component<CollapsibleContentProps, {}, "ref">;
type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
export default CollapsibleContent;
@@ -0,0 +1,36 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { CollapsibleTriggerProps } from "../types.js";
import { CollapsibleTriggerState } from "../collapsible.svelte.js";
import { createId } from "../../../internal/create-id.js";
const uid = $props.id();
let {
children,
child,
ref = $bindable(null),
id = createId(uid),
disabled = false,
...restProps
}: CollapsibleTriggerProps = $props();
const triggerState = CollapsibleTriggerState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
disabled: boxWith(() => disabled),
});
const mergedProps = $derived(mergeProps(restProps, triggerState.props));
</script>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<button {...mergedProps}>
{@render children?.()}
</button>
{/if}
@@ -0,0 +1,4 @@
import type { CollapsibleTriggerProps } from "../types.js";
declare const CollapsibleTrigger: import("svelte").Component<CollapsibleTriggerProps, {}, "ref">;
type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
export default CollapsibleTrigger;
@@ -0,0 +1,48 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { CollapsibleRootProps } from "../types.js";
import { CollapsibleRootState } from "../collapsible.svelte.js";
import { createId } from "../../../internal/create-id.js";
import { noop } from "../../../internal/noop.js";
const uid = $props.id();
let {
children,
child,
id = createId(uid),
ref = $bindable(null),
open = $bindable(false),
disabled = false,
onOpenChange = noop,
onOpenChangeComplete = noop,
...restProps
}: CollapsibleRootProps = $props();
const rootState = CollapsibleRootState.create({
open: boxWith(
() => open,
(v) => {
open = v;
onOpenChange(v);
}
),
disabled: boxWith(() => disabled),
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
});
const mergedProps = $derived(mergeProps(restProps, rootState.props));
</script>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<div {...mergedProps}>
{@render children?.()}
</div>
{/if}
@@ -0,0 +1,4 @@
import type { CollapsibleRootProps } from "../types.js";
declare const Collapsible: import("svelte").Component<CollapsibleRootProps, {}, "ref" | "open">;
type Collapsible = ReturnType<typeof Collapsible>;
export default Collapsible;
+4
View File
@@ -0,0 +1,4 @@
export { default as Root } from "./components/collapsible.svelte";
export { default as Content } from "./components/collapsible-content.svelte";
export { default as Trigger } from "./components/collapsible-trigger.svelte";
export type { CollapsibleRootProps as RootProps, CollapsibleContentProps as ContentProps, CollapsibleTriggerProps as TriggerProps, } from "./types.js";
+3
View File
@@ -0,0 +1,3 @@
export { default as Root } from "./components/collapsible.svelte";
export { default as Content } from "./components/collapsible-content.svelte";
export { default as Trigger } from "./components/collapsible-trigger.svelte";
+1
View File
@@ -0,0 +1 @@
export * as Collapsible from "./exports.js";
+1
View File
@@ -0,0 +1 @@
export * as Collapsible from "./exports.js";
+48
View File
@@ -0,0 +1,48 @@
import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, Without } from "../../internal/types.js";
import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
export type CollapsibleRootPropsWithoutHTML = WithChild<{
/**
* Whether the collapsible is disabled.
*
* @default false
*/
disabled?: boolean;
/**
* Whether the collapsible is open.
*
* @default false
*/
open?: boolean;
/**
* A callback function called when the open state changes.
*/
onOpenChange?: OnChangeFn<boolean>;
/**
* A callback function called when the open state changes complete.
*/
onOpenChangeComplete?: OnChangeFn<boolean>;
}>;
export type CollapsibleRootProps = CollapsibleRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CollapsibleRootPropsWithoutHTML>;
export type CollapsibleContentSnippetProps = {
open: boolean;
};
export type CollapsibleContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<{
/**
* Whether to force mount the content to the DOM.
*
* @default false
*/
forceMount?: boolean;
/**
* Whether to allow the browser to expand the content when searching for content
* within the panel via the browser's built-in search functionality.
*
* When `true`, this prop will override the `forceMount` prop.
*
* @default true
*/
hiddenUntilFound?: boolean;
}, CollapsibleContentSnippetProps>;
export type CollapsibleContentProps = CollapsibleContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CollapsibleContentPropsWithoutHTML>;
export type CollapsibleTriggerPropsWithoutHTML = WithChild;
export type CollapsibleTriggerProps = CollapsibleTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, CollapsibleTriggerPropsWithoutHTML>;
+1
View File
@@ -0,0 +1 @@
export {};