@sveltia/ui 0.13.1 → 0.14.0

package/package/components/grid/grid.svelte

@@ -20,6 +20,10 @@
    * @type {boolean}
    */
   export let multiple = false;
+  /**
+   * Whether to select a row by clicking on it.
+   */
+  export let clickToSelect = true;
 
   /** @type {HTMLElement | undefined} */
   export let element = undefined;
@@ -33,7 +37,7 @@
   aria-multiselectable={multiple}
   {...$$restProps}
   bind:this={element}
-  use:activateGroup
+  use:activateGroup={{ clickToSelect }}
   on:change={(/** @type {CustomEvent} */ event) => {
     dispatch('change', event.detail);
   }}

package/package/components/grid/grid.svelte.d.ts

@@ -10,6 +10,7 @@ export default class Grid extends SvelteComponent<{
     [x: string]: any;
     class?: string | undefined;
     element?: HTMLElement | undefined;
+    clickToSelect?: boolean | undefined;
     multiple?: boolean | undefined;
 }, {
     change: CustomEvent<any>;
@@ -28,6 +29,7 @@ declare const __propDef: {
         [x: string]: any;
         class?: string | undefined;
         element?: HTMLElement | undefined;
+        clickToSelect?: boolean | undefined;
         multiple?: boolean | undefined;
     };
     events: {

package/package/components/select/combobox.svelte

@@ -87,7 +87,6 @@
    */
   const onChange = () => {
     const selected = popupComponent?.content?.querySelector(selectedSelector);
-
     const target = /** @type {HTMLButtonElement} */ (
       popupComponent?.content?.querySelector(`[role="option"][value="${value}"]`)
     );

package/package/components/slider/slider.svelte

@@ -87,7 +87,6 @@
 
     const fromIndex = positionList.findLastIndex((s) => s <= diff);
     const toIndex = positionList.findIndex((s) => diff <= s);
-
     const index =
       Math.abs(positionList[fromIndex] - diff) < Math.abs(positionList[toIndex] - diff)
         ? fromIndex

package/package/components/text-editor/core.js

@@ -150,6 +150,7 @@ export const initEditor = () => {
     TOGGLE_LINK_COMMAND,
     (payload) => {
       toggleLink(typeof payload === 'string' ? payload : null);
+
       return true;
     },
     COMMAND_PRIORITY_NORMAL,
@@ -159,6 +160,7 @@ export const initEditor = () => {
     INSERT_UNORDERED_LIST_COMMAND,
     () => {
       insertList(editor, 'bullet');
+
       return true;
     },
     COMMAND_PRIORITY_NORMAL,
@@ -168,6 +170,7 @@ export const initEditor = () => {
     INSERT_ORDERED_LIST_COMMAND,
     () => {
       insertList(editor, 'number');
+
       return true;
     },
     COMMAND_PRIORITY_NORMAL,

package/package/components/text-editor/index.js

@@ -74,17 +74,14 @@ export const availableButtons = {
     inline: false,
   },
 };
-
 /**
  * @type {TextEditorFormatType[]}
  */
 export const textFormatButtonTypes = ['bold', 'italic', 'code'];
-
 /**
  * @type {TextEditorInlineType[]}
  */
 export const inlineButtonTypes = [...textFormatButtonTypes, 'link'];
-
 /**
  * @type {TextEditorBlockType[]}
  */

package/package/components/text-editor/text-editor.svelte

@@ -4,7 +4,7 @@
 -->
 <script>
   import { generateElementId } from '@sveltia/utils/element';
-  import { onMount, setContext } from 'svelte';
+  import { setContext } from 'svelte';
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
   import Alert from '../alert/alert.svelte';
@@ -70,26 +70,65 @@
   const editorId = writable(generateElementId('editor'));
   const useRichText = writable(modes[0] === 'rich-text');
   const hasConverterError = writable(false);
+  let inputValue = '';
   let showConverterError = false;
 
   /**
-   * Convert the Markdown {@link value} to Lexical nodes. Disable the rich text mode and restore the
-   * original value when there is an error while conversion.
+   * Convert the Markdown {@link inputValue} to Lexical nodes. Disable the rich text mode and
+   * restore the original value when there is an error while conversion.
    */
   const convertMarkdown = async () => {
-    const originalValue = value;
+    const originalValue = inputValue;
 
     try {
       // We should avoid an empty editor; there should be at least one `<p>`, so give it an empty
       // string if the `value` is `undefined`
       // @see https://github.com/facebook/lexical/issues/2308
-      await convertMarkdownToLexical($editor, value ?? '');
+      await convertMarkdownToLexical($editor, inputValue ?? '');
     } catch {
       $hasConverterError = true;
-      value = originalValue;
+      inputValue = originalValue;
     }
   };
 
+  /**
+   * Update {@link inputValue} based on {@link value}.
+   */
+  const setInputValue = () => {
+    const newValue = value ?? '';
+
+    // Avoid a cycle dependency & infinite loop
+    if (inputValue !== newValue) {
+      inputValue = newValue;
+
+      if ($useRichText) {
+        convertMarkdown();
+      }
+    }
+  };
+
+  /**
+   * Update {@link value} based on {@link inputValue}.
+   */
+  const setCurrentValue = () => {
+    const newValue = inputValue;
+
+    // Avoid a cycle dependency & infinite loop
+    if (value !== newValue) {
+      value = newValue;
+    }
+  };
+
+  $: {
+    void value;
+    setInputValue();
+  }
+
+  $: {
+    void inputValue;
+    setCurrentValue();
+  }
+
   $: {
     if ($hasConverterError) {
       $useRichText = false;
@@ -111,18 +150,12 @@
       convertMarkdown,
     }),
   );
-
-  onMount(() => {
-    if ($useRichText) {
-      convertMarkdown();
-    }
-  });
 </script>
 
 <div role="none" class="sui text-editor" hidden={hidden || undefined} {...$$restProps}>
   <EditorToolbar {disabled} {readonly} />
   <LexicalRoot
-    bind:value
+    bind:value={inputValue}
     hidden={!$useRichText || hidden}
     {disabled}
     {readonly}
@@ -131,7 +164,7 @@
   />
   <TextArea
     autoResize={true}
-    bind:value
+    bind:value={inputValue}
     {flex}
     hidden={$useRichText || hidden}
     {disabled}

package/package/components/text-field/text-area.svelte

@@ -121,6 +121,12 @@ textarea,
   font-family: var(--sui-textbox-font-family);
   font-size: var(--sui-textbox-font-size);
   line-height: var(--sui-textbox-multiline-line-height);
+  font-weight: var(--sui-textbox-font-weight, normal);
+  text-align: var(--sui-textbox-text-align, left);
+  text-indent: var(--sui-textbox-text-indent, 0);
+  text-transform: var(--sui-textbox-text-transform, none);
+  letter-spacing: var(--sui-textbox-letter-spacing, normal);
+  word-spacing: var(--sui-word-spacing-normal, normal);
   transition: all 200ms;
 }
 textarea.resizing,

package/package/components/text-field/text-input.svelte

@@ -166,6 +166,7 @@ input {
   text-indent: var(--sui-textbox-text-indent, 0);
   text-transform: var(--sui-textbox-text-transform, none);
   letter-spacing: var(--sui-textbox-letter-spacing, normal);
+  word-spacing: var(--sui-word-spacing-normal, normal);
   transition: all 200ms;
 }
 input:focus {

package/package/components/util/modal.svelte

@@ -228,6 +228,9 @@ dialog:not(.open) {
   transition-duration: 400ms;
   opacity: 0;
 }
+dialog[hidden] {
+  transition-duration: 1ms !important;
+}
 dialog:not(.active) {
   pointer-events: none !important;
 }

package/package/services/group.d.ts

@@ -1 +1 @@
-export function activateGroup(parent: HTMLElement, _params?: object | undefined): import('svelte/action').ActionReturn;
+export function activateGroup(parent: HTMLElement, params?: object | undefined): import('svelte/action').ActionReturn;

package/package/services/group.js

@@ -62,9 +62,11 @@ class Group {
   /**
    * Initialize a new `Group` instance.
    * @param {HTMLElement} parent - Parent element.
+   * @param {object} [options] - Options.
+   * @param {boolean} [options.clickToSelect] - Whether to select an item by clicking on it.
    * @todo Check for added elements probably with `MutationObserver`.
    */
-  constructor(parent) {
+  constructor(parent, { clickToSelect = true } = {}) {
     parent.dispatchEvent(new CustomEvent('initializing'));
 
     this.parent = parent;
@@ -72,6 +74,7 @@ class Group {
     this.multi = this.parent.getAttribute('aria-multiselectable') === 'true';
     this.id = generateElementId(this.role);
     this.parentGroupSelector = `[role="group"], [role="${this.role}"]`;
+    this.clickToSelect = clickToSelect;
 
     const { orientation, childRoles, childSelectedAttr, focusChild, selectFirst } =
       config[this.role];
@@ -103,7 +106,6 @@ class Group {
       const isSelected = defaultSelected
         ? element === defaultSelected
         : this.selectFirst && index === 0;
-
       const controlTarget = /** @type {HTMLElement | null} */ (
         document.querySelector(`#${element.getAttribute('aria-controls')}`)
       );
@@ -219,7 +221,6 @@ class Group {
     const targetRole = newTarget.getAttribute('role');
     const targetParent = newTarget.closest(this.parentGroupSelector);
     const selectByClick = event.type === 'click';
-
     const selectByKeydown =
       event.type === 'keydown' && /** @type {KeyboardEvent} */ (event).key === ' ';
 
@@ -335,12 +336,11 @@ class Group {
   onClick(event) {
     // eslint-disable-next-line prefer-destructuring
     const target = /** @type {HTMLElement} */ (event.target);
-
     const newTarget = target.matches(this.selector)
       ? target
       : /** @type {HTMLElement | null} */ (target.closest(this.selector));
 
-    if (!newTarget || event.button !== 0) {
+    if (!newTarget || event.button !== 0 || !this.clickToSelect) {
       return;
     }
 
@@ -362,7 +362,6 @@ class Group {
     // eslint-disable-next-line prefer-destructuring
     const target = /** @type {HTMLElement} */ (event.target);
     const { allMembers, activeMembers } = this;
-
     /** @type {HTMLElement | undefined} */
     const currentTarget = (() => {
       if (!this.focusChild) {
@@ -461,7 +460,6 @@ class Group {
   onUpdate({ searchTerms }) {
     const terms = searchTerms.trim().toLocaleLowerCase();
     const _terms = terms ? terms.split(/\s+/) : [];
-
     const matched = this.allMembers
       .map((member) => {
         const searchValue =
@@ -471,7 +469,6 @@ class Group {
             member.querySelector('.label')?.textContent ??
             member.textContent
           )?.toLocaleLowerCase() ?? '';
-
         const hidden = !_terms.every((term) => searchValue.includes(term));
 
         member.dispatchEvent(new CustomEvent('toggle', { detail: { hidden } }));
@@ -489,20 +486,20 @@ class Group {
 /**
  * Activate a new group.
  * @param {HTMLElement} parent - Parent element.
- * @param {object} [_params] - Action params.
+ * @param {object} [params] - Action params.
  * @returns {import('svelte/action').ActionReturn} Action.
  */
 // eslint-disable-next-line no-unused-vars
-export const activateGroup = (parent, _params) => {
-  const group = new Group(parent);
+export const activateGroup = (parent, params) => {
+  const group = new Group(parent, params);
 
   return {
     /**
      * Called whenever the params are updated.
-     * @param {any} params - Updated params.
+     * @param {any} newParams - Updated params.
      */
-    update(params) {
-      group.onUpdate(params);
+    update(newParams) {
+      group.onUpdate(newParams);
     },
   };
 };

package/package/services/popup.d.ts

@@ -48,5 +48,9 @@ declare class Popup {
      * Check the position of the anchor element.
      */
     checkPosition(): void;
+    /**
+     * Hide the popup immediately (when the anchor is being hidden).
+     */
+    hideImmediately(): Promise<void>;
 }
 export {};

package/package/services/popup.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-nested-ternary */
 
 import { generateElementId } from '@sveltia/utils/element';
+import { sleep } from '@sveltia/utils/misc';
 import { get, writable } from 'svelte/store';
 
 /**
@@ -27,7 +28,6 @@ class Popup {
 
       const { scrollHeight: contentHeight, scrollWidth: contentWidth } =
         /** @type {HTMLElement} */ (this.popupElement.querySelector('.content'));
-
       const topMargin = intersectionRect.top - 8;
       const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
       let { position } = this;
@@ -58,27 +58,22 @@ class Popup {
         : position.endsWith('-top')
           ? `${Math.round(intersectionRect.top)}px`
           : 'auto';
-
       const right = position.startsWith('left-')
         ? `${Math.round(rootBounds.width - intersectionRect.left)}px`
         : position.endsWith('-right')
           ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
           : 'auto';
-
       const bottom = position.startsWith('top-')
         ? `${Math.round(rootBounds.height - intersectionRect.top)}px`
         : position.endsWith('-bottom')
           ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
           : 'auto';
-
       const left = position.startsWith('right-')
         ? `${Math.round(intersectionRect.right)}px`
         : position.endsWith('-left')
           ? `${Math.round(intersectionRect.left)}px`
           : 'auto';
-
       const anchorPopup = /** @type {HTMLElement} */ (this.anchorElement.closest('.popup'));
-
       const style = {
         inset: [top, right, bottom, left].join(' '),
         zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,
@@ -127,6 +122,18 @@ class Popup {
       }
     });
 
+    this.anchorElement.addEventListener('transitionstart', () => {
+      if (this.anchorElement.closest('.hiding, .hidden, [hidden]')) {
+        this.hideImmediately();
+      }
+    });
+
+    new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting && get(this.open)) {
+        this.hideImmediately();
+      }
+    }).observe(this.anchorElement);
+
     // Close the popup when the backdrop, a menu item or an option is clicked
     this.popupElement.addEventListener('click', (event) => {
       event.stopPropagation();
@@ -188,6 +195,16 @@ class Popup {
     this.observer.unobserve(this.positionBaseElement);
     this.observer.observe(this.positionBaseElement);
   }
+
+  /**
+   * Hide the popup immediately (when the anchor is being hidden).
+   */
+  async hideImmediately() {
+    this.popupElement.hidden = true;
+    this.open.set(false);
+    await sleep(50);
+    this.popupElement.hidden = false;
+  }
 }
 
 /**

package/package/typedef.d.ts

@@ -44,7 +44,7 @@ type TextEditorState = {
      */
     enabledButtons: (TextEditorBlockType | TextEditorInlineType)[];
     /**
-     * Function to trigger the Lexical converter.
+     * - Function to trigger the Lexical converter.
      */
     convertMarkdown: Function;
 };

package/package/typedef.js

@@ -41,5 +41,5 @@
  * error while converting Markdown to Lexical nodes.
  * @property {(TextEditorBlockType | TextEditorInlineType)[]} enabledButtons - Enabled buttons for
  * the editor.
- * @property {Function} convertMarkdown Function to trigger the Lexical converter.
+ * @property {Function} convertMarkdown - Function to trigger the Lexical converter.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -23,47 +23,47 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "@lexical/code": "^0.14.5",
-    "@lexical/history": "^0.14.5",
-    "@lexical/link": "^0.14.5",
-    "@lexical/list": "^0.14.5",
-    "@lexical/markdown": "^0.14.5",
-    "@lexical/rich-text": "^0.14.5",
-    "@lexical/selection": "^0.14.5",
-    "@lexical/table": "^0.14.5",
-    "@lexical/utils": "^0.14.5",
-    "@sveltia/utils": "^0.1.1",
-    "lexical": "^0.14.5",
-    "svelte": "^4.2.15"
+    "@lexical/code": "^0.15.0",
+    "@lexical/history": "^0.15.0",
+    "@lexical/link": "^0.15.0",
+    "@lexical/list": "^0.15.0",
+    "@lexical/markdown": "^0.15.0",
+    "@lexical/rich-text": "^0.15.0",
+    "@lexical/selection": "^0.15.0",
+    "@lexical/table": "^0.15.0",
+    "@lexical/utils": "^0.15.0",
+    "@sveltia/utils": "^0.2.0",
+    "lexical": "^0.15.0",
+    "svelte": "^4.2.16"
   },
   "devDependencies": {
-    "@playwright/test": "^1.43.1",
+    "@playwright/test": "^1.44.0",
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.5.7",
     "@sveltejs/package": "^2.3.1",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
-    "cspell": "^8.7.0",
+    "cspell": "^8.8.1",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.2.3",
-    "eslint-plugin-svelte": "^2.38.0",
+    "eslint-plugin-jsdoc": "^48.2.4",
+    "eslint-plugin-svelte": "^2.39.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
-    "postcss-html": "^1.6.0",
+    "postcss-html": "^1.7.0",
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.3",
-    "sass": "^1.75.0",
-    "stylelint": "^16.4.0",
+    "sass": "^1.77.1",
+    "stylelint": "^16.5.0",
     "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-scss": "^6.2.1",
-    "svelte-check": "^3.7.0",
+    "stylelint-scss": "^6.3.0",
+    "svelte-check": "^3.7.1",
     "svelte-i18n": "^4.0.0",
     "svelte-preprocess": "^5.1.4",
     "tslib": "^2.6.2",
-    "vite": "^5.2.10",
-    "vitest": "^1.5.2"
+    "vite": "^5.2.11",
+    "vitest": "^1.6.0"
   },
   "exports": {
     "./package.json": "./package.json",