@hypericon/mico 0.7.0 → 0.7.2

package/dist/cjs/{src/components → components}/menu/Menu.js

@@ -20,14 +20,22 @@ exports.Menu = {
     },
     view({ attrs, children }) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        const maxWidthPx = Math.min(window.innerWidth, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
-        const maxHeightPx = window.innerHeight / 2;
+        // Use the document's client dimensions rather than window.innerWidth/innerHeight,
+        // since the menu's containing block (absolute/fixed) is bounded by the former;
+        // window.innerWidth/innerHeight include the scrollbar and would leave a gap after flipping.
+        const clientWidthPx = document.documentElement.clientWidth;
+        const clientHeightPx = document.documentElement.clientHeight;
+        const maxWidthPx = Math.min(clientWidthPx, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
+        const maxHeightPx = clientHeightPx / 2;
         const xPx = (_a = attrs.x) !== null && _a !== void 0 ? _a : 0;
         const yPx = (_b = attrs.y) !== null && _b !== void 0 ? _b : 0;
-        let flipH = ((xPx + menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX) > window.innerWidth);
+        // Flip based on maxWidthPx (the upper bound enforced by the max-width style below),
+        // not MIN_WIDTH_PX, since the menu's real rendered width can be anywhere up to maxWidthPx
+        // and isn't known until after layout.
+        let flipH = ((xPx + maxWidthPx) > clientWidthPx);
         let flipV = menu_settings_1.MENU_SETTINGS.ANCHOR === "page"
-            ? ((yPx + maxHeightPx - window.scrollY) > window.innerHeight)
-            : ((yPx + maxHeightPx) > window.innerHeight);
+            ? ((yPx + maxHeightPx - window.scrollY) > clientHeightPx)
+            : ((yPx + maxHeightPx) > clientHeightPx);
         if (((_c = attrs.options) === null || _c === void 0 ? void 0 : _c.noFlipH) === true)
             flipH = false;
         if (((_d = attrs.options) === null || _d === void 0 ? void 0 : _d.noFlipV) === true)
@@ -48,9 +56,8 @@ exports.Menu = {
         //   "window.innerHeight": window.innerHeight,
         //   "flipV": flipV,
         // });
-        // TODO: don't let the menu width actually touch the screen width; it will fall off the left hand side
-        const posH = flipH ? `right: ${window.innerWidth - xPx}px;` : `left: ${xPx}px;`;
-        const posV = flipV ? `bottom: ${window.innerHeight - yPx}px;` : `top: ${yPx}px;`;
+        const posH = flipH ? `right: ${clientWidthPx - xPx}px;` : `left: ${xPx}px;`;
+        const posV = flipV ? `bottom: ${clientHeightPx - yPx}px;` : `top: ${yPx}px;`;
         const position = ((_h = attrs.options) === null || _h === void 0 ? void 0 : _h.isWithinDialog)
             ? `fixed`
             : `absolute`;

package/dist/esm/{src/components → components}/menu/Menu.js

@@ -20,14 +20,22 @@ exports.Menu = {
     },
     view({ attrs, children }) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        const maxWidthPx = Math.min(window.innerWidth, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
-        const maxHeightPx = window.innerHeight / 2;
+        // Use the document's client dimensions rather than window.innerWidth/innerHeight,
+        // since the menu's containing block (absolute/fixed) is bounded by the former;
+        // window.innerWidth/innerHeight include the scrollbar and would leave a gap after flipping.
+        const clientWidthPx = document.documentElement.clientWidth;
+        const clientHeightPx = document.documentElement.clientHeight;
+        const maxWidthPx = Math.min(clientWidthPx, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
+        const maxHeightPx = clientHeightPx / 2;
         const xPx = (_a = attrs.x) !== null && _a !== void 0 ? _a : 0;
         const yPx = (_b = attrs.y) !== null && _b !== void 0 ? _b : 0;
-        let flipH = ((xPx + menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX) > window.innerWidth);
+        // Flip based on maxWidthPx (the upper bound enforced by the max-width style below),
+        // not MIN_WIDTH_PX, since the menu's real rendered width can be anywhere up to maxWidthPx
+        // and isn't known until after layout.
+        let flipH = ((xPx + maxWidthPx) > clientWidthPx);
         let flipV = menu_settings_1.MENU_SETTINGS.ANCHOR === "page"
-            ? ((yPx + maxHeightPx - window.scrollY) > window.innerHeight)
-            : ((yPx + maxHeightPx) > window.innerHeight);
+            ? ((yPx + maxHeightPx - window.scrollY) > clientHeightPx)
+            : ((yPx + maxHeightPx) > clientHeightPx);
         if (((_c = attrs.options) === null || _c === void 0 ? void 0 : _c.noFlipH) === true)
             flipH = false;
         if (((_d = attrs.options) === null || _d === void 0 ? void 0 : _d.noFlipV) === true)
@@ -48,9 +56,8 @@ exports.Menu = {
         //   "window.innerHeight": window.innerHeight,
         //   "flipV": flipV,
         // });
-        // TODO: don't let the menu width actually touch the screen width; it will fall off the left hand side
-        const posH = flipH ? `right: ${window.innerWidth - xPx}px;` : `left: ${xPx}px;`;
-        const posV = flipV ? `bottom: ${window.innerHeight - yPx}px;` : `top: ${yPx}px;`;
+        const posH = flipH ? `right: ${clientWidthPx - xPx}px;` : `left: ${xPx}px;`;
+        const posV = flipV ? `bottom: ${clientHeightPx - yPx}px;` : `top: ${yPx}px;`;
         const position = ((_h = attrs.options) === null || _h === void 0 ? void 0 : _h.isWithinDialog)
             ? `fixed`
             : `absolute`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "UI components and utilities with Mithril",
   "author": "Ed Johnson, Hypericon Ltd",
   "license": "MIT",

package/dist/cjs/vitest.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfig;
-export default _default;

package/dist/cjs/vitest.config.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const config_1 = require("vitest/config");
-exports.default = (0, config_1.defineConfig)({
-    test: {
-        environment: "jsdom",
-        globals: true,
-        setupFiles: ["./src/tests/setup.ts"],
-        coverage: {
-            provider: "v8",
-            include: ["src/components/**", "src/utils/**"],
-            exclude: ["src/docs/**", "src/tests/**"],
-            thresholds: { statements: 80, branches: 70, functions: 80 },
-        },
-    },
-});

package/dist/esm/vitest.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite", { with: { "resolution-mode": "import" } }).UserConfig;
-export default _default;

package/dist/esm/vitest.config.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const config_1 = require("vitest/config");
-exports.default = (0, config_1.defineConfig)({
-    test: {
-        environment: "jsdom",
-        globals: true,
-        setupFiles: ["./src/tests/setup.ts"],
-        coverage: {
-            provider: "v8",
-            include: ["src/components/**", "src/utils/**"],
-            exclude: ["src/docs/**", "src/tests/**"],
-            thresholds: { statements: 80, branches: 70, functions: 80 },
-        },
-    },
-});