INIT
This commit is contained in:
+30
@@ -0,0 +1,30 @@
|
||||
<script lang="ts">
|
||||
import { mergeProps } from "svelte-toolbelt";
|
||||
import type { ArrowProps } from "./types.js";
|
||||
import { useId } from "../../../internal/use-id.js";
|
||||
|
||||
let {
|
||||
id = useId(),
|
||||
children,
|
||||
child,
|
||||
width = 10,
|
||||
height = 5,
|
||||
...restProps
|
||||
}: ArrowProps = $props();
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, { id }));
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<span {...mergedProps}>
|
||||
{#if children}
|
||||
{@render children?.()}
|
||||
{:else}
|
||||
<svg {width} {height} viewBox="0 0 30 10" preserveAspectRatio="none" data-arrow="">
|
||||
<polygon points="0,0 30,0 15,10" fill="currentColor" />
|
||||
</svg>
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { ArrowProps } from "./types.js";
|
||||
declare const Arrow: import("svelte").Component<ArrowProps, {}, "">;
|
||||
type Arrow = ReturnType<typeof Arrow>;
|
||||
export default Arrow;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as Arrow } from "./arrow.svelte";
|
||||
export type { ArrowProps } from "./types.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as Arrow } from "./arrow.svelte";
|
||||
+17
@@ -0,0 +1,17 @@
|
||||
import type { WithChild } from "../../../internal/types.js";
|
||||
import type { BitsPrimitiveSpanAttributes } from "../../../shared/attributes.js";
|
||||
export type ArrowPropsWithoutHTML = WithChild<{
|
||||
/**
|
||||
* The width of the arrow in pixels.
|
||||
*
|
||||
* @defaultValue 10
|
||||
*/
|
||||
width?: number;
|
||||
/**
|
||||
* The height of the arrow in pixels.
|
||||
*
|
||||
* @defaultValue 5
|
||||
*/
|
||||
height?: number;
|
||||
}>;
|
||||
export type ArrowProps = ArrowPropsWithoutHTML & BitsPrimitiveSpanAttributes;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
+44
@@ -0,0 +1,44 @@
|
||||
import { Context } from "runed";
|
||||
import { type ReadableBoxedValues } from "svelte-toolbelt";
|
||||
import type { BitsConfigPropsWithoutChildren } from "./types.js";
|
||||
type BitsConfigStateProps = ReadableBoxedValues<BitsConfigPropsWithoutChildren>;
|
||||
export declare const BitsConfigContext: Context<BitsConfigState>;
|
||||
/**
|
||||
* Gets the current Bits UI configuration state from the context.
|
||||
*
|
||||
* Returns a default configuration (where all values are `undefined`) if no configuration is found.
|
||||
*/
|
||||
export declare function getBitsConfig(): Required<ReadableBoxedValues<BitsConfigPropsWithoutChildren>>;
|
||||
/**
|
||||
* Creates and sets a new Bits UI configuration state that inherits from parent configs.
|
||||
*
|
||||
* @param opts - Configuration options for this level
|
||||
* @returns The configuration state instance
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* // In a component that wants to set a default portal target
|
||||
* const config = useBitsConfig({ defaultPortalTo: box("#some-element") });
|
||||
*
|
||||
* // Child components will inherit this config and can override specific values
|
||||
* const childConfig = useBitsConfig({ someOtherProp: box("value") });
|
||||
* // childConfig still has defaultPortalTo="#some-element" from parent
|
||||
* ```
|
||||
*/
|
||||
export declare function useBitsConfig(opts: BitsConfigStateProps): BitsConfigState;
|
||||
/**
|
||||
* Configuration state that inherits from parent configurations.
|
||||
*
|
||||
* @example
|
||||
* Config resolution:
|
||||
* ```
|
||||
* Level 1: { defaultPortalTo: "#some-element", theme: "dark" }
|
||||
* Level 2: { spacing: "large" } // inherits defaultPortalTo="#some-element", theme="dark"
|
||||
* Level 3: { theme: "light" } // inherits defaultPortalTo="#some-element", spacing="large", overrides theme="light"
|
||||
* ```
|
||||
*/
|
||||
export declare class BitsConfigState {
|
||||
readonly opts: Required<BitsConfigStateProps>;
|
||||
constructor(parent: BitsConfigState | null, opts: BitsConfigStateProps);
|
||||
}
|
||||
export {};
|
||||
+92
@@ -0,0 +1,92 @@
|
||||
import { Context } from "runed";
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
export const BitsConfigContext = new Context("BitsConfig");
|
||||
/**
|
||||
* Gets the current Bits UI configuration state from the context.
|
||||
*
|
||||
* Returns a default configuration (where all values are `undefined`) if no configuration is found.
|
||||
*/
|
||||
export function getBitsConfig() {
|
||||
const fallback = new BitsConfigState(null, {});
|
||||
return BitsConfigContext.getOr(fallback).opts;
|
||||
}
|
||||
/**
|
||||
* Creates and sets a new Bits UI configuration state that inherits from parent configs.
|
||||
*
|
||||
* @param opts - Configuration options for this level
|
||||
* @returns The configuration state instance
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* // In a component that wants to set a default portal target
|
||||
* const config = useBitsConfig({ defaultPortalTo: box("#some-element") });
|
||||
*
|
||||
* // Child components will inherit this config and can override specific values
|
||||
* const childConfig = useBitsConfig({ someOtherProp: box("value") });
|
||||
* // childConfig still has defaultPortalTo="#some-element" from parent
|
||||
* ```
|
||||
*/
|
||||
export function useBitsConfig(opts) {
|
||||
return BitsConfigContext.set(new BitsConfigState(BitsConfigContext.getOr(null), opts));
|
||||
}
|
||||
/**
|
||||
* Configuration state that inherits from parent configurations.
|
||||
*
|
||||
* @example
|
||||
* Config resolution:
|
||||
* ```
|
||||
* Level 1: { defaultPortalTo: "#some-element", theme: "dark" }
|
||||
* Level 2: { spacing: "large" } // inherits defaultPortalTo="#some-element", theme="dark"
|
||||
* Level 3: { theme: "light" } // inherits defaultPortalTo="#some-element", spacing="large", overrides theme="light"
|
||||
* ```
|
||||
*/
|
||||
export class BitsConfigState {
|
||||
opts;
|
||||
constructor(parent, opts) {
|
||||
const resolveConfigOption = createConfigResolver(parent, opts);
|
||||
this.opts = {
|
||||
defaultPortalTo: resolveConfigOption((config) => config.defaultPortalTo),
|
||||
defaultLocale: resolveConfigOption((config) => config.defaultLocale),
|
||||
};
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Returns a config resolver that resolves a given config option's value.
|
||||
*
|
||||
* The resolver creates reactive boxes that resolve config option values using this priority:
|
||||
* 1. Current level's value (if defined)
|
||||
* 2. Parent level's value (if defined and current is undefined)
|
||||
* 3. `undefined` (if no value is found in either parent or child)
|
||||
*
|
||||
* @param parent - Parent configuration state (null if this is root level)
|
||||
* @param currentOpts - Current level's configuration options
|
||||
*
|
||||
* @example
|
||||
* ```typescript
|
||||
* // Given this hierarchy:
|
||||
* // Root: { defaultPortalTo: "#some-element" }
|
||||
* // Child: { someOtherProp: "value" } // no defaultPortalTo specified
|
||||
*
|
||||
* const resolveConfigOption = createConfigResolver(parent, opts);
|
||||
* const portalTo = resolveConfigOption(config => config.defaultPortalTo);
|
||||
*
|
||||
* // portalTo.current === "#some-element" (inherited from parent)
|
||||
* // even when child didn't specify `defaultPortalTo`
|
||||
* ```
|
||||
*/
|
||||
function createConfigResolver(parent, currentOpts) {
|
||||
return (getter) => {
|
||||
const configOption = boxWith(() => {
|
||||
// try current opts first
|
||||
const value = getter(currentOpts)?.current;
|
||||
if (value !== undefined)
|
||||
return value;
|
||||
// if no parent, return undefined
|
||||
if (parent === null)
|
||||
return undefined;
|
||||
// get value from parent (which already has its own chain resolved)
|
||||
return getter(parent.opts)?.current;
|
||||
});
|
||||
return configOption;
|
||||
};
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
import type { BitsConfigProps } from "../types.js";
|
||||
import { useBitsConfig } from "../bits-config.js";
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
|
||||
let { children, defaultPortalTo, defaultLocale }: BitsConfigProps = $props();
|
||||
|
||||
useBitsConfig({
|
||||
defaultPortalTo: boxWith(() => defaultPortalTo),
|
||||
defaultLocale: boxWith(() => defaultLocale),
|
||||
});
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { BitsConfigProps } from "../types.js";
|
||||
declare const BitsConfig: import("svelte").Component<BitsConfigProps, {}, "">;
|
||||
type BitsConfig = ReturnType<typeof BitsConfig>;
|
||||
export default BitsConfig;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as BitsConfig } from "./components/bits-config.svelte";
|
||||
export { getBitsConfig, BitsConfigState } from "./bits-config.js";
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as BitsConfig } from "./components/bits-config.svelte";
|
||||
export { getBitsConfig, BitsConfigState } from "./bits-config.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./exports.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * from "./exports.js";
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import { type Getter, type ReadableBox } from "svelte-toolbelt";
|
||||
/**
|
||||
* Resolves a locale value using the prop, the config default, or a fallback.
|
||||
*
|
||||
* Default value: `"en"`
|
||||
*/
|
||||
export declare const resolveLocaleProp: (getProp: Getter<string | undefined>) => ReadableBox<string>;
|
||||
/**
|
||||
* Resolves a portal's `to` value using the prop, the config default, or a fallback.
|
||||
*
|
||||
* Default value: `"body"`
|
||||
*/
|
||||
export declare const resolvePortalToProp: (getProp: Getter<string | Element | undefined>) => ReadableBox<string | Element>;
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
import { getBitsConfig } from "./bits-config.js";
|
||||
/**
|
||||
* Creates a generic prop resolver that follows a standard priority chain:
|
||||
* 1. The getter's prop value (if defined)
|
||||
* 2. The config default value (if no getter prop value is defined)
|
||||
* 3. The fallback value (if no config value found)
|
||||
*/
|
||||
function createPropResolver(configOption, fallback) {
|
||||
return (getProp) => {
|
||||
const config = getBitsConfig();
|
||||
return boxWith(() => {
|
||||
// 1. return the prop's value, if provided
|
||||
const propValue = getProp();
|
||||
if (propValue !== undefined)
|
||||
return propValue;
|
||||
// 2. return the resolved config option value, if available
|
||||
const option = configOption(config).current;
|
||||
if (option !== undefined)
|
||||
return option;
|
||||
// 3. return the fallback if no other value is found
|
||||
return fallback;
|
||||
});
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Resolves a locale value using the prop, the config default, or a fallback.
|
||||
*
|
||||
* Default value: `"en"`
|
||||
*/
|
||||
export const resolveLocaleProp = createPropResolver((config) => config.defaultLocale, "en");
|
||||
/**
|
||||
* Resolves a portal's `to` value using the prop, the config default, or a fallback.
|
||||
*
|
||||
* Default value: `"body"`
|
||||
*/
|
||||
export const resolvePortalToProp = createPropResolver((config) => config.defaultPortalTo, "body");
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
import type { WithChildren } from "../../../internal/types.js";
|
||||
import type { PortalTarget } from "../portal/types.js";
|
||||
export type BitsConfigPropsWithoutChildren = {
|
||||
/**
|
||||
* The default portal `to`/target to use for the `Portal` components throughout the app.
|
||||
*/
|
||||
defaultPortalTo?: PortalTarget;
|
||||
/**
|
||||
* The default locale to use for the components that support localization.
|
||||
*/
|
||||
defaultLocale?: string;
|
||||
};
|
||||
export type BitsConfigProps = WithChildren<BitsConfigPropsWithoutChildren>;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Generated
Vendored
+29
@@ -0,0 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
import type { DismissibleLayerImplProps } from "./types.js";
|
||||
import { DismissibleLayerState } from "./use-dismissable-layer.svelte.js";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
|
||||
let {
|
||||
interactOutsideBehavior = "close",
|
||||
onInteractOutside = noop,
|
||||
onFocusOutside = noop,
|
||||
id,
|
||||
children,
|
||||
enabled,
|
||||
isValidEvent = () => false,
|
||||
ref,
|
||||
}: DismissibleLayerImplProps = $props();
|
||||
|
||||
const dismissibleLayerState = DismissibleLayerState.create({
|
||||
id: boxWith(() => id),
|
||||
interactOutsideBehavior: boxWith(() => interactOutsideBehavior),
|
||||
onInteractOutside: boxWith(() => onInteractOutside),
|
||||
enabled: boxWith(() => enabled),
|
||||
onFocusOutside: boxWith(() => onFocusOutside),
|
||||
isValidEvent: boxWith(() => isValidEvent),
|
||||
ref,
|
||||
});
|
||||
</script>
|
||||
|
||||
{@render children?.({ props: dismissibleLayerState.props })}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { DismissibleLayerImplProps } from "./types.js";
|
||||
declare const DismissibleLayer: import("svelte").Component<DismissibleLayerImplProps, {}, "">;
|
||||
type DismissibleLayer = ReturnType<typeof DismissibleLayer>;
|
||||
export default DismissibleLayer;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as DismissibleLayer } from "./dismissible-layer.svelte";
|
||||
export type { DismissibleLayerProps } from "./types.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as DismissibleLayer } from "./dismissible-layer.svelte";
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
import type { Snippet } from "svelte";
|
||||
import type { WritableBox } from "svelte-toolbelt";
|
||||
export type InteractOutsideEvent = PointerEvent;
|
||||
export type InteractOutsideEventHandler = (e: PointerEvent) => void;
|
||||
export type InteractOutsideBehaviorType = "close" | "defer-otherwise-close" | "defer-otherwise-ignore" | "ignore";
|
||||
export type DismissibleLayerProps = {
|
||||
/**
|
||||
* Callback fired when an outside interaction event completes,
|
||||
* which is either a `pointerup`, `mouseup`, or `touchend`
|
||||
* event, depending on the user's input device.
|
||||
*/
|
||||
onInteractOutside?: InteractOutsideEventHandler;
|
||||
/**
|
||||
* Interact outside behavior type.
|
||||
* `close`: Closes the element immediately.
|
||||
* `defer-otherwise-close`: Delegates the action to the parent element. If no parent is found, it closes the element.
|
||||
* `defer-otherwise-ignore`: Delegates the action to the parent element. If no parent is found, nothing is done.
|
||||
* `ignore`: Prevents the element from closing and also blocks the parent element from closing in response to an outside interaction.
|
||||
*
|
||||
* @defaultValue `close`
|
||||
*/
|
||||
interactOutsideBehavior?: InteractOutsideBehaviorType;
|
||||
/**
|
||||
* Callback fired when focus leaves the dismissible layer.
|
||||
*/
|
||||
onFocusOutside?: (event: FocusEvent) => void;
|
||||
};
|
||||
export type DismissibleLayerImplProps = {
|
||||
/**
|
||||
* Whether the layer is enabled.
|
||||
*/
|
||||
enabled: boolean;
|
||||
/**
|
||||
* ID of the layer.
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* Provide a custom event validator function to determine if the event should be
|
||||
* considered a dismissal event. This was added to handle the case where a user
|
||||
* has one context menu open and right clicks on another context menu. We normally ignore
|
||||
* right clicks for "close" events, but in this case we want to close the context menu when
|
||||
* another is open.
|
||||
*/
|
||||
isValidEvent?: (e: PointerEvent, node: HTMLElement) => boolean;
|
||||
children?: Snippet<[{
|
||||
props: Record<string, unknown>;
|
||||
}]>;
|
||||
ref: WritableBox<HTMLElement | null>;
|
||||
} & DismissibleLayerProps;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Generated
Vendored
+20
@@ -0,0 +1,20 @@
|
||||
import { type ReadableBox, type WritableBox, type ReadableBoxedValues } from "svelte-toolbelt";
|
||||
import type { DismissibleLayerImplProps, InteractOutsideBehaviorType } from "./types.js";
|
||||
interface DismissibleLayerStateOpts extends ReadableBoxedValues<Required<Omit<DismissibleLayerImplProps, "children" | "ref">>> {
|
||||
ref: WritableBox<HTMLElement | null>;
|
||||
}
|
||||
export declare class DismissibleLayerState {
|
||||
#private;
|
||||
static create(opts: DismissibleLayerStateOpts): DismissibleLayerState;
|
||||
readonly opts: DismissibleLayerStateOpts;
|
||||
constructor(opts: DismissibleLayerStateOpts);
|
||||
props: {
|
||||
onfocuscapture: () => void;
|
||||
onblurcapture: () => void;
|
||||
};
|
||||
}
|
||||
export declare function getTopMostDismissableLayer(layersArr?: [DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>][]): [DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>] | undefined;
|
||||
export type FocusOutsideEvent = CustomEvent<{
|
||||
originalEvent: FocusEvent;
|
||||
}>;
|
||||
export {};
|
||||
Generated
Vendored
+248
@@ -0,0 +1,248 @@
|
||||
import { afterSleep, afterTick, executeCallbacks, onDestroyEffect, } from "svelte-toolbelt";
|
||||
import { watch } from "runed";
|
||||
import { on } from "svelte/events";
|
||||
import {} from "../../../internal/events.js";
|
||||
import { debounce } from "../../../internal/debounce.js";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
import { getOwnerDocument, isOrContainsTarget } from "../../../internal/elements.js";
|
||||
import { isElementOrSVGElement } from "../../../internal/is.js";
|
||||
import { isClickTrulyOutside } from "../../../internal/dom.js";
|
||||
import { CONTEXT_MENU_CONTENT_ATTR, CONTEXT_MENU_TRIGGER_ATTR, } from "../../menu/menu.svelte.js";
|
||||
globalThis.bitsDismissableLayers ??= new Map();
|
||||
export class DismissibleLayerState {
|
||||
static create(opts) {
|
||||
return new DismissibleLayerState(opts);
|
||||
}
|
||||
opts;
|
||||
#interactOutsideProp;
|
||||
#behaviorType;
|
||||
#interceptedEvents = {
|
||||
pointerdown: false,
|
||||
};
|
||||
#isResponsibleLayer = false;
|
||||
#isFocusInsideDOMTree = false;
|
||||
#documentObj = undefined;
|
||||
#onFocusOutside;
|
||||
#unsubClickListener = noop;
|
||||
constructor(opts) {
|
||||
this.opts = opts;
|
||||
this.#behaviorType = opts.interactOutsideBehavior;
|
||||
this.#interactOutsideProp = opts.onInteractOutside;
|
||||
this.#onFocusOutside = opts.onFocusOutside;
|
||||
$effect(() => {
|
||||
this.#documentObj = getOwnerDocument(this.opts.ref.current);
|
||||
});
|
||||
let unsubEvents = noop;
|
||||
const cleanup = () => {
|
||||
this.#resetState();
|
||||
globalThis.bitsDismissableLayers.delete(this);
|
||||
this.#handleInteractOutside.destroy();
|
||||
unsubEvents();
|
||||
};
|
||||
watch([() => this.opts.enabled.current, () => this.opts.ref.current], () => {
|
||||
if (!this.opts.enabled.current || !this.opts.ref.current)
|
||||
return;
|
||||
afterSleep(1, () => {
|
||||
if (!this.opts.ref.current)
|
||||
return;
|
||||
globalThis.bitsDismissableLayers.set(this, this.#behaviorType);
|
||||
unsubEvents();
|
||||
unsubEvents = this.#addEventListeners();
|
||||
});
|
||||
return cleanup;
|
||||
});
|
||||
onDestroyEffect(() => {
|
||||
this.#resetState.destroy();
|
||||
globalThis.bitsDismissableLayers.delete(this);
|
||||
this.#handleInteractOutside.destroy();
|
||||
this.#unsubClickListener();
|
||||
unsubEvents();
|
||||
});
|
||||
}
|
||||
#handleFocus = (event) => {
|
||||
if (event.defaultPrevented)
|
||||
return;
|
||||
if (!this.opts.ref.current)
|
||||
return;
|
||||
afterTick(() => {
|
||||
if (!this.opts.ref.current || this.#isTargetWithinLayer(event.target))
|
||||
return;
|
||||
if (event.target && !this.#isFocusInsideDOMTree) {
|
||||
this.#onFocusOutside.current?.(event);
|
||||
}
|
||||
});
|
||||
};
|
||||
#addEventListeners() {
|
||||
return executeCallbacks(
|
||||
/**
|
||||
* CAPTURE INTERACTION START
|
||||
* mark interaction-start event as intercepted.
|
||||
* mark responsible layer during interaction start
|
||||
* to avoid checking if is responsible layer during interaction end
|
||||
* when a new floating element may have been opened.
|
||||
*/
|
||||
on(this.#documentObj, "pointerdown", executeCallbacks(this.#markInterceptedEvent, this.#markResponsibleLayer), { capture: true }),
|
||||
/**
|
||||
* BUBBLE INTERACTION START
|
||||
* Mark interaction-start event as non-intercepted. Debounce `onInteractOutsideStart`
|
||||
* to avoid prematurely checking if other events were intercepted.
|
||||
*/
|
||||
on(this.#documentObj, "pointerdown", executeCallbacks(this.#markNonInterceptedEvent, this.#handleInteractOutside)),
|
||||
/**
|
||||
* HANDLE FOCUS OUTSIDE
|
||||
*/
|
||||
on(this.#documentObj, "focusin", this.#handleFocus));
|
||||
}
|
||||
#handleDismiss = (e) => {
|
||||
let event = e;
|
||||
if (event.defaultPrevented) {
|
||||
event = createWrappedEvent(e);
|
||||
}
|
||||
this.#interactOutsideProp.current(e);
|
||||
};
|
||||
#handleInteractOutside = debounce((e) => {
|
||||
if (!this.opts.ref.current) {
|
||||
this.#unsubClickListener();
|
||||
return;
|
||||
}
|
||||
const isEventValid = this.opts.isValidEvent.current(e, this.opts.ref.current) ||
|
||||
isValidEvent(e, this.opts.ref.current);
|
||||
if (!this.#isResponsibleLayer || this.#isAnyEventIntercepted() || !isEventValid) {
|
||||
this.#unsubClickListener();
|
||||
return;
|
||||
}
|
||||
let event = e;
|
||||
if (event.defaultPrevented) {
|
||||
event = createWrappedEvent(event);
|
||||
}
|
||||
if (this.#behaviorType.current !== "close" &&
|
||||
this.#behaviorType.current !== "defer-otherwise-close") {
|
||||
this.#unsubClickListener();
|
||||
return;
|
||||
}
|
||||
if (e.pointerType === "touch") {
|
||||
this.#unsubClickListener();
|
||||
this.#unsubClickListener = on(this.#documentObj, "click", this.#handleDismiss, {
|
||||
once: true,
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.#interactOutsideProp.current(event);
|
||||
}
|
||||
}, 10);
|
||||
#markInterceptedEvent = (e) => {
|
||||
this.#interceptedEvents[e.type] = true;
|
||||
};
|
||||
#markNonInterceptedEvent = (e) => {
|
||||
this.#interceptedEvents[e.type] = false;
|
||||
};
|
||||
#markResponsibleLayer = () => {
|
||||
if (!this.opts.ref.current)
|
||||
return;
|
||||
this.#isResponsibleLayer = isResponsibleLayer(this.opts.ref.current);
|
||||
};
|
||||
#isTargetWithinLayer = (target) => {
|
||||
if (!this.opts.ref.current)
|
||||
return false;
|
||||
return isOrContainsTarget(this.opts.ref.current, target);
|
||||
};
|
||||
#resetState = debounce(() => {
|
||||
for (const eventType in this.#interceptedEvents) {
|
||||
this.#interceptedEvents[eventType] = false;
|
||||
}
|
||||
this.#isResponsibleLayer = false;
|
||||
}, 20);
|
||||
#isAnyEventIntercepted() {
|
||||
const i = Object.values(this.#interceptedEvents).some(Boolean);
|
||||
return i;
|
||||
}
|
||||
#onfocuscapture = () => {
|
||||
this.#isFocusInsideDOMTree = true;
|
||||
};
|
||||
#onblurcapture = () => {
|
||||
this.#isFocusInsideDOMTree = false;
|
||||
};
|
||||
props = {
|
||||
onfocuscapture: this.#onfocuscapture,
|
||||
onblurcapture: this.#onblurcapture,
|
||||
};
|
||||
}
|
||||
export function getTopMostDismissableLayer(layersArr = [
|
||||
...globalThis.bitsDismissableLayers,
|
||||
]) {
|
||||
return layersArr.findLast(([_, { current: behaviorType }]) => behaviorType === "close" || behaviorType === "ignore");
|
||||
}
|
||||
function isResponsibleLayer(node) {
|
||||
const layersArr = [...globalThis.bitsDismissableLayers];
|
||||
/**
|
||||
* We first check if we can find a top layer with `close` or `ignore`.
|
||||
* If that top layer was found and matches the provided node, then the node is
|
||||
* responsible for the outside interaction. Otherwise, we know that all layers defer so
|
||||
* the first layer is the responsible one.
|
||||
*/
|
||||
const topMostLayer = getTopMostDismissableLayer(layersArr);
|
||||
if (topMostLayer)
|
||||
return topMostLayer[0].opts.ref.current === node;
|
||||
const [firstLayerNode] = layersArr[0];
|
||||
return firstLayerNode.opts.ref.current === node;
|
||||
}
|
||||
function isValidEvent(e, node) {
|
||||
const target = e.target;
|
||||
if (!isElementOrSVGElement(target))
|
||||
return false;
|
||||
const targetIsContextMenuTrigger = Boolean(target.closest(`[${CONTEXT_MENU_TRIGGER_ATTR}]`));
|
||||
if ("button" in e && e.button > 0 && !targetIsContextMenuTrigger)
|
||||
return false;
|
||||
if ("button" in e && e.button === 0 && targetIsContextMenuTrigger)
|
||||
return true;
|
||||
const nodeIsContextMenu = Boolean(node.closest(`[${CONTEXT_MENU_CONTENT_ATTR}]`));
|
||||
if (targetIsContextMenuTrigger && nodeIsContextMenu)
|
||||
return false;
|
||||
const ownerDocument = getOwnerDocument(target);
|
||||
const isValid = ownerDocument.documentElement.contains(target) &&
|
||||
!isOrContainsTarget(node, target) &&
|
||||
isClickTrulyOutside(e, node);
|
||||
return isValid;
|
||||
}
|
||||
function createWrappedEvent(e) {
|
||||
const capturedCurrentTarget = e.currentTarget;
|
||||
const capturedTarget = e.target;
|
||||
let newEvent;
|
||||
if (e instanceof PointerEvent) {
|
||||
newEvent = new PointerEvent(e.type, e);
|
||||
}
|
||||
else {
|
||||
newEvent = new PointerEvent("pointerdown", e);
|
||||
}
|
||||
// track the prevented state separately
|
||||
let isPrevented = false;
|
||||
// Create a proxy to intercept property access and method calls
|
||||
const wrappedEvent = new Proxy(newEvent, {
|
||||
get: (target, prop) => {
|
||||
if (prop === "currentTarget") {
|
||||
return capturedCurrentTarget;
|
||||
}
|
||||
if (prop === "target") {
|
||||
return capturedTarget;
|
||||
}
|
||||
if (prop === "preventDefault") {
|
||||
return () => {
|
||||
isPrevented = true;
|
||||
if (typeof target.preventDefault === "function") {
|
||||
target.preventDefault();
|
||||
}
|
||||
};
|
||||
}
|
||||
if (prop === "defaultPrevented") {
|
||||
return isPrevented;
|
||||
}
|
||||
if (prop in target) {
|
||||
// oxlint-disable-next-line no-explicit-any
|
||||
return target[prop];
|
||||
}
|
||||
// oxlint-disable-next-line no-explicit-any
|
||||
return e[prop];
|
||||
},
|
||||
});
|
||||
return wrappedEvent;
|
||||
}
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
import type { EscapeLayerImplProps } from "./types.js";
|
||||
import { EscapeLayerState } from "./use-escape-layer.svelte.js";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
|
||||
let {
|
||||
escapeKeydownBehavior = "close",
|
||||
onEscapeKeydown = noop,
|
||||
children,
|
||||
enabled,
|
||||
ref,
|
||||
}: EscapeLayerImplProps = $props();
|
||||
|
||||
EscapeLayerState.create({
|
||||
escapeKeydownBehavior: boxWith(() => escapeKeydownBehavior),
|
||||
onEscapeKeydown: boxWith(() => onEscapeKeydown),
|
||||
enabled: boxWith(() => enabled),
|
||||
ref,
|
||||
});
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { EscapeLayerImplProps } from "./types.js";
|
||||
declare const EscapeLayer: import("svelte").Component<EscapeLayerImplProps, {}, "">;
|
||||
type EscapeLayer = ReturnType<typeof EscapeLayer>;
|
||||
export default EscapeLayer;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as EscapeLayer } from "./escape-layer.svelte";
|
||||
export type { EscapeLayerProps } from "./types.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as EscapeLayer } from "./escape-layer.svelte";
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
import type { Snippet } from "svelte";
|
||||
import type { Box } from "svelte-toolbelt";
|
||||
export type EscapeBehaviorType = "close" | "defer-otherwise-close" | "defer-otherwise-ignore" | "ignore";
|
||||
export type EscapeLayerProps = {
|
||||
/**
|
||||
* Callback fired when escape is pressed.
|
||||
*/
|
||||
onEscapeKeydown?: (e: KeyboardEvent) => void;
|
||||
/**
|
||||
* Escape behavior type.
|
||||
* `close`: Closes the element immediately.
|
||||
* `defer-otherwise-close`: Delegates the action to its parent component that has an
|
||||
* escape keydown handler. If no parent is found, it closes the element.
|
||||
* `defer-otherwise-ignore`: Delegates the action to the parent element. If no parent is found, nothing is done.
|
||||
* `ignore`: Prevents the element from closing and also blocks the parent element from closing in response to an escape key press.
|
||||
*
|
||||
* @defaultValue `close`
|
||||
*/
|
||||
escapeKeydownBehavior?: EscapeBehaviorType;
|
||||
};
|
||||
export type EscapeLayerImplProps = {
|
||||
/**
|
||||
* Whether the layer is enabled. Currently, we determine this with the
|
||||
* `presence` returned from the `presence` layer.
|
||||
*/
|
||||
enabled: boolean;
|
||||
children?: Snippet;
|
||||
ref: Box<HTMLElement | null>;
|
||||
} & EscapeLayerProps;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Generated
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
import { DOMContext, type Box, type ReadableBoxedValues } from "svelte-toolbelt";
|
||||
import type { EscapeLayerImplProps } from "./types.js";
|
||||
interface EscapeLayerStateOpts extends ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children" | "ref">>> {
|
||||
ref: Box<HTMLElement | null>;
|
||||
}
|
||||
export declare class EscapeLayerState {
|
||||
#private;
|
||||
static create(opts: EscapeLayerStateOpts): EscapeLayerState;
|
||||
readonly opts: EscapeLayerStateOpts;
|
||||
readonly domContext: DOMContext;
|
||||
constructor(opts: EscapeLayerStateOpts);
|
||||
}
|
||||
export {};
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
import { DOMContext } from "svelte-toolbelt";
|
||||
import { watch } from "runed";
|
||||
import { on } from "svelte/events";
|
||||
import { kbd } from "../../../internal/kbd.js";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
globalThis.bitsEscapeLayers ??= new Map();
|
||||
export class EscapeLayerState {
|
||||
static create(opts) {
|
||||
return new EscapeLayerState(opts);
|
||||
}
|
||||
opts;
|
||||
domContext;
|
||||
constructor(opts) {
|
||||
this.opts = opts;
|
||||
this.domContext = new DOMContext(this.opts.ref);
|
||||
let unsubEvents = noop;
|
||||
watch(() => opts.enabled.current, (enabled) => {
|
||||
if (enabled) {
|
||||
globalThis.bitsEscapeLayers.set(this, opts.escapeKeydownBehavior);
|
||||
unsubEvents = this.#addEventListener();
|
||||
}
|
||||
return () => {
|
||||
unsubEvents();
|
||||
globalThis.bitsEscapeLayers.delete(this);
|
||||
};
|
||||
});
|
||||
}
|
||||
#addEventListener = () => {
|
||||
return on(this.domContext.getDocument(), "keydown", this.#onkeydown, { passive: false });
|
||||
};
|
||||
#onkeydown = (e) => {
|
||||
if (e.key !== kbd.ESCAPE || !isResponsibleEscapeLayer(this))
|
||||
return;
|
||||
const clonedEvent = new KeyboardEvent(e.type, e);
|
||||
e.preventDefault();
|
||||
const behaviorType = this.opts.escapeKeydownBehavior.current;
|
||||
if (behaviorType !== "close" && behaviorType !== "defer-otherwise-close")
|
||||
return;
|
||||
this.opts.onEscapeKeydown.current(clonedEvent);
|
||||
};
|
||||
}
|
||||
function isResponsibleEscapeLayer(instance) {
|
||||
const layersArr = [...globalThis.bitsEscapeLayers];
|
||||
/**
|
||||
* We first check if we can find a top layer with `close` or `ignore`.
|
||||
* If that top layer was found and matches the provided node, then the node is
|
||||
* responsible for the escape. Otherwise, we know that all layers defer so
|
||||
* the first layer is the responsible one.
|
||||
*/
|
||||
const topMostLayer = layersArr.findLast(([_, { current: behaviorType }]) => behaviorType === "close" || behaviorType === "ignore");
|
||||
if (topMostLayer)
|
||||
return topMostLayer[0] === instance;
|
||||
const [firstLayerNode] = layersArr[0];
|
||||
return firstLayerNode === instance;
|
||||
}
|
||||
Generated
Vendored
+19
@@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
import { FloatingAnchorState } from "../use-floating-layer.svelte.js";
|
||||
import type { AnchorProps } from "./index.js";
|
||||
import type { Measurable } from "../../../../internal/floating-svelte/types.js";
|
||||
|
||||
let { id, children, virtualEl, ref, tooltip = false }: AnchorProps = $props();
|
||||
|
||||
FloatingAnchorState.create(
|
||||
{
|
||||
id: boxWith(() => id),
|
||||
virtualEl: boxWith(() => virtualEl as unknown as Measurable | null),
|
||||
ref,
|
||||
},
|
||||
tooltip
|
||||
);
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
node_modules/bits-ui/dist/bits/utilities/floating-layer/components/floating-layer-anchor.svelte.d.ts
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { AnchorProps } from "./index.js";
|
||||
declare const FloatingLayerAnchor: import("svelte").Component<AnchorProps, {}, "">;
|
||||
type FloatingLayerAnchor = ReturnType<typeof FloatingLayerAnchor>;
|
||||
export default FloatingLayerAnchor;
|
||||
Generated
Vendored
+20
@@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import { FloatingArrowState } from "../use-floating-layer.svelte.js";
|
||||
import { Arrow, type ArrowProps } from "../../arrow/index.js";
|
||||
import { useId } from "../../../../internal/use-id.js";
|
||||
|
||||
let { id = useId(), ref = $bindable(null), ...restProps }: ArrowProps = $props();
|
||||
|
||||
const arrowState = FloatingArrowState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, arrowState.props));
|
||||
</script>
|
||||
|
||||
<Arrow {...mergedProps} />
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import { type ArrowProps } from "../../arrow/index.js";
|
||||
declare const FloatingLayerArrow: import("svelte").Component<ArrowProps, {}, "ref">;
|
||||
type FloatingLayerArrow = ReturnType<typeof FloatingLayerArrow>;
|
||||
export default FloatingLayerArrow;
|
||||
Generated
Vendored
+19
@@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { type Snippet, onMount } from "svelte";
|
||||
|
||||
let {
|
||||
content,
|
||||
onPlaced,
|
||||
}: {
|
||||
content?: Snippet<
|
||||
[{ props: Record<string, unknown>; wrapperProps: Record<string, unknown> }]
|
||||
>;
|
||||
onPlaced?: () => void;
|
||||
} = $props();
|
||||
|
||||
onMount(() => {
|
||||
onPlaced?.();
|
||||
});
|
||||
</script>
|
||||
|
||||
{@render content?.({ props: {}, wrapperProps: {} })}
|
||||
Generated
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
import { type Snippet } from "svelte";
|
||||
type $$ComponentProps = {
|
||||
content?: Snippet<[
|
||||
{
|
||||
props: Record<string, unknown>;
|
||||
wrapperProps: Record<string, unknown>;
|
||||
}
|
||||
]>;
|
||||
onPlaced?: () => void;
|
||||
};
|
||||
declare const FloatingLayerContentStatic: import("svelte").Component<$$ComponentProps, {}, "">;
|
||||
type FloatingLayerContentStatic = ReturnType<typeof FloatingLayerContentStatic>;
|
||||
export default FloatingLayerContentStatic;
|
||||
Generated
Vendored
+65
@@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import { FloatingContentState } from "../use-floating-layer.svelte.js";
|
||||
import type { ContentImplProps } from "./index.js";
|
||||
import { useId } from "../../../../internal/use-id.js";
|
||||
|
||||
let {
|
||||
content,
|
||||
side = "bottom",
|
||||
sideOffset = 0,
|
||||
align = "center",
|
||||
alignOffset = 0,
|
||||
id,
|
||||
arrowPadding = 0,
|
||||
avoidCollisions = true,
|
||||
collisionBoundary = [],
|
||||
collisionPadding = 0,
|
||||
hideWhenDetached = false,
|
||||
onPlaced = () => {},
|
||||
sticky = "partial",
|
||||
updatePositionStrategy = "optimized",
|
||||
strategy = "fixed",
|
||||
dir = "ltr",
|
||||
style = {},
|
||||
wrapperId = useId(),
|
||||
customAnchor = null,
|
||||
enabled,
|
||||
tooltip = false,
|
||||
}: ContentImplProps = $props();
|
||||
|
||||
const contentState = FloatingContentState.create(
|
||||
{
|
||||
side: boxWith(() => side),
|
||||
sideOffset: boxWith(() => sideOffset),
|
||||
align: boxWith(() => align),
|
||||
alignOffset: boxWith(() => alignOffset),
|
||||
id: boxWith(() => id),
|
||||
arrowPadding: boxWith(() => arrowPadding),
|
||||
avoidCollisions: boxWith(() => avoidCollisions),
|
||||
collisionBoundary: boxWith(() => collisionBoundary),
|
||||
collisionPadding: boxWith(() => collisionPadding),
|
||||
hideWhenDetached: boxWith(() => hideWhenDetached),
|
||||
onPlaced: boxWith(() => onPlaced),
|
||||
sticky: boxWith(() => sticky),
|
||||
updatePositionStrategy: boxWith(() => updatePositionStrategy),
|
||||
strategy: boxWith(() => strategy),
|
||||
dir: boxWith(() => dir),
|
||||
style: boxWith(() => style),
|
||||
enabled: boxWith(() => enabled),
|
||||
wrapperId: boxWith(() => wrapperId),
|
||||
customAnchor: boxWith(() => customAnchor),
|
||||
},
|
||||
tooltip
|
||||
);
|
||||
|
||||
const mergedProps = $derived(
|
||||
mergeProps(contentState.wrapperProps, {
|
||||
style: {
|
||||
pointerEvents: "auto",
|
||||
},
|
||||
})
|
||||
);
|
||||
</script>
|
||||
|
||||
{@render content?.({ props: contentState.props, wrapperProps: mergedProps })}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { ContentImplProps } from "./index.js";
|
||||
declare const FloatingLayerContent: import("svelte").Component<ContentImplProps, {}, "">;
|
||||
type FloatingLayerContent = ReturnType<typeof FloatingLayerContent>;
|
||||
export default FloatingLayerContent;
|
||||
Generated
Vendored
+10
@@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
import { FloatingRootState } from "../use-floating-layer.svelte.js";
|
||||
|
||||
let { children, tooltip = false }: { children?: Snippet; tooltip?: boolean } = $props();
|
||||
|
||||
FloatingRootState.create(tooltip);
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
Generated
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
import type { Snippet } from "svelte";
|
||||
type $$ComponentProps = {
|
||||
children?: Snippet;
|
||||
tooltip?: boolean;
|
||||
};
|
||||
declare const FloatingLayer: import("svelte").Component<$$ComponentProps, {}, "">;
|
||||
type FloatingLayer = ReturnType<typeof FloatingLayer>;
|
||||
export default FloatingLayer;
|
||||
+6
@@ -0,0 +1,6 @@
|
||||
export { default as Anchor } from "./floating-layer-anchor.svelte";
|
||||
export { default as Arrow } from "./floating-layer-arrow.svelte";
|
||||
export { default as Content } from "./floating-layer-content.svelte";
|
||||
export { default as ContentStatic } from "./floating-layer-content-static.svelte";
|
||||
export { default as Root } from "./floating-layer.svelte";
|
||||
export type { FloatingLayerContentImplProps as ContentImplProps, FloatingLayerContentProps as ContentProps, FloatingLayerAnchorProps as AnchorProps, } from "../types.js";
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
export { default as Anchor } from "./floating-layer-anchor.svelte";
|
||||
export { default as Arrow } from "./floating-layer-arrow.svelte";
|
||||
export { default as Content } from "./floating-layer-content.svelte";
|
||||
export { default as ContentStatic } from "./floating-layer-content-static.svelte";
|
||||
export { default as Root } from "./floating-layer.svelte";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * as FloatingLayer from "./components/index.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export * as FloatingLayer from "./components/index.js";
|
||||
+134
@@ -0,0 +1,134 @@
|
||||
import type { Snippet } from "svelte";
|
||||
import type { ReadableBox } from "svelte-toolbelt";
|
||||
import type { Align, Boundary, Side } from "./use-floating-layer.svelte.js";
|
||||
import type { Arrayable } from "../../../internal/types.js";
|
||||
import type { Direction, StyleProperties } from "../../../shared/index.js";
|
||||
import type { Measurable } from "../../../internal/floating-svelte/types.js";
|
||||
export type FloatingLayerContentProps = {
|
||||
/**
|
||||
* The preferred side of the anchor to render against when open.
|
||||
* Will be reversed when collisions occur.
|
||||
*
|
||||
* @see https://floating-ui.com/docs/computePosition#placement
|
||||
*/
|
||||
side?: Side;
|
||||
/**
|
||||
* The distance in pixels from the anchor to the floating element.
|
||||
* @see https://floating-ui.com/docs/offset#options
|
||||
*/
|
||||
sideOffset?: number;
|
||||
/**
|
||||
* The preferred alignment of the anchor to render against when open.
|
||||
* This may change when collisions occur.
|
||||
*
|
||||
* @see https://floating-ui.com/docs/computePosition#placement
|
||||
*/
|
||||
align?: Align;
|
||||
/**
|
||||
* An offset in pixels from the "start" or "end" alignment options.
|
||||
* @see https://floating-ui.com/docs/offset#options
|
||||
*/
|
||||
alignOffset?: number | undefined;
|
||||
/**
|
||||
* This describes the padding between the arrow and the edges of the floating element.
|
||||
* If your floating element has border-radius, this will prevent it from overflowing
|
||||
* the corners.
|
||||
*/
|
||||
arrowPadding?: number;
|
||||
/**
|
||||
* When `true`, overrides the `side` and `align` options to prevent collisions
|
||||
* with the boundary edges.
|
||||
*
|
||||
* @default true
|
||||
* @see https://floating-ui.com/docs/flip
|
||||
*/
|
||||
avoidCollisions?: boolean | undefined;
|
||||
/**
|
||||
* A boundary element or array of elements to check for collisions against.
|
||||
*
|
||||
* @see https://floating-ui.com/docs/detectoverflow#boundary
|
||||
*/
|
||||
collisionBoundary?: Arrayable<Boundary>;
|
||||
/**
|
||||
* The amount in pixels of virtual padding around the viewport edges to check
|
||||
* for overflow which will cause a collision.
|
||||
*
|
||||
* @default 8
|
||||
* @see https://floating-ui.com/docs/detectOverflow#padding
|
||||
*/
|
||||
collisionPadding?: number | Partial<Record<Side, number>>;
|
||||
sticky?: "partial" | "always";
|
||||
hideWhenDetached?: boolean;
|
||||
/**
|
||||
* "optimized" will only update the position when necessary, while "always"
|
||||
* will update the position on each animation frame, which is useful if the floating
|
||||
* content is following something like a mouse cursor.
|
||||
*
|
||||
* @defaultValue "optimized"
|
||||
*/
|
||||
updatePositionStrategy?: "optimized" | "always";
|
||||
content?: Snippet<[{
|
||||
props: Record<string, unknown>;
|
||||
wrapperProps: Record<string, unknown>;
|
||||
}]>;
|
||||
/**
|
||||
* The positioning strategy to use for the floating element.
|
||||
* @see https://floating-ui.com/docs/computeposition#strategy
|
||||
*/
|
||||
strategy?: "absolute" | "fixed" | undefined;
|
||||
/**
|
||||
* The text direction of the content.
|
||||
*/
|
||||
dir?: Direction;
|
||||
/**
|
||||
* Whether to prevent scrolling the body when the content is open.
|
||||
*/
|
||||
preventScroll?: boolean;
|
||||
/**
|
||||
* Use an element other than the trigger to anchor the content to. If provided,
|
||||
* the content will be anchored to the provided element instead of the trigger.
|
||||
*
|
||||
* You can pass a selector string or an HTMLElement.
|
||||
*/
|
||||
customAnchor?: string | HTMLElement | Measurable | null;
|
||||
};
|
||||
export type FloatingLayerContentImplProps = {
|
||||
id: string;
|
||||
/**
|
||||
* The ID of the content wrapper element.
|
||||
*/
|
||||
wrapperId?: string;
|
||||
/**
|
||||
* The style properties to apply to the content.
|
||||
*/
|
||||
style?: StyleProperties | string | null;
|
||||
/**
|
||||
* Callback that is called when the floating element is placed.
|
||||
*/
|
||||
onPlaced?: () => void;
|
||||
enabled: boolean;
|
||||
/**
|
||||
* Tooltips are special in that they are commonly composed
|
||||
* with other floating components, where the same trigger is
|
||||
* used for both the tooltip and the popover.
|
||||
*
|
||||
* For situations like this, we need to use a different context
|
||||
* symbol so that conflicts don't occur.
|
||||
*/
|
||||
tooltip?: boolean;
|
||||
} & FloatingLayerContentProps;
|
||||
export type FloatingLayerAnchorProps = {
|
||||
id: string;
|
||||
children?: Snippet;
|
||||
virtualEl?: ReadableBox<Measurable | null>;
|
||||
ref: ReadableBox<HTMLElement | null>;
|
||||
/**
|
||||
* Tooltips are special in that they are commonly composed
|
||||
* with other floating components, where the same trigger is
|
||||
* used for both the tooltip and the popover.
|
||||
*
|
||||
* For situations like this, we need to use a different context
|
||||
* symbol so that conflicts don't occur.
|
||||
*/
|
||||
tooltip?: boolean;
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Generated
Vendored
+962
@@ -0,0 +1,962 @@
|
||||
import { type Middleware, type Placement } from "@floating-ui/dom";
|
||||
import { type ReadableBoxedValues, type ReadableBox, type Box } from "svelte-toolbelt";
|
||||
import type { Arrayable, WithRefOpts } from "../../../internal/types.js";
|
||||
import type { Measurable, UseFloatingReturn } from "../../../internal/floating-svelte/types.js";
|
||||
import type { Direction, StyleProperties } from "../../../shared/index.js";
|
||||
export declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
|
||||
export declare const ALIGN_OPTIONS: readonly ["start", "center", "end"];
|
||||
export type Side = (typeof SIDE_OPTIONS)[number];
|
||||
export type Align = (typeof ALIGN_OPTIONS)[number];
|
||||
export type Boundary = Element | null;
|
||||
export declare class FloatingRootState {
|
||||
static create(tooltip?: boolean): FloatingRootState;
|
||||
anchorNode: import("svelte-toolbelt").WritableBox<HTMLElement | Measurable | null>;
|
||||
customAnchorNode: import("svelte-toolbelt").WritableBox<string | HTMLElement | Measurable | null>;
|
||||
triggerNode: ReadableBox<Measurable | HTMLElement | null>;
|
||||
constructor();
|
||||
}
|
||||
export interface FloatingContentStateOpts extends ReadableBoxedValues<{
|
||||
id: string;
|
||||
wrapperId: string;
|
||||
side: Side;
|
||||
sideOffset: number;
|
||||
align: Align;
|
||||
alignOffset: number;
|
||||
arrowPadding: number;
|
||||
avoidCollisions: boolean;
|
||||
collisionBoundary: Arrayable<Boundary>;
|
||||
collisionPadding: number | Partial<Record<Side, number>>;
|
||||
sticky: "partial" | "always";
|
||||
hideWhenDetached: boolean;
|
||||
updatePositionStrategy: "optimized" | "always";
|
||||
strategy: "fixed" | "absolute";
|
||||
onPlaced: () => void;
|
||||
dir: Direction;
|
||||
style: StyleProperties | null | undefined | string;
|
||||
enabled: boolean;
|
||||
customAnchor: string | HTMLElement | null | Measurable;
|
||||
}> {
|
||||
}
|
||||
export declare class FloatingContentState {
|
||||
#private;
|
||||
static create(opts: FloatingContentStateOpts, tooltip?: boolean): FloatingContentState;
|
||||
readonly opts: FloatingContentStateOpts;
|
||||
readonly root: FloatingRootState;
|
||||
contentRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
|
||||
wrapperRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
|
||||
arrowRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
|
||||
readonly contentAttachment: {
|
||||
[x: symbol]: (node: HTMLElement) => () => void;
|
||||
};
|
||||
readonly wrapperAttachment: {
|
||||
[x: symbol]: (node: HTMLElement) => () => void;
|
||||
};
|
||||
readonly arrowAttachment: {
|
||||
[x: symbol]: (node: HTMLElement) => () => void;
|
||||
};
|
||||
arrowId: Box<string>;
|
||||
hasExplicitBoundaries: boolean;
|
||||
detectOverflowOptions: {
|
||||
padding: number | Partial<Record<"left" | "right" | "top" | "bottom", number>>;
|
||||
boundary: Element[];
|
||||
altBoundary: boolean;
|
||||
};
|
||||
middleware: Middleware[];
|
||||
floating: UseFloatingReturn;
|
||||
placedSide: "left" | "right" | "top" | "bottom";
|
||||
placedAlign: "center" | "end" | "start";
|
||||
arrowX: number;
|
||||
arrowY: number;
|
||||
cannotCenterArrow: boolean;
|
||||
contentZIndex: string | undefined;
|
||||
arrowBaseSide: "left" | "right" | "top" | "bottom";
|
||||
wrapperProps: {
|
||||
readonly id: string;
|
||||
readonly "data-bits-floating-content-wrapper": "";
|
||||
readonly style: {
|
||||
readonly accentColor?: import("csstype").Property.AccentColor | undefined;
|
||||
readonly alignContent?: import("csstype").Property.AlignContent | undefined;
|
||||
readonly alignItems?: import("csstype").Property.AlignItems | undefined;
|
||||
readonly alignSelf?: import("csstype").Property.AlignSelf | undefined;
|
||||
readonly alignTracks?: import("csstype").Property.AlignTracks | undefined;
|
||||
readonly animationComposition?: import("csstype").Property.AnimationComposition | undefined;
|
||||
readonly animationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
|
||||
readonly animationDirection?: import("csstype").Property.AnimationDirection | undefined;
|
||||
readonly animationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
|
||||
readonly animationFillMode?: import("csstype").Property.AnimationFillMode | undefined;
|
||||
readonly animationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
|
||||
readonly animationName?: import("csstype").Property.AnimationName | undefined;
|
||||
readonly animationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
|
||||
readonly animationRangeEnd?: import("csstype").Property.AnimationRangeEnd<0 | (string & {})> | undefined;
|
||||
readonly animationRangeStart?: import("csstype").Property.AnimationRangeStart<0 | (string & {})> | undefined;
|
||||
readonly animationTimeline?: import("csstype").Property.AnimationTimeline | undefined;
|
||||
readonly animationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
|
||||
readonly appearance?: import("csstype").Property.Appearance | undefined;
|
||||
readonly aspectRatio?: import("csstype").Property.AspectRatio | undefined;
|
||||
readonly backdropFilter?: import("csstype").Property.BackdropFilter | undefined;
|
||||
readonly backfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
|
||||
readonly backgroundAttachment?: import("csstype").Property.BackgroundAttachment | undefined;
|
||||
readonly backgroundBlendMode?: import("csstype").Property.BackgroundBlendMode | undefined;
|
||||
readonly backgroundClip?: import("csstype").Property.BackgroundClip | undefined;
|
||||
readonly backgroundColor?: import("csstype").Property.BackgroundColor | undefined;
|
||||
readonly backgroundImage?: import("csstype").Property.BackgroundImage | undefined;
|
||||
readonly backgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
|
||||
readonly backgroundPositionX?: import("csstype").Property.BackgroundPositionX<0 | (string & {})> | undefined;
|
||||
readonly backgroundPositionY?: import("csstype").Property.BackgroundPositionY<0 | (string & {})> | undefined;
|
||||
readonly backgroundRepeat?: import("csstype").Property.BackgroundRepeat | undefined;
|
||||
readonly backgroundSize?: import("csstype").Property.BackgroundSize<0 | (string & {})> | undefined;
|
||||
readonly blockOverflow?: import("csstype").Property.BlockOverflow | undefined;
|
||||
readonly blockSize?: import("csstype").Property.BlockSize<0 | (string & {})> | undefined;
|
||||
readonly borderBlockColor?: import("csstype").Property.BorderBlockColor | undefined;
|
||||
readonly borderBlockEndColor?: import("csstype").Property.BorderBlockEndColor | undefined;
|
||||
readonly borderBlockEndStyle?: import("csstype").Property.BorderBlockEndStyle | undefined;
|
||||
readonly borderBlockEndWidth?: import("csstype").Property.BorderBlockEndWidth<0 | (string & {})> | undefined;
|
||||
readonly borderBlockStartColor?: import("csstype").Property.BorderBlockStartColor | undefined;
|
||||
readonly borderBlockStartStyle?: import("csstype").Property.BorderBlockStartStyle | undefined;
|
||||
readonly borderBlockStartWidth?: import("csstype").Property.BorderBlockStartWidth<0 | (string & {})> | undefined;
|
||||
readonly borderBlockStyle?: import("csstype").Property.BorderBlockStyle | undefined;
|
||||
readonly borderBlockWidth?: import("csstype").Property.BorderBlockWidth<0 | (string & {})> | undefined;
|
||||
readonly borderBottomColor?: import("csstype").Property.BorderBottomColor | undefined;
|
||||
readonly borderBottomLeftRadius?: import("csstype").Property.BorderBottomLeftRadius<0 | (string & {})> | undefined;
|
||||
readonly borderBottomRightRadius?: import("csstype").Property.BorderBottomRightRadius<0 | (string & {})> | undefined;
|
||||
readonly borderBottomStyle?: import("csstype").Property.BorderBottomStyle | undefined;
|
||||
readonly borderBottomWidth?: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
|
||||
readonly borderCollapse?: import("csstype").Property.BorderCollapse | undefined;
|
||||
readonly borderEndEndRadius?: import("csstype").Property.BorderEndEndRadius<0 | (string & {})> | undefined;
|
||||
readonly borderEndStartRadius?: import("csstype").Property.BorderEndStartRadius<0 | (string & {})> | undefined;
|
||||
readonly borderImageOutset?: import("csstype").Property.BorderImageOutset<0 | (string & {})> | undefined;
|
||||
readonly borderImageRepeat?: import("csstype").Property.BorderImageRepeat | undefined;
|
||||
readonly borderImageSlice?: import("csstype").Property.BorderImageSlice | undefined;
|
||||
readonly borderImageSource?: import("csstype").Property.BorderImageSource | undefined;
|
||||
readonly borderImageWidth?: import("csstype").Property.BorderImageWidth<0 | (string & {})> | undefined;
|
||||
readonly borderInlineColor?: import("csstype").Property.BorderInlineColor | undefined;
|
||||
readonly borderInlineEndColor?: import("csstype").Property.BorderInlineEndColor | undefined;
|
||||
readonly borderInlineEndStyle?: import("csstype").Property.BorderInlineEndStyle | undefined;
|
||||
readonly borderInlineEndWidth?: import("csstype").Property.BorderInlineEndWidth<0 | (string & {})> | undefined;
|
||||
readonly borderInlineStartColor?: import("csstype").Property.BorderInlineStartColor | undefined;
|
||||
readonly borderInlineStartStyle?: import("csstype").Property.BorderInlineStartStyle | undefined;
|
||||
readonly borderInlineStartWidth?: import("csstype").Property.BorderInlineStartWidth<0 | (string & {})> | undefined;
|
||||
readonly borderInlineStyle?: import("csstype").Property.BorderInlineStyle | undefined;
|
||||
readonly borderInlineWidth?: import("csstype").Property.BorderInlineWidth<0 | (string & {})> | undefined;
|
||||
readonly borderLeftColor?: import("csstype").Property.BorderLeftColor | undefined;
|
||||
readonly borderLeftStyle?: import("csstype").Property.BorderLeftStyle | undefined;
|
||||
readonly borderLeftWidth?: import("csstype").Property.BorderLeftWidth<0 | (string & {})> | undefined;
|
||||
readonly borderRightColor?: import("csstype").Property.BorderRightColor | undefined;
|
||||
readonly borderRightStyle?: import("csstype").Property.BorderRightStyle | undefined;
|
||||
readonly borderRightWidth?: import("csstype").Property.BorderRightWidth<0 | (string & {})> | undefined;
|
||||
readonly borderSpacing?: import("csstype").Property.BorderSpacing<0 | (string & {})> | undefined;
|
||||
readonly borderStartEndRadius?: import("csstype").Property.BorderStartEndRadius<0 | (string & {})> | undefined;
|
||||
readonly borderStartStartRadius?: import("csstype").Property.BorderStartStartRadius<0 | (string & {})> | undefined;
|
||||
readonly borderTopColor?: import("csstype").Property.BorderTopColor | undefined;
|
||||
readonly borderTopLeftRadius?: import("csstype").Property.BorderTopLeftRadius<0 | (string & {})> | undefined;
|
||||
readonly borderTopRightRadius?: import("csstype").Property.BorderTopRightRadius<0 | (string & {})> | undefined;
|
||||
readonly borderTopStyle?: import("csstype").Property.BorderTopStyle | undefined;
|
||||
readonly borderTopWidth?: import("csstype").Property.BorderTopWidth<0 | (string & {})> | undefined;
|
||||
readonly bottom?: import("csstype").Property.Bottom<0 | (string & {})> | undefined;
|
||||
readonly boxDecorationBreak?: import("csstype").Property.BoxDecorationBreak | undefined;
|
||||
readonly boxShadow?: import("csstype").Property.BoxShadow | undefined;
|
||||
readonly boxSizing?: import("csstype").Property.BoxSizing | undefined;
|
||||
readonly breakAfter?: import("csstype").Property.BreakAfter | undefined;
|
||||
readonly breakBefore?: import("csstype").Property.BreakBefore | undefined;
|
||||
readonly breakInside?: import("csstype").Property.BreakInside | undefined;
|
||||
readonly captionSide?: import("csstype").Property.CaptionSide | undefined;
|
||||
readonly caretColor?: import("csstype").Property.CaretColor | undefined;
|
||||
readonly caretShape?: import("csstype").Property.CaretShape | undefined;
|
||||
readonly clear?: import("csstype").Property.Clear | undefined;
|
||||
readonly clipPath?: import("csstype").Property.ClipPath | undefined;
|
||||
readonly color?: import("csstype").Property.Color | undefined;
|
||||
readonly colorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
|
||||
readonly colorScheme?: import("csstype").Property.ColorScheme | undefined;
|
||||
readonly columnCount?: import("csstype").Property.ColumnCount | undefined;
|
||||
readonly columnFill?: import("csstype").Property.ColumnFill | undefined;
|
||||
readonly columnGap?: import("csstype").Property.ColumnGap<0 | (string & {})> | undefined;
|
||||
readonly columnRuleColor?: import("csstype").Property.ColumnRuleColor | undefined;
|
||||
readonly columnRuleStyle?: import("csstype").Property.ColumnRuleStyle | undefined;
|
||||
readonly columnRuleWidth?: import("csstype").Property.ColumnRuleWidth<0 | (string & {})> | undefined;
|
||||
readonly columnSpan?: import("csstype").Property.ColumnSpan | undefined;
|
||||
readonly columnWidth?: import("csstype").Property.ColumnWidth<0 | (string & {})> | undefined;
|
||||
readonly contain?: import("csstype").Property.Contain | undefined;
|
||||
readonly containIntrinsicBlockSize?: import("csstype").Property.ContainIntrinsicBlockSize<0 | (string & {})> | undefined;
|
||||
readonly containIntrinsicHeight?: import("csstype").Property.ContainIntrinsicHeight<0 | (string & {})> | undefined;
|
||||
readonly containIntrinsicInlineSize?: import("csstype").Property.ContainIntrinsicInlineSize<0 | (string & {})> | undefined;
|
||||
readonly containIntrinsicWidth?: import("csstype").Property.ContainIntrinsicWidth<0 | (string & {})> | undefined;
|
||||
readonly containerName?: import("csstype").Property.ContainerName | undefined;
|
||||
readonly containerType?: import("csstype").Property.ContainerType | undefined;
|
||||
readonly content?: import("csstype").Property.Content | undefined;
|
||||
readonly contentVisibility?: import("csstype").Property.ContentVisibility | undefined;
|
||||
readonly counterIncrement?: import("csstype").Property.CounterIncrement | undefined;
|
||||
readonly counterReset?: import("csstype").Property.CounterReset | undefined;
|
||||
readonly counterSet?: import("csstype").Property.CounterSet | undefined;
|
||||
readonly cursor?: import("csstype").Property.Cursor | undefined;
|
||||
readonly direction?: import("csstype").Property.Direction | undefined;
|
||||
readonly display?: import("csstype").Property.Display | undefined;
|
||||
readonly emptyCells?: import("csstype").Property.EmptyCells | undefined;
|
||||
readonly filter?: import("csstype").Property.Filter | undefined;
|
||||
readonly flexBasis?: import("csstype").Property.FlexBasis<0 | (string & {})> | undefined;
|
||||
readonly flexDirection?: import("csstype").Property.FlexDirection | undefined;
|
||||
readonly flexGrow?: import("csstype").Property.FlexGrow | undefined;
|
||||
readonly flexShrink?: import("csstype").Property.FlexShrink | undefined;
|
||||
readonly flexWrap?: import("csstype").Property.FlexWrap | undefined;
|
||||
readonly float?: import("csstype").Property.Float | undefined;
|
||||
readonly fontFamily?: import("csstype").Property.FontFamily | undefined;
|
||||
readonly fontFeatureSettings?: import("csstype").Property.FontFeatureSettings | undefined;
|
||||
readonly fontKerning?: import("csstype").Property.FontKerning | undefined;
|
||||
readonly fontLanguageOverride?: import("csstype").Property.FontLanguageOverride | undefined;
|
||||
readonly fontOpticalSizing?: import("csstype").Property.FontOpticalSizing | undefined;
|
||||
readonly fontPalette?: import("csstype").Property.FontPalette | undefined;
|
||||
readonly fontSize?: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
|
||||
readonly fontSizeAdjust?: import("csstype").Property.FontSizeAdjust | undefined;
|
||||
readonly fontSmooth?: import("csstype").Property.FontSmooth<0 | (string & {})> | undefined;
|
||||
readonly fontStretch?: import("csstype").Property.FontStretch | undefined;
|
||||
readonly fontStyle?: import("csstype").Property.FontStyle | undefined;
|
||||
readonly fontSynthesis?: import("csstype").Property.FontSynthesis | undefined;
|
||||
readonly fontSynthesisPosition?: import("csstype").Property.FontSynthesisPosition | undefined;
|
||||
readonly fontSynthesisSmallCaps?: import("csstype").Property.FontSynthesisSmallCaps | undefined;
|
||||
readonly fontSynthesisStyle?: import("csstype").Property.FontSynthesisStyle | undefined;
|
||||
readonly fontSynthesisWeight?: import("csstype").Property.FontSynthesisWeight | undefined;
|
||||
readonly fontVariant?: import("csstype").Property.FontVariant | undefined;
|
||||
readonly fontVariantAlternates?: import("csstype").Property.FontVariantAlternates | undefined;
|
||||
readonly fontVariantCaps?: import("csstype").Property.FontVariantCaps | undefined;
|
||||
readonly fontVariantEastAsian?: import("csstype").Property.FontVariantEastAsian | undefined;
|
||||
readonly fontVariantEmoji?: import("csstype").Property.FontVariantEmoji | undefined;
|
||||
readonly fontVariantLigatures?: import("csstype").Property.FontVariantLigatures | undefined;
|
||||
readonly fontVariantNumeric?: import("csstype").Property.FontVariantNumeric | undefined;
|
||||
readonly fontVariantPosition?: import("csstype").Property.FontVariantPosition | undefined;
|
||||
readonly fontVariationSettings?: import("csstype").Property.FontVariationSettings | undefined;
|
||||
readonly fontWeight?: import("csstype").Property.FontWeight | undefined;
|
||||
readonly forcedColorAdjust?: import("csstype").Property.ForcedColorAdjust | undefined;
|
||||
readonly gridAutoColumns?: import("csstype").Property.GridAutoColumns<0 | (string & {})> | undefined;
|
||||
readonly gridAutoFlow?: import("csstype").Property.GridAutoFlow | undefined;
|
||||
readonly gridAutoRows?: import("csstype").Property.GridAutoRows<0 | (string & {})> | undefined;
|
||||
readonly gridColumnEnd?: import("csstype").Property.GridColumnEnd | undefined;
|
||||
readonly gridColumnStart?: import("csstype").Property.GridColumnStart | undefined;
|
||||
readonly gridRowEnd?: import("csstype").Property.GridRowEnd | undefined;
|
||||
readonly gridRowStart?: import("csstype").Property.GridRowStart | undefined;
|
||||
readonly gridTemplateAreas?: import("csstype").Property.GridTemplateAreas | undefined;
|
||||
readonly gridTemplateColumns?: import("csstype").Property.GridTemplateColumns<0 | (string & {})> | undefined;
|
||||
readonly gridTemplateRows?: import("csstype").Property.GridTemplateRows<0 | (string & {})> | undefined;
|
||||
readonly hangingPunctuation?: import("csstype").Property.HangingPunctuation | undefined;
|
||||
readonly height?: import("csstype").Property.Height<0 | (string & {})> | undefined;
|
||||
readonly hyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
|
||||
readonly hyphenateLimitChars?: import("csstype").Property.HyphenateLimitChars | undefined;
|
||||
readonly hyphens?: import("csstype").Property.Hyphens | undefined;
|
||||
readonly imageOrientation?: import("csstype").Property.ImageOrientation | undefined;
|
||||
readonly imageRendering?: import("csstype").Property.ImageRendering | undefined;
|
||||
readonly imageResolution?: import("csstype").Property.ImageResolution | undefined;
|
||||
readonly initialLetter?: import("csstype").Property.InitialLetter | undefined;
|
||||
readonly inlineSize?: import("csstype").Property.InlineSize<0 | (string & {})> | undefined;
|
||||
readonly inputSecurity?: import("csstype").Property.InputSecurity | undefined;
|
||||
readonly insetBlockEnd?: import("csstype").Property.InsetBlockEnd<0 | (string & {})> | undefined;
|
||||
readonly insetBlockStart?: import("csstype").Property.InsetBlockStart<0 | (string & {})> | undefined;
|
||||
readonly insetInlineEnd?: import("csstype").Property.InsetInlineEnd<0 | (string & {})> | undefined;
|
||||
readonly insetInlineStart?: import("csstype").Property.InsetInlineStart<0 | (string & {})> | undefined;
|
||||
readonly isolation?: import("csstype").Property.Isolation | undefined;
|
||||
readonly justifyContent?: import("csstype").Property.JustifyContent | undefined;
|
||||
readonly justifyItems?: import("csstype").Property.JustifyItems | undefined;
|
||||
readonly justifySelf?: import("csstype").Property.JustifySelf | undefined;
|
||||
readonly justifyTracks?: import("csstype").Property.JustifyTracks | undefined;
|
||||
left: string | 0;
|
||||
readonly letterSpacing?: import("csstype").Property.LetterSpacing<0 | (string & {})> | undefined;
|
||||
readonly lineBreak?: import("csstype").Property.LineBreak | undefined;
|
||||
readonly lineHeight?: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
|
||||
readonly lineHeightStep?: import("csstype").Property.LineHeightStep<0 | (string & {})> | undefined;
|
||||
readonly listStyleImage?: import("csstype").Property.ListStyleImage | undefined;
|
||||
readonly listStylePosition?: import("csstype").Property.ListStylePosition | undefined;
|
||||
readonly listStyleType?: import("csstype").Property.ListStyleType | undefined;
|
||||
readonly marginBlockEnd?: import("csstype").Property.MarginBlockEnd<0 | (string & {})> | undefined;
|
||||
readonly marginBlockStart?: import("csstype").Property.MarginBlockStart<0 | (string & {})> | undefined;
|
||||
readonly marginBottom?: import("csstype").Property.MarginBottom<0 | (string & {})> | undefined;
|
||||
readonly marginInlineEnd?: import("csstype").Property.MarginInlineEnd<0 | (string & {})> | undefined;
|
||||
readonly marginInlineStart?: import("csstype").Property.MarginInlineStart<0 | (string & {})> | undefined;
|
||||
readonly marginLeft?: import("csstype").Property.MarginLeft<0 | (string & {})> | undefined;
|
||||
readonly marginRight?: import("csstype").Property.MarginRight<0 | (string & {})> | undefined;
|
||||
readonly marginTop?: import("csstype").Property.MarginTop<0 | (string & {})> | undefined;
|
||||
readonly marginTrim?: import("csstype").Property.MarginTrim | undefined;
|
||||
readonly maskBorderMode?: import("csstype").Property.MaskBorderMode | undefined;
|
||||
readonly maskBorderOutset?: import("csstype").Property.MaskBorderOutset<0 | (string & {})> | undefined;
|
||||
readonly maskBorderRepeat?: import("csstype").Property.MaskBorderRepeat | undefined;
|
||||
readonly maskBorderSlice?: import("csstype").Property.MaskBorderSlice | undefined;
|
||||
readonly maskBorderSource?: import("csstype").Property.MaskBorderSource | undefined;
|
||||
readonly maskBorderWidth?: import("csstype").Property.MaskBorderWidth<0 | (string & {})> | undefined;
|
||||
readonly maskClip?: import("csstype").Property.MaskClip | undefined;
|
||||
readonly maskComposite?: import("csstype").Property.MaskComposite | undefined;
|
||||
readonly maskImage?: import("csstype").Property.MaskImage | undefined;
|
||||
readonly maskMode?: import("csstype").Property.MaskMode | undefined;
|
||||
readonly maskOrigin?: import("csstype").Property.MaskOrigin | undefined;
|
||||
readonly maskPosition?: import("csstype").Property.MaskPosition<0 | (string & {})> | undefined;
|
||||
readonly maskRepeat?: import("csstype").Property.MaskRepeat | undefined;
|
||||
readonly maskSize?: import("csstype").Property.MaskSize<0 | (string & {})> | undefined;
|
||||
readonly maskType?: import("csstype").Property.MaskType | undefined;
|
||||
readonly masonryAutoFlow?: import("csstype").Property.MasonryAutoFlow | undefined;
|
||||
readonly mathDepth?: import("csstype").Property.MathDepth | undefined;
|
||||
readonly mathShift?: import("csstype").Property.MathShift | undefined;
|
||||
readonly mathStyle?: import("csstype").Property.MathStyle | undefined;
|
||||
readonly maxBlockSize?: import("csstype").Property.MaxBlockSize<0 | (string & {})> | undefined;
|
||||
readonly maxHeight?: import("csstype").Property.MaxHeight<0 | (string & {})> | undefined;
|
||||
readonly maxInlineSize?: import("csstype").Property.MaxInlineSize<0 | (string & {})> | undefined;
|
||||
readonly maxLines?: import("csstype").Property.MaxLines | undefined;
|
||||
readonly maxWidth?: import("csstype").Property.MaxWidth<0 | (string & {})> | undefined;
|
||||
readonly minBlockSize?: import("csstype").Property.MinBlockSize<0 | (string & {})> | undefined;
|
||||
readonly minHeight?: import("csstype").Property.MinHeight<0 | (string & {})> | undefined;
|
||||
readonly minInlineSize?: import("csstype").Property.MinInlineSize<0 | (string & {})> | undefined;
|
||||
minWidth: import("csstype").Property.MinWidth<0 | (string & {})>;
|
||||
readonly mixBlendMode?: import("csstype").Property.MixBlendMode | undefined;
|
||||
readonly motionDistance?: import("csstype").Property.OffsetDistance<0 | (string & {})> | undefined;
|
||||
readonly motionPath?: import("csstype").Property.OffsetPath | undefined;
|
||||
readonly motionRotation?: import("csstype").Property.OffsetRotate | undefined;
|
||||
readonly objectFit?: import("csstype").Property.ObjectFit | undefined;
|
||||
readonly objectPosition?: import("csstype").Property.ObjectPosition<0 | (string & {})> | undefined;
|
||||
readonly offsetAnchor?: import("csstype").Property.OffsetAnchor<0 | (string & {})> | undefined;
|
||||
readonly offsetDistance?: import("csstype").Property.OffsetDistance<0 | (string & {})> | undefined;
|
||||
readonly offsetPath?: import("csstype").Property.OffsetPath | undefined;
|
||||
readonly offsetPosition?: import("csstype").Property.OffsetPosition<0 | (string & {})> | undefined;
|
||||
readonly offsetRotate?: import("csstype").Property.OffsetRotate | undefined;
|
||||
readonly offsetRotation?: import("csstype").Property.OffsetRotate | undefined;
|
||||
readonly opacity?: import("csstype").Property.Opacity | undefined;
|
||||
readonly order?: import("csstype").Property.Order | undefined;
|
||||
readonly orphans?: import("csstype").Property.Orphans | undefined;
|
||||
readonly outlineColor?: import("csstype").Property.OutlineColor | undefined;
|
||||
readonly outlineOffset?: import("csstype").Property.OutlineOffset<0 | (string & {})> | undefined;
|
||||
readonly outlineStyle?: import("csstype").Property.OutlineStyle | undefined;
|
||||
readonly outlineWidth?: import("csstype").Property.OutlineWidth<0 | (string & {})> | undefined;
|
||||
readonly overflowAnchor?: import("csstype").Property.OverflowAnchor | undefined;
|
||||
readonly overflowBlock?: import("csstype").Property.OverflowBlock | undefined;
|
||||
readonly overflowClipBox?: import("csstype").Property.OverflowClipBox | undefined;
|
||||
readonly overflowClipMargin?: import("csstype").Property.OverflowClipMargin<0 | (string & {})> | undefined;
|
||||
readonly overflowInline?: import("csstype").Property.OverflowInline | undefined;
|
||||
readonly overflowWrap?: import("csstype").Property.OverflowWrap | undefined;
|
||||
readonly overflowX?: import("csstype").Property.OverflowX | undefined;
|
||||
readonly overflowY?: import("csstype").Property.OverflowY | undefined;
|
||||
readonly overlay?: import("csstype").Property.Overlay | undefined;
|
||||
readonly overscrollBehaviorBlock?: import("csstype").Property.OverscrollBehaviorBlock | undefined;
|
||||
readonly overscrollBehaviorInline?: import("csstype").Property.OverscrollBehaviorInline | undefined;
|
||||
readonly overscrollBehaviorX?: import("csstype").Property.OverscrollBehaviorX | undefined;
|
||||
readonly overscrollBehaviorY?: import("csstype").Property.OverscrollBehaviorY | undefined;
|
||||
readonly paddingBlockEnd?: import("csstype").Property.PaddingBlockEnd<0 | (string & {})> | undefined;
|
||||
readonly paddingBlockStart?: import("csstype").Property.PaddingBlockStart<0 | (string & {})> | undefined;
|
||||
readonly paddingBottom?: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
|
||||
readonly paddingInlineEnd?: import("csstype").Property.PaddingInlineEnd<0 | (string & {})> | undefined;
|
||||
readonly paddingInlineStart?: import("csstype").Property.PaddingInlineStart<0 | (string & {})> | undefined;
|
||||
readonly paddingLeft?: import("csstype").Property.PaddingLeft<0 | (string & {})> | undefined;
|
||||
readonly paddingRight?: import("csstype").Property.PaddingRight<0 | (string & {})> | undefined;
|
||||
readonly paddingTop?: import("csstype").Property.PaddingTop<0 | (string & {})> | undefined;
|
||||
readonly page?: import("csstype").Property.Page | undefined;
|
||||
readonly pageBreakAfter?: import("csstype").Property.PageBreakAfter | undefined;
|
||||
readonly pageBreakBefore?: import("csstype").Property.PageBreakBefore | undefined;
|
||||
readonly pageBreakInside?: import("csstype").Property.PageBreakInside | undefined;
|
||||
readonly paintOrder?: import("csstype").Property.PaintOrder | undefined;
|
||||
readonly perspective?: import("csstype").Property.Perspective<0 | (string & {})> | undefined;
|
||||
readonly perspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<0 | (string & {})> | undefined;
|
||||
readonly pointerEvents?: import("csstype").Property.PointerEvents | undefined;
|
||||
position: "relative" | "absolute" | "fixed" | "sticky" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "static";
|
||||
readonly printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
|
||||
readonly quotes?: import("csstype").Property.Quotes | undefined;
|
||||
readonly resize?: import("csstype").Property.Resize | undefined;
|
||||
readonly right?: import("csstype").Property.Right<0 | (string & {})> | undefined;
|
||||
readonly rotate?: import("csstype").Property.Rotate | undefined;
|
||||
readonly rowGap?: import("csstype").Property.RowGap<0 | (string & {})> | undefined;
|
||||
readonly rubyAlign?: import("csstype").Property.RubyAlign | undefined;
|
||||
readonly rubyMerge?: import("csstype").Property.RubyMerge | undefined;
|
||||
readonly rubyPosition?: import("csstype").Property.RubyPosition | undefined;
|
||||
readonly scale?: import("csstype").Property.Scale | undefined;
|
||||
readonly scrollBehavior?: import("csstype").Property.ScrollBehavior | undefined;
|
||||
readonly scrollMarginBlockEnd?: import("csstype").Property.ScrollMarginBlockEnd<0 | (string & {})> | undefined;
|
||||
readonly scrollMarginBlockStart?: import("csstype").Property.ScrollMarginBlockStart<0 | (string & {})> | undefined;
|
||||
readonly scrollMarginBottom?: import("csstype").Property.ScrollMarginBottom<0 | (string & {})> | undefined;
|
||||
readonly scrollMarginInlineEnd?: import("csstype").Property.ScrollMarginInlineEnd<0 | (string & {})> | undefined;
|
||||
readonly scrollMarginInlineStart?: import("csstype").Property.ScrollMarginInlineStart<0 | (string & {})> | undefined;
|
||||
readonly scrollMarginLeft?: import("csstype").Property.ScrollMarginLeft<0 | (string & {})> | undefined;
|
||||
readonly scrollMarginRight?: import("csstype").Property.ScrollMarginRight<0 | (string & {})> | undefined;
|
||||
readonly scrollMarginTop?: import("csstype").Property.ScrollMarginTop<0 | (string & {})> | undefined;
|
||||
readonly scrollPaddingBlockEnd?: import("csstype").Property.ScrollPaddingBlockEnd<0 | (string & {})> | undefined;
|
||||
readonly scrollPaddingBlockStart?: import("csstype").Property.ScrollPaddingBlockStart<0 | (string & {})> | undefined;
|
||||
readonly scrollPaddingBottom?: import("csstype").Property.ScrollPaddingBottom<0 | (string & {})> | undefined;
|
||||
readonly scrollPaddingInlineEnd?: import("csstype").Property.ScrollPaddingInlineEnd<0 | (string & {})> | undefined;
|
||||
readonly scrollPaddingInlineStart?: import("csstype").Property.ScrollPaddingInlineStart<0 | (string & {})> | undefined;
|
||||
readonly scrollPaddingLeft?: import("csstype").Property.ScrollPaddingLeft<0 | (string & {})> | undefined;
|
||||
readonly scrollPaddingRight?: import("csstype").Property.ScrollPaddingRight<0 | (string & {})> | undefined;
|
||||
readonly scrollPaddingTop?: import("csstype").Property.ScrollPaddingTop<0 | (string & {})> | undefined;
|
||||
readonly scrollSnapAlign?: import("csstype").Property.ScrollSnapAlign | undefined;
|
||||
readonly scrollSnapMarginBottom?: import("csstype").Property.ScrollMarginBottom<0 | (string & {})> | undefined;
|
||||
readonly scrollSnapMarginLeft?: import("csstype").Property.ScrollMarginLeft<0 | (string & {})> | undefined;
|
||||
readonly scrollSnapMarginRight?: import("csstype").Property.ScrollMarginRight<0 | (string & {})> | undefined;
|
||||
readonly scrollSnapMarginTop?: import("csstype").Property.ScrollMarginTop<0 | (string & {})> | undefined;
|
||||
readonly scrollSnapStop?: import("csstype").Property.ScrollSnapStop | undefined;
|
||||
readonly scrollSnapType?: import("csstype").Property.ScrollSnapType | undefined;
|
||||
readonly scrollTimelineAxis?: import("csstype").Property.ScrollTimelineAxis | undefined;
|
||||
readonly scrollTimelineName?: import("csstype").Property.ScrollTimelineName | undefined;
|
||||
readonly scrollbarColor?: import("csstype").Property.ScrollbarColor | undefined;
|
||||
readonly scrollbarGutter?: import("csstype").Property.ScrollbarGutter | undefined;
|
||||
readonly scrollbarWidth?: import("csstype").Property.ScrollbarWidth | undefined;
|
||||
readonly shapeImageThreshold?: import("csstype").Property.ShapeImageThreshold | undefined;
|
||||
readonly shapeMargin?: import("csstype").Property.ShapeMargin<0 | (string & {})> | undefined;
|
||||
readonly shapeOutside?: import("csstype").Property.ShapeOutside | undefined;
|
||||
readonly tabSize?: import("csstype").Property.TabSize<0 | (string & {})> | undefined;
|
||||
readonly tableLayout?: import("csstype").Property.TableLayout | undefined;
|
||||
readonly textAlign?: import("csstype").Property.TextAlign | undefined;
|
||||
readonly textAlignLast?: import("csstype").Property.TextAlignLast | undefined;
|
||||
readonly textCombineUpright?: import("csstype").Property.TextCombineUpright | undefined;
|
||||
readonly textDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
|
||||
readonly textDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
|
||||
readonly textDecorationSkip?: import("csstype").Property.TextDecorationSkip | undefined;
|
||||
readonly textDecorationSkipInk?: import("csstype").Property.TextDecorationSkipInk | undefined;
|
||||
readonly textDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
|
||||
readonly textDecorationThickness?: import("csstype").Property.TextDecorationThickness<0 | (string & {})> | undefined;
|
||||
readonly textEmphasisColor?: import("csstype").Property.TextEmphasisColor | undefined;
|
||||
readonly textEmphasisPosition?: import("csstype").Property.TextEmphasisPosition | undefined;
|
||||
readonly textEmphasisStyle?: import("csstype").Property.TextEmphasisStyle | undefined;
|
||||
readonly textIndent?: import("csstype").Property.TextIndent<0 | (string & {})> | undefined;
|
||||
readonly textJustify?: import("csstype").Property.TextJustify | undefined;
|
||||
readonly textOrientation?: import("csstype").Property.TextOrientation | undefined;
|
||||
readonly textOverflow?: import("csstype").Property.TextOverflow | undefined;
|
||||
readonly textRendering?: import("csstype").Property.TextRendering | undefined;
|
||||
readonly textShadow?: import("csstype").Property.TextShadow | undefined;
|
||||
readonly textSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
|
||||
readonly textTransform?: import("csstype").Property.TextTransform | undefined;
|
||||
readonly textUnderlineOffset?: import("csstype").Property.TextUnderlineOffset<0 | (string & {})> | undefined;
|
||||
readonly textUnderlinePosition?: import("csstype").Property.TextUnderlinePosition | undefined;
|
||||
readonly textWrap?: import("csstype").Property.TextWrap | undefined;
|
||||
readonly timelineScope?: import("csstype").Property.TimelineScope | undefined;
|
||||
top: string | 0;
|
||||
readonly touchAction?: import("csstype").Property.TouchAction | undefined;
|
||||
transform: string | undefined;
|
||||
readonly transformBox?: import("csstype").Property.TransformBox | undefined;
|
||||
readonly transformOrigin?: import("csstype").Property.TransformOrigin<0 | (string & {})> | undefined;
|
||||
readonly transformStyle?: import("csstype").Property.TransformStyle | undefined;
|
||||
readonly transitionBehavior?: import("csstype").Property.TransitionBehavior | undefined;
|
||||
readonly transitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
|
||||
readonly transitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
|
||||
readonly transitionProperty?: import("csstype").Property.TransitionProperty | undefined;
|
||||
readonly transitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
|
||||
readonly translate?: import("csstype").Property.Translate<0 | (string & {})> | undefined;
|
||||
readonly unicodeBidi?: import("csstype").Property.UnicodeBidi | undefined;
|
||||
readonly userSelect?: import("csstype").Property.UserSelect | undefined;
|
||||
readonly verticalAlign?: import("csstype").Property.VerticalAlign<0 | (string & {})> | undefined;
|
||||
readonly viewTimelineAxis?: import("csstype").Property.ViewTimelineAxis | undefined;
|
||||
readonly viewTimelineInset?: import("csstype").Property.ViewTimelineInset<0 | (string & {})> | undefined;
|
||||
readonly viewTimelineName?: import("csstype").Property.ViewTimelineName | undefined;
|
||||
readonly viewTransitionName?: import("csstype").Property.ViewTransitionName | undefined;
|
||||
visibility?: string | undefined;
|
||||
readonly whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
|
||||
readonly whiteSpaceCollapse?: import("csstype").Property.WhiteSpaceCollapse | undefined;
|
||||
readonly whiteSpaceTrim?: import("csstype").Property.WhiteSpaceTrim | undefined;
|
||||
readonly widows?: import("csstype").Property.Widows | undefined;
|
||||
readonly width?: import("csstype").Property.Width<0 | (string & {})> | undefined;
|
||||
willChange?: string;
|
||||
readonly wordBreak?: import("csstype").Property.WordBreak | undefined;
|
||||
readonly wordSpacing?: import("csstype").Property.WordSpacing<0 | (string & {})> | undefined;
|
||||
readonly wordWrap?: import("csstype").Property.WordWrap | undefined;
|
||||
readonly writingMode?: import("csstype").Property.WritingMode | undefined;
|
||||
zIndex: string | (number & {}) | undefined;
|
||||
readonly zoom?: import("csstype").Property.Zoom | undefined;
|
||||
readonly all?: import("csstype").Property.All | undefined;
|
||||
readonly animation?: import("csstype").Property.Animation<string & {}> | undefined;
|
||||
readonly animationRange?: import("csstype").Property.AnimationRange<0 | (string & {})> | undefined;
|
||||
readonly background?: import("csstype").Property.Background<0 | (string & {})> | undefined;
|
||||
readonly backgroundPosition?: import("csstype").Property.BackgroundPosition<0 | (string & {})> | undefined;
|
||||
readonly border?: import("csstype").Property.Border<0 | (string & {})> | undefined;
|
||||
readonly borderBlock?: import("csstype").Property.BorderBlock<0 | (string & {})> | undefined;
|
||||
readonly borderBlockEnd?: import("csstype").Property.BorderBlockEnd<0 | (string & {})> | undefined;
|
||||
readonly borderBlockStart?: import("csstype").Property.BorderBlockStart<0 | (string & {})> | undefined;
|
||||
readonly borderBottom?: import("csstype").Property.BorderBottom<0 | (string & {})> | undefined;
|
||||
readonly borderColor?: import("csstype").Property.BorderColor | undefined;
|
||||
readonly borderImage?: import("csstype").Property.BorderImage | undefined;
|
||||
readonly borderInline?: import("csstype").Property.BorderInline<0 | (string & {})> | undefined;
|
||||
readonly borderInlineEnd?: import("csstype").Property.BorderInlineEnd<0 | (string & {})> | undefined;
|
||||
readonly borderInlineStart?: import("csstype").Property.BorderInlineStart<0 | (string & {})> | undefined;
|
||||
readonly borderLeft?: import("csstype").Property.BorderLeft<0 | (string & {})> | undefined;
|
||||
readonly borderRadius?: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
|
||||
readonly borderRight?: import("csstype").Property.BorderRight<0 | (string & {})> | undefined;
|
||||
readonly borderStyle?: import("csstype").Property.BorderStyle | undefined;
|
||||
readonly borderTop?: import("csstype").Property.BorderTop<0 | (string & {})> | undefined;
|
||||
readonly borderWidth?: import("csstype").Property.BorderWidth<0 | (string & {})> | undefined;
|
||||
readonly caret?: import("csstype").Property.Caret | undefined;
|
||||
readonly columnRule?: import("csstype").Property.ColumnRule<0 | (string & {})> | undefined;
|
||||
readonly columns?: import("csstype").Property.Columns<0 | (string & {})> | undefined;
|
||||
readonly containIntrinsicSize?: import("csstype").Property.ContainIntrinsicSize<0 | (string & {})> | undefined;
|
||||
readonly container?: import("csstype").Property.Container | undefined;
|
||||
readonly flex?: import("csstype").Property.Flex<0 | (string & {})> | undefined;
|
||||
readonly flexFlow?: import("csstype").Property.FlexFlow | undefined;
|
||||
readonly font?: import("csstype").Property.Font | undefined;
|
||||
readonly gap?: import("csstype").Property.Gap<0 | (string & {})> | undefined;
|
||||
readonly grid?: import("csstype").Property.Grid | undefined;
|
||||
readonly gridArea?: import("csstype").Property.GridArea | undefined;
|
||||
readonly gridColumn?: import("csstype").Property.GridColumn | undefined;
|
||||
readonly gridRow?: import("csstype").Property.GridRow | undefined;
|
||||
readonly gridTemplate?: import("csstype").Property.GridTemplate | undefined;
|
||||
readonly inset?: import("csstype").Property.Inset<0 | (string & {})> | undefined;
|
||||
readonly insetBlock?: import("csstype").Property.InsetBlock<0 | (string & {})> | undefined;
|
||||
readonly insetInline?: import("csstype").Property.InsetInline<0 | (string & {})> | undefined;
|
||||
readonly lineClamp?: import("csstype").Property.LineClamp | undefined;
|
||||
readonly listStyle?: import("csstype").Property.ListStyle | undefined;
|
||||
readonly margin?: import("csstype").Property.Margin<0 | (string & {})> | undefined;
|
||||
readonly marginBlock?: import("csstype").Property.MarginBlock<0 | (string & {})> | undefined;
|
||||
readonly marginInline?: import("csstype").Property.MarginInline<0 | (string & {})> | undefined;
|
||||
readonly mask?: import("csstype").Property.Mask<0 | (string & {})> | undefined;
|
||||
readonly maskBorder?: import("csstype").Property.MaskBorder | undefined;
|
||||
readonly motion?: import("csstype").Property.Offset<0 | (string & {})> | undefined;
|
||||
readonly offset?: import("csstype").Property.Offset<0 | (string & {})> | undefined;
|
||||
readonly outline?: import("csstype").Property.Outline<0 | (string & {})> | undefined;
|
||||
readonly overflow?: import("csstype").Property.Overflow | undefined;
|
||||
readonly overscrollBehavior?: import("csstype").Property.OverscrollBehavior | undefined;
|
||||
readonly padding?: import("csstype").Property.Padding<0 | (string & {})> | undefined;
|
||||
readonly paddingBlock?: import("csstype").Property.PaddingBlock<0 | (string & {})> | undefined;
|
||||
readonly paddingInline?: import("csstype").Property.PaddingInline<0 | (string & {})> | undefined;
|
||||
readonly placeContent?: import("csstype").Property.PlaceContent | undefined;
|
||||
readonly placeItems?: import("csstype").Property.PlaceItems | undefined;
|
||||
readonly placeSelf?: import("csstype").Property.PlaceSelf | undefined;
|
||||
readonly scrollMargin?: import("csstype").Property.ScrollMargin<0 | (string & {})> | undefined;
|
||||
readonly scrollMarginBlock?: import("csstype").Property.ScrollMarginBlock<0 | (string & {})> | undefined;
|
||||
readonly scrollMarginInline?: import("csstype").Property.ScrollMarginInline<0 | (string & {})> | undefined;
|
||||
readonly scrollPadding?: import("csstype").Property.ScrollPadding<0 | (string & {})> | undefined;
|
||||
readonly scrollPaddingBlock?: import("csstype").Property.ScrollPaddingBlock<0 | (string & {})> | undefined;
|
||||
readonly scrollPaddingInline?: import("csstype").Property.ScrollPaddingInline<0 | (string & {})> | undefined;
|
||||
readonly scrollSnapMargin?: import("csstype").Property.ScrollMargin<0 | (string & {})> | undefined;
|
||||
readonly scrollTimeline?: import("csstype").Property.ScrollTimeline | undefined;
|
||||
readonly textDecoration?: import("csstype").Property.TextDecoration<0 | (string & {})> | undefined;
|
||||
readonly textEmphasis?: import("csstype").Property.TextEmphasis | undefined;
|
||||
readonly transition?: import("csstype").Property.Transition<string & {}> | undefined;
|
||||
readonly viewTimeline?: import("csstype").Property.ViewTimeline | undefined;
|
||||
readonly MozAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
|
||||
readonly MozAnimationDirection?: import("csstype").Property.AnimationDirection | undefined;
|
||||
readonly MozAnimationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
|
||||
readonly MozAnimationFillMode?: import("csstype").Property.AnimationFillMode | undefined;
|
||||
readonly MozAnimationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
|
||||
readonly MozAnimationName?: import("csstype").Property.AnimationName | undefined;
|
||||
readonly MozAnimationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
|
||||
readonly MozAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
|
||||
readonly MozAppearance?: import("csstype").Property.MozAppearance | undefined;
|
||||
readonly MozBinding?: import("csstype").Property.MozBinding | undefined;
|
||||
readonly MozBorderBottomColors?: import("csstype").Property.MozBorderBottomColors | undefined;
|
||||
readonly MozBorderEndColor?: import("csstype").Property.BorderInlineEndColor | undefined;
|
||||
readonly MozBorderEndStyle?: import("csstype").Property.BorderInlineEndStyle | undefined;
|
||||
readonly MozBorderEndWidth?: import("csstype").Property.BorderInlineEndWidth<0 | (string & {})> | undefined;
|
||||
readonly MozBorderLeftColors?: import("csstype").Property.MozBorderLeftColors | undefined;
|
||||
readonly MozBorderRightColors?: import("csstype").Property.MozBorderRightColors | undefined;
|
||||
readonly MozBorderStartColor?: import("csstype").Property.BorderInlineStartColor | undefined;
|
||||
readonly MozBorderStartStyle?: import("csstype").Property.BorderInlineStartStyle | undefined;
|
||||
readonly MozBorderTopColors?: import("csstype").Property.MozBorderTopColors | undefined;
|
||||
readonly MozBoxSizing?: import("csstype").Property.BoxSizing | undefined;
|
||||
readonly MozColumnCount?: import("csstype").Property.ColumnCount | undefined;
|
||||
readonly MozColumnFill?: import("csstype").Property.ColumnFill | undefined;
|
||||
readonly MozColumnRuleColor?: import("csstype").Property.ColumnRuleColor | undefined;
|
||||
readonly MozColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | undefined;
|
||||
readonly MozColumnRuleWidth?: import("csstype").Property.ColumnRuleWidth<0 | (string & {})> | undefined;
|
||||
readonly MozColumnWidth?: import("csstype").Property.ColumnWidth<0 | (string & {})> | undefined;
|
||||
readonly MozContextProperties?: import("csstype").Property.MozContextProperties | undefined;
|
||||
readonly MozFontFeatureSettings?: import("csstype").Property.FontFeatureSettings | undefined;
|
||||
readonly MozFontLanguageOverride?: import("csstype").Property.FontLanguageOverride | undefined;
|
||||
readonly MozHyphens?: import("csstype").Property.Hyphens | undefined;
|
||||
readonly MozImageRegion?: import("csstype").Property.MozImageRegion | undefined;
|
||||
readonly MozMarginEnd?: import("csstype").Property.MarginInlineEnd<0 | (string & {})> | undefined;
|
||||
readonly MozMarginStart?: import("csstype").Property.MarginInlineStart<0 | (string & {})> | undefined;
|
||||
readonly MozOrient?: import("csstype").Property.MozOrient | undefined;
|
||||
readonly MozOsxFontSmoothing?: import("csstype").Property.FontSmooth<0 | (string & {})> | undefined;
|
||||
readonly MozOutlineRadiusBottomleft?: import("csstype").Property.MozOutlineRadiusBottomleft<0 | (string & {})> | undefined;
|
||||
readonly MozOutlineRadiusBottomright?: import("csstype").Property.MozOutlineRadiusBottomright<0 | (string & {})> | undefined;
|
||||
readonly MozOutlineRadiusTopleft?: import("csstype").Property.MozOutlineRadiusTopleft<0 | (string & {})> | undefined;
|
||||
readonly MozOutlineRadiusTopright?: import("csstype").Property.MozOutlineRadiusTopright<0 | (string & {})> | undefined;
|
||||
readonly MozPaddingEnd?: import("csstype").Property.PaddingInlineEnd<0 | (string & {})> | undefined;
|
||||
readonly MozPaddingStart?: import("csstype").Property.PaddingInlineStart<0 | (string & {})> | undefined;
|
||||
readonly MozStackSizing?: import("csstype").Property.MozStackSizing | undefined;
|
||||
readonly MozTabSize?: import("csstype").Property.TabSize<0 | (string & {})> | undefined;
|
||||
readonly MozTextBlink?: import("csstype").Property.MozTextBlink | undefined;
|
||||
readonly MozTextSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
|
||||
readonly MozUserFocus?: import("csstype").Property.MozUserFocus | undefined;
|
||||
readonly MozUserModify?: import("csstype").Property.MozUserModify | undefined;
|
||||
readonly MozUserSelect?: import("csstype").Property.UserSelect | undefined;
|
||||
readonly MozWindowDragging?: import("csstype").Property.MozWindowDragging | undefined;
|
||||
readonly MozWindowShadow?: import("csstype").Property.MozWindowShadow | undefined;
|
||||
readonly msAccelerator?: import("csstype").Property.MsAccelerator | undefined;
|
||||
readonly msBlockProgression?: import("csstype").Property.MsBlockProgression | undefined;
|
||||
readonly msContentZoomChaining?: import("csstype").Property.MsContentZoomChaining | undefined;
|
||||
readonly msContentZoomLimitMax?: import("csstype").Property.MsContentZoomLimitMax | undefined;
|
||||
readonly msContentZoomLimitMin?: import("csstype").Property.MsContentZoomLimitMin | undefined;
|
||||
readonly msContentZoomSnapPoints?: import("csstype").Property.MsContentZoomSnapPoints | undefined;
|
||||
readonly msContentZoomSnapType?: import("csstype").Property.MsContentZoomSnapType | undefined;
|
||||
readonly msContentZooming?: import("csstype").Property.MsContentZooming | undefined;
|
||||
readonly msFilter?: import("csstype").Property.MsFilter | undefined;
|
||||
readonly msFlexDirection?: import("csstype").Property.FlexDirection | undefined;
|
||||
readonly msFlexPositive?: import("csstype").Property.FlexGrow | undefined;
|
||||
readonly msFlowFrom?: import("csstype").Property.MsFlowFrom | undefined;
|
||||
readonly msFlowInto?: import("csstype").Property.MsFlowInto | undefined;
|
||||
readonly msGridColumns?: import("csstype").Property.MsGridColumns<0 | (string & {})> | undefined;
|
||||
readonly msGridRows?: import("csstype").Property.MsGridRows<0 | (string & {})> | undefined;
|
||||
readonly msHighContrastAdjust?: import("csstype").Property.MsHighContrastAdjust | undefined;
|
||||
readonly msHyphenateLimitChars?: import("csstype").Property.MsHyphenateLimitChars | undefined;
|
||||
readonly msHyphenateLimitLines?: import("csstype").Property.MsHyphenateLimitLines | undefined;
|
||||
readonly msHyphenateLimitZone?: import("csstype").Property.MsHyphenateLimitZone<0 | (string & {})> | undefined;
|
||||
readonly msHyphens?: import("csstype").Property.Hyphens | undefined;
|
||||
readonly msImeAlign?: import("csstype").Property.MsImeAlign | undefined;
|
||||
readonly msLineBreak?: import("csstype").Property.LineBreak | undefined;
|
||||
readonly msOrder?: import("csstype").Property.Order | undefined;
|
||||
readonly msOverflowStyle?: import("csstype").Property.MsOverflowStyle | undefined;
|
||||
readonly msOverflowX?: import("csstype").Property.OverflowX | undefined;
|
||||
readonly msOverflowY?: import("csstype").Property.OverflowY | undefined;
|
||||
readonly msScrollChaining?: import("csstype").Property.MsScrollChaining | undefined;
|
||||
readonly msScrollLimitXMax?: import("csstype").Property.MsScrollLimitXMax<0 | (string & {})> | undefined;
|
||||
readonly msScrollLimitXMin?: import("csstype").Property.MsScrollLimitXMin<0 | (string & {})> | undefined;
|
||||
readonly msScrollLimitYMax?: import("csstype").Property.MsScrollLimitYMax<0 | (string & {})> | undefined;
|
||||
readonly msScrollLimitYMin?: import("csstype").Property.MsScrollLimitYMin<0 | (string & {})> | undefined;
|
||||
readonly msScrollRails?: import("csstype").Property.MsScrollRails | undefined;
|
||||
readonly msScrollSnapPointsX?: import("csstype").Property.MsScrollSnapPointsX | undefined;
|
||||
readonly msScrollSnapPointsY?: import("csstype").Property.MsScrollSnapPointsY | undefined;
|
||||
readonly msScrollSnapType?: import("csstype").Property.MsScrollSnapType | undefined;
|
||||
readonly msScrollTranslation?: import("csstype").Property.MsScrollTranslation | undefined;
|
||||
readonly msScrollbar3dlightColor?: import("csstype").Property.MsScrollbar3dlightColor | undefined;
|
||||
readonly msScrollbarArrowColor?: import("csstype").Property.MsScrollbarArrowColor | undefined;
|
||||
readonly msScrollbarBaseColor?: import("csstype").Property.MsScrollbarBaseColor | undefined;
|
||||
readonly msScrollbarDarkshadowColor?: import("csstype").Property.MsScrollbarDarkshadowColor | undefined;
|
||||
readonly msScrollbarFaceColor?: import("csstype").Property.MsScrollbarFaceColor | undefined;
|
||||
readonly msScrollbarHighlightColor?: import("csstype").Property.MsScrollbarHighlightColor | undefined;
|
||||
readonly msScrollbarShadowColor?: import("csstype").Property.MsScrollbarShadowColor | undefined;
|
||||
readonly msScrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | undefined;
|
||||
readonly msTextAutospace?: import("csstype").Property.MsTextAutospace | undefined;
|
||||
readonly msTextCombineHorizontal?: import("csstype").Property.TextCombineUpright | undefined;
|
||||
readonly msTextOverflow?: import("csstype").Property.TextOverflow | undefined;
|
||||
readonly msTouchAction?: import("csstype").Property.TouchAction | undefined;
|
||||
readonly msTouchSelect?: import("csstype").Property.MsTouchSelect | undefined;
|
||||
readonly msTransform?: import("csstype").Property.Transform | undefined;
|
||||
readonly msTransformOrigin?: import("csstype").Property.TransformOrigin<0 | (string & {})> | undefined;
|
||||
readonly msTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
|
||||
readonly msTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
|
||||
readonly msTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
|
||||
readonly msTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
|
||||
readonly msUserSelect?: import("csstype").Property.MsUserSelect | undefined;
|
||||
readonly msWordBreak?: import("csstype").Property.WordBreak | undefined;
|
||||
readonly msWrapFlow?: import("csstype").Property.MsWrapFlow | undefined;
|
||||
readonly msWrapMargin?: import("csstype").Property.MsWrapMargin<0 | (string & {})> | undefined;
|
||||
readonly msWrapThrough?: import("csstype").Property.MsWrapThrough | undefined;
|
||||
readonly msWritingMode?: import("csstype").Property.WritingMode | undefined;
|
||||
readonly WebkitAlignContent?: import("csstype").Property.AlignContent | undefined;
|
||||
readonly WebkitAlignItems?: import("csstype").Property.AlignItems | undefined;
|
||||
readonly WebkitAlignSelf?: import("csstype").Property.AlignSelf | undefined;
|
||||
readonly WebkitAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
|
||||
readonly WebkitAnimationDirection?: import("csstype").Property.AnimationDirection | undefined;
|
||||
readonly WebkitAnimationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
|
||||
readonly WebkitAnimationFillMode?: import("csstype").Property.AnimationFillMode | undefined;
|
||||
readonly WebkitAnimationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
|
||||
readonly WebkitAnimationName?: import("csstype").Property.AnimationName | undefined;
|
||||
readonly WebkitAnimationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
|
||||
readonly WebkitAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
|
||||
readonly WebkitAppearance?: import("csstype").Property.WebkitAppearance | undefined;
|
||||
readonly WebkitBackdropFilter?: import("csstype").Property.BackdropFilter | undefined;
|
||||
readonly WebkitBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
|
||||
readonly WebkitBackgroundClip?: import("csstype").Property.BackgroundClip | undefined;
|
||||
readonly WebkitBackgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
|
||||
readonly WebkitBackgroundSize?: import("csstype").Property.BackgroundSize<0 | (string & {})> | undefined;
|
||||
readonly WebkitBorderBeforeColor?: import("csstype").Property.WebkitBorderBeforeColor | undefined;
|
||||
readonly WebkitBorderBeforeStyle?: import("csstype").Property.WebkitBorderBeforeStyle | undefined;
|
||||
readonly WebkitBorderBeforeWidth?: import("csstype").Property.WebkitBorderBeforeWidth<0 | (string & {})> | undefined;
|
||||
readonly WebkitBorderBottomLeftRadius?: import("csstype").Property.BorderBottomLeftRadius<0 | (string & {})> | undefined;
|
||||
readonly WebkitBorderBottomRightRadius?: import("csstype").Property.BorderBottomRightRadius<0 | (string & {})> | undefined;
|
||||
readonly WebkitBorderImageSlice?: import("csstype").Property.BorderImageSlice | undefined;
|
||||
readonly WebkitBorderTopLeftRadius?: import("csstype").Property.BorderTopLeftRadius<0 | (string & {})> | undefined;
|
||||
readonly WebkitBorderTopRightRadius?: import("csstype").Property.BorderTopRightRadius<0 | (string & {})> | undefined;
|
||||
readonly WebkitBoxDecorationBreak?: import("csstype").Property.BoxDecorationBreak | undefined;
|
||||
readonly WebkitBoxReflect?: import("csstype").Property.WebkitBoxReflect<0 | (string & {})> | undefined;
|
||||
readonly WebkitBoxShadow?: import("csstype").Property.BoxShadow | undefined;
|
||||
readonly WebkitBoxSizing?: import("csstype").Property.BoxSizing | undefined;
|
||||
readonly WebkitClipPath?: import("csstype").Property.ClipPath | undefined;
|
||||
readonly WebkitColumnCount?: import("csstype").Property.ColumnCount | undefined;
|
||||
readonly WebkitColumnFill?: import("csstype").Property.ColumnFill | undefined;
|
||||
readonly WebkitColumnRuleColor?: import("csstype").Property.ColumnRuleColor | undefined;
|
||||
readonly WebkitColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | undefined;
|
||||
readonly WebkitColumnRuleWidth?: import("csstype").Property.ColumnRuleWidth<0 | (string & {})> | undefined;
|
||||
readonly WebkitColumnSpan?: import("csstype").Property.ColumnSpan | undefined;
|
||||
readonly WebkitColumnWidth?: import("csstype").Property.ColumnWidth<0 | (string & {})> | undefined;
|
||||
readonly WebkitFilter?: import("csstype").Property.Filter | undefined;
|
||||
readonly WebkitFlexBasis?: import("csstype").Property.FlexBasis<0 | (string & {})> | undefined;
|
||||
readonly WebkitFlexDirection?: import("csstype").Property.FlexDirection | undefined;
|
||||
readonly WebkitFlexGrow?: import("csstype").Property.FlexGrow | undefined;
|
||||
readonly WebkitFlexShrink?: import("csstype").Property.FlexShrink | undefined;
|
||||
readonly WebkitFlexWrap?: import("csstype").Property.FlexWrap | undefined;
|
||||
readonly WebkitFontFeatureSettings?: import("csstype").Property.FontFeatureSettings | undefined;
|
||||
readonly WebkitFontKerning?: import("csstype").Property.FontKerning | undefined;
|
||||
readonly WebkitFontSmoothing?: import("csstype").Property.FontSmooth<0 | (string & {})> | undefined;
|
||||
readonly WebkitFontVariantLigatures?: import("csstype").Property.FontVariantLigatures | undefined;
|
||||
readonly WebkitHyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
|
||||
readonly WebkitHyphens?: import("csstype").Property.Hyphens | undefined;
|
||||
readonly WebkitInitialLetter?: import("csstype").Property.InitialLetter | undefined;
|
||||
readonly WebkitJustifyContent?: import("csstype").Property.JustifyContent | undefined;
|
||||
readonly WebkitLineBreak?: import("csstype").Property.LineBreak | undefined;
|
||||
readonly WebkitLineClamp?: import("csstype").Property.WebkitLineClamp | undefined;
|
||||
readonly WebkitMarginEnd?: import("csstype").Property.MarginInlineEnd<0 | (string & {})> | undefined;
|
||||
readonly WebkitMarginStart?: import("csstype").Property.MarginInlineStart<0 | (string & {})> | undefined;
|
||||
readonly WebkitMaskAttachment?: import("csstype").Property.WebkitMaskAttachment | undefined;
|
||||
readonly WebkitMaskBoxImageOutset?: import("csstype").Property.MaskBorderOutset<0 | (string & {})> | undefined;
|
||||
readonly WebkitMaskBoxImageRepeat?: import("csstype").Property.MaskBorderRepeat | undefined;
|
||||
readonly WebkitMaskBoxImageSlice?: import("csstype").Property.MaskBorderSlice | undefined;
|
||||
readonly WebkitMaskBoxImageSource?: import("csstype").Property.MaskBorderSource | undefined;
|
||||
readonly WebkitMaskBoxImageWidth?: import("csstype").Property.MaskBorderWidth<0 | (string & {})> | undefined;
|
||||
readonly WebkitMaskClip?: import("csstype").Property.WebkitMaskClip | undefined;
|
||||
readonly WebkitMaskComposite?: import("csstype").Property.WebkitMaskComposite | undefined;
|
||||
readonly WebkitMaskImage?: import("csstype").Property.WebkitMaskImage | undefined;
|
||||
readonly WebkitMaskOrigin?: import("csstype").Property.WebkitMaskOrigin | undefined;
|
||||
readonly WebkitMaskPosition?: import("csstype").Property.WebkitMaskPosition<0 | (string & {})> | undefined;
|
||||
readonly WebkitMaskPositionX?: import("csstype").Property.WebkitMaskPositionX<0 | (string & {})> | undefined;
|
||||
readonly WebkitMaskPositionY?: import("csstype").Property.WebkitMaskPositionY<0 | (string & {})> | undefined;
|
||||
readonly WebkitMaskRepeat?: import("csstype").Property.WebkitMaskRepeat | undefined;
|
||||
readonly WebkitMaskRepeatX?: import("csstype").Property.WebkitMaskRepeatX | undefined;
|
||||
readonly WebkitMaskRepeatY?: import("csstype").Property.WebkitMaskRepeatY | undefined;
|
||||
readonly WebkitMaskSize?: import("csstype").Property.WebkitMaskSize<0 | (string & {})> | undefined;
|
||||
readonly WebkitMaxInlineSize?: import("csstype").Property.MaxInlineSize<0 | (string & {})> | undefined;
|
||||
readonly WebkitOrder?: import("csstype").Property.Order | undefined;
|
||||
readonly WebkitOverflowScrolling?: import("csstype").Property.WebkitOverflowScrolling | undefined;
|
||||
readonly WebkitPaddingEnd?: import("csstype").Property.PaddingInlineEnd<0 | (string & {})> | undefined;
|
||||
readonly WebkitPaddingStart?: import("csstype").Property.PaddingInlineStart<0 | (string & {})> | undefined;
|
||||
readonly WebkitPerspective?: import("csstype").Property.Perspective<0 | (string & {})> | undefined;
|
||||
readonly WebkitPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<0 | (string & {})> | undefined;
|
||||
readonly WebkitPrintColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
|
||||
readonly WebkitRubyPosition?: import("csstype").Property.RubyPosition | undefined;
|
||||
readonly WebkitScrollSnapType?: import("csstype").Property.ScrollSnapType | undefined;
|
||||
readonly WebkitShapeMargin?: import("csstype").Property.ShapeMargin<0 | (string & {})> | undefined;
|
||||
readonly WebkitTapHighlightColor?: import("csstype").Property.WebkitTapHighlightColor | undefined;
|
||||
readonly WebkitTextCombine?: import("csstype").Property.TextCombineUpright | undefined;
|
||||
readonly WebkitTextDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
|
||||
readonly WebkitTextDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
|
||||
readonly WebkitTextDecorationSkip?: import("csstype").Property.TextDecorationSkip | undefined;
|
||||
readonly WebkitTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
|
||||
readonly WebkitTextEmphasisColor?: import("csstype").Property.TextEmphasisColor | undefined;
|
||||
readonly WebkitTextEmphasisPosition?: import("csstype").Property.TextEmphasisPosition | undefined;
|
||||
readonly WebkitTextEmphasisStyle?: import("csstype").Property.TextEmphasisStyle | undefined;
|
||||
readonly WebkitTextFillColor?: import("csstype").Property.WebkitTextFillColor | undefined;
|
||||
readonly WebkitTextOrientation?: import("csstype").Property.TextOrientation | undefined;
|
||||
readonly WebkitTextSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
|
||||
readonly WebkitTextStrokeColor?: import("csstype").Property.WebkitTextStrokeColor | undefined;
|
||||
readonly WebkitTextStrokeWidth?: import("csstype").Property.WebkitTextStrokeWidth<0 | (string & {})> | undefined;
|
||||
readonly WebkitTextUnderlinePosition?: import("csstype").Property.TextUnderlinePosition | undefined;
|
||||
readonly WebkitTouchCallout?: import("csstype").Property.WebkitTouchCallout | undefined;
|
||||
readonly WebkitTransform?: import("csstype").Property.Transform | undefined;
|
||||
readonly WebkitTransformOrigin?: import("csstype").Property.TransformOrigin<0 | (string & {})> | undefined;
|
||||
readonly WebkitTransformStyle?: import("csstype").Property.TransformStyle | undefined;
|
||||
readonly WebkitTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
|
||||
readonly WebkitTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
|
||||
readonly WebkitTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
|
||||
readonly WebkitTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
|
||||
readonly WebkitUserModify?: import("csstype").Property.WebkitUserModify | undefined;
|
||||
readonly WebkitUserSelect?: import("csstype").Property.UserSelect | undefined;
|
||||
readonly WebkitWritingMode?: import("csstype").Property.WritingMode | undefined;
|
||||
readonly MozAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
|
||||
readonly MozBorderImage?: import("csstype").Property.BorderImage | undefined;
|
||||
readonly MozColumnRule?: import("csstype").Property.ColumnRule<0 | (string & {})> | undefined;
|
||||
readonly MozColumns?: import("csstype").Property.Columns<0 | (string & {})> | undefined;
|
||||
readonly MozOutlineRadius?: import("csstype").Property.MozOutlineRadius<0 | (string & {})> | undefined;
|
||||
readonly msContentZoomLimit?: import("csstype").Property.MsContentZoomLimit | undefined;
|
||||
readonly msContentZoomSnap?: import("csstype").Property.MsContentZoomSnap | undefined;
|
||||
readonly msFlex?: import("csstype").Property.Flex<0 | (string & {})> | undefined;
|
||||
readonly msScrollLimit?: import("csstype").Property.MsScrollLimit | undefined;
|
||||
readonly msScrollSnapX?: import("csstype").Property.MsScrollSnapX | undefined;
|
||||
readonly msScrollSnapY?: import("csstype").Property.MsScrollSnapY | undefined;
|
||||
readonly msTransition?: import("csstype").Property.Transition<string & {}> | undefined;
|
||||
readonly WebkitAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
|
||||
readonly WebkitBorderBefore?: import("csstype").Property.WebkitBorderBefore<0 | (string & {})> | undefined;
|
||||
readonly WebkitBorderImage?: import("csstype").Property.BorderImage | undefined;
|
||||
readonly WebkitBorderRadius?: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
|
||||
readonly WebkitColumnRule?: import("csstype").Property.ColumnRule<0 | (string & {})> | undefined;
|
||||
readonly WebkitColumns?: import("csstype").Property.Columns<0 | (string & {})> | undefined;
|
||||
readonly WebkitFlex?: import("csstype").Property.Flex<0 | (string & {})> | undefined;
|
||||
readonly WebkitFlexFlow?: import("csstype").Property.FlexFlow | undefined;
|
||||
readonly WebkitMask?: import("csstype").Property.WebkitMask<0 | (string & {})> | undefined;
|
||||
readonly WebkitMaskBoxImage?: import("csstype").Property.MaskBorder | undefined;
|
||||
readonly WebkitTextEmphasis?: import("csstype").Property.TextEmphasis | undefined;
|
||||
readonly WebkitTextStroke?: import("csstype").Property.WebkitTextStroke<0 | (string & {})> | undefined;
|
||||
readonly WebkitTransition?: import("csstype").Property.Transition<string & {}> | undefined;
|
||||
readonly azimuth?: import("csstype").Property.Azimuth | undefined;
|
||||
readonly boxAlign?: import("csstype").Property.BoxAlign | undefined;
|
||||
readonly boxDirection?: import("csstype").Property.BoxDirection | undefined;
|
||||
readonly boxFlex?: import("csstype").Property.BoxFlex | undefined;
|
||||
readonly boxFlexGroup?: import("csstype").Property.BoxFlexGroup | undefined;
|
||||
readonly boxLines?: import("csstype").Property.BoxLines | undefined;
|
||||
readonly boxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
|
||||
readonly boxOrient?: import("csstype").Property.BoxOrient | undefined;
|
||||
readonly boxPack?: import("csstype").Property.BoxPack | undefined;
|
||||
readonly clip?: import("csstype").Property.Clip | undefined;
|
||||
readonly gridColumnGap?: import("csstype").Property.GridColumnGap<0 | (string & {})> | undefined;
|
||||
readonly gridGap?: import("csstype").Property.GridGap<0 | (string & {})> | undefined;
|
||||
readonly gridRowGap?: import("csstype").Property.GridRowGap<0 | (string & {})> | undefined;
|
||||
readonly imeMode?: import("csstype").Property.ImeMode | undefined;
|
||||
readonly offsetBlock?: import("csstype").Property.InsetBlock<0 | (string & {})> | undefined;
|
||||
readonly offsetBlockEnd?: import("csstype").Property.InsetBlockEnd<0 | (string & {})> | undefined;
|
||||
readonly offsetBlockStart?: import("csstype").Property.InsetBlockStart<0 | (string & {})> | undefined;
|
||||
readonly offsetInline?: import("csstype").Property.InsetInline<0 | (string & {})> | undefined;
|
||||
readonly offsetInlineEnd?: import("csstype").Property.InsetInlineEnd<0 | (string & {})> | undefined;
|
||||
readonly offsetInlineStart?: import("csstype").Property.InsetInlineStart<0 | (string & {})> | undefined;
|
||||
readonly scrollSnapCoordinate?: import("csstype").Property.ScrollSnapCoordinate<0 | (string & {})> | undefined;
|
||||
readonly scrollSnapDestination?: import("csstype").Property.ScrollSnapDestination<0 | (string & {})> | undefined;
|
||||
readonly scrollSnapPointsX?: import("csstype").Property.ScrollSnapPointsX | undefined;
|
||||
readonly scrollSnapPointsY?: import("csstype").Property.ScrollSnapPointsY | undefined;
|
||||
readonly scrollSnapTypeX?: import("csstype").Property.ScrollSnapTypeX | undefined;
|
||||
readonly scrollSnapTypeY?: import("csstype").Property.ScrollSnapTypeY | undefined;
|
||||
readonly KhtmlBoxAlign?: import("csstype").Property.BoxAlign | undefined;
|
||||
readonly KhtmlBoxDirection?: import("csstype").Property.BoxDirection | undefined;
|
||||
readonly KhtmlBoxFlex?: import("csstype").Property.BoxFlex | undefined;
|
||||
readonly KhtmlBoxFlexGroup?: import("csstype").Property.BoxFlexGroup | undefined;
|
||||
readonly KhtmlBoxLines?: import("csstype").Property.BoxLines | undefined;
|
||||
readonly KhtmlBoxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
|
||||
readonly KhtmlBoxOrient?: import("csstype").Property.BoxOrient | undefined;
|
||||
readonly KhtmlBoxPack?: import("csstype").Property.BoxPack | undefined;
|
||||
readonly KhtmlLineBreak?: import("csstype").Property.LineBreak | undefined;
|
||||
readonly KhtmlOpacity?: import("csstype").Property.Opacity | undefined;
|
||||
readonly KhtmlUserSelect?: import("csstype").Property.UserSelect | undefined;
|
||||
readonly MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
|
||||
readonly MozBackgroundClip?: import("csstype").Property.BackgroundClip | undefined;
|
||||
readonly MozBackgroundInlinePolicy?: import("csstype").Property.BoxDecorationBreak | undefined;
|
||||
readonly MozBackgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
|
||||
readonly MozBackgroundSize?: import("csstype").Property.BackgroundSize<0 | (string & {})> | undefined;
|
||||
readonly MozBorderRadius?: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
|
||||
readonly MozBorderRadiusBottomleft?: import("csstype").Property.BorderBottomLeftRadius<0 | (string & {})> | undefined;
|
||||
readonly MozBorderRadiusBottomright?: import("csstype").Property.BorderBottomRightRadius<0 | (string & {})> | undefined;
|
||||
readonly MozBorderRadiusTopleft?: import("csstype").Property.BorderTopLeftRadius<0 | (string & {})> | undefined;
|
||||
readonly MozBorderRadiusTopright?: import("csstype").Property.BorderTopRightRadius<0 | (string & {})> | undefined;
|
||||
readonly MozBoxAlign?: import("csstype").Property.BoxAlign | undefined;
|
||||
readonly MozBoxDirection?: import("csstype").Property.BoxDirection | undefined;
|
||||
readonly MozBoxFlex?: import("csstype").Property.BoxFlex | undefined;
|
||||
readonly MozBoxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
|
||||
readonly MozBoxOrient?: import("csstype").Property.BoxOrient | undefined;
|
||||
readonly MozBoxPack?: import("csstype").Property.BoxPack | undefined;
|
||||
readonly MozBoxShadow?: import("csstype").Property.BoxShadow | undefined;
|
||||
readonly MozFloatEdge?: import("csstype").Property.MozFloatEdge | undefined;
|
||||
readonly MozForceBrokenImageIcon?: import("csstype").Property.MozForceBrokenImageIcon | undefined;
|
||||
readonly MozOpacity?: import("csstype").Property.Opacity | undefined;
|
||||
readonly MozOutline?: import("csstype").Property.Outline<0 | (string & {})> | undefined;
|
||||
readonly MozOutlineColor?: import("csstype").Property.OutlineColor | undefined;
|
||||
readonly MozOutlineStyle?: import("csstype").Property.OutlineStyle | undefined;
|
||||
readonly MozOutlineWidth?: import("csstype").Property.OutlineWidth<0 | (string & {})> | undefined;
|
||||
readonly MozPerspective?: import("csstype").Property.Perspective<0 | (string & {})> | undefined;
|
||||
readonly MozPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<0 | (string & {})> | undefined;
|
||||
readonly MozTextAlignLast?: import("csstype").Property.TextAlignLast | undefined;
|
||||
readonly MozTextDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
|
||||
readonly MozTextDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
|
||||
readonly MozTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
|
||||
readonly MozTransform?: import("csstype").Property.Transform | undefined;
|
||||
readonly MozTransformOrigin?: import("csstype").Property.TransformOrigin<0 | (string & {})> | undefined;
|
||||
readonly MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
|
||||
readonly MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
|
||||
readonly MozTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
|
||||
readonly MozTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
|
||||
readonly MozTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
|
||||
readonly MozTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
|
||||
readonly MozUserInput?: import("csstype").Property.MozUserInput | undefined;
|
||||
readonly msImeMode?: import("csstype").Property.ImeMode | undefined;
|
||||
readonly OAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
|
||||
readonly OAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
|
||||
readonly OAnimationDirection?: import("csstype").Property.AnimationDirection | undefined;
|
||||
readonly OAnimationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
|
||||
readonly OAnimationFillMode?: import("csstype").Property.AnimationFillMode | undefined;
|
||||
readonly OAnimationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
|
||||
readonly OAnimationName?: import("csstype").Property.AnimationName | undefined;
|
||||
readonly OAnimationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
|
||||
readonly OAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
|
||||
readonly OBackgroundSize?: import("csstype").Property.BackgroundSize<0 | (string & {})> | undefined;
|
||||
readonly OBorderImage?: import("csstype").Property.BorderImage | undefined;
|
||||
readonly OObjectFit?: import("csstype").Property.ObjectFit | undefined;
|
||||
readonly OObjectPosition?: import("csstype").Property.ObjectPosition<0 | (string & {})> | undefined;
|
||||
readonly OTabSize?: import("csstype").Property.TabSize<0 | (string & {})> | undefined;
|
||||
readonly OTextOverflow?: import("csstype").Property.TextOverflow | undefined;
|
||||
readonly OTransform?: import("csstype").Property.Transform | undefined;
|
||||
readonly OTransformOrigin?: import("csstype").Property.TransformOrigin<0 | (string & {})> | undefined;
|
||||
readonly OTransition?: import("csstype").Property.Transition<string & {}> | undefined;
|
||||
readonly OTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
|
||||
readonly OTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
|
||||
readonly OTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
|
||||
readonly OTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
|
||||
readonly WebkitBoxAlign?: import("csstype").Property.BoxAlign | undefined;
|
||||
readonly WebkitBoxDirection?: import("csstype").Property.BoxDirection | undefined;
|
||||
readonly WebkitBoxFlex?: import("csstype").Property.BoxFlex | undefined;
|
||||
readonly WebkitBoxFlexGroup?: import("csstype").Property.BoxFlexGroup | undefined;
|
||||
readonly WebkitBoxLines?: import("csstype").Property.BoxLines | undefined;
|
||||
readonly WebkitBoxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
|
||||
readonly WebkitBoxOrient?: import("csstype").Property.BoxOrient | undefined;
|
||||
readonly WebkitBoxPack?: import("csstype").Property.BoxPack | undefined;
|
||||
readonly alignmentBaseline?: import("csstype").Property.AlignmentBaseline | undefined;
|
||||
readonly baselineShift?: import("csstype").Property.BaselineShift<0 | (string & {})> | undefined;
|
||||
readonly clipRule?: import("csstype").Property.ClipRule | undefined;
|
||||
readonly colorInterpolation?: import("csstype").Property.ColorInterpolation | undefined;
|
||||
readonly colorRendering?: import("csstype").Property.ColorRendering | undefined;
|
||||
readonly dominantBaseline?: import("csstype").Property.DominantBaseline | undefined;
|
||||
readonly fill?: import("csstype").Property.Fill | undefined;
|
||||
readonly fillOpacity?: import("csstype").Property.FillOpacity | undefined;
|
||||
readonly fillRule?: import("csstype").Property.FillRule | undefined;
|
||||
readonly floodColor?: import("csstype").Property.FloodColor | undefined;
|
||||
readonly floodOpacity?: import("csstype").Property.FloodOpacity | undefined;
|
||||
readonly glyphOrientationVertical?: import("csstype").Property.GlyphOrientationVertical | undefined;
|
||||
readonly lightingColor?: import("csstype").Property.LightingColor | undefined;
|
||||
readonly marker?: import("csstype").Property.Marker | undefined;
|
||||
readonly markerEnd?: import("csstype").Property.MarkerEnd | undefined;
|
||||
readonly markerMid?: import("csstype").Property.MarkerMid | undefined;
|
||||
readonly markerStart?: import("csstype").Property.MarkerStart | undefined;
|
||||
readonly shapeRendering?: import("csstype").Property.ShapeRendering | undefined;
|
||||
readonly stopColor?: import("csstype").Property.StopColor | undefined;
|
||||
readonly stopOpacity?: import("csstype").Property.StopOpacity | undefined;
|
||||
readonly stroke?: import("csstype").Property.Stroke | undefined;
|
||||
readonly strokeDasharray?: import("csstype").Property.StrokeDasharray<0 | (string & {})> | undefined;
|
||||
readonly strokeDashoffset?: import("csstype").Property.StrokeDashoffset<0 | (string & {})> | undefined;
|
||||
readonly strokeLinecap?: import("csstype").Property.StrokeLinecap | undefined;
|
||||
readonly strokeLinejoin?: import("csstype").Property.StrokeLinejoin | undefined;
|
||||
readonly strokeMiterlimit?: import("csstype").Property.StrokeMiterlimit | undefined;
|
||||
readonly strokeOpacity?: import("csstype").Property.StrokeOpacity | undefined;
|
||||
readonly strokeWidth?: import("csstype").Property.StrokeWidth<0 | (string & {})> | undefined;
|
||||
readonly textAnchor?: import("csstype").Property.TextAnchor | undefined;
|
||||
readonly vectorEffect?: import("csstype").Property.VectorEffect | undefined;
|
||||
readonly "pointer-events"?: string | undefined;
|
||||
readonly "--bits-floating-transform-origin": `${any} ${any}`;
|
||||
readonly "--bits-floating-available-width": "undefinedpx" | `${number}px`;
|
||||
readonly "--bits-floating-available-height": "undefinedpx" | `${number}px`;
|
||||
readonly "--bits-floating-anchor-width": "undefinedpx" | `${number}px`;
|
||||
readonly "--bits-floating-anchor-height": "undefinedpx" | `${number}px`;
|
||||
};
|
||||
readonly dir: Direction;
|
||||
};
|
||||
props: {
|
||||
readonly "data-side": "left" | "right" | "top" | "bottom";
|
||||
readonly "data-align": "center" | "end" | "start";
|
||||
readonly style: string;
|
||||
};
|
||||
arrowStyle: {
|
||||
[x: string]: string | number | undefined;
|
||||
position: string;
|
||||
left: string | undefined;
|
||||
top: string | undefined;
|
||||
"transform-origin": string;
|
||||
transform: string;
|
||||
visibility: string | undefined;
|
||||
};
|
||||
constructor(opts: FloatingContentStateOpts, root: FloatingRootState);
|
||||
}
|
||||
interface FloatingArrowStateOpts extends WithRefOpts {
|
||||
}
|
||||
export declare class FloatingArrowState {
|
||||
static create(opts: FloatingArrowStateOpts): FloatingArrowState;
|
||||
readonly opts: FloatingArrowStateOpts;
|
||||
readonly content: FloatingContentState;
|
||||
constructor(opts: FloatingArrowStateOpts, content: FloatingContentState);
|
||||
readonly props: {
|
||||
readonly id: string;
|
||||
readonly style: {
|
||||
[x: string]: string | number | undefined;
|
||||
position: string;
|
||||
left: string | undefined;
|
||||
top: string | undefined;
|
||||
"transform-origin": string;
|
||||
transform: string;
|
||||
visibility: string | undefined;
|
||||
};
|
||||
readonly "data-side": "left" | "right" | "top" | "bottom";
|
||||
};
|
||||
}
|
||||
interface FloatingAnchorStateOpts extends ReadableBoxedValues<{
|
||||
id: string;
|
||||
virtualEl?: Measurable | null;
|
||||
ref: Measurable | HTMLElement | null;
|
||||
}> {
|
||||
}
|
||||
export declare class FloatingAnchorState {
|
||||
static create(opts: FloatingAnchorStateOpts, tooltip?: boolean): FloatingAnchorState;
|
||||
readonly opts: FloatingAnchorStateOpts;
|
||||
readonly root: FloatingRootState;
|
||||
constructor(opts: FloatingAnchorStateOpts, root: FloatingRootState);
|
||||
}
|
||||
export declare function getSideFromPlacement(placement: Placement): "left" | "right" | "top" | "bottom";
|
||||
export declare function getAlignFromPlacement(placement: Placement): "center" | "end" | "start";
|
||||
export {};
|
||||
Generated
Vendored
+305
@@ -0,0 +1,305 @@
|
||||
import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size, } from "@floating-ui/dom";
|
||||
import { attachRef, cssToStyleObj, getWindow, styleToString, simpleBox, boxFrom, } from "svelte-toolbelt";
|
||||
import { Context, ElementSize, watch } from "runed";
|
||||
import { isNotNull } from "../../../internal/is.js";
|
||||
import { useId } from "../../../internal/use-id.js";
|
||||
import { useFloating } from "../../../internal/floating-svelte/use-floating.svelte.js";
|
||||
export const SIDE_OPTIONS = ["top", "right", "bottom", "left"];
|
||||
export const ALIGN_OPTIONS = ["start", "center", "end"];
|
||||
const OPPOSITE_SIDE = {
|
||||
top: "bottom",
|
||||
right: "left",
|
||||
bottom: "top",
|
||||
left: "right",
|
||||
};
|
||||
const FloatingRootContext = new Context("Floating.Root");
|
||||
const FloatingContentContext = new Context("Floating.Content");
|
||||
const FloatingTooltipRootContext = new Context("Floating.Root");
|
||||
export class FloatingRootState {
|
||||
static create(tooltip = false) {
|
||||
return tooltip
|
||||
? FloatingTooltipRootContext.set(new FloatingRootState())
|
||||
: FloatingRootContext.set(new FloatingRootState());
|
||||
}
|
||||
anchorNode = simpleBox(null);
|
||||
customAnchorNode = simpleBox(null);
|
||||
triggerNode = simpleBox(null);
|
||||
constructor() {
|
||||
$effect(() => {
|
||||
if (this.customAnchorNode.current) {
|
||||
if (typeof this.customAnchorNode.current === "string") {
|
||||
this.anchorNode.current = document.querySelector(this.customAnchorNode.current);
|
||||
}
|
||||
else {
|
||||
this.anchorNode.current = this.customAnchorNode.current;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.anchorNode.current = this.triggerNode.current;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
export class FloatingContentState {
|
||||
static create(opts, tooltip = false) {
|
||||
return tooltip
|
||||
? FloatingContentContext.set(new FloatingContentState(opts, FloatingTooltipRootContext.get()))
|
||||
: FloatingContentContext.set(new FloatingContentState(opts, FloatingRootContext.get()));
|
||||
}
|
||||
opts;
|
||||
root;
|
||||
// nodes
|
||||
contentRef = simpleBox(null);
|
||||
wrapperRef = simpleBox(null);
|
||||
arrowRef = simpleBox(null);
|
||||
contentAttachment = attachRef(this.contentRef);
|
||||
wrapperAttachment = attachRef(this.wrapperRef);
|
||||
arrowAttachment = attachRef(this.arrowRef);
|
||||
// ids
|
||||
arrowId = simpleBox(useId());
|
||||
#transformedStyle = $derived.by(() => {
|
||||
if (typeof this.opts.style === "string")
|
||||
return cssToStyleObj(this.opts.style);
|
||||
if (!this.opts.style)
|
||||
return {};
|
||||
});
|
||||
#updatePositionStrategy = undefined;
|
||||
#arrowSize = new ElementSize(() => this.arrowRef.current ?? undefined);
|
||||
#arrowWidth = $derived(this.#arrowSize?.width ?? 0);
|
||||
#arrowHeight = $derived(this.#arrowSize?.height ?? 0);
|
||||
#desiredPlacement = $derived.by(() => (this.opts.side?.current +
|
||||
(this.opts.align.current !== "center"
|
||||
? `-${this.opts.align.current}`
|
||||
: "")));
|
||||
#boundary = $derived.by(() => Array.isArray(this.opts.collisionBoundary.current)
|
||||
? this.opts.collisionBoundary.current
|
||||
: [this.opts.collisionBoundary.current]);
|
||||
hasExplicitBoundaries = $derived(this.#boundary.length > 0);
|
||||
detectOverflowOptions = $derived.by(() => ({
|
||||
padding: this.opts.collisionPadding.current,
|
||||
boundary: this.#boundary.filter(isNotNull),
|
||||
altBoundary: this.hasExplicitBoundaries,
|
||||
}));
|
||||
#availableWidth = $state(undefined);
|
||||
#availableHeight = $state(undefined);
|
||||
#anchorWidth = $state(undefined);
|
||||
#anchorHeight = $state(undefined);
|
||||
middleware = $derived.by(() => [
|
||||
offset({
|
||||
mainAxis: this.opts.sideOffset.current + this.#arrowHeight,
|
||||
alignmentAxis: this.opts.alignOffset.current,
|
||||
}),
|
||||
this.opts.avoidCollisions.current &&
|
||||
shift({
|
||||
mainAxis: true,
|
||||
crossAxis: false,
|
||||
limiter: this.opts.sticky.current === "partial" ? limitShift() : undefined,
|
||||
...this.detectOverflowOptions,
|
||||
}),
|
||||
this.opts.avoidCollisions.current && flip({ ...this.detectOverflowOptions }),
|
||||
size({
|
||||
...this.detectOverflowOptions,
|
||||
apply: ({ rects, availableWidth, availableHeight }) => {
|
||||
const { width: anchorWidth, height: anchorHeight } = rects.reference;
|
||||
this.#availableWidth = availableWidth;
|
||||
this.#availableHeight = availableHeight;
|
||||
this.#anchorWidth = anchorWidth;
|
||||
this.#anchorHeight = anchorHeight;
|
||||
},
|
||||
}),
|
||||
this.arrowRef.current &&
|
||||
arrow({
|
||||
element: this.arrowRef.current,
|
||||
padding: this.opts.arrowPadding.current,
|
||||
}),
|
||||
transformOrigin({ arrowWidth: this.#arrowWidth, arrowHeight: this.#arrowHeight }),
|
||||
this.opts.hideWhenDetached.current &&
|
||||
hide({ strategy: "referenceHidden", ...this.detectOverflowOptions }),
|
||||
].filter(Boolean));
|
||||
floating;
|
||||
placedSide = $derived.by(() => getSideFromPlacement(this.floating.placement));
|
||||
placedAlign = $derived.by(() => getAlignFromPlacement(this.floating.placement));
|
||||
arrowX = $derived.by(() => this.floating.middlewareData.arrow?.x ?? 0);
|
||||
arrowY = $derived.by(() => this.floating.middlewareData.arrow?.y ?? 0);
|
||||
cannotCenterArrow = $derived.by(() => this.floating.middlewareData.arrow?.centerOffset !== 0);
|
||||
contentZIndex = $state();
|
||||
arrowBaseSide = $derived(OPPOSITE_SIDE[this.placedSide]);
|
||||
wrapperProps = $derived.by(() => ({
|
||||
id: this.opts.wrapperId.current,
|
||||
"data-bits-floating-content-wrapper": "",
|
||||
style: {
|
||||
...this.floating.floatingStyles,
|
||||
// keep off page when measuring
|
||||
transform: this.floating.isPositioned
|
||||
? this.floating.floatingStyles.transform
|
||||
: "translate(0, -200%)",
|
||||
minWidth: "max-content",
|
||||
zIndex: this.contentZIndex,
|
||||
"--bits-floating-transform-origin": `${this.floating.middlewareData.transformOrigin?.x} ${this.floating.middlewareData.transformOrigin?.y}`,
|
||||
"--bits-floating-available-width": `${this.#availableWidth}px`,
|
||||
"--bits-floating-available-height": `${this.#availableHeight}px`,
|
||||
"--bits-floating-anchor-width": `${this.#anchorWidth}px`,
|
||||
"--bits-floating-anchor-height": `${this.#anchorHeight}px`,
|
||||
// hide the content if using the hide middleware and should be hidden
|
||||
...(this.floating.middlewareData.hide?.referenceHidden && {
|
||||
visibility: "hidden",
|
||||
"pointer-events": "none",
|
||||
}),
|
||||
...this.#transformedStyle,
|
||||
},
|
||||
// Floating UI calculates logical alignment based the `dir` attribute
|
||||
dir: this.opts.dir.current,
|
||||
...this.wrapperAttachment,
|
||||
}));
|
||||
props = $derived.by(() => ({
|
||||
"data-side": this.placedSide,
|
||||
"data-align": this.placedAlign,
|
||||
style: styleToString({
|
||||
...this.#transformedStyle,
|
||||
}),
|
||||
...this.contentAttachment,
|
||||
}));
|
||||
arrowStyle = $derived({
|
||||
position: "absolute",
|
||||
left: this.arrowX ? `${this.arrowX}px` : undefined,
|
||||
top: this.arrowY ? `${this.arrowY}px` : undefined,
|
||||
[this.arrowBaseSide]: 0,
|
||||
"transform-origin": {
|
||||
top: "",
|
||||
right: "0 0",
|
||||
bottom: "center 0",
|
||||
left: "100% 0",
|
||||
}[this.placedSide],
|
||||
transform: {
|
||||
top: "translateY(100%)",
|
||||
right: "translateY(50%) rotate(90deg) translateX(-50%)",
|
||||
bottom: "rotate(180deg)",
|
||||
left: "translateY(50%) rotate(-90deg) translateX(50%)",
|
||||
}[this.placedSide],
|
||||
visibility: this.cannotCenterArrow ? "hidden" : undefined,
|
||||
});
|
||||
constructor(opts, root) {
|
||||
this.opts = opts;
|
||||
this.root = root;
|
||||
if (opts.customAnchor) {
|
||||
this.root.customAnchorNode.current = opts.customAnchor.current;
|
||||
}
|
||||
watch(() => opts.customAnchor.current, (customAnchor) => {
|
||||
this.root.customAnchorNode.current = customAnchor;
|
||||
});
|
||||
this.floating = useFloating({
|
||||
strategy: () => this.opts.strategy.current,
|
||||
placement: () => this.#desiredPlacement,
|
||||
middleware: () => this.middleware,
|
||||
reference: this.root.anchorNode,
|
||||
whileElementsMounted: (...args) => {
|
||||
const cleanup = autoUpdate(...args, {
|
||||
animationFrame: this.#updatePositionStrategy?.current === "always",
|
||||
});
|
||||
return cleanup;
|
||||
},
|
||||
open: () => this.opts.enabled.current,
|
||||
sideOffset: () => this.opts.sideOffset.current,
|
||||
alignOffset: () => this.opts.alignOffset.current,
|
||||
});
|
||||
$effect(() => {
|
||||
if (!this.floating.isPositioned)
|
||||
return;
|
||||
this.opts.onPlaced?.current();
|
||||
});
|
||||
watch(() => this.contentRef.current, (contentNode) => {
|
||||
if (!contentNode)
|
||||
return;
|
||||
const win = getWindow(contentNode);
|
||||
this.contentZIndex = win.getComputedStyle(contentNode).zIndex;
|
||||
});
|
||||
$effect(() => {
|
||||
this.floating.floating.current = this.wrapperRef.current;
|
||||
});
|
||||
}
|
||||
}
|
||||
export class FloatingArrowState {
|
||||
static create(opts) {
|
||||
return new FloatingArrowState(opts, FloatingContentContext.get());
|
||||
}
|
||||
opts;
|
||||
content;
|
||||
constructor(opts, content) {
|
||||
this.opts = opts;
|
||||
this.content = content;
|
||||
}
|
||||
props = $derived.by(() => ({
|
||||
id: this.opts.id.current,
|
||||
style: this.content.arrowStyle,
|
||||
"data-side": this.content.placedSide,
|
||||
...this.content.arrowAttachment,
|
||||
}));
|
||||
}
|
||||
export class FloatingAnchorState {
|
||||
static create(opts, tooltip = false) {
|
||||
return tooltip
|
||||
? new FloatingAnchorState(opts, FloatingTooltipRootContext.get())
|
||||
: new FloatingAnchorState(opts, FloatingRootContext.get());
|
||||
}
|
||||
opts;
|
||||
root;
|
||||
constructor(opts, root) {
|
||||
this.opts = opts;
|
||||
this.root = root;
|
||||
if (opts.virtualEl && opts.virtualEl.current) {
|
||||
root.triggerNode = boxFrom(opts.virtualEl.current);
|
||||
}
|
||||
else {
|
||||
root.triggerNode = opts.ref;
|
||||
}
|
||||
}
|
||||
}
|
||||
//
|
||||
// HELPERS
|
||||
//
|
||||
function transformOrigin(options) {
|
||||
return {
|
||||
name: "transformOrigin",
|
||||
options,
|
||||
fn(data) {
|
||||
const { placement, rects, middlewareData } = data;
|
||||
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
|
||||
const isArrowHidden = cannotCenterArrow;
|
||||
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
|
||||
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
|
||||
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
|
||||
const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
|
||||
const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
|
||||
const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
|
||||
let x = "";
|
||||
let y = "";
|
||||
if (placedSide === "bottom") {
|
||||
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
||||
y = `${-arrowHeight}px`;
|
||||
}
|
||||
else if (placedSide === "top") {
|
||||
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
|
||||
y = `${rects.floating.height + arrowHeight}px`;
|
||||
}
|
||||
else if (placedSide === "right") {
|
||||
x = `${-arrowHeight}px`;
|
||||
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
||||
}
|
||||
else if (placedSide === "left") {
|
||||
x = `${rects.floating.width + arrowHeight}px`;
|
||||
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
|
||||
}
|
||||
return { data: { x, y } };
|
||||
},
|
||||
};
|
||||
}
|
||||
function getSideAndAlignFromPlacement(placement) {
|
||||
const [side, align = "center"] = placement.split("-");
|
||||
return [side, align];
|
||||
}
|
||||
export function getSideFromPlacement(placement) {
|
||||
return getSideAndAlignFromPlacement(placement)[0];
|
||||
}
|
||||
export function getAlignFromPlacement(placement) {
|
||||
return getSideAndAlignFromPlacement(placement)[1];
|
||||
}
|
||||
+15
@@ -0,0 +1,15 @@
|
||||
import { FocusScope } from "./focus-scope.svelte.js";
|
||||
export declare class FocusScopeManager {
|
||||
#private;
|
||||
static instance: FocusScopeManager;
|
||||
static getInstance(): FocusScopeManager;
|
||||
register(scope: FocusScope): void;
|
||||
unregister(scope: FocusScope): void;
|
||||
getActive(): FocusScope | undefined;
|
||||
setFocusMemory(scope: FocusScope, element: HTMLElement): void;
|
||||
getFocusMemory(scope: FocusScope): HTMLElement | undefined;
|
||||
isActiveScope(scope: FocusScope): boolean;
|
||||
setPreFocusMemory(scope: FocusScope, element: HTMLElement): void;
|
||||
getPreFocusMemory(scope: FocusScope): HTMLElement | undefined;
|
||||
clearPreFocusMemory(scope: FocusScope): void;
|
||||
}
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
import { simpleBox } from "svelte-toolbelt";
|
||||
import { FocusScope } from "./focus-scope.svelte.js";
|
||||
export class FocusScopeManager {
|
||||
static instance;
|
||||
#scopeStack = simpleBox([]);
|
||||
#focusHistory = new WeakMap();
|
||||
#preFocusHistory = new WeakMap();
|
||||
static getInstance() {
|
||||
if (!this.instance) {
|
||||
this.instance = new FocusScopeManager();
|
||||
}
|
||||
return this.instance;
|
||||
}
|
||||
register(scope) {
|
||||
const current = this.getActive();
|
||||
if (current && current !== scope) {
|
||||
current.pause();
|
||||
}
|
||||
// capture the currently focused element before this scope becomes active
|
||||
const activeElement = document.activeElement;
|
||||
if (activeElement && activeElement !== document.body) {
|
||||
this.#preFocusHistory.set(scope, activeElement);
|
||||
}
|
||||
this.#scopeStack.current = this.#scopeStack.current.filter((s) => s !== scope);
|
||||
this.#scopeStack.current.unshift(scope);
|
||||
}
|
||||
unregister(scope) {
|
||||
this.#scopeStack.current = this.#scopeStack.current.filter((s) => s !== scope);
|
||||
const next = this.getActive();
|
||||
if (next) {
|
||||
next.resume();
|
||||
}
|
||||
}
|
||||
getActive() {
|
||||
return this.#scopeStack.current[0];
|
||||
}
|
||||
setFocusMemory(scope, element) {
|
||||
this.#focusHistory.set(scope, element);
|
||||
}
|
||||
getFocusMemory(scope) {
|
||||
return this.#focusHistory.get(scope);
|
||||
}
|
||||
isActiveScope(scope) {
|
||||
return this.getActive() === scope;
|
||||
}
|
||||
setPreFocusMemory(scope, element) {
|
||||
this.#preFocusHistory.set(scope, element);
|
||||
}
|
||||
getPreFocusMemory(scope) {
|
||||
return this.#preFocusHistory.get(scope);
|
||||
}
|
||||
clearPreFocusMemory(scope) {
|
||||
this.#preFocusHistory.delete(scope);
|
||||
}
|
||||
}
|
||||
+27
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
import type { FocusScopeImplProps } from "./types.js";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
import { FocusScope } from "./focus-scope.svelte.js";
|
||||
|
||||
let {
|
||||
enabled = false,
|
||||
trapFocus = false,
|
||||
loop = false,
|
||||
onCloseAutoFocus = noop,
|
||||
onOpenAutoFocus = noop,
|
||||
focusScope,
|
||||
ref,
|
||||
}: FocusScopeImplProps = $props();
|
||||
|
||||
const focusScopeState = FocusScope.use({
|
||||
enabled: boxWith(() => enabled),
|
||||
trap: boxWith(() => trapFocus),
|
||||
loop: loop,
|
||||
onCloseAutoFocus: boxWith(() => onCloseAutoFocus),
|
||||
onOpenAutoFocus: boxWith(() => onOpenAutoFocus),
|
||||
ref,
|
||||
});
|
||||
</script>
|
||||
|
||||
{@render focusScope?.({ props: focusScopeState.props })}
|
||||
+5
@@ -0,0 +1,5 @@
|
||||
import type { FocusScopeImplProps } from "./types.js";
|
||||
import { FocusScope } from "./focus-scope.svelte.js";
|
||||
declare const FocusScope: import("svelte").Component<FocusScopeImplProps, {}, "">;
|
||||
type FocusScope = ReturnType<typeof FocusScope>;
|
||||
export default FocusScope;
|
||||
+212
@@ -0,0 +1,212 @@
|
||||
import { onDestroyEffect } from "svelte-toolbelt";
|
||||
import { FocusScopeManager } from "./focus-scope-manager.js";
|
||||
import { focusable, isFocusable, tabbable } from "tabbable";
|
||||
import { on } from "svelte/events";
|
||||
import { watch } from "runed";
|
||||
export class FocusScope {
|
||||
#paused = false;
|
||||
#container = null;
|
||||
#manager = FocusScopeManager.getInstance();
|
||||
#cleanupFns = [];
|
||||
#opts;
|
||||
constructor(opts) {
|
||||
this.#opts = opts;
|
||||
}
|
||||
get paused() {
|
||||
return this.#paused;
|
||||
}
|
||||
pause() {
|
||||
this.#paused = true;
|
||||
}
|
||||
resume() {
|
||||
this.#paused = false;
|
||||
}
|
||||
#cleanup() {
|
||||
for (const fn of this.#cleanupFns) {
|
||||
fn();
|
||||
}
|
||||
this.#cleanupFns = [];
|
||||
}
|
||||
mount(container) {
|
||||
if (this.#container) {
|
||||
this.unmount();
|
||||
}
|
||||
this.#container = container;
|
||||
this.#manager.register(this);
|
||||
this.#setupEventListeners();
|
||||
this.#handleOpenAutoFocus();
|
||||
}
|
||||
unmount() {
|
||||
if (!this.#container)
|
||||
return;
|
||||
this.#cleanup();
|
||||
// handle close auto-focus
|
||||
this.#handleCloseAutoFocus();
|
||||
this.#manager.unregister(this);
|
||||
this.#manager.clearPreFocusMemory(this);
|
||||
this.#container = null;
|
||||
}
|
||||
#handleOpenAutoFocus() {
|
||||
if (!this.#container)
|
||||
return;
|
||||
const event = new CustomEvent("focusScope.onOpenAutoFocus", {
|
||||
bubbles: false,
|
||||
cancelable: true,
|
||||
});
|
||||
this.#opts.onOpenAutoFocus.current(event);
|
||||
if (!event.defaultPrevented) {
|
||||
requestAnimationFrame(() => {
|
||||
if (!this.#container)
|
||||
return;
|
||||
const firstTabbable = this.#getFirstTabbable();
|
||||
if (firstTabbable) {
|
||||
firstTabbable.focus();
|
||||
this.#manager.setFocusMemory(this, firstTabbable);
|
||||
}
|
||||
else {
|
||||
this.#container.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
#handleCloseAutoFocus() {
|
||||
const event = new CustomEvent("focusScope.onCloseAutoFocus", {
|
||||
bubbles: false,
|
||||
cancelable: true,
|
||||
});
|
||||
this.#opts.onCloseAutoFocus.current?.(event);
|
||||
if (!event.defaultPrevented) {
|
||||
// return focus to the element that was focused before this scope opened
|
||||
const preFocusedElement = this.#manager.getPreFocusMemory(this);
|
||||
if (preFocusedElement && document.contains(preFocusedElement)) {
|
||||
// ensure the element is still focusable and in the document
|
||||
try {
|
||||
preFocusedElement.focus();
|
||||
}
|
||||
catch {
|
||||
// fallback if focus fails
|
||||
document.body.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#setupEventListeners() {
|
||||
if (!this.#container || !this.#opts.trap.current)
|
||||
return;
|
||||
const container = this.#container;
|
||||
const doc = container.ownerDocument;
|
||||
const handleFocus = (e) => {
|
||||
if (this.#paused || !this.#manager.isActiveScope(this))
|
||||
return;
|
||||
const target = e.target;
|
||||
if (!target)
|
||||
return;
|
||||
const isInside = container.contains(target);
|
||||
if (isInside) {
|
||||
// store last focused element
|
||||
this.#manager.setFocusMemory(this, target);
|
||||
}
|
||||
else {
|
||||
// focus escaped - bring it back
|
||||
const lastFocused = this.#manager.getFocusMemory(this);
|
||||
if (lastFocused && container.contains(lastFocused) && isFocusable(lastFocused)) {
|
||||
e.preventDefault();
|
||||
lastFocused.focus();
|
||||
}
|
||||
else {
|
||||
// fallback to first tabbable or first focusable or container
|
||||
const firstTabbable = this.#getFirstTabbable();
|
||||
const firstFocusable = this.#getAllFocusables()[0];
|
||||
(firstTabbable || firstFocusable || container).focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleKeydown = (e) => {
|
||||
if (!this.#opts.loop || this.#paused || e.key !== "Tab")
|
||||
return;
|
||||
if (!this.#manager.isActiveScope(this))
|
||||
return;
|
||||
const tabbables = this.#getTabbables();
|
||||
if (tabbables.length === 0)
|
||||
return;
|
||||
const first = tabbables[0];
|
||||
const last = tabbables[tabbables.length - 1];
|
||||
if (!e.shiftKey && doc.activeElement === last) {
|
||||
e.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
else if (e.shiftKey && doc.activeElement === first) {
|
||||
e.preventDefault();
|
||||
last.focus();
|
||||
}
|
||||
};
|
||||
this.#cleanupFns.push(on(doc, "focusin", handleFocus, { capture: true }), on(container, "keydown", handleKeydown));
|
||||
const observer = new MutationObserver(() => {
|
||||
const lastFocused = this.#manager.getFocusMemory(this);
|
||||
if (lastFocused && !container.contains(lastFocused)) {
|
||||
// last focused element was removed
|
||||
const firstTabbable = this.#getFirstTabbable();
|
||||
const firstFocusable = this.#getAllFocusables()[0];
|
||||
const elementToFocus = firstTabbable || firstFocusable;
|
||||
if (elementToFocus) {
|
||||
elementToFocus.focus();
|
||||
this.#manager.setFocusMemory(this, elementToFocus);
|
||||
}
|
||||
else {
|
||||
// no focusable elements left, focus container
|
||||
container.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
observer.observe(container, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
this.#cleanupFns.push(() => observer.disconnect());
|
||||
}
|
||||
#getTabbables() {
|
||||
if (!this.#container)
|
||||
return [];
|
||||
return tabbable(this.#container, {
|
||||
includeContainer: false,
|
||||
getShadowRoot: true,
|
||||
});
|
||||
}
|
||||
#getFirstTabbable() {
|
||||
const tabbables = this.#getTabbables();
|
||||
return tabbables[0] || null;
|
||||
}
|
||||
#getAllFocusables() {
|
||||
if (!this.#container)
|
||||
return [];
|
||||
return focusable(this.#container, {
|
||||
includeContainer: false,
|
||||
getShadowRoot: true,
|
||||
});
|
||||
}
|
||||
static use(opts) {
|
||||
let scope = null;
|
||||
watch([() => opts.ref.current, () => opts.enabled.current], ([ref, enabled]) => {
|
||||
if (ref && enabled) {
|
||||
if (!scope) {
|
||||
scope = new FocusScope(opts);
|
||||
}
|
||||
scope.mount(ref);
|
||||
}
|
||||
else if (scope) {
|
||||
scope.unmount();
|
||||
scope = null;
|
||||
}
|
||||
});
|
||||
onDestroyEffect(() => {
|
||||
scope?.unmount();
|
||||
});
|
||||
return {
|
||||
get props() {
|
||||
return {
|
||||
tabindex: -1,
|
||||
};
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as FocusScope } from "./focus-scope.svelte";
|
||||
export type { FocusScopeProps } from "./types.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as FocusScope } from "./focus-scope.svelte";
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
import type { Snippet } from "svelte";
|
||||
import type { EventCallback } from "../../../internal/events.js";
|
||||
import type { ReadableBox } from "svelte-toolbelt";
|
||||
export type FocusScopeProps = {
|
||||
/**
|
||||
* Event handler called when auto-focusing on open.
|
||||
* Can be prevented.
|
||||
*/
|
||||
onOpenAutoFocus?: EventCallback;
|
||||
/**
|
||||
* Event handler called when auto-focusing on close.
|
||||
* Can be prevented.
|
||||
*/
|
||||
onCloseAutoFocus?: EventCallback;
|
||||
/**
|
||||
* Whether focus is trapped within the focus scope.
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
trapFocus?: boolean;
|
||||
};
|
||||
export type FocusScopeImplProps = {
|
||||
/**
|
||||
* The snippet to render the focus scope container with its props.
|
||||
*/
|
||||
focusScope?: Snippet<[{
|
||||
props: Record<string, unknown>;
|
||||
}]>;
|
||||
/**
|
||||
* When `true` will loop through the tabbable elements in the focus scope.
|
||||
*/
|
||||
loop?: boolean;
|
||||
/**
|
||||
* Whether the content within the focus trap is being force mounted or not.
|
||||
*/
|
||||
forceMount?: boolean;
|
||||
enabled: boolean;
|
||||
ref: ReadableBox<HTMLElement | null>;
|
||||
} & FocusScopeProps;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { mergeProps, srOnlyStylesString } from "svelte-toolbelt";
|
||||
import type { HTMLInputAttributes } from "svelte/elements";
|
||||
|
||||
let { value = $bindable(), ...restProps }: HTMLInputAttributes = $props();
|
||||
|
||||
const mergedProps = $derived(
|
||||
mergeProps(restProps, {
|
||||
"aria-hidden": "true",
|
||||
tabindex: -1,
|
||||
style: srOnlyStylesString,
|
||||
})
|
||||
);
|
||||
</script>
|
||||
|
||||
{#if mergedProps.type === "checkbox"}
|
||||
<input {...mergedProps} {value} />
|
||||
{:else}
|
||||
<input bind:value {...mergedProps} />
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { HTMLInputAttributes } from "svelte/elements";
|
||||
declare const HiddenInput: import("svelte").Component<HTMLInputAttributes, {}, "value">;
|
||||
type HiddenInput = ReturnType<typeof HiddenInput>;
|
||||
export default HiddenInput;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as Mounted } from "./mounted.svelte";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as Mounted } from "./mounted.svelte";
|
||||
Generated
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
import { type AnyFn } from "svelte-toolbelt";
|
||||
/**
|
||||
* Detects whether the user is currently using the keyboard
|
||||
* or not by listening to keyboard and pointer events. Uses shared global
|
||||
* state to avoid listener duplication.
|
||||
*/
|
||||
export declare class IsUsingKeyboard {
|
||||
static _refs: number;
|
||||
static _cleanup?: AnyFn;
|
||||
constructor();
|
||||
get current(): boolean;
|
||||
set current(value: boolean);
|
||||
}
|
||||
Generated
Vendored
+51
@@ -0,0 +1,51 @@
|
||||
import { executeCallbacks } from "svelte-toolbelt";
|
||||
import { on } from "svelte/events";
|
||||
// Using global state to avoid multiple listeners.
|
||||
let isUsingKeyboard = $state(false);
|
||||
/**
|
||||
* Detects whether the user is currently using the keyboard
|
||||
* or not by listening to keyboard and pointer events. Uses shared global
|
||||
* state to avoid listener duplication.
|
||||
*/
|
||||
export class IsUsingKeyboard {
|
||||
static _refs = 0; // Reference counting to avoid multiple listeners.
|
||||
static _cleanup;
|
||||
constructor() {
|
||||
$effect(() => {
|
||||
if (IsUsingKeyboard._refs === 0) {
|
||||
IsUsingKeyboard._cleanup = $effect.root(() => {
|
||||
const callbacksToDispose = [];
|
||||
const handlePointer = (_) => {
|
||||
isUsingKeyboard = false;
|
||||
};
|
||||
const handleKeydown = (_) => {
|
||||
isUsingKeyboard = true;
|
||||
};
|
||||
callbacksToDispose.push(on(document, "pointerdown", handlePointer, {
|
||||
capture: true,
|
||||
}), on(document, "pointermove", handlePointer, {
|
||||
capture: true,
|
||||
}), on(document, "keydown", handleKeydown, {
|
||||
capture: true,
|
||||
}));
|
||||
// Don't forget to spread and call twice.
|
||||
return executeCallbacks(...callbacksToDispose);
|
||||
});
|
||||
}
|
||||
IsUsingKeyboard._refs++;
|
||||
return () => {
|
||||
IsUsingKeyboard._refs--;
|
||||
if (IsUsingKeyboard._refs === 0) {
|
||||
isUsingKeyboard = false;
|
||||
IsUsingKeyboard._cleanup?.();
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
get current() {
|
||||
return isUsingKeyboard;
|
||||
}
|
||||
set current(value) {
|
||||
isUsingKeyboard = value;
|
||||
}
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
<script lang="ts">
|
||||
import { onMountEffect } from "svelte-toolbelt";
|
||||
import { noop } from "../../internal/noop.js";
|
||||
|
||||
let {
|
||||
mounted = $bindable(false),
|
||||
onMountedChange = noop,
|
||||
}: { mounted?: boolean; onMountedChange?: (mounted: boolean) => void } = $props();
|
||||
|
||||
onMountEffect(() => {
|
||||
mounted = true;
|
||||
onMountedChange(true);
|
||||
return () => {
|
||||
mounted = false;
|
||||
onMountedChange(false);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
type $$ComponentProps = {
|
||||
mounted?: boolean;
|
||||
onMountedChange?: (mounted: boolean) => void;
|
||||
};
|
||||
declare const Mounted: import("svelte").Component<$$ComponentProps, {}, "mounted">;
|
||||
type Mounted = ReturnType<typeof Mounted>;
|
||||
export default Mounted;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as PopperLayer } from "./popper-layer.svelte";
|
||||
export type { PopperLayerProps } from "./types.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as PopperLayer } from "./popper-layer.svelte";
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
<script lang="ts">
|
||||
import FloatingLayerContentStatic from "../floating-layer/components/floating-layer-content-static.svelte";
|
||||
import FloatingLayerContent from "../floating-layer/components/floating-layer-content.svelte";
|
||||
import type { FloatingLayerContentImplProps } from "../floating-layer/types.js";
|
||||
|
||||
let {
|
||||
content,
|
||||
isStatic = false,
|
||||
onPlaced,
|
||||
...restProps
|
||||
}: FloatingLayerContentImplProps & { isStatic: boolean } = $props();
|
||||
</script>
|
||||
|
||||
{#if isStatic}
|
||||
<FloatingLayerContentStatic {content} {onPlaced} />
|
||||
{:else}
|
||||
<FloatingLayerContent {content} {onPlaced} {...restProps} />
|
||||
{/if}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import type { FloatingLayerContentImplProps } from "../floating-layer/types.js";
|
||||
type $$ComponentProps = FloatingLayerContentImplProps & {
|
||||
isStatic: boolean;
|
||||
};
|
||||
declare const PopperContent: import("svelte").Component<$$ComponentProps, {}, "">;
|
||||
type PopperContent = ReturnType<typeof PopperContent>;
|
||||
export default PopperContent;
|
||||
Generated
Vendored
+85
@@ -0,0 +1,85 @@
|
||||
<script lang="ts">
|
||||
import type { PopperLayerImplProps } from "./types.js";
|
||||
import PopperLayerInner from "./popper-layer-inner.svelte";
|
||||
|
||||
let {
|
||||
popper,
|
||||
onEscapeKeydown,
|
||||
escapeKeydownBehavior,
|
||||
preventOverflowTextSelection,
|
||||
id,
|
||||
onPointerDown,
|
||||
onPointerUp,
|
||||
side,
|
||||
sideOffset,
|
||||
align,
|
||||
alignOffset,
|
||||
arrowPadding,
|
||||
avoidCollisions,
|
||||
collisionBoundary,
|
||||
collisionPadding,
|
||||
sticky,
|
||||
hideWhenDetached,
|
||||
updatePositionStrategy,
|
||||
strategy,
|
||||
dir,
|
||||
preventScroll,
|
||||
wrapperId,
|
||||
style,
|
||||
onPlaced,
|
||||
onInteractOutside,
|
||||
onCloseAutoFocus,
|
||||
onOpenAutoFocus,
|
||||
onFocusOutside,
|
||||
interactOutsideBehavior = "close",
|
||||
loop,
|
||||
trapFocus = true,
|
||||
isValidEvent = () => false,
|
||||
customAnchor = null,
|
||||
isStatic = false,
|
||||
enabled,
|
||||
...restProps
|
||||
}: Omit<PopperLayerImplProps, "open"> & {
|
||||
enabled: boolean;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<PopperLayerInner
|
||||
{popper}
|
||||
{onEscapeKeydown}
|
||||
{escapeKeydownBehavior}
|
||||
{preventOverflowTextSelection}
|
||||
{id}
|
||||
{onPointerDown}
|
||||
{onPointerUp}
|
||||
{side}
|
||||
{sideOffset}
|
||||
{align}
|
||||
{alignOffset}
|
||||
{arrowPadding}
|
||||
{avoidCollisions}
|
||||
{collisionBoundary}
|
||||
{collisionPadding}
|
||||
{sticky}
|
||||
{hideWhenDetached}
|
||||
{updatePositionStrategy}
|
||||
{strategy}
|
||||
{dir}
|
||||
{preventScroll}
|
||||
{wrapperId}
|
||||
{style}
|
||||
{onPlaced}
|
||||
{customAnchor}
|
||||
{isStatic}
|
||||
{enabled}
|
||||
{onInteractOutside}
|
||||
{onCloseAutoFocus}
|
||||
{onOpenAutoFocus}
|
||||
{interactOutsideBehavior}
|
||||
{loop}
|
||||
{trapFocus}
|
||||
{isValidEvent}
|
||||
{onFocusOutside}
|
||||
{...restProps}
|
||||
forceMount={true}
|
||||
/>
|
||||
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import type { PopperLayerImplProps } from "./types.js";
|
||||
type $$ComponentProps = Omit<PopperLayerImplProps, "open"> & {
|
||||
enabled: boolean;
|
||||
};
|
||||
declare const PopperLayerForceMount: import("svelte").Component<$$ComponentProps, {}, "">;
|
||||
type PopperLayerForceMount = ReturnType<typeof PopperLayerForceMount>;
|
||||
export default PopperLayerForceMount;
|
||||
+136
@@ -0,0 +1,136 @@
|
||||
<script lang="ts">
|
||||
import { mergeProps } from "svelte-toolbelt";
|
||||
import ScrollLock from "../scroll-lock/scroll-lock.svelte";
|
||||
import type { PopperLayerImplProps } from "./types.js";
|
||||
import PopperContent from "./popper-content.svelte";
|
||||
import EscapeLayer from "../escape-layer/escape-layer.svelte";
|
||||
import DismissibleLayer from "../dismissible-layer/dismissible-layer.svelte";
|
||||
import TextSelectionLayer from "../text-selection-layer/text-selection-layer.svelte";
|
||||
import FocusScope from "../focus-scope/focus-scope.svelte";
|
||||
|
||||
let {
|
||||
popper,
|
||||
onEscapeKeydown,
|
||||
escapeKeydownBehavior,
|
||||
preventOverflowTextSelection,
|
||||
id,
|
||||
onPointerDown,
|
||||
onPointerUp,
|
||||
side,
|
||||
sideOffset,
|
||||
align,
|
||||
alignOffset,
|
||||
arrowPadding,
|
||||
avoidCollisions,
|
||||
collisionBoundary,
|
||||
collisionPadding,
|
||||
sticky,
|
||||
hideWhenDetached,
|
||||
updatePositionStrategy,
|
||||
strategy,
|
||||
dir,
|
||||
preventScroll,
|
||||
wrapperId,
|
||||
style,
|
||||
onPlaced,
|
||||
onInteractOutside,
|
||||
onCloseAutoFocus,
|
||||
onOpenAutoFocus,
|
||||
onFocusOutside,
|
||||
interactOutsideBehavior = "close",
|
||||
loop,
|
||||
trapFocus = true,
|
||||
isValidEvent = () => false,
|
||||
customAnchor = null,
|
||||
isStatic = false,
|
||||
enabled,
|
||||
ref,
|
||||
tooltip = false,
|
||||
contentPointerEvents = "auto",
|
||||
...restProps
|
||||
}: Omit<PopperLayerImplProps, "open" | "children" | "shouldRender"> & {
|
||||
enabled: boolean;
|
||||
contentPointerEvents?: "auto" | "none";
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<PopperContent
|
||||
{isStatic}
|
||||
{id}
|
||||
{side}
|
||||
{sideOffset}
|
||||
{align}
|
||||
{alignOffset}
|
||||
{arrowPadding}
|
||||
{avoidCollisions}
|
||||
{collisionBoundary}
|
||||
{collisionPadding}
|
||||
{sticky}
|
||||
{hideWhenDetached}
|
||||
{updatePositionStrategy}
|
||||
{strategy}
|
||||
{dir}
|
||||
{wrapperId}
|
||||
{style}
|
||||
{onPlaced}
|
||||
{customAnchor}
|
||||
{enabled}
|
||||
{tooltip}
|
||||
>
|
||||
{#snippet content({ props: floatingProps, wrapperProps })}
|
||||
{#if restProps.forceMount && enabled}
|
||||
<ScrollLock {preventScroll} />
|
||||
{:else if !restProps.forceMount}
|
||||
<ScrollLock {preventScroll} />
|
||||
{/if}
|
||||
<FocusScope
|
||||
{onOpenAutoFocus}
|
||||
{onCloseAutoFocus}
|
||||
{loop}
|
||||
{enabled}
|
||||
{trapFocus}
|
||||
forceMount={restProps.forceMount}
|
||||
{ref}
|
||||
>
|
||||
{#snippet focusScope({ props: focusScopeProps })}
|
||||
<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled} {ref}>
|
||||
<DismissibleLayer
|
||||
{id}
|
||||
{onInteractOutside}
|
||||
{onFocusOutside}
|
||||
{interactOutsideBehavior}
|
||||
{isValidEvent}
|
||||
{enabled}
|
||||
{ref}
|
||||
>
|
||||
{#snippet children({ props: dismissibleProps })}
|
||||
<TextSelectionLayer
|
||||
{id}
|
||||
{preventOverflowTextSelection}
|
||||
{onPointerDown}
|
||||
{onPointerUp}
|
||||
{enabled}
|
||||
{ref}
|
||||
>
|
||||
{@render popper?.({
|
||||
props: mergeProps(
|
||||
restProps,
|
||||
floatingProps,
|
||||
dismissibleProps,
|
||||
focusScopeProps,
|
||||
{
|
||||
style: {
|
||||
pointerEvents: contentPointerEvents,
|
||||
},
|
||||
}
|
||||
),
|
||||
wrapperProps,
|
||||
})}
|
||||
</TextSelectionLayer>
|
||||
{/snippet}
|
||||
</DismissibleLayer>
|
||||
</EscapeLayer>
|
||||
{/snippet}
|
||||
</FocusScope>
|
||||
{/snippet}
|
||||
</PopperContent>
|
||||
Generated
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
import type { PopperLayerImplProps } from "./types.js";
|
||||
type $$ComponentProps = Omit<PopperLayerImplProps, "open" | "children" | "shouldRender"> & {
|
||||
enabled: boolean;
|
||||
contentPointerEvents?: "auto" | "none";
|
||||
};
|
||||
declare const PopperLayerInner: import("svelte").Component<$$ComponentProps, {}, "">;
|
||||
type PopperLayerInner = ReturnType<typeof PopperLayerInner>;
|
||||
export default PopperLayerInner;
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
<script lang="ts">
|
||||
import type { PopperLayerImplProps } from "./types.js";
|
||||
import PopperLayerInner from "./popper-layer-inner.svelte";
|
||||
|
||||
let {
|
||||
popper,
|
||||
open,
|
||||
onEscapeKeydown,
|
||||
escapeKeydownBehavior,
|
||||
preventOverflowTextSelection,
|
||||
id,
|
||||
onPointerDown,
|
||||
onPointerUp,
|
||||
side,
|
||||
sideOffset,
|
||||
align,
|
||||
alignOffset,
|
||||
arrowPadding,
|
||||
avoidCollisions,
|
||||
collisionBoundary,
|
||||
collisionPadding,
|
||||
sticky,
|
||||
hideWhenDetached,
|
||||
updatePositionStrategy,
|
||||
strategy,
|
||||
dir,
|
||||
preventScroll,
|
||||
wrapperId,
|
||||
style,
|
||||
onPlaced,
|
||||
onInteractOutside,
|
||||
onCloseAutoFocus,
|
||||
onOpenAutoFocus,
|
||||
onFocusOutside,
|
||||
interactOutsideBehavior = "close",
|
||||
loop,
|
||||
trapFocus = true,
|
||||
isValidEvent = () => false,
|
||||
customAnchor = null,
|
||||
isStatic = false,
|
||||
ref,
|
||||
shouldRender,
|
||||
...restProps
|
||||
}: PopperLayerImplProps = $props();
|
||||
</script>
|
||||
|
||||
{#if shouldRender}
|
||||
<PopperLayerInner
|
||||
{popper}
|
||||
{onEscapeKeydown}
|
||||
{escapeKeydownBehavior}
|
||||
{preventOverflowTextSelection}
|
||||
{id}
|
||||
{onPointerDown}
|
||||
{onPointerUp}
|
||||
{side}
|
||||
{sideOffset}
|
||||
{align}
|
||||
{alignOffset}
|
||||
{arrowPadding}
|
||||
{avoidCollisions}
|
||||
{collisionBoundary}
|
||||
{collisionPadding}
|
||||
{sticky}
|
||||
{hideWhenDetached}
|
||||
{updatePositionStrategy}
|
||||
{strategy}
|
||||
{dir}
|
||||
{preventScroll}
|
||||
{wrapperId}
|
||||
{style}
|
||||
{onPlaced}
|
||||
{customAnchor}
|
||||
{isStatic}
|
||||
enabled={open}
|
||||
{onInteractOutside}
|
||||
{onCloseAutoFocus}
|
||||
{onOpenAutoFocus}
|
||||
{interactOutsideBehavior}
|
||||
{loop}
|
||||
{trapFocus}
|
||||
{isValidEvent}
|
||||
{onFocusOutside}
|
||||
forceMount={false}
|
||||
{ref}
|
||||
{...restProps}
|
||||
/>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { PopperLayerImplProps } from "./types.js";
|
||||
declare const PopperLayer: import("svelte").Component<PopperLayerImplProps, {}, "">;
|
||||
type PopperLayer = ReturnType<typeof PopperLayer>;
|
||||
export default PopperLayer;
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
import type { Snippet } from "svelte";
|
||||
import type { EscapeLayerImplProps, EscapeLayerProps } from "../escape-layer/types.js";
|
||||
import type { DismissibleLayerImplProps, DismissibleLayerProps } from "../dismissible-layer/types.js";
|
||||
import type { FloatingLayerContentImplProps, FloatingLayerContentProps } from "../floating-layer/types.js";
|
||||
import type { TextSelectionLayerImplProps, TextSelectionLayerProps } from "../text-selection-layer/types.js";
|
||||
import type { PresenceLayerImplProps, PresenceLayerProps } from "../presence-layer/types.js";
|
||||
import type { FocusScopeImplProps, FocusScopeProps } from "../focus-scope/types.js";
|
||||
import type { ScrollLockProps } from "../scroll-lock/index.js";
|
||||
import type { Direction } from "../../../shared/index.js";
|
||||
export type PopperLayerProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & FloatingLayerContentProps & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay">;
|
||||
export type PopperLayerStaticProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay"> & {
|
||||
content?: Snippet<[{
|
||||
props: Record<string, unknown>;
|
||||
}]>;
|
||||
dir?: Direction;
|
||||
};
|
||||
export type PopperLayerImplProps = Omit<EscapeLayerImplProps & DismissibleLayerImplProps & FloatingLayerContentImplProps & Omit<PresenceLayerImplProps, "presence"> & TextSelectionLayerImplProps & FocusScopeImplProps & {
|
||||
popper: Snippet<[
|
||||
{
|
||||
props: Record<string, unknown>;
|
||||
wrapperProps: Record<string, unknown>;
|
||||
}
|
||||
]>;
|
||||
isStatic?: boolean;
|
||||
/**
|
||||
* Tooltips are special in that they are commonly composed
|
||||
* with other floating components, where the same trigger is
|
||||
* used for both the tooltip and the popover.
|
||||
*
|
||||
* For situations like this, we need to use a different context
|
||||
* symbol so that conflicts don't occur.
|
||||
*/
|
||||
tooltip?: boolean;
|
||||
/**
|
||||
* Whether the popper layer should be rendered.
|
||||
*/
|
||||
shouldRender: boolean;
|
||||
/**
|
||||
* Override for the content's pointer-events style.
|
||||
* @default "auto"
|
||||
*/
|
||||
contentPointerEvents?: "auto" | "none";
|
||||
}, "enabled">;
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as Portal } from "./portal.svelte";
|
||||
export type { PortalProps } from "./types.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as Portal } from "./portal.svelte";
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
const { children }: { children?: Snippet } = $props();
|
||||
</script>
|
||||
|
||||
{#key children}
|
||||
{@render children?.()}
|
||||
{/key}
|
||||
+7
@@ -0,0 +1,7 @@
|
||||
import type { Snippet } from "svelte";
|
||||
type $$ComponentProps = {
|
||||
children?: Snippet;
|
||||
};
|
||||
declare const PortalConsumer: import("svelte").Component<$$ComponentProps, {}, "">;
|
||||
type PortalConsumer = ReturnType<typeof PortalConsumer>;
|
||||
export default PortalConsumer;
|
||||
+70
@@ -0,0 +1,70 @@
|
||||
<script lang="ts">
|
||||
import { getAllContexts, mount, unmount } from "svelte";
|
||||
import { DEV } from "esm-env";
|
||||
import { watch } from "runed";
|
||||
import PortalConsumer from "./portal-consumer.svelte";
|
||||
import type { PortalProps } from "./types.js";
|
||||
import { isBrowser } from "../../../internal/is.js";
|
||||
import { resolvePortalToProp } from "../config/prop-resolvers.js";
|
||||
|
||||
let { to: toProp, children, disabled }: PortalProps = $props();
|
||||
|
||||
const to = resolvePortalToProp(() => toProp);
|
||||
const context = getAllContexts();
|
||||
|
||||
let target = $derived(getTarget());
|
||||
|
||||
function getTarget() {
|
||||
if (!isBrowser || disabled) return null;
|
||||
|
||||
let localTarget: Element | null = null;
|
||||
|
||||
if (typeof to.current === "string") {
|
||||
const target = document.querySelector(to.current);
|
||||
if (DEV && target === null) {
|
||||
throw new Error(`Target element "${to.current}" not found.`);
|
||||
}
|
||||
localTarget = target;
|
||||
} else {
|
||||
localTarget = to.current;
|
||||
}
|
||||
|
||||
if (DEV && !(localTarget instanceof Element)) {
|
||||
const type = localTarget === null ? "null" : typeof localTarget;
|
||||
throw new TypeError(
|
||||
`Unknown portal target type: ${type}. Allowed types: string (query selector) or Element.`
|
||||
);
|
||||
}
|
||||
|
||||
return localTarget;
|
||||
}
|
||||
|
||||
let instance: ReturnType<typeof mount> | null;
|
||||
|
||||
function unmountInstance() {
|
||||
if (instance) {
|
||||
unmount(instance);
|
||||
instance = null;
|
||||
}
|
||||
}
|
||||
|
||||
watch([() => target, () => disabled], ([target, disabled]) => {
|
||||
if (!target || disabled) {
|
||||
unmountInstance();
|
||||
return;
|
||||
}
|
||||
instance = mount(PortalConsumer, {
|
||||
target: target,
|
||||
props: { children },
|
||||
context,
|
||||
});
|
||||
|
||||
return () => {
|
||||
unmountInstance();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if disabled}
|
||||
{@render children?.()}
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { PortalProps } from "./types.js";
|
||||
declare const Portal: import("svelte").Component<PortalProps, {}, "">;
|
||||
type Portal = ReturnType<typeof Portal>;
|
||||
export default Portal;
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
import type { Snippet } from "svelte";
|
||||
export type PortalTarget = Element | string;
|
||||
export type PortalProps = {
|
||||
/**
|
||||
* Where to portal the content to.
|
||||
*
|
||||
* @default document.body
|
||||
*/
|
||||
to?: PortalTarget;
|
||||
/**
|
||||
* Disable portalling and render the component inline
|
||||
*
|
||||
* @defaultValue false
|
||||
*/
|
||||
disabled?: boolean;
|
||||
/**
|
||||
* The children content to render within the portal.
|
||||
*/
|
||||
children?: Snippet;
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { default as PresenceLayer } from "./presence-layer.svelte";
|
||||
export type { PresenceLayerProps } from "./types.js";
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as PresenceLayer } from "./presence-layer.svelte";
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { boxWith } from "svelte-toolbelt";
|
||||
import type { PresenceLayerImplProps } from "./types.js";
|
||||
import { Presence } from "./presence.svelte.js";
|
||||
|
||||
let { open, forceMount, presence, ref }: PresenceLayerImplProps = $props();
|
||||
|
||||
const presenceState = new Presence({
|
||||
open: boxWith(() => open),
|
||||
ref,
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if forceMount || open || presenceState.isPresent}
|
||||
{@render presence?.({ present: presenceState.isPresent })}
|
||||
{/if}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { PresenceLayerImplProps } from "./types.js";
|
||||
declare const PresenceLayer: import("svelte").Component<PresenceLayerImplProps, {}, "">;
|
||||
type PresenceLayer = ReturnType<typeof PresenceLayer>;
|
||||
export default PresenceLayer;
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
import { type ReadableBox, type ReadableBoxedValues } from "svelte-toolbelt";
|
||||
import { Previous } from "runed";
|
||||
import { StateMachine } from "../../../internal/state-machine.js";
|
||||
export interface PresenceOptions extends ReadableBoxedValues<{
|
||||
open: boolean;
|
||||
ref: HTMLElement | null;
|
||||
}> {
|
||||
}
|
||||
type PresenceStatus = "unmounted" | "mounted" | "unmountSuspended";
|
||||
/**
|
||||
* Cached style properties to avoid storing live CSSStyleDeclaration
|
||||
* which triggers style recalculations when accessed.
|
||||
*/
|
||||
interface CachedStyles {
|
||||
display: string;
|
||||
animationName: string;
|
||||
}
|
||||
declare const presenceMachine: {
|
||||
readonly mounted: {
|
||||
readonly UNMOUNT: "unmounted";
|
||||
readonly ANIMATION_OUT: "unmountSuspended";
|
||||
};
|
||||
readonly unmountSuspended: {
|
||||
readonly MOUNT: "mounted";
|
||||
readonly ANIMATION_END: "unmounted";
|
||||
};
|
||||
readonly unmounted: {
|
||||
readonly MOUNT: "mounted";
|
||||
};
|
||||
};
|
||||
type PresenceMachine = StateMachine<typeof presenceMachine>;
|
||||
export declare class Presence {
|
||||
readonly opts: PresenceOptions;
|
||||
prevAnimationNameState: string;
|
||||
styles: CachedStyles;
|
||||
initialStatus: PresenceStatus;
|
||||
previousPresent: Previous<boolean>;
|
||||
machine: PresenceMachine;
|
||||
present: ReadableBox<boolean>;
|
||||
constructor(opts: PresenceOptions);
|
||||
/**
|
||||
* Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
|
||||
* event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
|
||||
* make sure we only trigger ANIMATION_END for the currently active animation.
|
||||
*/
|
||||
handleAnimationEnd(event: AnimationEvent): void;
|
||||
handleAnimationStart(event: AnimationEvent): void;
|
||||
isPresent: boolean;
|
||||
}
|
||||
export {};
|
||||
+158
@@ -0,0 +1,158 @@
|
||||
import { executeCallbacks } from "svelte-toolbelt";
|
||||
import { Previous, watch } from "runed";
|
||||
import { on } from "svelte/events";
|
||||
import { StateMachine } from "../../../internal/state-machine.js";
|
||||
/**
|
||||
* Cache for animation names with TTL to reduce getComputedStyle calls.
|
||||
* Uses WeakMap to avoid memory leaks when elements are removed.
|
||||
*/
|
||||
const animationNameCache = new WeakMap();
|
||||
const ANIMATION_NAME_CACHE_TTL_MS = 16; // One frame at 60fps
|
||||
const presenceMachine = {
|
||||
mounted: {
|
||||
UNMOUNT: "unmounted",
|
||||
ANIMATION_OUT: "unmountSuspended",
|
||||
},
|
||||
unmountSuspended: {
|
||||
MOUNT: "mounted",
|
||||
ANIMATION_END: "unmounted",
|
||||
},
|
||||
unmounted: {
|
||||
MOUNT: "mounted",
|
||||
},
|
||||
};
|
||||
export class Presence {
|
||||
opts;
|
||||
prevAnimationNameState = $state("none");
|
||||
styles = $state({ display: "", animationName: "none" });
|
||||
initialStatus;
|
||||
previousPresent;
|
||||
machine;
|
||||
present;
|
||||
constructor(opts) {
|
||||
this.opts = opts;
|
||||
this.present = this.opts.open;
|
||||
this.initialStatus = opts.open.current ? "mounted" : "unmounted";
|
||||
this.previousPresent = new Previous(() => this.present.current);
|
||||
this.machine = new StateMachine(this.initialStatus, presenceMachine);
|
||||
this.handleAnimationEnd = this.handleAnimationEnd.bind(this);
|
||||
this.handleAnimationStart = this.handleAnimationStart.bind(this);
|
||||
watchPresenceChange(this);
|
||||
watchStatusChange(this);
|
||||
watchRefChange(this);
|
||||
}
|
||||
/**
|
||||
* Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
|
||||
* event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
|
||||
* make sure we only trigger ANIMATION_END for the currently active animation.
|
||||
*/
|
||||
handleAnimationEnd(event) {
|
||||
if (!this.opts.ref.current)
|
||||
return;
|
||||
// Use cached animation name from styles when available to avoid getComputedStyle
|
||||
const currAnimationName = this.styles.animationName || getAnimationName(this.opts.ref.current);
|
||||
const isCurrentAnimation = currAnimationName.includes(event.animationName) || currAnimationName === "none";
|
||||
if (event.target === this.opts.ref.current && isCurrentAnimation) {
|
||||
this.machine.dispatch("ANIMATION_END");
|
||||
}
|
||||
}
|
||||
handleAnimationStart(event) {
|
||||
if (!this.opts.ref.current)
|
||||
return;
|
||||
if (event.target === this.opts.ref.current) {
|
||||
// Force refresh cache on animation start to get accurate animation name
|
||||
const animationName = getAnimationName(this.opts.ref.current, true);
|
||||
this.prevAnimationNameState = animationName;
|
||||
// Update styles cache for subsequent reads
|
||||
this.styles.animationName = animationName;
|
||||
}
|
||||
}
|
||||
isPresent = $derived.by(() => {
|
||||
return ["mounted", "unmountSuspended"].includes(this.machine.state.current);
|
||||
});
|
||||
}
|
||||
function watchPresenceChange(state) {
|
||||
watch(() => state.present.current, () => {
|
||||
if (!state.opts.ref.current)
|
||||
return;
|
||||
const hasPresentChanged = state.present.current !== state.previousPresent.current;
|
||||
if (!hasPresentChanged)
|
||||
return;
|
||||
const prevAnimationName = state.prevAnimationNameState;
|
||||
// Force refresh on state change to get accurate current animation
|
||||
const currAnimationName = getAnimationName(state.opts.ref.current, true);
|
||||
// Update styles cache for subsequent reads
|
||||
state.styles.animationName = currAnimationName;
|
||||
if (state.present.current) {
|
||||
state.machine.dispatch("MOUNT");
|
||||
}
|
||||
else if (currAnimationName === "none" || state.styles.display === "none") {
|
||||
// If there is no exit animation or the element is hidden, animations won't run
|
||||
// so we unmount instantly
|
||||
state.machine.dispatch("UNMOUNT");
|
||||
}
|
||||
else {
|
||||
/**
|
||||
* When `present` changes to `false`, we check changes to animation-name to
|
||||
* determine whether an animation has started. We chose this approach (reading
|
||||
* computed styles) because there is no `animationrun` event and `animationstart`
|
||||
* fires after `animation-delay` has expired which would be too late.
|
||||
*/
|
||||
const isAnimating = prevAnimationName !== currAnimationName;
|
||||
if (state.previousPresent.current && isAnimating) {
|
||||
state.machine.dispatch("ANIMATION_OUT");
|
||||
}
|
||||
else {
|
||||
state.machine.dispatch("UNMOUNT");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
function watchStatusChange(state) {
|
||||
watch(() => state.machine.state.current, () => {
|
||||
if (!state.opts.ref.current)
|
||||
return;
|
||||
// Use cached animation name first, only force refresh if needed for mounted state
|
||||
const currAnimationName = state.machine.state.current === "mounted"
|
||||
? getAnimationName(state.opts.ref.current, true)
|
||||
: "none";
|
||||
state.prevAnimationNameState = currAnimationName;
|
||||
// Update styles cache
|
||||
state.styles.animationName = currAnimationName;
|
||||
});
|
||||
}
|
||||
function watchRefChange(state) {
|
||||
watch(() => state.opts.ref.current, () => {
|
||||
if (!state.opts.ref.current)
|
||||
return;
|
||||
// Snapshot only needed style properties instead of storing live CSSStyleDeclaration
|
||||
// This avoids triggering style recalculations when accessing the cached object
|
||||
const computed = getComputedStyle(state.opts.ref.current);
|
||||
state.styles = {
|
||||
display: computed.display,
|
||||
animationName: computed.animationName || "none",
|
||||
};
|
||||
return executeCallbacks(on(state.opts.ref.current, "animationstart", state.handleAnimationStart), on(state.opts.ref.current, "animationcancel", state.handleAnimationEnd), on(state.opts.ref.current, "animationend", state.handleAnimationEnd));
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Gets the animation name from computed styles with optional caching.
|
||||
*
|
||||
* @param node - The HTML element to get animation name from
|
||||
* @param forceRefresh - If true, bypasses the cache and forces a fresh getComputedStyle call
|
||||
* @returns The animation name or "none" if not animating
|
||||
*/
|
||||
function getAnimationName(node, forceRefresh = false) {
|
||||
if (!node)
|
||||
return "none";
|
||||
const now = performance.now();
|
||||
const cached = animationNameCache.get(node);
|
||||
// Return cached value if still valid and not forced to refresh
|
||||
if (!forceRefresh && cached && now - cached.timestamp < ANIMATION_NAME_CACHE_TTL_MS) {
|
||||
return cached.value;
|
||||
}
|
||||
// Compute and cache the new value
|
||||
const value = getComputedStyle(node).animationName || "none";
|
||||
animationNameCache.set(node, { value, timestamp: now });
|
||||
return value;
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import type { Snippet } from "svelte";
|
||||
import type { ReadableBox } from "svelte-toolbelt";
|
||||
export type PresenceLayerProps = {
|
||||
/**
|
||||
* Whether to force mount the component.
|
||||
*/
|
||||
forceMount?: boolean;
|
||||
};
|
||||
export type PresenceLayerImplProps = PresenceLayerProps & {
|
||||
/**
|
||||
* The open state of the component.
|
||||
*/
|
||||
open: boolean;
|
||||
presence?: Snippet<[{
|
||||
present: boolean;
|
||||
}]>;
|
||||
ref: ReadableBox<HTMLElement | null>;
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
export type ScrollLockProps = {
|
||||
/**
|
||||
* Whether to prevent body scrolling when the content is open.
|
||||
*
|
||||
* @default true
|
||||
*/
|
||||
preventScroll?: boolean;
|
||||
/**
|
||||
* The delay in milliseconds before the scrollbar is restored after closing the
|
||||
* dialog. This is only applicable when using the `child` snippet for custom
|
||||
* transitions and `preventScroll` is `true`. You should set this to a value
|
||||
* greater than the transition duration to prevent content from shifting during
|
||||
* the transition.
|
||||
*
|
||||
* @default null
|
||||
*/
|
||||
restoreScrollDelay?: number | null;
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export {};
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
import type { ScrollLockProps } from "./index.js";
|
||||
import { BodyScrollLock } from "../../../internal/body-scroll-lock.svelte.js";
|
||||
|
||||
let { preventScroll = true, restoreScrollDelay = null }: ScrollLockProps = $props();
|
||||
|
||||
if (preventScroll) {
|
||||
new BodyScrollLock(preventScroll, () => restoreScrollDelay);
|
||||
}
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user