@xh/hoist 63.0.1 → 63.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 63.0.2 - 2024-04-16
+
+### 🐞 Bug Fixes
+
+* Fixed issue with GroupingChooser: dragged items were not correctly positioned.
+* Removed extraneous internal padding override to Blueprint menu styles. Fixes overhang of menu
+divider borders and avoids possible triggering of horizontal scrollbars.
+
 ## 63.0.1 - 2024-04-05
 
 ### 🐞 Bug Fixes

package/desktop/cmp/grouping/GroupingChooser.ts

@@ -195,7 +195,11 @@ const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
                 let transform = dndProps.draggableProps.style.transform;
                 if (dndState.isDragging || dndState.isDropAnimating) {
                     let rowValues = parseTransform(transform),
-                        popoverValues = parseTransform(model.popoverRef.current.style.transform);
+                        pPos = model.popoverRef.current.getBoundingClientRect(),
+                        popoverValues = {
+                            x: pPos.left,
+                            y: pPos.top
+                        };
 
                     // Account for drop animation
                     if (dndState.isDropAnimating) {
@@ -204,9 +208,9 @@ const dimensionRow = hoistCmp.factory<GroupingChooserModel>({
                     }
 
                     // Subtract the popover's X / Y translation from the row's
-                    if (!isEmpty(rowValues) && !isEmpty(popoverValues)) {
-                        const x = rowValues[0] - popoverValues[0],
-                            y = rowValues[1] - popoverValues[1];
+                    if (!isEmpty(rowValues)) {
+                        const x = rowValues[0] - popoverValues.x,
+                            y = rowValues[1] - popoverValues.y;
                         transform = `translate(${x}px, ${y}px)`;
                     }
                 }
@@ -288,7 +292,7 @@ const addDimensionControl = hoistCmp.factory<GroupingChooserModel>({
  * Works for both `translate` and `translate3d`
  * e.g. `translate3d(250px, 150px, 0px)` is equivalent to [250, 150, 0]
  */
-function parseTransform(transformStr) {
+function parseTransform(transformStr: string): number[] {
     return transformStr
         ?.replace('3d', '')
         .match(/[-]{0,1}[\d]*[.]{0,1}[\d]+/g)

package/kit/blueprint/styles.scss

@@ -64,9 +64,9 @@ $pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9) !default;
 $pt-transition-ease-bounce: cubic-bezier(0.54, 1.12, 0.38, 1.11) !default;
 $pt-transition-duration: 100ms !default;
 
-// This override is taken from the popover source SCSS - there it is scoped under the minimal class.
-// https://github.com/palantir/blueprint/blob/1bfd1e42303d2626bfc3923eec2195ab4dc696d2/packages/core/src/components/popover/_popover.scss#L54
 .bp5-popover {
+  // This override is taken from the popover source SCSS - there it is scoped under the minimal class.
+  // https://github.com/palantir/blueprint/blob/1bfd1e42303d2626bfc3923eec2195ab4dc696d2/packages/core/src/components/popover/_popover.scss#L54
   @include react-transition(
     'bp5-popover',
     (
@@ -85,7 +85,13 @@ $pt-transition-duration: 100ms !default;
   background-color: var(--xh-menu-bg);
   border: var(--xh-menu-border);
   color: var(--xh-menu-item-text-color);
-  padding: 5px 0;
+
+  // Constrain menu height to the viewport, for menus with more items than will fit vertically.
+  // Note that this is not perfect - menus are shown relative to their target, and if a menu is
+  // in the middle of the page and forced to render above/below the target, it can still clip.
+  // The 100px offset is designed to account for menus shown from app/tab-level top/bottom toolbars.
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
 
   .bp5-menu-item {
     // Default alignment of flex-start leaves Hoist icons shifted up - could target

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "63.0.1",
+  "version": "63.0.2",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",