@geoffcox/sterling-svelte 2.0.2 → 2.0.4

package/dist/Tree.svelte

@@ -0,0 +1,81 @@
+<svelte:options runes={true} />
+
+<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;
+    },
+    get expandedValues() {
+      return expandedValues;
+    },
+    set expandedValues(value: string[]) {
+      expandedValues = value;
+    },
+    get selectedValue() {
+      return selectedValue;
+    },
+    set selectedValue(value: string | undefined) {
+      selectedValue = value;
+    }
+  };
+
+  setContext<TreeContext>(TREE_CONTEXT_KEY, treeContext);
+
+  $effect(() => {
+    onSelect?.(selectedValue);
+  });
+
+  $effect(() => {
+    onExpandCollapse?.(expandedValues);
+  });
+
+  export const blur = () => {
+    treeRef?.blur();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    treeRef?.focus(options);
+  };
+</script>
+
+<div
+  bind:this={treeRef}
+  aria-disabled={disabled}
+  class={['sterling-tree', _class]}
+  class:disabled
+  class:using-keyboard={$usingKeyboard}
+  role="tree"
+  tabindex="0"
+  {...rest}
+>
+  <div class="container">
+    {@render children?.()}
+  </div>
+</div>

package/dist/Tree.svelte.d.ts

@@ -0,0 +1,14 @@
+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;
+};
+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

@@ -0,0 +1,5 @@
+export type TreeContext = {
+    disabled: boolean | null | undefined;
+    expandedValues: string[];
+    selectedValue: string | undefined;
+};

package/dist/Tree.types.js

@@ -0,0 +1 @@
+export {};

package/dist/TreeChevron.svelte

@@ -0,0 +1,39 @@
+<svelte:options runes={true} />
+
+<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;
+    }, 0);
+  });
+
+  let animate = $state(false);
+
+  $effect(() => {
+    if (expanded !== previousExpanded && mounted) {
+      animate = true;
+    }
+    previousExpanded = expanded;
+  });
+</script>
+
+<div
+  class={['sterling-tree-chevron', _class]}
+  class:leaf={!hasChildren}
+  class:animate
+  class:expanded
+  {...rest}
+></div>

package/dist/TreeChevron.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    expanded?: boolean | null | undefined;
+    hasChildren?: boolean | null | undefined;
+};
+declare const TreeChevron: import("svelte").Component<Props, {}, "">;
+type TreeChevron = ReturnType<typeof TreeChevron>;
+export default TreeChevron;

package/dist/TreeItem.constants.d.ts

@@ -0,0 +1 @@
+export declare const TREE_ITEM_CONTEXT_KEY = "sterlingTreeItem";

package/dist/TreeItem.constants.js

@@ -0,0 +1 @@
+export const TREE_ITEM_CONTEXT_KEY = 'sterlingTreeItem';

package/dist/TreeItem.svelte

@@ -0,0 +1,396 @@
+<svelte:options runes={true} />
+
+<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<TreeContext>(TREE_CONTEXT_KEY) || {
+    disabled: false,
+    expandedValues: [],
+    selectedValue: null
+  };
+
+  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 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: HTMLDivElement;
+  let itemRef: HTMLDivElement;
+
+  let treeItemChildContext: TreeItemContext = {
+    get disabled() {
+      return _disabled;
+    },
+    get depth() {
+      return treeItemContext.depth ? treeItemContext.depth + 1 : 1;
+    }
+  };
+
+  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;
+      }
+    }
+
+    return false;
+  };
+
+  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;
+      }
+    }
+
+    return false;
+  };
+
+  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);
+    }
+
+    return false;
+  };
+
+  const blurItem = (treeItemElement: Element) => {
+    if (!_disabled) {
+      const item = treeItemElement?.querySelector<HTMLElement>('.item');
+      item?.blur();
+    }
+  };
+
+  export const blur = () => {
+    blurItem(treeItemRef);
+  };
+
+  const focusItem = (treeItemElement: Element, options?: FocusOptions) => {
+    if (!_disabled) {
+      const item = treeItemElement as HTMLElement;
+      item?.focus(options);
+    }
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    focusItem(treeItemRef);
+    treeItemRef?.focus(options);
+  };
+
+  const clickItem = (treeItemElement: Element) => {
+    if (!_disabled) {
+      const item = treeItemElement as HTMLElement;
+      item?.click();
+    }
+  };
+
+  export const click = () => {
+    clickItem(treeItemRef);
+  };
+
+  const selectItemByValue = (value: string) => {
+    if (!_disabled) {
+      treeContext.selectedValue = value;
+    }
+  };
+
+  export const select = () => {
+    if (!_disabled) {
+      selectItemByValue(value);
+    }
+  };
+
+  export const selectParent = () => {
+    if (!_disabled) {
+      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 = () => {
+    if (!_disabled) {
+      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 previous sibling
+        if (!candidateValue) {
+          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 = () => {
+    if (!_disabled) {
+      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;
+        }
+        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: MouseEventHandler<HTMLDivElement> = (event) => {
+    const eventTarget = event.target as Node;
+    if (!_disabled && itemRef.contains(eventTarget)) {
+      toggleExpanded();
+      select();
+      return;
+    }
+
+    rest.onclick?.(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;
+      }
+    }
+
+    rest.onkeydown?.(event);
+  };
+</script>
+
+<div
+  bind:this={treeItemRef}
+  aria-selected={selected ? true : undefined}
+  aria-expanded={expanded}
+  class={['sterling-tree-item', _class]}
+  class:disabled={_disabled}
+  class:expanded
+  class:item-disabled={disabled}
+  class:leaf={!children}
+  class:parent-disabled={treeItemContext.disabled}
+  class:selected
+  class:tree-disabled={treeContext.disabled}
+  data-value={value}
+  role="treeitem"
+  tabindex={selected ? 0 : -1}
+  {...rest}
+  onclick={onClick}
+  onkeydown={onKeydown}
+  style={`--sterling-tree-item-depth: ${treeItemContext.depth}; ${style}`}
+>
+  <!-- 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}
+    {/if}
+  </div>
+  {#if expanded && children}
+    <div class="children" transition:slideMotion|global={{ duration: 200 }} role="group">
+      {@render children?.()}
+    </div>
+  {/if}
+</div>

package/dist/TreeItem.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null | undefined;
+    icon?: Snippet;
+    label?: string | Snippet;
+    value: string;
+};
+declare const TreeItem: import("svelte").Component<Props, {
+    collapse: () => boolean;
+    expand: () => boolean;
+    toggleExpanded: () => boolean;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+    click: () => void;
+    select: () => void;
+    selectParent: () => boolean;
+    selectPrevious: () => boolean;
+    selectNext: () => boolean;
+}, "">;
+type TreeItem = ReturnType<typeof TreeItem>;
+export default TreeItem;

package/dist/TreeItem.types.d.ts

@@ -0,0 +1,4 @@
+export type TreeItemContext = {
+    depth: number;
+    disabled: boolean | null | undefined;
+};

package/dist/TreeItem.types.js

@@ -0,0 +1 @@
+export {};

package/dist/actions/applyLightDarkMode.d.ts

@@ -0,0 +1,11 @@
+type Mode = 'auto' | 'light' | 'dark';
+type Params = {
+    atDocumentRoot?: boolean;
+    mode?: Mode;
+};
+/** @deprecated Use colorScheme action instead with sterling-svelte-themes 2.x */
+export declare const applyLightDarkMode: (node: HTMLElement, params?: Params) => {
+    destroy(): void;
+    update(params?: Params): void;
+};
+export {};

package/dist/actions/applyLightDarkMode.js

@@ -0,0 +1,37 @@
+import { prefersColorSchemeDark } from '../mediaQueries/prefersColorSchemeDark';
+const modes = ['light-mode', 'dark-mode'];
+const addMode = (element, mode, prefersDark) => {
+    const darkMode = mode === 'dark' || (mode === 'auto' && prefersDark);
+    element.classList.remove(...modes);
+    element.classList.add(modes[darkMode ? 1 : 0]);
+};
+const clearModes = (element) => {
+    element.classList.remove(...modes);
+};
+/** @deprecated Use colorScheme action instead with sterling-svelte-themes 2.x */
+export const applyLightDarkMode = (node, params) => {
+    let mode = params?.mode || 'auto';
+    let prefersDark = false;
+    let atDocumentRoot = params?.atDocumentRoot === true;
+    let target = atDocumentRoot ? document.documentElement : node;
+    const unsubscribe = prefersColorSchemeDark.subscribe((value) => {
+        prefersDark = value;
+        addMode(target, mode, prefersDark);
+    });
+    addMode(target, mode, prefersDark);
+    return {
+        destroy() {
+            unsubscribe();
+        },
+        update(params) {
+            // if changing the target, then clear from previous target
+            if (atDocumentRoot !== params?.atDocumentRoot) {
+                clearModes(target);
+            }
+            mode = params?.mode || 'auto';
+            atDocumentRoot = params?.atDocumentRoot === true;
+            target = atDocumentRoot ? document.documentElement : node;
+            addMode(target, mode, prefersDark);
+        }
+    };
+};

package/dist/actions/clickOutside.d.ts

@@ -0,0 +1,15 @@
+type Params = {
+    /** Other elements should not raise the event if clicked. */
+    ignoreOthers?: HTMLElement[];
+    onclickoutside?: (mouseEvent: MouseEvent) => void;
+};
+/**
+ * Raises the click_outside event when the user clicks outside the node.
+ * @param node The node to check and receive the event.
+ * @param params Additional parameters
+ */
+export declare const clickOutside: (node: HTMLElement, params?: Params) => {
+    update(params: Params): void;
+    destroy(): void;
+};
+export {};

package/dist/actions/clickOutside.js

@@ -0,0 +1,28 @@
+/**
+ * Raises the click_outside event when the user clicks outside the node.
+ * @param node The node to check and receive the event.
+ * @param params Additional parameters
+ */
+export const clickOutside = (node, params) => {
+    let ignoreOthers = params?.ignoreOthers;
+    const handleClick = (event) => {
+        const targetNode = event?.target;
+        if (targetNode &&
+            !node.contains(targetNode) &&
+            (!ignoreOthers || ignoreOthers.filter(Boolean).every((x) => !x.contains(targetNode)))) {
+            params?.onclickoutside?.(event);
+            node.dispatchEvent(new CustomEvent('click_outside', {
+                detail: { mouseEvent: event }
+            }));
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        update(params) {
+            ignoreOthers = params.ignoreOthers;
+        },
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+};

package/dist/actions/colorScheme.d.ts

@@ -0,0 +1,8 @@
+type Params = {
+    value?: string;
+};
+export declare const colorScheme: (_node: HTMLElement, params?: Params) => {
+    destroy(): void;
+    update(params?: Params): void;
+};
+export {};