ab-ui-library 1.51.1 → 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/SVGIcons/IconDismiss.js

@@ -11,7 +11,8 @@ var IconDismiss = function IconDismiss(_ref) {
     onClick = _ref.onClick,
     refHandler = _ref.refHandler,
     id = _ref.id,
-    dataId = _ref.dataId;
+    _ref$dataId = _ref.dataId,
+    dataId = _ref$dataId === void 0 ? 'dismiss' : _ref$dataId;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     className: classNames('svg-icon', _defineProperty(_defineProperty(_defineProperty({}, "svg-icon__size-".concat(size), size), "svg-icon__type-".concat(type), type), className, className)),
@@ -20,7 +21,7 @@ var IconDismiss = function IconDismiss(_ref) {
     onClick: onClick,
     ref: refHandler,
     id: id,
-    "data-id": dataId ? "".concat(dataId, "-svg-icon") : ''
+    "data-id": "".concat(dataId, "-svg-icon")
   }, /*#__PURE__*/React.createElement("path", {
     d: "M4.39705 4.55379L4.46967 4.46967C4.73594 4.2034 5.1526 4.1792 5.44621 4.39705L5.53033 4.46967L12 10.939L18.4697 4.46967C18.7626 4.17678 19.2374 4.17678 19.5303 4.46967C19.8232 4.76256 19.8232 5.23744 19.5303 5.53033L13.061 12L19.5303 18.4697C19.7966 18.7359 19.8208 19.1526 19.6029 19.4462L19.5303 19.5303C19.2641 19.7966 18.8474 19.8208 18.5538 19.6029L18.4697 19.5303L12 13.061L5.53033 19.5303C5.23744 19.8232 4.76256 19.8232 4.46967 19.5303C4.17678 19.2374 4.17678 18.7626 4.46967 18.4697L10.939 12L4.46967 5.53033C4.2034 5.26406 4.1792 4.8474 4.39705 4.55379L4.46967 4.46967L4.39705 4.55379Z",
     fill: "#222222"

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.1",
+  "version": "1.51.3",
   "description": "UI library for AM",
   "main": "./index.js",
   "module": "./index.js",