@geoffcox/sterling-svelte 0.0.30 → 1.0.0

package/TreeItem.svelte

@@ -1,258 +1,294 @@
-<script>import { getContext, setContext } from "svelte";
-import { slide } from "svelte/transition";
-import { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from "./Tree.constants";
-import TreeItemDisplay from "./TreeItemDisplay.svelte";
-import { readable, writable } from "svelte/store";
-import { prefersReducedMotion } from "./stores/prefersReducedMotion";
+<script>import { getContext, setContext } from 'svelte';
+import { slide } from 'svelte/transition';
+import { TREE_CONTEXT_KEY } from './Tree.constants';
+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;
-export let text = void 0;
+/** 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) => {
-  return { delay: 0, duration: 0 };
+    return { delay: 0, duration: 0 };
 };
-$:
-  slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
-const {
-  colorful,
-  disabled: treeDisabled,
-  expandedValues,
-  selectedValue
-} = getContext(TREE_CONTEXT_KEY);
-const { depth = 0 } = getContext(TREE_ITEM_CONTEXT_KEY) || {
-  colorful: readable(false),
-  disabled: readable(false),
-  expandedValues: readable([]),
-  selectedValue: readable(void 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)
 };
+// ----- State ----- //
 let treeItemRef;
-$:
-  hasChildren = $$slots.default;
-$:
-  expanded = $expandedValues.includes(value);
-$:
-  selected = $selectedValue === value;
-$:
-  _disabled = disabled || $treeDisabled;
-const disabledStore = writable(disabled);
+$: hasChildren = $$slots.default;
+$: expanded = $expandedValues.includes(value);
+$: selected = $selectedValue === value;
+$: _disabled = disabled || $parentDisabled || $treeDisabled;
+const depthStore = writable($depth);
+const disabledStore = writable(_disabled);
 $: {
-  disabledStore.set(disabled);
+    depthStore.set($depth + 1);
 }
+$: {
+    disabledStore.set(_disabled);
+}
+// ----- Expand/Collapse ----- //
 const collapseItem = (index) => {
-  if (!_disabled) {
-    index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
-    if (index !== -1) {
-      expandedValues.set([
-        ...$expandedValues.slice(0, index),
-        ...$expandedValues.slice(index + 1)
-      ]);
-      return true;
+    if (!_disabled) {
+        index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
+        if (index !== -1) {
+            expandedValues.set([
+                ...$expandedValues.slice(0, index),
+                ...$expandedValues.slice(index + 1)
+            ]);
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 };
 export const collapse = () => collapseItem();
 const expandItem = (index) => {
-  if (!_disabled) {
-    index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
-    if (index === -1) {
-      expandedValues.set([...$expandedValues, value]);
-      return true;
+    if (!_disabled) {
+        index = index ?? $expandedValues.findIndex((expandedValue) => expandedValue === value);
+        if (index === -1) {
+            expandedValues.set([...$expandedValues, value]);
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 };
 export const expand = () => expandItem();
 export const toggleExpanded = () => {
-  if (!_disabled) {
-    const index = $expandedValues.findIndex((expandedValue) => expandedValue === value);
-    return index !== -1 ? collapseItem(index) : expandItem(index);
-  }
-  return false;
+    if (!_disabled) {
+        const index = $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");
-    item?.blur();
-  }
+    if (!_disabled) {
+        const item = treeItemElement?.querySelector('.item');
+        item?.blur();
+    }
 };
 export const blur = () => {
-  blurItem(treeItemRef);
+    blurItem(treeItemRef);
 };
 const focusItem = (treeItemElement, options) => {
-  if (!_disabled) {
-    const item = treeItemElement?.querySelector(".item");
-    item?.focus(options);
-  }
+    if (!_disabled) {
+        const item = treeItemElement?.querySelector('.item');
+        item?.focus(options);
+    }
 };
 export const focus = (options) => {
-  focusItem(treeItemRef);
-  treeItemRef?.focus(options);
+    focusItem(treeItemRef);
+    treeItemRef?.focus(options);
 };
+// ----- Click ----- //
 const clickItem = (treeItemElement) => {
-  if (!_disabled) {
-    const item = treeItemElement?.querySelector(".item");
-    item?.click();
-  }
+    if (!_disabled) {
+        const item = treeItemElement?.querySelector('.item');
+        item?.click();
+    }
 };
 export const click = () => {
-  clickItem(treeItemRef);
+    clickItem(treeItemRef);
 };
-const selectItemByValue = (value2) => {
-  if (!_disabled) {
-    selectedValue.set(value2);
-  }
+// ----- Selection ----- //
+const selectItemByValue = (value) => {
+    if (!_disabled) {
+        selectedValue.set(value);
+    }
 };
 export const select = () => {
-  if (!_disabled) {
-    selectItemByValue(value);
-  }
+    if (!_disabled) {
+        selectItemByValue(value);
+    }
 };
 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;
+    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;
+        }
     }
-  }
-  return false;
+    return false;
 };
 export const selectPrevious = () => {
-  if (!_disabled) {
-    let candidate = void 0;
-    let candidateValue = void 0;
-    const previousSibling = treeItemRef?.previousElementSibling;
-    if (previousSibling) {
-      const decendants = previousSibling.querySelectorAll('[role="treeitem"][data-value]');
-      if (decendants) {
-        candidate = decendants[decendants.length - 1];
-        candidateValue = candidate?.getAttribute("data-value");
-      }
-      if (!candidateValue) {
-        candidate = previousSibling;
-        candidateValue = candidate?.getAttribute("data-value");
-      }
-    }
-    if (!candidateValue) {
-      candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
-      candidateValue = candidate?.getAttribute("data-value");
-    }
-    if (candidateValue && candidate) {
-      selectItemByValue(candidateValue);
-      focusItem(candidate);
-      return true;
+    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');
+            }
+        }
+        // look for the parent
+        if (!candidateValue) {
+            candidate = treeItemRef.parentElement?.closest('[role="treeitem"][data-value]');
+            candidateValue = candidate?.getAttribute('data-value');
+        }
+        if (candidateValue && candidate) {
+            selectItemByValue(candidateValue);
+            focusItem(candidate);
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 };
 export const selectNext = () => {
-  if (!_disabled) {
-    let candidateValue = void 0;
-    let candidate = treeItemRef.querySelector('[role="treeitem"][data-value]');
-    candidateValue = candidate?.getAttribute("data-value");
-    if (!candidateValue) {
-      candidate = treeItemRef.nextElementSibling;
-      while (candidate && candidate.getAttribute("data-value") === null) {
-        candidate = candidate.nextElementSibling;
-      }
-      candidateValue = candidate?.getAttribute("data-value");
-    }
-    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]');
-      }
-    }
-    if (candidateValue && candidate) {
-      selectItemByValue(candidateValue);
-      focusItem(candidate);
-      return true;
+    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]');
+            }
+        }
+        if (candidateValue && candidate) {
+            selectItemByValue(candidateValue);
+            focusItem(candidate);
+            return true;
+        }
     }
-  }
-  return false;
+    return false;
 };
+// ----- Event Handlers ----- //
 const onClick = () => {
-  if (!_disabled) {
-    toggleExpanded();
-    select();
-  }
+    if (!_disabled) {
+        toggleExpanded();
+        select();
+    }
 };
 const onKeydown = (event) => {
-  if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
-    switch (event.key) {
-      case "Enter":
-      case " ":
-        if (toggleExpanded()) {
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        break;
-      case "ArrowRight":
-        if (hasChildren) {
-          if (expanded) {
-            if (selectNext()) {
-              event.preventDefault();
-              event.stopPropagation();
-              return false;
-            }
-          } else if (expandItem()) {
-            event.preventDefault();
-            event.stopPropagation();
-            return false;
-          }
+    if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+                if (toggleExpanded()) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return false;
+                }
+                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 (hasChildren) {
+                    if (expanded) {
+                        if (selectNext()) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            return false;
+                        }
+                    }
+                    else if (expandItem()) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        return false;
+                    }
+                }
+                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 (hasChildren && expanded) {
+                    if (collapseItem()) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        return false;
+                    }
+                }
+                else if (selectParent()) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    return false;
+                }
+                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 false;
+                }
+                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 false;
+                }
+                break;
         }
-        break;
-      case "ArrowLeft":
-        if (hasChildren && expanded) {
-          if (collapseItem()) {
-            event.preventDefault();
-            event.stopPropagation();
-            return false;
-          }
-        } else if (selectParent()) {
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        break;
-      case "ArrowUp":
-        if (selectPrevious()) {
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        break;
-      case "ArrowDown":
-        if (selectNext()) {
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        }
-        break;
     }
-  }
 };
-setContext(TREE_ITEM_CONTEXT_KEY, { depth: depth + 1, disabled: disabledStore });
+// ----- 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
   aria-selected={selected ? true : undefined}
   aria-expanded={expanded}
   bind:this={treeItemRef}
-  class="sterling-tree-item"
-  class:colorful={$colorful}
+  class={`sterling-tree-item ${variant}`}
   class:disabled={_disabled}
+  class:item-disabled={disabled}
+  class:parent-disabled={$parentDisabled}
+  class:tree-disabled={$treeDisabled}
   data-value={value}
   role="treeitem"
   on:blur
@@ -288,42 +324,52 @@ A item in a Tree displaying the item and children.
   on:wheel|passive
   {...$$restProps}
 >
-  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <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} {value}>
+    <slot
+      name="item"
+      {depth}
+      disabled={_disabled}
+      {expanded}
+      {hasChildren}
+      {selected}
+      {value}
+      {variant}
+    >
       <TreeItemDisplay
-        colorful={$colorful}
-        {depth}
-        disabled={_disabled}
+        depth={$depth}
+        disabled={_disabled && !$treeDisabled}
         {expanded}
         {hasChildren}
         {selected}
         {value}
+        {variant}
       >
         <svelte:fragment
-          let:colorful
           let:depth
           let:disabled
           let:expanded
           let:hasChildren
           let:selected
           let:value
+          let:variant
         >
           <slot
             name="label"
-            {colorful}
             {depth}
             {disabled}
             {expanded}
             {hasChildren}
             {selected}
-            {value}>{text || value}</slot
+            {value}
+            {variant}>{text || value}</slot
           >
         </svelte:fragment>
       </TreeItemDisplay>
@@ -331,13 +377,7 @@ A item in a Tree displaying the item and children.
   </div>
   {#if expanded && hasChildren}
     <div class="children" transition:slideMotion|global={{ duration: 200 }} role="group">
-      <slot {depth} {selected} {value} />
+      <slot depth={$depth} disabled={_disabled} {selected} {value} {variant} />
     </div>
   {/if}
 </div>
-
-<style>
-  .item {
-    outline: none;
-  }
-</style>

package/TreeItem.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         text?: string | undefined;
         value: string;
+        variant?: string | undefined;
         collapse?: (() => boolean) | undefined;
         expand?: (() => boolean) | undefined;
         toggleExpanded?: (() => boolean) | undefined;
@@ -53,26 +54,29 @@ declare const __propDef: {
     };
     slots: {
         item: {
-            depth: number;
+            depth: import("svelte/store").Readable<number>;
             disabled: boolean;
             expanded: boolean;
             hasChildren: boolean;
             selected: boolean;
             value: string;
+            variant: string;
         };
         label: {
-            colorful: import("svelte/store").Readable<boolean>;
-            depth: number;
+            depth: import("svelte/store").Readable<number>;
             disabled: boolean;
             expanded: boolean;
             hasChildren: boolean;
             selected: boolean;
             value: string;
+            variant: string;
         };
         default: {
             depth: number;
+            disabled: boolean;
             selected: boolean;
             value: string;
+            variant: string;
         };
     };
 };

package/TreeItem.types.d.ts

@@ -7,7 +7,7 @@ export type TreeItemContext = {
      * The depth of this tree item within the tree hierarchy.
      * Starts at zero.
      */
-    depth: number;
+    depth: Readable<number>;
     /** When true, the three item is disabled. */
     disabled: Readable<boolean>;
 };