ab-ui-library 1.0.1

package/hooks/useGetHasBottomSpace.d.ts

@@ -0,0 +1,11 @@
+export declare const useGetHasTopSpace: ({ element, input }: {
+    element: HTMLDivElement | null;
+    input: HTMLElement | null;
+}) => boolean;
+export declare const useGetHasBottomSpace: ({ element, input }: {
+    element: HTMLDivElement | null;
+    input: HTMLElement | null;
+}) => {
+    hasBottomSpace: boolean;
+    bottomSpace: number;
+};

package/hooks/useGetHasBottomSpace.js

@@ -0,0 +1,26 @@
+import { useGetElemPositions } from './useGetElemPositions.js';
+import { useGetElemSizes } from './useGetElemSizes.js';
+
+var useGetHasTopSpace = function useGetHasTopSpace(_ref) {
+  var element = _ref.element,
+    input = _ref.input;
+  var _useGetElemSizes = useGetElemSizes(element),
+    height = _useGetElemSizes.height;
+  var _useGetElemPositions = useGetElemPositions(input),
+    inputTop = _useGetElemPositions.top;
+  return inputTop > height;
+};
+var useGetHasBottomSpace = function useGetHasBottomSpace(_ref2) {
+  var element = _ref2.element,
+    input = _ref2.input;
+  var _useGetElemSizes2 = useGetElemSizes(element),
+    height = _useGetElemSizes2.height;
+  var _useGetElemPositions2 = useGetElemPositions(input),
+    inputBottom = _useGetElemPositions2.bottom;
+  return {
+    hasBottomSpace: height < window.innerHeight - inputBottom,
+    bottomSpace: window.innerHeight - inputBottom
+  };
+};
+
+export { useGetHasBottomSpace, useGetHasTopSpace };

package/hooks/useGetTooltipPosition.d.ts

@@ -0,0 +1 @@
+export declare const useGetTooltipPosition: (info: TTooltipInfo) => TTooltipPosition;

package/hooks/useGetTooltipPosition.js

@@ -0,0 +1,85 @@
+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');
+    }
+    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;
+};
+
+export { useGetTooltipPosition };

package/hooks/useGetTooltipStyles.d.ts

@@ -0,0 +1,14 @@
+type TReturn = {
+    tooltipPosition: TTooltipPosition;
+    tooltipStyles: {
+        top: number;
+        left: number;
+    };
+};
+export declare const useGetTooltipStyles: ({ initialPosition, elemRef, tooltipRef, toolTipCurrentWidth }: {
+    initialPosition: TTooltipPosition;
+    elemRef: HTMLElement | null;
+    tooltipRef: HTMLElement | null;
+    toolTipCurrentWidth?: number | undefined;
+}) => TReturn;
+export {};

package/hooks/useGetTooltipStyles.js

@@ -0,0 +1,89 @@
+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
+  };
+};
+
+export { useGetTooltipStyles };

package/hooks/useHideBodyScroll.d.ts

@@ -0,0 +1 @@
+export declare const useHideBodyScroll: (isOpen: boolean) => null;

package/hooks/useHideBodyScroll.js

@@ -0,0 +1,35 @@
+import { _ as _slicedToArray } from '../slicedToArray-0c706912.js';
+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;
+};
+
+export { useHideBodyScroll };

package/hooks/useHideOnScroll.d.ts

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

package/hooks/useHideOnScroll.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { CUSTOM_SCROLL_NAME, CUSTOM_SCROLL_MESSAGE } from '../consts/index.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;
+};
+
+export { useHideOnScroll };

package/hooks/useOnOutsideClick.d.ts

@@ -0,0 +1,3 @@
+type TRefs = HTMLElement | (HTMLElement | null)[] | null;
+export declare const useOnOutsideClick: (ref: TRefs, callback: (event: MouseEvent) => void, state: boolean, uid: string, shouldRemoveCallback?: boolean) => void;
+export {};

package/hooks/useOnOutsideClick.js

@@ -0,0 +1,65 @@
+import { useEffect } from 'react';
+
+var callbackStack = [];
+function handleMouseDownEvent(event) {
+  var callbackObject = callbackStack[callbackStack.length - 1];
+  if (!callbackObject) {
+    return;
+  }
+  var ref = callbackObject.ref,
+    callback = callbackObject.callback,
+    shouldRemoveCallback = callbackObject.shouldRemoveCallback;
+  var isContained = false;
+  if (ref && Array.isArray(ref) && ref.some(function (eachElement) {
+    return eachElement === null || eachElement === void 0 ? void 0 : eachElement.contains(event.target);
+  })) {
+    isContained = true;
+  } else if (ref && !Array.isArray(ref) && ref.contains(event.target)) {
+    isContained = true;
+  }
+  if (!isContained) {
+    if (shouldRemoveCallback) {
+      callbackStack.splice(callbackStack.length - 1, 1);
+    }
+    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 () {
+        var activeElementIndex = callbackStack.findIndex(function (stack) {
+          return stack.uid === uid;
+        });
+        if (activeElementIndex >= 0) {
+          callbackStack.splice(activeElementIndex, 1);
+        }
+        if (callbackStack.length === 0) {
+          document.removeEventListener('mousedown', handleMouseDownEvent);
+        }
+      };
+    }
+  }, [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);
+      }
+    }
+  }, [state]);
+};
+
+export { useOnOutsideClick };

package/hooks/useScreenSize.d.ts

@@ -0,0 +1,3 @@
+type ScreenSize = 'small' | 'medium' | 'large';
+export declare const useScreenSize: () => ScreenSize;
+export {};

package/hooks/useScreenSize.js

@@ -0,0 +1,36 @@
+import { _ as _slicedToArray } from '../slicedToArray-0c706912.js';
+import { useState, useEffect } from 'react';
+import { SCREEN_SIZES } from '../consts/index.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';
+    }
+  }
+  var handleResize = function handleResize() {
+    setScreenSize(getScreenSize());
+  };
+  useEffect(function () {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return screenSize;
+};
+
+export { useScreenSize };

package/index.d.ts

@@ -0,0 +1,54 @@
+import './assets/styles/index.scss';
+export * from './components/Alert';
+export * from './components/Avatar';
+export * from './components/AdvancedTable';
+export * from './components/Badge';
+export * from './components/Breadcrumb';
+export * from './components/Button';
+export * from './components/ButtonIcon';
+export * from './components/CardBody';
+export * from './components/CardSelect';
+export * from './components/Cards';
+export * from './components/Checkbox';
+export * from './components/Chips';
+export * from './components/Collapse';
+export * from './components/Container';
+export * from './components/Copy';
+export * from './components/Counter';
+export * from './components/DatePicker';
+export * from './components/Divider';
+export * from './components/Empty';
+export * from './components/FileUpload';
+export * from './components/FormContainer';
+export * from './components/FormField';
+export * from './components/FramedIcon';
+export * from './components/Heading';
+export * from './components/Image';
+export * from './components/Input';
+export * from './components/Link';
+export * from './components/Menu';
+export * from './components/Modal';
+export * from './components/More';
+export * from './components/Pagination';
+export * from './components/Popover';
+export * from './components/Progress';
+export * from './components/ProgressStep';
+export * from './components/Radio';
+export * from './components/Select';
+export * from './components/SideNavigation';
+export * from './components/SideSheet';
+export * from './components/Snackbar';
+export * from './components/Status';
+export * from './components/Stepper';
+export * from './components/Switcher';
+export * from './components/Tab';
+export * from './components/Table';
+export * from './components/Text';
+export * from './components/Textarea';
+export * from './components/Tooltip';
+export * from './components/SVGIcons';
+export * from './components/OneTimePassword';
+export * from './helperComponents/OptionItem';
+export { FormContext } from './context';
+export { useFormProps } from './hooks';
+export { useFieldArray } from 'react-hook-form';