@sveltia/ui 0.35.0 → 0.35.2

package/dist/services/popup.test.js

@@ -0,0 +1,536 @@
+/* eslint-disable jsdoc/require-description */
+/* eslint-disable jsdoc/require-jsdoc */
+/* eslint-disable jsdoc/require-param */
+/* eslint-disable jsdoc/require-param-description */
+/* eslint-disable jsdoc/require-returns */
+/* eslint-disable lines-between-class-members */
+/* eslint-disable max-classes-per-file */
+
+import { get } from 'svelte/store';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { activatePopup } from './popup.svelte.js';
+
+describe('Popup', () => {
+  /** @type {HTMLButtonElement} */
+  let anchor;
+  /** @type {HTMLDialogElement} */
+  let popup;
+
+  beforeEach(() => {
+    anchor = /** @type {HTMLButtonElement} */ (document.createElement('button'));
+    popup = /** @type {HTMLDialogElement} */ (document.createElement('dialog'));
+    document.body.appendChild(anchor);
+    document.body.appendChild(popup);
+  });
+
+  afterEach(() => {
+    anchor.remove();
+    popup.remove();
+  });
+
+  it('should assign an id to the popup element', () => {
+    activatePopup(anchor, popup, 'bottom-left');
+    expect(popup.id).toBeTruthy();
+  });
+
+  it('should set aria-controls on the anchor to match the popup id', () => {
+    activatePopup(anchor, popup, 'bottom-left');
+    expect(anchor.getAttribute('aria-controls')).toBe(popup.id);
+  });
+
+  it('should expose the open store defaulting to false', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    expect(get(instance.open)).toBe(false);
+  });
+
+  it('should set aria-expanded to false initially', () => {
+    activatePopup(anchor, popup, 'bottom-left');
+    expect(anchor.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('should toggle open store to true on anchor click', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.click();
+    expect(get(instance.open)).toBe(true);
+  });
+
+  it('should set aria-expanded to true after anchor click', () => {
+    activatePopup(anchor, popup, 'bottom-left');
+    anchor.click();
+    expect(anchor.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should not toggle open when anchor is disabled', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.setAttribute('aria-disabled', 'true');
+    anchor.click();
+    expect(get(instance.open)).toBe(false);
+  });
+
+  it('should not toggle open when anchor is read-only', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.setAttribute('aria-readonly', 'true');
+    anchor.click();
+    expect(get(instance.open)).toBe(false);
+  });
+
+  it('should report isDisabled as false when not disabled', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    expect(instance.isDisabled).toBe(false);
+  });
+
+  it('should report isDisabled as true when aria-disabled is set', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.setAttribute('aria-disabled', 'true');
+    expect(instance.isDisabled).toBe(true);
+  });
+
+  it('should report isReadOnly as false when not read-only', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    expect(instance.isReadOnly).toBe(false);
+  });
+
+  it('should report isReadOnly as true when aria-readonly is set', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.setAttribute('aria-readonly', 'true');
+    expect(instance.isReadOnly).toBe(true);
+  });
+
+  it('should close on Escape keydown on popup', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.click(); // open first
+    popup.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: false }));
+    expect(get(instance.open)).toBe(false);
+  });
+
+  it('should close when a menu option inside popup is clicked', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+    const menuItem = document.createElement('div');
+
+    menuItem.setAttribute('role', 'menuitem');
+    popup.appendChild(menuItem);
+    anchor.click(); // open
+    menuItem.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    expect(get(instance.open)).toBe(false);
+  });
+
+  it('should toggle open to true on Enter keydown on anchor', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
+    expect(get(instance.open)).toBe(true);
+  });
+
+  it('should toggle open to true on Space keydown on anchor', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }));
+    expect(get(instance.open)).toBe(true);
+  });
+
+  it('should not toggle open when anchor keydown has a modifier key', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true, bubbles: true }),
+    );
+    expect(get(instance.open)).toBe(false);
+  });
+
+  it('should close on click directly on the popup backdrop element', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.click(); // open
+    popup.dispatchEvent(new MouseEvent('click', { bubbles: false }));
+    expect(get(instance.open)).toBe(false);
+  });
+
+  it('should remove aria-controls from anchor when popup closes after being open', () => {
+    activatePopup(anchor, popup, 'bottom-left');
+    anchor.click(); // open  → aria-expanded='true'
+    anchor.click(); // close → aria-controls should be removed
+    expect(anchor.getAttribute('aria-controls')).toBeNull();
+  });
+
+  it('should set aria-expanded to false after closing', () => {
+    activatePopup(anchor, popup, 'bottom-left');
+    anchor.click(); // open
+    anchor.click(); // close
+    expect(anchor.getAttribute('aria-expanded')).toBe('false');
+  });
+});
+
+describe('Popup - hideImmediately', () => {
+  /** @type {HTMLButtonElement} */
+  let anchor;
+  /** @type {HTMLDialogElement} */
+  let popup;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    anchor = /** @type {HTMLButtonElement} */ (document.createElement('button'));
+    popup = /** @type {HTMLDialogElement} */ (document.createElement('dialog'));
+    document.body.appendChild(anchor);
+    document.body.appendChild(popup);
+  });
+
+  afterEach(() => {
+    anchor.remove();
+    popup.remove();
+    vi.useRealTimers();
+  });
+
+  it('should set open to false immediately when hideImmediately is called', async () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.click();
+    expect(get(instance.open)).toBe(true);
+
+    const hidePromise = instance.hideImmediately();
+
+    expect(get(instance.open)).toBe(false);
+    await vi.advanceTimersByTimeAsync(100);
+    await hidePromise;
+  });
+
+  it('should temporarily set popup.hidden and then restore it', async () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.click();
+
+    const hidePromise = instance.hideImmediately();
+
+    expect(popup.hidden).toBe(true);
+    await vi.advanceTimersByTimeAsync(100);
+    await hidePromise;
+    expect(popup.hidden).toBe(false);
+  });
+});
+
+describe('Popup - transitionstart', () => {
+  /** @type {HTMLButtonElement} */
+  let anchor;
+  /** @type {HTMLDialogElement} */
+  let popup;
+  /** @type {HTMLDivElement} */
+  let wrapper;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    anchor = /** @type {HTMLButtonElement} */ (document.createElement('button'));
+    popup = /** @type {HTMLDialogElement} */ (document.createElement('dialog'));
+    wrapper = document.createElement('div');
+    wrapper.appendChild(anchor);
+    document.body.appendChild(wrapper);
+    document.body.appendChild(popup);
+  });
+
+  afterEach(() => {
+    wrapper.remove();
+    popup.remove();
+    vi.useRealTimers();
+  });
+
+  it('should hide popup when anchor transitions inside a .hiding ancestor', async () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.click();
+    expect(get(instance.open)).toBe(true);
+    wrapper.classList.add('hiding');
+    anchor.dispatchEvent(new Event('transitionstart'));
+    expect(get(instance.open)).toBe(false);
+    wrapper.classList.remove('hiding');
+    await vi.advanceTimersByTimeAsync(100);
+  });
+
+  it('should not hide popup on transitionstart when no hiding ancestor', async () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.click();
+    anchor.dispatchEvent(new Event('transitionstart'));
+    expect(get(instance.open)).toBe(true);
+    await vi.advanceTimersByTimeAsync(100);
+  });
+});
+
+describe('Popup - IntersectionObserver on anchor (lines 179-180)', () => {
+  /** @type {HTMLButtonElement} */
+  let anchor;
+  /** @type {HTMLDialogElement} */
+  let popup;
+  /** @type {typeof globalThis.IntersectionObserver} */
+  let OrigIObserver;
+  /** @type {((entries: any[]) => void)[]} */
+  let ioCallbacks;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    anchor = /** @type {HTMLButtonElement} */ (document.createElement('button'));
+    popup = /** @type {HTMLDialogElement} */ (document.createElement('dialog'));
+    document.body.appendChild(anchor);
+    document.body.appendChild(popup);
+    ioCallbacks = [];
+    OrigIObserver = globalThis.IntersectionObserver;
+
+    // Stub IntersectionObserver to capture callbacks
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    globalThis.IntersectionObserver = /** @type {any} */ (
+      class {
+        /** @param {(entries: any[]) => void} cb */
+        constructor(cb) {
+          ioCallbacks.push(cb);
+        }
+
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    );
+  });
+
+  afterEach(async () => {
+    anchor.remove();
+    popup.remove();
+    globalThis.IntersectionObserver = OrigIObserver;
+    await vi.runAllTimersAsync();
+    vi.useRealTimers();
+  });
+
+  it('should hide when anchor becomes non-intersecting while popup is open', async () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    anchor.click();
+    expect(get(instance.open)).toBe(true);
+
+    // ioCallbacks[0] = position observer; ioCallbacks[1] = anchor visibility observer
+    const anchorVisibilityCallback = ioCallbacks[1];
+
+    anchorVisibilityCallback([{ isIntersecting: false }]);
+    expect(get(instance.open)).toBe(false);
+    await vi.advanceTimersByTimeAsync(100);
+  });
+
+  it('should not hide when anchor leaves viewport but popup is already closed', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+    // popup is not opened
+    const anchorVisibilityCallback = ioCallbacks[1];
+
+    anchorVisibilityCallback([{ isIntersecting: false }]);
+    expect(get(instance.open)).toBe(false);
+  });
+});
+describe('Popup - IntersectionObserver position callback (lines 35-132)', () => {
+  /** @type {HTMLButtonElement} */
+  let anchor;
+  /** @type {HTMLDialogElement} */
+  let popup;
+  /** @type {HTMLDivElement} */
+  let content;
+  /** @type {typeof globalThis.IntersectionObserver} */
+  let OrigIObserver;
+  /** @type {((entries: any[]) => void)[]} */
+  let ioCallbacks;
+
+  beforeEach(() => {
+    anchor = /** @type {HTMLButtonElement} */ (document.createElement('button'));
+    popup = /** @type {HTMLDialogElement} */ (document.createElement('dialog'));
+    // The position callback accesses popup.querySelector('.content')
+    content = document.createElement('div');
+    content.className = 'content';
+    popup.appendChild(content);
+    document.body.appendChild(anchor);
+    document.body.appendChild(popup);
+
+    ioCallbacks = [];
+    OrigIObserver = globalThis.IntersectionObserver;
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    globalThis.IntersectionObserver = /** @type {any} */ (
+      class {
+        /** @param {(entries: any[]) => void} cb */
+        constructor(cb) {
+          ioCallbacks.push(cb);
+        }
+
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    );
+  });
+
+  afterEach(() => {
+    anchor.remove();
+    popup.remove();
+    globalThis.IntersectionObserver = OrigIObserver;
+  });
+
+  /**
+   * Helper to create a fake intersection entry.
+   */
+  const makeEntry = ({
+    top = 100,
+    bottom = 150,
+    left = 50,
+    right = 300,
+    vw = 800,
+    vh = 600,
+  } = {}) => ({
+    intersectionRect: { top, bottom, left, right, width: right - left, height: bottom - top },
+    rootBounds: { width: vw, height: vh },
+  });
+
+  it('should set popup style on intersection (bottom-left, normal case)', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    // ioCallbacks[0] is the position observer
+    ioCallbacks[0]([makeEntry()]);
+
+    // Style should be updated with computed inset
+    const style = get(instance.style);
+
+    expect(style.inset).toBeTruthy();
+    expect(style.zIndex).toBe(1000);
+  });
+
+  it('should skip entry when intersectionRect is null', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    ioCallbacks[0]([{ intersectionRect: null, rootBounds: null }]);
+
+    // Style remains at default (no crash)
+    const style = get(instance.style);
+
+    expect(style.inset).toBeUndefined();
+  });
+
+  it('should switch position to top-left when content overflows bottom', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    // contentHeight > bottomMargin AND topMargin > bottomMargin → switches to top-
+    Object.defineProperty(content, 'scrollHeight', { configurable: true, get: () => 500 });
+    ioCallbacks[0]([makeEntry({ top: 400, bottom: 450, left: 50, right: 300, vw: 800, vh: 500 })]);
+
+    const style = get(instance.style);
+
+    // Position changed to top-left → bottom should be calculated (not auto)
+    expect(style.inset).not.toBeUndefined();
+  });
+
+  it('should switch position to bottom-right when content overflows to the right', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    // contentWidth > remaining right space → switch to bottom-right
+    Object.defineProperty(content, 'scrollWidth', { configurable: true, get: () => 760 });
+    ioCallbacks[0]([makeEntry({ left: 50, right: 300 })]);
+
+    const style = get(instance.style);
+
+    expect(style.inset).not.toBeUndefined();
+  });
+
+  it('should switch position to bottom-left when content overflows to the left', () => {
+    const instance = activatePopup(anchor, popup, 'bottom-right');
+
+    // contentWidth causes left edge to be < 8 → switch to bottom-left
+    Object.defineProperty(content, 'scrollWidth', { configurable: true, get: () => 290 });
+    ioCallbacks[0]([makeEntry({ left: 50, right: 100 })]);
+
+    const style = get(instance.style);
+
+    expect(style.inset).not.toBeUndefined();
+  });
+
+  it('should normalize RTL position when document.dir is rtl', () => {
+    document.documentElement.setAttribute('dir', 'rtl');
+
+    const instance = activatePopup(anchor, popup, 'bottom-left');
+
+    ioCallbacks[0]([makeEntry()]);
+
+    const style = get(instance.style);
+
+    expect(style.inset).not.toBeUndefined();
+    document.documentElement.removeAttribute('dir');
+  });
+});
+describe('Popup - ResizeObserver callback (lines 223-224)', () => {
+  /** @type {HTMLButtonElement} */
+  let anchor;
+  /** @type {HTMLDialogElement} */
+  let popup;
+  /** @type {typeof globalThis.ResizeObserver} */
+  let OrigRObs;
+  /** @type {((entries: any[]) => void) | undefined} */
+  let resizeCallback;
+  /** @type {typeof globalThis.IntersectionObserver | undefined} */
+  let _OrigIO;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    anchor = /** @type {HTMLButtonElement} */ (document.createElement('button'));
+    popup = /** @type {HTMLDialogElement} */ (document.createElement('dialog'));
+    document.body.appendChild(anchor);
+    document.body.appendChild(popup);
+    OrigRObs = globalThis.ResizeObserver;
+
+    // Stub ResizeObserver to capture its callback
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    globalThis.ResizeObserver = /** @type {any} */ (
+      class {
+        /** @param {any} cb */
+        constructor(cb) {
+          resizeCallback = cb;
+        }
+
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    );
+
+    // Also stub IntersectionObserver to avoid errors
+    const OrigIO = globalThis.IntersectionObserver;
+
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    globalThis.IntersectionObserver = /** @type {any} */ (
+      class {
+        // eslint-disable-next-line no-useless-constructor, no-empty-function
+        constructor() {}
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    );
+
+    _OrigIO = OrigIO;
+  });
+
+  afterEach(async () => {
+    anchor.remove();
+    popup.remove();
+    globalThis.ResizeObserver = OrigRObs;
+    globalThis.IntersectionObserver = /** @type {any} */ (_OrigIO);
+    await vi.runAllTimersAsync();
+    vi.useRealTimers();
+  });
+
+  it('should schedule checkPosition via RAF when resize is observed', async () => {
+    activatePopup(anchor, popup, 'bottom-left');
+
+    // Trigger the ResizeObserver callback (lines 223-224: cancelAnimationFrame +
+    // requestAnimationFrame)
+    /** @type {any} */ (resizeCallback)?.([]);
+    await vi.advanceTimersByTimeAsync(16); // flush rAF
+    // No crash; just verifies these lines execute
+    expect(true).toBe(true);
+  });
+});

package/dist/services/select.test.d.ts

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

package/dist/services/select.test.js

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+import { getSelectedItemDetail } from './select.svelte.js';
+
+/**
+ * Helper to create a minimal element-like object with the given dataset values.
+ * @param {Record<string, string>} dataset Dataset key-value pairs.
+ * @returns {HTMLElement} A fake element with the given dataset.
+ */
+const makeElement = (dataset) => /** @type {HTMLElement} */ (/** @type {unknown} */ ({ dataset }));
+
+describe('getSelectedItemDetail', () => {
+  it('should return a string value by default', () => {
+    const el = makeElement({ value: 'hello', name: 'field', label: 'Hello' });
+    const detail = getSelectedItemDetail(el);
+
+    expect(detail.type).toBe('string');
+    expect(detail.value).toBe('hello');
+    expect(detail.name).toBe('field');
+    expect(detail.label).toBe('Hello');
+    expect(detail.target).toBe(el);
+  });
+
+  it('should coerce value to empty string when value is absent and type is string', () => {
+    const el = makeElement({ name: 'field' });
+    const detail = getSelectedItemDetail(el);
+
+    expect(detail.type).toBe('string');
+    expect(detail.value).toBe('');
+  });
+
+  it('should return a number value when type is number', () => {
+    const el = makeElement({ type: 'number', value: '42' });
+    const detail = getSelectedItemDetail(el);
+
+    expect(detail.type).toBe('number');
+    expect(detail.value).toBe(42);
+  });
+
+  it('should return null for a non-numeric value when type is number', () => {
+    const el = makeElement({ type: 'number', value: 'abc' });
+    const detail = getSelectedItemDetail(el);
+
+    expect(detail.value).toBeNull();
+  });
+
+  it('should return true for "true" when type is boolean', () => {
+    const el = makeElement({ type: 'boolean', value: 'true' });
+    const detail = getSelectedItemDetail(el);
+
+    expect(detail.type).toBe('boolean');
+    expect(detail.value).toBe(true);
+  });
+
+  it('should return false for any non-"true" string when type is boolean', () => {
+    const el = makeElement({ type: 'boolean', value: 'false' });
+    const detail = getSelectedItemDetail(el);
+
+    expect(detail.value).toBe(false);
+  });
+
+  it('should leave value unchanged for an unknown/custom type (else-if string branch false)', () => {
+    const el = makeElement({ type: 'date', value: '2024-01-01' });
+    const detail = getSelectedItemDetail(el);
+
+    expect(detail.type).toBe('date');
+    // value is the raw dataset string when type is not string/number/boolean
+    expect(detail.value).toBe('2024-01-01');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.35.0",
+  "version": "0.35.2",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -29,18 +29,19 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.54.0",
+    "@sveltejs/kit": "^2.55.0",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@vitest/coverage-v8": "^4.1.0",
     "cspell": "^9.7.0",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^62.7.1",
+    "eslint-plugin-jsdoc": "^62.8.0",
     "eslint-plugin-svelte": "^2.46.1",
-    "oxlint": "^1.53.0",
+    "happy-dom": "^20.8.4",
+    "oxlint": "^1.56.0",
     "postcss": "^8.5.8",
     "postcss-html": "^1.8.1",
     "prettier": "^3.8.1",
@@ -49,12 +50,12 @@
     "stylelint": "^17.4.0",
     "stylelint-config-recommended-scss": "^17.0.0",
     "stylelint-scss": "^7.0.0",
-    "svelte": "^5.53.11",
+    "svelte": "^5.54.0",
     "svelte-check": "^4.4.5",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "vite": "^8.0.0",
+    "vitest": "^4.1.0"
   },
   "exports": {
     ".": {