@canvas-components/react-components 0.3.6 → 0.3.7

package/dist/index.cjs

@@ -319,6 +319,7 @@ function ReactPopup(props) {
     style,
     surfaceClassName,
     surfaceStyle,
+    constrainHeight = false,
     zIndex = 1200
   } = props;
   const { scale: contentScale } = useReactContentScale();
@@ -340,6 +341,7 @@ function ReactPopup(props) {
         return;
       }
       const nextPosition = resolvePopupPosition({
+        constrainHeight,
         anchor: nextAnchor,
         contentScale,
         matchAnchorWidth,
@@ -349,7 +351,7 @@ function ReactPopup(props) {
         popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
       });
       setPosition((prev) => {
-        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
+        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth && prev?.style.maxHeight === nextPosition.style.maxHeight) {
           return prev;
         }
         return nextPosition;
@@ -376,6 +378,7 @@ function ReactPopup(props) {
     anchorRect,
     anchorRef,
     contentScale,
+    constrainHeight,
     matchAnchorWidth,
     minWidth,
     offset,
@@ -392,6 +395,7 @@ function ReactPopup(props) {
         return;
       }
       const nextPosition = resolvePopupPosition({
+        constrainHeight,
         anchor: nextAnchor,
         contentScale,
         matchAnchorWidth,
@@ -401,7 +405,7 @@ function ReactPopup(props) {
         popupRect: resolvePopupSurfaceRect(surfaceRef.current, contentScale)
       });
       setPosition((prev) => {
-        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth) {
+        if (prev?.placement === nextPosition.placement && prev?.style.left === nextPosition.style.left && prev?.style.top === nextPosition.style.top && prev?.style.width === nextPosition.style.width && prev?.style.minWidth === nextPosition.style.minWidth && prev?.style.maxHeight === nextPosition.style.maxHeight) {
           return prev;
         }
         return nextPosition;
@@ -419,6 +423,7 @@ function ReactPopup(props) {
     anchorRect,
     anchorRef,
     contentScale,
+    constrainHeight,
     matchAnchorWidth,
     minWidth,
     offset,
@@ -484,7 +489,7 @@ function ReactPopup(props) {
               transition.className,
               surfaceClassName
             ),
-            style: surfaceStyle,
+            style: resolvePopupSurfaceStyle(surfaceStyle, position.style.maxHeight),
             children
           }
         )
@@ -513,7 +518,8 @@ function resolvePopupPosition(params) {
     matchAnchorWidth ? anchor.width : 0
   );
   const popupWidth = preferredVisualWidth;
-  const popupHeight = popupRect?.height ?? 0;
+  const maxVisualHeight = Math.max(0, viewportHeight - margin * 2);
+  const popupHeight = params.constrainHeight ? Math.min(popupRect?.height ?? 0, maxVisualHeight) : popupRect?.height ?? 0;
   const isHorizontalPlacement = placement.startsWith("left") || placement.startsWith("right");
   const preferredVertical = placement.startsWith("top") ? "top" : placement.endsWith("Top") ? "top" : "bottom";
   const preferredTop = resolveRawTop({
@@ -558,6 +564,7 @@ function resolvePopupPosition(params) {
       vertical: resolvedVertical
     }),
     style: {
+      ...params.constrainHeight ? { maxHeight: toContentLayoutSize(maxVisualHeight, contentScale) } : {},
       left,
       top,
       width: matchAnchorWidth ? layoutAnchorWidth : void 0,
@@ -565,6 +572,19 @@ function resolvePopupPosition(params) {
     }
   };
 }
+function resolvePopupSurfaceStyle(style, viewportMaxHeight) {
+  if (typeof viewportMaxHeight !== "number") return style;
+  const custom = style?.maxHeight;
+  const maxHeight = typeof custom === "number" ? Math.min(custom, viewportMaxHeight) : typeof custom === "string" && custom !== "none" ? `min(${custom}, ${viewportMaxHeight}px)` : viewportMaxHeight;
+  return {
+    ...style,
+    boxSizing: "border-box",
+    minHeight: 0,
+    maxHeight,
+    overflowY: "auto",
+    overscrollBehaviorY: "contain"
+  };
+}
 function resolvePlacement(params) {
   const { horizontal, isHorizontalPlacement, vertical } = params;
   if (isHorizontalPlacement) {