hrm_ui_lib 2.1.0 → 2.2.0

package/hooks/useGetTooltipPosition.js

@@ -1,85 +1,69 @@
 import { useMemo } from 'react';
-import { useGetElemPositions } from './useGetElemPositions.js';
-import { useGetElemSizes } from './useGetElemSizes.js';
-
-var GAP = 20;
-var ARROW_DISTANCE = 20;
-var useGetTooltipPosition = function useGetTooltipPosition(info) {
-  var initialPosition = info.initialPosition,
-    elemRef = info.elemRef,
-    tooltipRef = info.tooltipRef,
-    _info$hasTriangle = info.hasTriangle,
-    hasTriangle = _info$hasTriangle === void 0 ? true : _info$hasTriangle;
-  var _useGetElemPositions = useGetElemPositions(elemRef),
-    left = _useGetElemPositions.left,
-    top = _useGetElemPositions.top,
-    bottom = _useGetElemPositions.bottom;
-  var _useGetElemSizes = useGetElemSizes(tooltipRef),
-    tooltipWidth = _useGetElemSizes.width,
-    tooltipHeight = _useGetElemSizes.height;
-  var _useGetElemSizes2 = useGetElemSizes(elemRef),
-    itemWidth = _useGetElemSizes2.width;
-
-  // this is calculations for tooltip top/left/bottom/right positions
-  var calculatedPosition = useMemo(function () {
-    var hasTopSpace = tooltipHeight + GAP < top;
-    var hasBottomSpace = tooltipHeight + GAP < window.innerHeight - bottom;
-    var hasLeftSpace = tooltipWidth + GAP < left;
-    var hasRightSpace = tooltipWidth + GAP < window.innerWidth - left;
-    var hasMiddleRightSpace = tooltipWidth + GAP < window.innerWidth - left - itemWidth;
-    if (!hasBottomSpace && !hasRightSpace && initialPosition.includes('bottom-right')) {
-      return initialPosition.replace('bottom-right', 'top-left');
+import { useGetElemPositions } from './useGetElemPositions';
+import { useGetElemSizes } from './useGetElemSizes';
+const GAP = 20;
+const ARROW_DISTANCE = 20;
+export const useGetTooltipPosition = (info) => {
+    const { initialPosition, elemRef, tooltipRef, hasTriangle = true } = info;
+    const { left, top, bottom } = useGetElemPositions(elemRef);
+    const { width: tooltipWidth, height: tooltipHeight } = useGetElemSizes(tooltipRef);
+    const { width: itemWidth } = useGetElemSizes(elemRef);
+    // this is calculations for tooltip top/left/bottom/right positions
+    const calculatedPosition = useMemo(() => {
+        const hasTopSpace = tooltipHeight + GAP < top;
+        const hasBottomSpace = tooltipHeight + GAP < window.innerHeight - bottom;
+        const hasLeftSpace = tooltipWidth + GAP < left;
+        const hasRightSpace = tooltipWidth + GAP < window.innerWidth - left;
+        const hasMiddleRightSpace = tooltipWidth + GAP < window.innerWidth - left - itemWidth;
+        if (!hasBottomSpace && !hasRightSpace && initialPosition.includes('bottom-right')) {
+            return initialPosition.replace('bottom-right', 'top-left');
+        }
+        if (!hasTopSpace && initialPosition.includes('top')) {
+            return initialPosition.replace('top', 'bottom');
+        }
+        if (!hasBottomSpace && initialPosition.includes('bottom')) {
+            return initialPosition.replace('bottom', 'top');
+        }
+        if (!hasLeftSpace && initialPosition.includes('left')) {
+            return initialPosition.replace('left', 'right');
+        }
+        if (!hasRightSpace && initialPosition.includes('right')) {
+            return initialPosition.replace('right', 'left');
+        }
+        if (!hasMiddleRightSpace && initialPosition.includes('middle-right')) {
+            return initialPosition.replace('right', 'left');
+        }
+        return initialPosition;
+    }, [tooltipHeight, tooltipWidth, bottom, initialPosition]);
+    // this is calculations for triangle position
+    const finalPosition = useMemo(() => {
+        const hasLeftSpace = tooltipWidth < left + ARROW_DISTANCE + GAP;
+        const hasRightSpace = tooltipWidth + GAP < window.innerWidth - left;
+        // in case of middle position we don't need to change triangle position
+        if (calculatedPosition.includes('middle')) {
+            return calculatedPosition;
+        }
+        if (calculatedPosition.includes('right') && !hasLeftSpace) {
+            return calculatedPosition.replace('right', 'left');
+        }
+        if (calculatedPosition.includes('left') && !hasRightSpace) {
+            return calculatedPosition.replace('left', 'right');
+        }
+        if (calculatedPosition.includes('center')) {
+            const hasLeftHalfSpace = tooltipWidth / 2 < left + ARROW_DISTANCE + GAP;
+            const hasRightHalfSpace = tooltipWidth / 2 + GAP < window.innerWidth - left;
+            if (!hasLeftHalfSpace) {
+                return calculatedPosition.replace('center', 'left');
+            }
+            if (!hasRightHalfSpace) {
+                return calculatedPosition.replace('center', 'right');
+            }
+            return calculatedPosition;
+        }
+        return calculatedPosition;
+    }, [calculatedPosition, tooltipWidth, itemWidth, left]);
+    if (!hasTriangle) {
+        return calculatedPosition;
     }
-    if (!hasTopSpace && initialPosition.includes('top')) {
-      return initialPosition.replace('top', 'bottom');
-    }
-    if (!hasBottomSpace && initialPosition.includes('bottom')) {
-      return initialPosition.replace('bottom', 'top');
-    }
-    if (!hasLeftSpace && initialPosition.includes('left')) {
-      return initialPosition.replace('left', 'right');
-    }
-    if (!hasRightSpace && initialPosition.includes('right')) {
-      return initialPosition.replace('right', 'left');
-    }
-    if (!hasMiddleRightSpace && initialPosition.includes('middle-right')) {
-      return initialPosition.replace('right', 'left');
-    }
-    return initialPosition;
-  }, [tooltipHeight, tooltipWidth, bottom, initialPosition]);
-
-  // this is calculations for triangle position
-  var finalPosition = useMemo(function () {
-    var hasLeftSpace = tooltipWidth < left + ARROW_DISTANCE + GAP;
-    var hasRightSpace = tooltipWidth + GAP < window.innerWidth - left;
-
-    // in case of middle position we don't need to change triangle position
-    if (calculatedPosition.includes('middle')) {
-      return calculatedPosition;
-    }
-    if (calculatedPosition.includes('right') && !hasLeftSpace) {
-      return calculatedPosition.replace('right', 'left');
-    }
-    if (calculatedPosition.includes('left') && !hasRightSpace) {
-      return calculatedPosition.replace('left', 'right');
-    }
-    if (calculatedPosition.includes('center')) {
-      var hasLeftHalfSpace = tooltipWidth / 2 < left + ARROW_DISTANCE + GAP;
-      var hasRightHalfSpace = tooltipWidth / 2 + GAP < window.innerWidth - left;
-      if (!hasLeftHalfSpace) {
-        return calculatedPosition.replace('center', 'left');
-      }
-      if (!hasRightHalfSpace) {
-        return calculatedPosition.replace('center', 'right');
-      }
-      return calculatedPosition;
-    }
-    return calculatedPosition;
-  }, [calculatedPosition, tooltipWidth, itemWidth, left]);
-  if (!hasTriangle) {
-    return calculatedPosition;
-  }
-  return finalPosition;
+    return finalPosition;
 };
-
-export { useGetTooltipPosition };

package/hooks/useGetTooltipStyles.js

@@ -1,89 +1,47 @@
 import { useMemo } from 'react';
-import { useGetElemSizes } from './useGetElemSizes.js';
-import { useGetElemPositions } from './useGetElemPositions.js';
-import { useGetTooltipPosition } from './useGetTooltipPosition.js';
-import { Positions } from '../components/Tooltip/types.js';
-
-var TOOLTIP_GAP = 8;
-var useGetTooltipStyles = function useGetTooltipStyles(_ref) {
-  var initialPosition = _ref.initialPosition,
-    elemRef = _ref.elemRef,
-    tooltipRef = _ref.tooltipRef,
-    toolTipCurrentWidth = _ref.toolTipCurrentWidth;
-  var _useGetElemPositions = useGetElemPositions(elemRef),
-    top = _useGetElemPositions.top,
-    left = _useGetElemPositions.left,
-    right = _useGetElemPositions.right;
-  var _useGetElemSizes = useGetElemSizes(elemRef),
-    width = _useGetElemSizes.width,
-    height = _useGetElemSizes.height;
-  var _useGetElemSizes2 = useGetElemSizes(tooltipRef),
-    tooltipHeight = _useGetElemSizes2.height,
-    tooltipWitdh = _useGetElemSizes2.width;
-  var TOOLTIP_WIDTH = toolTipCurrentWidth || tooltipWitdh;
-  var tooltipPosition = useGetTooltipPosition({
-    tooltipRef: tooltipRef,
-    elemRef: elemRef,
-    initialPosition: initialPosition
-  });
-  var tooltipStyles = useMemo(function () {
-    if (tooltipPosition === Positions.BOTTOM_LEFT) {
-      return {
-        top: top + (height + TOOLTIP_GAP),
-        left: left
-      };
-    }
-    if (tooltipPosition === Positions.TOP_LEFT) {
-      return {
-        top: top - (tooltipHeight + TOOLTIP_GAP),
-        left: left
-      };
-    }
-    if (tooltipPosition === Positions.BOTTOM_RIGHT) {
-      return {
-        top: top + (height + TOOLTIP_GAP),
-        left: right - TOOLTIP_WIDTH - TOOLTIP_GAP
-      };
-    }
-    if (tooltipPosition === Positions.TOP_RIGHT) {
-      return {
-        top: top - tooltipHeight - TOOLTIP_GAP,
-        left: right - TOOLTIP_WIDTH - TOOLTIP_GAP
-      };
-    }
-    if (tooltipPosition === Positions.BOTTOM_CENTER) {
-      return {
-        top: top + (height + TOOLTIP_GAP),
-        left: left - (TOOLTIP_WIDTH - width) / 2
-      };
-    }
-    if (tooltipPosition === Positions.TOP_CENTER) {
-      return {
-        top: top - (tooltipHeight + TOOLTIP_GAP),
-        left: left - (TOOLTIP_WIDTH - width) / 2
-      };
-    }
-    if (tooltipPosition === Positions.MIDDLE_LEFT) {
-      return {
-        top: top + height / 2 - tooltipHeight / 2,
-        left: left - TOOLTIP_WIDTH - TOOLTIP_GAP
-      };
-    }
-    if (tooltipPosition === Positions.MIDDLE_RIGHT) {
-      return {
-        top: top + height / 2 - tooltipHeight / 2,
-        left: left + width + TOOLTIP_GAP
-      };
-    }
-    return {
-      left: left,
-      top: top
-    };
-  }, [top, left, width, height, tooltipPosition, TOOLTIP_WIDTH]);
-  return {
-    tooltipStyles: tooltipStyles,
-    tooltipPosition: tooltipPosition
-  };
+import { useGetElemSizes } from './useGetElemSizes';
+import { useGetElemPositions } from './useGetElemPositions';
+import { useGetTooltipPosition } from './useGetTooltipPosition';
+import { Positions } from '../components/Tooltip/types';
+const TOOLTIP_GAP = 8;
+export const useGetTooltipStyles = ({ initialPosition, elemRef, tooltipRef, toolTipCurrentWidth }) => {
+    const { top, left, right } = useGetElemPositions(elemRef);
+    const { width, height } = useGetElemSizes(elemRef);
+    const { height: tooltipHeight, width: tooltipWitdh } = useGetElemSizes(tooltipRef);
+    const TOOLTIP_WIDTH = toolTipCurrentWidth || tooltipWitdh;
+    const tooltipPosition = useGetTooltipPosition({ tooltipRef, elemRef, initialPosition });
+    const tooltipStyles = useMemo(() => {
+        if (tooltipPosition === Positions.BOTTOM_LEFT) {
+            return { top: top + (height + TOOLTIP_GAP), left };
+        }
+        if (tooltipPosition === Positions.TOP_LEFT) {
+            return { top: top - (tooltipHeight + TOOLTIP_GAP), left };
+        }
+        if (tooltipPosition === Positions.BOTTOM_RIGHT) {
+            return {
+                top: top + (height + TOOLTIP_GAP),
+                left: right - TOOLTIP_WIDTH - TOOLTIP_GAP
+            };
+        }
+        if (tooltipPosition === Positions.TOP_RIGHT) {
+            return {
+                top: top - tooltipHeight - TOOLTIP_GAP,
+                left: right - TOOLTIP_WIDTH - TOOLTIP_GAP
+            };
+        }
+        if (tooltipPosition === Positions.BOTTOM_CENTER) {
+            return { top: top + (height + TOOLTIP_GAP), left: left - (TOOLTIP_WIDTH - width) / 2 };
+        }
+        if (tooltipPosition === Positions.TOP_CENTER) {
+            return { top: top - (tooltipHeight + TOOLTIP_GAP), left: left - (TOOLTIP_WIDTH - width) / 2 };
+        }
+        if (tooltipPosition === Positions.MIDDLE_LEFT) {
+            return { top: top + height / 2 - tooltipHeight / 2, left: left - TOOLTIP_WIDTH - TOOLTIP_GAP };
+        }
+        if (tooltipPosition === Positions.MIDDLE_RIGHT) {
+            return { top: top + height / 2 - tooltipHeight / 2, left: left + width + TOOLTIP_GAP };
+        }
+        return { left, top };
+    }, [top, left, width, height, tooltipPosition, TOOLTIP_WIDTH]);
+    return { tooltipStyles, tooltipPosition };
 };
-
-export { useGetTooltipStyles };

package/hooks/useHideBodyScroll.js

@@ -1,35 +1,26 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useEffect } from 'react';
-
-var useHideBodyScroll = function useHideBodyScroll(isOpen) {
-  var _useState = useState('initial'),
-    _useState2 = _slicedToArray(_useState, 2),
-    initialOverflow = _useState2[0],
-    setInitialOverflow = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isHidden = _useState4[0],
-    setIsHidden = _useState4[1];
-  useEffect(function () {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-      setIsHidden(true);
-    } else {
-      if (isHidden) {
-        document.body.style.overflow = initialOverflow;
-      }
-    }
-  }, [isOpen]);
-  useEffect(function () {
-    var initial = document.body.style.overflow;
-    if (initial) {
-      setInitialOverflow(initial);
-    }
-    return function () {
-      document.body.style.overflow = initialOverflow;
-    };
-  }, []);
-  return null;
+import { useEffect, useState } from 'react';
+export const useHideBodyScroll = (isOpen) => {
+    const [initialOverflow, setInitialOverflow] = useState('initial');
+    const [isHidden, setIsHidden] = useState(false);
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+            setIsHidden(true);
+        }
+        else {
+            if (isHidden) {
+                document.body.style.overflow = initialOverflow;
+            }
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        const initial = document.body.style.overflow;
+        if (initial) {
+            setInitialOverflow(initial);
+        }
+        return () => {
+            document.body.style.overflow = initialOverflow;
+        };
+    }, []);
+    return null;
 };
-
-export { useHideBodyScroll };

package/hooks/useHideOnScroll.js

@@ -1,26 +1,21 @@
 import { useEffect } from 'react';
-import { CUSTOM_SCROLL_NAME, CUSTOM_SCROLL_MESSAGE } from '../consts/index.js';
-import '@babel/runtime/helpers/defineProperty';
-import '../type/file-upload.js';
-
-var useHideOnScroll = function useHideOnScroll(hide) {
-  useEffect(function () {
-    document.addEventListener('scroll', hide);
-    return function () {
-      document.removeEventListener('scroll', hide);
-    };
-  }, []);
-  useEffect(function () {
-    document.addEventListener(CUSTOM_SCROLL_NAME, function (event) {
-      var customEvent = event;
-      // Check the event type
-      if (customEvent.detail === CUSTOM_SCROLL_MESSAGE) {
-        // Close the menu
-        hide();
-      }
-    });
-  }, []);
-  return null;
+import { CUSTOM_SCROLL_NAME, CUSTOM_SCROLL_MESSAGE } from '../consts';
+export const useHideOnScroll = (hide) => {
+    useEffect(() => {
+        document.addEventListener('scroll', hide);
+        return () => {
+            document.removeEventListener('scroll', hide);
+        };
+    }, []);
+    useEffect(() => {
+        document.addEventListener(CUSTOM_SCROLL_NAME, (event) => {
+            const customEvent = event;
+            // Check the event type
+            if (customEvent.detail === CUSTOM_SCROLL_MESSAGE) {
+                // Close the menu
+                hide();
+            }
+        });
+    }, []);
+    return null;
 };
-
-export { useHideOnScroll };

package/hooks/useOnOutsideClick.js

@@ -1,52 +1,39 @@
 import { useEffect } from 'react';
-
-var callbackStack = [];
+const callbackStack = [];
 function handleMouseDownEvent(event) {
-  var callbackObject = callbackStack[callbackStack.length - 1];
-  if (!callbackObject) {
-    return;
-  }
-  var ref = callbackObject.ref,
-    callback = callbackObject.callback,
-    shouldRemoveCallback = callbackObject.shouldRemoveCallback;
-  // @ts-ignore
-  if (ref && !ref.contains(event.target)) {
-    if (shouldRemoveCallback) {
-      callbackStack.splice(callbackStack.length - 1, 1);
+    const callbackObject = callbackStack[callbackStack.length - 1];
+    if (!callbackObject) {
+        return;
     }
-    callback(event);
-  }
-}
-var useOnOutsideClick = function useOnOutsideClick(ref, callback, state, uid) {
-  var shouldRemoveCallback = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-  useEffect(function () {
-    if (ref && state && uid) {
-      callbackStack.push({
-        ref: ref,
-        callback: callback,
-        uid: uid,
-        shouldRemoveCallback: shouldRemoveCallback
-      });
-      if (callbackStack.length === 1) {
-        document.addEventListener('mousedown', handleMouseDownEvent);
-      }
-      return function () {
-        if (callbackStack.length === 0) {
-          document.removeEventListener('mousedown', handleMouseDownEvent);
+    const { ref, callback, shouldRemoveCallback } = callbackObject;
+    // @ts-ignore
+    if (ref && !ref.contains(event.target)) {
+        if (shouldRemoveCallback) {
+            callbackStack.splice(callbackStack.length - 1, 1);
         }
-      };
-    }
-  }, [ref, state, uid]);
-  useEffect(function () {
-    if (!state && callbackStack.length > 0) {
-      var activeElementIndex = callbackStack.findIndex(function (stack) {
-        return stack.uid === uid;
-      });
-      if (activeElementIndex >= 0) {
-        callbackStack.splice(activeElementIndex, 1);
-      }
+        callback(event);
     }
-  }, [state]);
+}
+export const useOnOutsideClick = (ref, callback, state, uid, shouldRemoveCallback = true) => {
+    useEffect(() => {
+        if (ref && state && uid) {
+            callbackStack.push({ ref, callback, uid, shouldRemoveCallback });
+            if (callbackStack.length === 1) {
+                document.addEventListener('mousedown', handleMouseDownEvent);
+            }
+            return () => {
+                if (callbackStack.length === 0) {
+                    document.removeEventListener('mousedown', handleMouseDownEvent);
+                }
+            };
+        }
+    }, [ref, state, uid]);
+    useEffect(() => {
+        if (!state && callbackStack.length > 0) {
+            const activeElementIndex = callbackStack.findIndex((stack) => stack.uid === uid);
+            if (activeElementIndex >= 0) {
+                callbackStack.splice(activeElementIndex, 1);
+            }
+        }
+    }, [state]);
 };
-
-export { useOnOutsideClick };

package/hooks/useScreenSize.js

@@ -1,38 +1,28 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useEffect } from 'react';
-import { SCREEN_SIZES } from '../consts/index.js';
-import '@babel/runtime/helpers/defineProperty';
-import '../type/file-upload.js';
-
-var SMALL = SCREEN_SIZES.SMALL,
-  MEDIUM = SCREEN_SIZES.MEDIUM;
-var useScreenSize = function useScreenSize() {
-  var _useState = useState(getScreenSize),
-    _useState2 = _slicedToArray(_useState, 2),
-    screenSize = _useState2[0],
-    setScreenSize = _useState2[1];
-  function getScreenSize() {
-    var width = window.innerWidth;
-    switch (true) {
-      case width <= SMALL:
-        return 'small';
-      case width <= MEDIUM:
-        return 'medium';
-      default:
-        return 'large';
+import { SCREEN_SIZES } from '../consts';
+const { SMALL, MEDIUM } = SCREEN_SIZES;
+export const useScreenSize = () => {
+    const [screenSize, setScreenSize] = useState(getScreenSize);
+    function getScreenSize() {
+        const width = window.innerWidth;
+        switch (true) {
+            case width <= SMALL:
+                return 'small';
+            case width <= MEDIUM:
+                return 'medium';
+            default:
+                return 'large';
+        }
     }
-  }
-  var handleResize = function handleResize() {
-    setScreenSize(getScreenSize());
-  };
-  useEffect(function () {
-    window.addEventListener('resize', handleResize);
-    handleResize();
-    return function () {
-      window.removeEventListener('resize', handleResize);
+    const handleResize = () => {
+        setScreenSize(getScreenSize());
     };
-  }, []);
-  return screenSize;
+    useEffect(() => {
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    return screenSize;
 };
-
-export { useScreenSize };

package/index.d.ts

@@ -2,6 +2,7 @@ import './assets/styles/index.scss';
 export * from './components/Alert';
 export * from './components/Avatar';
 export * from './components/Badge';
+export * from './components/BadgeV2';
 export * from './components/Breadcrumb';
 export * from './components/Button';
 export * from './components/Checkbox';