@geoffcox/sterling-svelte 2.0.1 → 2.0.2

package/dist/TreeItem.svelte

@@ -1,329 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { getContext, setContext } from 'svelte';
-import { slide } from 'svelte/transition';
-import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
-import { TREE_CONTEXT_KEY } from './Tree.constants';
-import TreeChevron from './TreeChevron.svelte';
-import { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
-let { children, class: _class, disabled = false, icon, label, style, value, ...rest } = $props();
-const slideNoOp = (node, params) => {
-    return { delay: 0, duration: 0 };
-};
-let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
-const treeContext = getContext(TREE_CONTEXT_KEY) || {
-    disabled: false,
-    expandedValues: [],
-    selectedValue: null
-};
-const treeItemContext = getContext(TREE_ITEM_CONTEXT_KEY) || {
-    depth: 0,
-    disabled: false
-};
-let _disabled = $derived(disabled || treeItemContext.disabled || treeContext.disabled);
-// Using $derived would be preferred, but this helps avoid
-// updates to every tree item when expandedValues changes.
-let expanded = $state(treeContext.expandedValues?.includes(value));
-$effect(() => {
-    let expandedCandidate = treeContext.expandedValues?.includes(value);
-    if (expandedCandidate !== expanded) {
-        expanded = expandedCandidate;
-    }
-});
-// Using $derived would be preferred, but this helps avoid
-// updates to every list item when selectedValue changes.
-let selected = $state(treeContext.selectedValue === value);
-$effect(() => {
-    if (treeContext.selectedValue === value && !selected) {
-        selected = true;
-    }
-    else if (treeContext.selectedValue !== value && selected) {
-        selected = false;
-    }
-});
-let treeItemRef;
-let itemRef;
-let treeItemChildContext = {
-    get disabled() {
-        return _disabled;
-    },
-    get depth() {
-        return treeItemContext.depth ? treeItemContext.depth + 1 : 1;
-    }
-};
-setContext(TREE_ITEM_CONTEXT_KEY, treeItemChildContext);
-const collapseItem = (index) => {
-    if (!_disabled) {
-        index =
-            index ?? treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
-        if (index !== -1) {
-            treeContext.expandedValues = [
-                ...treeContext.expandedValues.slice(0, index),
-                ...treeContext.expandedValues.slice(index + 1)
-            ];
-            return true;
-        }
-    }
-    return false;
-};
-export const collapse = () => collapseItem();
-const expandItem = (index) => {
-    if (!_disabled) {
-        index =
-            index ?? treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
-        if (index === -1) {
-            treeContext.expandedValues = [...treeContext.expandedValues, value];
-            return true;
-        }
-    }
-    return false;
-};
-export const expand = () => expandItem();
-export const toggleExpanded = () => {
-    if (!_disabled && children) {
-        const index = treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
-        return index !== -1 ? collapseItem(index) : expandItem(index);
-    }
-    return false;
-};
-const blurItem = (treeItemElement) => {
-    if (!_disabled) {
-        const item = treeItemElement?.querySelector('.item');
-        item?.blur();
-    }
-};
-export const blur = () => {
-    blurItem(treeItemRef);
-};
-const focusItem = (treeItemElement, options) => {
-    if (!_disabled) {
-        const item = treeItemElement;
-        item?.focus(options);
-    }
-};
-export const focus = (options) => {
-    focusItem(treeItemRef);
-    treeItemRef?.focus(options);
-};
-const clickItem = (treeItemElement) => {
-    if (!_disabled) {
-        const item = treeItemElement;
-        item?.click();
-    }
-};
-export const click = () => {
-    clickItem(treeItemRef);
-};
-const selectItemByValue = (value) => {
-    if (!_disabled) {
-        treeContext.selectedValue = value;
-    }
-};
-export const select = () => {
-    if (!_disabled) {
-        selectItemByValue(value);
-    }
-};
-export const selectParent = () => {
-    if (!_disabled) {
-        let candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
-        let candidateValue = candidate?.getAttribute('data-value');
-        if (candidateValue && candidate) {
-            selectItemByValue(candidateValue);
-            focusItem(candidate);
-            return true;
-        }
-    }
-    return false;
-};
-export const selectPrevious = () => {
-    if (!_disabled) {
-        let candidate = undefined;
-        let candidateValue = undefined;
-        const previousSibling = treeItemRef?.previousElementSibling;
-        if (previousSibling) {
-            // look for the last (recursive) decendant of ths previous sibling
-            const decendants = previousSibling.querySelectorAll('[role="treeitem"][data-value]');
-            if (decendants) {
-                candidate = decendants[decendants.length - 1];
-                candidateValue = candidate?.getAttribute('data-value');
-            }
-            // look for the previous sibling
-            if (!candidateValue) {
-                candidate = previousSibling;
-                candidateValue = candidate?.getAttribute('data-value');
-            }
-        }
-        // look for the parent
-        if (!candidateValue) {
-            candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
-            candidateValue = candidate?.getAttribute('data-value');
-        }
-        if (candidateValue && candidate) {
-            selectItemByValue(candidateValue);
-            focusItem(candidate);
-            return true;
-        }
-    }
-    return false;
-};
-export const selectNext = () => {
-    if (!_disabled) {
-        let candidateValue = undefined;
-        // look for decendants
-        let candidate = treeItemRef.querySelector('[role="treeitem"][data-value]');
-        candidateValue = candidate?.getAttribute('data-value');
-        // look for next sibling
-        if (!candidateValue) {
-            candidate = treeItemRef.nextElementSibling;
-            while (candidate && candidate.getAttribute('data-value') === null) {
-                candidate = candidate.nextElementSibling;
-            }
-            candidateValue = candidate?.getAttribute('data-value');
-        }
-        // look for next sibling of ancestor
-        if (!candidateValue) {
-            let ancestor = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
-            while (ancestor && !candidateValue) {
-                candidate = ancestor?.nextElementSibling;
-                candidateValue = candidate?.getAttribute('data-value');
-                ancestor = ancestor.parentElement?.closest('[role="treeitem"][data-value]');
-            }
-        }
-        if (candidateValue && candidate) {
-            selectItemByValue(candidateValue);
-            focusItem(candidate);
-            return true;
-        }
-    }
-    return false;
-};
-const onClick = (event) => {
-    const eventTarget = event.target;
-    if (!_disabled && itemRef.contains(eventTarget)) {
-        toggleExpanded();
-        select();
-        return;
-    }
-    rest.onclick?.(event);
-};
-const onKeydown = (event) => {
-    if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-                if (toggleExpanded()) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                }
-                break;
-            case 'ArrowRight':
-                /*
-                When focus is on a closed item, opens the item; focus does not move.
-                When focus is on an open item, moves focus to the first child item.
-                When focus is on an end item (a tree item with no children), does nothing.
-                */
-                if (children) {
-                    if (expanded) {
-                        if (selectNext()) {
-                            event.preventDefault();
-                            event.stopPropagation();
-                            return;
-                        }
-                    }
-                    else if (expandItem()) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        return;
-                    }
-                }
-                break;
-            case 'ArrowLeft':
-                /*
-                When focus is on an open item, closes the item.
-                When focus is on a child item that is also either an end item or a closed item, moves focus to its parent item.
-                When focus is on a closed `tree`, does nothing.
-                */
-                if (expanded && children) {
-                    if (collapseItem()) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        return;
-                    }
-                }
-                else if (selectParent()) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                }
-                break;
-            case 'ArrowUp':
-                /*
-                Moves focus to the previous item that is focusable without opening or closing a item.
-                */
-                if (selectPrevious()) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                }
-                break;
-            case 'ArrowDown':
-                /*
-                Moves focus to the next item that is focusable without opening or closing a item.
-                */
-                if (selectNext()) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                }
-                break;
-        }
-    }
-    rest.onkeydown?.(event);
-};
-</script>
-
-<div
-  bind:this={treeItemRef}
-  aria-selected={selected ? true : undefined}
-  aria-expanded={expanded}
-  class={`sterling-tree-item ${_class}`}
-  class:disabled={_disabled}
-  class:expanded
-  class:item-disabled={disabled}
-  class:leaf={!children}
-  class:parent-disabled={treeItemContext.disabled}
-  class:selected
-  class:tree-disabled={treeContext.disabled}
-  data-value={value}
-  role="treeitem"
-  tabindex={selected ? 0 : -1}
-  {...rest}
-  onclick={onClick}
-  onkeydown={onKeydown}
-  style={`--sterling-tree-item-depth: ${treeItemContext.depth}; ${style}`}
->
-  <!-- TODO: In RTL consider position of icon and label get reversed -->
-  <div bind:this={itemRef} class="item" class:selected>
-    {#if icon}
-      {@render icon()}
-    {:else}
-      <TreeChevron {expanded} hasChildren={!!children} />
-    {/if}
-    {#if label}
-      {#if typeof label === 'string'}
-        {label}
-      {:else}
-        {@render label()}
-      {/if}
-    {:else}
-      {value}
-    {/if}
-  </div>
-  {#if expanded && children}
-    <div class="children" transition:slideMotion|global={{ duration: 200 }} role="group">
-      {@render children?.()}
-    </div>
-  {/if}
-</div>

package/dist/TreeItem.svelte.d.ts

@@ -1,22 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements';
-import { type Snippet } from 'svelte';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null | undefined;
-    icon?: Snippet;
-    label?: string | Snippet;
-    value: string;
-};
-declare const TreeItem: import("svelte").Component<Props, {
-    collapse: () => boolean;
-    expand: () => boolean;
-    toggleExpanded: () => boolean;
-    blur: () => void;
-    focus: (options?: FocusOptions) => void;
-    click: () => void;
-    select: () => void;
-    selectParent: () => boolean;
-    selectPrevious: () => boolean;
-    selectNext: () => boolean;
-}, "">;
-type TreeItem = ReturnType<typeof TreeItem>;
-export default TreeItem;

package/dist/TreeItem.types.d.ts

@@ -1,4 +0,0 @@
-export type TreeItemContext = {
-    depth: number;
-    disabled: boolean | null | undefined;
-};

package/dist/TreeItem.types.js

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

package/dist/actions/applyLightDarkMode.d.ts

@@ -1,10 +0,0 @@
-type Mode = 'auto' | 'light' | 'dark';
-type Params = {
-    atDocumentRoot?: boolean;
-    mode?: Mode;
-};
-export declare const applyLightDarkMode: (node: HTMLElement, params?: Params) => {
-    destroy(): void;
-    update(params?: Params): void;
-};
-export {};

package/dist/actions/applyLightDarkMode.js

@@ -1,36 +0,0 @@
-import { prefersColorSchemeDark } from '../mediaQueries/prefersColorSchemeDark';
-const modes = ['light-mode', 'dark-mode'];
-const addMode = (element, mode, prefersDark) => {
-    const darkMode = mode === 'dark' || (mode === 'auto' && prefersDark);
-    element.classList.remove(...modes);
-    element.classList.add(modes[darkMode ? 1 : 0]);
-};
-const clearModes = (element) => {
-    element.classList.remove(...modes);
-};
-export const applyLightDarkMode = (node, params) => {
-    let mode = params?.mode || 'auto';
-    let prefersDark = false;
-    let atDocumentRoot = params?.atDocumentRoot === true;
-    let target = atDocumentRoot ? document.documentElement : node;
-    const unsubscribe = prefersColorSchemeDark.subscribe((value) => {
-        prefersDark = value;
-        addMode(target, mode, prefersDark);
-    });
-    addMode(target, mode, prefersDark);
-    return {
-        destroy() {
-            unsubscribe();
-        },
-        update(params) {
-            // if changing the target, then clear from previous target
-            if (atDocumentRoot !== params?.atDocumentRoot) {
-                clearModes(target);
-            }
-            mode = params?.mode || 'auto';
-            atDocumentRoot = params?.atDocumentRoot === true;
-            target = atDocumentRoot ? document.documentElement : node;
-            addMode(target, mode, prefersDark);
-        }
-    };
-};

package/dist/actions/clickOutside.d.ts

@@ -1,15 +0,0 @@
-type Params = {
-    /** Other elements should not raise the event if clicked. */
-    ignoreOthers?: HTMLElement[];
-    onclickoutside?: (mouseEvent: MouseEvent) => void;
-};
-/**
- * Raises the click_outside event when the user clicks outside the node.
- * @param node The node to check and receive the event.
- * @param params Additional parameters
- */
-export declare const clickOutside: (node: HTMLElement, params?: Params) => {
-    update(params: Params): void;
-    destroy(): void;
-};
-export {};

package/dist/actions/clickOutside.js

@@ -1,28 +0,0 @@
-/**
- * Raises the click_outside event when the user clicks outside the node.
- * @param node The node to check and receive the event.
- * @param params Additional parameters
- */
-export const clickOutside = (node, params) => {
-    let ignoreOthers = params?.ignoreOthers;
-    const handleClick = (event) => {
-        const targetNode = event?.target;
-        if (targetNode &&
-            !node.contains(targetNode) &&
-            (!ignoreOthers || ignoreOthers.filter(Boolean).every((x) => !x.contains(targetNode)))) {
-            params?.onclickoutside?.(event);
-            node.dispatchEvent(new CustomEvent('click_outside', {
-                detail: { mouseEvent: event }
-            }));
-        }
-    };
-    document.addEventListener('click', handleClick, true);
-    return {
-        update(params) {
-            ignoreOthers = params.ignoreOthers;
-        },
-        destroy() {
-            document.removeEventListener('click', handleClick, true);
-        }
-    };
-};

package/dist/actions/extraClass.d.ts

@@ -1,8 +0,0 @@
-type Params = {
-    extraClass: string | null | undefined;
-};
-export declare const extraClass: (node: HTMLElement, params?: Params) => {
-    update(params: Params): void;
-    destroy(): void;
-};
-export {};

package/dist/actions/extraClass.js

@@ -1,14 +0,0 @@
-export const extraClass = (node, params) => {
-    let _class = params?.extraClass;
-    !!_class && node.classList.add(_class);
-    return {
-        update(params) {
-            !!_class && node.classList.remove(_class);
-            _class = params.extraClass;
-            !!_class && node.classList.add(_class);
-        },
-        destroy() {
-            !!_class && node.classList.remove(_class);
-        }
-    };
-};

package/dist/actions/forwardEvents.d.ts

@@ -1,12 +0,0 @@
-export declare const forwardEvents: (node: HTMLElement, params: {
-    target: HTMLElement;
-    events?: string[];
-    customEvents?: string[];
-}) => {
-    update: (params: {
-        target: HTMLElement;
-        events?: string[];
-        customEvents?: [];
-    }) => void;
-    destroy(): void;
-};

package/dist/actions/forwardEvents.js

@@ -1,32 +0,0 @@
-export const forwardEvents = (node, params) => {
-    const addListeners = (node, target, events, customEvents) => {
-        let forward = (event) => {
-            target.dispatchEvent(event);
-        };
-        let forwardCustom = (event) => {
-            const customEvent = event;
-            target.dispatchEvent(new CustomEvent(customEvent.type, {
-                bubbles: customEvent.bubbles,
-                cancelable: customEvent.cancelable,
-                detail: customEvent.detail
-            }));
-        };
-        events?.forEach((e) => node.addEventListener(e, forward));
-        customEvents?.forEach((e) => node.addEventListener(e, forwardCustom));
-        return () => {
-            events?.forEach((e) => node.removeEventListener(e, forward));
-            customEvents?.forEach((e) => node.removeEventListener(e, forwardCustom));
-        };
-    };
-    let unsubscribe = addListeners(node, params.target, params.events, params.customEvents);
-    const update = (params) => {
-        unsubscribe();
-        unsubscribe = addListeners(node, params.target, params.events, params.customEvents);
-    };
-    return {
-        update,
-        destroy() {
-            unsubscribe();
-        }
-    };
-};

package/dist/actions/portal.d.ts

@@ -1,8 +0,0 @@
-export declare const portal: (node: HTMLElement, params: {
-    target?: HTMLElement;
-}) => {
-    update: (params: {
-        target?: HTMLElement;
-    }) => void;
-    destroy(): void;
-};

package/dist/actions/portal.js

@@ -1,19 +0,0 @@
-export const portal = (node, params) => {
-    const child = node;
-    let portaled = false;
-    const createPortal = (node, params) => {
-        if (!portaled && params.target && node) {
-            params.target.appendChild(node);
-            portaled = true;
-        }
-    };
-    createPortal(child, params);
-    return {
-        update: (params) => createPortal(child, params),
-        destroy() {
-            if (portaled) {
-                child?.parentNode?.removeChild(child);
-            }
-        }
-    };
-};

package/dist/actions/trapKeyboardFocus.d.ts

@@ -1,3 +0,0 @@
-export declare const trapKeyboardFocus: (node: HTMLElement) => {
-    destroy: () => void;
-};

package/dist/actions/trapKeyboardFocus.js

@@ -1,52 +0,0 @@
-const getFirstFocusable = (node) => {
-    // we can't select [tabIndex] as many elements don't have tabIndex as a declared property
-    // but do default to tabIndex >= 0.
-    const nodes = node.querySelectorAll('*');
-    const elements = Array.from(nodes)
-        .map((n) => n)
-        .filter((n) => n.tabIndex !== undefined && n.tabIndex >= 0);
-    return elements.length > 0 ? elements[0] : null;
-};
-const getLastFocusable = (node) => {
-    // we can't select [tabIndex] as many elements don't have tabIndex as a declared property
-    // but do default to tabIndex >= 0.
-    const nodes = node.querySelectorAll('*');
-    const elements = Array.from(nodes)
-        .map((n) => n)
-        .filter((n) => n.tabIndex !== undefined && n.tabIndex >= 0);
-    return elements.length > 0 ? elements[elements.length - 1] : null;
-};
-export const trapKeyboardFocus = (node) => {
-    const onKeydown = (e) => {
-        let handledFocus = false;
-        if (e.key === 'Tab') {
-            if (e.shiftKey) {
-                const firstFocusable = getFirstFocusable(node);
-                if (document.activeElement === firstFocusable) {
-                    const lastFocusable = getLastFocusable(node);
-                    lastFocusable?.focus();
-                    handledFocus = true;
-                }
-            }
-            else {
-                const lastFocusable = getLastFocusable(node);
-                if (document.activeElement === lastFocusable) {
-                    const firstFocusable = getFirstFocusable(node);
-                    firstFocusable?.focus();
-                    handledFocus = true;
-                }
-            }
-        }
-        if (handledFocus) {
-            e.stopPropagation();
-            e.preventDefault();
-            return false;
-        }
-    };
-    node.addEventListener('keydown', onKeydown);
-    return {
-        destroy: () => {
-            node.removeEventListener('keydown', onKeydown);
-        }
-    };
-};

package/dist/idGenerator.d.ts

@@ -1,4 +0,0 @@
-export declare const idGenerator: {
-    next: () => number;
-    nextId: (prefix?: string) => string;
-};

package/dist/idGenerator.js

@@ -1,10 +0,0 @@
-let id = 0;
-const next = () => {
-    return ++id;
-};
-export const idGenerator = {
-    next,
-    nextId: (prefix) => {
-        return prefix ? `${prefix}-${next()}` : `${next()}`;
-    }
-};