@geoffcox/sterling-svelte 2.0.1 → 2.0.3

package/dist/TextArea.svelte

@@ -1,67 +1,109 @@
 <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 () => {
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { FormEventHandler, HTMLTextareaAttributes } from 'svelte/elements';
+  import type { TextAreaResize } from './TextArea.types';
+
+  type Props = HTMLTextareaAttributes & {
+    autoHeight?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    value?: string;
+    resize?: TextAreaResize;
+  };
+
+  let {
+    class: _class,
+    disabled = false,
+    value = $bindable(''),
+    autoHeight = false,
+    resize = $bindable('none'),
+    style,
+    ...rest
+  }: Props = $props();
+
+  let textAreaRef: HTMLTextAreaElement;
+
+  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';
-            }
+      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 = () => {
+  };
+
+  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`;
+      // 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(() => {
+  };
+
+  $effect(() => {
     autoHeight;
     resize;
     correctResize();
     autoSetHeight();
-});
-const onInput = (event) => {
+  });
+
+  const onInput: FormEventHandler<HTMLTextAreaElement> = (event) => {
     autoSetHeight();
     rest.oninput?.(event);
-};
-export const blur = () => {
+  };
+
+  export const blur = () => {
     textAreaRef?.blur();
-};
-export const click = () => {
+  };
+
+  export const click = () => {
     textAreaRef?.click();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     textAreaRef?.focus();
-};
-export const select = () => {
+  };
+
+  export const select = () => {
     textAreaRef?.select();
-};
-export const setSelectionRange = (start, end, direction) => {
+  };
+
+  export const setSelectionRange = (
+    start: number | null,
+    end: number | null,
+    direction?: 'forward' | 'backward' | 'none'
+  ) => {
     textAreaRef?.setSelectionRange(start, end, direction);
-};
-export const setRangeText = (replacement, start, end, selectionMode) => {
+  };
+
+  export const setRangeText = (
+    replacement: string,
+    start?: number,
+    end?: number,
+    selectionMode?: SelectionMode
+  ) => {
     if (start && end) {
-        textAreaRef?.setRangeText(replacement, start, end, selectionMode);
-    }
-    else {
-        textAreaRef?.setRangeText(replacement);
+      textAreaRef?.setRangeText(replacement, start, end, selectionMode);
+    } else {
+      textAreaRef?.setRangeText(replacement);
     }
-};
+  };
 </script>
 
-<div class={`sterling-text-area ${_class}`} class:disabled>
+<div class={['sterling-text-area', _class]} class:disabled>
   <textarea
     bind:this={textAreaRef}
     bind:value

package/dist/TextArea.svelte.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="svelte" />
-import type { TextAreaResize } from './TextArea.types';
 import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { TextAreaResize } from './TextArea.types';
 type Props = HTMLTextareaAttributes & {
     autoHeight?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
@@ -12,7 +11,7 @@ declare const TextArea: import("svelte").Component<Props, {
     click: () => void;
     focus: (options?: FocusOptions) => void;
     select: () => void;
-    setSelectionRange: (start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => 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>;

package/dist/Tooltip.svelte

@@ -1,58 +1,90 @@
 <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 = () => {
+<script lang="ts">
+  import { onMount, type Snippet } from 'svelte';
+  import Callout from './Callout.svelte';
+  import type { CalloutProps } from './Callout.types';
+
+  type Props = Omit<CalloutProps, 'reference'> & {
+    disabled?: boolean;
+    hoverDelayMilliseconds?: number;
+    tip?: string | Snippet;
+  };
+
+  let {
+    children,
+    class: _class,
+    disabled = false,
+    hoverDelayMilliseconds = 1000,
+    open = $bindable(false),
+    tip,
+    ...rest
+  }: Props = $props();
+
+  let originRef: HTMLDivElement | undefined = $state();
+
+  let reference = $derived(
+    !!children ? (originRef?.previousElementSibling as HTMLElement) : undefined
+  );
+
+  const show = () => {
     if (!disabled) {
-        open = true;
+      open = true;
     }
-};
-const hide = () => (open = false);
-const delayShow = () => {
+  };
+
+  const hide = () => (open = false);
+
+  const delayShow = () => {
     hoverDelayMilliseconds === 0
-        ? show()
-        : setTimeout(() => {
-            show();
+      ? show()
+      : setTimeout(() => {
+          show();
         }, hoverDelayMilliseconds);
-};
-$effect(() => {
+  };
+
+  $effect(() => {
     if (disabled) {
-        hide();
+      hide();
     }
-});
-// ----- Event Listeners ----- //
-let cleanupAutoShowUpdate = () => { };
-const autoShowUpdate = () => {
+  });
+
+  // ----- Event Listeners ----- //
+
+  let cleanupAutoShowUpdate = () => {};
+
+  const autoShowUpdate = () => {
     cleanupAutoShowUpdate();
-    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);
-        };
+      element.addEventListener('mouseenter', delayShow);
+      element.addEventListener('mouseleave', hide);
+      cleanupAutoShowUpdate = () => {
+        element.removeEventListener('mouseenter', delayShow);
+        element.removeEventListener('mouseleave', hide);
+      };
     }
-};
-$effect(() => {
+  };
+
+  $effect(() => {
     reference;
     autoShowUpdate();
-});
-// ----- EventHandlers ----- //
-onMount(() => {
+  });
+
+  // ----- EventHandlers ----- //
+
+  onMount(() => {
     autoShowUpdate();
-});
+  });
 </script>
 
 {@render children?.()}
-<div class="sterling-tooltip-origin" bind:this={originRef}></div>
-<Callout class={_class} {open} {reference} {...rest}>
+<div class={['sterling-tooltip-origin', _class]} bind:this={originRef}></div>
+<Callout class={['sterling-tooltip-callout', _class]} {open} {reference} {...rest}>
   {#if tip}
     {#if typeof tip === 'string'}
       {tip}

package/dist/Tree.svelte

@@ -1,46 +1,74 @@
 <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 = {
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+  import { TREE_CONTEXT_KEY } from './Tree.constants';
+  import type { TreeContext } from './Tree.types';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    expandedValues?: string[];
+    selectedValue?: string;
+    onExpandCollapse?: (expandedValues: string[]) => void;
+    onSelect?: (selectedValue: string | undefined) => void;
+  };
+
+  let {
+    children,
+    class: _class,
+    disabled = false,
+    expandedValues = $bindable([]),
+    onExpandCollapse,
+    onSelect,
+    selectedValue = $bindable(undefined),
+    ...rest
+  }: Props = $props();
+
+  let treeRef: HTMLDivElement;
+
+  let treeContext = {
     get disabled() {
-        return disabled;
+      return disabled;
     },
     get expandedValues() {
-        return expandedValues;
+      return expandedValues;
     },
-    set expandedValues(value) {
-        expandedValues = value;
+    set expandedValues(value: string[]) {
+      expandedValues = value;
     },
     get selectedValue() {
-        return selectedValue;
+      return selectedValue;
     },
-    set selectedValue(value) {
-        selectedValue = value;
+    set selectedValue(value: string | undefined) {
+      selectedValue = value;
     }
-};
-setContext(TREE_CONTEXT_KEY, treeContext);
-$effect(() => {
+  };
+
+  setContext<TreeContext>(TREE_CONTEXT_KEY, treeContext);
+
+  $effect(() => {
     onSelect?.(selectedValue);
-});
-$effect(() => {
+  });
+
+  $effect(() => {
     onExpandCollapse?.(expandedValues);
-});
-export const blur = () => {
+  });
+
+  export const blur = () => {
     treeRef?.blur();
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     treeRef?.focus(options);
-};
+  };
 </script>
 
 <div
   bind:this={treeRef}
   aria-disabled={disabled}
-  class={`sterling-tree ${_class}`}
+  class={['sterling-tree', _class]}
   class:disabled
   class:using-keyboard={$usingKeyboard}
   role="tree"

package/dist/Tree.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean | null;

package/dist/TreeChevron.svelte

@@ -1,25 +1,37 @@
 <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(() => {
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    expanded?: boolean | null | undefined;
+    hasChildren?: boolean | null | undefined;
+  };
+
+  let { class: _class, expanded = false, hasChildren = false, ...rest }: Props = $props();
+
+  let previousExpanded = expanded;
+  let mounted = false;
+
+  onMount(() => {
     setTimeout(() => {
-        mounted = true;
+      mounted = true;
     }, 0);
-});
-let animate = $state(false);
-$effect(() => {
+  });
+
+  let animate = $state(false);
+
+  $effect(() => {
     if (expanded !== previousExpanded && mounted) {
-        animate = true;
+      animate = true;
     }
     previousExpanded = expanded;
-});
+  });
 </script>
 
 <div
-  class={`sterling-tree-chevron ${_class}`}
+  class={['sterling-tree-chevron', _class]}
   class:leaf={!hasChildren}
   class:animate
   class:expanded

package/dist/TreeChevron.svelte.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = HTMLAttributes<HTMLDivElement> & {
     expanded?: boolean | null | undefined;