@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/TabList.svelte.d.ts

@@ -1,70 +1,18 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        selectedValue?: string | undefined;
-        vertical?: boolean | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        selectFirstTab?: (() => boolean) | undefined;
-        selectPreviousTab?: (() => boolean) | undefined;
-        selectNextTab?: (() => boolean) | undefined;
-        selectLastTab?: (() => boolean) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        scroll: Event;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            selectedValue: string | undefined;
-            variant: string;
-            vertical: boolean;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+/// <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;
 };
-export type TabListProps = typeof __propDef.props;
-export type TabListEvents = typeof __propDef.events;
-export type TabListSlots = typeof __propDef.slots;
-export default class TabList extends SvelteComponent<TabListProps, TabListEvents, TabListSlots> {
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get selectFirstTab(): () => boolean;
-    get selectPreviousTab(): () => boolean;
-    get selectNextTab(): () => boolean;
-    get selectLastTab(): () => boolean;
-}
-export {};
+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,13 +1,5 @@
-/// <reference types="svelte" />
-import type { Readable, Writable } from 'svelte/store';
-/**
- * The context for a TabList and its tabs.
- */
 export type TabListContext = {
-    /** When true, the tablist and its tabs are disabled. */
-    disabled: Readable<boolean>;
-    /** The value of the currently selected tab. */
-    selectedValue: Writable<string | undefined>;
-    /** When true, the tabs are displayed vertically. */
-    vertical: Readable<boolean>;
+    disabled?: boolean | null | undefined;
+    selectedValue?: string | undefined;
+    vertical?: boolean | null | undefined;
 };

package/dist/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/dist/TextArea.svelte.d.ts

@@ -1,69 +1,19 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        value?: string | undefined;
-        autoHeight?: boolean | undefined;
-        resize?: "none" | "vertical" | "horizontal" | "both" | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-        select?: (() => void) | undefined;
-        setSelectionRange?: ((start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void) | undefined;
-        setRangeText?: ((replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void) | undefined;
-    };
-    events: {
-        beforeinput: InputEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        change: Event;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        paste: ClipboardEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        input: Event;
-        invalid: Event;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        select: Event;
-        submit: SubmitEvent;
-        reset: Event;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+/// <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;
 };
-export type TextAreaProps = typeof __propDef.props;
-export type TextAreaEvents = typeof __propDef.events;
-export type TextAreaSlots = typeof __propDef.slots;
-export default class TextArea extends SvelteComponent<TextAreaProps, TextAreaEvents, TextAreaSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-    get select(): () => void;
-    get setSelectionRange(): (start: number | null, end: number | null, direction?: "forward" | "backward" | "none" | undefined) => void;
-    get setRangeText(): (replacement: string, start?: number | undefined, end?: number | undefined, selectionMode?: SelectionMode | undefined) => void;
-}
-export {};
+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/Tooltip.svelte

@@ -1,22 +1,11 @@
-<script>import { onMount } from 'svelte';
+<svelte:options runes={true} />
+
+<script lang="ts">import { onMount } from 'svelte';
 import Callout from './Callout.svelte';
-// ----- Props ----- //
-// Forwarded to Callout
-export let conditionalRender = true;
-export let crossAxisOffset = 0;
-export let mainAxisOffset = 0;
-export let open = false;
-export let placement = 'top-start';
-export let portalHost = undefined;
-export let variant = '';
-/** When true, the tooltip is disabled and will not be shown. */
-export let disabled = false;
-/** The duration of mouse hover before showing the tooltip. */
-export let hoverDelayMilliseconds = 1000;
-// ----- State ----- //
-let originRef;
-$: reference = $$slots.default ? originRef?.previousElementSibling : undefined;
-// ----- Show/Hide ----- //
+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;
@@ -30,11 +19,11 @@ const delayShow = () => {
             show();
         }, hoverDelayMilliseconds);
 };
-$: {
+$effect(() => {
     if (disabled) {
         hide();
     }
-}
+});
 // ----- Event Listeners ----- //
 let cleanupAutoShowUpdate = () => { };
 const autoShowUpdate = () => {
@@ -51,56 +40,24 @@ const autoShowUpdate = () => {
         };
     }
 };
-$: reference, autoShowUpdate();
+$effect(() => {
+    reference;
+    autoShowUpdate();
+});
 // ----- EventHandlers ----- //
 onMount(() => {
     autoShowUpdate();
 });
 </script>
 
-<slot {disabled} {hoverDelayMilliseconds} {open} {variant} />
-<div class="sterling-tooltip-origin" bind:this={originRef} />
-<Callout
-  {conditionalRender}
-  {crossAxisOffset}
-  {mainAxisOffset}
-  {open}
-  {placement}
-  {portalHost}
-  {reference}
-  {variant}
-  on:blur
-  on:click
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:wheel
-  {...$$restProps}
->
-  <slot name="tip" {placement} {variant} />
+{@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,70 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        conditionalRender?: boolean | undefined;
-        crossAxisOffset?: number | undefined;
-        mainAxisOffset?: number | undefined;
-        open?: boolean | undefined;
-        placement?: string | undefined;
-        portalHost?: HTMLElement | undefined;
-        variant?: string | undefined;
-        disabled?: boolean | undefined;
-        hoverDelayMilliseconds?: number | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        pointercancel: CustomEvent<any>;
-        pointerdown: CustomEvent<any>;
-        pointerenter: CustomEvent<any>;
-        pointerleave: CustomEvent<any>;
-        pointermove: CustomEvent<any>;
-        pointerover: CustomEvent<any>;
-        pointerout: CustomEvent<any>;
-        pointerup: CustomEvent<any>;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            hoverDelayMilliseconds: number;
-            open: boolean;
-            variant: string;
-        };
-        tip: {
-            placement: string;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+import { type Snippet } from 'svelte';
+import type { CalloutProps } from './Callout.types';
+type Props = Omit<CalloutProps, 'reference'> & {
+    disabled?: boolean;
+    hoverDelayMilliseconds?: number;
+    tip?: string | Snippet;
 };
-export type TooltipProps = typeof __propDef.props;
-export type TooltipEvents = typeof __propDef.events;
-export type TooltipSlots = typeof __propDef.slots;
-export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
-}
-export {};
+declare const Tooltip: import("svelte").Component<Props, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/Tree.svelte

@@ -1,104 +1,53 @@
-<script>import { createEventDispatcher, setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import { TREE_CONTEXT_KEY } from './Tree.constants';
+<svelte:options runes={true} />
+
+<script lang="ts">import { setContext } from 'svelte';
 import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-/** When true, the tree and its descendants are disabled. */
-export let disabled = false;
-/** The value of the currently selected item. */
-export let selectedValue = undefined;
-/** The values of items that are expanded. */
-export let expandedValues = [];
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+import { TREE_CONTEXT_KEY } from './Tree.constants';
+let { children, class: _class, disabled = false, expandedValues = $bindable([]), onExpandCollapse, onSelect, selectedValue = $bindable(undefined), ...rest } = $props();
 let treeRef;
-const disabledStore = writable(disabled);
-const expandedValuesStore = writable(expandedValues);
-const selectedValueStore = writable(selectedValue);
-// ----- Methods ----- //
+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);
 };
-// ----- Events ----- //
-const dispatch = createEventDispatcher();
-const raiseExpandCollapse = (expandedValues) => {
-    dispatch('expandCollapse', { expandedValues });
-};
-const raiseSelect = (selectedValue) => {
-    dispatch('select', { selectedValue });
-};
-// ----- Reactions ----- //
-$: {
-    selectedValueStore.set(selectedValue);
-}
-$: {
-    selectedValue = $selectedValueStore;
-    raiseSelect($selectedValueStore);
-}
-$: {
-    expandedValuesStore.set(expandedValues);
-}
-$: {
-    expandedValues = $expandedValuesStore;
-    raiseExpandCollapse($expandedValuesStore);
-}
-$: {
-    disabledStore.set(disabled);
-}
-// ----- Set Context ----- //
-setContext(TREE_CONTEXT_KEY, {
-    disabled: disabledStore,
-    expandedValues: expandedValuesStore,
-    selectedValue: selectedValueStore
-});
 </script>
 
 <div
   bind:this={treeRef}
   aria-disabled={disabled}
-  class={`sterling-tree ${variant}`}
+  class={`sterling-tree ${_class}`}
   class:disabled
   class:using-keyboard={$usingKeyboard}
   role="tree"
   tabindex="0"
-  on:blur
-  on:click
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:wheel|passive
-  {...$$restProps}
+  {...rest}
 >
   <div class="container">
-    <slot {disabled} {expandedValues} {selectedValue} {variant} />
+    {@render children?.()}
   </div>
 </div>