uikit 3.15.11-dev.fd61e70ff → 3.15.12-dev.aab45c75d

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.15.11-dev.fd61e70ff",
+    "version": "3.15.12-dev.aab45c75d",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [
@@ -34,33 +34,33 @@
     },
     "homepage": "https://getuikit.com",
     "devDependencies": {
-        "@babel/core": "^7.19.1",
+        "@babel/core": "^7.19.6",
         "@babel/preset-env": "^7.19.1",
-        "@rollup/plugin-alias": "^3.1.9",
-        "@rollup/plugin-babel": "^5.3.1",
-        "@rollup/plugin-replace": "^4.0.0",
+        "@rollup/plugin-alias": "^4.0.2",
+        "@rollup/plugin-babel": "^6.0.2",
+        "@rollup/plugin-replace": "^5.0.1",
         "archiver": "^5.3.1",
         "camelcase": "^7.0.0",
         "clean-css": "^5.3.1",
         "dateformat": "^5.0.3",
-        "esbuild": "^0.15.8",
-        "eslint": "^8.23.1",
+        "esbuild": "^0.15.12",
+        "eslint": "^8.26.0",
         "eslint-config-prettier": "^8.5.0",
         "fs-extra": "^10.1.0",
         "glob": "^8.0.3",
-        "inquirer": "^9.1.2",
+        "inquirer": "^9.1.4",
         "less": "^4.1.3",
-        "minimist": "^1.2.6",
-        "number-precision": "^1.5.2",
+        "minimist": "^1.2.7",
+        "number-precision": "^1.6.0",
         "p-limit": "^4.0.0",
         "prettier": "^2.7.1",
-        "rollup": "^2.79.0",
+        "rollup": "^3.2.3",
         "rollup-plugin-esbuild": "^4.10.1",
         "rollup-plugin-html": "^0.2.1",
         "rollup-plugin-modify": "^3.0.0",
-        "rtlcss": "^3.5.0",
-        "semver": "^7.3.7",
-        "svgo": "^2.8.0",
+        "rtlcss": "^4.0.0",
+        "semver": "^7.3.8",
+        "svgo": "^3.0.0",
         "watch-run": "^1.2.5"
     }
 }

package/src/js/api/boot.js

@@ -1,5 +1,5 @@
 import { getComponentName } from './component';
-import { apply, hasAttr, inBrowser } from 'uikit-util';
+import { apply, hasAttr, inBrowser, trigger } from 'uikit-util';
 
 export default function (UIkit) {
     const { connect, disconnect } = UIkit;
@@ -9,6 +9,8 @@ export default function (UIkit) {
     }
 
     requestAnimationFrame(function () {
+        trigger(document, 'uikit:init', UIkit);
+
         if (document.body) {
             apply(document.body, connect);
         }

package/src/js/core/drop.js

@@ -429,7 +429,7 @@ export default {
             // Ensure none positioned element does not generate scrollbars
             this.$el.hidden = true;
 
-            const viewports = this.target.map((target) => offsetViewport(scrollParents(target)[0]));
+            const viewports = this.target.map((target) => getViewport(this.$el, target));
             const viewportOffset = this.getViewportOffset(this.$el);
 
             const dirs = [
@@ -494,3 +494,7 @@ function getPositionedElements(el) {
     apply(el, (el) => css(el, 'position') !== 'static' && result.push(el));
     return result;
 }
+
+function getViewport(el, target) {
+    return offsetViewport(scrollParents(target).find((parent) => within(el, parent)));
+}

package/src/js/core/sticky.js

@@ -9,7 +9,6 @@ import {
     Animation,
     clamp,
     css,
-    dimensions,
     height as getHeight,
     offset as getOffset,
     intersectRect,
@@ -148,7 +147,7 @@ export default {
 
     update: [
         {
-            read({ height, margin }, types) {
+            read({ height, width, margin }, types) {
                 this.inactive = !this.matchMedia || !isVisible(this.$el);
 
                 if (this.inactive) {
@@ -162,7 +161,7 @@ export default {
                 }
 
                 if (!this.active) {
-                    height = getOffset(this.$el).height;
+                    ({ height, width } = getOffset(this.$el));
                     margin = css(this.$el, 'margin');
                 }
 
@@ -171,7 +170,6 @@ export default {
                     requestAnimationFrame(() => css(this.selTarget, 'transition', ''));
                 }
 
-                const referenceElement = this.isFixed ? this.placeholder : this.$el;
                 const windowHeight = getHeight(window);
 
                 let position = this.position;
@@ -179,6 +177,7 @@ export default {
                     position = position === 'top' ? 'bottom' : 'top';
                 }
 
+                const referenceElement = this.isFixed ? this.placeholder : this.$el;
                 let offset = toPx(this.offset, 'height', referenceElement);
                 if (position === 'bottom' && (height < windowHeight || this.overflowFlip)) {
                     offset += windowHeight - height;
@@ -208,16 +207,16 @@ export default {
                     overflow,
                     topOffset,
                     height,
+                    width,
                     margin,
-                    width: dimensions(referenceElement).width,
                     top: offsetPosition(referenceElement)[0],
                 };
             },
 
-            write({ height, margin }) {
+            write({ height, width, margin }) {
                 const { placeholder } = this;
 
-                css(placeholder, { height, margin });
+                css(placeholder, { height, width, margin });
 
                 if (!within(placeholder, document)) {
                     after(this.$el, placeholder);

package/src/js/util/env.js

@@ -1,7 +1,5 @@
-import { attr } from './attr';
-
 export const inBrowser = typeof window !== 'undefined';
-export const isRtl = inBrowser && attr(document.documentElement, 'dir') === 'rtl';
+export const isRtl = inBrowser && document.dir === 'rtl';
 
 export const hasTouch = inBrowser && 'ontouchstart' in window;
 const hasPointerEvents = inBrowser && window.PointerEvent;

package/src/js/util/position.js

@@ -1,3 +1,4 @@
+import { within } from './filter';
 import { offset } from './dimensions';
 import { clamp, isArray, ucfirst } from './lang';
 import { offsetViewport, scrollParents } from './viewport';
@@ -32,7 +33,7 @@ function getPosition(element, target, options) {
 
     let offsetPosition = position;
     for (const [i, [prop, , start, end]] of Object.entries(dirs)) {
-        const viewport = getViewport(target[i], viewportOffset, boundary, i);
+        const viewport = getViewport(element, target[i], viewportOffset, boundary, i);
 
         if (isWithin(position, viewport, i)) {
             continue;
@@ -52,7 +53,7 @@ function getPosition(element, target, options) {
 
             offsetBy = flip(element, target, options, i)[start] - position[start];
 
-            const scrollArea = getScrollArea(target[i], viewportOffset, i);
+            const scrollArea = getScrollArea(element, target[i], viewportOffset, i);
 
             if (!isWithin(applyOffset(position, offsetBy, i), scrollArea, i)) {
                 if (isWithin(position, scrollArea, i)) {
@@ -132,8 +133,8 @@ function moveBy(attach, end, dim) {
     return attach === 'center' ? dim / 2 : attach === end ? dim : 0;
 }
 
-function getViewport(element, viewportOffset, boundary, i) {
-    let viewport = getIntersectionArea(...scrollParents(element).map(offsetViewport));
+function getViewport(element, target, viewportOffset, boundary, i) {
+    let viewport = getIntersectionArea(...commonScrollParents(element, target).map(offsetViewport));
 
     if (viewportOffset) {
         viewport[dirs[i][2]] += viewportOffset;
@@ -150,15 +151,19 @@ function getViewport(element, viewportOffset, boundary, i) {
     return viewport;
 }
 
-function getScrollArea(element, viewportOffset, i) {
+function getScrollArea(element, target, viewportOffset, i) {
     const [prop, , start, end] = dirs[i];
-    const [scrollElement] = scrollParents(element);
+    const [scrollElement] = commonScrollParents(element, target);
     const viewport = offsetViewport(scrollElement);
     viewport[start] -= scrollElement[`scroll${ucfirst(start)}`] - viewportOffset;
     viewport[end] = viewport[start] + scrollElement[`scroll${ucfirst(prop)}`] - viewportOffset;
     return viewport;
 }
 
+function commonScrollParents(element, target) {
+    return scrollParents(target).filter((parent) => within(element, parent));
+}
+
 function getIntersectionArea(...rects) {
     let area = {};
     for (const rect of rects) {

package/tests/navbar.html

@@ -3216,7 +3216,7 @@
         <script>
 
             const {$, $$, addClass, on, removeClass, MouseTracker } = UIkit.util;
-            const tracker = MouseTracker();
+            const tracker = new MouseTracker();
             const el = $('#js-mousetracker');
             const target = $('#js-mousetarget');
             let interval;