@geoffcox/sterling-svelte 1.0.12 → 2.0.1

package/dist/Tree.svelte.d.ts

@@ -1,67 +1,15 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        selectedValue?: string | undefined;
-        expandedValues?: string[] | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | 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: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
-        wheel: WheelEvent;
-        expandCollapse: CustomEvent<any>;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            expandedValues: string[];
-            selectedValue: string | undefined;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
+/// <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;
 };
-export type TreeProps = typeof __propDef.props;
-export type TreeEvents = typeof __propDef.events;
-export type TreeSlots = typeof __propDef.slots;
-export default class Tree extends SvelteComponent<TreeProps, TreeEvents, TreeSlots> {
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};
+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,13 +1,5 @@
-/// <reference types="svelte" />
-import type { Readable, Writable } from 'svelte/store';
-/**
- * The context for a Tree and its descendants.
- */
 export type TreeContext = {
-    /** When true, the tree and its descendants are disabled. */
-    disabled: Readable<boolean>;
-    /** The values of items that are expanded. */
-    expandedValues: Writable<string[]>;
-    /** The value of the currently selected item. */
-    selectedValue: Writable<string | undefined>;
+    disabled: boolean | null | undefined;
+    expandedValues: string[];
+    selectedValue: string | undefined;
 };

package/dist/TreeChevron.svelte

@@ -1,66 +1,27 @@
-<script>import { onMount } from 'svelte';
-// ----- Props ----- //
-/** When true, the chevron rotates to indicate children are visible. */
-export let expanded = false;
-/** When true, the chevron is displayed, otherwise a dot is displayed. */
-export let hasChildren = false;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
+<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;
-// ----- Event Handlers ----- //
 onMount(() => {
     setTimeout(() => {
         mounted = true;
     }, 0);
 });
-// ----- Animation ----- //
-let animate = false;
-$: {
+let animate = $state(false);
+$effect(() => {
     if (expanded !== previousExpanded && mounted) {
         animate = true;
     }
     previousExpanded = expanded;
-}
+});
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class={`sterling-tree-chevron ${variant}`}
+  class={`sterling-tree-chevron ${_class}`}
   class:leaf={!hasChildren}
   class:animate
   class:expanded
-  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>

package/dist/TreeChevron.svelte.d.ts

@@ -1,53 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        expanded?: boolean | undefined;
-        hasChildren?: boolean | undefined;
-        variant?: string | 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: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+/// <reference types="svelte" />
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    expanded?: boolean | null | undefined;
+    hasChildren?: boolean | null | undefined;
 };
-export type TreeChevronProps = typeof __propDef.props;
-export type TreeChevronEvents = typeof __propDef.events;
-export type TreeChevronSlots = typeof __propDef.slots;
-export default class TreeChevron extends SvelteComponent<TreeChevronProps, TreeChevronEvents, TreeChevronSlots> {
-}
-export {};
+declare const TreeChevron: import("svelte").Component<Props, {}, "">;
+type TreeChevron = ReturnType<typeof TreeChevron>;
+export default TreeChevron;

package/dist/TreeItem.svelte

@@ -1,53 +1,66 @@
-<script>import { getContext, setContext } from 'svelte';
+<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';
-import TreeItemDisplay from './TreeItemDisplay.svelte';
-import { readable, writable } from 'svelte/store';
-import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
-// ----- Props ----
-/** When true, the item is disabled. */
-export let disabled = false;
-/** The text for the item. Not used when either the item or label slots are filled. */
-export let text = undefined;
-/** The value uniquely identifying this item within the tree. */
-export let value;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- Animation ----- //
-const slidNoOp = (node, params) => {
+let { children, class: _class, disabled = false, icon, label, style, value, ...rest } = $props();
+const slideNoOp = (node, params) => {
     return { delay: 0, duration: 0 };
 };
-$: slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
-// ----- Get Context ----- //
-const { disabled: treeDisabled, expandedValues, selectedValue } = getContext(TREE_CONTEXT_KEY);
-const { depth, disabled: parentDisabled } = getContext(TREE_ITEM_CONTEXT_KEY) || {
-    depth: readable(0),
-    disabled: readable(false)
+let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
+const treeContext = getContext(TREE_CONTEXT_KEY) || {
+    disabled: false,
+    expandedValues: [],
+    selectedValue: null
 };
-// ----- State ----- //
+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;
-$: hasChildren = $$slots.default;
-$: expanded = $expandedValues.includes(value);
-$: selected = $selectedValue === value;
-$: _disabled = disabled || $parentDisabled || $treeDisabled;
-const depthStore = writable($depth);
-const disabledStore = writable(_disabled);
-$: {
-    depthStore.set($depth + 1);
-}
-$: {
-    disabledStore.set(_disabled);
-}
-// ----- Expand/Collapse ----- //
+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 ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
+        index =
+            index ?? treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
         if (index !== -1) {
-            expandedValues.set([
-                ...$expandedValues.slice(0, index),
-                ...$expandedValues.slice(index + 1)
-            ]);
+            treeContext.expandedValues = [
+                ...treeContext.expandedValues.slice(0, index),
+                ...treeContext.expandedValues.slice(index + 1)
+            ];
             return true;
         }
     }
@@ -56,9 +69,10 @@ const collapseItem = (index) => {
 export const collapse = () => collapseItem();
 const expandItem = (index) => {
     if (!_disabled) {
-        index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
+        index =
+            index ?? treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
         if (index === -1) {
-            expandedValues.set([...$expandedValues, value]);
+            treeContext.expandedValues = [...treeContext.expandedValues, value];
             return true;
         }
     }
@@ -66,13 +80,12 @@ const expandItem = (index) => {
 };
 export const expand = () => expandItem();
 export const toggleExpanded = () => {
-    if (!_disabled) {
-        const index = $expandedValues.findIndex((expandedValue) => expandedValue === value);
+    if (!_disabled && children) {
+        const index = treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
         return index !== -1 ? collapseItem(index) : expandItem(index);
     }
     return false;
 };
-// ----- Focus ----- //
 const blurItem = (treeItemElement) => {
     if (!_disabled) {
         const item = treeItemElement?.querySelector('.item');
@@ -84,7 +97,7 @@ export const blur = () => {
 };
 const focusItem = (treeItemElement, options) => {
     if (!_disabled) {
-        const item = treeItemElement?.querySelector('.item');
+        const item = treeItemElement;
         item?.focus(options);
     }
 };
@@ -92,20 +105,18 @@ export const focus = (options) => {
     focusItem(treeItemRef);
     treeItemRef?.focus(options);
 };
-// ----- Click ----- //
 const clickItem = (treeItemElement) => {
     if (!_disabled) {
-        const item = treeItemElement?.querySelector('.item');
+        const item = treeItemElement;
         item?.click();
     }
 };
 export const click = () => {
     clickItem(treeItemRef);
 };
-// ----- Selection ----- //
 const selectItemByValue = (value) => {
     if (!_disabled) {
-        selectedValue.set(value);
+        treeContext.selectedValue = value;
     }
 };
 export const select = () => {
@@ -187,12 +198,14 @@ export const selectNext = () => {
     }
     return false;
 };
-// ----- Event Handlers ----- //
-const onClick = () => {
-    if (!_disabled) {
+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) {
@@ -202,7 +215,7 @@ const onKeydown = (event) => {
                 if (toggleExpanded()) {
                     event.preventDefault();
                     event.stopPropagation();
-                    return false;
+                    return;
                 }
                 break;
             case 'ArrowRight':
@@ -211,18 +224,18 @@ const onKeydown = (event) => {
                 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 (hasChildren) {
+                if (children) {
                     if (expanded) {
                         if (selectNext()) {
                             event.preventDefault();
                             event.stopPropagation();
-                            return false;
+                            return;
                         }
                     }
                     else if (expandItem()) {
                         event.preventDefault();
                         event.stopPropagation();
-                        return false;
+                        return;
                     }
                 }
                 break;
@@ -232,17 +245,17 @@ const onKeydown = (event) => {
                 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 (hasChildren && expanded) {
+                if (expanded && children) {
                     if (collapseItem()) {
                         event.preventDefault();
                         event.stopPropagation();
-                        return false;
+                        return;
                     }
                 }
                 else if (selectParent()) {
                     event.preventDefault();
                     event.stopPropagation();
-                    return false;
+                    return;
                 }
                 break;
             case 'ArrowUp':
@@ -252,7 +265,7 @@ const onKeydown = (event) => {
                 if (selectPrevious()) {
                     event.preventDefault();
                     event.stopPropagation();
-                    return false;
+                    return;
                 }
                 break;
             case 'ArrowDown':
@@ -262,122 +275,55 @@ const onKeydown = (event) => {
                 if (selectNext()) {
                     event.preventDefault();
                     event.stopPropagation();
-                    return false;
+                    return;
                 }
                 break;
         }
     }
+    rest.onkeydown?.(event);
 };
-// ----- Set Context ----- //
-setContext(TREE_ITEM_CONTEXT_KEY, {
-    depth: depthStore,
-    disabled: disabledStore
-});
 </script>
 
-<!--
-@component
-A item in a Tree displaying the item and children.
-  -->
-<!-- svelte-ignore a11y-interactive-supports-focus -->
 <div
+  bind:this={treeItemRef}
   aria-selected={selected ? true : undefined}
   aria-expanded={expanded}
-  bind:this={treeItemRef}
-  class={`sterling-tree-item ${variant}`}
+  class={`sterling-tree-item ${_class}`}
   class:disabled={_disabled}
+  class:expanded
   class:item-disabled={disabled}
-  class:parent-disabled={$parentDisabled}
-  class:tree-disabled={$treeDisabled}
+  class:leaf={!children}
+  class:parent-disabled={treeItemContext.disabled}
+  class:selected
+  class:tree-disabled={treeContext.disabled}
   data-value={value}
   role="treeitem"
-  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}
+  tabindex={selected ? 0 : -1}
+  {...rest}
+  onclick={onClick}
+  onkeydown={onKeydown}
+  style={`--sterling-tree-item-depth: ${treeItemContext.depth}; ${style}`}
 >
-  <div
-    aria-selected={selected ? true : undefined}
-    class="item"
-    class:selected
-    role="treeitem"
-    tabindex={selected ? 0 : -1}
-    on:click={onClick}
-    on:keydown={onKeydown}
-  >
-    <slot
-      name="item"
-      {depth}
-      disabled={_disabled}
-      {expanded}
-      {hasChildren}
-      {selected}
+  <!-- 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}
-      {variant}
-    >
-      <TreeItemDisplay
-        depth={$depth}
-        disabled={_disabled && !$treeDisabled}
-        {expanded}
-        {hasChildren}
-        {selected}
-        {value}
-        {variant}
-      >
-        <svelte:fragment
-          let:depth
-          let:disabled
-          let:expanded
-          let:hasChildren
-          let:selected
-          let:value
-          let:variant
-        >
-          <slot
-            name="label"
-            {depth}
-            {disabled}
-            {expanded}
-            {hasChildren}
-            {selected}
-            {value}
-            {variant}>{text || value}</slot
-          >
-        </svelte:fragment>
-      </TreeItemDisplay>
-    </slot>
+    {/if}
   </div>
-  {#if expanded && hasChildren}
+  {#if expanded && children}
     <div class="children" transition:slideMotion|global={{ duration: 200 }} role="group">
-      <slot depth={$depth} disabled={_disabled} {selected} {value} {variant} />
+      {@render children?.()}
     </div>
   {/if}
 </div>