@orfium/ictinus 4.62.0 → 4.62.1

package/dist/components/utils/PositionInScreen/hooks.js

@@ -9,17 +9,16 @@ var _react = require("react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offsetX, offsetY, visible) {
-  var _useState = (0, _react.useState)({
-    x: -1,
-    y: -1
-  }),
-      position = _useState[0],
-      setPosition = _useState[1];
+var useHeights = function useHeights(parentRef, itemRef) {
+  var _itemRef$current2;
+
+  var _useState = (0, _react.useState)(0),
+      parentHeight = _useState[0],
+      setParentHeight = _useState[1];
 
   var _useState2 = (0, _react.useState)(0),
-      parentHeight = _useState2[0],
-      setParentHeight = _useState2[1];
+      childHeight = _useState2[0],
+      setChildHeight = _useState2[1];
   /**
    * We use this ResizeObserver in order to track any changes on the parent's height:
    * This is necessary for the case of the MultiSelect, where the height of the TextField is dynamic
@@ -30,45 +29,81 @@ var usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offse
 
   (0, _react.useEffect)(function () {
     if (!parentRef.current) return;
-    var resizeObserver = new ResizeObserver(function (entries) {
+    var parentResizeObserver = new ResizeObserver(function (entries) {
       var parent = (0, _head["default"])(entries);
 
       if (parent) {
         setParentHeight(parent.contentRect.height);
       }
     });
-    resizeObserver.observe(parentRef.current);
+    parentResizeObserver.observe(parentRef.current);
     return function () {
-      return resizeObserver.disconnect();
+      return parentResizeObserver.disconnect();
     };
   }, [parentRef]);
+  /**
+   * Same here to track the child's height:
+   * This is necessary for the case where the SelectMenu is rendered above the TextField, we need to track the
+   * dynamic height of the SelectMenu in order to keep the gap between SelectMenu and TextField fixed.
+   */
+
+  (0, _react.useEffect)(function () {
+    var _itemRef$current;
+
+    var dropdownElement = (0, _head["default"])((_itemRef$current = itemRef.current) == null ? void 0 : _itemRef$current.children);
+    if (!dropdownElement) return;
+    var childResizeObserver = new ResizeObserver(function (entries) {
+      var dropdown = (0, _head["default"])(entries);
+
+      if (dropdown) {
+        setChildHeight(dropdown.contentRect.height);
+      }
+    });
+    childResizeObserver.observe(dropdownElement);
+    return function () {
+      return childResizeObserver.disconnect();
+    };
+  }, [itemRef, (_itemRef$current2 = itemRef.current) == null ? void 0 : _itemRef$current2.children]);
+  return {
+    parentHeight: parentHeight,
+    childHeight: childHeight
+  };
+};
+
+var usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offsetX, offsetY, visible) {
+  var _useState3 = (0, _react.useState)({
+    x: -1,
+    y: -1
+  }),
+      position = _useState3[0],
+      setPosition = _useState3[1];
+
+  var _useHeights = useHeights(parentRef, itemRef),
+      parentHeight = _useHeights.parentHeight,
+      childHeight = _useHeights.childHeight;
+
   (0, _react.useEffect)(function () {
-    var _parentRef$current, _itemRef$current, _itemRef$current$chil;
+    var _parentRef$current, _itemRef$current3, _itemRef$current3$chi;
 
     // x,y are cordinates in screen
-    // width, height are wrapper elements dimensions
+    // width is wrapper elements dimensions
     var _ref = parentRef != null && parentRef.current ? parentRef == null ? void 0 : (_parentRef$current = parentRef.current) == null ? void 0 : _parentRef$current.getBoundingClientRect() : {
       x: 0,
       y: 0,
-      width: 0,
-      height: 0
+      width: 0
     },
         parentX = _ref.x,
         parentY = _ref.y,
-        parentWidth = _ref.width,
-        parentTempHeight = _ref.height;
+        parentWidth = _ref.width; // width is the element's that's going to be positioned dimensions
 
-    setParentHeight(parentTempHeight); // width, height are the element's that's going to be positioned dimensions
 
-    var _ref2 = itemRef != null && itemRef.current ? itemRef == null ? void 0 : (_itemRef$current = itemRef.current) == null ? void 0 : (_itemRef$current$chil = _itemRef$current.children[0]) == null ? void 0 : _itemRef$current$chil.getBoundingClientRect() : {
-      width: 0,
-      height: 0
+    var _ref2 = itemRef != null && itemRef.current ? itemRef == null ? void 0 : (_itemRef$current3 = itemRef.current) == null ? void 0 : (_itemRef$current3$chi = _itemRef$current3.children[0]) == null ? void 0 : _itemRef$current3$chi.getBoundingClientRect() : {
+      width: 0
     },
-        width = _ref2.width,
-        height = _ref2.height; // If the item-to-be-positioned is out of screen height
+        width = _ref2.width; // If the item-to-be-positioned is out of screen height
 
 
-    var itemYOutOfScreenHeight = parentY + parentHeight + height > window.innerHeight; // The element that we are positioning is absolutely positioned inside the relative
+    var itemYOutOfScreenHeight = parentY + parentHeight + childHeight > window.innerHeight; // The element that we are positioning is absolutely positioned inside the relative
     // container. So x,y are zero means the element will be positioned exactly on top
     // of the parent element.
 
@@ -77,7 +112,7 @@ var usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offse
 
     if (itemYOutOfScreenHeight) {
       // We place the element height+offsetY (px) above the parent
-      y = y - height - offsetY;
+      y = y - childHeight - offsetY;
 
       if (parentY + y < 0) {
         // Rare case where client height is super small. We don't exactly support this.
@@ -104,16 +139,16 @@ var usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offse
       x: x,
       y: y
     });
-  }, [parentRef, itemRef, visible, offsetY, offsetX, parentHeight]);
+  }, [parentRef, itemRef, visible, offsetY, offsetX, parentHeight, childHeight]);
   return position;
 };
 
 exports.usePositionInScreen = usePositionInScreen;
 
 var useWrapperWidth = function useWrapperWidth(hasWrapperWidth, wrapperRef) {
-  var _useState3 = (0, _react.useState)(),
-      width = _useState3[0],
-      setWidth = _useState3[1];
+  var _useState4 = (0, _react.useState)(),
+      width = _useState4[0],
+      setWidth = _useState4[1];
 
   (0, _react.useEffect)(function () {
     if (hasWrapperWidth) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "4.62.0",
+  "version": "4.62.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",