@7shifts/sous-chef 3.64.0 → 3.65.0-beta.1

package/dist/index.js

@@ -13779,6 +13779,81 @@ var PROFILE_IMAGES = [{
   avatarColor: '#F2DCBD'
 }];
 
+var elementCallbackMap = null;
+function getElementCallbackMap() {
+  if (!elementCallbackMap) {
+    elementCallbackMap = new Map();
+  }
+  return elementCallbackMap;
+}
+var intersectionObserver = null;
+function getIntersectionObserver() {
+  if (!intersectionObserver) {
+    intersectionObserver = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var _getElementCallbackMa;
+        (_getElementCallbackMa = getElementCallbackMap().get(entry.target)) == null || _getElementCallbackMa(entry.isIntersecting);
+      });
+    }, {
+      rootMargin: '50px 50px 50px 50px',
+      threshold: 0
+    });
+  }
+  return intersectionObserver;
+}
+/**
+ * @private
+ * @description For internal use only. For a general hook to check element visibility, use useIsVisibleInViewPort.
+ */
+function useViewPortIntersectionObserver() {
+  var intersectionObserverRef = React.useRef(getIntersectionObserver());
+  var elementCallbackMapRef = React.useRef(getElementCallbackMap());
+  var observeElement = React.useCallback(function (target, callback) {
+    elementCallbackMapRef.current.set(target, callback);
+    intersectionObserverRef.current.observe(target);
+  }, []);
+  var unobserveElement = React.useCallback(function (target) {
+    elementCallbackMapRef.current["delete"](target);
+    intersectionObserverRef.current.unobserve(target);
+  }, []);
+  return {
+    observeElement: observeElement,
+    unobserveElement: unobserveElement
+  };
+}
+
+/**
+ * Custom React hook that monitors the visibility of a referenced DOM element within the viewport
+ * using the Browser Intersection Observer API.
+ *
+ * @returns {IsVisibleInViewPortResult}
+ */
+function useIsVisibleInViewPort() {
+  var wrapperRef = React.useRef(null);
+  var _useState = React.useState(false),
+    isVisible = _useState[0],
+    setIsVisible = _useState[1];
+  var _useViewPortIntersect = useViewPortIntersectionObserver(),
+    observeElement = _useViewPortIntersect.observeElement,
+    unobserveElement = _useViewPortIntersect.unobserveElement;
+  var handleRefUpdate = React.useCallback(function (target) {
+    if (wrapperRef.current) {
+      unobserveElement(wrapperRef.current);
+    }
+    if (target) {
+      observeElement(target, function (v) {
+        setIsVisible(v);
+      });
+    }
+    setIsVisible(false);
+    wrapperRef.current = target;
+  }, [observeElement, unobserveElement]);
+  return {
+    isVisible: isVisible,
+    elementRef: handleRefUpdate
+  };
+}
+
 var Avatar = function Avatar(_ref) {
   var _classnames;
   var children = _ref.children,
@@ -13786,10 +13861,14 @@ var Avatar = function Avatar(_ref) {
     color = _ref$color === void 0 ? COLORS['grey-400'] : _ref$color,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    url = _ref.url,
+    urlProp = _ref.url,
     badge = _ref.badge,
     alt = _ref.alt,
     testId = _ref.testId;
+  var _useIsVisibleInViewPo = useIsVisibleInViewPort(),
+    isVisible = _useIsVisibleInViewPo.isVisible,
+    elementRef = _useIsVisibleInViewPo.elementRef;
+  var url = isVisible ? urlProp : undefined;
   var _useState = React.useState(false),
     showIconInsteadOfImage = _useState[0],
     setShowIconInsteadOfImage = _useState[1];
@@ -13800,7 +13879,8 @@ var Avatar = function Avatar(_ref) {
   // If passing an url we are defaulting to a lighter grey while the image loads
   var backgroundColor = url ? COLORS['grey-200'] : getColor(color);
   return React__default["default"].createElement("div", {
-    className: classnames__default["default"](styles$6['avatar__container'])
+    className: classnames__default["default"](styles$6['avatar__container']),
+    ref: elementRef
   }, React__default["default"].createElement("div", {
     className: classnames__default["default"](styles$6['avatar'], (_classnames = {}, _classnames[styles$6['avatar--small']] = size === 'small', _classnames[styles$6['avatar--medium']] = size === 'medium', _classnames[styles$6['avatar--large']] = size === 'large', _classnames[styles$6['avatar--extra-large']] = size === 'extra-large', _classnames)),
     style: {