@geoffcox/sterling-svelte 1.0.12 → 2.0.0

package/{dist/TabList.svelte → TabList.svelte}

@@ -1,36 +1,43 @@
-<script>import { createEventDispatcher, setContext } from 'svelte';
-import { writable } from 'svelte/store';
+<svelte:options runes={true} />
+
+<script lang="ts">import { setContext } from 'svelte';
 import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
-// ----- Props ----- //
-/** When true, the tab list and its tabs are disabled. */
-export let disabled = false;
-/** The value of the currently selected tab. */
-export let selectedValue = undefined;
-/** When true, the tab list is displayed vertically. */
-export let vertical = false;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+let { children, class: _class, disabled = false, onSelect, selectedValue = $bindable(), vertical = false, ...rest } = $props();
 let tabListRef;
 let lastSelectedTabRef;
-const disabledStore = writable(disabled);
-const selectedValueStore = writable(selectedValue);
-const verticalStore = writable(vertical);
-$: disabledStore.set(disabled);
-$: selectedValueStore.set(selectedValue);
-$: {
-    selectedValue = $selectedValueStore;
-}
-$: verticalStore.set(vertical);
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseSelect = (value) => {
-    dispatch('select', { value });
+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;
+    }
 };
-$: {
-    raiseSelect(selectedValue);
-}
-// ----- Methods ----- //
+$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();
 };
@@ -43,7 +50,6 @@ export const focus = (options) => {
         selectFirstTab();
     }
 };
-// ----- Selection ----- //
 const isElementTab = (candidate) => {
     return (candidate &&
         candidate.getAttribute('data-value') !== null &&
@@ -61,7 +67,7 @@ const getSelectedTabElement = () => {
     }
 };
 const selectTab = (value, element) => {
-    selectedValueStore.set(value);
+    selectedValue = value;
     lastSelectedTabRef = element;
     element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
     element.focus();
@@ -116,7 +122,6 @@ export const selectLastTab = () => {
     }
     return false;
 };
-// ----- EventHandlers ----- //
 const onClick = (event) => {
     if (!disabled) {
         let candidate = event.target;
@@ -129,6 +134,7 @@ const onClick = (event) => {
             selectTab(candidateValue, candidate);
         }
     }
+    rest.onclick?.(event);
 };
 const onKeydown = (event) => {
     // if using arrows, only move when there are no modifier keys
@@ -138,91 +144,59 @@ const onKeydown = (event) => {
                 selectFirstTab();
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             case 'End':
                 selectLastTab();
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             case 'ArrowLeft':
                 if (!vertical) {
                     selectPreviousTab();
                 }
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             case 'ArrowRight':
                 if (!vertical) {
                     selectNextTab();
                 }
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             case 'ArrowUp':
                 if (vertical) {
                     selectPreviousTab();
                 }
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             case 'ArrowDown':
                 if (vertical) {
                     selectNextTab();
                 }
                 event.preventDefault();
                 event.stopPropagation();
-                return false;
+                break;
             default:
                 break;
         }
     }
+    rest.onkeydown?.(event);
 };
-// ----- Set Context ----- //
-setContext(TAB_LIST_CONTEXT_KEY, {
-    disabled: disabledStore,
-    selectedValue: selectedValueStore,
-    vertical: verticalStore
-});
 </script>
 
 <div
   aria-orientation={vertical ? 'vertical' : 'horizontal'}
   bind:this={tabListRef}
-  class={`sterling-tab-list ${variant}`}
+  class={`sterling-tab-list ${_class}`}
   class:disabled
   class:vertical
   role="tablist"
   tabindex="-1"
-  on:blur
-  on:click
-  on:click={onClick}
-  on:copy
-  on:cut
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keydown={onKeydown}
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:scroll
-  on:wheel|passive
-  on:paste
-  {...$$restProps}
+  onclick={onClick}
+  onkeydown={onKeydown}
+  {...rest}
 >
-  <slot {disabled} {selectedValue} {variant} {vertical} />
+  {@render children?.()}
 </div>

package/TabList.svelte.d.ts

@@ -0,0 +1,18 @@
+/// <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/TabList.types.d.ts

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

package/{dist/TextArea.svelte → TextArea.svelte}

@@ -1,17 +1,9 @@
-<script>import { onMount, tick } from 'svelte';
-// ----- Props ----- //
-export let disabled = false;
-export let value = '';
-/** When true, the text area will resize itself vertically to fit text.*/
-export let autoHeight = false;
-/** Sets the resize handle direction. */
-export let resize = 'none';
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+<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 () => {
-    console.log('correctResize');
     await tick();
     setTimeout(() => {
         if (autoHeight) {
@@ -26,8 +18,6 @@ const correctResize = async () => {
         }
     }, 0);
 };
-$: autoHeight, resize, correctResize();
-// ----- autoHeight ----- //
 const autoSetHeight = () => {
     if (autoHeight && textAreaRef) {
         // the style must be directly set to avoid re-rendering looping latency
@@ -36,15 +26,16 @@ const autoSetHeight = () => {
         textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
     }
 };
-$: autoHeight, autoSetHeight();
-// ----- Event Handlers ----- //
-const onInput = () => {
-    autoSetHeight();
-};
-onMount(() => {
+$effect(() => {
+    autoHeight;
+    resize;
+    correctResize();
     autoSetHeight();
 });
-// ----- Methods ----- //
+const onInput = (event) => {
+    autoSetHeight();
+    rest.oninput?.(event);
+};
 export const blur = () => {
     textAreaRef?.blur();
 };
@@ -70,47 +61,14 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 };
 </script>
 
-<div class={`sterling-text-area ${variant}`} class:disabled>
+<div class={`sterling-text-area ${_class}`} class:disabled>
   <textarea
     bind:this={textAreaRef}
     bind:value
     {disabled}
     rows="1"
-    style={`--TextArea__resize: ${resize};`}
-    on:beforeinput
-    on:blur
-    on:click
-    on:change
-    on:copy
-    on:cut
-    on:paste
-    on:dblclick
-    on:dragend
-    on:dragenter
-    on:dragleave
-    on:dragover
-    on:dragstart
-    on:drop
-    on:focus
-    on:focusin
-    on:focusout
-    on:input
-    on:invalid
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mousedown
-    on:mouseenter
-    on:mouseleave
-    on:mousemove
-    on:mouseover
-    on:mouseout
-    on:mouseup
-    on:select
-    on:submit
-    on:reset
-    on:wheel|passive
-    on:input={onInput}
-    {...$$restProps}
-  />
+    {...rest}
+    oninput={onInput}
+    style={`--TextArea__resize: ${resize};${style}`}
+  ></textarea>
 </div>

package/TextArea.svelte.d.ts

@@ -0,0 +1,19 @@
+/// <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/Tooltip.svelte

@@ -0,0 +1,63 @@
+<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/Tooltip.svelte.d.ts

@@ -0,0 +1,10 @@
+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/Tree.svelte

@@ -0,0 +1,53 @@
+<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/Tree.svelte.d.ts

@@ -0,0 +1,15 @@
+/// <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/Tree.types.d.ts

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

package/TreeChevron.svelte

@@ -0,0 +1,27 @@
+<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/TreeChevron.svelte.d.ts

@@ -0,0 +1,9 @@
+/// <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;