@carbon/react 1.3.0-rc.1 → 1.3.0

package/es/components/TabContent/TabContent.js

@@ -22,7 +22,8 @@ function useTabbableContent(ref) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       hasTabbableContent = _useState2[0],
-      setHasTabbableContent = _useState2[1];
+      setHasTabbableContent = _useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
+
 
   useIsomorphicEffect(function () {
     if (ref.current) {

package/es/components/Tabs/next/Tabs.js

@@ -159,7 +159,7 @@ function TabList(_ref2) {
       isScrollable = _useState4[0],
       setIsScrollable = _useState4[1];
 
-  var _useState5 = useState(false),
+  var _useState5 = useState(null),
       _useState6 = _slicedToArray(_useState5, 2),
       scrollLeft = _useState6[0],
       setScrollLeft = _useState6[1];
@@ -178,7 +178,7 @@ function TabList(_ref2) {
   var isNextButtonVisible = ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false;
   var previousButtonClasses = cx("".concat(prefix, "--tab--overflow-nav-button"), "".concat(prefix, "--tab--overflow-nav-button--previous"), _defineProperty({}, "".concat(prefix, "--tab--overflow-nav-button--hidden"), !isPreviousButtonVisible));
   var nextButtonClasses = cx("".concat(prefix, "--tab--overflow-nav-button"), "".concat(prefix, "--tab--overflow-nav-button--next"), _defineProperty({}, "".concat(prefix, "--tab--overflow-nav-button--hidden"), !isNextButtonVisible));
-  var tabs = [];
+  var tabs = useRef([]);
   var debouncedOnScroll = useCallback(function () {
     return debounce(function (event) {
       setScrollLeft(event.target.scrollLeft);
@@ -188,11 +188,11 @@ function TabList(_ref2) {
   function onKeyDown(event) {
     if (matches(event, [ArrowRight, ArrowLeft, Home, End])) {
       event.preventDefault();
-      var activeTabs = tabs.filter(function (tab) {
-        return !tab.current.disabled;
+      var activeTabs = tabs.current.filter(function (tab) {
+        return !tab.disabled;
       });
-      var currentIndex = activeTabs.indexOf(tabs[activation === 'automatic' ? selectedIndex : activeIndex]);
-      var nextIndex = tabs.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
+      var currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
+      var nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
 
       if (activation === 'automatic') {
         setSelectedIndex(nextIndex);
@@ -200,29 +200,29 @@ function TabList(_ref2) {
         setActiveIndex(nextIndex);
       }
 
-      tabs[nextIndex].current.focus();
+      tabs.current[nextIndex].focus();
     }
   }
 
   useEffectOnce(function () {
-    var tab = tabs[selectedIndex];
+    var tab = tabs.current[selectedIndex];
 
     if (scrollIntoView && tab) {
-      tab.current.scrollIntoView({
+      tab.scrollIntoView({
         block: 'nearest',
         inline: 'nearest'
       });
     }
   });
   useEffectOnce(function () {
-    if (tabs[selectedIndex].current.disabled) {
-      var activeTabs = tabs.filter(function (tab) {
-        return !tab.current.disabled;
+    if (tabs.current[selectedIndex].disabled) {
+      var activeTabs = tabs.current.filter(function (tab) {
+        return !tab.disabled;
       });
 
       if (activeTabs.length > 0) {
         var tab = activeTabs[0];
-        setSelectedIndex(tabs.indexOf(tab));
+        setSelectedIndex(tabs.current.indexOf(tab));
       }
     }
   });
@@ -246,19 +246,25 @@ function TabList(_ref2) {
   }, []); // updates scroll location for all scroll behavior.
 
   useIsomorphicEffect(function () {
-    ref.current.scrollLeft = scrollLeft;
+    if (scrollLeft !== null) {
+      ref.current.scrollLeft = scrollLeft;
+    }
   }, [scrollLeft]);
   useIsomorphicEffect(function () {
-    var tab = activation === 'manual' ? tabs[activeIndex] : tabs[selectedIndex];
+    if (!isScrollable) {
+      return;
+    }
+
+    var tab = activation === 'manual' ? tabs.current[activeIndex] : tabs.current[selectedIndex];
 
     if (tab) {
       // The width of the "scroll buttons"
       // The start and end position of the selected tab
-      var _tab$current$getBound = tab.current.getBoundingClientRect(),
-          tabWidth = _tab$current$getBound.width;
+      var _tab$getBoundingClien = tab.getBoundingClientRect(),
+          tabWidth = _tab$getBoundingClien.width;
 
-      var start = tab.current.offsetLeft;
-      var end = tab.current.offsetLeft + tabWidth; // The start and end of the visible area for the tabs
+      var start = tab.offsetLeft;
+      var end = tab.offsetLeft + tabWidth; // The start and end of the visible area for the tabs
 
       var visibleStart = ref.current.scrollLeft + buttonWidth;
       var visibleEnd = ref.current.scrollLeft + ref.current.clientWidth - buttonWidth; // The beginning of the tab is clipped and not visible
@@ -272,13 +278,13 @@ function TabList(_ref2) {
         setScrollLeft(end + buttonWidth - ref.current.clientWidth);
       }
     }
-  }, [activation, activeIndex, selectedIndex]);
+  }, [activation, activeIndex, selectedIndex, isScrollable]);
   usePressable(previousButton, {
     onPress: function onPress(_ref3) {
       var longPress = _ref3.longPress;
 
       if (!longPress) {
-        setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.length * 1.5, 0));
+        setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
     },
     onLongPress: function onLongPress() {
@@ -290,7 +296,7 @@ function TabList(_ref2) {
       var longPress = _ref4.longPress;
 
       if (!longPress) {
-        setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
+        setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
     },
     onLongPress: function onLongPress() {
@@ -313,12 +319,12 @@ function TabList(_ref2) {
     onScroll: debouncedOnScroll,
     onKeyDown: onKeyDown
   }), React__default.Children.map(children, function (child, index) {
-    var ref = /*#__PURE__*/React__default.createRef();
-    tabs.push(ref);
     return /*#__PURE__*/React__default.createElement(TabContext.Provider, {
       value: index
     }, /*#__PURE__*/React__default.cloneElement(child, {
-      ref: ref
+      ref: function ref(node) {
+        tabs.current[index] = node;
+      }
     }));
   })), /*#__PURE__*/React__default.createElement("button", _extends({
     "aria-hidden": "true",

package/lib/components/TabContent/TabContent.js

@@ -32,7 +32,8 @@ function useTabbableContent(ref) {
   var _useState = React.useState(false),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       hasTabbableContent = _useState2[0],
-      setHasTabbableContent = _useState2[1];
+      setHasTabbableContent = _useState2[1]; // eslint-disable-next-line react-hooks/exhaustive-deps
+
 
   useIsomorphicEffect["default"](function () {
     if (ref.current) {

package/lib/components/Tabs/next/Tabs.js

@@ -170,7 +170,7 @@ function TabList(_ref2) {
       isScrollable = _useState4[0],
       setIsScrollable = _useState4[1];
 
-  var _useState5 = React.useState(false),
+  var _useState5 = React.useState(null),
       _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
       scrollLeft = _useState6[0],
       setScrollLeft = _useState6[1];
@@ -189,7 +189,7 @@ function TabList(_ref2) {
   var isNextButtonVisible = ref.current ? scrollLeft + buttonWidth + ref.current.clientWidth < ref.current.scrollWidth : false;
   var previousButtonClasses = cx__default["default"]("".concat(prefix, "--tab--overflow-nav-button"), "".concat(prefix, "--tab--overflow-nav-button--previous"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tab--overflow-nav-button--hidden"), !isPreviousButtonVisible));
   var nextButtonClasses = cx__default["default"]("".concat(prefix, "--tab--overflow-nav-button"), "".concat(prefix, "--tab--overflow-nav-button--next"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tab--overflow-nav-button--hidden"), !isNextButtonVisible));
-  var tabs = [];
+  var tabs = React.useRef([]);
   var debouncedOnScroll = React.useCallback(function () {
     return debounce__default["default"](function (event) {
       setScrollLeft(event.target.scrollLeft);
@@ -199,11 +199,11 @@ function TabList(_ref2) {
   function onKeyDown(event) {
     if (match.matches(event, [keys.ArrowRight, keys.ArrowLeft, keys.Home, keys.End])) {
       event.preventDefault();
-      var activeTabs = tabs.filter(function (tab) {
-        return !tab.current.disabled;
+      var activeTabs = tabs.current.filter(function (tab) {
+        return !tab.disabled;
       });
-      var currentIndex = activeTabs.indexOf(tabs[activation === 'automatic' ? selectedIndex : activeIndex]);
-      var nextIndex = tabs.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
+      var currentIndex = activeTabs.indexOf(tabs.current[activation === 'automatic' ? selectedIndex : activeIndex]);
+      var nextIndex = tabs.current.indexOf(activeTabs[getNextIndex(event, activeTabs.length, currentIndex)]);
 
       if (activation === 'automatic') {
         setSelectedIndex(nextIndex);
@@ -211,29 +211,29 @@ function TabList(_ref2) {
         setActiveIndex(nextIndex);
       }
 
-      tabs[nextIndex].current.focus();
+      tabs.current[nextIndex].focus();
     }
   }
 
   useEffectOnce.useEffectOnce(function () {
-    var tab = tabs[selectedIndex];
+    var tab = tabs.current[selectedIndex];
 
     if (scrollIntoView && tab) {
-      tab.current.scrollIntoView({
+      tab.scrollIntoView({
         block: 'nearest',
         inline: 'nearest'
       });
     }
   });
   useEffectOnce.useEffectOnce(function () {
-    if (tabs[selectedIndex].current.disabled) {
-      var activeTabs = tabs.filter(function (tab) {
-        return !tab.current.disabled;
+    if (tabs.current[selectedIndex].disabled) {
+      var activeTabs = tabs.current.filter(function (tab) {
+        return !tab.disabled;
       });
 
       if (activeTabs.length > 0) {
         var tab = activeTabs[0];
-        setSelectedIndex(tabs.indexOf(tab));
+        setSelectedIndex(tabs.current.indexOf(tab));
       }
     }
   });
@@ -257,19 +257,25 @@ function TabList(_ref2) {
   }, []); // updates scroll location for all scroll behavior.
 
   useIsomorphicEffect["default"](function () {
-    ref.current.scrollLeft = scrollLeft;
+    if (scrollLeft !== null) {
+      ref.current.scrollLeft = scrollLeft;
+    }
   }, [scrollLeft]);
   useIsomorphicEffect["default"](function () {
-    var tab = activation === 'manual' ? tabs[activeIndex] : tabs[selectedIndex];
+    if (!isScrollable) {
+      return;
+    }
+
+    var tab = activation === 'manual' ? tabs.current[activeIndex] : tabs.current[selectedIndex];
 
     if (tab) {
       // The width of the "scroll buttons"
       // The start and end position of the selected tab
-      var _tab$current$getBound = tab.current.getBoundingClientRect(),
-          tabWidth = _tab$current$getBound.width;
+      var _tab$getBoundingClien = tab.getBoundingClientRect(),
+          tabWidth = _tab$getBoundingClien.width;
 
-      var start = tab.current.offsetLeft;
-      var end = tab.current.offsetLeft + tabWidth; // The start and end of the visible area for the tabs
+      var start = tab.offsetLeft;
+      var end = tab.offsetLeft + tabWidth; // The start and end of the visible area for the tabs
 
       var visibleStart = ref.current.scrollLeft + buttonWidth;
       var visibleEnd = ref.current.scrollLeft + ref.current.clientWidth - buttonWidth; // The beginning of the tab is clipped and not visible
@@ -283,13 +289,13 @@ function TabList(_ref2) {
         setScrollLeft(end + buttonWidth - ref.current.clientWidth);
       }
     }
-  }, [activation, activeIndex, selectedIndex]);
+  }, [activation, activeIndex, selectedIndex, isScrollable]);
   usePressable.usePressable(previousButton, {
     onPress: function onPress(_ref3) {
       var longPress = _ref3.longPress;
 
       if (!longPress) {
-        setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.length * 1.5, 0));
+        setScrollLeft(Math.max(scrollLeft - ref.current.scrollWidth / tabs.current.length * 1.5, 0));
       }
     },
     onLongPress: function onLongPress() {
@@ -301,7 +307,7 @@ function TabList(_ref2) {
       var longPress = _ref4.longPress;
 
       if (!longPress) {
-        setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
+        setScrollLeft(Math.min(scrollLeft + ref.current.scrollWidth / tabs.current.length * 1.5, ref.current.scrollWidth - ref.current.clientWidth));
       }
     },
     onLongPress: function onLongPress() {
@@ -324,12 +330,12 @@ function TabList(_ref2) {
     onScroll: debouncedOnScroll,
     onKeyDown: onKeyDown
   }), React__default["default"].Children.map(children, function (child, index) {
-    var ref = /*#__PURE__*/React__default["default"].createRef();
-    tabs.push(ref);
     return /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
       value: index
     }, /*#__PURE__*/React__default["default"].cloneElement(child, {
-      ref: ref
+      ref: function ref(node) {
+        tabs.current[index] = node;
+      }
     }));
   })), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     "aria-hidden": "true",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.3.0-rc.1",
+  "version": "1.3.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.7.0",
     "@carbon/icons-react": "^11.3.0-rc.0",
     "@carbon/layout": "^11.2.0-rc.0",
-    "@carbon/styles": "^1.3.0-rc.0",
+    "@carbon/styles": "^1.3.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.1",
     "copy-to-clipboard": "^3.3.1",
@@ -129,5 +129,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "8dac57d7a6f5c832675edb4d0316f247ff4230fc"
+  "gitHead": "df7ebd7676092998702f525cdef6d8d80c6ed9ad"
 }