@geoffcox/sterling-svelte 2.0.1 → 2.0.2

package/dist/TabList.svelte

@@ -1,202 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { setContext } from 'svelte';
-import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
-let { children, class: _class, disabled = false, onSelect, selectedValue = $bindable(), vertical = false, ...rest } = $props();
-let tabListRef;
-let lastSelectedTabRef;
-let tabListContext = {
-    get disabled() {
-        return disabled;
-    },
-    set disabled(value) {
-        disabled = value;
-    },
-    get selectedValue() {
-        return selectedValue;
-    },
-    set selectedValue(value) {
-        selectedValue = value;
-    },
-    get vertical() {
-        return vertical;
-    },
-    set vertical(value) {
-        vertical = value;
-    }
-};
-$effect(() => {
-    tabListContext.disabled = disabled;
-});
-$effect(() => {
-    tabListContext.selectedValue = selectedValue;
-});
-$effect(() => {
-    tabListContext.vertical = vertical;
-});
-setContext(TAB_LIST_CONTEXT_KEY, tabListContext);
-$effect(() => {
-    onSelect?.(selectedValue);
-});
-export const blur = () => {
-    tabListRef?.blur();
-};
-export const focus = (options) => {
-    let selectedItem = getSelectedTabElement();
-    if (selectedValue && selectedItem) {
-        selectTab(selectedValue, selectedItem);
-    }
-    else {
-        selectFirstTab();
-    }
-};
-const isElementTab = (candidate) => {
-    return (candidate &&
-        candidate.getAttribute('data-value') !== null &&
-        candidate.getAttribute('data-value') !== undefined &&
-        candidate.getAttribute('role') === 'tab');
-};
-const getSelectedTabElement = () => {
-    if (isElementTab(lastSelectedTabRef) &&
-        lastSelectedTabRef?.getAttribute('data-value') === selectedValue &&
-        lastSelectedTabRef?.closest('[role="tablist"]') === tabListRef) {
-        return lastSelectedTabRef;
-    }
-    else {
-        return tabListRef?.querySelector('[data-value][aria-selected=true]');
-    }
-};
-const selectTab = (value, element) => {
-    selectedValue = value;
-    lastSelectedTabRef = element;
-    element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-    element.focus();
-};
-export const selectFirstTab = () => {
-    let candidate = tabListRef?.firstElementChild;
-    while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.nextElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-export const selectPreviousTab = () => {
-    let selectedTab = getSelectedTabElement();
-    let candidate = selectedTab?.previousElementSibling;
-    while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.previousElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-export const selectNextTab = () => {
-    let selectedTab = getSelectedTabElement();
-    let candidate = selectedTab?.nextElementSibling;
-    while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.nextElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-export const selectLastTab = () => {
-    let candidate = tabListRef?.lastElementChild;
-    while (candidate && !isElementTab(candidate)) {
-        candidate = candidate.previousElementSibling;
-    }
-    let candidateValue = candidate?.getAttribute('data-value');
-    if (candidateValue && candidate) {
-        selectTab(candidateValue, candidate);
-        return true;
-    }
-    return false;
-};
-const onClick = (event) => {
-    if (!disabled) {
-        let candidate = event.target;
-        let candidateValue = candidate?.getAttribute('data-value');
-        if (candidateValue === undefined || candidateValue === null) {
-            candidate = candidate?.closest('[role=tab]');
-            candidateValue = candidate?.getAttribute('data-value');
-        }
-        if (candidateValue && candidate) {
-            selectTab(candidateValue, candidate);
-        }
-    }
-    rest.onclick?.(event);
-};
-const onKeydown = (event) => {
-    // if using arrows, only move when there are no modifier keys
-    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
-        switch (event.key) {
-            case 'Home':
-                selectFirstTab();
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'End':
-                selectLastTab();
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowLeft':
-                if (!vertical) {
-                    selectPreviousTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowRight':
-                if (!vertical) {
-                    selectNextTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowUp':
-                if (vertical) {
-                    selectPreviousTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case 'ArrowDown':
-                if (vertical) {
-                    selectNextTab();
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            default:
-                break;
-        }
-    }
-    rest.onkeydown?.(event);
-};
-</script>
-
-<div
-  aria-orientation={vertical ? 'vertical' : 'horizontal'}
-  bind:this={tabListRef}
-  class={`sterling-tab-list ${_class}`}
-  class:disabled
-  class:vertical
-  role="tablist"
-  tabindex="-1"
-  onclick={onClick}
-  onkeydown={onKeydown}
-  {...rest}
->
-  {@render children?.()}
-</div>

package/dist/TabList.svelte.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="svelte" />
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    selectedValue?: string;
-    vertical?: boolean | null;
-    onSelect?: (value?: string) => void;
-};
-declare const TabList: import("svelte").Component<Props, {
-    blur: () => void;
-    focus: (options?: FocusOptions) => void;
-    selectFirstTab: () => boolean;
-    selectPreviousTab: () => boolean;
-    selectNextTab: () => boolean;
-    selectLastTab: () => boolean;
-}, "selectedValue">;
-type TabList = ReturnType<typeof TabList>;
-export default TabList;

package/dist/TabList.types.d.ts

@@ -1,5 +0,0 @@
-export type TabListContext = {
-    disabled?: boolean | null | undefined;
-    selectedValue?: string | undefined;
-    vertical?: boolean | null | undefined;
-};

package/dist/TabList.types.js

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

package/dist/TextArea.constants.d.ts

@@ -1 +0,0 @@
-export declare const TEXT_AREA_RESIZES: readonly ["none", "horizontal", "vertical", "both"];

package/dist/TextArea.constants.js

@@ -1 +0,0 @@
-export const TEXT_AREA_RESIZES = ['none', 'horizontal', 'vertical', 'both'];

package/dist/TextArea.svelte

@@ -1,74 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { tick } from 'svelte';
-let { class: _class, disabled = false, value = $bindable(''), autoHeight = false, resize = $bindable('none'), style, ...rest } = $props();
-let textAreaRef;
-const correctResize = async () => {
-    await tick();
-    setTimeout(() => {
-        if (autoHeight) {
-            if (resize === 'both') {
-                console.warn('The resize property cannot be set to "both" when autoHeight is true. The resize property will be set to "horizontal".');
-                resize = 'horizontal';
-            }
-            if (resize === 'vertical') {
-                console.warn('The resize property cannot be set to "vertical" when autoHeight is true. The resize property will be set to "none".');
-                resize = 'none';
-            }
-        }
-    }, 0);
-};
-const autoSetHeight = () => {
-    if (autoHeight && textAreaRef) {
-        // the style must be directly set to avoid re-rendering looping latency
-        // setting to auto for a moment allows the textarea to shrink
-        textAreaRef.style.height = 'auto';
-        textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
-    }
-};
-$effect(() => {
-    autoHeight;
-    resize;
-    correctResize();
-    autoSetHeight();
-});
-const onInput = (event) => {
-    autoSetHeight();
-    rest.oninput?.(event);
-};
-export const blur = () => {
-    textAreaRef?.blur();
-};
-export const click = () => {
-    textAreaRef?.click();
-};
-export const focus = (options) => {
-    textAreaRef?.focus();
-};
-export const select = () => {
-    textAreaRef?.select();
-};
-export const setSelectionRange = (start, end, direction) => {
-    textAreaRef?.setSelectionRange(start, end, direction);
-};
-export const setRangeText = (replacement, start, end, selectionMode) => {
-    if (start && end) {
-        textAreaRef?.setRangeText(replacement, start, end, selectionMode);
-    }
-    else {
-        textAreaRef?.setRangeText(replacement);
-    }
-};
-</script>
-
-<div class={`sterling-text-area ${_class}`} class:disabled>
-  <textarea
-    bind:this={textAreaRef}
-    bind:value
-    {disabled}
-    rows="1"
-    {...rest}
-    oninput={onInput}
-    style={`--TextArea__resize: ${resize};${style}`}
-  ></textarea>
-</div>

package/dist/TextArea.svelte.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="svelte" />
-import type { TextAreaResize } from './TextArea.types';
-import type { HTMLTextareaAttributes } from 'svelte/elements';
-type Props = HTMLTextareaAttributes & {
-    autoHeight?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    value?: string;
-    resize?: TextAreaResize;
-};
-declare const TextArea: import("svelte").Component<Props, {
-    blur: () => void;
-    click: () => void;
-    focus: (options?: FocusOptions) => void;
-    select: () => void;
-    setSelectionRange: (start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void;
-    setRangeText: (replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void;
-}, "value" | "resize">;
-type TextArea = ReturnType<typeof TextArea>;
-export default TextArea;

package/dist/TextArea.types.d.ts

@@ -1,4 +0,0 @@
-import type { TEXT_AREA_RESIZES } from './TextArea.constants';
-type TextAreaResizeTuple = typeof TEXT_AREA_RESIZES;
-export type TextAreaResize = TextAreaResizeTuple[number];
-export {};

package/dist/TextArea.types.js

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

package/dist/Tooltip.svelte

@@ -1,63 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { onMount } from 'svelte';
-import Callout from './Callout.svelte';
-let { children, class: _class, disabled = false, hoverDelayMilliseconds = 1000, open = $bindable(false), tip, ...rest } = $props();
-let originRef = $state();
-let reference = $derived(!!children ? originRef?.previousElementSibling : undefined);
-$inspect({ reference });
-const show = () => {
-    if (!disabled) {
-        open = true;
-    }
-};
-const hide = () => (open = false);
-const delayShow = () => {
-    hoverDelayMilliseconds === 0
-        ? show()
-        : setTimeout(() => {
-            show();
-        }, hoverDelayMilliseconds);
-};
-$effect(() => {
-    if (disabled) {
-        hide();
-    }
-});
-// ----- Event Listeners ----- //
-let cleanupAutoShowUpdate = () => { };
-const autoShowUpdate = () => {
-    cleanupAutoShowUpdate();
-    cleanupAutoShowUpdate = () => { };
-    const element = reference;
-    open = false;
-    if (element) {
-        element.addEventListener('mouseenter', delayShow);
-        element.addEventListener('mouseleave', hide);
-        cleanupAutoShowUpdate = () => {
-            element.removeEventListener('mouseenter', delayShow);
-            element.removeEventListener('mouseleave', hide);
-        };
-    }
-};
-$effect(() => {
-    reference;
-    autoShowUpdate();
-});
-// ----- EventHandlers ----- //
-onMount(() => {
-    autoShowUpdate();
-});
-</script>
-
-{@render children?.()}
-<div class="sterling-tooltip-origin" bind:this={originRef}></div>
-<Callout class={_class} {open} {reference} {...rest}>
-  {#if tip}
-    {#if typeof tip === 'string'}
-      {tip}
-    {:else}
-      {@render tip()}
-    {/if}
-  {/if}
-</Callout>

package/dist/Tooltip.svelte.d.ts

@@ -1,10 +0,0 @@
-import { type Snippet } from 'svelte';
-import type { CalloutProps } from './Callout.types';
-type Props = Omit<CalloutProps, 'reference'> & {
-    disabled?: boolean;
-    hoverDelayMilliseconds?: number;
-    tip?: string | Snippet;
-};
-declare const Tooltip: import("svelte").Component<Props, {}, "open">;
-type Tooltip = ReturnType<typeof Tooltip>;
-export default Tooltip;

package/dist/Tree.constants.d.ts

@@ -1 +0,0 @@
-export declare const TREE_CONTEXT_KEY = "sterlingTree";

package/dist/Tree.constants.js

@@ -1 +0,0 @@
-export const TREE_CONTEXT_KEY = 'sterlingTree';

package/dist/Tree.svelte

@@ -1,53 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { setContext } from 'svelte';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-import { TREE_CONTEXT_KEY } from './Tree.constants';
-let { children, class: _class, disabled = false, expandedValues = $bindable([]), onExpandCollapse, onSelect, selectedValue = $bindable(undefined), ...rest } = $props();
-let treeRef;
-let treeContext = {
-    get disabled() {
-        return disabled;
-    },
-    get expandedValues() {
-        return expandedValues;
-    },
-    set expandedValues(value) {
-        expandedValues = value;
-    },
-    get selectedValue() {
-        return selectedValue;
-    },
-    set selectedValue(value) {
-        selectedValue = value;
-    }
-};
-setContext(TREE_CONTEXT_KEY, treeContext);
-$effect(() => {
-    onSelect?.(selectedValue);
-});
-$effect(() => {
-    onExpandCollapse?.(expandedValues);
-});
-export const blur = () => {
-    treeRef?.blur();
-};
-export const focus = (options) => {
-    treeRef?.focus(options);
-};
-</script>
-
-<div
-  bind:this={treeRef}
-  aria-disabled={disabled}
-  class={`sterling-tree ${_class}`}
-  class:disabled
-  class:using-keyboard={$usingKeyboard}
-  role="tree"
-  tabindex="0"
-  {...rest}
->
-  <div class="container">
-    {@render children?.()}
-  </div>
-</div>

package/dist/Tree.svelte.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="svelte" />
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    disabled?: boolean | null;
-    expandedValues?: string[];
-    selectedValue?: string;
-    onExpandCollapse?: (expandedValues: string[]) => void;
-    onSelect?: (selectedValue: string | undefined) => void;
-};
-declare const Tree: import("svelte").Component<Props, {
-    blur: () => void;
-    focus: (options?: FocusOptions) => void;
-}, "selectedValue" | "expandedValues">;
-type Tree = ReturnType<typeof Tree>;
-export default Tree;

package/dist/Tree.types.d.ts

@@ -1,5 +0,0 @@
-export type TreeContext = {
-    disabled: boolean | null | undefined;
-    expandedValues: string[];
-    selectedValue: string | undefined;
-};

package/dist/Tree.types.js

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

package/dist/TreeChevron.svelte

@@ -1,27 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">import { onMount } from 'svelte';
-let { class: _class, expanded = false, hasChildren = false, ...rest } = $props();
-let previousExpanded = expanded;
-let mounted = false;
-onMount(() => {
-    setTimeout(() => {
-        mounted = true;
-    }, 0);
-});
-let animate = $state(false);
-$effect(() => {
-    if (expanded !== previousExpanded && mounted) {
-        animate = true;
-    }
-    previousExpanded = expanded;
-});
-</script>
-
-<div
-  class={`sterling-tree-chevron ${_class}`}
-  class:leaf={!hasChildren}
-  class:animate
-  class:expanded
-  {...rest}
-></div>

package/dist/TreeChevron.svelte.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="svelte" />
-import type { HTMLAttributes } from 'svelte/elements';
-type Props = HTMLAttributes<HTMLDivElement> & {
-    expanded?: boolean | null | undefined;
-    hasChildren?: boolean | null | undefined;
-};
-declare const TreeChevron: import("svelte").Component<Props, {}, "">;
-type TreeChevron = ReturnType<typeof TreeChevron>;
-export default TreeChevron;

package/dist/TreeItem.constants.d.ts

@@ -1 +0,0 @@
-export declare const TREE_ITEM_CONTEXT_KEY = "sterlingTreeItem";

package/dist/TreeItem.constants.js

@@ -1 +0,0 @@
-export const TREE_ITEM_CONTEXT_KEY = 'sterlingTreeItem';