@sveltia/ui 0.13.2 → 0.15.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/listbox/option.svelte

@@ -44,9 +44,14 @@
    * @type {string}
    */
   export let searchValue = label;
+  /**
+   * Whether to wrap a long label.
+   * @type {boolean}
+   */
+  export let wrap = false;
 </script>
 
-<div role="none" class="sui option {className}" hidden={hidden || undefined}>
+<div role="none" class="sui option {className}" class:wrap hidden={hidden || undefined}>
   <Button
     role="option"
     tabindex="-1"
@@ -103,9 +108,15 @@
   border-radius: var(--sui-option-border-radius);
   padding: var(--sui-option-padding);
   width: 100%;
-  height: var(--sui-option-height);
+  height: auto;
+  min-height: var(--sui-option-height);
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
+.option.wrap :global(button) {
+  white-space: normal;
+}
 .option :global(.focused),
 .option :global(button:hover) {
   color: var(--sui-highlight-foreground-color);

package/package/components/listbox/option.svelte.d.ts

@@ -15,6 +15,7 @@ export default class Option extends SvelteComponent<{
     hidden?: boolean | undefined;
     selected?: boolean | undefined;
     searchValue?: string | undefined;
+    wrap?: boolean | undefined;
 }, {
     click: MouseEvent;
     dblclick: MouseEvent;
@@ -53,6 +54,7 @@ declare const __propDef: {
         hidden?: boolean | undefined;
         selected?: boolean | undefined;
         searchValue?: string | undefined;
+        wrap?: boolean | undefined;
     };
     events: {
         click: MouseEvent;

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/app-shell.svelte

@@ -194,7 +194,7 @@
   --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
   --sui-control-font-family: var(--sui-font-family-default);
   --sui-control-font-size: var(--sui-font-size-default);
-  --sui-control-line-height: var(--sui-line-height-default);
+  --sui-control-line-height: var(--sui-line-height-compact);
   --sui-button-small-border-radius: var(--sui-control-small-border-radius);
   --sui-button-small-padding: var(--sui-control-small-padding);
   --sui-button-small-height: var(--sui-control-small-height);
@@ -211,7 +211,8 @@
   --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-checkbox-background-color: var(--sui-control-background-color);
   --sui-option-border-radius: var(--sui-control-medium-border-radius);
-  --sui-option-padding: var(--sui-control-medium-padding);
+  --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
+    calc((var(--sui-control-medium-height) / 2));
   --sui-option-height: var(--sui-control-medium-height);
   --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
   --sui-listbox-border-color: var(--sui-control-border-color);

package/package/components/util/popup.svelte

@@ -137,7 +137,8 @@
     class:touch
     style:inset={$style.inset}
     style:z-index={$style.zIndex}
-    style:min-width={$style.width}
+    style:width={$style.width}
+    style:min-width={$style.minWidth}
     style:max-height={$style.height}
     style:visibility={$style.inset ? undefined : 'hidden'}
     bind:this={content}

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.js

@@ -26,9 +26,8 @@ class Popup {
         return;
       }
 
-      const { scrollHeight: contentHeight, scrollWidth: contentWidth } =
-        /** @type {HTMLElement} */ (this.popupElement.querySelector('.content'));
-
+      const content = /** @type {HTMLElement} */ (this.popupElement.querySelector('.content'));
+      const { scrollHeight: contentHeight, scrollWidth: contentWidth } = content;
       const topMargin = intersectionRect.top - 8;
       const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
       let { position } = this;
@@ -59,31 +58,27 @@ 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,
-        width: `${Math.round(intersectionRect.width)}px`,
+        width: content.matches('.menu') ? 'auto' : `${Math.round(intersectionRect.width)}px`,
+        minWidth: `${Math.round(intersectionRect.width)}px`,
         height: height ? `${Math.round(height)}px` : 'auto',
       };
 
@@ -176,6 +171,11 @@ class Popup {
 
       this.anchorElement.setAttribute('aria-expanded', String(open));
     });
+
+    // Update the popup width when the base element is resized
+    new ResizeObserver(() => {
+      this.checkPosition();
+    }).observe(this.positionBaseElement);
   }
 
   /**

package/package/styles/variables.scss

@@ -184,7 +184,7 @@
   --sui-control-background-color: hsl(var(--sui-background-color-4-hsl));
   --sui-control-font-family: var(--sui-font-family-default);
   --sui-control-font-size: var(--sui-font-size-default);
-  --sui-control-line-height: var(--sui-line-height-default);
+  --sui-control-line-height: var(--sui-line-height-compact);
   // Button
   --sui-button-small-border-radius: var(--sui-control-small-border-radius);
   --sui-button-small-padding: var(--sui-control-small-padding);
@@ -204,7 +204,8 @@
   --sui-checkbox-background-color: var(--sui-control-background-color);
   // Option & menu item
   --sui-option-border-radius: var(--sui-control-medium-border-radius);
-  --sui-option-padding: var(--sui-control-medium-padding);
+  --sui-option-padding: calc((var(--sui-control-medium-height) / 6))
+    calc((var(--sui-control-medium-height) / 2));
   --sui-option-height: var(--sui-control-medium-height);
   // Listbox
   --sui-listbox-border-radius: var(--sui-control-medium-border-radius);

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.2",
+  "version": "0.15.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",