ab-ui-library 1.51.2 → 1.51.3

package/components/AdvancedTable/AdvancedPagination.js

@@ -54,6 +54,7 @@ import '../Button/consts.js';
 import '../../hooks/useHideOnResize.js';
 import '../../utils/helpers.js';
 import '../../hooks/useGetHasBottomSpace.js';
+import '../../hooks/useRecalculateDropdownPosition.js';
 import '../../helperComponents/OptionItem/OptionItem.js';
 import '../Avatar/Avatar.js';
 import '../FileUpload/FileUpload.js';

package/components/AdvancedTable/index.js

@@ -86,6 +86,7 @@ import '../Divider/Divider.js';
 import '../Select/Select/Select.js';
 import '../../hooks/useHideOnResize.js';
 import '../../hooks/useGetHasBottomSpace.js';
+import '../../hooks/useRecalculateDropdownPosition.js';
 import '../Select/SharedComponents/ContentTop.js';
 import '../Select/SharedComponents/Actions.js';
 import '../SVGIcons/IconMore.js';

package/components/Select/Select/Select.js

@@ -11,6 +11,7 @@ import { useOnOutsideClick } from '../../../hooks/useOnOutsideClick.js';
 import '../../../hooks/useScreenSize.js';
 import { useGetHasBottomSpace, useGetHasTopSpace } from '../../../hooks/useGetHasBottomSpace.js';
 import 'react-hook-form';
+import { useRecalculateDropdownPosition } from '../../../hooks/useRecalculateDropdownPosition.js';
 import { Input } from '../../Input/Input.js';
 import '../../Input/InputPassword.js';
 import { Text } from '../../Text/Text.js';
@@ -96,6 +97,8 @@ var Select = function Select(props) {
     isDynamicSearchable = _props$isDynamicSearc === void 0 ? false : _props$isDynamicSearc,
     _props$trimSearchValu = props.trimSearchValue,
     trimSearchValue = _props$trimSearchValu === void 0 ? false : _props$trimSearchValu,
+    _props$shouldRecalcul = props.shouldRecalculateDropdownPosition,
+    shouldRecalculateDropdownPosition = _props$shouldRecalcul === void 0 ? false : _props$shouldRecalcul,
     disabled = props.disabled,
     _props$dataId = props.dataId,
     dataId = _props$dataId === void 0 ? '' : _props$dataId,
@@ -205,6 +208,12 @@ var Select = function Select(props) {
     closeDropdown();
   };
   useOnOutsideClick([inputRef.current, dropdownRef], handleOutsideClick, isOpen, useId());
+  useRecalculateDropdownPosition({
+    shouldRecalculateDropdownPosition: shouldRecalculateDropdownPosition,
+    isOpen: isOpen,
+    inputRef: inputRef,
+    dropdownRef: dropdownRef
+  });
   var _useGetElemPositions = useGetElemPositions(inputRef.current),
     bottom = _useGetElemPositions.bottom,
     left = _useGetElemPositions.left,

package/components/Select/index.js

@@ -18,6 +18,7 @@ import '../../hooks/useOnOutsideClick.js';
 import '../../hooks/useScreenSize.js';
 import '../../hooks/useGetHasBottomSpace.js';
 import 'react-hook-form';
+import '../../hooks/useRecalculateDropdownPosition.js';
 import '../Input/Input.js';
 import '../../extends-bb24d21e.js';
 import '../../objectWithoutProperties-7d059ace.js';

package/components/Select/types.d.ts

@@ -141,6 +141,7 @@ export interface TSingleSelectPropTypes extends IFormCompProps, TSelectBaseProps
     }) => boolean;
     renderOptions?: (props: IRenderOptionItemProps) => JSX.Element;
     defaultValue?: string;
+    shouldRecalculateDropdownPosition?: boolean;
 }
 export type TSelectFooterPropTypes = {
     checkboxInfo?: TCheckboxInfo;

package/hooks/index.d.ts

@@ -11,3 +11,4 @@ export * from './useScreenSize';
 export * from './useHideBodyScroll';
 export * from './useGetHasBottomSpace';
 export * from './useFieldArray';
+export * from './useRecalculateDropdownPosition';

package/hooks/index.js

@@ -11,6 +11,7 @@ export { useScreenSize } from './useScreenSize.js';
 export { useHideBodyScroll } from './useHideBodyScroll.js';
 export { useGetHasBottomSpace, useGetHasTopSpace } from './useGetHasBottomSpace.js';
 export { useFieldArray } from 'react-hook-form';
+export { useRecalculateDropdownPosition } from './useRecalculateDropdownPosition.js';
 import 'react';
 import '../components/Tooltip/types.js';
 import '../consts/index.js';

package/hooks/useRecalculateDropdownPosition.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject } from 'react';
+interface Props {
+    inputRef: RefObject<HTMLInputElement | null>;
+    dropdownRef: HTMLDivElement | null;
+    shouldRecalculateDropdownPosition: boolean;
+    isOpen: boolean;
+}
+export declare const useRecalculateDropdownPosition: ({ isOpen, inputRef, dropdownRef, shouldRecalculateDropdownPosition }: Props) => void;
+export {};

package/hooks/useRecalculateDropdownPosition.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+
+var useRecalculateDropdownPosition = function useRecalculateDropdownPosition(_ref) {
+  var isOpen = _ref.isOpen,
+    inputRef = _ref.inputRef,
+    dropdownRef = _ref.dropdownRef,
+    shouldRecalculateDropdownPosition = _ref.shouldRecalculateDropdownPosition;
+  useEffect(function () {
+    if (!isOpen || !shouldRecalculateDropdownPosition) return;
+    var update = function update() {
+      if (!inputRef.current || !dropdownRef) return;
+      var rect = inputRef.current.getBoundingClientRect();
+      dropdownRef.style.left = "".concat(rect.left, "px");
+      dropdownRef.style.width = "".concat(rect.width, "px");
+      dropdownRef.style.top = "".concat(rect.bottom, "px");
+    };
+    update();
+    var rafId;
+    var _loop = function loop() {
+      update();
+      rafId = requestAnimationFrame(_loop);
+    };
+    _loop();
+    return function () {
+      cancelAnimationFrame(rafId);
+    };
+  }, [isOpen, inputRef.current, dropdownRef]);
+};
+
+export { useRecalculateDropdownPosition };

package/index.js

@@ -546,6 +546,7 @@ import 'react-input-mask';
 import 'react-number-format';
 import './hooks/useHideOnResize.js';
 import './hooks/useGetHasBottomSpace.js';
+import './hooks/useRecalculateDropdownPosition.js';
 import './components/Select/SharedComponents/Loading.js';
 import './hooks/useChangePositionsOnScroll.js';
 import './components/Badge/consts.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ab-ui-library",
-  "version": "1.51.2",
+  "version": "1.51.3",
   "description": "UI library for AM",
   "main": "./index.js",
   "module": "./index.js",