goblin-magic 1.0.13 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goblin-magic",
-  "version": "1.0.13",
+  "version": "1.3.0",
   "description": "goblin-magic",
   "author": "Epsitec SA",
   "contributors": [

package/widgets/magic-navigation/service.js

@@ -613,13 +613,18 @@ class MagicNavigation extends Elf {
   /**
    * @param {id} parentId
    * @param {string} prompt
-   * @param {string} [advice]
-   * @param {string} [okLabel]
-   * @param {string} [cancelLabel]
-   * @param {string} [initialValue]
-   * @returns {Promise<any>}
+   * @param {object} [options]
+   * @param {string} [options.advice]
+   * @param {string} [options.okLabel]
+   * @param {string} [options.cancelLabel]
+   * @param {string} [options.initialValue]
+   * @returns {Promise<string>}
    */
-  async prompt(parentId, prompt, advice, okLabel, cancelLabel, initialValue) {
+  async prompt(
+    parentId,
+    prompt,
+    {advice, okLabel, cancelLabel, initialValue} = {}
+  ) {
     const dialogId = await this.openDialog(
       {
         widget: 'PromptDialog',

package/widgets/magic-number-field/styles.js

@@ -1,5 +1,6 @@
 export default function styles() {
   const numberField = {
+    'flexGrow': 1,
     '&[class]' /* increase specificity */: {
       width: '90px',
     },

package/widgets/menu/styles.js

@@ -65,6 +65,10 @@ export default function styles() {
     },
   };
 
+  const menuDiv = {
+    padding: '6px 8px',
+  };
+
   const menuDialog = {
     '::backdrop': {
       backgroundColor: 'transparent',
@@ -146,6 +150,7 @@ export default function styles() {
     menuItem,
     menuItemRight,
     menuTitle,
+    menuDiv,
     menuDialog,
     menuPosition,
     menuContent,

package/widgets/menu/widget.js

@@ -96,6 +96,25 @@ class MenuTitle extends Widget {
   }
 }
 
+class MenuDiv extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    const {className = '', children, ...props} = this.props;
+    return (
+      <div
+        {...props}
+        className={this.styles.classNames.menuDiv + ' ' + className}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
 class Submenu extends Widget {
   constructor() {
     super(...arguments);
@@ -299,7 +318,19 @@ class MenuContent extends Widget {
       const firstTop = firstPos === 'top';
 
       if (size.height > window.innerHeight) {
-        return 'full';
+        if (state.fromContextMenu) {
+          return 'full';
+        }
+
+        // Prevent overlap on the button
+        const spaceAbove = top;
+        const spaceBelow = window.innerHeight - bottom;
+
+        if (firstBottom || (!firstTop && spaceBelow >= spaceAbove)) {
+          return 'bottom-constrained'; // Open to the bottom
+        } else {
+          return 'top-constrained'; // Open to the top
+        }
       }
 
       if (firstBottom || firstTop) {
@@ -349,6 +380,8 @@ class MenuContent extends Widget {
       'start': {top: 0},
       'end': {bottom: 0},
       'full': {top: 0, bottom: 0},
+      'bottom-constrained': {top: bottom, bottom: '8px'},
+      'top-constrained': {top: '8px', bottom: `calc(100% - ${top}px)`},
     }[verticalPos];
 
     const horizontalPos = (() => {
@@ -518,6 +551,7 @@ export default class Menu extends Widget {
   }
 
   close() {
+    this.props.onClose?.();
     this.setState({open: false});
   }
 
@@ -569,6 +603,7 @@ export default class Menu extends Widget {
   static Content = MenuContent;
   static Item = MenuItem;
   static Title = MenuTitle;
+  static Div = MenuDiv;
   static Submenu = Submenu;
   static Hr = MenuHr;
   static Button = MenuButton;