ab-ui-library 1.12.4 → 1.12.5

package/components/AdvancedTable/AdvancedPagination.js

@@ -48,6 +48,7 @@ import '../../hooks/useOnOutsideClick.js';
 import '../Link/Link.js';
 import '../../helperComponents/Loader/Loader.js';
 import '../Button/consts.js';
+import '../../hooks/useHideOnResize.js';
 import '../../utils/helpers.js';
 import '../../hooks/useGetHasBottomSpace.js';
 import '../../helperComponents/OptionItem/OptionItem.js';

package/components/AdvancedTable/index.js

@@ -81,6 +81,7 @@ import '../SVGIcons/IconEyeOff.js';
 import '../SVGIcons/IconEyeOn.js';
 import '../Divider/Divider.js';
 import '../Select/Select/Select.js';
+import '../../hooks/useHideOnResize.js';
 import '../../hooks/useGetHasBottomSpace.js';
 import '../Select/SharedComponents/ContentTop.js';
 import '../Select/SharedComponents/Actions.js';

package/components/Select/Select/Select.js

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { useGetElemSizes } from '../../../hooks/useGetElemSizes.js';
 import { useGetElemPositions } from '../../../hooks/useGetElemPositions.js';
 import { DROPDOWN_AND_INPUT_GAP } from '../../../consts/index.js';
+import { useHideOnResize } from '../../../hooks/useHideOnResize.js';
 import { noop } from '../../../utils/helpers.js';
 import { useOnOutsideClick } from '../../../hooks/useOnOutsideClick.js';
 import '../../../hooks/useScreenSize.js';
@@ -252,6 +253,7 @@ var Select = function Select(props) {
     childElement: dropdownRef,
     hasBottomSpace: hasBottomSpace
   });
+  useHideOnResize(closeDropdown);
   return /*#__PURE__*/React.createElement("div", {
     "data-id": "".concat(dataId, "-content"),
     className: classNames("select select--".concat(size), className, {

package/components/Select/index.js

@@ -11,6 +11,7 @@ import 'classnames';
 import '../../hooks/useGetElemSizes.js';
 import '../../hooks/useGetElemPositions.js';
 import '../../consts/index.js';
+import '../../hooks/useHideOnResize.js';
 import '../../utils/helpers.js';
 import 'dayjs';
 import '../../hooks/useOnOutsideClick.js';

package/consts/index.d.ts

@@ -16,6 +16,8 @@ export declare enum CARD_SELECT_TYPES {
 }
 export declare const CUSTOM_SCROLL_MESSAGE = "Custom scroll event has fired";
 export declare const CUSTOM_SCROLL_NAME = "CUSTOM_SCROLL_EVENT";
+export declare const CUSTOM_RESIZE_MESSAGE = "Custom resize event has fired";
+export declare const CUSTOM_RESIZE_NAME = "CUSTOM_RESIZE_EVENT";
 export declare const MONTHS: {
     label: string;
     value: number;

package/consts/index.js

@@ -20,6 +20,8 @@ var CARD_SELECT_TYPES = /*#__PURE__*/function (CARD_SELECT_TYPES) {
 }({});
 var CUSTOM_SCROLL_MESSAGE = 'Custom scroll event has fired';
 var CUSTOM_SCROLL_NAME = 'CUSTOM_SCROLL_EVENT';
+var CUSTOM_RESIZE_MESSAGE = 'Custom resize event has fired';
+var CUSTOM_RESIZE_NAME = 'CUSTOM_RESIZE_EVENT';
 var MONTHS = [{
   label: 'January',
   value: 0
@@ -59,4 +61,4 @@ var MONTHS = [{
 }];
 var DROPDOWN_AND_INPUT_GAP = 10;
 
-export { CARD_SELECT_TYPES, CUSTOM_SCROLL_MESSAGE, CUSTOM_SCROLL_NAME, DROPDOWN_AND_INPUT_GAP, FILE_UPLOAD_ERRORS, IMAGE_MIME_TYPE, IMAGE_MIME_TYPES, IMAGE_MIME_TYPES_FOR_PREVIEW, MONTHS, SCREEN_SIZES };
+export { CARD_SELECT_TYPES, CUSTOM_RESIZE_MESSAGE, CUSTOM_RESIZE_NAME, CUSTOM_SCROLL_MESSAGE, CUSTOM_SCROLL_NAME, DROPDOWN_AND_INPUT_GAP, FILE_UPLOAD_ERRORS, IMAGE_MIME_TYPE, IMAGE_MIME_TYPES, IMAGE_MIME_TYPES_FOR_PREVIEW, MONTHS, SCREEN_SIZES };

package/hooks/index.d.ts

@@ -3,6 +3,7 @@ export * from './useGetTooltipStyles';
 export * from './useGetElemPositions';
 export * from './useGetTooltipPosition';
 export * from './useHideOnScroll';
+export * from './useHideOnResize';
 export * from './useFormProps';
 export * from './useFormContext';
 export * from './useOnOutsideClick';

package/hooks/index.js

@@ -3,6 +3,7 @@ export { useGetTooltipStyles } from './useGetTooltipStyles.js';
 export { useGetElemPositions } from './useGetElemPositions.js';
 export { useGetTooltipPosition } from './useGetTooltipPosition.js';
 export { useHideOnScroll } from './useHideOnScroll.js';
+export { useHideOnResize } from './useHideOnResize.js';
 export { useFormProps } from './useFormProps.js';
 export { useFormContext } from './useFormContext.js';
 export { useOnOutsideClick } from './useOnOutsideClick.js';

package/hooks/useHideOnResize.d.ts

@@ -0,0 +1 @@
+export declare const useHideOnResize: (hide: () => void) => null;

package/hooks/useHideOnResize.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { CUSTOM_RESIZE_NAME, CUSTOM_RESIZE_MESSAGE } from '../consts/index.js';
+
+var useHideOnResize = function useHideOnResize(hide) {
+  useEffect(function () {
+    window.addEventListener('resize', hide);
+    return function () {
+      window.removeEventListener('resize', hide);
+    };
+  }, []);
+  useEffect(function () {
+    window.addEventListener(CUSTOM_RESIZE_NAME, function (event) {
+      var customEvent = event;
+      // Check the event type
+      if (customEvent.detail === CUSTOM_RESIZE_MESSAGE) {
+        // Close the menu
+        hide();
+      }
+    });
+  }, []);
+  return null;
+};
+
+export { useHideOnResize };

package/index.js

@@ -477,6 +477,7 @@ import './components/Select/SharedComponents/ContentTop.js';
 import './components/Select/SharedComponents/Actions.js';
 import 'react-input-mask';
 import 'react-number-format';
+import './hooks/useHideOnResize.js';
 import './hooks/useGetHasBottomSpace.js';
 import './components/Select/SharedComponents/Loading.js';
 import './hooks/useChangePositionsOnScroll.js';

package/package.json

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