@orfium/ictinus 4.83.0 → 4.84.0

package/README.md

@@ -4,6 +4,7 @@ An internal UI kit library that is opinionated. Primary focus is to solve UI dup
 
 <hr />
 
+[![Static Badge](https://img.shields.io/badge/documentation-8A2BE2?)](https://designlab-v4.orfium.com/)
 ![npm](https://img.shields.io/npm/v/@orfium/ictinus)
 [![pan](https://github.com/Orfium/orfium-ictinus/workflows/CI/badge.svg)](https://github.com/Orfium/orfium-ictinus/actions)
 ![min size](https://img.shields.io/bundlephobia/min/@orfium/ictinus)

package/dist/components/Filter/Filter.js

@@ -5,12 +5,12 @@ exports["default"] = void 0;
 var _lodash = require("lodash");
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../utils/helpers");
-var _ClickAwayListener = _interopRequireDefault(require("../utils/ClickAwayListener"));
 var _FilterBase = _interopRequireDefault(require("./components/FilterBase"));
 var _MultiFilter = _interopRequireDefault(require("./components/MultiFilter/MultiFilter"));
 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");
@@ -186,7 +186,7 @@ var Filter = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       styleType: styleType,
       multi: multi
     })
-  }, isOpen && getFilter()));
+  }, getFilter()));
 });
 Filter.displayName = 'Filter';
 var _default = exports["default"] = Filter;

package/dist/components/Table/TableRowContext.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Row, TableType } from './Table';
+import { ExtendedColumn } from 'components/Table/types';
 export declare type TableRowContextProps<T extends {
     [key: string]: unknown;
 }> = {
@@ -9,7 +10,7 @@ export declare type TableRowContextProps<T extends {
     onSelectionChangeExist: boolean;
     isRowSelected: boolean;
     columnCount: number;
-    columns: string[];
+    columns: (string | ExtendedColumn)[];
     fixedHeader: boolean;
     tChange: () => void;
     type: TableType;

package/dist/components/Table/components/RenderRowOrNestedRow/RenderRowOrNestedRow.js

@@ -3,6 +3,9 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _ContentCell = _interopRequireDefault(require("./components/ContentCell"));
+var _ExpandedButtonCell = _interopRequireDefault(require("./components/ExpandedButtonCell"));
+var _RenderRowOrNestedRow = require("./RenderRowOrNestedRow.style");
 var _useToggle2 = _interopRequireDefault(require("../../../../hooks/useToggle"));
 var _helpers = require("../../../../utils/helpers");
 var _CheckBox = _interopRequireDefault(require("../../../CheckBox"));
@@ -10,9 +13,6 @@ var _Table = require("../../Table.style");
 var _TableRowContext = require("../../TableRowContext");
 var _TableCell = _interopRequireDefault(require("../TableCell"));
 var _TableRow = _interopRequireDefault(require("../TableRow"));
-var _ContentCell = _interopRequireDefault(require("./components/ContentCell"));
-var _ExpandedButtonCell = _interopRequireDefault(require("./components/ExpandedButtonCell"));
-var _RenderRowOrNestedRow = require("./RenderRowOrNestedRow.style");
 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); }
@@ -77,7 +77,7 @@ var RenderRowWithCells = /*#__PURE__*/React.memo(function (_ref) {
       cellCounter: index,
       columnWidth: columnsWithWidth[index],
       columns: columns,
-      tooltipContent: hasTruncatedTooltip ? (0, _helpers.isComponentFunctionType)(content) ? tooltipContent : tooltipContent != null ? tooltipContent : content.toString() : undefined,
+      tooltipContent: hasTruncatedTooltip ? tooltipContent : null,
       padded: padded,
       colSpan: colSpan,
       content: content,

package/dist/components/Table/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { ContentComponent, TableType } from '../../../../Table';
+import { ExtendedColumn } from 'components/Table/types';
 declare type Props = {
-    columns: string[];
+    columns: (string | ExtendedColumn)[];
     padded: boolean;
-    tooltipContent?: string;
+    tooltipContent: string | undefined | null;
     columnWidth?: number;
     content: number | string | ContentComponent<any>;
     colSpan?: number;

package/dist/components/Table/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.js

@@ -2,14 +2,17 @@
 
 exports.__esModule = true;
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../../../../../utils/helpers");
+var _ContentCell = require("./ContentCell.style");
 var _TruncatedContent = _interopRequireDefault(require("../../../../../TruncatedContent"));
 var _TableCell = _interopRequireDefault(require("../../../TableCell"));
-var _ContentCell = require("./ContentCell.style");
 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 ContentCell = function ContentCell(_ref) {
+  var _ref2;
   var columns = _ref.columns,
     padded = _ref.padded,
     columnWidth = _ref.columnWidth,
@@ -24,6 +27,10 @@ var ContentCell = function ContentCell(_ref) {
     rowIndex = _ref.rowIndex,
     index = _ref.index;
   var isNumeral = !Number.isNaN(Number(content));
+  var _useState = (0, _react.useState)(null),
+    contentElementRef = _useState[0],
+    setContentElementRef = _useState[1];
+  var col = columns[cellCounter];
   return (0, _react2.jsx)(_TableCell["default"], {
     textAlign: align ? align : isNumeral ? 'right' : 'left',
     colSpan: colSpan,
@@ -35,14 +42,17 @@ var ContentCell = function ContentCell(_ref) {
     index: index
   }, rowType === 'nested-header' && (0, _react2.jsx)("div", {
     css: (0, _ContentCell.nestedHeaderStyle)()
-  }, columns[cellCounter]), (0, _react2.jsx)(_TruncatedContent["default"], {
+  }, typeof col === 'string' ? col : col.content.label), (0, _react2.jsx)(_TruncatedContent["default"], {
     placement: 'bottom',
-    tooltipContent: tooltipContent
+    tooltipContent: tooltipContent === null ? undefined : (_ref2 = tooltipContent != null ? tooltipContent : contentElementRef == null ? void 0 : contentElementRef.textContent) != null ? _ref2 : ''
+  }, (0, _react2.jsx)("span", {
+    ref: function ref(el) {
+      setContentElementRef(el);
+    },
+    "data-column": col
   }, (0, _helpers.isComponentFunctionType)(content) ? content({
     content: content,
     colSpan: colSpan
-  }) : (0, _react2.jsx)("span", {
-    "data-column": columns[cellCounter]
-  }, content)));
+  }) : content)));
 };
 var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(ContentCell);

package/dist/components/Table/components/TableRowWrapper/TableRowWrapper.d.ts

@@ -1,4 +1,5 @@
 import { Row, Selection, TableType } from '../../Table';
+import { ExtendedColumn } from 'components/Table/types';
 declare type TableRowWrapperProps<T> = {
     row: Row<T>;
     isRowSelected: boolean;
@@ -7,7 +8,7 @@ declare type TableRowWrapperProps<T> = {
     padded: boolean;
     onSelectionChangeExist: boolean;
     columnCount: number;
-    columns: string[];
+    columns: (string | ExtendedColumn)[];
     fixedHeader: boolean;
     type: TableType;
     expanded: boolean;

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

@@ -20,8 +20,12 @@ var PositionInScreen = function PositionInScreen(_ref) {
     offsetY = _ref$offsetY === void 0 ? 0 : _ref$offsetY,
     sx = _ref.sx,
     children = _ref.children;
-  var wrapperRef = (0, _react.useRef)(null);
-  var itemRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    wrapperRef = _useState[0],
+    setWrapperRef = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    itemRef = _useState2[0],
+    setItemRef = _useState2[1];
   var _useWrapperWidth = (0, _hooks.useWrapperWidth)(hasWrapperWidth, wrapperRef),
     wrapperWidth = _useWrapperWidth[0];
   var _usePositionInScreen = (0, _hooks.usePositionInScreen)(wrapperRef, itemRef, offsetX, offsetY, visible),
@@ -29,12 +33,16 @@ var PositionInScreen = function PositionInScreen(_ref) {
     y = _usePositionInScreen.y;
   var showTooltip = visible && x !== -1 && y !== -1;
   return (0, _react2.jsx)("div", {
-    css: (0, _PositionInScreen.container)(withOverflow, showTooltip, sx),
-    ref: wrapperRef
-  }, parent, showTooltip && (0, _react2.jsx)("div", {
-    css: (0, _PositionInScreen.itemContainer)(x, y, wrapperWidth, sx),
-    id: 'unique-tooltip-id',
-    ref: itemRef
+    css: (0, _PositionInScreen.container)(withOverflow, sx),
+    ref: function ref(_ref3) {
+      setWrapperRef(_ref3);
+    }
+  }, parent, (0, _react2.jsx)("div", {
+    css: (0, _PositionInScreen.itemContainer)(x, y, showTooltip, wrapperWidth, sx),
+    className: 'unique-tooltip-id',
+    ref: function ref(_ref2) {
+      setItemRef(_ref2);
+    }
   }, children));
 };
 var _default = exports["default"] = PositionInScreen;

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

@@ -1,10 +1,10 @@
 import { SerializedStyles } from '@emotion/react';
 import { CSSObject } from '@emotion/serialize';
-export declare const container: (withOverflow?: boolean | undefined, visible?: boolean | undefined, sx?: {
+export declare const container: (withOverflow?: boolean | undefined, sx?: {
     container?: CSSObject | undefined;
     itemContainer?: CSSObject | undefined;
 } | undefined) => () => SerializedStyles;
-export declare const itemContainer: (clientX: number, clientY: number, width?: number | undefined, sx?: {
+export declare const itemContainer: (clientX: number, clientY: number, visible: boolean, width?: number | undefined, sx?: {
     container?: CSSObject | undefined;
     itemContainer?: CSSObject | undefined;
 } | undefined) => () => SerializedStyles;

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

@@ -5,7 +5,7 @@ exports.itemContainer = exports.container = void 0;
 var _react = require("@emotion/react");
 var _polished = require("polished");
 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 container = exports.container = function container(withOverflow, visible, sx) {
+var container = exports.container = function container(withOverflow, sx) {
   return function () {
     return (
       /*#__PURE__*/
@@ -15,28 +15,27 @@ var container = exports.container = function container(withOverflow, visible, sx
         textOverflow: withOverflow ? 'ellipsis' : 'inherit',
         width: '100%',
         height: 'inherit',
-        position: 'relative',
-        '#unique-tooltip-id': {
-          display: visible ? 'block !important' : 'none !important'
-        }
-      }, sx == null ? void 0 : sx.container), process.env.NODE_ENV === "production" ? "" : ";label:container;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV0kiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdXRpbHMvUG9zaXRpb25JblNjcmVlbi9Qb3NpdGlvbkluU2NyZWVuLnN0eWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IENTU09iamVjdCB9IGZyb20gJ0BlbW90aW9uL3NlcmlhbGl6ZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5cbmV4cG9ydCBjb25zdCBjb250YWluZXIgPVxuICAoXG4gICAgd2l0aE92ZXJmbG93PzogYm9vbGVhbixcbiAgICB2aXNpYmxlPzogYm9vbGVhbixcbiAgICBzeD86IHsgY29udGFpbmVyPzogQ1NTT2JqZWN0OyBpdGVtQ29udGFpbmVyPzogQ1NTT2JqZWN0IH1cbiAgKSA9PlxuICAoKTogU2VyaWFsaXplZFN0eWxlcyA9PlxuICAgIGNzcyh7XG4gICAgICBvdmVyZmxvdzogd2l0aE92ZXJmbG93ID8gJ2hpZGRlbicgOiAnaW5oZXJpdCcsXG4gICAgICB0ZXh0T3ZlcmZsb3c6IHdpdGhPdmVyZmxvdyA/ICdlbGxpcHNpcycgOiAnaW5oZXJpdCcsXG4gICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgaGVpZ2h0OiAnaW5oZXJpdCcsXG4gICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcblxuICAgICAgJyN1bmlxdWUtdG9vbHRpcC1pZCc6IHtcbiAgICAgICAgZGlzcGxheTogdmlzaWJsZSA/ICdibG9jayAhaW1wb3J0YW50JyA6ICdub25lICFpbXBvcnRhbnQnLFxuICAgICAgfSxcbiAgICAgIC4uLnN4Py5jb250YWluZXIsXG4gICAgfSk7XG5cbmV4cG9ydCBjb25zdCBpdGVtQ29udGFpbmVyID1cbiAgKFxuICAgIGNsaWVudFg6IG51bWJlcixcbiAgICBjbGllbnRZOiBudW1iZXIsXG4gICAgd2lkdGg/OiBudW1iZXIsXG4gICAgc3g/OiB7IGNvbnRhaW5lcj86IENTU09iamVjdDsgaXRlbUNvbnRhaW5lcj86IENTU09iamVjdCB9XG4gICkgPT5cbiAgKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT5cbiAgICBjc3Moe1xuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICBvcGFjaXR5OiAnMSAhaW1wb3J0YW50JyxcbiAgICAgIHRvcDogcmVtKGNsaWVudFkpLFxuICAgICAgbGVmdDogcmVtKGNsaWVudFgpLFxuICAgICAgekluZGV4OiA5OTk5OTk5OTksXG4gICAgICB3aWR0aDogd2lkdGggPyByZW0od2lkdGgpIDogYGZpdC1jb250ZW50YCxcbiAgICAgIGhlaWdodDogJ2ZpdC1jb250ZW50JyxcbiAgICAgIC4uLnN4Py5pdGVtQ29udGFpbmVyLFxuICAgIH0pO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:container;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBV0kiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdXRpbHMvUG9zaXRpb25JblNjcmVlbi9Qb3NpdGlvbkluU2NyZWVuLnN0eWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IENTU09iamVjdCB9IGZyb20gJ0BlbW90aW9uL3NlcmlhbGl6ZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5cbmV4cG9ydCBjb25zdCBjb250YWluZXIgPVxuICAoXG4gICAgd2l0aE92ZXJmbG93PzogYm9vbGVhbixcbiAgICB2aXNpYmxlPzogYm9vbGVhbixcbiAgICBzeD86IHsgY29udGFpbmVyPzogQ1NTT2JqZWN0OyBpdGVtQ29udGFpbmVyPzogQ1NTT2JqZWN0IH1cbiAgKSA9PlxuICAoKTogU2VyaWFsaXplZFN0eWxlcyA9PlxuICAgIGNzcyh7XG4gICAgICBvdmVyZmxvdzogd2l0aE92ZXJmbG93ID8gJ2hpZGRlbicgOiAnaW5oZXJpdCcsXG4gICAgICB0ZXh0T3ZlcmZsb3c6IHdpdGhPdmVyZmxvdyA/ICdlbGxpcHNpcycgOiAnaW5oZXJpdCcsXG4gICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgaGVpZ2h0OiAnaW5oZXJpdCcsXG4gICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcblxuICAgICAgJyN1bmlxdWUtdG9vbHRpcC1pZCc6IHtcbiAgICAgICAgZGlzcGxheTogdmlzaWJsZSA/ICdibG9jayAhaW1wb3J0YW50JyA6ICdub25lICFpbXBvcnRhbnQnLFxuICAgICAgfSxcbiAgICAgIC4uLnN4Py5jb250YWluZXIsXG4gICAgfSk7XG5cbmV4cG9ydCBjb25zdCBpdGVtQ29udGFpbmVyID1cbiAgKFxuICAgIGNsaWVudFg6IG51bWJlcixcbiAgICBjbGllbnRZOiBudW1iZXIsXG4gICAgd2lkdGg/OiBudW1iZXIsXG4gICAgc3g/OiB7IGNvbnRhaW5lcj86IENTU09iamVjdDsgaXRlbUNvbnRhaW5lcj86IENTU09iamVjdCB9XG4gICkgPT5cbiAgKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT5cbiAgICBjc3Moe1xuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICBvcGFjaXR5OiAnMSAhaW1wb3J0YW50JyxcbiAgICAgIHRvcDogcmVtKGNsaWVudFkpLFxuICAgICAgbGVmdDogcmVtKGNsaWVudFgpLFxuICAgICAgekluZGV4OiA5OTk5OTk5OTksXG4gICAgICB3aWR0aDogd2lkdGggPyByZW0od2lkdGgpIDogYGZpdC1jb250ZW50YCxcbiAgICAgIGhlaWdodDogJ2ZpdC1jb250ZW50JyxcbiAgICAgIC4uLnN4Py5pdGVtQ29udGFpbmVyLFxuICAgIH0pO1xuIl19 */")
+        position: 'relative'
+      }, sx == null ? void 0 : sx.container), process.env.NODE_ENV === "production" ? "" : ";label:container;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT0kiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdXRpbHMvUG9zaXRpb25JblNjcmVlbi9Qb3NpdGlvbkluU2NyZWVuLnN0eWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IENTU09iamVjdCB9IGZyb20gJ0BlbW90aW9uL3NlcmlhbGl6ZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5cbmV4cG9ydCBjb25zdCBjb250YWluZXIgPVxuICAod2l0aE92ZXJmbG93PzogYm9vbGVhbiwgc3g/OiB7IGNvbnRhaW5lcj86IENTU09iamVjdDsgaXRlbUNvbnRhaW5lcj86IENTU09iamVjdCB9KSA9PlxuICAoKTogU2VyaWFsaXplZFN0eWxlcyA9PlxuICAgIGNzcyh7XG4gICAgICBvdmVyZmxvdzogd2l0aE92ZXJmbG93ID8gJ2hpZGRlbicgOiAnaW5oZXJpdCcsXG4gICAgICB0ZXh0T3ZlcmZsb3c6IHdpdGhPdmVyZmxvdyA/ICdlbGxpcHNpcycgOiAnaW5oZXJpdCcsXG4gICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgaGVpZ2h0OiAnaW5oZXJpdCcsXG4gICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAgIC4uLnN4Py5jb250YWluZXIsXG4gICAgfSk7XG5cbmV4cG9ydCBjb25zdCBpdGVtQ29udGFpbmVyID1cbiAgKFxuICAgIGNsaWVudFg6IG51bWJlcixcbiAgICBjbGllbnRZOiBudW1iZXIsXG4gICAgdmlzaWJsZTogYm9vbGVhbixcbiAgICB3aWR0aD86IG51bWJlcixcbiAgICBzeD86IHsgY29udGFpbmVyPzogQ1NTT2JqZWN0OyBpdGVtQ29udGFpbmVyPzogQ1NTT2JqZWN0IH1cbiAgKSA9PlxuICAoKTogU2VyaWFsaXplZFN0eWxlcyA9PlxuICAgIGNzcyh7XG4gICAgICBvdmVyZmxvdzogdmlzaWJsZSA/ICd2aXNpYmxlJyA6ICdoaWRkZW4nLFxuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICB0b3A6IHJlbShjbGllbnRZKSxcbiAgICAgIGxlZnQ6IHJlbShjbGllbnRYKSxcbiAgICAgIHpJbmRleDogOTk5OTk5OTk5LFxuICAgICAgd2lkdGg6IHdpZHRoID8gcmVtKHdpZHRoKSA6IGBmaXQtY29udGVudGAsXG4gICAgICBoZWlnaHQ6ICdmaXQtY29udGVudCcsXG4gICAgICB2aXNpYmlsaXR5OiB2aXNpYmxlID8gJ3Zpc2libGUnIDogJ2hpZGRlbicsXG4gICAgICBvcGFjaXR5OiBgJHt2aXNpYmxlID8gMSA6IDB9ICFpbXBvcnRhbnRgLFxuICAgICAgLi4uc3g/Lml0ZW1Db250YWluZXIsXG4gICAgfSk7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:container;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBT0kiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvdXRpbHMvUG9zaXRpb25JblNjcmVlbi9Qb3NpdGlvbkluU2NyZWVuLnN0eWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IENTU09iamVjdCB9IGZyb20gJ0BlbW90aW9uL3NlcmlhbGl6ZSc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICdwb2xpc2hlZCc7XG5cbmV4cG9ydCBjb25zdCBjb250YWluZXIgPVxuICAod2l0aE92ZXJmbG93PzogYm9vbGVhbiwgc3g/OiB7IGNvbnRhaW5lcj86IENTU09iamVjdDsgaXRlbUNvbnRhaW5lcj86IENTU09iamVjdCB9KSA9PlxuICAoKTogU2VyaWFsaXplZFN0eWxlcyA9PlxuICAgIGNzcyh7XG4gICAgICBvdmVyZmxvdzogd2l0aE92ZXJmbG93ID8gJ2hpZGRlbicgOiAnaW5oZXJpdCcsXG4gICAgICB0ZXh0T3ZlcmZsb3c6IHdpdGhPdmVyZmxvdyA/ICdlbGxpcHNpcycgOiAnaW5oZXJpdCcsXG4gICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgaGVpZ2h0OiAnaW5oZXJpdCcsXG4gICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAgIC4uLnN4Py5jb250YWluZXIsXG4gICAgfSk7XG5cbmV4cG9ydCBjb25zdCBpdGVtQ29udGFpbmVyID1cbiAgKFxuICAgIGNsaWVudFg6IG51bWJlcixcbiAgICBjbGllbnRZOiBudW1iZXIsXG4gICAgdmlzaWJsZTogYm9vbGVhbixcbiAgICB3aWR0aD86IG51bWJlcixcbiAgICBzeD86IHsgY29udGFpbmVyPzogQ1NTT2JqZWN0OyBpdGVtQ29udGFpbmVyPzogQ1NTT2JqZWN0IH1cbiAgKSA9PlxuICAoKTogU2VyaWFsaXplZFN0eWxlcyA9PlxuICAgIGNzcyh7XG4gICAgICBvdmVyZmxvdzogdmlzaWJsZSA/ICd2aXNpYmxlJyA6ICdoaWRkZW4nLFxuICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICB0b3A6IHJlbShjbGllbnRZKSxcbiAgICAgIGxlZnQ6IHJlbShjbGllbnRYKSxcbiAgICAgIHpJbmRleDogOTk5OTk5OTk5LFxuICAgICAgd2lkdGg6IHdpZHRoID8gcmVtKHdpZHRoKSA6IGBmaXQtY29udGVudGAsXG4gICAgICBoZWlnaHQ6ICdmaXQtY29udGVudCcsXG4gICAgICB2aXNpYmlsaXR5OiB2aXNpYmxlID8gJ3Zpc2libGUnIDogJ2hpZGRlbicsXG4gICAgICBvcGFjaXR5OiBgJHt2aXNpYmxlID8gMSA6IDB9ICFpbXBvcnRhbnRgLFxuICAgICAgLi4uc3g/Lml0ZW1Db250YWluZXIsXG4gICAgfSk7XG4iXX0= */")
     );
   };
 };
-var itemContainer = exports.itemContainer = function itemContainer(clientX, clientY, width, sx) {
+var itemContainer = exports.itemContainer = function itemContainer(clientX, clientY, visible, width, sx) {
   return function () {
     return (
       /*#__PURE__*/
       /*#__PURE__*/
       (0, _react.css)(_extends({
+        overflow: visible ? 'visible' : 'hidden',
         position: 'absolute',
-        opacity: '1 !important',
         top: (0, _polished.rem)(clientY),
         left: (0, _polished.rem)(clientX),
         zIndex: 999999999,
         width: width ? (0, _polished.rem)(width) : "fit-content",
-        height: 'fit-content'
-      }, sx == null ? void 0 : sx.itemContainer), process.env.NODE_ENV === "production" ? "" : ";label:itemContainer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0NJIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBDU1NPYmplY3QgfSBmcm9tICdAZW1vdGlvbi9zZXJpYWxpemUnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuXG5leHBvcnQgY29uc3QgY29udGFpbmVyID1cbiAgKFxuICAgIHdpdGhPdmVyZmxvdz86IGJvb2xlYW4sXG4gICAgdmlzaWJsZT86IGJvb2xlYW4sXG4gICAgc3g/OiB7IGNvbnRhaW5lcj86IENTU09iamVjdDsgaXRlbUNvbnRhaW5lcj86IENTU09iamVjdCB9XG4gICkgPT5cbiAgKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT5cbiAgICBjc3Moe1xuICAgICAgb3ZlcmZsb3c6IHdpdGhPdmVyZmxvdyA/ICdoaWRkZW4nIDogJ2luaGVyaXQnLFxuICAgICAgdGV4dE92ZXJmbG93OiB3aXRoT3ZlcmZsb3cgPyAnZWxsaXBzaXMnIDogJ2luaGVyaXQnLFxuICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgIGhlaWdodDogJ2luaGVyaXQnLFxuICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG5cbiAgICAgICcjdW5pcXVlLXRvb2x0aXAtaWQnOiB7XG4gICAgICAgIGRpc3BsYXk6IHZpc2libGUgPyAnYmxvY2sgIWltcG9ydGFudCcgOiAnbm9uZSAhaW1wb3J0YW50JyxcbiAgICAgIH0sXG4gICAgICAuLi5zeD8uY29udGFpbmVyLFxuICAgIH0pO1xuXG5leHBvcnQgY29uc3QgaXRlbUNvbnRhaW5lciA9XG4gIChcbiAgICBjbGllbnRYOiBudW1iZXIsXG4gICAgY2xpZW50WTogbnVtYmVyLFxuICAgIHdpZHRoPzogbnVtYmVyLFxuICAgIHN4PzogeyBjb250YWluZXI/OiBDU1NPYmplY3Q7IGl0ZW1Db250YWluZXI/OiBDU1NPYmplY3QgfVxuICApID0+XG4gICgpOiBTZXJpYWxpemVkU3R5bGVzID0+XG4gICAgY3NzKHtcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgb3BhY2l0eTogJzEgIWltcG9ydGFudCcsXG4gICAgICB0b3A6IHJlbShjbGllbnRZKSxcbiAgICAgIGxlZnQ6IHJlbShjbGllbnRYKSxcbiAgICAgIHpJbmRleDogOTk5OTk5OTk5LFxuICAgICAgd2lkdGg6IHdpZHRoID8gcmVtKHdpZHRoKSA6IGBmaXQtY29udGVudGAsXG4gICAgICBoZWlnaHQ6ICdmaXQtY29udGVudCcsXG4gICAgICAuLi5zeD8uaXRlbUNvbnRhaW5lcixcbiAgICB9KTtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:itemContainer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0NJIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBDU1NPYmplY3QgfSBmcm9tICdAZW1vdGlvbi9zZXJpYWxpemUnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuXG5leHBvcnQgY29uc3QgY29udGFpbmVyID1cbiAgKFxuICAgIHdpdGhPdmVyZmxvdz86IGJvb2xlYW4sXG4gICAgdmlzaWJsZT86IGJvb2xlYW4sXG4gICAgc3g/OiB7IGNvbnRhaW5lcj86IENTU09iamVjdDsgaXRlbUNvbnRhaW5lcj86IENTU09iamVjdCB9XG4gICkgPT5cbiAgKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT5cbiAgICBjc3Moe1xuICAgICAgb3ZlcmZsb3c6IHdpdGhPdmVyZmxvdyA/ICdoaWRkZW4nIDogJ2luaGVyaXQnLFxuICAgICAgdGV4dE92ZXJmbG93OiB3aXRoT3ZlcmZsb3cgPyAnZWxsaXBzaXMnIDogJ2luaGVyaXQnLFxuICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgIGhlaWdodDogJ2luaGVyaXQnLFxuICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG5cbiAgICAgICcjdW5pcXVlLXRvb2x0aXAtaWQnOiB7XG4gICAgICAgIGRpc3BsYXk6IHZpc2libGUgPyAnYmxvY2sgIWltcG9ydGFudCcgOiAnbm9uZSAhaW1wb3J0YW50JyxcbiAgICAgIH0sXG4gICAgICAuLi5zeD8uY29udGFpbmVyLFxuICAgIH0pO1xuXG5leHBvcnQgY29uc3QgaXRlbUNvbnRhaW5lciA9XG4gIChcbiAgICBjbGllbnRYOiBudW1iZXIsXG4gICAgY2xpZW50WTogbnVtYmVyLFxuICAgIHdpZHRoPzogbnVtYmVyLFxuICAgIHN4PzogeyBjb250YWluZXI/OiBDU1NPYmplY3Q7IGl0ZW1Db250YWluZXI/OiBDU1NPYmplY3QgfVxuICApID0+XG4gICgpOiBTZXJpYWxpemVkU3R5bGVzID0+XG4gICAgY3NzKHtcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgb3BhY2l0eTogJzEgIWltcG9ydGFudCcsXG4gICAgICB0b3A6IHJlbShjbGllbnRZKSxcbiAgICAgIGxlZnQ6IHJlbShjbGllbnRYKSxcbiAgICAgIHpJbmRleDogOTk5OTk5OTk5LFxuICAgICAgd2lkdGg6IHdpZHRoID8gcmVtKHdpZHRoKSA6IGBmaXQtY29udGVudGAsXG4gICAgICBoZWlnaHQ6ICdmaXQtY29udGVudCcsXG4gICAgICAuLi5zeD8uaXRlbUNvbnRhaW5lcixcbiAgICB9KTtcbiJdfQ== */")
+        height: 'fit-content',
+        visibility: visible ? 'visible' : 'hidden',
+        opacity: (visible ? 1 : 0) + " !important"
+      }, sx == null ? void 0 : sx.itemContainer), process.env.NODE_ENV === "production" ? "" : ";label:itemContainer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJJIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBDU1NPYmplY3QgfSBmcm9tICdAZW1vdGlvbi9zZXJpYWxpemUnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuXG5leHBvcnQgY29uc3QgY29udGFpbmVyID1cbiAgKHdpdGhPdmVyZmxvdz86IGJvb2xlYW4sIHN4PzogeyBjb250YWluZXI/OiBDU1NPYmplY3Q7IGl0ZW1Db250YWluZXI/OiBDU1NPYmplY3QgfSkgPT5cbiAgKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT5cbiAgICBjc3Moe1xuICAgICAgb3ZlcmZsb3c6IHdpdGhPdmVyZmxvdyA/ICdoaWRkZW4nIDogJ2luaGVyaXQnLFxuICAgICAgdGV4dE92ZXJmbG93OiB3aXRoT3ZlcmZsb3cgPyAnZWxsaXBzaXMnIDogJ2luaGVyaXQnLFxuICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgIGhlaWdodDogJ2luaGVyaXQnLFxuICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICAuLi5zeD8uY29udGFpbmVyLFxuICAgIH0pO1xuXG5leHBvcnQgY29uc3QgaXRlbUNvbnRhaW5lciA9XG4gIChcbiAgICBjbGllbnRYOiBudW1iZXIsXG4gICAgY2xpZW50WTogbnVtYmVyLFxuICAgIHZpc2libGU6IGJvb2xlYW4sXG4gICAgd2lkdGg/OiBudW1iZXIsXG4gICAgc3g/OiB7IGNvbnRhaW5lcj86IENTU09iamVjdDsgaXRlbUNvbnRhaW5lcj86IENTU09iamVjdCB9XG4gICkgPT5cbiAgKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT5cbiAgICBjc3Moe1xuICAgICAgb3ZlcmZsb3c6IHZpc2libGUgPyAndmlzaWJsZScgOiAnaGlkZGVuJyxcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgdG9wOiByZW0oY2xpZW50WSksXG4gICAgICBsZWZ0OiByZW0oY2xpZW50WCksXG4gICAgICB6SW5kZXg6IDk5OTk5OTk5OSxcbiAgICAgIHdpZHRoOiB3aWR0aCA/IHJlbSh3aWR0aCkgOiBgZml0LWNvbnRlbnRgLFxuICAgICAgaGVpZ2h0OiAnZml0LWNvbnRlbnQnLFxuICAgICAgdmlzaWJpbGl0eTogdmlzaWJsZSA/ICd2aXNpYmxlJyA6ICdoaWRkZW4nLFxuICAgICAgb3BhY2l0eTogYCR7dmlzaWJsZSA/IDEgOiAwfSAhaW1wb3J0YW50YCxcbiAgICAgIC4uLnN4Py5pdGVtQ29udGFpbmVyLFxuICAgIH0pO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:itemContainer;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJJIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3V0aWxzL1Bvc2l0aW9uSW5TY3JlZW4vUG9zaXRpb25JblNjcmVlbi5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBDU1NPYmplY3QgfSBmcm9tICdAZW1vdGlvbi9zZXJpYWxpemUnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAncG9saXNoZWQnO1xuXG5leHBvcnQgY29uc3QgY29udGFpbmVyID1cbiAgKHdpdGhPdmVyZmxvdz86IGJvb2xlYW4sIHN4PzogeyBjb250YWluZXI/OiBDU1NPYmplY3Q7IGl0ZW1Db250YWluZXI/OiBDU1NPYmplY3QgfSkgPT5cbiAgKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT5cbiAgICBjc3Moe1xuICAgICAgb3ZlcmZsb3c6IHdpdGhPdmVyZmxvdyA/ICdoaWRkZW4nIDogJ2luaGVyaXQnLFxuICAgICAgdGV4dE92ZXJmbG93OiB3aXRoT3ZlcmZsb3cgPyAnZWxsaXBzaXMnIDogJ2luaGVyaXQnLFxuICAgICAgd2lkdGg6ICcxMDAlJyxcbiAgICAgIGhlaWdodDogJ2luaGVyaXQnLFxuICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICAuLi5zeD8uY29udGFpbmVyLFxuICAgIH0pO1xuXG5leHBvcnQgY29uc3QgaXRlbUNvbnRhaW5lciA9XG4gIChcbiAgICBjbGllbnRYOiBudW1iZXIsXG4gICAgY2xpZW50WTogbnVtYmVyLFxuICAgIHZpc2libGU6IGJvb2xlYW4sXG4gICAgd2lkdGg/OiBudW1iZXIsXG4gICAgc3g/OiB7IGNvbnRhaW5lcj86IENTU09iamVjdDsgaXRlbUNvbnRhaW5lcj86IENTU09iamVjdCB9XG4gICkgPT5cbiAgKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT5cbiAgICBjc3Moe1xuICAgICAgb3ZlcmZsb3c6IHZpc2libGUgPyAndmlzaWJsZScgOiAnaGlkZGVuJyxcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgdG9wOiByZW0oY2xpZW50WSksXG4gICAgICBsZWZ0OiByZW0oY2xpZW50WCksXG4gICAgICB6SW5kZXg6IDk5OTk5OTk5OSxcbiAgICAgIHdpZHRoOiB3aWR0aCA/IHJlbSh3aWR0aCkgOiBgZml0LWNvbnRlbnRgLFxuICAgICAgaGVpZ2h0OiAnZml0LWNvbnRlbnQnLFxuICAgICAgdmlzaWJpbGl0eTogdmlzaWJsZSA/ICd2aXNpYmxlJyA6ICdoaWRkZW4nLFxuICAgICAgb3BhY2l0eTogYCR7dmlzaWJsZSA/IDEgOiAwfSAhaW1wb3J0YW50YCxcbiAgICAgIC4uLnN4Py5pdGVtQ29udGFpbmVyLFxuICAgIH0pO1xuIl19 */")
     );
   };
 };

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

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

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

@@ -7,7 +7,6 @@ var _react = require("react");
 var _utils = require("./utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var useHeights = function useHeights(parentRef, itemRef) {
-  var _itemRef$current2;
   var _useState = (0, _react.useState)(0),
     parentHeight = _useState[0],
     setParentHeight = _useState[1];
@@ -21,10 +20,10 @@ var useHeights = function useHeights(parentRef, itemRef) {
    * and will increase/decrease as more Chips (Selected Options) are added/deleted.
    * Therefore the parentHeight is stored on the useState above.
    */
-  (0, _react.useEffect)(function () {
-    if (!parentRef.current) return;
+  (0, _react.useLayoutEffect)(function () {
+    if (!parentRef) return;
     var parentResizeObserver = (0, _utils.resizeObserverHandler)(setParentHeight);
-    parentResizeObserver.observe(parentRef.current);
+    parentResizeObserver.observe(parentRef);
     return function () {
       return parentResizeObserver.disconnect();
     };
@@ -35,16 +34,15 @@ var useHeights = function useHeights(parentRef, itemRef) {
    * 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);
+  (0, _react.useLayoutEffect)(function () {
+    var dropdownElement = (0, _head["default"])(itemRef == null ? void 0 : itemRef.children);
     if (!dropdownElement) return;
     var childResizeObserver = (0, _utils.resizeObserverHandler)(setChildHeight);
     childResizeObserver.observe(dropdownElement);
     return function () {
       return childResizeObserver.disconnect();
     };
-  }, [itemRef, (_itemRef$current2 = itemRef.current) == null ? void 0 : _itemRef$current2.children]);
+  }, [itemRef]);
   return {
     parentHeight: parentHeight,
     childHeight: childHeight
@@ -60,11 +58,10 @@ var usePositionInScreen = exports.usePositionInScreen = function usePositionInSc
   var _useHeights = useHeights(parentRef, itemRef),
     parentHeight = _useHeights.parentHeight,
     childHeight = _useHeights.childHeight;
-  (0, _react.useEffect)(function () {
-    var _parentRef$current, _itemRef$current3;
+  (0, _react.useLayoutEffect)(function () {
     // x,y are cordinates in screen
     // width is wrapper elements dimensions
-    var _ref = parentRef != null && parentRef.current ? parentRef == null || (_parentRef$current = parentRef.current) == null ? void 0 : _parentRef$current.getBoundingClientRect() : {
+    var _ref = parentRef ? parentRef == null ? void 0 : parentRef.getBoundingClientRect() : {
         x: 0,
         y: 0,
         width: 0
@@ -74,7 +71,7 @@ var usePositionInScreen = exports.usePositionInScreen = function usePositionInSc
       parentWidth = _ref.width;
 
     // width is the element's that's going to be positioned dimensions
-    var _ref2 = itemRef != null && itemRef.current ? itemRef == null || (_itemRef$current3 = itemRef.current) == null || (_itemRef$current3 = _itemRef$current3.children[0]) == null ? void 0 : _itemRef$current3.getBoundingClientRect() : {
+    var _ref2 = itemRef && itemRef.children[0] ? itemRef.children[0].getBoundingClientRect() : {
         width: 0
       },
       width = _ref2.width;
@@ -120,10 +117,10 @@ var useWrapperWidth = exports.useWrapperWidth = function useWrapperWidth(hasWrap
   var _useState4 = (0, _react.useState)(),
     width = _useState4[0],
     setWidth = _useState4[1];
-  (0, _react.useEffect)(function () {
+  (0, _react.useLayoutEffect)(function () {
     if (hasWrapperWidth) {
-      var _wrapperRef$current;
-      setWidth(wrapperRef == null || (_wrapperRef$current = wrapperRef.current) == null || (_wrapperRef$current = _wrapperRef$current.getBoundingClientRect()) == null ? void 0 : _wrapperRef$current.width);
+      var _wrapperRef$getBoundi;
+      setWidth(wrapperRef == null || (_wrapperRef$getBoundi = wrapperRef.getBoundingClientRect()) == null ? void 0 : _wrapperRef$getBoundi.width);
     }
   }, [hasWrapperWidth, wrapperRef]);
   return [width];

package/package.json

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