@geoffcox/sterling-svelte 2.0.1 → 2.0.3

package/dist/TreeItem.svelte

@@ -1,294 +1,361 @@
 <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';
-let { children, class: _class, disabled = false, icon, label, style, value, ...rest } = $props();
-const slideNoOp = (node, params) => {
+<script lang="ts">
+  import { getContext, setContext, type Snippet } from 'svelte';
+  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import type { SlideParams, TransitionConfig } from 'svelte/transition';
+  import { slide } from 'svelte/transition';
+  import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+  import { TREE_CONTEXT_KEY } from './Tree.constants';
+  import type { TreeContext } from './Tree.types';
+  import TreeChevron from './TreeChevron.svelte';
+  import { TREE_ITEM_CONTEXT_KEY } from './TreeItem.constants';
+  import type { TreeItemContext } from './TreeItem.types';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null | undefined;
+    icon?: Snippet;
+    label?: string | Snippet;
+    value: string;
+  };
+
+  let {
+    children,
+    class: _class,
+    disabled = false,
+    icon,
+    label,
+    style,
+    value,
+    ...rest
+  }: Props = $props();
+
+  const slideNoOp = (node: Element, params?: SlideParams): TransitionConfig => {
     return { delay: 0, duration: 0 };
-};
-let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
-const treeContext = getContext(TREE_CONTEXT_KEY) || {
+  };
+
+  let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
+
+  const treeContext = getContext<TreeContext>(TREE_CONTEXT_KEY) || {
     disabled: false,
     expandedValues: [],
     selectedValue: null
-};
-const treeItemContext = getContext(TREE_ITEM_CONTEXT_KEY) || {
+  };
+
+  const treeItemContext = getContext<TreeItemContext>(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 _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;
+      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(() => {
+  });
+
+  // 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;
+      selected = true;
+    } else if (treeContext.selectedValue !== value && selected) {
+      selected = false;
     }
-});
-let treeItemRef;
-let itemRef;
-let treeItemChildContext = {
+  });
+
+  let treeItemRef: HTMLDivElement;
+  let itemRef: HTMLDivElement;
+
+  let treeItemChildContext: TreeItemContext = {
     get disabled() {
-        return _disabled;
+      return _disabled;
     },
     get depth() {
-        return treeItemContext.depth ? treeItemContext.depth + 1 : 1;
+      return treeItemContext.depth ? treeItemContext.depth + 1 : 1;
     }
-};
-setContext(TREE_ITEM_CONTEXT_KEY, treeItemChildContext);
-const collapseItem = (index) => {
+  };
+
+  setContext<TreeItemContext>(TREE_ITEM_CONTEXT_KEY, treeItemChildContext);
+
+  const collapseItem = (index?: number) => {
     if (!_disabled) {
-        index =
-            index ?? treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
-        if (index !== -1) {
-            treeContext.expandedValues = [
-                ...treeContext.expandedValues.slice(0, index),
-                ...treeContext.expandedValues.slice(index + 1)
-            ];
-            return true;
-        }
+      index =
+        index ?? treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
+      if (index !== -1) {
+        treeContext.expandedValues = [
+          ...treeContext.expandedValues.slice(0, index),
+          ...treeContext.expandedValues.slice(index + 1)
+        ];
+        return true;
+      }
     }
+
     return false;
-};
-export const collapse = () => collapseItem();
-const expandItem = (index) => {
+  };
+
+  export const collapse = () => collapseItem();
+
+  const expandItem = (index?: number) => {
     if (!_disabled) {
-        index =
-            index ?? treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
-        if (index === -1) {
-            treeContext.expandedValues = [...treeContext.expandedValues, value];
-            return true;
-        }
+      index =
+        index ?? treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
+      if (index === -1) {
+        treeContext.expandedValues = [...treeContext.expandedValues, value];
+        return true;
+      }
     }
+
     return false;
-};
-export const expand = () => expandItem();
-export const toggleExpanded = () => {
+  };
+
+  export const expand = () => expandItem();
+
+  export const toggleExpanded = () => {
     if (!_disabled && children) {
-        const index = treeContext.expandedValues.findIndex((expandedValue) => expandedValue === value);
-        return index !== -1 ? collapseItem(index) : expandItem(index);
+      const index = treeContext.expandedValues.findIndex(
+        (expandedValue) => expandedValue === value
+      );
+      return index !== -1 ? collapseItem(index) : expandItem(index);
     }
+
     return false;
-};
-const blurItem = (treeItemElement) => {
+  };
+
+  const blurItem = (treeItemElement: Element) => {
     if (!_disabled) {
-        const item = treeItemElement?.querySelector('.item');
-        item?.blur();
+      const item = treeItemElement?.querySelector<HTMLElement>('.item');
+      item?.blur();
     }
-};
-export const blur = () => {
+  };
+
+  export const blur = () => {
     blurItem(treeItemRef);
-};
-const focusItem = (treeItemElement, options) => {
+  };
+
+  const focusItem = (treeItemElement: Element, options?: FocusOptions) => {
     if (!_disabled) {
-        const item = treeItemElement;
-        item?.focus(options);
+      const item = treeItemElement as HTMLElement;
+      item?.focus(options);
     }
-};
-export const focus = (options) => {
+  };
+
+  export const focus = (options?: FocusOptions) => {
     focusItem(treeItemRef);
     treeItemRef?.focus(options);
-};
-const clickItem = (treeItemElement) => {
+  };
+
+  const clickItem = (treeItemElement: Element) => {
     if (!_disabled) {
-        const item = treeItemElement;
-        item?.click();
+      const item = treeItemElement as HTMLElement;
+      item?.click();
     }
-};
-export const click = () => {
+  };
+
+  export const click = () => {
     clickItem(treeItemRef);
-};
-const selectItemByValue = (value) => {
+  };
+
+  const selectItemByValue = (value: string) => {
     if (!_disabled) {
-        treeContext.selectedValue = value;
+      treeContext.selectedValue = value;
     }
-};
-export const select = () => {
+  };
+
+  export const select = () => {
     if (!_disabled) {
-        selectItemByValue(value);
+      selectItemByValue(value);
     }
-};
-export const selectParent = () => {
+  };
+
+  export const selectParent = () => {
     if (!_disabled) {
-        let candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
-        let candidateValue = candidate?.getAttribute('data-value');
-        if (candidateValue && candidate) {
-            selectItemByValue(candidateValue);
-            focusItem(candidate);
-            return true;
-        }
+      let candidate = treeItemRef.parentElement?.closest<Element>('[role="treeitem"][data-value]');
+      let candidateValue = candidate?.getAttribute('data-value');
+
+      if (candidateValue && candidate) {
+        selectItemByValue(candidateValue);
+        focusItem(candidate);
+        return true;
+      }
     }
+
     return false;
-};
-export const selectPrevious = () => {
+  };
+
+  export const selectPrevious = () => {
     if (!_disabled) {
-        let candidate = undefined;
-        let candidateValue = undefined;
-        const previousSibling = treeItemRef?.previousElementSibling;
-        if (previousSibling) {
-            // look for the last (recursive) decendant of ths previous sibling
-            const decendants = previousSibling.querySelectorAll('[role="treeitem"][data-value]');
-            if (decendants) {
-                candidate = decendants[decendants.length - 1];
-                candidateValue = candidate?.getAttribute('data-value');
-            }
-            // look for the previous sibling
-            if (!candidateValue) {
-                candidate = previousSibling;
-                candidateValue = candidate?.getAttribute('data-value');
-            }
+      let candidate: Element | undefined | null = undefined;
+      let candidateValue: string | null | undefined = undefined;
+
+      const previousSibling = treeItemRef?.previousElementSibling;
+      if (previousSibling) {
+        // look for the last (recursive) decendant of ths previous sibling
+        const decendants = previousSibling.querySelectorAll('[role="treeitem"][data-value]');
+        if (decendants) {
+          candidate = decendants[decendants.length - 1];
+          candidateValue = candidate?.getAttribute('data-value');
         }
-        // look for the parent
+
+        // look for the previous sibling
         if (!candidateValue) {
-            candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
-            candidateValue = candidate?.getAttribute('data-value');
-        }
-        if (candidateValue && candidate) {
-            selectItemByValue(candidateValue);
-            focusItem(candidate);
-            return true;
+          candidate = previousSibling;
+          candidateValue = candidate?.getAttribute('data-value');
         }
+      }
+      // look for the parent
+      if (!candidateValue) {
+        candidate = treeItemRef.parentElement?.closest<Element>('[role="treeitem"][data-value]');
+        candidateValue = candidate?.getAttribute('data-value');
+      }
+
+      if (candidateValue && candidate) {
+        selectItemByValue(candidateValue);
+        focusItem(candidate);
+        return true;
+      }
     }
+
     return false;
-};
-export const selectNext = () => {
+  };
+
+  export const selectNext = () => {
     if (!_disabled) {
-        let candidateValue = undefined;
-        // look for decendants
-        let candidate = treeItemRef.querySelector('[role="treeitem"][data-value]');
-        candidateValue = candidate?.getAttribute('data-value');
-        // look for next sibling
-        if (!candidateValue) {
-            candidate = treeItemRef.nextElementSibling;
-            while (candidate && candidate.getAttribute('data-value') === null) {
-                candidate = candidate.nextElementSibling;
-            }
-            candidateValue = candidate?.getAttribute('data-value');
-        }
-        // look for next sibling of ancestor
-        if (!candidateValue) {
-            let ancestor = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
-            while (ancestor && !candidateValue) {
-                candidate = ancestor?.nextElementSibling;
-                candidateValue = candidate?.getAttribute('data-value');
-                ancestor = ancestor.parentElement?.closest('[role="treeitem"][data-value]');
-            }
+      let candidateValue: string | null | undefined = undefined;
+
+      // look for decendants
+      let candidate = treeItemRef.querySelector('[role="treeitem"][data-value]');
+      candidateValue = candidate?.getAttribute('data-value');
+
+      // look for next sibling
+      if (!candidateValue) {
+        candidate = treeItemRef.nextElementSibling;
+        while (candidate && candidate.getAttribute('data-value') === null) {
+          candidate = candidate.nextElementSibling;
         }
-        if (candidateValue && candidate) {
-            selectItemByValue(candidateValue);
-            focusItem(candidate);
-            return true;
+        candidateValue = candidate?.getAttribute('data-value');
+      }
+
+      // look for next sibling of ancestor
+      if (!candidateValue) {
+        let ancestor: Element | null | undefined = treeItemRef.parentElement?.closest<Element>(
+          '[role="treeitem"][data-value]'
+        );
+        while (ancestor && !candidateValue) {
+          candidate = ancestor?.nextElementSibling;
+          candidateValue = candidate?.getAttribute('data-value');
+          ancestor = ancestor.parentElement?.closest<Element>('[role="treeitem"][data-value]');
         }
+      }
+
+      if (candidateValue && candidate) {
+        selectItemByValue(candidateValue);
+        focusItem(candidate);
+        return true;
+      }
     }
+
     return false;
-};
-const onClick = (event) => {
-    const eventTarget = event.target;
+  };
+
+  const onClick: MouseEventHandler<HTMLDivElement> = (event) => {
+    const eventTarget = event.target as Node;
     if (!_disabled && itemRef.contains(eventTarget)) {
-        toggleExpanded();
-        select();
-        return;
+      toggleExpanded();
+      select();
+      return;
     }
+
     rest.onclick?.(event);
-};
-const onKeydown = (event) => {
+  };
+
+  const onKeydown: KeyboardEventHandler<HTMLDivElement> = (event) => {
     if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-                if (toggleExpanded()) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                }
-                break;
-            case 'ArrowRight':
-                /*
-                When focus is on a closed item, opens the item; focus does not move.
-                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 (children) {
-                    if (expanded) {
-                        if (selectNext()) {
-                            event.preventDefault();
-                            event.stopPropagation();
-                            return;
-                        }
-                    }
-                    else if (expandItem()) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        return;
-                    }
-                }
-                break;
-            case 'ArrowLeft':
-                /*
-                When focus is on an open item, closes the item.
-                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 (expanded && children) {
-                    if (collapseItem()) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        return;
-                    }
-                }
-                else if (selectParent()) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                }
-                break;
-            case 'ArrowUp':
-                /*
-                Moves focus to the previous item that is focusable without opening or closing a item.
-                */
-                if (selectPrevious()) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                }
-                break;
-            case 'ArrowDown':
-                /*
-                Moves focus to the next item that is focusable without opening or closing a item.
-                */
-                if (selectNext()) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    return;
-                }
-                break;
-        }
+      switch (event.key) {
+        case 'Enter':
+        case ' ':
+          if (toggleExpanded()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+          break;
+        case 'ArrowRight':
+          /*
+          When focus is on a closed item, opens the item; focus does not move.
+          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 (children) {
+            if (expanded) {
+              if (selectNext()) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+              }
+            } else if (expandItem()) {
+              event.preventDefault();
+              event.stopPropagation();
+              return;
+            }
+          }
+          break;
+        case 'ArrowLeft':
+          /*
+          When focus is on an open item, closes the item.
+          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 (expanded && children) {
+            if (collapseItem()) {
+              event.preventDefault();
+              event.stopPropagation();
+              return;
+            }
+          } else if (selectParent()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+          break;
+        case 'ArrowUp':
+          /*
+          Moves focus to the previous item that is focusable without opening or closing a item.
+          */
+          if (selectPrevious()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+          break;
+        case 'ArrowDown':
+          /*
+          Moves focus to the next item that is focusable without opening or closing a item.
+          */
+          if (selectNext()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+          break;
+      }
     }
+
     rest.onkeydown?.(event);
-};
+  };
 </script>
 
 <div
   bind:this={treeItemRef}
   aria-selected={selected ? true : undefined}
   aria-expanded={expanded}
-  class={`sterling-tree-item ${_class}`}
+  class={['sterling-tree-item', _class]}
   class:disabled={_disabled}
   class:expanded
   class:item-disabled={disabled}

package/dist/TreeItem.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
 import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 type Props = HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean | null | undefined;
     icon?: Snippet;

package/dist/actions/extraClass.d.ts

@@ -1,6 +1,7 @@
 type Params = {
     extraClass: string | null | undefined;
 };
+/** @deprecated Use clsx class merging through class={['name1', 'name2']} */
 export declare const extraClass: (node: HTMLElement, params?: Params) => {
     update(params: Params): void;
     destroy(): void;

package/dist/actions/extraClass.js

@@ -1,3 +1,4 @@
+/** @deprecated Use clsx class merging through class={['name1', 'name2']} */
 export const extraClass = (node, params) => {
     let _class = params?.extraClass;
     !!_class && node.classList.add(_class);

package/dist/idGenerator.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Use $props.id() instead */
 export declare const idGenerator: {
     next: () => number;
     nextId: (prefix?: string) => string;

package/dist/idGenerator.js

@@ -2,6 +2,7 @@ let id = 0;
 const next = () => {
     return ++id;
 };
+/** @deprecated Use $props.id() instead */
 export const idGenerator = {
     next,
     nextId: (prefix) => {

package/dist/index.d.ts

@@ -33,8 +33,8 @@ import Callout from './Callout.svelte';
 import Checkbox from './Checkbox.svelte';
 import Dialog from './Dialog.svelte';
 import Dropdown from './Dropdown.svelte';
-import Label from './Label.svelte';
 import Input from './Input.svelte';
+import Label from './Label.svelte';
 import Link from './Link.svelte';
 import List from './List.svelte';
 import ListItem from './ListItem.svelte';
@@ -43,6 +43,7 @@ import MenuBar from './MenuBar.svelte';
 import MenuButton from './MenuButton.svelte';
 import MenuItem from './MenuItem.svelte';
 import MenuSeparator from './MenuSeparator.svelte';
+import Pagination from './Pagination.svelte';
 import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
@@ -56,4 +57,4 @@ import Tooltip from './Tooltip.svelte';
 import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
-export { Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };
+export { Button, Callout, Checkbox, Dialog, Dropdown, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Pagination, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem };