@orfium/ictinus 4.56.1 → 4.58.0

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

@@ -0,0 +1,98 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useWrapperWidth = exports.usePositionInScreen = void 0;
+
+var _react = require("react");
+
+var usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offsetX, offsetY, visible) {
+  var _useState = (0, _react.useState)({
+    x: -1,
+    y: -1
+  }),
+      position = _useState[0],
+      setPosition = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    var _parentRef$current, _itemRef$current, _itemRef$current$chil;
+
+    // x,y are cordinates in screen
+    // width, height are 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
+    },
+        parentX = _ref.x,
+        parentY = _ref.y,
+        parentWidth = _ref.width,
+        parentHeight = _ref.height; // 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
+    },
+        width = _ref2.width,
+        height = _ref2.height; // 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
+    // container. So x,y are zero means the element will be positioned exactly on top
+    // of the parent element.
+
+    var x = 0;
+    var y = 0;
+
+    if (itemYOutOfScreenHeight) {
+      // We place the element height+offsetY (px) above the parent
+      y = y - height - offsetY;
+
+      if (parentY + y < 0) {
+        // Rare case where client height is super small. We don't exactly support this.
+        // So we render it as if it was inside the screen height
+        y = parentHeight + offsetY;
+      }
+    } else {
+      // We place the element offsetY (px) under the parent
+      y = parentHeight + offsetY;
+    } // If the item-to-be-positioned is out of screen width
+
+
+    var itemXOutOfScreenWidth = parentX + width > window.innerWidth;
+
+    if (itemXOutOfScreenWidth) {
+      // We place the element parentWidth-width-offsetX (px) at the left of the parent
+      x = x + parentWidth - width - offsetX;
+    } else {
+      // We place the element offset (px) at the right of the parent
+      x = offsetX;
+    }
+
+    setPosition({
+      x: x,
+      y: y
+    });
+  }, [parentRef, itemRef, visible, offsetY, offsetX]);
+  return position;
+};
+
+exports.usePositionInScreen = usePositionInScreen;
+
+var useWrapperWidth = function useWrapperWidth(hasWrapperWidth, wrapperRef) {
+  var _useState2 = (0, _react.useState)(),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (hasWrapperWidth) {
+      var _wrapperRef$current, _wrapperRef$current$g;
+
+      setWidth(wrapperRef == null ? void 0 : (_wrapperRef$current = wrapperRef.current) == null ? void 0 : (_wrapperRef$current$g = _wrapperRef$current.getBoundingClientRect()) == null ? void 0 : _wrapperRef$current$g.width);
+    }
+  }, [hasWrapperWidth, wrapperRef]);
+  return [width];
+};
+
+exports.useWrapperWidth = useWrapperWidth;

package/dist/utils/size-utils.d.ts

@@ -1,6 +1,7 @@
 import { Theme } from '../theme';
 declare type Size = 'md' | 'sm';
 export declare const DEFAULT_SIZE: Size;
+export declare const getTextFieldHeight: (size?: Size | undefined) => string;
 export declare const getTextFieldSize: (hasMinWidthCompat?: boolean, size?: Size | undefined) => {
     minWidth?: string;
     height: string;

package/dist/utils/size-utils.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.getSpacingBySize = exports.getTextFieldSize = exports.DEFAULT_SIZE = void 0;
+exports.getSpacingBySize = exports.getTextFieldSize = exports.getTextFieldHeight = exports.DEFAULT_SIZE = void 0;
 
 var _polished = require("polished");
 
@@ -23,6 +23,8 @@ var getTextFieldHeight = function getTextFieldHeight(size) {
   }
 };
 
+exports.getTextFieldHeight = getTextFieldHeight;
+
 var getTextFieldWidth = function getTextFieldWidth(size) {
   switch (size) {
     case 'md':

package/package.json

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