@carbon/react 1.3.0-rc.1 → 1.4.0

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/es/components/UIShell/SideNav.js

@@ -121,7 +121,7 @@ var SideNav = /*#__PURE__*/React__default.forwardRef(function SideNav(props, ref
   }
 
   var isSideNavCollapsed = useMatchMedia("(max-width: 1055px)");
-  var ariaHidden = expanded === false && isSideNavCollapsed;
+  var ariaHidden = isRail ? false : expanded === false && isSideNavCollapsed;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isFixedNav ? null :
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions

package/es/index.js

@@ -24,8 +24,9 @@ export { default as Copy } from './components/Copy/Copy.js';
 export { default as CopyButton } from './components/CopyButton/CopyButton.js';
 export { default as DangerButton } from './components/DangerButton/DangerButton.js';
 export { default as DataTable } from './components/DataTable/index.js';
-export { default as DatePicker } from './components/DatePicker/index.js';
-export { default as DatePickerInput } from './components/DatePickerInput/index.js';
+export { default as DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
+export { default as DatePicker } from './components/DatePicker/DatePicker.js';
+export { default as DatePickerInput } from './components/DatePickerInput/DatePickerInput.js';
 export { default as DropdownSkeleton } from './components/Dropdown/Dropdown.Skeleton.js';
 export { default as Dropdown } from './components/Dropdown/Dropdown.js';
 export { default as FileUploader } from './components/FileUploader/index.js';
@@ -97,7 +98,6 @@ export { default as TextInputSkeleton } from './components/TextInput/TextInput.S
 export { default as ToggleSkeleton } from './components/Toggle/Toggle.Skeleton.js';
 export { default as ToggleSmallSkeleton } from './components/ToggleSmall/ToggleSmall.Skeleton.js';
 export { default as IconSkeleton } from './components/Icon/Icon.Skeleton.js';
-export { default as DatePickerSkeleton } from './components/DatePicker/DatePicker.Skeleton.js';
 export { HeaderNavigation, SideNavMenu } from './components/UIShell/index.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
 export { Heading, Section } from './components/Heading/index.js';

package/lib/components/Checkbox/Checkbox.Skeleton.js

@@ -29,10 +29,12 @@ var CheckboxSkeleton = function CheckboxSkeleton(_ref) {
 
   var prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(prefix, "--form-item"), "".concat(prefix, "--checkbox-wrapper"), "".concat(prefix, "--checkbox-label"), className)
-  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: cx__default["default"]("".concat(prefix, "--form-item"), "".concat(prefix, "--checkbox-wrapper"), "".concat(prefix, "--checkbox-skeleton"), className)
+  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--checkbox-label")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--checkbox-label-text ").concat(prefix, "--skeleton")
-  }));
+  })));
 };
 
 CheckboxSkeleton.propTypes = {

package/lib/components/ComposedModal/next/ComposedModal.js

@@ -205,24 +205,24 @@ var ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function C
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     className: modalClass
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
-    ref: startSentinel,
-    tabIndex: "0",
-    role: "link",
-    className: "".concat(prefix, "--visually-hidden")
-  }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: innerModal,
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: containerClass,
     role: "dialog",
     "aria-modal": "true",
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, childrenWithProps), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    ref: startSentinel,
+    className: "".concat(prefix, "--visually-hidden")
+  }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: innerModal,
+    className: "".concat(prefix, "--modal-container-body")
+  }, childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
     ref: endSentinel,
-    tabIndex: "0",
-    role: "link",
     className: "".concat(prefix, "--visually-hidden")
-  }, "Focus sentinel"));
+  }, "Focus sentinel")));
 });
 ComposedModal.propTypes = (_ComposedModal$propTy = {}, _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, 'aria-labelledby', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "containerClassName", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "danger", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onClose", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "onKeyDown", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "preventCloseOnClickOutside", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorPrimaryFocus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "selectorsFloatingMenus", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_ComposedModal$propTy, "size", PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg'])), _ComposedModal$propTy);
 ComposedModal.defaultProps = {