@geoffcox/sterling-svelte 2.0.2 → 2.0.4

package/dist/Tab.svelte

@@ -0,0 +1,66 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+  import type { TabListContext } from './TabList.types';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  type Props = HTMLButtonAttributes & {
+    value: string;
+  };
+
+  let { children, class: _class, disabled = false, value, ...rest }: Props = $props();
+
+  let tabRef: HTMLButtonElement;
+
+  const tabListContext = getContext<TabListContext>(TAB_LIST_CONTEXT_KEY);
+
+  let selected = $state(tabListContext.selectedValue === value);
+
+  let _disabled = $derived(tabListContext.disabled || disabled);
+
+  // Using $derived would be preferred, but this helps avoid
+  // updates to every tab when selectedValue changes.
+  // let selected = $derived(tabContext.selectedValue === value);
+  $effect(() => {
+    if (tabListContext.selectedValue === value && !selected) {
+      selected = true;
+    } else if (tabListContext.selectedValue !== value && selected) {
+      selected = false;
+    }
+  });
+
+  export const click = () => {
+    tabRef?.click();
+  };
+
+  export const blur = () => {
+    tabRef?.blur();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    tabRef?.focus(options);
+  };
+</script>
+
+<button
+  bind:this={tabRef}
+  aria-selected={selected}
+  class={['sterling-tab', _class]}
+  class:selected
+  class:using-keyboard={$usingKeyboard}
+  class:vertical={tabListContext.vertical}
+  data-value={value}
+  disabled={_disabled}
+  role="tab"
+  type="button"
+  tabIndex={selected ? 0 : -1}
+  {...rest}
+>
+  <div class="content">
+    {@render children?.()}
+  </div>
+  <div class="indicator"></div>
+</button>

package/dist/Tab.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type Props = HTMLButtonAttributes & {
+    value: string;
+};
+declare const Tab: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;

package/dist/TabList.constants.d.ts

@@ -0,0 +1 @@
+export declare const TAB_LIST_CONTEXT_KEY = "sterlingTabList";

package/dist/TabList.constants.js

@@ -0,0 +1 @@
+export const TAB_LIST_CONTEXT_KEY = 'sterlingTabList';

package/dist/TabList.svelte

@@ -0,0 +1,253 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+  import type { TabListContext } from './TabList.types';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    selectedValue?: string;
+    vertical?: boolean | null;
+    onSelect?: (value?: string) => void;
+  };
+
+  let {
+    children,
+    class: _class,
+    disabled = false,
+    onSelect,
+    selectedValue = $bindable(),
+    vertical = false,
+    ...rest
+  }: Props = $props();
+
+  let tabListRef: HTMLDivElement;
+  let lastSelectedTabRef: HTMLElement;
+
+  let tabListContext: TabListContext = {
+    get disabled() {
+      return disabled;
+    },
+    set disabled(value) {
+      disabled = value;
+    },
+    get selectedValue() {
+      return selectedValue;
+    },
+    set selectedValue(value) {
+      selectedValue = value;
+    },
+    get vertical() {
+      return vertical;
+    },
+    set vertical(value) {
+      vertical = value;
+    }
+  };
+
+  $effect(() => {
+    tabListContext.disabled = disabled;
+  });
+
+  $effect(() => {
+    tabListContext.selectedValue = selectedValue;
+  });
+
+  $effect(() => {
+    tabListContext.vertical = vertical;
+  });
+
+  setContext<TabListContext>(TAB_LIST_CONTEXT_KEY, tabListContext);
+
+  $effect(() => {
+    onSelect?.(selectedValue);
+  });
+
+  export const blur = () => {
+    tabListRef?.blur();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    let selectedItem = getSelectedTabElement();
+    if (selectedValue && selectedItem) {
+      selectTab(selectedValue, selectedItem as HTMLElement);
+    } else {
+      selectFirstTab();
+    }
+  };
+
+  const isElementTab = (candidate: Element) => {
+    return (
+      candidate &&
+      candidate.getAttribute('data-value') !== null &&
+      candidate.getAttribute('data-value') !== undefined &&
+      candidate.getAttribute('role') === 'tab'
+    );
+  };
+
+  const getSelectedTabElement = () => {
+    if (
+      isElementTab(lastSelectedTabRef) &&
+      lastSelectedTabRef?.getAttribute('data-value') === selectedValue &&
+      lastSelectedTabRef?.closest('[role="tablist"]') === tabListRef
+    ) {
+      return lastSelectedTabRef;
+    } else {
+      return tabListRef?.querySelector('[data-value][aria-selected=true]');
+    }
+  };
+
+  const selectTab = (value: string, element: HTMLElement) => {
+    selectedValue = value;
+    lastSelectedTabRef = element;
+    element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    element.focus();
+  };
+
+  export const selectFirstTab = () => {
+    let candidate: Element | undefined | null = tabListRef?.firstElementChild;
+    while (candidate && !isElementTab(candidate)) {
+      candidate = candidate.nextElementSibling;
+    }
+    let candidateValue = candidate?.getAttribute('data-value');
+
+    if (candidateValue && candidate) {
+      selectTab(candidateValue, candidate as HTMLElement);
+      return true;
+    }
+
+    return false;
+  };
+
+  export const selectPreviousTab = () => {
+    let selectedTab = getSelectedTabElement();
+    let candidate = selectedTab?.previousElementSibling;
+    while (candidate && !isElementTab(candidate)) {
+      candidate = candidate.previousElementSibling;
+    }
+    let candidateValue = candidate?.getAttribute('data-value');
+
+    if (candidateValue && candidate) {
+      selectTab(candidateValue, candidate as HTMLElement);
+      return true;
+    }
+
+    return false;
+  };
+
+  export const selectNextTab = () => {
+    let selectedTab = getSelectedTabElement();
+    let candidate = selectedTab?.nextElementSibling;
+    while (candidate && !isElementTab(candidate)) {
+      candidate = candidate.nextElementSibling;
+    }
+    let candidateValue = candidate?.getAttribute('data-value');
+
+    if (candidateValue && candidate) {
+      selectTab(candidateValue, candidate as HTMLElement);
+      return true;
+    }
+
+    return false;
+  };
+
+  export const selectLastTab = () => {
+    let candidate: Element | undefined | null = tabListRef?.lastElementChild;
+    while (candidate && !isElementTab(candidate)) {
+      candidate = candidate.previousElementSibling;
+    }
+    let candidateValue = candidate?.getAttribute('data-value');
+
+    if (candidateValue && candidate) {
+      selectTab(candidateValue, candidate as HTMLElement);
+      return true;
+    }
+
+    return false;
+  };
+
+  const onClick: MouseEventHandler<HTMLDivElement> = (event) => {
+    if (!disabled) {
+      let candidate: HTMLElement | null | undefined = event.target as HTMLElement;
+      let candidateValue: string | null | undefined = candidate?.getAttribute('data-value');
+
+      if (candidateValue === undefined || candidateValue === null) {
+        candidate = candidate?.closest<HTMLElement>('[role=tab]');
+        candidateValue = candidate?.getAttribute('data-value');
+      }
+
+      if (candidateValue && candidate) {
+        selectTab(candidateValue, candidate);
+      }
+    }
+
+    rest.onclick?.(event);
+  };
+
+  const onKeydown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+    // if using arrows, only move when there are no modifier keys
+    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+      switch (event.key) {
+        case 'Home':
+          selectFirstTab();
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        case 'End':
+          selectLastTab();
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        case 'ArrowLeft':
+          if (!vertical) {
+            selectPreviousTab();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        case 'ArrowRight':
+          if (!vertical) {
+            selectNextTab();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        case 'ArrowUp':
+          if (vertical) {
+            selectPreviousTab();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        case 'ArrowDown':
+          if (vertical) {
+            selectNextTab();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          break;
+        default:
+          break;
+      }
+    }
+
+    rest.onkeydown?.(event);
+  };
+</script>
+
+<div
+  aria-orientation={vertical ? 'vertical' : 'horizontal'}
+  bind:this={tabListRef}
+  class={['sterling-tab-list', _class]}
+  class:disabled
+  class:vertical
+  role="tablist"
+  tabindex="-1"
+  onclick={onClick}
+  onkeydown={onKeydown}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/TabList.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    selectedValue?: string;
+    vertical?: boolean | null;
+    onSelect?: (value?: string) => void;
+};
+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

@@ -0,0 +1,5 @@
+export type TabListContext = {
+    disabled?: boolean | null | undefined;
+    selectedValue?: string | undefined;
+    vertical?: boolean | null | undefined;
+};

package/dist/TabList.types.js

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

package/dist/TextArea.constants.d.ts

@@ -0,0 +1 @@
+export declare const TEXT_AREA_RESIZES: readonly ["none", "horizontal", "vertical", "both"];

package/dist/TextArea.constants.js

@@ -0,0 +1 @@
+export const TEXT_AREA_RESIZES = ['none', 'horizontal', 'vertical', 'both'];

package/dist/TextArea.svelte

@@ -0,0 +1,116 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { tick } from 'svelte';
+  import type { FormEventHandler, HTMLTextareaAttributes } from 'svelte/elements';
+  import type { TextAreaResize } from './TextArea.types';
+
+  type Props = HTMLTextareaAttributes & {
+    autoHeight?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    value?: string;
+    resize?: TextAreaResize;
+  };
+
+  let {
+    class: _class,
+    disabled = false,
+    value = $bindable(''),
+    autoHeight = false,
+    resize = $bindable('none'),
+    style,
+    ...rest
+  }: Props = $props();
+
+  let textAreaRef: HTMLTextAreaElement;
+
+  const correctResize = async () => {
+    await tick();
+    setTimeout(() => {
+      if (autoHeight) {
+        if (resize === 'both') {
+          console.warn(
+            'The resize property cannot be set to "both" when autoHeight is true. The resize property will be set to "horizontal".'
+          );
+          resize = 'horizontal';
+        }
+        if (resize === 'vertical') {
+          console.warn(
+            'The resize property cannot be set to "vertical" when autoHeight is true. The resize property will be set to "none".'
+          );
+          resize = 'none';
+        }
+      }
+    }, 0);
+  };
+
+  const autoSetHeight = () => {
+    if (autoHeight && textAreaRef) {
+      // the style must be directly set to avoid re-rendering looping latency
+      // setting to auto for a moment allows the textarea to shrink
+      textAreaRef.style.height = 'auto';
+      textAreaRef.style.height = `${textAreaRef.scrollHeight}px`;
+    }
+  };
+
+  $effect(() => {
+    autoHeight;
+    resize;
+    correctResize();
+    autoSetHeight();
+  });
+
+  const onInput: FormEventHandler<HTMLTextAreaElement> = (event) => {
+    autoSetHeight();
+    rest.oninput?.(event);
+  };
+
+  export const blur = () => {
+    textAreaRef?.blur();
+  };
+
+  export const click = () => {
+    textAreaRef?.click();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    textAreaRef?.focus();
+  };
+
+  export const select = () => {
+    textAreaRef?.select();
+  };
+
+  export const setSelectionRange = (
+    start: number | null,
+    end: number | null,
+    direction?: 'forward' | 'backward' | 'none'
+  ) => {
+    textAreaRef?.setSelectionRange(start, end, direction);
+  };
+
+  export const setRangeText = (
+    replacement: string,
+    start?: number,
+    end?: number,
+    selectionMode?: SelectionMode
+  ) => {
+    if (start && end) {
+      textAreaRef?.setRangeText(replacement, start, end, selectionMode);
+    } else {
+      textAreaRef?.setRangeText(replacement);
+    }
+  };
+</script>
+
+<div class={['sterling-text-area', _class]} class:disabled>
+  <textarea
+    bind:this={textAreaRef}
+    bind:value
+    {disabled}
+    rows="1"
+    {...rest}
+    oninput={onInput}
+    style={`--TextArea__resize: ${resize};${style}`}
+  ></textarea>
+</div>

package/dist/TextArea.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import type { TextAreaResize } from './TextArea.types';
+type Props = HTMLTextareaAttributes & {
+    autoHeight?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    value?: string;
+    resize?: TextAreaResize;
+};
+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/TextArea.types.d.ts

@@ -0,0 +1,4 @@
+import type { TEXT_AREA_RESIZES } from './TextArea.constants';
+type TextAreaResizeTuple = typeof TEXT_AREA_RESIZES;
+export type TextAreaResize = TextAreaResizeTuple[number];
+export {};

package/dist/TextArea.types.js

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

package/dist/Tooltip.svelte

@@ -0,0 +1,95 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { onMount, type Snippet } from 'svelte';
+  import Callout from './Callout.svelte';
+  import type { CalloutProps } from './Callout.types';
+
+  type Props = Omit<CalloutProps, 'reference'> & {
+    disabled?: boolean;
+    hoverDelayMilliseconds?: number;
+    tip?: string | Snippet;
+  };
+
+  let {
+    children,
+    class: _class,
+    disabled = false,
+    hoverDelayMilliseconds = 1000,
+    open = $bindable(false),
+    tip,
+    ...rest
+  }: Props = $props();
+
+  let originRef: HTMLDivElement | undefined = $state();
+
+  let reference = $derived(
+    !!children ? (originRef?.previousElementSibling as HTMLElement) : undefined
+  );
+
+  const show = () => {
+    if (!disabled) {
+      open = true;
+    }
+  };
+
+  const hide = () => (open = false);
+
+  const delayShow = () => {
+    hoverDelayMilliseconds === 0
+      ? show()
+      : setTimeout(() => {
+          show();
+        }, hoverDelayMilliseconds);
+  };
+
+  $effect(() => {
+    if (disabled) {
+      hide();
+    }
+  });
+
+  // ----- Event Listeners ----- //
+
+  let cleanupAutoShowUpdate = () => {};
+
+  const autoShowUpdate = () => {
+    cleanupAutoShowUpdate();
+    cleanupAutoShowUpdate = () => {};
+
+    const element = reference;
+    open = false;
+
+    if (element) {
+      element.addEventListener('mouseenter', delayShow);
+      element.addEventListener('mouseleave', hide);
+      cleanupAutoShowUpdate = () => {
+        element.removeEventListener('mouseenter', delayShow);
+        element.removeEventListener('mouseleave', hide);
+      };
+    }
+  };
+
+  $effect(() => {
+    reference;
+    autoShowUpdate();
+  });
+
+  // ----- EventHandlers ----- //
+
+  onMount(() => {
+    autoShowUpdate();
+  });
+</script>
+
+{@render children?.()}
+<div class={['sterling-tooltip-origin', _class]} bind:this={originRef}></div>
+<Callout class={['sterling-tooltip-callout', _class]} {open} {reference} {...rest}>
+  {#if tip}
+    {#if typeof tip === 'string'}
+      {tip}
+    {:else}
+      {@render tip()}
+    {/if}
+  {/if}
+</Callout>

package/dist/Tooltip.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from 'svelte';
+import type { CalloutProps } from './Callout.types';
+type Props = Omit<CalloutProps, 'reference'> & {
+    disabled?: boolean;
+    hoverDelayMilliseconds?: number;
+    tip?: string | Snippet;
+};
+declare const Tooltip: import("svelte").Component<Props, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/Tree.constants.d.ts

@@ -0,0 +1 @@
+export declare const TREE_CONTEXT_KEY = "sterlingTree";

package/dist/Tree.constants.js

@@ -0,0 +1 @@
+export const TREE_CONTEXT_KEY = 'sterlingTree';