@livetiles/reach-components-react 0.4.0-preview.312 → 0.4.0-preview.313

package/index.esm2.js

@@ -87849,9 +87849,9 @@ var AuthenticationContextProvider = function AuthenticationContextProvider(_a) {
   }), void 0);
 };
 
-var version$1 = "0.4.0-preview.312";
-var buildId = "100367";
-var commitId = "6ebc60836600173adb26d3000b167ceff44b7b9b";
+var version$1 = "0.4.0-preview.313";
+var buildId = "100376";
+var commitId = "916b802c1949cb2127b24368855e41b9dc4fafc1";
 var isCustomerBuild = false;
 var buildInfo = {
 	version: version$1,
@@ -135699,9 +135699,11 @@ var ToolbarFilterPanel = function ToolbarFilterPanel(_a) {
       children = _a.children;
   var overflowContainerRef = useRef$1(null);
 
-  var _b = useState$2(false),
-      showScrollButtons = _b[0],
-      setShowScrollButtons = _b[1];
+  var _b = useState$2({
+    show: false
+  }),
+      scrollButtonsState = _b[0],
+      setScrollButtonsState = _b[1];
 
   useEffect$1(function () {
     var observer = new ResizeObserver_2(handleResize);
@@ -135710,6 +135712,23 @@ var ToolbarFilterPanel = function ToolbarFilterPanel(_a) {
       return observer.disconnect();
     }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  useEffect$1(function () {
+    var scrollTimeout;
+
+    var scrollListener = function scrollListener() {
+      clearTimeout(scrollTimeout);
+      scrollTimeout = setTimeout(function () {
+        setScrollButtonDisabledState();
+      }, 100);
+    };
+
+    overflowContainerRef.current.addEventListener('scroll', scrollListener);
+    return function () {
+      var _a;
+
+      return (_a = overflowContainerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', scrollListener);
+    };
+  });
   return jsx$1(FilterContextProvider, __assign$g({
     filter: filter,
     onChange: onChange
@@ -135719,17 +135738,19 @@ var ToolbarFilterPanel = function ToolbarFilterPanel(_a) {
         ref: overflowContainerRef
       }, {
         children: children
-      }), void 0), showScrollButtons && jsxs(Fragment, {
+      }), void 0), scrollButtonsState.show && jsxs(Fragment, {
         children: [jsx$1(ToolbarIconButton, {
           iconName: "ChevronLeft",
           onClick: function () {
             return handleScroll('left');
-          }
+          },
+          disabled: scrollButtonsState.disableLeft
         }, void 0), jsx$1(ToolbarIconButton, {
           iconName: "ChevronRight",
           onClick: function () {
             return handleScroll('right');
-          }
+          },
+          disabled: scrollButtonsState.disableRight
         }, void 0)]
       }, void 0)]
     }, void 0)
@@ -135798,7 +135819,28 @@ var ToolbarFilterPanel = function ToolbarFilterPanel(_a) {
   }
 
   function handleResize() {
-    setShowScrollButtons(overflowContainerRef.current.scrollWidth > overflowContainerRef.current.clientWidth);
+    setScrollButtonsState({
+      show: overflowContainerRef.current.scrollWidth > overflowContainerRef.current.clientWidth,
+      disableLeft: isLeftScrollButtonDisabled(),
+      disableRight: isRightScrollButtonDisabled()
+    });
+  }
+
+  function setScrollButtonDisabledState() {
+    setScrollButtonsState(function (s) {
+      return __assign$g(__assign$g({}, s), {
+        disableLeft: isLeftScrollButtonDisabled(),
+        disableRight: isRightScrollButtonDisabled()
+      });
+    });
+  }
+
+  function isLeftScrollButtonDisabled() {
+    return overflowContainerRef.current.scrollLeft === 0;
+  }
+
+  function isRightScrollButtonDisabled() {
+    return overflowContainerRef.current.scrollLeft + overflowContainerRef.current.clientWidth >= overflowContainerRef.current.scrollWidth;
   }
 };
 

package/index.umd.js

@@ -87705,9 +87705,9 @@
 	  }), void 0);
 	};
 
-	var version$1 = "0.4.0-preview.312";
-	var buildId = "100367";
-	var commitId = "6ebc60836600173adb26d3000b167ceff44b7b9b";
+	var version$1 = "0.4.0-preview.313";
+	var buildId = "100376";
+	var commitId = "916b802c1949cb2127b24368855e41b9dc4fafc1";
 	var isCustomerBuild = false;
 	var buildInfo = {
 		version: version$1,
@@ -135571,9 +135571,11 @@
 	      children = _a.children;
 	  var overflowContainerRef = React$d.useRef(null);
 
-	  var _b = React$d.useState(false),
-	      showScrollButtons = _b[0],
-	      setShowScrollButtons = _b[1];
+	  var _b = React$d.useState({
+	    show: false
+	  }),
+	      scrollButtonsState = _b[0],
+	      setScrollButtonsState = _b[1];
 
 	  React$d.useEffect(function () {
 	    var observer = new ResizeObserver_2(handleResize);
@@ -135582,6 +135584,23 @@
 	      return observer.disconnect();
 	    }; // eslint-disable-next-line react-hooks/exhaustive-deps
 	  }, []);
+	  React$d.useEffect(function () {
+	    var scrollTimeout;
+
+	    var scrollListener = function scrollListener() {
+	      clearTimeout(scrollTimeout);
+	      scrollTimeout = setTimeout(function () {
+	        setScrollButtonDisabledState();
+	      }, 100);
+	    };
+
+	    overflowContainerRef.current.addEventListener('scroll', scrollListener);
+	    return function () {
+	      var _a;
+
+	      return (_a = overflowContainerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', scrollListener);
+	    };
+	  });
 	  return jsxRuntime.jsx(FilterContextProvider, __assign$g({
 	    filter: filter,
 	    onChange: onChange
@@ -135591,17 +135610,19 @@
 	        ref: overflowContainerRef
 	      }, {
 	        children: children
-	      }), void 0), showScrollButtons && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+	      }), void 0), scrollButtonsState.show && jsxRuntime.jsxs(jsxRuntime.Fragment, {
 	        children: [jsxRuntime.jsx(ToolbarIconButton, {
 	          iconName: "ChevronLeft",
 	          onClick: function () {
 	            return handleScroll('left');
-	          }
+	          },
+	          disabled: scrollButtonsState.disableLeft
 	        }, void 0), jsxRuntime.jsx(ToolbarIconButton, {
 	          iconName: "ChevronRight",
 	          onClick: function () {
 	            return handleScroll('right');
-	          }
+	          },
+	          disabled: scrollButtonsState.disableRight
 	        }, void 0)]
 	      }, void 0)]
 	    }, void 0)
@@ -135670,7 +135691,28 @@
 	  }
 
 	  function handleResize() {
-	    setShowScrollButtons(overflowContainerRef.current.scrollWidth > overflowContainerRef.current.clientWidth);
+	    setScrollButtonsState({
+	      show: overflowContainerRef.current.scrollWidth > overflowContainerRef.current.clientWidth,
+	      disableLeft: isLeftScrollButtonDisabled(),
+	      disableRight: isRightScrollButtonDisabled()
+	    });
+	  }
+
+	  function setScrollButtonDisabledState() {
+	    setScrollButtonsState(function (s) {
+	      return __assign$g(__assign$g({}, s), {
+	        disableLeft: isLeftScrollButtonDisabled(),
+	        disableRight: isRightScrollButtonDisabled()
+	      });
+	    });
+	  }
+
+	  function isLeftScrollButtonDisabled() {
+	    return overflowContainerRef.current.scrollLeft === 0;
+	  }
+
+	  function isRightScrollButtonDisabled() {
+	    return overflowContainerRef.current.scrollLeft + overflowContainerRef.current.clientWidth >= overflowContainerRef.current.scrollWidth;
 	  }
 	};
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@livetiles/reach-components-react",
   "description": "Provides React components to consume LiveTiles Reach data",
-  "version": "0.4.0-preview.312",
+  "version": "0.4.0-preview.313",
   "peerDependencies": {
     "react": "^16.14.0 || ^17",
     "react-dom": "^16.14.0 || ^17",