@sveltia/ui 0.27.7 → 0.27.9

package/dist/components/scroll/infinite-scroll.svelte

@@ -11,8 +11,9 @@
    * @typedef {object} Props
    * @property {any[]} items Item list.
    * @property {string} itemKey Item key used for the `each` loop.
-   * @property {number} [itemChunkSize] Number of items to be loaded at once.
-   * @property {Snippet<[any]>} renderItem Snippet to render each item.
+   * @property {number} [itemChunkSize] Number of items to be loaded at once. Defaults to 25.
+   * @property {Snippet<[any, number]>} renderItem Snippet to render each item. The snippet receives
+   * the item and its index as parameters.
    */
 
   /** @type {Props} */
@@ -50,8 +51,8 @@
   });
 </script>
 
-{#each items.slice(0, loadedItemSize) as item (item[itemKey])}
-  {@render renderItem(item)}
+{#each items.slice(0, loadedItemSize) as item, index (item[itemKey] ?? index)}
+  {@render renderItem(item, index)}
 {/each}
 
 {#if loading}

package/dist/components/scroll/infinite-scroll.svelte.d.ts

@@ -17,13 +17,14 @@ declare const InfiniteScroll: import("svelte").Component<{
      */
     itemKey: string;
     /**
-     * Number of items to be loaded at once.
+     * Number of items to be loaded at once. Defaults to 25.
      */
     itemChunkSize?: number | undefined;
     /**
-     * Snippet to render each item.
+     * Snippet to render each item. The snippet receives
+     * the item and its index as parameters.
      */
-    renderItem: Snippet<[any]>;
+    renderItem: Snippet<[any, number]>;
 }, {}, "">;
 type Props = {
     /**
@@ -35,12 +36,13 @@ type Props = {
      */
     itemKey: string;
     /**
-     * Number of items to be loaded at once.
+     * Number of items to be loaded at once. Defaults to 25.
      */
     itemChunkSize?: number | undefined;
     /**
-     * Snippet to render each item.
+     * Snippet to render each item. The snippet receives
+     * the item and its index as parameters.
      */
-    renderItem: Snippet<[any]>;
+    renderItem: Snippet<[any, number]>;
 };
 import type { Snippet } from 'svelte';

package/dist/components/util/app-shell.svelte

@@ -93,13 +93,24 @@
   ondragover={(event) => event.preventDefault()}
   ondrop={(event) => event.preventDefault()}
   oncontextmenu={(event) => {
-    // Enable the native context menu only in the developer mode or on text fields
+    // Allow context menu in developer mode
+    if (document.documentElement.matches('[data-env="dev"]')) {
+      return;
+    }
+
+    // eslint-disable-next-line prefer-destructuring
+    const target = /** @type {HTMLElement} */ (event.target);
+
+    // Allow context menu on text inputs and contentEditable elements
     if (
-      !document.documentElement.matches('[data-env="dev"]') &&
-      !(/** @type {HTMLElement} */ (event.target)?.matches('input[type="text"], textarea'))
+      document.documentElement.matches('[data-env="dev"]') ||
+      (target?.matches('input, textarea') && 'maxLength' in target) ||
+      /** @type {HTMLElement} */ (target?.closest('[role="textbox"]'))?.contentEditable === 'true'
     ) {
-      event.preventDefault();
+      return;
     }
+
+    event.preventDefault();
   }}
 >
   {@render children?.()}

package/dist/services/group.svelte.js

@@ -6,6 +6,26 @@ import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
 import { getSelectedItemDetail } from './select.svelte';
 
+/**
+ * Normalize the given string for search value comparison. Since `transliterate` is slow, we only
+ * apply basic normalization.
+ * @param {string} value Original value.
+ * @returns {string} Normalized value.
+ * @todo Move this to @sveltia/utils.
+ */
+const normalize = (value) => {
+  value = value.trim();
+
+  if (!value) {
+    return '';
+  }
+
+  return value
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .toLocaleLowerCase();
+};
+
 /**
  * @type {{ [role: string]: {
  * orientation: 'vertical' | 'horizontal',
@@ -464,18 +484,18 @@ class Group {
    * @param {{ searchTerms: string }} params Updated params.
    */
   onUpdate({ searchTerms }) {
-    const terms = searchTerms.trim().toLocaleLowerCase();
+    const terms = normalize(searchTerms);
     const _terms = terms ? terms.split(/\s+/) : [];
 
     const matched = this.allMembers
       .map((member) => {
-        const searchValue =
-          (
-            member.dataset.searchValue ??
+        const searchValue = normalize(
+          member.dataset.searchValue ??
             member.dataset.label ??
             member.querySelector('.label')?.textContent ??
-            member.textContent
-          )?.toLocaleLowerCase() ?? '';
+            member.textContent ??
+            '',
+        );
 
         const hidden = !_terms.every((term) => searchValue.includes(term));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.27.7",
+  "version": "0.27.9",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/kit": "^2.26.1",
+    "@sveltejs/kit": "^2.27.0",
     "@sveltejs/package": "^2.4.0",
     "@sveltejs/vite-plugin-svelte": "6.1.0",
     "cspell": "^9.2.0",
@@ -56,18 +56,18 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^51.4.1",
+    "eslint-plugin-jsdoc": "^52.0.2",
     "eslint-plugin-svelte": "^2.46.1",
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "sass": "^1.89.2",
-    "stylelint": "^16.22.0",
+    "stylelint": "^16.23.0",
     "stylelint-config-recommended-scss": "^15.0.1",
     "stylelint-scss": "^6.12.1",
-    "svelte": "5.37.0",
-    "svelte-check": "^4.3.0",
+    "svelte": "5.37.3",
+    "svelte-check": "^4.3.1",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",