@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

package/lib/components/Tab/Tab.js

@@ -1,14 +1,26 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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) { _defineProperty(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; }
 import React, { forwardRef, useContext } from 'react';
 import { mergeProps, useFocusRing, useTab } from 'react-aria';
 import { Item as Tab } from 'react-stately';
 import { Pressable, useHover } from '@react-aria/interactions';
 import { Box, Text, Tooltip, TooltipTrigger } from '../..';
-import { useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
+import { useGetTheme, useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import TabPicker from '../TabPicker';
 import { TabsContext } from '../Tabs';
+import { getSlotText } from './getSlotText';
 
 /**
  * Tab control for dividing up closely-related content.
@@ -23,6 +35,8 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
     orientation = props.orientation,
     mode = props.mode,
     slots = props.slots;
+  var _useGetTheme = useGetTheme(),
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var key = item.key,
     rendered = item.rendered,
     itemProps = item.props;
@@ -54,9 +68,27 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   var defaultIndicator = ___EmotionJSX(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.isValidElement(slot)) return slot;
+    var count = 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.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 = ___EmotionJSX(Box, {
     isRow: true
-  }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, ___EmotionJSX(Box, _extends({
+  }, !isOnyx && (slots === null || slots === void 0 ? void 0 : slots.beforeTab), ___EmotionJSX(Box, _extends({
     className: classNames,
     variant: "tab"
   }, mergeProps(focusProps, hoverProps, tabProps), getPendoID('Tab'), {
@@ -67,7 +99,11 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   }), ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, ___EmotionJSX(Text, _extends({
     variant: "tabLabel",
     display: "flex"
-  }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps), rendered, isRequired && defaultIndicator), isSelected && !isDisabled && ___EmotionJSX(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 && ___EmotionJSX(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 ___EmotionJSX(TabPicker, _extends({
       ref: tabRef,

package/lib/components/Tab/getSlotText.js

@@ -0,0 +1,15 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+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.
+ */
+var _getSlotText = function getSlotText(node) {
+  var _context;
+  return _mapInstanceProperty(_context = React.Children.toArray(node)).call(_context, function (child) {
+    var _child$props$children;
+    return /*#__PURE__*/React.isValidElement(child) ? _getSlotText((_child$props$children = child.props.children) !== null && _child$props$children !== void 0 ? _child$props$children : child.props.label) : String(child);
+  }).join('');
+};
+export { _getSlotText as getSlotText };

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

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

package/lib/components/TabPicker/TabPicker.js

@@ -11,12 +11,10 @@ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/ins
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { Item as Tab } from 'react-stately';
-import ArrowDropDownIcon from '@pingux/mdi-react/ArrowDropDownIcon';
-import ArrowDropUpIcon from '@pingux/mdi-react/ArrowDropUpIcon';
 import { Pressable } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { Box, Icon, Menu, PopoverMenu, Text } from '../..';
-import { useStatusClasses } from '../../hooks';
+import { useGetTheme, useStatusClasses } from '../../hooks';
 import { TabLine } from '../Tab';
 
 /* istanbul ignore next */
@@ -35,6 +33,11 @@ var TabPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     selectedItem = _useState4[0],
     setSelectedItem = _useState4[1];
+  var _useGetTheme = useGetTheme(),
+    _useGetTheme$icons = _useGetTheme.icons,
+    tabPickerDown = _useGetTheme$icons.tabPickerDown,
+    tabPickerUp = _useGetTheme$icons.tabPickerUp,
+    isOnyx = _useGetTheme.themeState.isOnyx;
   var selectionManager = state.selectionManager;
   var _useState5 = useState(selectionManager.focusedKey),
     _useState6 = _slicedToArray(_useState5, 2),
@@ -167,11 +170,13 @@ var TabPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     variant: "tabLabel"
   }, item.props.name), selectedItem && ___EmotionJSX(TabLine, null)), ___EmotionJSX(Icon, {
     color: isTabFocused || _includesInstanceProperty(classNames).call(classNames, 'is-hovered') ? 'active' : 'neutral.40',
-    icon: isOpen ? ArrowDropUpIcon : ArrowDropDownIcon,
+    icon: isOpen ? tabPickerUp : tabPickerDown,
+    variant: isOnyx ? 'tabPickerExpandIcon' : undefined,
     title: {
       name: ''
     },
-    "aria-hidden": "true"
+    "aria-hidden": "true",
+    size: isOnyx ? 16 : undefined
   }))), ___EmotionJSX(Menu, {
     onAction: setSelectedItem,
     selectionMode: "single",

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

@@ -1,12 +1,26 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+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) { _defineProperty(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; }
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import React, { useState } from 'react';
 import LockIcon from '@pingux/mdi-react/LockIcon';
+import LockOutlineIcon from '@pingux/mdi-react/LockOutlineIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useGetTheme } from '../../hooks';
 import { Badge, Box, Icon, Tab, Tabs, Text } from '../../index';
 import TabsReadme from './Tabs.mdx';
+import { disabledSingleTabKey } from './Tabs.storyData';
 import { tabsArgTypes } from './tabsAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -76,6 +90,11 @@ export var Controlled = function Controlled() {
     _useState2 = _slicedToArray(_useState, 2),
     currentTab = _useState2[0],
     setCurrentTab = _useState2[1];
+  var controlledTabs = _mapInstanceProperty(tabs).call(tabs, function (tab, index) {
+    return index === 1 ? _objectSpread(_objectSpread({}, tab), {}, {
+      name: 'Configuration with a deliberately long label that wraps'
+    }) : tab;
+  });
   return ___EmotionJSX(Box, {
     sx: {
       maxWidth: '500px'
@@ -83,7 +102,37 @@ export var Controlled = function Controlled() {
   }, ___EmotionJSX(Tabs, {
     selectedKey: currentTab,
     onSelectionChange: setCurrentTab,
-    items: tabs
+    items: controlledTabs
+  }, function (item) {
+    return ___EmotionJSX(Tab, {
+      key: item.name,
+      title: item.name,
+      textValue: item.name
+    }, item.children);
+  }));
+};
+export var ScrollableContent = function ScrollableContent() {
+  var scrollableTabs = _mapInstanceProperty(tabs).call(tabs, function (tab) {
+    return _objectSpread(_objectSpread({}, tab), {}, {
+      children: ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, tab.name, ' content'), ___EmotionJSX(Text, null, "This panel contains additional content to demonstrate scrolling within the tab body."), ___EmotionJSX(Box, {
+        sx: {
+          height: '300px'
+        }
+      }))
+    });
+  });
+  return ___EmotionJSX(Box, {
+    sx: {
+      maxWidth: '500px'
+    }
+  }, ___EmotionJSX(Tabs, {
+    items: scrollableTabs,
+    tabPanelProps: {
+      sx: {
+        maxHeight: '200px',
+        overflowY: 'auto'
+      }
+    }
   }, function (item) {
     return ___EmotionJSX(Tab, {
       key: item.name,
@@ -108,7 +157,7 @@ export var Centered = function Centered() {
 export var DisabledSingleTab = function DisabledSingleTab() {
   return ___EmotionJSX(Tabs, {
     items: tabs,
-    disabledKeys: ['Tab 2']
+    disabledKeys: [disabledSingleTabKey]
   }, function (item) {
     return ___EmotionJSX(Tab, {
       key: item.name,
@@ -131,23 +180,25 @@ export var ContentSlots = function ContentSlots() {
   var _useGetTheme = useGetTheme(),
     isOnyx = _useGetTheme.themeState.isOnyx;
   var beforeTabNode = ___EmotionJSX(Icon, {
-    icon: LockIcon,
+    icon: isOnyx ? LockOutlineIcon : LockIcon,
+    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 = ___EmotionJSX(Box, null, ___EmotionJSX(Badge, {
     variant: "countNeutral",
-    sx: nodeSx,
-    label: "14"
+    sx: {
+      marginTop: isOnyx ? undefined : 'sm',
+      marginLeft: isOnyx ? undefined : 'xs'
+    },
+    label: "14",
+    "aria-label": "Count 14"
   }));
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Tabs, {
     items: tabs,

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

@@ -0,0 +1 @@
+export var disabledSingleTabKey = 'Configuration';

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

@@ -90,10 +90,15 @@ export var tabs = {
   '&.is-horizontal': {
     borderBottomWidth: 1,
     borderBottomStyle: 'solid',
-    borderBottomColor: 'neutral.90',
+    borderBottomColor: 'border.hairline',
     gap: 'lg'
   }
 };
+export var tabPickerExpandIcon = {
+  ml: '8px',
+  width: '16px',
+  height: '16px'
+};
 export var menuTab = _objectSpread(_objectSpread({}, quiet), {}, {
   color: 'neutral.40',
   alignItems: 'center',

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

@@ -37,6 +37,7 @@ import { fireEvent, render, screen, waitFor } from '../../utils/testUtils/testWr
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Tab from '../Tab';
 import Tabs from './Tabs';
+import { disabledSingleTabKey } from './Tabs.storyData';
 
 // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
 // Failure occurred with ThemeUI refactor.
@@ -591,24 +592,6 @@ test('tabs without selected keys show null tab panel content', function () {
   });
   expect(screen.queryByRole('tabpanel')).not.toHaveTextContent('');
 });
-test('hover tab style', /*#__PURE__*/_asyncToGenerator(/*#__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.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 = ___EmotionJSX("div", null, testText);
@@ -643,28 +626,28 @@ test('will render slots.afterTab if provided', function () {
   });
   expect(screen.getByText(testText)).toBeInTheDocument();
 });
-test('will render tab with list if provided', /*#__PURE__*/_asyncToGenerator(/*#__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__*/_asyncToGenerator(/*#__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.click(menuBtn);
       case 7:
         expect(screen.queryByRole('menu')).toBeInTheDocument();
-        _context10.next = 10;
+        _context1.next = 10;
         return testTabPanel(0);
       case 10:
         menuItems = screen.queryAllByRole('menuitemradio');
@@ -672,7 +655,7 @@ test('will render tab with list if provided', /*#__PURE__*/_asyncToGenerator(/*#
           expect(menuItems).toHaveLength(tabsWithList[1].list.length);
         }
         expect(menuItems[0]).not.toHaveFocus();
-        _context10.next = 15;
+        _context1.next = 15;
         return userEvent.click(menuItems[0]);
       case 15:
         if (tabsWithList[1].list) {
@@ -681,15 +664,80 @@ test('will render tab with list if provided', /*#__PURE__*/_asyncToGenerator(/*#
         }
         expect(screen.queryByRole('menu')).not.toBeInTheDocument();
       case 17:
+      case "end":
+        return _context1.stop();
+    }
+  }, _callee1);
+})));
+test('list mode renders the caret for Onyx tabs', /*#__PURE__*/_asyncToGenerator(/*#__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 = screen.getByRole('tab', {
+          name: 'Tab 2'
+        });
+        expect(listTab).toBeInTheDocument();
+        _context10.next = 5;
+        return userEvent.click(listTab.parentElement);
+      case 5:
+        expect(screen.getByRole('menu')).toBeInTheDocument();
+      case 6:
       case "end":
         return _context10.stop();
     }
   }, _callee10);
 })));
-test('tab list is accessible via keyboard', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
-  var _getTabs11, tabs, tab0, tab1, menuTrigger, menuItems, firstListItemContent;
+test('single disabled tab remains unavailable with its collection key', /*#__PURE__*/_asyncToGenerator(/*#__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(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: [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.tab();
+      case 7:
+        expect(tab0).toHaveFocus();
+        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__*/_asyncToGenerator(/*#__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__*/_asyncToGenerator(/*#__
         _forEachInstanceProperty(tabs).call(tabs, function (tab) {
           return expect(tab).not.toHaveFocus();
         });
-        _context11.next = 5;
+        _context12.next = 5;
         return userEvent.tab();
       case 5:
-        _context11.next = 7;
+        _context12.next = 7;
         return testTabPanel(0);
       case 7:
         fireEvent.keyDown(tab0, {
@@ -714,15 +762,15 @@ test('tab list is accessible via keyboard', /*#__PURE__*/_asyncToGenerator(/*#__
         // 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.click(menuTrigger);
       case 12:
-        _context11.next = 14;
+        _context12.next = 14;
         return waitFor(function () {
           expect(screen.queryByRole('menu')).toBeInTheDocument();
         });
       case 14:
-        _context11.next = 16;
+        _context12.next = 16;
         return testTabPanel(0);
       case 16:
         menuItems = screen.queryAllByRole('menuitemradio');
@@ -741,7 +789,7 @@ test('tab list is accessible via keyboard', /*#__PURE__*/_asyncToGenerator(/*#__
         expect(screen.queryByRole('menu')).not.toBeInTheDocument();
       case 22:
       case "end":
-        return _context11.stop();
+        return _context12.stop();
     }
-  }, _callee11);
+  }, _callee12);
 })));

package/lib/context/CheckboxFieldGroupContext/index.js

@@ -0,0 +1,10 @@
+import { createContext } from '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.
+ */
+export var CheckboxFieldGroupContext = /*#__PURE__*/createContext(null);
+export default CheckboxFieldGroupContext;

package/lib/hooks/index.js

@@ -10,6 +10,7 @@ export { default as useField } from './useField';
 export { default as useGetTheme } from './useGetTheme';
 export { default as useGridList } from './useGridList';
 export { default as useGridListItem } from './useGridListItem';
+export { default as useHelpHintPopover } from './useHelpHintPopover';
 export { default as useInputLoader } from './useInputLoader';
 export { default as useLabelHeight } from './useLabelHeight';
 export { default as useLocalOrForwardRef } from './useLocalOrForwardRef';

package/lib/hooks/useHelpHintPopover/index.js

@@ -0,0 +1,2 @@
+export { default } from './useHelpHintPopover';
+export * from './useHelpHintPopover';

package/lib/hooks/useHelpHintPopover/useHelpHintPopover.js

@@ -0,0 +1,130 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+var _excluded = ["onPress"];
+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) { _defineProperty(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; }
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import { useEffect, useRef, useState } from 'react';
+import { mergeProps, useFocusRing, useFocusWithin, useOverlayPosition, useOverlayTrigger } from 'react-aria';
+import { useOverlayTriggerState } from 'react-stately';
+import { useHover } from '@react-aria/interactions';
+import useStatusClasses from '../useStatusClasses';
+var useHelpHintPopover = function useHelpHintPopover(triggerRef) {
+  var _context;
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$align = options.align,
+    align = _options$align === void 0 ? 'middle' : _options$align,
+    className = options.className,
+    closeDelay = options.closeDelay,
+    crossOffset = options.crossOffset,
+    _options$direction = options.direction,
+    direction = _options$direction === void 0 ? 'top' : _options$direction,
+    _options$isDarkMode = options.isDarkMode,
+    isDarkMode = _options$isDarkMode === void 0 ? true : _options$isDarkMode,
+    _options$isNotFlippab = options.isNotFlippable,
+    isNotFlippable = _options$isNotFlippab === void 0 ? false : _options$isNotFlippab,
+    _options$isTriggerPre = options.isTriggerPressable,
+    isTriggerPressable = _options$isTriggerPre === void 0 ? true : _options$isTriggerPre,
+    _options$offset = options.offset,
+    offset = _options$offset === void 0 ? 15 : _options$offset,
+    _options$shouldOpenOn = options.shouldOpenOnTriggerFocus,
+    shouldOpenOnTriggerFocus = _options$shouldOpenOn === void 0 ? false : _options$shouldOpenOn;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocusWithinOverlay = _useState2[0],
+    setIsFocusWithinOverlay = _useState2[1];
+  var escapeDismissedRef = useRef(false);
+  var _useFocusWithin = useFocusWithin({
+      onFocusWithinChange: function onFocusWithinChange(isFocusWithin) {
+        return setIsFocusWithinOverlay(isFocusWithin);
+      }
+    }),
+    focusWithinProps = _useFocusWithin.focusWithinProps;
+  var overlayRef = useRef(null);
+  var _useFocusRing = useFocusRing(),
+    focusProps = _useFocusRing.focusProps,
+    isFocusVisible = _useFocusRing.isFocusVisible;
+  var _useHover = useHover({}),
+    overlayHoverProps = _useHover.hoverProps,
+    isOverlayHovered = _useHover.isHovered;
+  var _useHover2 = useHover({}),
+    hoverProps = _useHover2.hoverProps,
+    isTriggerHovered = _useHover2.isHovered;
+  var popoverState = useOverlayTriggerState({});
+  var open = popoverState.open,
+    close = popoverState.close,
+    isOpen = popoverState.isOpen;
+  var _useOverlayTrigger = useOverlayTrigger({
+      type: 'dialog'
+    }, popoverState, triggerRef),
+    triggerProps = _useOverlayTrigger.triggerProps,
+    overlayProps = _useOverlayTrigger.overlayProps;
+  useEffect(function () {
+    var timeout;
+    var isHovered = isTriggerHovered || isOverlayHovered;
+    if (isHovered || isFocusWithinOverlay || shouldOpenOnTriggerFocus && isFocusVisible && !escapeDismissedRef.current) {
+      open();
+    } else if (!isFocusWithinOverlay && !isFocusVisible && !isHovered) {
+      escapeDismissedRef.current = false;
+      timeout = _setTimeout(close, closeDelay || 1000);
+    }
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [isFocusWithinOverlay, isFocusVisible, isOverlayHovered, isTriggerHovered, close, closeDelay, open, shouldOpenOnTriggerFocus]);
+  var _useOverlayPosition = useOverlayPosition({
+      targetRef: triggerRef,
+      overlayRef: overlayRef,
+      placement: _concatInstanceProperty(_context = "".concat(direction, " ")).call(_context, align),
+      offset: offset,
+      crossOffset: crossOffset,
+      isOpen: isOpen,
+      onClose: close,
+      shouldUpdatePosition: true,
+      shouldFlip: !isNotFlippable
+    }),
+    positionProps = _useOverlayPosition.overlayProps,
+    placement = _useOverlayPosition.placement;
+  var _useStatusClasses = useStatusClasses(className, {
+      isDarkMode: isDarkMode
+    }),
+    classNames = _useStatusClasses.classNames;
+  var onPress = triggerProps.onPress,
+    pressFreeTriggerProps = _objectWithoutProperties(triggerProps, _excluded);
+  var dismissOnEscape = function dismissOnEscape(event) {
+    if (event.key === 'Escape') {
+      escapeDismissedRef.current = true;
+      close();
+    }
+  };
+  return {
+    close: close,
+    isFocusVisible: isFocusVisible,
+    isOpen: isOpen,
+    open: open,
+    overlayRef: overlayRef,
+    triggerProps: mergeProps(isTriggerPressable ? triggerProps : pressFreeTriggerProps, focusProps, hoverProps, {
+      onKeyUp: dismissOnEscape
+    }),
+    popoverContainerProps: _objectSpread({
+      className: classNames,
+      direction: direction,
+      isDismissable: isFocusWithinOverlay ? !isOpen : true,
+      isNonModal: true,
+      isOpen: isOpen,
+      onClose: close,
+      placement: placement !== null && placement !== void 0 ? placement : undefined
+    }, mergeProps(overlayProps, positionProps, overlayHoverProps, focusWithinProps))
+  };
+};
+export default useHelpHintPopover;