@qtoggle/qui 1.19.11 → 1.20.0-alpha.2

package/.github/workflows/main.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Setup NodeJS
         uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '24'
       - name: Install
         run: |
           npm install && rm -rf docs/* js/lib/* && npx jsdoc -c jsdoc.conf.json
@@ -63,11 +63,22 @@ jobs:
       - name: Setup NodeJS
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
       - name: Publish to NPM
         run: |
-          npm install -g npm@latest &&
-          npm publish
+          npm install -g npm@12
+          version=$(node -p "require('./package.json').version")
+          if [[ "${version}" == *-* ]]; then
+              # A prerelease must not take over the "latest" dist-tag, and npm insists on an explicit
+              # --tag for one. Name the tag after the prerelease identifier: 1.20.0-alpha.1 -> alpha.
+              npm_tag="${version#*-}"
+              npm_tag="${npm_tag%%.*}"
+              echo "Publishing ${version} under dist-tag ${npm_tag}"
+              npm publish --tag "${npm_tag}"
+          else
+              echo "Publishing ${version} under dist-tag latest"
+              npm publish
+          fi
       - name: Fetch python dist folder
         uses: actions/download-artifact@v4
         with:

package/js/forms/common-fields/combo-field.js

@@ -80,7 +80,9 @@ class ComboField extends JQueryUIField {
     /**
      * Tell if a choice matches a search text or not.
      * @param {Object} choice
-     * @param {String} searchText
+     * @param {String|RegExp} searchText the search text, compiled with
+     * {@link qui.utils.string.intelliSearchRegExp} and suitable for passing straight to
+     * {@link qui.utils.string.intelliSearch}
      * @returns {Boolean}
      */
     filterFunc(choice, searchText) {

package/js/index.js

@@ -6,9 +6,8 @@ import * as RequireJSCompat from '$qui/base/require-js-compat.js'
 import $                    from '$qui/lib/jquery.module.js'
 import Logger               from '$qui/lib/logger.module.js'
 
-import '$qui/lib/jquery-ui.js'
+import '$qui/lib/jquery-ui-widget.js'
 import '$qui/lib/jquery.mousewheel.js'
-import '$qui/lib/jquery.longpress.js'
 import '$qui/lib/pep.js'
 
 import {globalize}               from '$qui/base/base.js'

package/js/lists/common-items/icon-label-list-item.js

@@ -38,26 +38,21 @@ class IconLabelListItem extends mix(ListItem).with(IconLabelViewMixin) {
         this.setClickable(selectMode !== Lists.LIST_SELECT_MODE_DISABLED)
     }
 
+    /**
+     * Return the text a search filter is matched against: the label and the sub-label joined in the order in which
+     * they are displayed, so that a filter can span both.
+     * @returns {String}
+     */
     getMatchPhrase() {
         if (this._matchPhrase == null) {
-            this._matchPhrase = []
-
-            /* Consider the entire label as is */
-            if (this.getLabel()) {
-                this._matchPhrase.push(this.getLabel().toLowerCase())
-            }
-            if (this.getSubLabel()) {
-                this._matchPhrase.push(this.getSubLabel().toLowerCase())
-            }
-
-            this._matchPhrase = this._matchPhrase.filter(p => Boolean(p))
+            this._matchPhrase = [this.getLabel(), this.getSubLabel()].filter(Boolean).join(' ')
         }
 
         return this._matchPhrase
     }
 
     isMatch(filter) {
-        return this.getMatchPhrase().some(p => StringUtils.intelliSearch(p, filter) != null)
+        return StringUtils.intelliSearch(this.getMatchPhrase(), filter) != null
     }
 
 

package/js/lists/list-item.js

@@ -93,10 +93,24 @@ class ListItem extends mix().with(ViewMixin) {
     /* Visibility */
 
     /**
-     * Tell if the item is hidden.
+     * Tell if the item is hidden, either because it has been explicitly hidden or because it is currently filtered
+     * out by its list's search filter.
      * @returns {Boolean}
      */
     isHidden() {
+        if (this._list != null && this._list.isItemFilteredOut(this)) {
+            return true
+        }
+
+        return this.isExplicitlyHidden()
+    }
+
+    /**
+     * Tell if the item has been hidden with {@link qui.lists.ListItem#hide}, as opposed to being filtered out by its
+     * list's search filter.
+     * @returns {Boolean}
+     */
+    isExplicitlyHidden() {
         return !this._visibilityManager.isElementVisible()
     }
 
@@ -117,12 +131,12 @@ class ListItem extends mix().with(ViewMixin) {
     /**
      * Tell if item matches a search filter. By default, uses {@link qui.utils.string.intelliSearch} on textual content
      * of the HTML element.
-     * @param {String} filter search filter
+     * @param {String|RegExp} filter search filter, possibly precompiled with
+     * {@link qui.utils.string.intelliSearchRegExp}
      * @returns {Boolean}
      */
     isMatch(filter) {
-        let text = this.getHTML().text().trim().toLowerCase()
-        return StringUtils.intelliSearch(text, filter) != null
+        return StringUtils.intelliSearch(this.getHTML().text().trim(), filter) != null
     }
 
     /**

package/js/lists/list.js

@@ -6,13 +6,23 @@ import {gettext}             from '$qui/base/i18n.js'
 import {mix}                 from '$qui/base/mixwith.js'
 import StockIcon             from '$qui/icons/stock-icon.js'
 import * as Lists            from '$qui/lists/lists.js'
+import * as Theme            from '$qui/theme.js'
+import Debouncer             from '$qui/utils/debouncer.js'
+import * as Gestures         from '$qui/utils/gestures.js'
 import {asap}                from '$qui/utils/misc.js'
-import * as ObjectUtils      from '$qui/utils/object.js'
+import * as StringUtils      from '$qui/utils/string.js'
 import {ProgressViewMixin}   from '$qui/views/common-views/common-views.js'
 import {StructuredViewMixin} from '$qui/views/common-views/common-views.js'
 import ViewMixin             from '$qui/views/view.js'
 
 
+/* Associates item elements with their items. A WeakMap is used rather than jQuery's element data, which would
+ * store the item in an expando on the DOM element itself, creating an item -> element -> item reference cycle. */
+const itemsByElement = new WeakMap()
+
+/* How long to wait after the last keystroke before filtering the list, in milliseconds */
+const SEARCH_FILTER_DELAY = 100
+
 const logger = Logger.get('qui.lists.list')
 
 
@@ -58,6 +68,13 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
         this._addElem = null
         this._searchElem = null
         this._filterInput = null
+
+        /* Search filtering state */
+        this._filteredOutItems = new Set()
+        this._pendingReveal = new Set()
+        this._filterCollapseTimeout = null
+        this._revealFrameHandle = null
+        this._applySearchFilterDebouncer = new Debouncer(() => this._applySearchFilter(), SEARCH_FILTER_DELAY)
     }
 
     makeHTML() {
@@ -82,6 +99,28 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
     makeBody() {
         let bodyDiv = $('<div></div>', {class: 'qui-list-body'})
 
+        /* Item events are delegated to the list body rather than bound to each item. A list of a few hundred items
+         * would otherwise install a few thousand event handlers, including a mousemove handler per item. */
+
+        bodyDiv.on('click', 'div.qui-list-item', function (e) {
+            let item = this._itemFromElement($(e.currentTarget))
+            if (item) {
+                this._handleItemClick(item)
+            }
+        }.bind(this))
+
+        if (this._longPressMultipleSelection) {
+            Gestures.enableLongPress(bodyDiv, {
+                selector: 'div.qui-list-item',
+                onLongPress: function (element) {
+                    let item = this._itemFromElement(element)
+                    if (item) {
+                        this._handleLongPress(item)
+                    }
+                }.bind(this)
+            })
+        }
+
         if (this._searchEnabled) {
             this._enableSearch(bodyDiv)
         }
@@ -109,7 +148,10 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
      * @param {qui.lists.ListItem[]} items list items
      */
     setItems(items) {
-        this._items.forEach(i => i.getHTML().remove())
+        this._items.forEach(function (i) {
+            this._forgetItemFilter(i)
+            i.getHTML().remove()
+        }, this)
 
         items.forEach(i => this.prepareItem(i))
         this._items = items
@@ -140,7 +182,10 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
             this._applySearchFilter(item)
         }
 
-        this._items[index].getHTML().replaceWith(item.getHTML())
+        let oldItem = this._items[index]
+        this._forgetItemFilter(oldItem)
+
+        oldItem.getHTML().replaceWith(item.getHTML())
         this._items[index] = item
 
     }
@@ -180,8 +225,10 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
      * @returns {?qui.lists.ListItem} the removed item
      */
     removeItemAt(index) {
-        if (this._items[index]) {
-            this._items[index].getHTML().remove()
+        let item = this._items[index]
+        if (item) {
+            this._forgetItemFilter(item)
+            item.getHTML().remove()
         }
 
         return this._items.splice(index, 1)[0] || null
@@ -220,14 +267,26 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
     prepareItem(item) {
         item.setList(this)
 
-        let html = item.getHTML()
-
-        html.on('click', this._handleItemClick.bind(this, item))
-        html.longpress(this._handleLongPress.bind(this))
+        /* Associate the item with its element, so that delegated event handlers can find it back */
+        itemsByElement.set(item.getHTML()[0], item)
 
         item.setSelectMode(this._selectMode)
     }
 
+    /**
+     * Return the item that owns a given element, if it belongs to this list.
+     * @param {jQuery} element
+     * @returns {?qui.lists.ListItem}
+     */
+    _itemFromElement(element) {
+        let item = itemsByElement.get(element[0])
+        if (!item || item.getList() !== this) {
+            return null
+        }
+
+        return item
+    }
+
     _handleItemClick(item) {
         /* Flag to prevent handling clicks on long press */
         if (item._wasLongPressed) {
@@ -261,7 +320,9 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
             addedItems.push(item)
         }
 
-        if (ObjectUtils.deepEquals(oldItems, newItems)) {
+        /* Items are compared by identity: deep comparison would walk each item's entire object graph, including its
+         * HTML element and everything reachable from it */
+        if (oldItems.length === newItems.length && oldItems.every((item, i) => item === newItems[i])) {
             return /* Selection unchanged */
         }
 
@@ -290,7 +351,6 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
             return
         }
 
-        // TODO: replace jQuery longpress plugin with a simple, more integrated long press event manager
         if (this._selectMode === Lists.LIST_SELECT_MODE_SINGLE) {
             this.setSelectMode(Lists.LIST_SELECT_MODE_MULTIPLE)
             let selectedItems = this.getSelectedItems()
@@ -428,11 +488,11 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
         })
 
         searchInput.on('keyup', function () {
-            list._applySearchFilter()
+            list._applySearchFilterDebouncer.call()
         })
 
         searchInput.on('paste', function () {
-            list._applySearchFilter()
+            list._applySearchFilterDebouncer.call()
         })
 
         searchIcon.on('pointerdown', function () {
@@ -451,54 +511,120 @@ class List extends mix().with(ViewMixin, StructuredViewMixin, ProgressViewMixin)
         return searchElem
     }
 
+    /**
+     * Tell if an item is currently filtered out by the search filter.
+     * @param {qui.lists.ListItem} item
+     * @returns {Boolean}
+     */
+    isItemFilteredOut(item) {
+        return this._filteredOutItems.has(item)
+    }
+
+    _forgetItemFilter(item) {
+        this._pendingReveal.delete(item)
+
+        if (!this._filteredOutItems.delete(item)) {
+            return /* The filter never touched this item's element */
+        }
+
+        /* Undo what the filter did, so that an item that is added to a list again does not stay invisible */
+        item.getHTML().css({opacity: '', display: ''})
+    }
+
+    _makeSearchExpression() {
+        if (!this._filterInput) {
+            return null
+        }
+
+        let searchText = this._filterInput.val().trim()
+        if (!searchText) {
+            return null
+        }
+
+        /* The whole search text is compiled into a single expression, which also takes care of splitting it into
+         * groups. Compiling it here means compiling it once per list rather than once per item. */
+        return StringUtils.intelliSearchRegExp(searchText)
+    }
+
     _applySearchFilter(item = null) {
-        let searchText = this._filterInput.val().trim().toLowerCase()
+        let searchExpression = this._makeSearchExpression()
+        let items = item ? [item] : this._items
+
+        /* Filtering is applied to the whole list at once: items are faded together, collapsed together by a single
+         * timer, and revealed together on a single frame. Going through each item's visibility manager instead would
+         * schedule two timeouts per item whose visibility changes.
+         *
+         * Visibility is driven by inline styles rather than by classes, so that filtering does not depend on a
+         * stylesheet built from the same sources as this file. The fade comes from the opacity transition that
+         * div.qui-list-child already carries. show() and hide() drive the same inline properties through the item's
+         * visibility manager, so revealing an item leaves it hidden if it has also been explicitly hidden. */
+
+        let toReveal = []
+        let toCollapse = []
+
+        items.forEach(function (item) {
+
+            let filteredOut = searchExpression != null && !item.isMatch(searchExpression)
+            if (filteredOut === this._filteredOutItems.has(item)) {
+                return /* Nothing to do for this item */
+            }
 
-        searchText = searchText.replace(/\s\s+/g, ' ')
-        let searchTextParts = searchText.split(' ')
+            let html = item.getHTML()
 
-        /* If item is specified, apply filtering only to given item */
-        if (item) {
-            if (!this._filterInput) {
-                if (item.isHidden()) {
-                    item.show()
+            if (filteredOut) {
+                this._filteredOutItems.add(item)
+                this._pendingReveal.delete(item)
+
+                if (html[0].isConnected) {
+                    html.css('opacity', '0') /* Starts fading out */
+                    toCollapse.push(item)
+                }
+                else { /* Not part of the document yet, so there is nothing to transition from */
+                    html.css({opacity: '0', display: 'none'})
                 }
             }
             else {
-                let match = searchTextParts.every(s => item.isMatch(s))
-                if (match) {
-                    if (item.isHidden()) {
-                        item.show()
-                    }
-                }
-                else {
-                    if (!item.isHidden()) {
-                        item.hide()
-                    }
-                }
+                this._filteredOutItems.delete(item)
+
+                /* Take up layout again, still transparent, and start fading in on the next frame, unless the item
+                 * has been explicitly hidden, in which case its visibility manager owns the display property */
+                html.css('display', item.isExplicitlyHidden() ? 'none' : '')
+                this._pendingReveal.add(item)
+                toReveal.push(item)
             }
 
-            return
+        }, this)
+
+        if (toCollapse.length) {
+            this._scheduleFilterCollapse()
         }
 
-        if (!this._filterInput) {
-            this._items.filter(i => i.isHidden()).forEach(i => i.show())
-            return
+        if (toReveal.length && this._revealFrameHandle == null) {
+            this._revealFrameHandle = window.requestAnimationFrame(function () {
+
+                this._revealFrameHandle = null
+                this._pendingReveal.forEach(function (item) {
+                    if (!this._filteredOutItems.has(item)) {
+                        item.getHTML().css('opacity', '')
+                    }
+                }, this)
+                this._pendingReveal.clear()
+
+            }.bind(this))
         }
+    }
 
-        this._items.forEach(function (item) {
-            let match = searchTextParts.every(s => item.isMatch(s))
-            if (match) {
-                if (item.isHidden()) {
-                    item.show()
-                }
-            }
-            else {
-                if (!item.isHidden()) {
-                    item.hide()
-                }
-            }
-        })
+    _scheduleFilterCollapse() {
+        if (this._filterCollapseTimeout != null) {
+            return /* Items added to the batch in the meantime are collapsed by the pending timeout */
+        }
+
+        this._filterCollapseTimeout = setTimeout(function () {
+
+            this._filterCollapseTimeout = null
+            this._filteredOutItems.forEach(i => i.getHTML().css('display', 'none'))
+
+        }.bind(this), Theme.getTransitionDuration())
     }
 
     _clearSearch() {

package/js/pages/pages.js

@@ -17,6 +17,12 @@ import * as Breadcrumbs from './breadcrumbs.js'
 let pagesContainer = null
 let currentContext = null
 
+/* Scroll handling state. Scroll events are coalesced into one update per frame, and that update reads before it
+ * writes, so that a write never sits between two reads and forces a synchronous layout. */
+let scrollUpdatePending = false
+let scrolledPages = new Set()
+let contentScrolled = null
+
 
 /* Page context */
 
@@ -151,9 +157,8 @@ function updatePagesVisibility() {
     GlobalGlass.updateVisibility()
 }
 
-function updateContentScroll() {
-    /* Scrolled content */
-    let scrolled = currentContext.getPages().some(function (p) {
+function isContentScrolled() {
+    return currentContext.getPages().some(function (p) {
         if (!p.isVisible()) {
             return false
         }
@@ -161,19 +166,61 @@ function updateContentScroll() {
         return p.getPageHTML()[0].scrollTop !== 0
 
     })
+}
+
+function applyContentScrolled(scrolled) {
+    if (scrolled === contentScrolled) {
+        return
+    }
+
+    contentScrolled = scrolled
     Window.$body.toggleClass('content-scrolled', scrolled)
 }
 
-function handlePageScroll() {
-    updateContentScroll()
+function updateContentScroll() {
+    applyContentScrolled(isContentScrolled())
+}
+
+function runScrollUpdate() {
+    scrollUpdatePending = false
+
+    let pages = Array.from(scrolledPages)
+    scrolledPages.clear()
+
+    /* Read phase: nothing has been written yet in this frame, so these reads are served from a clean layout */
+    let scrolled = isContentScrolled()
 
+    /* Page handlers read their own scroll state before writing to their own elements. They run before the body class
+     * is updated, so that no write precedes their reads. */
+    pages.forEach(function (page) {
+        /* The page may have been removed from its context, or its whole context may have been swapped out by
+         * setCurrentContext(), between the scroll event and this frame */
+        if (page.getContext() !== currentContext) {
+            return
+        }
+
+        page.handleVertScroll()
+    })
+
+    /* Write phase */
+    applyContentScrolled(scrolled)
+}
+
+function handlePageScroll() {
     let $this = $(this)
     let page = $this.data('page')
     if (!page) {
         throw AssertionError('page scroll event from a non-page HTML element')
     }
 
-    page.handleVertScroll()
+    scrolledPages.add(page)
+
+    if (scrollUpdatePending) {
+        return
+    }
+
+    scrollUpdatePending = true
+    window.requestAnimationFrame(runScrollUpdate)
 }
 
 function triggerPageResize() {
@@ -202,6 +249,7 @@ function attachPageHTMLHandlers(page) {
 }
 
 function detachPageHTMLHandlers(page) {
+    scrolledPages.delete(page)
     page.getPageHTML().off('scroll', handlePageScroll)
     page.getPageHTML().off('transitionend', triggerPageResizeOnTransitionEnd)
 }

package/js/utils/gestures.js

@@ -2,9 +2,14 @@
  * @namespace qui.utils.gestures
  */
 
+import $ from '$qui/lib/jquery.module.js'
+
 import * as Window from '$qui/window.js'
 
 
+const LONG_PRESS_DATA_KEY = 'qui.utils.gestures.longPress'
+
+
 /**
  * Drag Move Callback Function.
  * @callback qui.utils.gestures.DragMoveCallback
@@ -163,3 +168,135 @@ export function disableDragging(element) {
     element.attr('touch-action', '') /* Required for pep.js (on iOS) */
     element.off('pointerdown', draggingData.pointerDown)
 }
+
+/**
+ * Long Press Callback Function.
+ * @callback qui.utils.gestures.LongPressCallback
+ * @param {jQuery} element the pressed element
+ * @param {jQuery.Event} event the pointer event that started the press
+ */
+
+/**
+ * Setup long press detection on an HTML element.
+ *
+ * Detection is based on pointer events, which never block scrolling; a press is automatically abandoned as soon as
+ * the browser starts scrolling with the same pointer, or as soon as the pointer moves further than `moveThreshold`.
+ *
+ * When a `selector` is given, presses are detected for matching descendants of `element` rather than for `element`
+ * itself. This allows handling long presses on a large number of children with a single set of event handlers.
+ *
+ * @alias qui.utils.gestures.enableLongPress
+ * @param {jQuery} element the element on which presses are detected
+ * @param {qui.utils.gestures.LongPressCallback} onLongPress called when the element has been pressed for at least
+ * `duration` milliseconds
+ * @param {?qui.utils.gestures.LongPressCallback} [onShortPress] called when the element has been released before
+ * `duration` milliseconds have elapsed
+ * @param {?String} [selector] an optional selector restricting detection to matching descendants of `element`
+ * @param {Number} [duration] how long the element must be pressed for a long press, in milliseconds (defaults to
+ * `500`)
+ * @param {Number} [moveThreshold] how far the pointer may move before the press is abandoned, in pixels (defaults to
+ * `10`)
+ */
+export function enableLongPress(
+    element,
+    {onLongPress, onShortPress = null, selector = null, duration = 500, moveThreshold = 10}
+) {
+    let timeoutHandle = null
+    let pressedElement = null
+    let pressedPointerId = null
+    let startPageX = 0
+    let startPageY = 0
+
+    function abandon() {
+        if (timeoutHandle != null) {
+            clearTimeout(timeoutHandle)
+            timeoutHandle = null
+        }
+
+        pressedElement = null
+        pressedPointerId = null
+
+        Window.$body.off('pointermove', pointerMove)
+                    .off('pointerup pointercancel', pointerUp)
+    }
+
+    function isPrimaryPointer(e) {
+        /* jQuery normalizes pointerId and pointerType, but not isPrimary, which must be read from the original
+         * event; events triggered programmatically have no original event and are considered primary */
+        return !e.originalEvent || e.originalEvent.isPrimary !== false
+    }
+
+    function pointerDown(e) {
+        /* Only the primary pointer (first finger, left mouse button) can start a press */
+        if (!isPrimaryPointer(e) || (e.pointerType === 'mouse' && e.button !== 0)) {
+            return
+        }
+
+        abandon() /* Any previous press is implicitly abandoned */
+
+        pressedElement = $(this)
+        pressedPointerId = e.pointerId
+        startPageX = e.pageX
+        startPageY = e.pageY
+
+        timeoutHandle = setTimeout(function () {
+
+            timeoutHandle = null
+
+            let element = pressedElement
+            abandon()
+            onLongPress(element, e)
+
+        }, duration)
+
+        Window.$body.on('pointermove', pointerMove)
+                    .on('pointerup pointercancel', pointerUp)
+    }
+
+    function pointerMove(e) {
+        /* Ignore any pointer other than the one that started the press */
+        if (!pressedElement || e.pointerId !== pressedPointerId) {
+            return
+        }
+
+        if (Math.abs(e.pageX - startPageX) > moveThreshold || Math.abs(e.pageY - startPageY) > moveThreshold) {
+            abandon()
+        }
+    }
+
+    function pointerUp(e) {
+        /* Ignore any pointer other than the one that started the press */
+        if (!pressedElement || e.pointerId !== pressedPointerId) {
+            return
+        }
+
+        /* A pending timeout means the press has been released before becoming a long press */
+        let shortPress = timeoutHandle != null
+
+        let element = pressedElement
+        abandon()
+
+        if (shortPress && onShortPress) {
+            onShortPress(element, e)
+        }
+    }
+
+    element.data(LONG_PRESS_DATA_KEY, {pointerDown: pointerDown, abandon: abandon, selector: selector})
+    element.on('pointerdown', selector, pointerDown)
+}
+
+/**
+ * Disable previously configured long press support on an HTML element.
+ * @alias qui.utils.gestures.disableLongPress
+ * @param {jQuery} element the element on which presses are detected
+ */
+export function disableLongPress(element) {
+    let longPressData = element.data(LONG_PRESS_DATA_KEY)
+    if (!longPressData) {
+        return
+    }
+
+    longPressData.abandon()
+    element.off('pointerdown', longPressData.selector, longPressData.pointerDown)
+    element.removeData(LONG_PRESS_DATA_KEY)
+}

package/js/utils/string.js

@@ -174,19 +174,46 @@ export function fromUTF8(s) {
 }
 
 /**
- * Intelligently search for an input sequence in a string. All characters in the input sequence must be present in the
- * searched string, in the respective order.
+ * Intelligently search for an input sequence in a string.
+ *
+ * The input sequence is made of groups of characters separated by whitespace. Each group must be present in the
+ * searched string as it was given, without anything in between, and the groups must appear in the order in which they
+ * were given, each one starting after the previous one ends. Searching is case insensitive.
+ *
+ * For example, `"temp sens"` matches `"temperature sensor"`, while neither `"tmp"` nor `"sens temp"` does.
+ *
  * @alias qui.utils.string.intelliSearch
  * @param {String} s string to search into
- * @param {String} search string to search for
+ * @param {String|RegExp} search string to search for, or an expression previously compiled with
+ * {@link qui.utils.string.intelliSearchRegExp}
  * @returns {?RegExpMatchArray}
  */
 export function intelliSearch(s, search) {
-    let rexStr = Array.prototype.map.call(search, function (c) {
-        return `${REGEX_ESCAPE_CHARS.includes(c) ? '\\' : ''}${c}.*`
-    }).join('')
-
-    let rex = new RegExp(rexStr, 'i')
+    let rex = (search instanceof RegExp) ? search : intelliSearchRegExp(search)
 
     return s.match(rex)
 }
+
+/**
+ * Compile the regular expression used by {@link qui.utils.string.intelliSearch}.
+ *
+ * Compiling once and passing the result to {@link qui.utils.string.intelliSearch} avoids recompiling the same
+ * expression when matching a single search string against many candidates.
+ *
+ * @alias qui.utils.string.intelliSearchRegExp
+ * @param {String} search the search string
+ * @returns {RegExp}
+ */
+export function intelliSearchRegExp(search) {
+    let groups = search.split(/\s+/).filter(group => group.length > 0)
+
+    /* Characters of a group must be adjacent in the searched string, while groups themselves may be arbitrarily far
+     * apart, as long as they follow each other */
+    let rexStr = groups.map(function (group) {
+        return Array.prototype.map.call(group, function (c) {
+            return `${REGEX_ESCAPE_CHARS.includes(c) ? '\\' : ''}${c}`
+        }).join('')
+    }).join('.*')
+
+    return new RegExp(rexStr, 'i')
+}

package/js/widgets/base-widget.js

@@ -1,5 +1,5 @@
 
-import '$qui/lib/jquery-ui.js'
+import '$qui/lib/jquery-ui-widget.js'
 import $ from '$qui/lib/jquery.module.js'
 
 

package/js/widgets/common-widgets/combo.js

@@ -555,9 +555,10 @@ $.widget('qui.combo', $.qui.basewidget, {
             })
         }
 
-        let searchText = this._filterInput.val().trim().toLowerCase()
-        searchText = searchText.replace(/\s\s+/g, ' ')
-        let searchTextParts = searchText.split(' ')
+        /* The whole search text is compiled into a single expression, which also takes care of splitting it into
+         * groups. Compiling it here means compiling it once per combo rather than once per choice. */
+        let searchText = this._filterInput.val().trim()
+        let searchExpression = searchText ? StringUtils.intelliSearchRegExp(searchText) : null
         let children = this._itemContainer.children('div.qui-combo-item')
 
         let filterFunc = this.options.filterFunc
@@ -580,7 +581,7 @@ $.widget('qui.combo', $.qui.basewidget, {
         let visibleCount = 0
         this._getChoices().forEach(function (choice, i) {
 
-            let visible = !searchText || searchTextParts.every(p => filterFunc(choice, p))
+            let visible = !searchExpression || filterFunc(choice, searchExpression)
             if (visibleCount > MAX_VISIBLE_ITEMS && this._maxHeightSet) {
                 visible = false
             }

package/js/widgets/common-widgets/up-down.js

@@ -1,7 +1,8 @@
 
 import $ from '$qui/lib/jquery.module.js'
 
-import {gettext} from '$qui/base/i18n.js'
+import {gettext}     from '$qui/base/i18n.js'
+import * as Gestures from '$qui/utils/gestures.js'
 
 import * as BaseWidget from '../base-widget.js' /* Needed */
 
@@ -146,25 +147,29 @@ $.widget('qui.updown', $.qui.basewidget, {
 
         /* Install up/down buttons long press handlers */
 
-        this._downButton.longpress(function () {
-            if (widget.options.readonly || widget.options.disabled) {
-                return
-            }
+        Gestures.enableLongPress(this._downButton, {
+            onLongPress: function () {
+                if (widget.options.readonly || widget.options.disabled) {
+                    return
+                }
 
-            incDecLoopActive = true
-            decLoop()
+                incDecLoopActive = true
+                decLoop()
+            }
         })
         this._downButton.on('pointerup pointerleave pointerout pointercancel', function () {
             incDecLoopActive = false
         })
 
-        this._upButton.longpress(function () {
-            if (widget.options.readonly || widget.options.disabled) {
-                return
-            }
+        Gestures.enableLongPress(this._upButton, {
+            onLongPress: function () {
+                if (widget.options.readonly || widget.options.disabled) {
+                    return
+                }
 
-            incDecLoopActive = true
-            incLoop()
+                incDecLoopActive = true
+                incLoop()
+            }
         })
         this._upButton.on('pointerup pointerleave pointerout pointercancel', function () {
             incDecLoopActive = false

package/less/lists.less

@@ -29,10 +29,28 @@ div.qui-list-child {
 
 div.qui-list-child.qui-list-item {
 
+    /* Nothing inside an item is ever painted outside of it, since div.qui-list-child above already clips with
+     * overflow: hidden. Containment is therefore visually inert here, but it lets the engine scope layout and style
+     * invalidation to the single row that changed, instead of the whole list, and skip painting off-screen rows. */
+    contain: layout style paint;
+
     &.hidden {
         opacity: 0;
     }
 
+    /* Only an item whose whole content is an icon-label view has a height we can predict: min-height: 3em in
+     * icon-label-view.less, with the content kept to a single ellipsised line. Such a view can have its off-screen
+     * rendering skipped against a reliable size estimate. Everything else built on ListItem is deliberately left out,
+     * table rows above all -- their content is a set of cells and their height is unconstrained.
+     *
+     * The plain contain-intrinsic-size comes first for engines that predate the auto keyword and would otherwise drop
+     * the declaration, collapsing a skipped view to nothing. */
+    & > div.qui-icon-label-view {
+        content-visibility: auto;
+        contain-intrinsic-size: 0 3em;
+        contain-intrinsic-size: auto 3em;
+    }
+
 }
 
 

package/package.json

@@ -1,28 +1,28 @@
 {
   "name": "@qtoggle/qui",
   "description": "A JavaScript UI library with batteries included.",
-  "version": "1.19.11",
+  "version": "1.20.0-alpha.2",
   "author": {
     "name": "Calin Crisan",
     "email": "ccrisan@gmail.com"
   },
   "repository": {
-    "url": "https://github.com/qtoggle/qui.git"
+    "url": "git+https://github.com/qtoggle/qui.git"
   },
   "keywords": [],
   "license": "Apache-2.0",
   "dependencies": {
     "jquery": "^3",
     "jquery-mousewheel": "*",
-    "jquery-ui-dist": "*",
+    "jquery-ui": "^1",
     "js-logger": "*",
     "pepjs": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.27.0",
+    "@babel/eslint-parser": "^7.27.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.27.0",
-    "@babel/eslint-parser": "^7.27.0",
     "babel-loader": "^8",
     "css-loader": "^3",
     "eslint": "^9",

package/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "qui-server"
-version = "1.19.11"
+version = "1.20.0-alpha.2"
 description = "A fully fledged qToggle implementation written in Python"
 authors = [
     {name = "Calin Crisan", email = "ccrisan@gmail.com"},
@@ -29,6 +29,7 @@ package = true
 [tool.ruff]
 line-length = 120
 lint.extend-select = ["I", "RUF022"]
+lint.extend-ignore = ["RUF012"]
 lint.isort.lines-after-imports = 2
 lint.isort.lines-between-types = 1
 lint.isort.force-wrap-aliases = true

package/scripts/postinstall.sh

@@ -5,6 +5,6 @@ echo "Creating symlinks to libs"
 cd js/lib
 ln -sf ../../../../jquery/dist/jquery.js .
 ln -sf  ../../../../jquery-mousewheel/jquery.mousewheel.js .
-ln -sf ../../../../jquery-ui-dist/jquery-ui.js
+ln -sf ../../../../jquery-ui/ui/widget.js jquery-ui-widget.js
 ln -sf ../../../../js-logger/src/logger.js
 ln -sf ../../../../pepjs/dist/pep.js

package/js/lib/jquery.longpress.js

@@ -1,79 +0,0 @@
-/**
- * Longpress is a jQuery plugin that makes it easy to support long press
- * events on mobile devices and desktop borwsers.
- *
- * @name longpress
- * @version 0.1.2
- * @requires jQuery v1.2.3+
- * @author Vaidik Kapoor
- * @license MIT License - http://www.opensource.org/licenses/mit-license.php
- *
- * For usage and examples, check out the README at:
- * http://github.com/vaidik/jquery-longpress/
- *
- * Copyright (c) 2008-2013, Vaidik Kapoor (kapoor [*dot*] vaidik -[at]- gmail [*dot*] com)
- */
-
-(function($) {
-    $.fn.longpress = function(longCallback, shortCallback, duration) {
-        if (typeof duration === "undefined") {
-            duration = 500;
-        }
-
-        return this.each(function() {
-            var $this = $(this);
-
-            // to keep track of how long something was pressed
-            var mouse_down_time;
-            var timeout;
-
-            // mousedown or touchstart callback
-            function mousedown_callback(e) {
-                mouse_down_time = new Date().getTime();
-                var context = $(this);
-
-                // set a timeout to call the longpress callback when time elapses
-                timeout = setTimeout(function() {
-                    if (typeof longCallback === "function") {
-                        longCallback.call(context, e);
-                    } else {
-                        $.error('Callback required for long press. You provided: ' + typeof longCallback);
-                    }
-                }, duration);
-            }
-
-            // mouseup or touchend callback
-            function mouseup_callback(e) {
-                var press_time = new Date().getTime() - mouse_down_time;
-                if (press_time < duration) {
-                    // cancel the timeout
-                    clearTimeout(timeout);
-
-                    // call the shortCallback if provided
-                    if (typeof shortCallback === "function") {
-                        shortCallback.call($(this), e);
-                    } else if (typeof shortCallback === "undefined") {
-                        ;
-                    } else {
-                        $.error('Optional callback for short press should be a function.');
-                    }
-                }
-            }
-
-            // cancel long press event if the finger or mouse was moved
-            function move_callback(e) {
-                clearTimeout(timeout);
-            }
-
-            // Browser Support
-            $this.on('mousedown', mousedown_callback);
-            $this.on('mouseup', mouseup_callback);
-            $this.on('mousemove', move_callback);
-
-            // Mobile Support
-            $this.on('touchstart', mousedown_callback);
-            $this.on('touchend', mouseup_callback);
-            $this.on('touchmove', move_callback);
-        });
-    };
-}(jQuery));