@orfium/ictinus 4.56.0 → 4.57.0

package/dist/components/DatePicker/DatePicker.js

@@ -207,19 +207,17 @@ var DatePicker = function DatePicker(_ref) {
     onClick: onCancel
   }, (0, _react2.jsx)(_PositionInScreen["default"], {
     visible: isOpen,
-    parent: function parent() {
-      return (0, _react2.jsx)(_DatePickInput["default"], {
-        filterConfig: filterConfig,
-        isRangePicker: isRangePicker,
-        selectedDay: selectedRange,
-        inputProps: inputProps,
-        dateFormatOverride: dateFormatOverride,
-        handleFocus: handleFocus,
-        handleClear: handleClear,
-        isOpen: isOpen,
-        dataTestId: dataTestId
-      });
-    }
+    parent: (0, _react2.jsx)(_DatePickInput["default"], {
+      filterConfig: filterConfig,
+      isRangePicker: isRangePicker,
+      selectedDay: selectedRange,
+      inputProps: inputProps,
+      dateFormatOverride: dateFormatOverride,
+      handleFocus: handleFocus,
+      handleClear: handleClear,
+      isOpen: isOpen,
+      dataTestId: dataTestId
+    })
   }, (0, _react2.jsx)("div", {
     css: (0, _DatePicker.datePickerStyles)()
   }, (0, _react2.jsx)(_OverlayComponent["default"], {

package/dist/components/DatePicker/utils.js

@@ -7,9 +7,15 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var currentDay = (0, _dayjs["default"])('11-03-2020 12:00:00');
+var fakeDate = (0, _dayjs["default"])('11-03-2020 12:00:00');
+
+var getDefaultDate = function getDefaultDate(date) {
+  return process.env.NODE_ENV !== 'test' ? date : fakeDate;
+};
+
+var currentDay = process.env.STORYBOOK_ENV === 'true' ? fakeDate : getDefaultDate((0, _dayjs["default"])());
 exports.currentDay = currentDay;
-var datepickerPropValue = process.env.NODE_ENV !== 'test' ? undefined : (0, _dayjs["default"])('11-03-2020 12:00:00');
+var datepickerPropValue = getDefaultDate();
 exports.datepickerPropValue = datepickerPropValue;
 
 var initDates = function initDates(value, isDefaultNow) {

package/dist/components/Select/Select.js

@@ -27,6 +27,8 @@ var _Select = require("./Select.style");
 
 var _Loader = _interopRequireDefault(require("../Loader"));
 
+var _PositionInScreen = _interopRequireDefault(require("../utils/PositionInScreen"));
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["handleSelectedOption", "defaultValue", "selectedOption", "multi", "options", "isAsync", "isLoading", "asyncSearch", "status", "minCharactersToSearch", "highlightSearch", "isSearchable", "isVirtualized", "styleType", "disabled", "locked", "dataTestId", "onClear"];
@@ -220,22 +222,27 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     css: (0, _Select.selectWrapper)({
       isSearchable: isSearchable
     })
-  }), (0, _react2.jsx)(_TextField["default"], _extends({
-    styleType: styleType,
-    rightIcon: rightIconRender,
-    onKeyDown: handleOnKeyDown,
-    onInput: handleOnInput,
-    onChange: ON_CHANGE_MOCK,
-    readOnly: !isSearchable,
-    disabled: disabled,
-    locked: locked,
-    dataTestId: (0, _helpers.generateTestDataId)('select-input', dataTestId)
-  }, restInputProps, {
-    status: status,
-    value: searchValue || inputValue.label,
-    ref: combinedRefs,
-    autoComplete: "off"
-  })), open && (0, _react2.jsx)(_SelectMenu["default"], {
+  }), (0, _react2.jsx)(_PositionInScreen["default"], {
+    visible: open,
+    hasWrapperWidth: true,
+    offsetY: 8,
+    parent: (0, _react2.jsx)(_TextField["default"], _extends({
+      styleType: styleType,
+      rightIcon: rightIconRender,
+      onKeyDown: handleOnKeyDown,
+      onInput: handleOnInput,
+      onChange: ON_CHANGE_MOCK,
+      readOnly: !isSearchable,
+      disabled: disabled,
+      locked: locked,
+      dataTestId: (0, _helpers.generateTestDataId)('select-input', dataTestId)
+    }, restInputProps, {
+      status: status,
+      value: searchValue || inputValue.label,
+      ref: combinedRefs,
+      autoComplete: "off"
+    }))
+  }, (0, _react2.jsx)(_SelectMenu["default"], {
     filteredOptions: filteredOptions,
     handleOptionClick: handleOptionClick,
     selectedOption: inputValue.value,
@@ -244,7 +251,7 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     isLoading: isLoading,
     isVirtualized: isVirtualized,
     searchTerm: highlightSearch ? searchValue : undefined
-  })));
+  }))));
 });
 
 Select.displayName = 'Select';

package/dist/components/utils/PositionInScreen/PositionInScreen.d.ts

@@ -1,10 +1,17 @@
 import React from 'react';
 declare type Props = {
+    /** Whether the item to be positioned is visible */
     visible: boolean;
+    /** Configures the container's overflow */
     withOverflow?: boolean;
+    /** Whether the item to be positioned uses the parent's wrapper width */
+    hasWrapperWidth?: boolean;
+    /** Additional offset-x */
     offsetX?: number;
+    /** Additional offset-y */
     offsetY?: number;
-    parent: any;
+    /** The parent element */
+    parent: JSX.Element;
 };
 declare const PositionInScreen: React.FC<Props>;
 export default PositionInScreen;

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

@@ -5,6 +5,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _hooks = require("./hooks");
+
 var _PositionInScreen = require("./PositionInScreen.style");
 
 var _react2 = require("@emotion/react");
@@ -13,82 +15,33 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var usePositionInScreen = function usePositionInScreen(parentRef, itemRef, visible) {
-  var _useState = (0, _react.useState)({
-    x: -1,
-    y: -1
-  }),
-      position = _useState[0],
-      setPosition = _useState[1];
-
-  (0, _react.useEffect)(function () {
-    var _parentRef$current, _parentRef$current2, _itemRef$current, _itemRef$current$chil;
-
-    var _ref = parentRef != null && parentRef.current ? parentRef == null ? void 0 : (_parentRef$current = parentRef.current) == null ? void 0 : _parentRef$current.getBoundingClientRect() : {
-      x: 0,
-      y: 0
-    },
-        itemX = _ref.x,
-        itemY = _ref.y;
-
-    var parrentOffsetHeight = (parentRef == null ? void 0 : (_parentRef$current2 = parentRef.current) == null ? void 0 : _parentRef$current2.offsetHeight) || 0;
-
-    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;
-
-    var itemYOutOfScreenHeight = itemY + parrentOffsetHeight + height > window.innerHeight;
-
-    if (itemYOutOfScreenHeight) {
-      itemY -= height;
-
-      if (itemY < 0) {
-        itemY = 0;
-      }
-    } else {
-      itemY += parrentOffsetHeight;
-    }
-
-    var itemXOutOfScreenWidth = itemX + width > window.innerWidth;
-
-    if (itemXOutOfScreenWidth) {
-      itemX = window.innerWidth - width;
-    }
-
-    setPosition({
-      x: itemX,
-      y: itemY
-    });
-  }, [parentRef, itemRef, visible]);
-  return position;
-};
-
-var PositionInScreen = function PositionInScreen(_ref3) {
-  var visible = _ref3.visible,
-      parent = _ref3.parent,
-      withOverflow = _ref3.withOverflow,
-      _ref3$offsetX = _ref3.offsetX,
-      offsetX = _ref3$offsetX === void 0 ? 0 : _ref3$offsetX,
-      _ref3$offsetY = _ref3.offsetY,
-      offsetY = _ref3$offsetY === void 0 ? 0 : _ref3$offsetY,
-      children = _ref3.children;
+var PositionInScreen = function PositionInScreen(_ref) {
+  var visible = _ref.visible,
+      parent = _ref.parent,
+      withOverflow = _ref.withOverflow,
+      _ref$hasWrapperWidth = _ref.hasWrapperWidth,
+      hasWrapperWidth = _ref$hasWrapperWidth === void 0 ? false : _ref$hasWrapperWidth,
+      _ref$offsetX = _ref.offsetX,
+      offsetX = _ref$offsetX === void 0 ? 0 : _ref$offsetX,
+      _ref$offsetY = _ref.offsetY,
+      offsetY = _ref$offsetY === void 0 ? 0 : _ref$offsetY,
+      children = _ref.children;
   var wrapperRef = (0, _react.useRef)(null);
   var itemRef = (0, _react.useRef)(null);
 
-  var _usePositionInScreen = usePositionInScreen(wrapperRef, itemRef, visible),
+  var _useWrapperWidth = (0, _hooks.useWrapperWidth)(hasWrapperWidth, wrapperRef),
+      wrapperWidth = _useWrapperWidth[0];
+
+  var _usePositionInScreen = (0, _hooks.usePositionInScreen)(wrapperRef, itemRef, offsetX, offsetY, visible),
       x = _usePositionInScreen.x,
       y = _usePositionInScreen.y;
 
   var showTooltip = visible && x !== -1 && y !== -1;
-  var ParentComp = parent;
   return (0, _react2.jsx)("div", {
     css: (0, _PositionInScreen.container)(withOverflow, showTooltip),
     ref: wrapperRef
-  }, (0, _react2.jsx)(ParentComp, null), showTooltip && (0, _react2.jsx)("div", {
-    css: (0, _PositionInScreen.itemContainer)(x + offsetX, y + offsetY),
+  }, parent, showTooltip && (0, _react2.jsx)("div", {
+    css: (0, _PositionInScreen.itemContainer)(x, y, wrapperWidth),
     id: 'unique-tooltip-id',
     ref: itemRef
   }, children));

package/dist/components/utils/PositionInScreen/PositionInScreen.style.d.ts

@@ -1,4 +1,3 @@
 import { SerializedStyles } from '@emotion/react';
-import { Theme } from '../../../theme';
-export declare const container: (withOverflow?: boolean | undefined, visible?: boolean | undefined) => (theme: Theme) => SerializedStyles;
-export declare const itemContainer: (clientX: number, clientY: number) => (theme: Theme) => SerializedStyles;
+export declare const container: (withOverflow?: boolean | undefined, visible?: boolean | undefined) => () => SerializedStyles;
+export declare const itemContainer: (clientX: number, clientY: number, width?: number | undefined) => () => SerializedStyles;

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

@@ -5,26 +5,28 @@ exports.itemContainer = exports.container = void 0;
 
 var _react = require("@emotion/react");
 
+var _polished = require("polished");
+
 var container = function container(withOverflow, visible) {
-  return function (theme) {
+  return function () {
     return (
       /*#__PURE__*/
 
       /*#__PURE__*/
-      (0, _react.css)("overflow:", withOverflow ? 'hidden' : 'inherit', ";text-overflow:", withOverflow ? 'ellipsis' : 'inherit', ";width:100%;height:inherit;#unique-tooltip-id{display:", visible ? 'block !important' : 'none !important', ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:container;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTTBCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAnLi4vLi4vLi4vdGhlbWUnO1xuXG5leHBvcnQgY29uc3QgY29udGFpbmVyID0gKHdpdGhPdmVyZmxvdz86IGJvb2xlYW4sIHZpc2libGU/OiBib29sZWFuKSA9PiAoXG4gIHRoZW1lOiBUaGVtZVxuKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIG92ZXJmbG93OiAke3dpdGhPdmVyZmxvdyA/ICdoaWRkZW4nIDogJ2luaGVyaXQnfTtcbiAgdGV4dC1vdmVyZmxvdzogJHt3aXRoT3ZlcmZsb3cgPyAnZWxsaXBzaXMnIDogJ2luaGVyaXQnfTtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogaW5oZXJpdDtcblxuICAjdW5pcXVlLXRvb2x0aXAtaWQge1xuICAgIGRpc3BsYXk6ICR7dmlzaWJsZSA/ICdibG9jayAhaW1wb3J0YW50JyA6ICdub25lICFpbXBvcnRhbnQnfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGl0ZW1Db250YWluZXIgPSAoY2xpZW50WDogbnVtYmVyLCBjbGllbnRZOiBudW1iZXIpID0+IChcbiAgdGhlbWU6IFRoZW1lXG4pOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgcG9zaXRpb246IGZpeGVkO1xuICBvcGFjaXR5OiAxICFpbXBvcnRhbnQ7XG4gIHRvcDogJHtjbGllbnRZICsgJ3B4J307XG4gIGxlZnQ6ICR7Y2xpZW50WCArICdweCd9O1xuICB6LWluZGV4OiA5OTk5OTk5OTk7XG4gIHdpZHRoOiBmaXQtY29udGVudDtcbiAgaGVpZ2h0OiBmaXQtY29udGVudDtcbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:container;")
+      (0, _react.css)("overflow:", withOverflow ? 'hidden' : 'inherit', ";text-overflow:", withOverflow ? 'ellipsis' : 'inherit', ";width:100%;height:inherit;position:relative;#unique-tooltip-id{display:", visible ? 'block !important' : 'none !important', ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:container;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSUsiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdXRpbHMvUG9zaXRpb25JblNjcmVlbi9Qb3NpdGlvbkluU2NyZWVuLnN0eWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3BvbGlzaGVkJztcblxuZXhwb3J0IGNvbnN0IGNvbnRhaW5lciA9ICh3aXRoT3ZlcmZsb3c/OiBib29sZWFuLCB2aXNpYmxlPzogYm9vbGVhbikgPT4gKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT5cbiAgY3NzYFxuICAgIG92ZXJmbG93OiAke3dpdGhPdmVyZmxvdyA/ICdoaWRkZW4nIDogJ2luaGVyaXQnfTtcbiAgICB0ZXh0LW92ZXJmbG93OiAke3dpdGhPdmVyZmxvdyA/ICdlbGxpcHNpcycgOiAnaW5oZXJpdCd9O1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogaW5oZXJpdDtcbiAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG5cbiAgICAjdW5pcXVlLXRvb2x0aXAtaWQge1xuICAgICAgZGlzcGxheTogJHt2aXNpYmxlID8gJ2Jsb2NrICFpbXBvcnRhbnQnIDogJ25vbmUgIWltcG9ydGFudCd9O1xuICAgIH1cbiAgYDtcblxuZXhwb3J0IGNvbnN0IGl0ZW1Db250YWluZXIgPVxuICAoY2xpZW50WDogbnVtYmVyLCBjbGllbnRZOiBudW1iZXIsIHdpZHRoPzogbnVtYmVyKSA9PiAoKTogU2VyaWFsaXplZFN0eWxlcyA9PlxuICAgIGNzc2BcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIG9wYWNpdHk6IDEgIWltcG9ydGFudDtcbiAgICAgIHRvcDogJHtjbGllbnRZICsgJ3B4J307XG4gICAgICBsZWZ0OiAke2NsaWVudFggKyAncHgnfTtcbiAgICAgIHotaW5kZXg6IDk5OTk5OTk5OTtcbiAgICAgIHdpZHRoOiAke3dpZHRoID8gcmVtKHdpZHRoKSA6IGBmaXQtY29udGVudGB9O1xuICAgICAgaGVpZ2h0OiBmaXQtY29udGVudDtcbiAgICBgO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:container;")
     );
   };
 };
 
 exports.container = container;
 
-var itemContainer = function itemContainer(clientX, clientY) {
-  return function (theme) {
+var itemContainer = function itemContainer(clientX, clientY, width) {
+  return function () {
     return (
       /*#__PURE__*/
 
       /*#__PURE__*/
-      (0, _react.css)("position:fixed;opacity:1!important;top:", clientY + 'px', ";left:", clientX + 'px', ";z-index:999999999;width:fit-content;height:fit-content;" + (process.env.NODE_ENV === "production" ? "" : ";label:itemContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUIwQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy91dGlscy9Qb3NpdGlvbkluU2NyZWVuL1Bvc2l0aW9uSW5TY3JlZW4uc3R5bGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL3RoZW1lJztcblxuZXhwb3J0IGNvbnN0IGNvbnRhaW5lciA9ICh3aXRoT3ZlcmZsb3c/OiBib29sZWFuLCB2aXNpYmxlPzogYm9vbGVhbikgPT4gKFxuICB0aGVtZTogVGhlbWVcbik6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBvdmVyZmxvdzogJHt3aXRoT3ZlcmZsb3cgPyAnaGlkZGVuJyA6ICdpbmhlcml0J307XG4gIHRleHQtb3ZlcmZsb3c6ICR7d2l0aE92ZXJmbG93ID8gJ2VsbGlwc2lzJyA6ICdpbmhlcml0J307XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IGluaGVyaXQ7XG5cbiAgI3VuaXF1ZS10b29sdGlwLWlkIHtcbiAgICBkaXNwbGF5OiAke3Zpc2libGUgPyAnYmxvY2sgIWltcG9ydGFudCcgOiAnbm9uZSAhaW1wb3J0YW50J307XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBpdGVtQ29udGFpbmVyID0gKGNsaWVudFg6IG51bWJlciwgY2xpZW50WTogbnVtYmVyKSA9PiAoXG4gIHRoZW1lOiBUaGVtZVxuKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgb3BhY2l0eTogMSAhaW1wb3J0YW50O1xuICB0b3A6ICR7Y2xpZW50WSArICdweCd9O1xuICBsZWZ0OiAke2NsaWVudFggKyAncHgnfTtcbiAgei1pbmRleDogOTk5OTk5OTk5O1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG4gIGhlaWdodDogZml0LWNvbnRlbnQ7XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:itemContainer;")
+      (0, _react.css)("position:absolute;opacity:1!important;top:", clientY + 'px', ";left:", clientX + 'px', ";z-index:999999999;width:", width ? (0, _polished.rem)(width) : "fit-content", ";height:fit-content;" + (process.env.NODE_ENV === "production" ? "" : ";label:itemContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0JPIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5cbmV4cG9ydCBjb25zdCBjb250YWluZXIgPSAod2l0aE92ZXJmbG93PzogYm9vbGVhbiwgdmlzaWJsZT86IGJvb2xlYW4pID0+ICgpOiBTZXJpYWxpemVkU3R5bGVzID0+XG4gIGNzc2BcbiAgICBvdmVyZmxvdzogJHt3aXRoT3ZlcmZsb3cgPyAnaGlkZGVuJyA6ICdpbmhlcml0J307XG4gICAgdGV4dC1vdmVyZmxvdzogJHt3aXRoT3ZlcmZsb3cgPyAnZWxsaXBzaXMnIDogJ2luaGVyaXQnfTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IGluaGVyaXQ7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgI3VuaXF1ZS10b29sdGlwLWlkIHtcbiAgICAgIGRpc3BsYXk6ICR7dmlzaWJsZSA/ICdibG9jayAhaW1wb3J0YW50JyA6ICdub25lICFpbXBvcnRhbnQnfTtcbiAgICB9XG4gIGA7XG5cbmV4cG9ydCBjb25zdCBpdGVtQ29udGFpbmVyID1cbiAgKGNsaWVudFg6IG51bWJlciwgY2xpZW50WTogbnVtYmVyLCB3aWR0aD86IG51bWJlcikgPT4gKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT5cbiAgICBjc3NgXG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBvcGFjaXR5OiAxICFpbXBvcnRhbnQ7XG4gICAgICB0b3A6ICR7Y2xpZW50WSArICdweCd9O1xuICAgICAgbGVmdDogJHtjbGllbnRYICsgJ3B4J307XG4gICAgICB6LWluZGV4OiA5OTk5OTk5OTk7XG4gICAgICB3aWR0aDogJHt3aWR0aCA/IHJlbSh3aWR0aCkgOiBgZml0LWNvbnRlbnRgfTtcbiAgICAgIGhlaWdodDogZml0LWNvbnRlbnQ7XG4gICAgYDtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:itemContainer;")
     );
   };
 };

package/dist/components/utils/PositionInScreen/hooks.d.ts

@@ -0,0 +1,5 @@
+export declare const usePositionInScreen: (parentRef: React.MutableRefObject<any>, itemRef: React.MutableRefObject<any>, offsetX: number, offsetY: number, visible?: boolean | undefined) => {
+    x: number;
+    y: number;
+};
+export declare const useWrapperWidth: (hasWrapperWidth: boolean, wrapperRef: React.MutableRefObject<any>) => (number | undefined)[];

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/package.json

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