@sveltia/ui 0.2.4 → 0.3.0

package/package/components/util/group.js

@@ -0,0 +1,305 @@
+import { getRandomId, sleep } from './util';
+
+/**
+ * @type {{ [role: string]: {
+ *   orientation: string,
+ *   childRoles: string[],
+ *   childSelectedAttr: string,
+ *   focusChild: boolean
+ * } }}
+ */
+const config = {
+  grid: {
+    orientation: 'vertical',
+    childRoles: ['row'],
+    childSelectedAttr: 'aria-selected',
+    focusChild: true,
+  },
+  listbox: {
+    orientation: 'vertical',
+    childRoles: ['option'],
+    childSelectedAttr: 'aria-selected',
+    focusChild: false,
+  },
+  menu: {
+    orientation: 'vertical',
+    childRoles: ['menuitem', 'menuitemcheckbox', 'menuitemradio'],
+    childSelectedAttr: 'aria-checked',
+    focusChild: true,
+  },
+  menubar: {
+    orientation: 'horizontal',
+    childRoles: ['menuitem', 'menuitemcheckbox', 'menuitemradio'],
+    childSelectedAttr: 'aria-checked',
+    focusChild: true,
+  },
+  radiogroup: {
+    orientation: 'horizontal',
+    childRoles: ['radio'],
+    childSelectedAttr: 'aria-checked',
+    focusChild: true,
+  },
+  tablist: {
+    orientation: 'horizontal',
+    childRoles: ['tab'],
+    childSelectedAttr: 'aria-selected',
+    focusChild: true,
+  },
+};
+
+/**
+ * Implement keyboard and mouse interactions for a grouping composite widget.
+ */
+class Group {
+  /**
+   * Initialize a new `Group` instance.
+   * @param {HTMLElement} parent Parent element.
+   * @todo Check for added elements probably with `MutationObserver`.
+   */
+  constructor(parent) {
+    this.parent = parent;
+    this.role = parent.getAttribute('role');
+    this.grid = this.role === 'listbox' && parent.matches('.grid');
+    this.multi = this.parent.getAttribute('aria-multiselectable') === 'true';
+    this.id = getRandomId(this.role);
+    this.parentGroupSelector = `[role="group"], [role="${this.role}"]`;
+
+    const { orientation, childRoles, childSelectedAttr, focusChild } = config[this.role];
+
+    this.orientation = this.grid
+      ? 'horizontal'
+      : this.parent.getAttribute('aria-orientation') || orientation;
+    this.childRoles = childRoles;
+    this.childSelectedAttr = childSelectedAttr;
+    this.focusChild = focusChild;
+
+    const { allMembers } = this;
+
+    const hasSelected = allMembers.some((element) =>
+      element.matches(`[${childSelectedAttr}="true"]`),
+    );
+
+    allMembers.forEach((element, index) => {
+      const isSelected = element.matches(`[${childSelectedAttr}="true"]`);
+      const controls = document.querySelector(`#${element.getAttribute('aria-controls')}`);
+
+      element.id ||= `${this.id}-item-${index}`;
+      element.tabIndex ||= isSelected || (!hasSelected && index === 0) ? 0 : -1;
+      element.setAttribute(this.childSelectedAttr, String(isSelected));
+      controls?.setAttribute('aria-labelledby', element.id);
+      controls?.setAttribute('aria-hidden', String(!isSelected));
+    });
+
+    parent.addEventListener('click', (event) => {
+      if (/** @type {HTMLElement} */ (event.target).matches(this.selector)) {
+        this.onClick(event);
+      }
+    });
+
+    parent.addEventListener('keydown', (event) => {
+      this.onKeyDown(event);
+    });
+  }
+
+  /** @type {string} */
+  get selector() {
+    return this.childRoles.map((role) => `[role="${role}"]`).join(',');
+  }
+
+  /** @type {HTMLElement[]} */
+  get allMembers() {
+    // @ts-ignore
+    return [...this.parent.querySelectorAll(this.selector)];
+  }
+
+  /** @type {HTMLElement[]} */
+  get activeMembers() {
+    return this.allMembers.filter((element) => !element.matches('[aria-disabled="true"]'));
+  }
+
+  /**
+   * Select (and move focus to) the given target.
+   * @param {(MouseEvent | KeyboardEvent)} event Triggered event.
+   * @param {HTMLElement} newTarget Target element.
+   */
+  selectTarget(event, newTarget) {
+    const targetParentGroup = newTarget.closest(this.parentGroupSelector);
+
+    this.activeMembers.forEach((element) => {
+      const isTarget = element === newTarget;
+      const isSelected = element.matches('[aria-selected="true"]');
+      const controls = element.getAttribute('aria-controls');
+
+      if (this.multi && isTarget && event.type === 'click') {
+        element.setAttribute(this.childSelectedAttr, String(!isSelected));
+        element.dispatchEvent(new CustomEvent(isSelected ? 'unselect' : 'select'));
+      }
+
+      if (
+        (element.matches('[role="menuitemradio"]') &&
+          element.closest(this.parentGroupSelector) === targetParentGroup) ||
+        !this.multi
+      ) {
+        element.setAttribute(this.childSelectedAttr, String(isTarget));
+        element.dispatchEvent(new CustomEvent(isTarget ? 'select' : 'unselect'));
+      }
+
+      if (this.focusChild) {
+        element.tabIndex = isTarget ? 0 : -1;
+
+        if (isTarget) {
+          element.focus();
+        }
+      } else {
+        element.classList.toggle('focused', isTarget);
+      }
+
+      if (controls) {
+        document.getElementById(controls)?.setAttribute('aria-hidden', String(!isTarget));
+      }
+    });
+
+    this.parent.dispatchEvent(
+      new CustomEvent('select', {
+        detail: {
+          // @ts-ignore
+          value: newTarget.value,
+          // @ts-ignore
+          name: newTarget.name,
+        },
+      }),
+    );
+  }
+
+  /**
+   * Handle the `click` event on the widget.
+   * @param {MouseEvent} event `click` event.
+   */
+  onClick(event) {
+    // eslint-disable-next-line prefer-destructuring
+    const target = /** @type {HTMLElement} */ (event.target);
+    const newTarget = target.matches(this.selector) ? target : undefined;
+
+    if (!newTarget || event.button !== 0) {
+      return;
+    }
+
+    this.selectTarget(event, newTarget);
+  }
+
+  /**
+   * Handle the `keydown` event on the widget.
+   * @param {KeyboardEvent} event `keydown` event.
+   */
+  onKeyDown(event) {
+    const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+    const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
+
+    if (hasModifier) {
+      return;
+    }
+
+    // eslint-disable-next-line prefer-destructuring
+    const target = /** @type {HTMLElement} */ (event.target);
+    const { allMembers, activeMembers } = this;
+
+    const currentTarget = (() => {
+      if (!this.focusChild) {
+        return activeMembers.find((member) => member.matches('.focused')) || activeMembers[0];
+      }
+
+      if (target.matches(this.selector)) {
+        return target;
+      }
+
+      return undefined;
+    })();
+
+    if (!currentTarget) {
+      return;
+    }
+
+    if (['Enter', ' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
+      event.preventDefault();
+    }
+
+    if (['Enter', ' '].includes(key)) {
+      currentTarget.click();
+
+      return;
+    }
+
+    let index;
+    let newTarget;
+
+    if (this.grid) {
+      const colCount = Math.floor(this.parent.clientWidth / currentTarget.clientWidth);
+
+      index = allMembers.indexOf(currentTarget);
+
+      if (key === 'ArrowUp' && index > 0) {
+        newTarget = allMembers[index - colCount];
+      }
+
+      if (key === 'ArrowDown' && index < allMembers.length - 1) {
+        newTarget = allMembers[index + colCount];
+      }
+
+      if (key === 'ArrowLeft' && index > 0) {
+        newTarget = allMembers[index - 1];
+      }
+
+      if (key === 'ArrowRight' && index < allMembers.length - 1) {
+        newTarget = allMembers[index + 1];
+      }
+
+      if (newTarget?.getAttribute('aria-disabled') === 'true') {
+        newTarget = undefined;
+      }
+    } else {
+      index = activeMembers.indexOf(currentTarget);
+
+      if (key === (this.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp')) {
+        if (index > 0) {
+          // Previous member
+          newTarget = activeMembers[index - 1];
+        }
+
+        if (index === 0) {
+          // Last member
+          newTarget = activeMembers[activeMembers.length - 1];
+        }
+      }
+
+      if (key === (this.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown')) {
+        if (index < activeMembers.length - 1) {
+          // Next member
+          newTarget = activeMembers[index + 1];
+        }
+
+        if (index === activeMembers.length - 1) {
+          // First member
+          [newTarget] = activeMembers;
+        }
+      }
+    }
+
+    if (newTarget && newTarget !== currentTarget) {
+      this.selectTarget(event, newTarget);
+    }
+  }
+}
+
+/**
+ * Activate a new group.
+ * @param {...any} args Arguments.
+ */
+export const activateGroup = (...args) => {
+  (async () => {
+    // Wait a bit before the relevant components, including the `aria-controls` target are mounted
+    await sleep(100);
+
+    // @ts-ignore
+    return new Group(...args);
+  })();
+};

package/package/components/{core → util}/group.svelte

@@ -1,6 +1,9 @@
+<!--
+  @component
+  A generic group layout.
+  @see https://w3c.github.io/aria/#group
+-->
 <script>
-  import { getRandomId } from '../helpers/util';
-
   /**
    * CSS class name on the button.
    * @type {string}
@@ -9,23 +12,14 @@
 
   export { className as class };
 
-  export let title = '';
-
   export let ariaLabel = '';
-
-  const id = getRandomId('group');
 </script>
 
 <div
   class="sui group {className}"
   role="group"
-  {id}
   aria-label={ariaLabel || undefined}
-  aria-labelledby={title ? '{id}-title' : undefined}
   {...$$restProps}
 >
-  {#if title}
-    <div class="title" id="{id}-title">{title}</div>
-  {/if}
   <slot />
 </div>

package/package/components/{core → util}/group.svelte.d.ts

@@ -1,9 +1,12 @@
 /** @typedef {typeof __propDef.props}  GroupProps */
 /** @typedef {typeof __propDef.events}  GroupEvents */
 /** @typedef {typeof __propDef.slots}  GroupSlots */
+/**
+ * A generic group layout.
+ * @see https://w3c.github.io/aria/#group
+ */
 export default class Group extends SvelteComponentTyped<{
     [x: string]: any;
-    title?: string;
     class?: string;
     ariaLabel?: string;
 }, {
@@ -19,7 +22,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        title?: string;
         class?: string;
         ariaLabel?: string;
     };

package/package/components/util/popup.d.ts

@@ -0,0 +1,30 @@
+export function activatePopup(...args: any[]): Popup;
+/**
+ * Implement the popup handler.
+ */
+declare class Popup {
+    /**
+     * Initialize a new `Popup` instance.
+     * @param {HTMLButtonElement} anchorElement `<button>` element that triggers the popup.
+     * @param {HTMLDialogElement} popupElement `<dialog>` element to be used for the popup.
+     * @param {PopupPosition} position Where to show the popup content.
+     */
+    constructor(anchorElement: HTMLButtonElement, popupElement: HTMLDialogElement, position: PopupPosition);
+    open: import("svelte/store").Writable<boolean>;
+    style: import("svelte/store").Writable<{
+        inset: any;
+        zIndex: any;
+        width: any;
+        height: any;
+    }>;
+    observer: IntersectionObserver;
+    anchorElement: HTMLButtonElement;
+    popupElement: HTMLDialogElement;
+    position: PopupPosition;
+    id: string;
+    /**
+     * Continue checking the position in case the window or parent element resizes.
+     */
+    checkPosition(): void;
+}
+export {};

package/package/components/{helpers → util}/popup.js

@@ -4,7 +4,7 @@ import { get, writable } from 'svelte/store';
 import { getRandomId } from './util';
 
 /**
- *
+ * Implement the popup handler.
  */
 class Popup {
   open = writable(false);
@@ -76,12 +76,14 @@ class Popup {
   });
 
   /**
-   *
-   * @param {HTMLElement} anchorElement
-   * @param {HTMLElement} popupElement
-   * @param {PopupPosition} position
+   * Initialize a new `Popup` instance.
+   * @param {HTMLButtonElement} anchorElement `<button>` element that triggers the popup.
+   * @param {HTMLDialogElement} popupElement `<dialog>` element to be used for the popup.
+   * @param {PopupPosition} position Where to show the popup content.
    */
   constructor(anchorElement, popupElement, position) {
+    console.info({ anchorElement, popupElement, position });
+
     this.anchorElement = anchorElement;
     this.popupElement = popupElement; // = backdrop
     this.position = position;
@@ -97,37 +99,44 @@ class Popup {
     });
 
     this.anchorElement.addEventListener('keydown', (event) => {
+      console.info(event);
+
       const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+      const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
 
-      if (!ctrlKey && !metaKey && !shiftKey && !altKey) {
-        if (key === ' ' || key === 'Enter') {
-          event.stopPropagation();
-          this.open.set(!get(this.open));
-        }
+      if (['Enter', ' '].includes(key) && !hasModifier) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open.set(!get(this.open));
       }
     });
 
+    // Close the popup when the backdrop, a menu item or an option is clicked
     this.popupElement.addEventListener('click', (event) => {
-      if (get(this.open) && event.target !== this.anchorElement) {
+      event.stopPropagation();
+
+      // eslint-disable-next-line prefer-destructuring
+      const target = /** @type {HTMLElement} */ (event.target);
+
+      if (
+        get(this.open) &&
+        (target === this.popupElement || target.matches('[role^="menuitem"], [role="option"]'))
+      ) {
         this.open.set(false);
       }
     });
 
-    [this.anchorElement, this.popupElement].forEach((element) => {
-      element.addEventListener('keydown', (event) => {
-        const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
-
-        if (
-          get(this.open) &&
-          ['Escape'].includes(key) &&
-          !ctrlKey &&
-          !metaKey &&
-          !shiftKey &&
-          !altKey
-        ) {
-          this.open.set(false);
-        }
-      });
+    this.popupElement.addEventListener('keydown', (event) => {
+      console.info(event);
+
+      const { key, ctrlKey, metaKey, shiftKey, altKey } = event;
+      const hasModifier = shiftKey || altKey || ctrlKey || metaKey;
+
+      if (key === 'Escape' && !hasModifier) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open.set(false);
+      }
     });
 
     this.open.subscribe((open) => {
@@ -135,6 +144,7 @@ class Popup {
         this.checkPosition();
       } else if (this.anchorElement.getAttribute('aria-expanded') === 'true') {
         this.anchorElement.focus();
+        this.anchorElement.removeAttribute('aria-controls');
       }
 
       this.anchorElement.setAttribute('aria-expanded', String(open));

package/package/components/util/popup.svelte

@@ -7,7 +7,8 @@
 <script>
   import { onMount } from 'svelte';
   import { writable } from 'svelte/store';
-  import { activatePopup } from '../helpers/popup';
+  import { activatePopup } from './popup';
+  import { sleep } from './util';
 
   /** @type {HTMLElement?} */
   export let anchor = undefined;
@@ -58,12 +59,20 @@
     showContent = true;
     dialog.showModal();
 
-    window.requestAnimationFrame(() => {
+    window.requestAnimationFrame(async () => {
       showDialog = true;
+      await sleep(100);
 
-      window.requestAnimationFrame(() => {
-        /** @type {HTMLElement} */ (dialog.querySelector('[tabindex]') || dialog).focus();
-      });
+      const target = /** @type {HTMLElement} */ (
+        content.querySelector('[tabindex]:not([aria-disabled="true"])')
+      );
+
+      if (target) {
+        target.focus();
+      } else {
+        content.tabIndex = -1;
+        content.focus();
+      }
     });
   };
 

package/package/components/util/{misc.d.ts → util.d.ts}

@@ -1,2 +1,3 @@
+export function getRandomId(prefix?: string, length?: number): string;
 export function isObject(input: any): boolean;
 export function sleep(ms?: number): Promise<any>;

package/package/components/util/{misc.js → util.js}

@@ -1,3 +1,18 @@
+/**
+ * Get a random ID that can be used for elements.
+ * @param {string} [prefix] Prefix to be added to the ID, e.g. `popup`.
+ * @param {number} [length] Number of characters to be used in the ID.
+ * @returns {string} Generated ID.
+ */
+export const getRandomId = (prefix = '', length = 7) =>
+  [
+    prefix,
+    new Array(length)
+      .fill()
+      .map(() => '0123456789abcdef'[Math.floor(Math.random() * 12)])
+      .join(''),
+  ].join('-');
+
 /**
  * Check if the given input is a simple object.
  * @param {*} input Input, probably an object.

package/package/index.d.ts

@@ -2,45 +2,50 @@ export function initLocales({ fallbackLocale, initialLocale }?: {
     fallbackLocale?: string;
     initialLocale?: string;
 }): void;
-export { default as Calendar } from "./components/composite/calendar.svelte";
-export { default as CheckboxGroup } from "./components/composite/checkbox-group.svelte";
-export { default as Combobox } from "./components/composite/combobox.svelte";
-export { default as Disclosure } from "./components/composite/disclosure.svelte";
-export { default as Grid } from "./components/composite/grid.svelte";
-export { default as Listbox } from "./components/composite/listbox.svelte";
-export { default as MenuItemGroup } from "./components/composite/menu-item-group.svelte";
-export { default as Menu } from "./components/composite/menu.svelte";
-export { default as RadioButtonGroup } from "./components/composite/radio-button-group.svelte";
-export { default as SelectButtonGroup } from "./components/composite/select-button-group.svelte";
-export { default as Select } from "./components/composite/select.svelte";
-export { default as TabList } from "./components/composite/tab-list.svelte";
-export { default as Button } from "./components/core/button.svelte";
-export { default as Checkbox } from "./components/core/checkbox.svelte";
-export { default as Dialog } from "./components/core/dialog.svelte";
-export { default as Drawer } from "./components/core/drawer.svelte";
-export { default as GridCell } from "./components/core/grid-cell.svelte";
-export { default as Group } from "./components/core/group.svelte";
-export { default as Icon } from "./components/core/icon.svelte";
-export { default as MenuButton } from "./components/core/menu-button.svelte";
-export { default as MenuItemCheckbox } from "./components/core/menu-item-checkbox.svelte";
-export { default as MenuItemRadio } from "./components/core/menu-item-radio.svelte";
-export { default as MenuItem } from "./components/core/menu-item.svelte";
-export { default as NumberInput } from "./components/core/number-input.svelte";
-export { default as Option } from "./components/core/option.svelte";
-export { default as PasswordInput } from "./components/core/password-input.svelte";
-export { default as RadioButton } from "./components/core/radio-button.svelte";
-export { default as RowGroup } from "./components/core/row-group.svelte";
-export { default as Row } from "./components/core/row.svelte";
-export { default as SearchBar } from "./components/core/search-bar.svelte";
-export { default as SelectButton } from "./components/core/select-button.svelte";
-export { default as Separator } from "./components/core/separator.svelte";
-export { default as Slider } from "./components/core/slider.svelte";
-export { default as Spacer } from "./components/core/spacer.svelte";
-export { default as Switch } from "./components/core/switch.svelte";
-export { default as TabPanel } from "./components/core/tab-panel.svelte";
-export { default as Tab } from "./components/core/tab.svelte";
-export { default as TextArea } from "./components/core/text-area.svelte";
-export { default as TextInput } from "./components/core/text-input.svelte";
-export { default as Toolbar } from "./components/core/toolbar.svelte";
-export { default as MarkdownEditor } from "./components/editor/markdown.svelte";
+export { default as Button } from "./components/button/button.svelte";
+export { default as SelectButtonGroup } from "./components/button/select-button-group.svelte";
+export { default as SelectButton } from "./components/button/select-button.svelte";
+export { default as Calendar } from "./components/calendar/calendar.svelte";
+export { default as CheckboxGroup } from "./components/checkbox/checkbox-group.svelte";
+export { default as Checkbox } from "./components/checkbox/checkbox.svelte";
+export { default as Dialog } from "./components/dialog/dialog.svelte";
+export { default as Disclosure } from "./components/disclosure/disclosure.svelte";
+export { default as Divider } from "./components/divider/divider.svelte";
+export { default as Spacer } from "./components/divider/spacer.svelte";
+export { default as Drawer } from "./components/drawer/drawer.svelte";
+export { default as Icon } from "./components/icon/icon.svelte";
+export { default as Listbox } from "./components/listbox/listbox.svelte";
+export { default as OptionGroup } from "./components/listbox/option-group.svelte";
+export { default as Option } from "./components/listbox/option.svelte";
+export { default as MenuButton } from "./components/menu/menu-button.svelte";
+export { default as MenuItemCheckbox } from "./components/menu/menu-item-checkbox.svelte";
+export { default as MenuItemGroup } from "./components/menu/menu-item-group.svelte";
+export { default as MenuItemRadio } from "./components/menu/menu-item-radio.svelte";
+export { default as MenuItem } from "./components/menu/menu-item.svelte";
+export { default as Menu } from "./components/menu/menu.svelte";
+export { default as RadioGroup } from "./components/radio/radio-group.svelte";
+export { default as Radio } from "./components/radio/radio.svelte";
+export { default as Combobox } from "./components/select/combobox.svelte";
+export { default as Select } from "./components/select/select.svelte";
+export { default as Slider } from "./components/slider/slider.svelte";
+export { default as Switch } from "./components/switch/switch.svelte";
+export { default as TableBody } from "./components/table/table-body.svelte";
+export { default as TableCell } from "./components/table/table-cell.svelte";
+export { default as TableColHeader } from "./components/table/table-col-header.svelte";
+export { default as TableFoot } from "./components/table/table-foot.svelte";
+export { default as TableHead } from "./components/table/table-head.svelte";
+export { default as TableRowHeader } from "./components/table/table-row-header.svelte";
+export { default as TableRow } from "./components/table/table-row.svelte";
+export { default as Table } from "./components/table/table.svelte";
+export { default as TabList } from "./components/tabs/tab-list.svelte";
+export { default as TabPanel } from "./components/tabs/tab-panel.svelte";
+export { default as Tab } from "./components/tabs/tab.svelte";
+export { default as MarkdownEditor } from "./components/text-field/markdown-editor.svelte";
+export { default as NumberInput } from "./components/text-field/number-input.svelte";
+export { default as PasswordInput } from "./components/text-field/password-input.svelte";
+export { default as SearchBar } from "./components/text-field/search-bar.svelte";
+export { default as TextArea } from "./components/text-field/text-area.svelte";
+export { default as TextInput } from "./components/text-field/text-input.svelte";
+export { default as Toolbar } from "./components/toolbar/toolbar.svelte";
 export { default as AppShell } from "./components/util/app-shell.svelte";
+export { default as Group } from "./components/util/group.svelte";