@carbon/react 1.27.0-rc.0 → 1.27.0

package/es/components/RadioTile/RadioTile.js

@@ -49,7 +49,7 @@ var RadioTile = /*#__PURE__*/React__default.forwardRef(function RadioTile(_ref,
     }
   }
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", {
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("input", {
     checked: checked,
     className: "".concat(prefix, "--tile-input"),
     disabled: disabled,

package/es/components/Tabs/Tabs.js

@@ -28,7 +28,7 @@ import { ArrowRight, ArrowLeft, Home, End } from '../../internal/keyboard/keys.j
 var _ChevronLeft, _ChevronRight;
 
 var _excluded = ["activation", "aria-label", "children", "className", "contained", "iconSize", "leftOverflowButtonProps", "light", "rightOverflowButtonProps", "scrollDebounceWait", "scrollIntoView"],
-    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown", "secondaryLabel", "hasSecondaryLabel"],
+    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown", "secondaryLabel", "renderIcon"],
     _excluded3 = ["children", "className", "defaultOpen", "enterDelayMs", "leaveDelayMs", "label"],
     _excluded4 = ["children", "className"];
 
@@ -325,12 +325,14 @@ function TabList(_ref2) {
     onKeyDown: onKeyDown
   }), React__default.Children.map(children, function (child, index) {
     return /*#__PURE__*/React__default.createElement(TabContext.Provider, {
-      value: index
+      value: {
+        index: index,
+        hasSecondaryLabel: hasSecondaryLabelTabs
+      }
     }, /*#__PURE__*/React__default.cloneElement(child, {
       ref: function ref(node) {
         tabs.current[index] = node;
-      },
-      hasSecondaryLabel: hasSecondaryLabelTabs
+      }
     }));
   })), /*#__PURE__*/React__default.createElement("button", _extends({
     "aria-hidden": "true",
@@ -456,7 +458,7 @@ var Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
       _onClick = _ref5.onClick,
       onKeyDown = _ref5.onKeyDown,
       secondaryLabel = _ref5.secondaryLabel,
-      hasSecondaryLabel = _ref5.hasSecondaryLabel,
+      Icon = _ref5.renderIcon,
       rest = _objectWithoutProperties(_ref5, _excluded2);
 
   var prefix = usePrefix();
@@ -466,7 +468,10 @@ var Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
       setSelectedIndex = _React$useContext2.setSelectedIndex,
       baseId = _React$useContext2.baseId;
 
-  var index = React__default.useContext(TabContext);
+  var _React$useContext3 = React__default.useContext(TabContext),
+      index = _React$useContext3.index,
+      hasSecondaryLabel = _React$useContext3.hasSecondaryLabel;
+
   var id = "".concat(baseId, "-tab-").concat(index);
   var panelId = "".concat(baseId, "-tabpanel-").concat(index);
   var className = cx("".concat(prefix, "--tabs__nav-item"), "".concat(prefix, "--tabs__nav-link"), customClassName, (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--selected"), selectedIndex === index), _defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--disabled"), disabled), _cx4));
@@ -493,9 +498,15 @@ var Tab = /*#__PURE__*/React__default.forwardRef(function Tab(_ref5, ref) {
     onKeyDown: onKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
     type: "button"
-  }), /*#__PURE__*/React__default.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-item-label-wrapper")
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--tabs__nav-item-label")
-  }, children), hasSecondaryLabel && /*#__PURE__*/React__default.createElement("div", {
+  }, children), Icon && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-item--icon")
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    size: 16
+  }))), hasSecondaryLabel && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--tabs__nav-item-secondary-label")
   }, secondaryLabel));
 });
@@ -520,11 +531,6 @@ Tab.propTypes = {
    */
   disabled: PropTypes.bool,
 
-  /*
-   * Internal use only, determines wether a tab should render as a secondary label tab
-   **/
-  hasSecondaryLabel: PropTypes.bool,
-
   /**
    * Provide a handler that is invoked when a user clicks on the control
    */
@@ -542,6 +548,12 @@ Tab.propTypes = {
    **/
   renderButton: PropTypes.func,
 
+  /**
+   * Optional prop to render an icon next to the label.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
   /*
    * An optional label to render under the primary tab label.
   /* This prop is only useful for conained tabs
@@ -559,7 +571,7 @@ var IconTab = /*#__PURE__*/React__default.forwardRef(function IconTab(_ref6, ref
       rest = _objectWithoutProperties(_ref6, _excluded3);
 
   var prefix = usePrefix();
-  var classNames = cx("".concat(prefix, "--tabs__nav-item--icon"), customClassName);
+  var classNames = cx("".concat(prefix, "--tabs__nav-item--icon-only"), customClassName);
   return /*#__PURE__*/React__default.createElement(Tooltip, {
     align: "bottom",
     defaultOpen: defaultOpen,
@@ -625,9 +637,9 @@ var TabPanel = /*#__PURE__*/React__default.forwardRef(function TabPanel(_ref7, f
       interactiveContent = _useState10[0],
       setInteractiveContent = _useState10[1];
 
-  var _React$useContext3 = React__default.useContext(TabsContext),
-      selectedIndex = _React$useContext3.selectedIndex,
-      baseId = _React$useContext3.baseId;
+  var _React$useContext4 = React__default.useContext(TabsContext),
+      selectedIndex = _React$useContext4.selectedIndex,
+      baseId = _React$useContext4.baseId;
 
   var index = React__default.useContext(TabPanelContext);
   var id = "".concat(baseId, "-tabpanel-").concat(index);

package/lib/components/RadioTile/RadioTile.js

@@ -59,7 +59,7 @@ var RadioTile = /*#__PURE__*/React__default["default"].forwardRef(function Radio
     }
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", {
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
     checked: checked,
     className: "".concat(prefix, "--tile-input"),
     disabled: disabled,

package/lib/components/Tabs/Tabs.js

@@ -39,7 +39,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _ChevronLeft, _ChevronRight;
 
 var _excluded = ["activation", "aria-label", "children", "className", "contained", "iconSize", "leftOverflowButtonProps", "light", "rightOverflowButtonProps", "scrollDebounceWait", "scrollIntoView"],
-    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown", "secondaryLabel", "hasSecondaryLabel"],
+    _excluded2 = ["as", "children", "className", "disabled", "onClick", "onKeyDown", "secondaryLabel", "renderIcon"],
     _excluded3 = ["children", "className", "defaultOpen", "enterDelayMs", "leaveDelayMs", "label"],
     _excluded4 = ["children", "className"];
 
@@ -336,12 +336,14 @@ function TabList(_ref2) {
     onKeyDown: onKeyDown
   }), React__default["default"].Children.map(children, function (child, index) {
     return /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
-      value: index
+      value: {
+        index: index,
+        hasSecondaryLabel: hasSecondaryLabelTabs
+      }
     }, /*#__PURE__*/React__default["default"].cloneElement(child, {
       ref: function ref(node) {
         tabs.current[index] = node;
-      },
-      hasSecondaryLabel: hasSecondaryLabelTabs
+      }
     }));
   })), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     "aria-hidden": "true",
@@ -467,7 +469,7 @@ var Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5,
       _onClick = _ref5.onClick,
       onKeyDown = _ref5.onKeyDown,
       secondaryLabel = _ref5.secondaryLabel,
-      hasSecondaryLabel = _ref5.hasSecondaryLabel,
+      Icon = _ref5.renderIcon,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded2);
 
   var prefix = usePrefix.usePrefix();
@@ -477,7 +479,10 @@ var Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5,
       setSelectedIndex = _React$useContext2.setSelectedIndex,
       baseId = _React$useContext2.baseId;
 
-  var index = React__default["default"].useContext(TabContext);
+  var _React$useContext3 = React__default["default"].useContext(TabContext),
+      index = _React$useContext3.index,
+      hasSecondaryLabel = _React$useContext3.hasSecondaryLabel;
+
   var id = "".concat(baseId, "-tab-").concat(index);
   var panelId = "".concat(baseId, "-tabpanel-").concat(index);
   var className = cx__default["default"]("".concat(prefix, "--tabs__nav-item"), "".concat(prefix, "--tabs__nav-link"), customClassName, (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--selected"), selectedIndex === index), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--tabs__nav-item--disabled"), disabled), _cx4));
@@ -504,9 +509,15 @@ var Tab = /*#__PURE__*/React__default["default"].forwardRef(function Tab(_ref5,
     onKeyDown: onKeyDown,
     tabIndex: selectedIndex === index ? '0' : '-1',
     type: "button"
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-item-label-wrapper")
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--tabs__nav-item-label")
-  }, children), hasSecondaryLabel && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, children), Icon && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--tabs__nav-item--icon")
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    size: 16
+  }))), hasSecondaryLabel && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--tabs__nav-item-secondary-label")
   }, secondaryLabel));
 });
@@ -531,11 +542,6 @@ Tab.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
 
-  /*
-   * Internal use only, determines wether a tab should render as a secondary label tab
-   **/
-  hasSecondaryLabel: PropTypes__default["default"].bool,
-
   /**
    * Provide a handler that is invoked when a user clicks on the control
    */
@@ -553,6 +559,12 @@ Tab.propTypes = {
    **/
   renderButton: PropTypes__default["default"].func,
 
+  /**
+   * Optional prop to render an icon next to the label.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
   /*
    * An optional label to render under the primary tab label.
   /* This prop is only useful for conained tabs
@@ -570,7 +582,7 @@ var IconTab = /*#__PURE__*/React__default["default"].forwardRef(function IconTab
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref6, _excluded3);
 
   var prefix = usePrefix.usePrefix();
-  var classNames = cx__default["default"]("".concat(prefix, "--tabs__nav-item--icon"), customClassName);
+  var classNames = cx__default["default"]("".concat(prefix, "--tabs__nav-item--icon-only"), customClassName);
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: "bottom",
     defaultOpen: defaultOpen,
@@ -636,9 +648,9 @@ var TabPanel = /*#__PURE__*/React__default["default"].forwardRef(function TabPan
       interactiveContent = _useState10[0],
       setInteractiveContent = _useState10[1];
 
-  var _React$useContext3 = React__default["default"].useContext(TabsContext),
-      selectedIndex = _React$useContext3.selectedIndex,
-      baseId = _React$useContext3.baseId;
+  var _React$useContext4 = React__default["default"].useContext(TabsContext),
+      selectedIndex = _React$useContext4.selectedIndex,
+      baseId = _React$useContext4.baseId;
 
   var index = React__default["default"].useContext(TabPanelContext);
   var id = "".concat(baseId, "-tabpanel-").concat(index);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.27.0-rc.0",
+  "version": "1.27.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -44,9 +44,9 @@
   "dependencies": {
     "@babel/runtime": "^7.18.3",
     "@carbon/feature-flags": "^0.13.0",
-    "@carbon/icons-react": "^11.18.0-rc.0",
-    "@carbon/layout": "^11.13.0-rc.0",
-    "@carbon/styles": "^1.27.0-rc.0",
+    "@carbon/icons-react": "^11.18.0",
+    "@carbon/layout": "^11.13.0",
+    "@carbon/styles": "^1.27.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -72,8 +72,8 @@
     "@babel/plugin-transform-react-constant-elements": "^7.17.12",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
-    "@carbon/test-utils": "^10.28.0-rc.0",
-    "@carbon/themes": "^11.18.0-rc.0",
+    "@carbon/test-utils": "^10.28.0",
+    "@carbon/themes": "^11.18.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -133,5 +133,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "af6bbf9ea6a025c19a041ea352dfde798e1cd22f"
+  "gitHead": "9d9c35494255b0ad0996bad46ffaf093cdd20012"
 }