@orfium/ictinus 4.86.0-next.1 → 4.86.0-next.2

package/dist/components/Chart/LineChart/utils.js

@@ -2,22 +2,17 @@
 
 exports.__esModule = true;
 exports.getKeyNames = exports.colorPicker = void 0;
-var _flatten = _interopRequireDefault(require("lodash/flatten"));
-var _keys = _interopRequireDefault(require("lodash/keys"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
-var _sampleSize = _interopRequireDefault(require("lodash/sampleSize"));
-var _uniq = _interopRequireDefault(require("lodash/uniq"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _lodash = require("lodash");
 var getKeyNames = exports.getKeyNames = function getKeyNames(data) {
-  return (0, _uniq["default"])((0, _flatten["default"])(data.map(function (object) {
-    return (0, _keys["default"])((0, _omit["default"])(object, 'name'));
+  return (0, _lodash.uniq)((0, _lodash.flatten)(data.map(function (object) {
+    return (0, _lodash.keys)((0, _lodash.omit)(object, 'name'));
   })));
 };
 var colorPicker = exports.colorPicker = function colorPicker(_ref) {
   var theme = _ref.theme,
     uniqueKeyNames = _ref.uniqueKeyNames,
     color = _ref.color;
-  var colorSample = (0, _sampleSize["default"])(theme.palette.flat, uniqueKeyNames.length);
+  var colorSample = (0, _lodash.sampleSize)(theme.palette.flat, uniqueKeyNames.length);
   return uniqueKeyNames.reduce(function (acc, key, index) {
     var _colorSample$index;
     var definedColor = typeof color === 'function' && color(key) ? color(key) : (_colorSample$index = colorSample[index]) == null ? void 0 : _colorSample$index[400];

package/dist/components/DatePicker/DatePicker.js

@@ -8,7 +8,6 @@ var _DatePicker = require("./DatePicker.style");
 var _DatePickInput = _interopRequireDefault(require("./DatePickInput"));
 var _OverlayComponent = _interopRequireDefault(require("./OverlayComponent/OverlayComponent"));
 var _utils = require("./utils");
-var _ClickAwayListener = _interopRequireDefault(require("../utils/ClickAwayListener"));
 var _PositionInScreen = _interopRequireDefault(require("../utils/PositionInScreen"));
 var _react2 = require("@emotion/react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -171,10 +170,9 @@ var DatePicker = function DatePicker(_ref) {
   var onApply = (0, _react.useCallback)(function () {
     applyRangeAndClose(range);
   }, [applyRangeAndClose, range]);
-  return (0, _react2.jsx)(_ClickAwayListener["default"], {
-    onClick: onCancel
-  }, (0, _react2.jsx)(_PositionInScreen["default"], {
+  return (0, _react2.jsx)(_PositionInScreen["default"], {
     visible: isOpen,
+    setIsVisible: onCancel,
     parent: (0, _react2.jsx)(_DatePickInput["default"], {
       filterConfig: filterConfig,
       isRangePicker: isRangePicker,
@@ -198,6 +196,6 @@ var DatePicker = function DatePicker(_ref) {
     disabledDates: disableDates,
     onCancel: onCancel,
     onApply: onApply
-  }))));
+  })));
 };
 var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(DatePicker, _reactFastCompare["default"]);

package/dist/components/Filter/Filter.js

@@ -2,7 +2,7 @@
 
 exports.__esModule = true;
 exports["default"] = void 0;
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _lodash = require("lodash");
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../utils/helpers");
 var _FilterBase = _interopRequireDefault(require("./components/FilterBase"));
@@ -10,13 +10,12 @@ var _MultiFilter = _interopRequireDefault(require("./components/MultiFilter/Mult
 var _SingleFilter = _interopRequireDefault(require("./components/SingleFilter/SingleFilter"));
 var _useMultiFilterUtils2 = _interopRequireDefault(require("./hooks/useMultiFilterUtils"));
 var _utils = require("./utils");
-var _ClickAwayListener = _interopRequireDefault(require("../utils/ClickAwayListener"));
 var _handleSearch = _interopRequireDefault(require("../utils/handleSearch"));
 var _PositionInScreen = _interopRequireDefault(require("../utils/PositionInScreen/PositionInScreen"));
 var _react2 = require("@emotion/react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var Filter = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var items = props.items,
     onSelect = props.onSelect,
@@ -85,7 +84,10 @@ var Filter = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     handleOptionDelete = _useMultiFilterUtils.handleOptionDelete,
     handleClearAllOptions = _useMultiFilterUtils.handleClearAllOptions,
     handleMultiSelectOptionClick = _useMultiFilterUtils.handleMultiSelectOptionClick;
-  var handleChange = function handleChange(event) {
+  var debouncedOnChange = (0, _react.useCallback)((0, _lodash.debounce)(function (value) {
+    onAsyncSearch == null || onAsyncSearch(value);
+  }, 400), []);
+  var handleChange = (0, _react.useCallback)(function (event) {
     var isAsync = typeof onAsyncSearch === 'function';
     (0, _handleSearch["default"])({
       event: event,
@@ -95,7 +97,7 @@ var Filter = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       onChange: debouncedOnChange,
       minCharactersToSearch: minCharactersToSearch
     });
-  };
+  }, [debouncedOnChange, isSearchable, minCharactersToSearch, multi, onAsyncSearch]);
   var filteredOptions = (0, _react.useMemo)(function () {
     var optionsToBeFiltered = multi ? availableMultiFilters : items;
     if (onAsyncSearch) {
@@ -110,10 +112,9 @@ var Filter = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
     setSearchValue('');
     setIsOpen(!isOpen);
   };
-  var debouncedOnChange = _react["default"].useCallback((0, _debounce["default"])(function (value) {
-    onAsyncSearch == null || onAsyncSearch(value);
-  }, 400), []);
   var handleSelect = function handleSelect(option) {
+    debugger;
+    console.log('hey');
     if (multi) {
       handleMultiSelectOptionClick(option);
     } else {
@@ -133,6 +134,9 @@ var Filter = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       onClear();
     }
   };
+  console.log({
+    selectedItem: selectedItem
+  });
   var getFilter = function getFilter() {
     return multi ? (0, _react2.jsx)(_MultiFilter["default"], {
       selectedItems: multiFilters,
@@ -158,12 +162,9 @@ var Filter = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       shouldDisplayDefaultOption: shouldDisplayDefaultOption
     });
   };
-  return (0, _react2.jsx)(_ClickAwayListener["default"], {
-    onClick: function onClick() {
-      return setIsOpen(false);
-    }
-  }, (0, _react2.jsx)(_PositionInScreen["default"], {
+  return (0, _react2.jsx)(_PositionInScreen["default"], {
     visible: isOpen,
+    setIsVisible: setIsOpen,
     hasWrapperWidth: true,
     offsetY: 8,
     sx: {
@@ -187,7 +188,7 @@ var Filter = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       styleType: styleType,
       multi: multi
     })
-  }, getFilter()));
+  }, getFilter());
 });
 Filter.displayName = 'Filter';
 var _default = exports["default"] = Filter;

package/dist/components/Filter/hooks/useMultiFilterUtils.js

@@ -2,10 +2,9 @@
 
 exports.__esModule = true;
 exports["default"] = void 0;
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _lodash = require("lodash");
 var _react = require("react");
 var _constants = require("../../Select/constants");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var useMultiFilterUtils = function useMultiFilterUtils(_ref) {
   var multi = _ref.multi,
     _ref$selectedItems = _ref.selectedItems,
@@ -70,7 +69,7 @@ var useMultiFilterUtils = function useMultiFilterUtils(_ref) {
   }, [availableMultiFilters, multiFilters, onFilterDelete, updateMultiFilterLabel]);
   var handleMultiSelectOptionClick = function handleMultiSelectOptionClick(option) {
     var newItems = [];
-    if ((0, _isEqual["default"])(option, _constants.SELECT_ALL_OPTION)) {
+    if ((0, _lodash.isEqual)(option, _constants.SELECT_ALL_OPTION)) {
       newItems = [].concat(multiFilters, availableMultiFilters);
       setMultiFilters(newItems);
       setAvailableMultiFilters([]);

package/dist/components/List/NormalList/NormalList.js

@@ -2,7 +2,7 @@
 
 exports.__esModule = true;
 exports["default"] = void 0;
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+var _lodash = require("lodash");
 var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../../utils/helpers");
 var _List = require("../List.style");
@@ -54,7 +54,7 @@ var NormalList = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       disabled: item == null ? void 0 : item.isDisabled,
       dataTestId: defaultOption && index === 0 ? dataTestId != null ? dataTestId : 'ictinus_list' + '_default_option' : dataTestId,
       handleOptionClick: handleOptionClick,
-      selected: defaultOption && index === 0 ? (0, _isUndefined["default"])(selectedItem) || (0, _utils.isSelected)({
+      selected: defaultOption && index === 0 ? (0, _lodash.isUndefined)(selectedItem) || (0, _utils.isSelected)({
         item: defaultOption,
         selectedItem: selectedItem
       }) : (0, _utils.isSelected)({

package/dist/components/Menu/Menu.js

@@ -10,7 +10,6 @@ var _Avatar = _interopRequireDefault(require("../Avatar"));
 var _Button = _interopRequireDefault(require("../Button"));
 var _utils = require("../Button/utils");
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _ClickAwayListener = _interopRequireDefault(require("../utils/ClickAwayListener"));
 var _DropdownOptions = require("../utils/DropdownOptions");
 var _List = _interopRequireDefault(require("../List"));
 var _PositionInScreen = _interopRequireDefault(require("../utils/PositionInScreen"));
@@ -49,14 +48,11 @@ var Menu = function Menu(props) {
     calculateColorBetweenColorAndType = _useTypeColorToColorM.calculateColorBetweenColorAndType;
   var calculatedColor = calculateColorBetweenColorAndType(color, buttonType);
   var iconColor = filled ? theme.utils.getAAColorFromSwatches(calculatedColor.color, calculatedColor.shade) : (0, _utils.defineBackgroundColor)(theme, calculatedColor, buttonType, true, true);
-  return (0, _react2.jsx)(_ClickAwayListener["default"], {
-    onClick: function onClick() {
-      return setOpen(false);
-    }
-  }, (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     "data-testid": dataTestId
   }, (0, _react2.jsx)(_PositionInScreen["default"], {
     visible: open,
+    setIsVisible: setOpen,
     offsetY: 8,
     parent: (0, _react2.jsx)(_Button["default"], {
       size: size,
@@ -94,6 +90,6 @@ var Menu = function Menu(props) {
       setOpen(false);
       onSelect(option);
     }
-  })))));
+  }))));
 };
 var _default = exports["default"] = Menu;

package/dist/components/MultiTextFieldBase/MultiTextFieldBase.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));
-var _merge = _interopRequireDefault(require("lodash/merge"));
+var _lodash = require("lodash");
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../utils/helpers");
@@ -98,7 +98,7 @@ var MultiTextFieldBase = /*#__PURE__*/_react["default"].forwardRef(function (pro
     styleType: styleType
   }, rest, {
     isInteractive: isInteractive,
-    sx: (0, _merge["default"])((0, _MultiTextFieldBase.textInputBaseOverrides)({
+    sx: (0, _lodash.merge)((0, _MultiTextFieldBase.textInputBaseOverrides)({
       hasValue: hasValue,
       isLoading: isLoading,
       hasLabel: hasLabel,

package/dist/components/Select/Select.d.ts

@@ -104,9 +104,9 @@ declare const Select: React.ForwardRefExoticComponent<{
     onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined; /** TODO: defaultValue is duplication of selectedOption*/
     onInput?: ((event: any) => void) | undefined;
-    hasMinWidthCompat?: boolean | undefined;
+    hasMinWidthCompat?: boolean | undefined; /** the function to fetch new options */
     multi?: boolean | undefined;
     multiValues?: string[] | undefined;
     maxMultiValues?: number | undefined;

package/dist/components/Select/Select.js

@@ -5,15 +5,14 @@ exports["default"] = void 0;
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../utils/helpers");
+var _SelectMenu = _interopRequireDefault(require("./components/SelectMenu/SelectMenu"));
+var _useMultiselectUtils2 = _interopRequireDefault(require("./hooks/useMultiselectUtils"));
+var _Select = require("./Select.style");
 var _useCombinedRefs = _interopRequireDefault(require("../../hooks/useCombinedRefs"));
 var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _TextField = _interopRequireDefault(require("../TextField"));
-var _ClickAwayListener = _interopRequireDefault(require("../utils/ClickAwayListener"));
 var _handleSearch = _interopRequireDefault(require("../utils/handleSearch"));
-var _SelectMenu = _interopRequireDefault(require("./components/SelectMenu/SelectMenu"));
-var _useMultiselectUtils2 = _interopRequireDefault(require("./hooks/useMultiselectUtils"));
-var _Select = require("./Select.style");
 var _Loader = _interopRequireDefault(require("../Loader"));
 var _MultiTextFieldBase = _interopRequireDefault(require("../MultiTextFieldBase/MultiTextFieldBase"));
 var _PositionInScreen = _interopRequireDefault(require("../utils/PositionInScreen"));
@@ -239,12 +238,7 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       handleSelectedOption(_selectedOption);
     }
   };
-  return (0, _react2.jsx)(_ClickAwayListener["default"], {
-    onClick: function onClick() {
-      setOpen(false);
-      setSearchValue('');
-    }
-  }, (0, _react2.jsx)("div", _extends({}, !(disabled || locked) && {
+  return (0, _react2.jsx)("div", _extends({}, !(disabled || locked) && {
     onClick: handleClick
   }, {
     css: (0, _Select.selectWrapper)({
@@ -252,6 +246,10 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     })
   }), (0, _react2.jsx)(_PositionInScreen["default"], {
     visible: open,
+    setIsVisible: function setIsVisible() {
+      setOpen(false);
+      setSearchValue('');
+    },
     hasWrapperWidth: true,
     offsetY: 8,
     parent: multi ? (0, _react2.jsx)(_MultiTextFieldBase["default"], _extends({
@@ -296,7 +294,7 @@ var Select = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     isVirtualized: isVirtualized,
     searchTerm: highlightSearch ? searchValue : undefined,
     hasSelectAllOption: multi && hasSelectAllOption && !hasNoOptionsAndIsCreatable
-  }))));
+  })));
 });
 Select.displayName = 'Select';
 var _default = exports["default"] = Select;

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -4,9 +4,7 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _react = require("@emotion/react");
 var _useThemeSwitch = require("../../hooks/useThemeSwitch");
-var _keys = _interopRequireDefault(require("lodash/keys"));
-var _merge = _interopRequireDefault(require("lodash/merge"));
-var _pick = _interopRequireDefault(require("lodash/pick"));
+var _lodash = require("lodash");
 var _react2 = _interopRequireDefault(require("react"));
 var _theme = _interopRequireDefault(require("../../theme"));
 var _ThemeProvider = require("./ThemeProvider.style");
@@ -16,7 +14,7 @@ require("../../utils/initLocaleFormat");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var deepMergeTheme = function deepMergeTheme(newTheme, theming) {
-  return (0, _merge["default"])((0, _theme["default"])(theming), (0, _pick["default"])(newTheme, (0, _keys["default"])((0, _theme["default"])(theming))));
+  return (0, _lodash.merge)((0, _theme["default"])(theming), (0, _lodash.pick)(newTheme, (0, _lodash.keys)((0, _theme["default"])(theming))));
 };
 var ThemeProvider = function ThemeProvider(_ref) {
   var _ref$theme = _ref.theme,

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

@@ -4,6 +4,8 @@ import { ReactFCC } from 'utils/types';
 declare type Props = {
     /** Whether the item to be positioned is visible */
     visible: boolean;
+    /** Function to set the visibility of the item */
+    setIsVisible: (visible: boolean) => void;
     /** Configures the container's overflow */
     withOverflow?: boolean;
     /** Whether the item to be positioned uses the parent's wrapper width */

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

@@ -3,13 +3,17 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
 var _hooks = require("./hooks");
 var _PositionInScreen = require("./PositionInScreen.style");
+var _ClickAwayListener = _interopRequireDefault(require("../../utils/ClickAwayListener"));
 var _react2 = require("@emotion/react");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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 PositionInScreen = function PositionInScreen(_ref) {
   var visible = _ref.visible,
+    setIsVisible = _ref.setIsVisible,
     parent = _ref.parent,
     withOverflow = _ref.withOverflow,
     _ref$hasWrapperWidth = _ref.hasWrapperWidth,
@@ -37,12 +41,16 @@ var PositionInScreen = function PositionInScreen(_ref) {
     ref: function ref(_ref3) {
       setWrapperRef(_ref3);
     }
-  }, parent, (0, _react2.jsx)("div", {
+  }, parent, /*#__PURE__*/(0, _reactDom.createPortal)((0, _react2.jsx)(_ClickAwayListener["default"], {
+    onClick: function onClick() {
+      return setIsVisible(false);
+    }
+  }, (0, _react2.jsx)("div", {
     css: (0, _PositionInScreen.itemContainer)(x, y, showTooltip, wrapperWidth, sx),
     className: 'unique-tooltip-id',
     ref: function ref(_ref2) {
       setItemRef(_ref2);
     }
-  }, children));
+  }, children)), document.body));
 };
 var _default = exports["default"] = PositionInScreen;

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

@@ -49,62 +49,54 @@ var useHeights = function useHeights(parentRef, itemRef) {
   };
 };
 var usePositionInScreen = exports.usePositionInScreen = function usePositionInScreen(parentRef, itemRef, offsetX, offsetY, visible) {
+  var _useHeights = useHeights(parentRef, itemRef),
+    parentHeight = _useHeights.parentHeight,
+    childHeight = _useHeights.childHeight;
   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.useLayoutEffect)(function () {
-    // x,y are cordinates in screen
-    // width is wrapper elements dimensions
-    var _ref = parentRef ? parentRef == null ? void 0 : parentRef.getBoundingClientRect() : {
-        x: 0,
-        y: 0,
-        width: 0
-      },
-      parentX = _ref.x,
-      parentY = _ref.y,
-      parentWidth = _ref.width;
+    var _itemRef$children$, _childRect$width;
+    // Define a small buffer for screen edge detection
+    var SCREEN_EDGE_BUFFER = 8;
+
+    // Get parent element dimensions and position
+    var parentRect = parentRef == null ? void 0 : parentRef.getBoundingClientRect();
+    if (!parentRect) return;
+
+    // Get viewport-relative coordinates
+    var parentX = parentRect.left + window.scrollX;
+    var parentY = parentRect.top + window.scrollY;
+    var parentWidth = parentRect.width;
 
-    // width is the element's that's going to be positioned dimensions
-    var _ref2 = itemRef && itemRef.children[0] ? itemRef.children[0].getBoundingClientRect() : {
-        width: 0
-      },
-      width = _ref2.width;
+    // Get positioned element dimensions
+    var childRect = itemRef == null || (_itemRef$children$ = itemRef.children[0]) == null ? void 0 : _itemRef$children$.getBoundingClientRect();
+    var childWidth = (_childRect$width = childRect == null ? void 0 : childRect.width) != null ? _childRect$width : 0;
 
-    // If the item-to-be-positioned is out of screen height
-    var itemYOutOfScreenHeight = parentY + parentHeight + childHeight > window.innerHeight;
+    // Check if element would overflow screen bounds (with buffer)
+    var itemYOutOfScreenHeight = parentRect.top + parentHeight + childHeight > window.innerHeight - SCREEN_EDGE_BUFFER;
+    var itemXOutOfScreenWidth = parentRect.left + childWidth > window.innerWidth - SCREEN_EDGE_BUFFER;
 
-    // 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;
+    // Calculate absolute positions (viewport + scroll)
+    var x = parentX + offsetX;
+    var y = parentY;
     if (itemYOutOfScreenHeight) {
-      // We place the element height+offsetY (px) above the parent
+      // Position above parent if would overflow bottom
       y = y - childHeight - 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;
+      if (y < SCREEN_EDGE_BUFFER) {
+        // If would overflow top, fallback to below parent
+        y = parentY + parentHeight + offsetY;
       }
     } else {
-      // We place the element offsetY (px) under the parent
-      y = parentHeight + offsetY;
+      // Position below parent
+      y = 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;
+      // Align to right edge of parent if would overflow right
+      x = parentX + parentWidth - childWidth - offsetX;
     }
     setPosition({
       x: x,

package/dist/test/utils.js

@@ -31,8 +31,9 @@ var selectDropdownOption = exports.selectDropdownOption = /*#__PURE__*/function
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _userEvent["default"].type(dropdownInput, option); // type option on the dropdown input
+          _react.screen.debug();
           _userEvent["default"].click(_react.screen.getByText(option)); // select the option from displayed options
-        case 2:
+        case 3:
         case "end":
           return _context.stop();
       }

package/package.json

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