@pingux/astro 2.221.6 → 2.234.0-alpha.0

package/lib/cjs/components/SelectField/SelectField.stories.js

@@ -23,7 +23,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithoutStatusIndicator = exports.WithSlots = exports.WithSections = exports.WithNoneOption = exports.WithHelpHint = exports.WithCustomHeight = exports.WithClearButton = exports.NoOptionsAvailable = exports.HelperText = exports.FloatLabel = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
+exports["default"] = exports.WithoutStatusIndicator = exports.WithSlots = exports.WithSections = exports.WithNoneOption = exports.WithHelpHint = exports.WithCustomHeight = exports.WithClearButton = exports.NoOptionsAvailable = exports.HelperText = exports.FloatLabel = exports.DynamicItems = exports.DisabledOptions = exports.DisabledField = exports.DefaultOpen = exports.Default = exports.Controlled = exports.AsyncLoading = void 0;
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -163,6 +163,19 @@ var Default = exports.Default = function Default(args) {
     key: "yellow"
   }, "Yellow")));
 };
+var DefaultOpen = exports.DefaultOpen = function DefaultOpen() {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, {
+    width: "100%",
+    isDefaultOpen: true,
+    label: "Example Label"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "red"
+  }, "Red"), (0, _react2.jsx)(_index.Item, {
+    key: "blue"
+  }, "Blue"), (0, _react2.jsx)(_index.Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
 var WithSections = exports.WithSections = function WithSections(args) {
   return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({
     items: withSection

package/lib/cjs/components/Tab/Tab.js

@@ -1,15 +1,22 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.TabLine = exports.CollectionTab = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
@@ -20,13 +27,14 @@ var _orientation = _interopRequireDefault(require("../../utils/devUtils/constant
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _TabPicker = _interopRequireDefault(require("../TabPicker"));
 var _Tabs = require("../Tabs");
+var _getSlotText = require("./getSlotText");
 var _react2 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * Tab control for dividing up closely-related content.
  * Typically used as a child of the Tabs component.
  */
-
 var CollectionTab = exports.CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
     item = props.item,
@@ -35,6 +43,8 @@ var CollectionTab = exports.CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(
     orientation = props.orientation,
     mode = props.mode,
     slots = props.slots;
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var key = item.key,
     rendered = item.rendered,
     itemProps = item.props;
@@ -66,9 +76,27 @@ var CollectionTab = exports.CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(
   var defaultIndicator = (0, _react2.jsx)(_.Box, {
     variant: "forms.label.indicator"
   }, "*");
+  var onyxSlot = function onyxSlot(slot) {
+    var _slot$props$children;
+    var isCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (! /*#__PURE__*/_react["default"].isValidElement(slot)) return slot;
+    var count = (0, _getSlotText.getSlotText)((_slot$props$children = slot.props.children) !== null && _slot$props$children !== void 0 ? _slot$props$children : slot.props.label);
+    var ariaLabel = slot.props['aria-label'] || (isCount && count ? "Count ".concat(count) : undefined);
+    return /*#__PURE__*/_react["default"].cloneElement(slot, _objectSpread(_objectSpread({}, isCount && ariaLabel ? {
+      'aria-label': ariaLabel
+    } : {}), isCount ? {} : {
+      size: 24,
+      sx: _objectSpread({
+        alignSelf: 'center'
+      }, slot.props.sx),
+      style: _objectSpread({
+        alignSelf: 'center'
+      }, slot.props.style)
+    }));
+  };
   var tab = (0, _react2.jsx)(_.Box, {
     isRow: true
-  }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+  }, !isOnyx && (slots === null || slots === void 0 ? void 0 : slots.beforeTab), (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     className: classNames,
     variant: "tab"
   }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), (0, _pendoID.getPendoID)('Tab'), {
@@ -79,7 +107,11 @@ var CollectionTab = exports.CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(
   }), (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
     variant: "tabLabel",
     display: "flex"
-  }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps), rendered, isRequired && defaultIndicator), isSelected && !isDisabled && (0, _react2.jsx)(TabLine, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLineProps))), slots === null || slots === void 0 ? void 0 : slots.afterTab);
+  }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps, {
+    sx: {
+      gap: isOnyx ? 'sm' : undefined
+    }
+  }), isOnyx && (slots === null || slots === void 0 ? void 0 : slots.beforeTab) && onyxSlot(slots.beforeTab), rendered, isRequired && defaultIndicator, isOnyx && (slots === null || slots === void 0 ? void 0 : slots.afterTab) && onyxSlot(slots.afterTab, true)), isSelected && !isDisabled && (0, _react2.jsx)(TabLine, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLineProps))), !isOnyx && (slots === null || slots === void 0 ? void 0 : slots.afterTab));
   if (mode === 'list' && itemProps !== null && itemProps !== void 0 && itemProps.list) {
     return (0, _react2.jsx)(_TabPicker["default"], (0, _extends2["default"])({
       ref: tabRef,

package/lib/cjs/components/Tab/getSlotText.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Extracts the concatenated text of a slot's children, falling back to the
+ * `label` prop on nested elements (e.g. Badge) when there are no children.
+ */
+export declare const getSlotText: (node: React.ReactNode) => string;

package/lib/cjs/components/Tab/getSlotText.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSlotText = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _react = _interopRequireDefault(require("react"));
+/**
+ * Extracts the concatenated text of a slot's children, falling back to the
+ * `label` prop on nested elements (e.g. Badge) when there are no children.
+ */
+var _getSlotText = exports.getSlotText = function getSlotText(node) {
+  var _context;
+  return (0, _map["default"])(_context = _react["default"].Children.toArray(node)).call(_context, function (child) {
+    var _child$props$children;
+    return /*#__PURE__*/_react["default"].isValidElement(child) ? _getSlotText((_child$props$children = child.props.children) !== null && _child$props$children !== void 0 ? _child$props$children : child.props.label) : String(child);
+  }).join('');
+};

package/lib/cjs/components/Tab/getSlotText.test.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _getSlotText = require("./getSlotText");
+var _react = require("@emotion/react");
+test('concatenates plain string children', function () {
+  expect((0, _getSlotText.getSlotText)('14')).toBe('14');
+});
+test('reads the label prop of nested elements when there are no children', function () {
+  var badge = (0, _react.jsx)("span", {
+    label: "14"
+  });
+  expect((0, _getSlotText.getSlotText)(badge)).toBe('14');
+});
+test('prefers children over the label prop', function () {
+  var node = (0, _react.jsx)("span", {
+    label: "ignored"
+  }, "child text");
+  expect((0, _getSlotText.getSlotText)(node)).toBe('child text');
+});
+test('traverses nested elements and mixes primitives', function () {
+  var node = (0, _react.jsx)("div", null, (0, _react.jsx)("span", null, "Count "), (0, _react.jsx)("span", null, (0, _react.jsx)("b", null, "1"), "4"));
+  expect((0, _getSlotText.getSlotText)(node)).toBe('Count 14');
+});

package/lib/cjs/components/TabPicker/TabPicker.js

@@ -21,8 +21,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactStately = require("react-stately");
-var _ArrowDropDownIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowDropDownIcon"));
-var _ArrowDropUpIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowDropUpIcon"));
 var _interactions = require("@react-aria/interactions");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
@@ -46,6 +44,11 @@ var TabPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     selectedItem = _useState4[0],
     setSelectedItem = _useState4[1];
+  var _useGetTheme = (0, _hooks.useGetTheme)(),
+    _useGetTheme$icons = _useGetTheme.icons,
+    tabPickerDown = _useGetTheme$icons.tabPickerDown,
+    tabPickerUp = _useGetTheme$icons.tabPickerUp,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var selectionManager = state.selectionManager;
   var _useState5 = (0, _react.useState)(selectionManager.focusedKey),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
@@ -178,11 +181,13 @@ var TabPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     variant: "tabLabel"
   }, item.props.name), selectedItem && (0, _react2.jsx)(_Tab.TabLine, null)), (0, _react2.jsx)(_.Icon, {
     color: isTabFocused || (0, _includes["default"])(classNames).call(classNames, 'is-hovered') ? 'active' : 'neutral.40',
-    icon: isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"],
+    icon: isOpen ? tabPickerUp : tabPickerDown,
+    variant: isOnyx ? 'tabPickerExpandIcon' : undefined,
     title: {
       name: ''
     },
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    size: isOnyx ? 16 : undefined
   }))), (0, _react2.jsx)(_.Menu, {
     onAction: setSelectedItem,
     selectionMode: "single",

package/lib/cjs/components/Tabs/Tabs.stories.js

@@ -1,26 +1,38 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithList = exports.VerticalOrientation = exports.DisabledSingleTab = exports.DisabledAllTabs = exports.Default = exports.CustomTabLine = exports.CustomPanelProps = exports.Controlled = exports.ContentSlots = exports.Centered = void 0;
+exports["default"] = exports.WithList = exports.VerticalOrientation = exports.ScrollableContent = exports.DisabledSingleTab = exports.DisabledAllTabs = exports.Default = exports.CustomTabLine = exports.CustomPanelProps = exports.Controlled = exports.ContentSlots = exports.Centered = void 0;
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _LockIcon = _interopRequireDefault(require("@pingux/mdi-react/LockIcon"));
+var _LockOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/LockOutlineIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _Tabs = _interopRequireDefault(require("./Tabs.mdx"));
+var _Tabs2 = require("./Tabs.storyData");
 var _tabsAttributes = require("./tabsAttributes");
 var _react2 = require("@emotion/react");
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var _default = exports["default"] = {
   title: 'Components/Tabs',
   component: _index.Tabs,
@@ -88,6 +100,11 @@ var Controlled = exports.Controlled = function Controlled() {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     currentTab = _useState2[0],
     setCurrentTab = _useState2[1];
+  var controlledTabs = (0, _map["default"])(tabs).call(tabs, function (tab, index) {
+    return index === 1 ? _objectSpread(_objectSpread({}, tab), {}, {
+      name: 'Configuration with a deliberately long label that wraps'
+    }) : tab;
+  });
   return (0, _react2.jsx)(_index.Box, {
     sx: {
       maxWidth: '500px'
@@ -95,7 +112,37 @@ var Controlled = exports.Controlled = function Controlled() {
   }, (0, _react2.jsx)(_index.Tabs, {
     selectedKey: currentTab,
     onSelectionChange: setCurrentTab,
-    items: tabs
+    items: controlledTabs
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Tab, {
+      key: item.name,
+      title: item.name,
+      textValue: item.name
+    }, item.children);
+  }));
+};
+var ScrollableContent = exports.ScrollableContent = function ScrollableContent() {
+  var scrollableTabs = (0, _map["default"])(tabs).call(tabs, function (tab) {
+    return _objectSpread(_objectSpread({}, tab), {}, {
+      children: (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, null, tab.name, ' content'), (0, _react2.jsx)(_index.Text, null, "This panel contains additional content to demonstrate scrolling within the tab body."), (0, _react2.jsx)(_index.Box, {
+        sx: {
+          height: '300px'
+        }
+      }))
+    });
+  });
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      maxWidth: '500px'
+    }
+  }, (0, _react2.jsx)(_index.Tabs, {
+    items: scrollableTabs,
+    tabPanelProps: {
+      sx: {
+        maxHeight: '200px',
+        overflowY: 'auto'
+      }
+    }
   }, function (item) {
     return (0, _react2.jsx)(_index.Tab, {
       key: item.name,
@@ -120,7 +167,7 @@ var Centered = exports.Centered = function Centered() {
 var DisabledSingleTab = exports.DisabledSingleTab = function DisabledSingleTab() {
   return (0, _react2.jsx)(_index.Tabs, {
     items: tabs,
-    disabledKeys: ['Tab 2']
+    disabledKeys: [_Tabs2.disabledSingleTabKey]
   }, function (item) {
     return (0, _react2.jsx)(_index.Tab, {
       key: item.name,
@@ -143,23 +190,25 @@ var ContentSlots = exports.ContentSlots = function ContentSlots() {
   var _useGetTheme = (0, _hooks.useGetTheme)(),
     isOnyx = _useGetTheme.themeState.isOnyx;
   var beforeTabNode = (0, _react2.jsx)(_index.Icon, {
-    icon: _LockIcon["default"],
+    icon: isOnyx ? _LockOutlineIcon["default"] : _LockIcon["default"],
+    size: isOnyx ? 24 : undefined,
     sx: {
-      marginTop: isOnyx ? 'md' : 'sm',
-      marginRight: 'xs'
+      // alignSelf: 'center',
+      marginTop: isOnyx ? undefined : 'sm',
+      marginRight: isOnyx ? undefined : 'xs'
     },
     title: {
       name: 'Lock Icon'
     }
   });
-  var nodeSx = {
-    marginLeft: 5,
-    marginTop: 10
-  };
   var afterTabNode = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, {
     variant: "countNeutral",
-    sx: nodeSx,
-    label: "14"
+    sx: {
+      marginTop: isOnyx ? undefined : 'sm',
+      marginLeft: isOnyx ? undefined : 'xs'
+    },
+    label: "14",
+    "aria-label": "Count 14"
   }));
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Tabs, {
     items: tabs,

package/lib/cjs/components/Tabs/Tabs.storyData.d.ts

@@ -0,0 +1 @@
+export declare const disabledSingleTabKey = "Configuration";

package/lib/cjs/components/Tabs/Tabs.storyData.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.disabledSingleTabKey = void 0;
+var disabledSingleTabKey = exports.disabledSingleTabKey = 'Configuration';

package/lib/cjs/components/Tabs/Tabs.style.d.ts

@@ -85,6 +85,11 @@ export declare const tabs: {
         gap: string;
     };
 };
+export declare const tabPickerExpandIcon: {
+    ml: string;
+    width: string;
+    height: string;
+};
 export declare const menuTab: {
     color: string;
     alignItems: string;

package/lib/cjs/components/Tabs/Tabs.style.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tabs = exports.tabPanelBody = exports.tabPanel = exports.tabLine = exports.tab = exports.menuTab = void 0;
+exports.tabs = exports.tabPickerExpandIcon = exports.tabPanelBody = exports.tabPanel = exports.tabLine = exports.tab = exports.menuTab = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Buttons = require("../Button/Buttons.styles");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -97,10 +97,15 @@ var tabs = exports.tabs = {
   '&.is-horizontal': {
     borderBottomWidth: 1,
     borderBottomStyle: 'solid',
-    borderBottomColor: 'neutral.90',
+    borderBottomColor: 'border.hairline',
     gap: 'lg'
   }
 };
+var tabPickerExpandIcon = exports.tabPickerExpandIcon = {
+  ml: '8px',
+  width: '16px',
+  height: '16px'
+};
 var menuTab = exports.menuTab = _objectSpread(_objectSpread({}, _Buttons.quiet), {}, {
   color: 'neutral.40',
   alignItems: 'center',

package/lib/cjs/components/Tabs/Tabs.test.js

@@ -30,6 +30,7 @@ var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _Tab = _interopRequireDefault(require("../Tab"));
 var _Tabs = _interopRequireDefault(require("./Tabs"));
+var _Tabs2 = require("./Tabs.storyData");
 var _excluded = ["name", "children"]; // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
 // Failure occurred with ThemeUI refactor.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
@@ -591,24 +592,6 @@ test('tabs without selected keys show null tab panel content', function () {
   });
   expect(_testWrapper.screen.queryByRole('tabpanel')).not.toHaveTextContent('');
 });
-test('hover tab style', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee1() {
-  var _getTabs1, tab0;
-  return _regeneratorRuntime().wrap(function _callee1$(_context1) {
-    while (1) switch (_context1.prev = _context1.next) {
-      case 0:
-        getComponent();
-        _getTabs1 = getTabs(), tab0 = _getTabs1.tab0;
-        expect(tab0).not.toHaveClass('is-hovered');
-        _context1.next = 5;
-        return _userEvent["default"].hover(tab0);
-      case 5:
-        expect(tab0).toHaveClass('is-hovered');
-      case 6:
-      case "end":
-        return _context1.stop();
-    }
-  }, _callee1);
-})));
 test('will render slots.beforeTab if provided', function () {
   var testText = 'test-text';
   var testComponent = (0, _react2.jsx)("div", null, testText);
@@ -643,28 +626,28 @@ test('will render slots.afterTab if provided', function () {
   });
   expect(_testWrapper.screen.getByText(testText)).toBeInTheDocument();
 });
-test('will render tab with list if provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
-  var _getTabs10, menuBtn, menuItems, firstListItemContent;
-  return _regeneratorRuntime().wrap(function _callee10$(_context10) {
-    while (1) switch (_context10.prev = _context10.next) {
+test('will render tab with list if provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee1() {
+  var _getTabs1, menuBtn, menuItems, firstListItemContent;
+  return _regeneratorRuntime().wrap(function _callee1$(_context1) {
+    while (1) switch (_context1.prev = _context1.next) {
       case 0:
         getComponentWithDynamicItems({
           items: tabsWithList,
           mode: 'list'
         });
-        _context10.next = 3;
+        _context1.next = 3;
         return testTabPanel(0);
       case 3:
-        _getTabs10 = getTabs(), menuBtn = _getTabs10.tab1.parentElement;
+        _getTabs1 = getTabs(), menuBtn = _getTabs1.tab1.parentElement;
         if (!menuBtn) {
-          _context10.next = 7;
+          _context1.next = 7;
           break;
         }
-        _context10.next = 7;
+        _context1.next = 7;
         return _userEvent["default"].click(menuBtn);
       case 7:
         expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
-        _context10.next = 10;
+        _context1.next = 10;
         return testTabPanel(0);
       case 10:
         menuItems = _testWrapper.screen.queryAllByRole('menuitemradio');
@@ -672,7 +655,7 @@ test('will render tab with list if provided', /*#__PURE__*/(0, _asyncToGenerator
           expect(menuItems).toHaveLength(tabsWithList[1].list.length);
         }
         expect(menuItems[0]).not.toHaveFocus();
-        _context10.next = 15;
+        _context1.next = 15;
         return _userEvent["default"].click(menuItems[0]);
       case 15:
         if (tabsWithList[1].list) {
@@ -681,15 +664,80 @@ test('will render tab with list if provided', /*#__PURE__*/(0, _asyncToGenerator
         }
         expect(_testWrapper.screen.queryByRole('menu')).not.toBeInTheDocument();
       case 17:
+      case "end":
+        return _context1.stop();
+    }
+  }, _callee1);
+})));
+test('list mode renders the caret for Onyx tabs', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
+  var listTab;
+  return _regeneratorRuntime().wrap(function _callee10$(_context10) {
+    while (1) switch (_context10.prev = _context10.next) {
+      case 0:
+        getComponentWithDynamicItems({
+          items: tabsWithList,
+          mode: 'list'
+        });
+        listTab = _testWrapper.screen.getByRole('tab', {
+          name: 'Tab 2'
+        });
+        expect(listTab).toBeInTheDocument();
+        _context10.next = 5;
+        return _userEvent["default"].click(listTab.parentElement);
+      case 5:
+        expect(_testWrapper.screen.getByRole('menu')).toBeInTheDocument();
+      case 6:
       case "end":
         return _context10.stop();
     }
   }, _callee10);
 })));
-test('tab list is accessible via keyboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
-  var _getTabs11, tabs, tab0, tab1, menuTrigger, menuItems, firstListItemContent;
+test('single disabled tab remains unavailable with its collection key', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
+  var storyTabs, _getTabs10, tabs, tab0, tab1, tab2;
   return _regeneratorRuntime().wrap(function _callee11$(_context11) {
     while (1) switch (_context11.prev = _context11.next) {
+      case 0:
+        expect(_Tabs2.disabledSingleTabKey).toBe('Configuration');
+        storyTabs = [{
+          name: 'Overview',
+          children: 'Overview body',
+          props: {}
+        }, {
+          name: 'Configuration',
+          children: 'Configuration body',
+          props: {}
+        }, {
+          name: 'Resources',
+          children: 'Resources body',
+          props: {}
+        }];
+        getComponentWithDynamicItems({
+          items: storyTabs,
+          disabledKeys: [_Tabs2.disabledSingleTabKey],
+          keyboardActivation: 'automatic'
+        });
+        _getTabs10 = getTabs(), tabs = _getTabs10.tabs, tab0 = _getTabs10.tab0, tab1 = _getTabs10.tab1, tab2 = _getTabs10.tab2;
+        expect(tab1).toHaveAttribute('aria-disabled', 'true');
+        _context11.next = 7;
+        return _userEvent["default"].tab();
+      case 7:
+        expect(tab0).toHaveFocus();
+        _testWrapper.fireEvent.keyDown(tab0, {
+          key: 'ArrowRight',
+          code: 'ArrowRight'
+        });
+        expect(tab2).toHaveFocus();
+        expect(tabs[1]).toHaveAttribute('aria-disabled', 'true');
+      case 11:
+      case "end":
+        return _context11.stop();
+    }
+  }, _callee11);
+})));
+test('tab list is accessible via keyboard', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
+  var _getTabs11, tabs, tab0, tab1, menuTrigger, menuItems, firstListItemContent;
+  return _regeneratorRuntime().wrap(function _callee12$(_context12) {
+    while (1) switch (_context12.prev = _context12.next) {
       case 0:
         getComponentWithDynamicItems({
           items: tabsWithList,
@@ -699,10 +747,10 @@ test('tab list is accessible via keyboard', /*#__PURE__*/(0, _asyncToGenerator2[
         (0, _forEach["default"])(tabs).call(tabs, function (tab) {
           return expect(tab).not.toHaveFocus();
         });
-        _context11.next = 5;
+        _context12.next = 5;
         return _userEvent["default"].tab();
       case 5:
-        _context11.next = 7;
+        _context12.next = 7;
         return testTabPanel(0);
       case 7:
         _testWrapper.fireEvent.keyDown(tab0, {
@@ -714,15 +762,15 @@ test('tab list is accessible via keyboard', /*#__PURE__*/(0, _asyncToGenerator2[
         // In newer React Aria, the PopoverMenu trigger wraps the tab,
         // so we need to click the parent menu trigger element
         menuTrigger = tab1.closest('[aria-haspopup="true"]') || tab1;
-        _context11.next = 12;
+        _context12.next = 12;
         return _userEvent["default"].click(menuTrigger);
       case 12:
-        _context11.next = 14;
+        _context12.next = 14;
         return (0, _testWrapper.waitFor)(function () {
           expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
         });
       case 14:
-        _context11.next = 16;
+        _context12.next = 16;
         return testTabPanel(0);
       case 16:
         menuItems = _testWrapper.screen.queryAllByRole('menuitemradio');
@@ -741,7 +789,7 @@ test('tab list is accessible via keyboard', /*#__PURE__*/(0, _asyncToGenerator2[
         expect(_testWrapper.screen.queryByRole('menu')).not.toBeInTheDocument();
       case 22:
       case "end":
-        return _context11.stop();
+        return _context12.stop();
     }
-  }, _callee11);
+  }, _callee12);
 })));

package/lib/cjs/context/CheckboxFieldGroupContext/index.d.ts

@@ -0,0 +1,10 @@
+import { CheckboxGroupState } from 'react-stately';
+/**
+ * Selection state shared by the context-aware checkbox group items.
+ *
+ * This context is intentionally private to the compound component. Consumers
+ * should render `CheckboxFieldGroupItem` inside `CheckboxFieldGroup` instead of
+ * providing a state object themselves.
+ */
+export declare const CheckboxFieldGroupContext: import("react").Context<CheckboxGroupState | null>;
+export default CheckboxFieldGroupContext;

package/lib/cjs/context/CheckboxFieldGroupContext/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.CheckboxFieldGroupContext = void 0;
+var _react = require("react");
+/**
+ * Selection state shared by the context-aware checkbox group items.
+ *
+ * This context is intentionally private to the compound component. Consumers
+ * should render `CheckboxFieldGroupItem` inside `CheckboxFieldGroup` instead of
+ * providing a state object themselves.
+ */
+var CheckboxFieldGroupContext = exports.CheckboxFieldGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
+var _default = exports["default"] = CheckboxFieldGroupContext;