aefis-core-ui 2.4.1 → 2.4.2

package/dist/index.modern.js

@@ -89,6 +89,7 @@ import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { v4 } from 'uuid';
 import produce from 'immer';
+import { Scrollbars } from 'react-custom-scrollbars-2';
 import { GridColumnMenu, GridFooterContainer, GridPagination, GridRowCount, useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro';
 import { MuiForm5 } from '@rjsf/material-ui';
 import isEmpty from 'lodash/isEmpty';
@@ -26158,367 +26159,97 @@ TextBuilder.propTypes = {
 };
 var TextBuilder$1 = withStore(TextBuilder);
 
-const ScrollBarContent = /*#__PURE__*/React__default.forwardRef(({
-  children,
-  sx
-}, ref) => {
-  return /*#__PURE__*/jsx(Box$2, {
-    sx: _extends({}, sx, {
-      overflow: "auto",
-      position: "relative",
-      "&::-webkit-scrollbar": {
-        display: "none"
-      }
-    }),
-    ref: ref,
-    children: children
-  });
-});
-
-const ScrollBarContainer = /*#__PURE__*/React__default.forwardRef(({
-  children,
-  isDragging
-}, ref) => {
-  return /*#__PURE__*/jsx(Box$2, {
-    id: "custom-scrollbars__scrollbar",
-    sx: {
-      display: "flex",
-      justifyContent: "center"
-    },
-    children: /*#__PURE__*/jsx(Box$2, {
-      id: "custom-scrollbars__track-and-thumb",
-      sx: [{
-        display: "block",
-        height: "100%",
-        position: "relative",
-        width: "9px",
-        transition: "0.2s",
-        zIndex: 9
-      }, isDragging && {
-        width: 13
-      }, {
-        "&:hover": {
-          width: "13px"
-        }
-      }],
-      children: children
-    })
-  });
-});
-
-const ScrollBarTrack = /*#__PURE__*/React__default.forwardRef(({
-  sx,
-  onClick
-}, ref) => {
-  return /*#__PURE__*/jsx(Box$2, {
-    id: "custom-scrollbars__track",
-    sx: [_extends({
-      bgcolor: "#eee",
-      opacity: 0.9,
-      borderRadius: "12px"
-    }, sx, {
-      height: "100%",
-      width: "inherit"
-    })],
-    ref: ref,
-    onClick: onClick
-  });
-});
-
-const ScrollBarThumb = /*#__PURE__*/React__default.forwardRef(({
-  thumbHeight,
-  isDragging,
-  onMouseDown,
-  sx,
-  thumbPosition
-}, ref) => {
-  return /*#__PURE__*/jsx(Box$2, {
-    id: "custom-scrollbars__thumb",
-    ref: ref,
-    sx: _extends({
-      borderRadius: "12px",
-      bgcolor: "#aaa"
-    }, sx, {
-      position: "absolute",
-      width: "inherit",
-      height: thumbHeight,
-      cursor: isDragging ? "grabbing" : "grab",
-      top: thumbPosition
-    }),
-    onMouseDown: onMouseDown
-  });
-});
-
-const _excluded$5 = ["children", "height", "thumbHeight", "scrollBarSx", "scrollBarContentSx", "scrollBarTrackSx", "scrollBarThumbSx", "showTopFade", "showBottomFade", "component", "onScrollReachStart", "onScrollReachEnd", "onScroll"];
+const _excluded$5 = ["children", "height", "showTopFade", "showBottomFade", "component", "onScrollReachStart", "onScrollReachEnd", "onScroll", "scrollBarsProps"];
+const calculatePercentage = (value, maxValue) => {
+  if (maxValue === 0) return 0;
+  return Math.floor(value / maxValue * 100);
+};
 const ScrollingContainer = _ref => {
   let {
       children,
       height = "100%",
-      thumbHeight = 20,
-      scrollBarSx = {},
-      scrollBarContentSx = {},
-      scrollBarTrackSx = {},
-      scrollBarThumbSx = {},
       showTopFade = true,
       showBottomFade = true,
       component: Component = Box$2,
       onScrollReachStart,
       onScrollReachEnd,
-      onScroll
+      onScroll,
+      scrollBarsProps
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  /*
-   * Refs for Content Box, Scroll Track And Scroll Thumb
-   * */
-  const contentRef = useRef(null);
-  const scrollTrackRef = useRef(null);
-  const scrollThumbRef = useRef(null);
-  const wrapperRef = useRef(null);
-  /*
-     Resize observer is for scroll tracking
-   */
-  const observer = useRef(null);
-
-  /**
-   * thumbHeightState : Uncontrolled state, it will set the thumb's minimum height
-   * scrollStartPosition: when the user grabs the thumb it's first scrolltop will be setted to this state
-   * initialScrollTop: when the user grabs the thumb container's scrolltop position will be setted to this state.
-   * isDragging: when the user grabs the thumb it will be true.
-   * hasOverflowingChildren: control for overflow if not overflowing then there is no need for scrollbar
-   * thumbPosition: dynamically gets the thumb's position
-   */
-
-  const [thumbHeightState, setThumbHeightState] = useState(1);
-  const [scrollStartPosition, setScrollStartPosition] = useState(null);
-  const [initialScrollTop, setInitialScrollTop] = useState(0);
-  const [isDragging, setIsDragging] = useState(false);
-  const [thumbPosition, setThumbPosition] = useState(-1);
-  const [hasOverflowingChildren, setHasOverflowingChildren] = useState(true);
-
-  /**
-   * HandleThumbMouseDown function is used for
-   *  - when user grabs the thumb this function will set the isDragging state to true
-   *  - it will get where the user started to grab the thumb -> scrollStartPosition
-   * @returns {void}
-   */
-  const handleThumbMousedown = useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    setScrollStartPosition(e.clientY);
-    if (contentRef.current) setInitialScrollTop(contentRef.current.scrollTop);
-    setIsDragging(true);
-  }, []);
-
-  /**
-   * When the user leaves the thumb isDragging will be false
-   *
-   */
-  const handleThumbMouseup = useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isDragging) {
-      setIsDragging(false);
-    }
-  }, [isDragging]);
-
-  /**
-   *  if the user is dragging the thumb
-   *  - it will get content's scroll height and offset height
-   *  - calculate the deltaY (Subtract the current mouse y position from where you started to get the pixel difference in mouse position. Multiply by ratio of visible content height to thumb height to scale up the difference for content scrolling.)
-   *  - get the minimum value (in this case max value is contentScrollHeight - contentOffsetHeight and deltaY works with screen height. if initialScrollTop + deltaY > contentScrollHeight - contentOffsetHeight then it has to be the minimum value)
-   *  - set contentRef.scrollTop to new value
-   */
-  const handleThumbMousemove = useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (isDragging) {
-      const {
-        scrollHeight: contentScrollHeight,
-        offsetHeight: contentOffsetHeight
-      } = contentRef.current;
-      const deltaY = (e.clientY - scrollStartPosition) * (contentOffsetHeight / thumbHeightState);
-      const newScrollTop = Math.min(initialScrollTop + deltaY, contentScrollHeight - contentOffsetHeight);
-      contentRef.current.scrollTop = newScrollTop;
+  const scrollBarRef = useRef();
+  const [ariaScrollValues, setAriaScrollValues] = useState({
+    horizontal: 0,
+    vertical: 0
+  });
+  const onScrollEvent = useCallback(event => {
+    setAriaScrollValues({
+      vertical: calculatePercentage(event.target.scrollTop, event.target.scrollHeight - event.target.clientHeight),
+      horizontal: calculatePercentage(event.target.scrollLeft, event.target.scrollWidth - event.target.clientWidth)
+    });
+    onScroll && onScroll(event);
+    if (Math.round(event.target.scrollTop) === event.target.scrollHeight - event.target.clientHeight) {
+      onScrollReachEnd && onScrollReachEnd(event);
     }
-  }, [isDragging, scrollStartPosition, thumbHeightState]);
-
-  /**
-   * When user scrolls
-   *  - first we need to calculate ratio.
-   *  - we get content's scrollTop and ScrollHeight, scrollTrack's Height
-   *  - to calculate the ratio we need to divide content's scrollTop to scrollHeight to get the ratio and then multiply it with trackHeight
-   *  - with math.min if scrolling > trackHeight - thumbHeightSize it will be setted to (trackHeight - thumbHeightSize)
-   */
-  const handleThumbPosition = useCallback(() => {
-    if (!contentRef.current || !scrollTrackRef.current || !scrollThumbRef.current) {
-      return;
+    if (event.target.scrollTop === 0) {
+      onScrollReachStart && onScrollReachStart(event);
     }
-    const {
-      scrollTop: contentTop,
-      scrollHeight: contentHeight
-    } = contentRef.current;
-    const {
-      clientHeight: trackHeight
-    } = scrollTrackRef.current;
-    let newTop = +contentTop / +contentHeight * trackHeight;
-    newTop = Math.min(newTop, trackHeight - thumbHeightState);
-    setThumbPosition(newTop);
   }, []);
-
-  /**
-   * - First, figure out where we clicked
-   * - Next, figure out the distance between the top of the track and the top of the viewport
-   * - We want the middle of the thumb to jump to where we clicked, so we subtract half the thumb's height to offset the position
-   * - Find the ratio of the new position to the total content length using the thumb and track values...
-   * - multiply ratio with scrollHeight to get the amount
-   *
-   * @param {any} (e
-   * @returns {any}
-   */
-  const handleTrackClick = useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
-    const {
-      current: trackCurrent
-    } = scrollTrackRef;
-    const {
-      current: contentCurrent
-    } = contentRef;
-    if (trackCurrent && contentCurrent) {
-      const {
-        clientY
-      } = e;
-      const target = e.target;
-      const rect = target.getBoundingClientRect();
-      const trackTop = rect.top;
-      const thumbOffset = -(thumbHeight / 2);
-      const clickRatio = (clientY - trackTop + thumbOffset) / trackCurrent.clientHeight;
-      const scrollAmount = Math.floor(clickRatio * contentCurrent.scrollHeight);
-      contentCurrent.scrollTo({
-        top: scrollAmount
-      });
-    }
-  }, [thumbHeight]);
-
-  /**
-   * This useEffect checks if the user scrolled to bottom or to top
-   */
-  useEffect(() => {
-    if (contentRef.current) {
-      var _contentRef$current;
-      if (thumbPosition + thumbHeightState >= ((_contentRef$current = contentRef.current) == null ? void 0 : _contentRef$current.clientHeight)) {
-        onScrollReachEnd && onScrollReachEnd();
-      }
-      if (thumbPosition == 0) {
-        onScrollReachStart && onScrollReachStart();
-      }
-      //this is for datatable to determine if the user is scrolled or not
-      const isScrolled = contentRef.current.scrollTop > 5 ? true : false;
-      onScroll && onScroll(isScrolled);
-    }
-  }, [thumbPosition]);
-
-  /**
-   * ResizeObserver objects function. it will set the maximum height for thumb when this component resized.
-   * @param {any} ref
-   * @param {any} trackSize
-   * @returns {void}
-   */
-  function handleResize(ref, trackSize) {
-    const {
-      clientHeight,
-      scrollHeight
-    } = ref;
-    setThumbHeightState(Math.max(clientHeight / scrollHeight * trackSize, 20));
-  }
-
-  /**
-   * hasOverflowChildren checks if the component has overflow or not
-   * observer sets itself to observe component size changes
-   * contentRef gets the handleThumbPosition scroll event
-   */
-
-  useEffect(() => {
-    if (contentRef.current && scrollTrackRef.current) {
-      var _contentRef$current2;
-      const hasOverflowChildren = contentRef.current.offsetHeight < contentRef.current.scrollHeight || contentRef.current.offsetWidth < contentRef.current.scrollWidth;
-      if (!hasOverflowChildren) {
-        setHasOverflowingChildren(false);
-        return;
-      }
-      observer.current = new ResizeObserver(() => {
-        handleResize(contentRef == null ? void 0 : contentRef.current, scrollTrackRef.current.clientHeight);
-      });
-      observer.current.observe(contentRef.current);
-      (_contentRef$current2 = contentRef.current) == null ? void 0 : _contentRef$current2.addEventListener("scroll", handleThumbPosition);
-      return () => {
-        var _contentRef$current3, _observer$current;
-        if (!contentRef.current) return;
-        (_contentRef$current3 = contentRef.current) == null ? void 0 : _contentRef$current3.removeEventListener("scroll", handleThumbPosition);
-        (_observer$current = observer.current) == null ? void 0 : _observer$current.unobserve(contentRef == null ? void 0 : contentRef.current);
-      };
-    }
-  }, []);
-
-  /**
-   * this useEffect is to set thumbMouseMoves
-   */
-  useEffect(() => {
-    document.addEventListener("mousemove", handleThumbMousemove);
-    document.addEventListener("mouseup", handleThumbMouseup);
-    document.addEventListener("mouseleave", handleThumbMouseup);
-    return () => {
-      document.removeEventListener("mousemove", handleThumbMousemove);
-      document.removeEventListener("mouseup", handleThumbMouseup);
-      document.removeEventListener("mouseleave", handleThumbMouseup);
-    };
-  }, [handleThumbMousemove, handleThumbMouseup]);
-  return /*#__PURE__*/jsxs(Component, _extends({}, rest, {
-    sx: _extends({}, scrollBarSx, {
-      height: height,
-      overflow: "hidden",
+  return /*#__PURE__*/jsxs(Box$2, _extends({
+    sx: {
       position: "relative",
-      gridTemplate: `auto / 1fr auto`,
-      display: "grid",
-      "&::-webkit-scrollbar": {
-        display: "none"
-      }
-    }),
-    ref: wrapperRef,
+      height: height
+    }
+  }, rest, {
     children: [showTopFade && /*#__PURE__*/jsx(Box$2, {
       sx: {
-        width: "100%",
+        width: "calc(100% - 10px)",
         bottom: "auto",
         top: 0,
         left: 0,
         height: "1rem",
-        position: "fixed",
+        position: "absolute",
         zIndex: 4,
         content: '""',
         background: "linear-gradient(180deg,#fff 20%,hsla(0,0%,100%,0))",
         zIndex: 8
       }
-    }), /*#__PURE__*/jsx(ScrollBarContent, {
-      sx: scrollBarContentSx,
-      ref: contentRef,
+    }), /*#__PURE__*/jsx(Scrollbars, _extends({
+      id: "scrollbar-content"
+    }, scrollBarsProps, {
+      onScroll: onScrollEvent,
+      ref: scrollBarRef,
+      role: "scrollbar",
+      renderTrackVertical: props => {
+        return /*#__PURE__*/jsx("div", {
+          "aria-controls": "scrollbar-content",
+          "aria-orientation": "vertical",
+          "aria-valuenow": ariaScrollValues.vertical,
+          style: _extends({}, props.style, {
+            bottom: 2,
+            right: 2,
+            top: 2,
+            borderRadius: 3
+          })
+        });
+      },
+      renderTrackHorizontal: props => {
+        return /*#__PURE__*/jsx("div", {
+          "aria-controls": "scrollbar-content",
+          "aria-orientation": "horizontal",
+          "aria-valuenow": ariaScrollValues.horizontal,
+          style: _extends({}, props.style, {
+            right: 2,
+            bottom: 2,
+            left: 2,
+            borderRadius: 3
+          })
+        });
+      },
       children: children
-    }), hasOverflowingChildren && /*#__PURE__*/jsxs(ScrollBarContainer, {
-      isDragging: isDragging,
-      children: [/*#__PURE__*/jsx(ScrollBarTrack, {
-        sx: scrollBarTrackSx,
-        ref: scrollTrackRef,
-        onClick: handleTrackClick
-      }), /*#__PURE__*/jsx(ScrollBarThumb, {
-        ref: scrollThumbRef,
-        thumbHeight: thumbHeightState,
-        isDragging: isDragging,
-        onMouseDown: handleThumbMousedown,
-        sx: scrollBarThumbSx,
-        thumbPosition: thumbPosition
-      })]
-    }), showBottomFade && /*#__PURE__*/jsx(Box$2, {
+    })), showBottomFade && /*#__PURE__*/jsx(Box$2, {
       sx: {
-        width: "100%",
+        width: "calc(100% - 10px)",
         bottom: 0,
         top: "auto",
         left: 0,
@@ -26548,7 +26279,9 @@ ScrollingContainer.propTypes = {
   /** Function to handle when component scroll reaches the end or bottom. */
   onScrollReachEnd: PropTypes.func,
   /** Component used to render the container. */
-  component: PropTypes.string
+  component: PropTypes.string,
+  /**ScrollBars Props */
+  scrollBarsProps: PropTypes.object
 };
 
 // Store the license information in a global, so it can be shared