uikit 3.21.6-dev.de7455236 → 3.21.7-dev.b9cd769db

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit",
   "title": "UIkit",
   "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-  "version": "3.21.6-dev.de7455236",
+  "version": "3.21.7-dev.b9cd769db",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [
@@ -20,7 +20,7 @@
   },
   "homepage": "https://getuikit.com",
   "devDependencies": {
-    "@eslint/js": "^9.1.1",
+    "@eslint/js": "^9.6.0",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-replace": "^5.0.5",
     "archiver": "^7.0.1",
@@ -28,20 +28,20 @@
     "chokidar-cli": "^3.0.0",
     "clean-css": "^5.3.3",
     "dateformat": "^5.0.3",
-    "esbuild": "^0.21.2",
-    "eslint": "^9.1.1",
+    "esbuild": "^0.23.0",
+    "eslint": "^9.6.0",
     "eslint-config-prettier": "^9.1.0",
-    "execa": "^9.0.2",
+    "execa": "^9.3.0",
     "fs-extra": "^11.2.0",
-    "glob": "^10.3.12",
-    "globals": "^15.0.0",
-    "inquirer": "^9.2.19",
+    "glob": "^11.0.0",
+    "globals": "^15.7.0",
+    "inquirer": "^10.0.0",
     "less": "^4.2.0",
     "minimist": "^1.2.8",
     "number-precision": "^1.6.0",
-    "p-limit": "^5.0.0",
+    "p-limit": "^6.0.0",
     "prettier": "^3.2.5",
-    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-organize-imports": "^4.0.0",
     "rollup": "^4.16.4",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-modify": "^3.0.0",

package/src/js/api/component.js

@@ -1,4 +1,4 @@
-import { camelize, findAll, hyphenate, isEmpty, isPlainObject } from 'uikit-util';
+import { $$, camelize, hyphenate, isEmpty, isPlainObject } from 'uikit-util';
 import App from './app';
 
 const PREFIX = 'uk-';
@@ -41,7 +41,7 @@ export function createComponent(name, element, data, ...args) {
     return Component.options.functional
         ? new Component({ data: isPlainObject(element) ? element : [element, data, ...args] })
         : element
-          ? findAll(element).map(init)[0]
+          ? $$(element).map(init)[0]
           : init();
 
     function init(element) {

package/src/js/core/drop.js

@@ -29,7 +29,7 @@ import {
     removeClass,
 } from 'uikit-util';
 import Container from '../mixin/container';
-import Position from '../mixin/position';
+import Position, { storeScrollPosition } from '../mixin/position';
 import Togglable from '../mixin/togglable';
 import { keyMap } from '../util/keys';
 import { preventBackgroundScroll } from '../util/scroll';
@@ -375,6 +375,8 @@ export default {
         },
 
         position() {
+            const restoreScrollPosition = storeScrollPosition(this.$el);
+
             removeClass(this.$el, 'uk-drop-stack');
             css(this.$el, this._style);
 
@@ -439,6 +441,8 @@ export default {
                     this.positionAt(this.$el, this.target, this.boundary);
                 }
             }
+
+            restoreScrollPosition();
         },
     },
 };

package/src/js/core/modal.js

@@ -22,8 +22,7 @@ export default {
     data: {
         clsPage: 'uk-modal-page',
         selPanel: '.uk-modal-dialog',
-        selClose:
-            '.uk-modal-close, .uk-modal-close-default, .uk-modal-close-outside, .uk-modal-close-full',
+        selClose: '[class*="uk-modal-close"]',
     },
 
     events: [

package/src/js/mixin/position.js

@@ -95,7 +95,7 @@ export default {
     },
 };
 
-function storeScrollPosition(element) {
+export function storeScrollPosition(element) {
     const scrollElement = scrollParent(element);
     const { scrollTop } = scrollElement;
 

package/src/js/util/dom.js

@@ -98,9 +98,8 @@ export function apply(node, fn) {
     fn(node);
     node = node.firstElementChild;
     while (node) {
-        const next = node.nextElementSibling;
         apply(node, fn);
-        node = next;
+        node = node.nextElementSibling;
     }
 }
 

package/src/js/util/selector.js

@@ -25,16 +25,16 @@ function getContext(selector, context = document) {
 }
 
 const addStarRe = /([!>+~-])(?=\s+[!>+~-]|\s*$)/g;
-const splitSelectorRe = /.*?[^\\](?![^(]*\))(?:,|$)/g;
-const trailingCommaRe = /\s*,$/;
+// This will fail for nested, comma separated selectors (e.g `a:has(b:not(c),d)`)
+const splitSelectorRe = /(\([^)]*\)|[^,])+/g;
 
 const parseSelector = memoize((selector) => {
     selector = selector.replace(addStarRe, '$1 *');
     let isContextSelector = false;
 
     const selectors = [];
-    for (let sel of selector.match(splitSelectorRe) ?? []) {
-        sel = sel.replace(trailingCommaRe, '').trim();
+    for (let sel of selector.match(splitSelectorRe)) {
+        sel = sel.trim();
         isContextSelector ||= ['!', '+', '~', '-', '>'].includes(sel[0]);
         selectors.push(sel);
     }
@@ -45,11 +45,11 @@ const parseSelector = memoize((selector) => {
         isContextSelector,
     };
 });
-
+const positionRe = /(\([^)]*\)|\S)*/;
 const parsePositionSelector = memoize((selector) => {
     selector = selector.slice(1).trim();
-    const index = selector.indexOf(' ');
-    return ~index ? [selector.slice(0, index), selector.slice(index + 1)] : [selector, ''];
+    const [position] = selector.match(positionRe);
+    return [position, selector.slice(position.length + 1)];
 });
 
 function _query(selector, context = document, queryFn) {

package/src/js/util/viewport.js

@@ -1,16 +1,7 @@
 import { hasClass } from './class';
 import { dimensions, offset, offsetPosition } from './dimensions';
 import { isVisible, parent, parents } from './filter';
-import {
-    clamp,
-    findIndex,
-    includes,
-    intersectRect,
-    isWindow,
-    toFloat,
-    toWindow,
-    ucfirst,
-} from './lang';
+import { clamp, findIndex, includes, intersectRect, toFloat, toWindow, ucfirst } from './lang';
 import { css } from './style';
 
 export function isInView(element, offsetTop = 0, offsetLeft = 0) {
@@ -162,37 +153,42 @@ export function overflowParents(element) {
 
 export function offsetViewport(scrollElement) {
     const window = toWindow(scrollElement);
-    let viewportElement =
-        scrollElement === scrollingElement(scrollElement) ? window : scrollElement;
+    const documentScrollingElement = scrollingElement(scrollElement);
+    const useWindow = scrollElement.contains(documentScrollingElement);
 
-    if (isWindow(viewportElement) && window.visualViewport) {
+    if (useWindow && window.visualViewport) {
         let { height, width, scale, pageTop: top, pageLeft: left } = window.visualViewport;
         height = Math.round(height * scale);
         width = Math.round(width * scale);
         return { height, width, top, left, bottom: top + height, right: left + width };
     }
 
-    let rect = offset(viewportElement);
-    if (css(viewportElement, 'display') === 'inline') {
+    let rect = offset(useWindow ? window : scrollElement);
+    if (css(scrollElement, 'display') === 'inline') {
         return rect;
     }
 
+    const { body, documentElement } = window.document;
+    const viewportElement = useWindow
+        ? documentScrollingElement === documentElement ||
+          // In quirks mode the scrolling element is body, even though the viewport is html
+          documentScrollingElement.clientHeight < body.clientHeight
+            ? documentScrollingElement
+            : body
+        : scrollElement;
     for (let [prop, dir, start, end] of [
         ['width', 'x', 'left', 'right'],
         ['height', 'y', 'top', 'bottom'],
     ]) {
-        if (isWindow(viewportElement)) {
-            // iOS 12 returns <body> as scrollingElement
-            viewportElement = viewportElement.document;
-        } else {
-            rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
-        }
         const subpixel = rect[prop] % 1;
+
+        rect[start] += toFloat(css(viewportElement, `border-${start}-width`));
         rect[prop] = rect[dir] =
             viewportElement[`client${ucfirst(prop)}`] -
             (subpixel ? (subpixel < 0.5 ? -subpixel : 1 - subpixel) : 0);
         rect[end] = rect[prop] + rect[start];
     }
+
     return rect;
 }
 

package/tests/js/index.js

@@ -38,7 +38,7 @@ storage[keyinverse] = storage[keyinverse] || '';
 const dir = storage._uikit_dir || 'ltr';
 
 // set dir
-document.documentElement.dir = dir;
+document.dir = dir;
 
 const style = styles[storage[key]] || styles.theme;