@geoffcox/sterling-svelte 2.0.2 → 2.0.3

package/dist/List.svelte

@@ -0,0 +1,258 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import { LIST_CONTEXT_KEY } from './List.constants';
+  import type { ListContext } from './List.types';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    horizontal?: boolean | null;
+    selectedValue?: string;
+    onSelect?: (value?: string) => void;
+  };
+
+  let {
+    children,
+    class: _class,
+    disabled = false,
+    horizontal = false,
+    selectedValue = $bindable(),
+    onSelect,
+    ...rest
+  }: Props = $props();
+
+  let listRef: HTMLDivElement;
+  let lastSelectedItemRef: HTMLElement;
+
+  let listContext = $state({
+    disabled,
+    selectedValue,
+    horizontal
+  });
+
+  $effect(() => {
+    listContext.disabled = disabled;
+  });
+
+  $effect(() => {
+    listContext.horizontal = horizontal;
+  });
+
+  $effect(() => {
+    listContext.selectedValue = selectedValue;
+  });
+
+  setContext<ListContext>(LIST_CONTEXT_KEY, listContext);
+
+  export const blur = () => {
+    listRef?.blur();
+  };
+
+  export const click = () => {
+    listRef?.click();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    listRef?.focus();
+  };
+
+  export const scrollToSelectedItem = () => {
+    const element = getSelectedItemElement();
+    element?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  };
+
+  $effect(() => {
+    onSelect?.(selectedValue);
+  });
+
+  const isElementListItem = (candidate: Element) => {
+    return (
+      candidate &&
+      candidate.getAttribute('data-value') !== null &&
+      candidate.getAttribute('data-value') !== undefined &&
+      candidate.getAttribute('role') === 'listitem'
+    );
+  };
+
+  const getSelectedItemElement = () => {
+    if (
+      isElementListItem(lastSelectedItemRef) &&
+      lastSelectedItemRef?.getAttribute('data-value') === selectedValue &&
+      lastSelectedItemRef?.closest('[role="list"]') === listRef
+    ) {
+      return lastSelectedItemRef;
+    } else {
+      return listRef?.querySelector('[data-value][aria-selected=true]');
+    }
+  };
+
+  const selectItem = (value: string, element: HTMLElement) => {
+    selectedValue = value;
+    lastSelectedItemRef = element;
+    element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  };
+
+  export const selectFirstItem = () => {
+    let candidate: Element | undefined | null = listRef?.querySelector(
+      '[data-value][role=listitem]'
+    );
+    while (candidate && !isElementListItem(candidate)) {
+      candidate = candidate.nextElementSibling;
+    }
+    let candidateValue = candidate?.getAttribute('data-value');
+
+    if (candidateValue && candidate) {
+      selectItem(candidateValue, candidate as HTMLElement);
+      return true;
+    }
+
+    return false;
+  };
+
+  export const selectPreviousItem = () => {
+    let selectedItem = getSelectedItemElement();
+    let candidate = selectedItem?.previousElementSibling;
+    while (candidate && !isElementListItem(candidate)) {
+      candidate = candidate.previousElementSibling;
+    }
+    let candidateValue = candidate?.getAttribute('data-value');
+
+    if (candidateValue && candidate) {
+      selectItem(candidateValue, candidate as HTMLElement);
+      return true;
+    }
+
+    return false;
+  };
+
+  export const selectNextItem = () => {
+    let selectedItem = getSelectedItemElement();
+    let candidate = selectedItem?.nextElementSibling;
+    while (candidate && !isElementListItem(candidate)) {
+      candidate = candidate.nextElementSibling;
+    }
+    let candidateValue = candidate?.getAttribute('data-value');
+
+    if (candidateValue && candidate) {
+      selectItem(candidateValue, candidate as HTMLElement);
+      return true;
+    }
+
+    return false;
+  };
+
+  export const selectLastItem = () => {
+    let candidate: Element | undefined | null = listRef?.querySelector(
+      '[data-value][role=listitem]:last-of-type'
+    );
+    while (candidate && !isElementListItem(candidate)) {
+      candidate = candidate.previousElementSibling;
+    }
+    let candidateValue = candidate?.getAttribute('data-value');
+
+    if (candidateValue && candidate) {
+      selectItem(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>('[data-value]');
+        candidateValue = candidate?.getAttribute('data-value');
+      }
+      if (candidateValue && candidate) {
+        selectItem(candidateValue, candidate);
+      }
+    }
+    rest.onclick?.(event);
+  };
+
+  const onKeydown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey) {
+      switch (event.key) {
+        case 'Home':
+          selectFirstItem();
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        case 'End':
+          selectLastItem();
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        case 'ArrowLeft':
+          if (horizontal) {
+            selectedValue !== undefined && selectedValue.length > 0
+              ? selectPreviousItem()
+              : selectLastItem();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        case 'ArrowRight':
+          if (horizontal) {
+            selectedValue !== undefined && selectedValue.length > 0
+              ? selectNextItem()
+              : selectFirstItem();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        case 'ArrowUp':
+          if (!horizontal) {
+            selectedValue !== undefined && selectedValue.length > 0
+              ? selectPreviousItem()
+              : selectLastItem();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        case 'ArrowDown':
+          if (!horizontal) {
+            selectedValue !== undefined && selectedValue.length > 0
+              ? selectNextItem()
+              : selectFirstItem();
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+      }
+    }
+    rest.onkeydown?.(event);
+  };
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_role_supports_aria_props -->
+<div
+  aria-activedescendant={selectedValue}
+  aria-disabled={disabled}
+  aria-orientation={horizontal ? 'horizontal' : 'vertical'}
+  bind:this={listRef}
+  class={['sterling-list', _class]}
+  class:disabled
+  class:horizontal
+  class:using-keyboard={$usingKeyboard}
+  role="list"
+  tabindex={0}
+  {...rest}
+  onclick={onClick}
+  onkeydown={onKeydown}
+>
+  <div class="container">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>

package/dist/List.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    horizontal?: boolean | null;
+    selectedValue?: string;
+    onSelect?: (value?: string) => void;
+};
+declare const List: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+    scrollToSelectedItem: () => void;
+    selectFirstItem: () => boolean;
+    selectPreviousItem: () => boolean;
+    selectNextItem: () => boolean;
+    selectLastItem: () => boolean;
+}, "selectedValue">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/List.types.d.ts

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

package/dist/List.types.js

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

package/dist/ListItem.svelte

@@ -0,0 +1,64 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { LIST_CONTEXT_KEY } from './List.constants';
+  import type { ListContext } from './List.types';
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    value?: string;
+  };
+
+  let { children, class: _class, disabled, value, ...rest }: Props = $props();
+
+  const listContext = getContext<ListContext>(LIST_CONTEXT_KEY);
+
+  let selected = $state(listContext.selectedValue === value);
+
+  // Using $derived would be preferred, but this helps avoid
+  // updates to every list item when selectedValue changes.
+  $effect(() => {
+    if (listContext.selectedValue === value && !selected) {
+      selected = true;
+    } else if (listContext.selectedValue !== value && selected) {
+      selected = false;
+    }
+  });
+
+  let itemRef: HTMLDivElement;
+
+  export const click = () => {
+    itemRef?.click();
+  };
+
+  export const blur = () => {
+    itemRef?.blur();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    itemRef?.focus(options);
+  };
+</script>
+
+<!-- svelte-ignore a11y_role_supports_aria_props -->
+<div
+  aria-selected={selected}
+  bind:this={itemRef}
+  class={['sterling-list-item', _class]}
+  class:disabled={disabled || listContext.disabled}
+  class:horizontal={listContext.horizontal}
+  class:item-disabled={disabled}
+  class:list-disabled={listContext.disabled}
+  class:selected
+  data-value={value}
+  role="listitem"
+  {...rest}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    {value}
+  {/if}
+</div>

package/dist/ListItem.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    disabled?: boolean | null;
+    value?: string;
+};
+declare const ListItem: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/Menu.svelte

@@ -0,0 +1,105 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { slide, type SlideParams, type TransitionConfig } from 'svelte/transition';
+  import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+  import type { MenuItemContext } from './MenuItem.types';
+  import { isElementEnabledMenuItem, isElementMenuItem } from './MenuItem.utils';
+  import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+
+  type Props = HTMLAttributes<HTMLDivElement>;
+
+  let { children, class: _class, ...rest }: Props = $props();
+
+  let menuRef: HTMLDivElement;
+  let menuItemsRef: HTMLDivElement;
+
+  const noSlide = (node: Element, params?: SlideParams): TransitionConfig => {
+    return { delay: 0, duration: 0 };
+  };
+
+  let slideMotion = $derived(!$prefersReducedMotion ? slide : noSlide);
+
+  const { rootValue = undefined } = getContext<MenuItemContext>(MENU_ITEM_CONTEXT_KEY);
+
+  const isElementInThisMenu = (candidate: Element) => {
+    return candidate && candidate.closest('[role="menu"]') === menuRef;
+  };
+
+  //#region focus
+  export const focus = (options?: FocusOptions) => {
+    menuRef?.focus(options);
+  };
+
+  export const blur = () => {
+    menuRef?.blur();
+  };
+
+  export const focusFirstMenuItem = () => {
+    let candidate: Element | undefined | null = menuItemsRef?.firstElementChild;
+    while (candidate && !isElementEnabledMenuItem(candidate)) {
+      candidate = candidate.nextElementSibling;
+    }
+
+    (candidate as HTMLElement)?.focus({ preventScroll: true });
+    return !!candidate;
+  };
+
+  export const focusPreviousMenuItem = () => {
+    let candidate = document.activeElement;
+
+    if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
+      candidate = menuItemsRef?.previousElementSibling;
+      while (candidate && !isElementEnabledMenuItem(candidate)) {
+        candidate = candidate.previousElementSibling;
+      }
+      (candidate as HTMLElement)?.focus();
+    }
+    return !!candidate;
+  };
+
+  export const focusNextMenuItem = () => {
+    let candidate = document.activeElement;
+
+    if (candidate && isElementMenuItem(candidate) && isElementInThisMenu(candidate)) {
+      candidate = menuItemsRef?.nextElementSibling;
+      while (candidate && !isElementEnabledMenuItem(candidate)) {
+        candidate = candidate.nextElementSibling;
+      }
+      (candidate as HTMLElement)?.focus();
+    }
+    return !!candidate;
+  };
+
+  export const focusLastMenuItem = () => {
+    let candidate: Element | undefined | null = menuItemsRef?.lastElementChild;
+    while (candidate && !isElementEnabledMenuItem(candidate)) {
+      candidate = candidate.previousElementSibling;
+    }
+
+    (candidate as HTMLElement)?.focus({ preventScroll: true });
+    return !!candidate;
+  };
+
+  //#endregion
+</script>
+
+<div
+  bind:this={menuRef}
+  class={['sterling-menu', _class]}
+  role="menu"
+  class:open
+  data-root-value={rootValue}
+  tabindex="-1"
+  in:slideMotion|global={{ duration: 300 }}
+  out:slideMotion|global={{ duration: 100 }}
+  {...rest}
+>
+  <div bind:this={menuItemsRef} class="menu-items">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</div>

package/dist/Menu.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement>;
+declare const Menu: import("svelte").Component<Props, {
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    focusFirstMenuItem: () => boolean;
+    focusPreviousMenuItem: () => boolean;
+    focusNextMenuItem: () => boolean;
+    focusLastMenuItem: () => boolean;
+}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/MenuBar.constants.d.ts

@@ -0,0 +1 @@
+export declare const MENU_BAR_CONTEXT_KEY = "sterlingMenuBar";

package/dist/MenuBar.constants.js

@@ -0,0 +1 @@
+export const MENU_BAR_CONTEXT_KEY = 'sterlingMenuBar';

package/dist/MenuBar.svelte

@@ -0,0 +1,144 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { setContext } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { clickOutside } from './actions/clickOutside';
+  import { MENU_BAR_CONTEXT_KEY } from './MenuBar.constants';
+  import type { MenuBarContext } from './MenuBar.types';
+  import { MENU_ITEM_CONTEXT_KEY } from './MenuItem.constants';
+  import type { MenuItemContext } from './MenuItem.types';
+  import { isElementEnabledMenuItem } from './MenuItem.utils';
+
+  const uuid = $props.id();
+
+  type Props = HTMLAttributes<HTMLDivElement> & {
+    onClose?: (value: string) => void;
+    onOpen?: (value: string) => void;
+    onSelect?: (value: string) => void;
+  };
+
+  let { class: _class, children, onClose, onOpen, onSelect, ...rest }: Props = $props();
+
+  const rootValue = `MenuBar-${uuid}`;
+  let openValues: string[] = $state([]);
+  let prevOpenValue: string | undefined = $state();
+
+  let menuBarRef: HTMLDivElement;
+
+  $effect(() => {
+    prevOpenValue = openValues[0];
+  });
+
+  // Restore focus to the last open menu bar item when it closes
+  $effect(() => {
+    if (openValues.length === 0 && prevOpenValue !== undefined) {
+      const candidate = menuBarRef.querySelector(`[data-value="${prevOpenValue}"]`);
+      (candidate as HTMLElement)?.focus();
+      prevOpenValue = undefined;
+    }
+  });
+
+  export const blur = () => {
+    menuBarRef?.blur();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    menuBarRef?.focus(options);
+  };
+
+  const getOpenMenuBarItem = () => {
+    const value = openValues[0];
+    if (value) {
+      return menuBarRef.querySelector(`[data-value="${value}"]`);
+    }
+    return null;
+  };
+
+  const openPreviousMenuBarItem = () => {
+    const openItem = getOpenMenuBarItem() || menuBarRef.firstElementChild;
+    let candidate = openItem?.previousElementSibling || menuBarRef.lastElementChild;
+
+    while (candidate && !isElementEnabledMenuItem(candidate)) {
+      candidate = candidate.previousElementSibling || menuBarRef.lastElementChild;
+      if (candidate === openItem) {
+        return false;
+      }
+    }
+
+    if (!candidate) {
+      candidate = menuBarRef.lastElementChild;
+      candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
+    }
+
+    (candidate as HTMLElement)?.click();
+    return !!candidate;
+  };
+
+  const openNextMenuBarItem = () => {
+    const openItem = getOpenMenuBarItem() || menuBarRef.lastElementChild;
+    let candidate = openItem?.nextElementSibling || menuBarRef.firstElementChild;
+
+    while (candidate && !isElementEnabledMenuItem(candidate)) {
+      candidate = candidate.nextElementSibling || menuBarRef.firstElementChild;
+      if (candidate === openItem) {
+        return false;
+      }
+    }
+
+    if (!candidate) {
+      candidate = menuBarRef.firstElementChild;
+      candidate = candidate && isElementEnabledMenuItem(candidate) ? candidate : null;
+    }
+
+    (candidate as HTMLElement)?.click();
+    return !!candidate;
+  };
+
+  const closeAllMenus = () => {
+    openValues = [];
+  };
+
+  const onClickOutside = (event: MouseEvent) => {
+    let element: HTMLElement | null = event.target as HTMLElement;
+    while (element) {
+      if (element.getAttribute('data-root-value') === rootValue) {
+        return;
+      }
+      element = element.parentElement;
+    }
+    closeAllMenus?.();
+  };
+
+  let menuBarContext: MenuBarContext = { openPreviousMenuBarItem, openNextMenuBarItem };
+
+  setContext<MenuBarContext>(MENU_BAR_CONTEXT_KEY, menuBarContext);
+
+  let menuItemContext: MenuItemContext = {
+    isMenuBarItem: true,
+    depth: 0,
+    get openValues() {
+      return openValues;
+    },
+    set openValues(value: string[]) {
+      openValues = value;
+    },
+    rootValue,
+    onClose,
+    onOpen,
+    onSelect
+  };
+
+  setContext<MenuItemContext>(MENU_ITEM_CONTEXT_KEY, menuItemContext);
+</script>
+
+<div
+  bind:this={menuBarRef}
+  class={['sterling-menu-bar', _class]}
+  role="menubar"
+  tabindex="-1"
+  {...rest}
+  use:clickOutside={{ onclickoutside: onClickOutside }}
+>
+  {@render children?.()}
+</div>

package/dist/MenuBar.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLDivElement> & {
+    onClose?: (value: string) => void;
+    onOpen?: (value: string) => void;
+    onSelect?: (value: string) => void;
+};
+declare const MenuBar: import("svelte").Component<Props, {
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type MenuBar = ReturnType<typeof MenuBar>;
+export default MenuBar;

package/dist/MenuBar.types.d.ts

@@ -0,0 +1,4 @@
+export type MenuBarContext = {
+    openPreviousMenuBarItem?: () => void;
+    openNextMenuBarItem?: () => void;
+};

package/dist/MenuBar.types.js

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