sheer-ui 0.4.2 → 0.5.0

package/dist/internal/paneforge/types.d.ts

@@ -0,0 +1,152 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Without, WithChild } from '../index.js';
+import type { Direction, PaneOnCollapse, PaneOnExpand, PaneOnResize, PaneResizeHandleOnDragging } from './internal/types.js';
+import type { PaneGroupStorage } from './internal/utils/storage.js';
+type Primitive<T> = Omit<T, 'id' | 'children'> & {
+    id?: string | undefined;
+};
+export type PaneForgePrimitiveDivAttributes = Primitive<HTMLAttributes<HTMLDivElement>>;
+export type PanePropsWithoutHTML = WithChild<{
+    /**
+     * The size of the pane when it is in a collapsed state.
+     */
+    collapsedSize?: number;
+    /**
+     * Whether the pane can be collapsed.
+     *
+     * @defaultValue `false`
+     */
+    collapsible?: boolean;
+    /**
+     * The default size of the pane in percentage.
+     */
+    defaultSize?: number;
+    /**
+     * The maximum size of the pane in percentage of the group's size.
+     *
+     * @defaultValue `100`
+     */
+    maxSize?: number;
+    /**
+     * The minimum size of the pane in percentage of the group's size.
+     *
+     * @defaultValue `0`
+     */
+    minSize?: number;
+    /**
+     * The order of the pane in the group.
+     * Useful for maintaining order when conditionally rendering panes.
+     */
+    order?: number;
+    /**
+     * A callback that is called when the pane is collapsed.
+     */
+    onCollapse?: PaneOnCollapse;
+    /**
+     * A callback that is called when the pane is expanded.
+     */
+    onExpand?: PaneOnExpand;
+    /**
+     * A callback that is called when the pane is resized.
+     */
+    onResize?: PaneOnResize;
+}>;
+export type PaneProps = PanePropsWithoutHTML & Without<PaneForgePrimitiveDivAttributes, PanePropsWithoutHTML>;
+export type PaneGroupPropsWithoutHTML = WithChild<{
+    /**
+     * The id to save the layout of the panes to in local storage.
+     */
+    autoSaveId?: string | null;
+    /**
+     * The direction of the panes.
+     *
+     * @required
+     */
+    direction: Direction;
+    /**
+     * The amount of space to add to the pane group when the keyboard
+     * resize event is triggered.
+     */
+    keyboardResizeBy?: number | null;
+    /**
+     * A callback called when the layout of the panes within the group changes.
+     */
+    onLayoutChange?: (layout: number[]) => void | null;
+    /**
+     * The storage object to use for saving the layout of the panes in the group.
+     */
+    storage?: PaneGroupStorage;
+}>;
+export type PaneGroupProps = PaneGroupPropsWithoutHTML & Without<PaneForgePrimitiveDivAttributes, PaneGroupPropsWithoutHTML>;
+export type PaneResizerPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the resize handle is disabled.
+     *
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+    /**
+     * A callback that is called when the resize handle is being dragged.
+     */
+    onDraggingChange?: PaneResizeHandleOnDragging;
+    /**
+     * The tabindex of the resize handle.
+     */
+    tabindex?: number;
+}>;
+export type PaneResizerProps = PaneResizerPropsWithoutHTML & Without<PaneForgePrimitiveDivAttributes, PaneResizerPropsWithoutHTML>;
+export type PaneAPI = {
+    collapse: () => void;
+    expand: () => void;
+    getId: () => string;
+    /** Get the panes size */
+    getSize: () => number;
+    /** Check if the pane is collapsed */
+    isCollapsed: () => boolean;
+    /** Check if the pane is expanded */
+    isExpanded: () => boolean;
+    /** Resize the pane to the specified size */
+    resize: (size: number) => void;
+};
+export type PaneGroupAPI = {
+    /** Get the ID of the PaneGroup */
+    getId: () => string;
+    /** Get the layout of the PaneGroup */
+    getLayout: () => number[];
+    /** Set the layout of the PaneGroup */
+    setLayout: (layout: number[]) => void;
+};
+/**
+ * Data attributes applied to the element rendered by the `Pane` component.
+ */
+export type PaneAttributes = {
+    /** Applied to every pane element. */
+    'data-pane': string;
+    /** The ID of the pane. */
+    'data-pane-id': string;
+    /** The ID of the pane's group. */
+    'data-pane-group-id': string;
+};
+export type PaneGroupAttributes = {
+    /** Applied to every pane group element. */
+    'data-pane-group': string;
+    /** The direction of the pane group. */
+    'data-direction': Direction;
+    /** The ID of the pane group. */
+    'data-pane-group-id': string;
+};
+export type PaneResizerAttributes = {
+    /** Applied to all resizer elements */
+    'data-pane-resizer': string;
+    /** The direction of the pane group the resize handle belongs to. */
+    'data-direction': Direction;
+    /** The ID of the pane group the resize handle belongs to. */
+    'data-pane-group-id': string;
+    /** Whether the resize handle is active or not. */
+    'data-active'?: 'pointer' | 'keyboard';
+    /** Whether the resize handle is enabled or not. */
+    'data-enabled'?: boolean;
+    /** The ID of the resize handle. */
+    'data-pane-resizer-id': string;
+};
+export {};

package/dist/internal/paneforge/types.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/popper-layer/index.js

@@ -0,0 +1 @@
+export { default as PopperLayer } from "./popper-layer.svelte";

package/dist/internal/popper-layer/popper-content.svelte.d.ts

@@ -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;

package/dist/internal/popper-layer/popper-layer-inner.svelte.d.ts

@@ -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;

package/dist/internal/popper-layer/popper-layer.svelte.d.ts

@@ -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;

package/dist/internal/popper-layer/types.d.ts

@@ -0,0 +1,44 @@
+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 { TextSelectionGuardProps } from "../types.js";
+import type { ReadableBox } from "../tools/index.js";
+import type { FocusScopeImplProps, FocusScopeProps } from "../focus-scope/types.js";
+import type { ScrollLockProps } from "../body-scroll-lock.svelte.js";
+import type { Direction } from "../index.js";
+export type PopperLayerProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & FloatingLayerContentProps & TextSelectionGuardProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay">;
+export type PopperLayerStaticProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & TextSelectionGuardProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay"> & {
+    content?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    dir?: Direction;
+};
+export type PopperLayerImplProps = Omit<EscapeLayerImplProps & DismissibleLayerImplProps & FloatingLayerContentImplProps & {
+    open: boolean;
+    ref: ReadableBox<HTMLElement | null>;
+} & TextSelectionGuardProps & FocusScopeImplProps & {
+    popper: Snippet<[{
+        props: 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 always-mounted content is still rendered — open, or closed with its exit
+     * transition running. Gates the scroll lock. Defaults to the open state.
+     */
+    present?: boolean;
+    /**
+     * Override for the content's pointer-events style.
+     * @default "auto"
+     */
+    contentPointerEvents?: "auto" | "none";
+}, "enabled">;

package/dist/internal/popper-layer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/portal/index.js

@@ -0,0 +1 @@
+export { default as Portal } from './portal.svelte';

package/dist/internal/portal/portal.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+export type PortalTarget = Element | ShadowRoot | 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;
+};
+declare const Portal: import("svelte").Component<PortalProps, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;

package/dist/internal/prop-resolvers.d.ts

@@ -0,0 +1,4 @@
+import { type Getter, type ReadableBox } from './tools/index.js';
+import type { PortalTarget } from './portal';
+export declare const resolveLocaleProp: (getProp: Getter<string | undefined>) => ReadableBox<string>;
+export declare const resolvePortalToProp: (getProp: Getter<PortalTarget | undefined>) => ReadableBox<PortalTarget>;

package/dist/internal/prop-resolvers.js

@@ -0,0 +1,7 @@
+import { boxWith } from './tools/index.js';
+const createPropResolver = (fallback) => (getProp) => boxWith(() => {
+    const prop = getProp();
+    return prop !== undefined ? prop : fallback;
+});
+export const resolveLocaleProp = createPropResolver('en');
+export const resolvePortalToProp = createPropResolver('body');

package/dist/internal/roving-focus-group.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { Getter } from './tools/index.js';
+import type { Orientation } from './index.js';
+type RovingFocusGroupOptions = ({
+    /**
+     * The selector used to find the focusable candidates.
+     */
+    candidateAttr: string;
+    candidateSelector?: undefined;
+    candidateNodes?: undefined;
+} | {
+    /**
+     * Custom candidate selector
+     */
+    candidateSelector: string;
+    candidateAttr?: undefined;
+    candidateNodes?: undefined;
+} | {
+    /**
+     * Collects the candidates from the root node, for groups no selector can express.
+     */
+    candidateNodes: (rootNode: HTMLElement) => HTMLElement[];
+    candidateAttr?: undefined;
+    candidateSelector?: undefined;
+}) & {
+    /** The node the candidates live under. */
+    rootNode: Getter<HTMLElement | null>;
+    /**
+     * Whether to loop through the candidates when reaching the end.
+     */
+    loop: Getter<boolean>;
+    /**
+     * The orientation of the roving focus group. Used
+     * to determine how keyboard navigation should work.
+     */
+    orientation: Getter<Orientation>;
+    /**
+     * A callback function called when a candidate is focused.
+     */
+    onCandidateFocus?: (node: HTMLElement) => void;
+};
+export declare class RovingFocusGroup {
+    #private;
+    /** What a candidate of an attribute-marked group stamps on itself; empty for the other kinds. */
+    readonly candidateAttrs: Record<string, ''>;
+    constructor(opts: RovingFocusGroupOptions);
+    getCandidateNodes(): HTMLElement[];
+    focusFirstCandidate(): void;
+    handleKeydown(node: HTMLElement | null | undefined, e: KeyboardEvent, both?: boolean): HTMLElement | undefined;
+    getTabIndex(node: HTMLElement | null | undefined): 0 | -1;
+    setCurrentTabStopId(id: string): void;
+    focusCurrentTabStop(): void;
+}
+export {};

package/dist/internal/roving-focus-group.svelte.js

@@ -0,0 +1,93 @@
+import { getDirectionalKeys, kbd } from './kbd.js';
+import { isHTMLElement } from './tools/utils/dom.js';
+import { BROWSER } from 'esm-env';
+export class RovingFocusGroup {
+    #opts;
+    #currentTabStopId = $state.raw(null);
+    /** What a candidate of an attribute-marked group stamps on itself; empty for the other kinds. */
+    candidateAttrs;
+    constructor(opts) {
+        this.#opts = opts;
+        this.candidateAttrs = opts.candidateAttr ? { [opts.candidateAttr]: '' } : {};
+    }
+    getCandidateNodes() {
+        const rootNode = this.#opts.rootNode();
+        if (!BROWSER || !rootNode)
+            return [];
+        if (this.#opts.candidateNodes)
+            return this.#opts.candidateNodes(rootNode);
+        const selector = this.#opts.candidateSelector ?? `[${this.#opts.candidateAttr}]:not([data-disabled])`;
+        return Array.from(rootNode.querySelectorAll(selector));
+    }
+    focusFirstCandidate() {
+        const items = this.getCandidateNodes();
+        if (!items.length)
+            return;
+        items[0]?.focus();
+    }
+    handleKeydown(node, e, both = false) {
+        const rootNode = this.#opts.rootNode();
+        if (!rootNode || !node)
+            return;
+        const items = this.getCandidateNodes();
+        if (!items.length)
+            return;
+        const currentIndex = items.indexOf(node);
+        const dir = (rootNode.ownerDocument.defaultView ?? window).getComputedStyle(rootNode).direction;
+        const { nextKey, prevKey } = getDirectionalKeys(dir, this.#opts.orientation());
+        const loop = this.#opts.loop();
+        const keyToIndex = {
+            [nextKey]: currentIndex + 1,
+            [prevKey]: currentIndex - 1,
+            [kbd.HOME]: 0,
+            [kbd.END]: items.length - 1,
+        };
+        if (both) {
+            const altNextKey = nextKey === kbd.ARROW_DOWN ? kbd.ARROW_RIGHT : kbd.ARROW_DOWN;
+            const altPrevKey = prevKey === kbd.ARROW_UP ? kbd.ARROW_LEFT : kbd.ARROW_UP;
+            keyToIndex[altNextKey] = currentIndex + 1;
+            keyToIndex[altPrevKey] = currentIndex - 1;
+        }
+        let itemIndex = keyToIndex[e.key];
+        if (itemIndex === undefined)
+            return;
+        e.preventDefault();
+        if (itemIndex < 0 && loop) {
+            itemIndex = items.length - 1;
+        }
+        else if (itemIndex === items.length && loop) {
+            itemIndex = 0;
+        }
+        const itemToFocus = items[itemIndex];
+        if (!itemToFocus)
+            return;
+        itemToFocus.focus();
+        this.#currentTabStopId = itemToFocus.id;
+        this.#opts.onCandidateFocus?.(itemToFocus);
+        return itemToFocus;
+    }
+    getTabIndex(node) {
+        const items = this.getCandidateNodes();
+        const anyActive = this.#currentTabStopId !== null;
+        if (node && !anyActive && items[0] === node) {
+            this.#currentTabStopId = node.id;
+            return 0;
+        }
+        else if (node?.id === this.#currentTabStopId) {
+            return 0;
+        }
+        return -1;
+    }
+    setCurrentTabStopId(id) {
+        this.#currentTabStopId = id;
+    }
+    focusCurrentTabStop() {
+        const currentTabStopId = this.#currentTabStopId;
+        if (!currentTabStopId)
+            return;
+        const currentTabStop = this.#opts.rootNode()?.querySelector(`#${currentTabStopId}`);
+        if (!currentTabStop || !isHTMLElement(currentTabStop))
+            return;
+        currentTabStop.focus();
+    }
+}

package/dist/internal/roving-focus-item.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Getter, type RefAttachment } from './tools/index.js';
+import type { RovingFocusGroup } from './roving-focus-group.svelte.js';
+type RovingFocusItemOptions<T extends HTMLElement = HTMLElement> = {
+    group: RovingFocusGroup;
+    ref: Getter<T | null>;
+    /** Receives the node from the attachment; the owner keeps it wherever its `ref` reads from. */
+    setRef: (node: T | null) => void;
+    /** Whether arrow keys move from this item; absent means always. */
+    enabled?: Getter<boolean>;
+    onRefChange?: (node: T | null) => void;
+};
+export declare class RovingFocusItem<T extends HTMLElement = HTMLElement> {
+    #private;
+    readonly attachment: RefAttachment<T>;
+    constructor(opts: RovingFocusItemOptions<T>);
+    handleKeydown(e: KeyboardEvent): HTMLElement | undefined;
+    readonly props: {
+        readonly tabindex: number;
+    };
+}
+export {};

package/dist/internal/roving-focus-item.svelte.js

@@ -0,0 +1,27 @@
+import { attachRef } from './tools/index.js';
+export class RovingFocusItem {
+    #opts;
+    attachment;
+    #tabIndex = $state(0);
+    constructor(opts) {
+        this.#opts = opts;
+        this.attachment = attachRef(opts.setRef, opts.onRefChange);
+        this.handleKeydown = this.handleKeydown.bind(this);
+        $effect(() => {
+            if (!(this.#opts.enabled?.() ?? true)) {
+                this.#tabIndex = 0;
+                return;
+            }
+            this.#tabIndex = this.#opts.group.getTabIndex(this.#opts.ref());
+        });
+    }
+    handleKeydown(e) {
+        if (!(this.#opts.enabled?.() ?? true))
+            return;
+        return this.#opts.group.handleKeydown(this.#opts.ref(), e);
+    }
+    props = $derived.by(() => ({
+        tabindex: this.#tabIndex,
+        ...this.attachment,
+    }));
+}

package/dist/internal/safe-polygon.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Getter } from './tools/index.js';
+export interface SafePolygonOptions {
+    enabled: Getter<boolean>;
+    triggerNode: Getter<HTMLElement | null>;
+    contentNode: Getter<HTMLElement | null>;
+    onPointerExit: () => void;
+    buffer?: number;
+    transitIntentTimeout?: number;
+    /** nodes that should not trigger a close when they become the relatedTarget on trigger leave (e.g. sibling triggers in singleton mode) */
+    ignoredTargets?: Getter<HTMLElement[]>;
+}
+/**
+ * Creates a safe polygon area that allows users to move their cursor between
+ * the trigger and floating content without closing it.
+ */
+export declare class SafePolygon {
+    #private;
+    constructor(opts: SafePolygonOptions);
+}