@pingux/astro 1.5.0-alpha.0 → 1.5.0

package/lib/components/TabPicker/TabPicker.js

@@ -0,0 +1,210 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Item as Tab } from '@react-stately/collections';
+import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
+import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
+import { useStatusClasses } from '../../hooks';
+import { Box, Text, Button, PopoverMenu, Icon, Menu } from '../..';
+import { TabLine } from '../Tab';
+/* istanbul ignore next */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TabPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      items = _ref.items,
+      state = _ref.state,
+      item = _ref.item,
+      others = _objectWithoutProperties(_ref, ["className", "items", "state", "item"]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = useState(state.selectedKey),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedItem = _useState4[0],
+      setSelectedItem = _useState4[1];
+
+  var selectionManager = state.selectionManager;
+
+  var _useState5 = useState(selectionManager.focusedKey),
+      _useState6 = _slicedToArray(_useState5, 2),
+      focusedItem = _useState6[0],
+      setFocusedItem = _useState6[1];
+
+  var isTabFocused = selectionManager.focusedKey === item.key;
+  var isTabSelected = state.selectedKey === item.key;
+
+  var isListItemFocused = _someInstanceProperty(items).call(items, function (el) {
+    return el.key === selectionManager.focusedKey;
+  });
+
+  var isListItemSelected = _someInstanceProperty(items).call(items, function (el) {
+    return el.key === state.selectedKey;
+  });
+
+  var _useMemo = useMemo(function () {
+    var _context, _tabs$prevIndex, _tabs$nextIndex;
+
+    var tabs = _filterInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (tab) {
+      var _tab$value;
+
+      return !(tab === null || tab === void 0 ? void 0 : (_tab$value = tab.value) === null || _tab$value === void 0 ? void 0 : _tab$value.isListItem);
+    });
+
+    var prevIndex = _findIndexInstanceProperty(tabs).call(tabs, function (tab) {
+      return tab.key === item.key;
+    }) - 1;
+    var nextIndex = _findIndexInstanceProperty(tabs).call(tabs, function (tab) {
+      return tab.key === item.key;
+    }) + 1;
+    return {
+      prevKey: ((_tabs$prevIndex = tabs[prevIndex]) === null || _tabs$prevIndex === void 0 ? void 0 : _tabs$prevIndex.key) || tabs[tabs.length].key,
+      nextKey: ((_tabs$nextIndex = tabs[nextIndex]) === null || _tabs$nextIndex === void 0 ? void 0 : _tabs$nextIndex.key) || tabs[0].key
+    };
+  }, []),
+      prevKey = _useMemo.prevKey,
+      nextKey = _useMemo.nextKey;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isSelected: isListItemSelected
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  var menuRef = useRef();
+
+  var handleSelectedItem = function handleSelectedItem(currentItem) {
+    state.setSelectedKey(currentItem);
+    setFocusedItem(currentItem);
+  };
+
+  useEffect(function () {
+    if (selectedItem) {
+      handleSelectedItem(selectedItem);
+    }
+  }, [selectedItem]);
+  useEffect(function () {
+    if (focusedItem) {
+      selectionManager.setFocusedKey(focusedItem);
+    }
+  }, [focusedItem]);
+  useEffect(function () {
+    if (isOpen && (isTabFocused || isListItemSelected) && menuRef.current) {
+      if (focusedItem) {
+        var _context2;
+
+        _findInstanceProperty(_context2 = _Array$from(menuRef.current.children)).call(_context2, function (el) {
+          return el.dataset.key === focusedItem;
+        }).focus();
+      } else {
+        menuRef.current.firstChild.focus();
+      }
+    }
+
+    if (!isOpen && isTabSelected && !selectedItem) {
+      setSelectedItem(selectionManager.focusedKey);
+    }
+  }, [isOpen]);
+  useEffect(function () {
+    if (isOpen && isListItemFocused) {
+      setFocusedItem(selectionManager.focusedKey);
+    } else if (!isOpen && isListItemFocused) {
+      selectionManager.setFocusedKey(item.key);
+    }
+  }, [selectionManager.focusedKey]);
+  useEffect(function () {
+    if (isTabSelected || isTabFocused) {
+      if (selectedItem) {
+        handleSelectedItem(selectedItem);
+      } else if (isListItemSelected && !selectedItem) {
+        setSelectedItem(state.selectedKey);
+      } else {
+        setFocusedItem(items[0].key);
+      }
+    } else if (!isListItemSelected && !isListItemFocused) {
+      setIsOpen(false);
+      setSelectedItem(null);
+      setFocusedItem(null);
+    }
+  }, [isTabSelected, isListItemSelected]);
+
+  var handleKeyNavigation = function handleKeyNavigation(e) {
+    switch (e.key) {
+      case 'ArrowRight':
+        {
+          selectionManager.setFocusedKey(nextKey);
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          selectionManager.setFocusedKey(prevKey);
+          break;
+        }
+
+      default:
+        break;
+    }
+  };
+
+  var tabProps = others;
+  delete tabProps.onPointerDown;
+  delete tabProps.onKeyDown;
+  return ___EmotionJSX(PopoverMenu, {
+    onOpenChange: setIsOpen,
+    isOpen: isOpen,
+    isContainFocus: true
+  }, ___EmotionJSX(Button, {
+    className: classNames,
+    variant: "menuTab",
+    onKeyDown: handleKeyNavigation
+  }, ___EmotionJSX(Box, _extends({
+    className: classNames,
+    variant: "tab",
+    ref: ref
+  }, tabProps), ___EmotionJSX(Text, {
+    variant: "tabLabel"
+  }, item.props.name), selectedItem && ___EmotionJSX(TabLine, null)), ___EmotionJSX(Icon, {
+    icon: isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
+  })), ___EmotionJSX(Menu, {
+    onAction: setSelectedItem,
+    selectionMode: "single",
+    selectedKeys: [selectionManager.focusedKey],
+    ref: menuRef
+  }, _mapInstanceProperty(items).call(items, function (tab) {
+    return ___EmotionJSX(Tab, {
+      key: tab.key
+    }, tab.name);
+  })));
+});
+TabPicker.propTypes = {
+  item: PropTypes.shape({
+    key: PropTypes.string,
+    props: PropTypes.shape({
+      name: PropTypes.string
+    })
+  }),
+  items: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string
+  })),
+  state: PropTypes.shape({
+    collection: PropTypes.shape({}),
+    selectedKey: PropTypes.string,
+    setSelectedKey: PropTypes["function"],
+    selectionManager: PropTypes.shape({
+      focusedKey: PropTypes.string,
+      setFocusedKey: PropTypes["function"]
+    })
+  })
+};
+export default TabPicker;

package/lib/components/TabPicker/index.js

@@ -0,0 +1 @@
+export { default } from './TabPicker';

package/lib/components/Tabs/Tabs.js

@@ -1,20 +1,21 @@
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context6; _forEachInstanceProperty(_context6 = ownKeys(Object(source), true)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context7; _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -27,16 +28,17 @@ import { usePropWarning } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TabsContext = /*#__PURE__*/React.createContext({});
 var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context;
+  var _context4, _context5;
 
   var children = props.children,
       isDisabled = props.isDisabled,
+      items = props.items,
       onSelectionChange = props.onSelectionChange,
       orientation = props.orientation,
       mode = props.mode,
       tabListProps = props.tabListProps,
       tabPanelProps = props.tabPanelProps,
-      others = _objectWithoutProperties(props, ["children", "isDisabled", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"]);
+      others = _objectWithoutProperties(props, ["children", "isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"]);
 
   var tabListRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -51,8 +53,31 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return tabPanelRef.current;
   });
+  var allItems = [];
+
+  if (mode === 'list') {
+    _forEachInstanceProperty(items).call(items, function (item) {
+      var _context;
+
+      allItems = _concatInstanceProperty(_context = []).call(_context, allItems, [item]);
+
+      if (item.list) {
+        var _context2, _context3;
+
+        var list = _mapInstanceProperty(_context2 = item.list).call(_context2, function (el) {
+          return _objectSpread(_objectSpread({}, el), {}, {
+            isListItem: true
+          });
+        });
+
+        allItems = _concatInstanceProperty(_context3 = []).call(_context3, allItems, list);
+      }
+    });
+  }
+
   var state = useTabListState(_objectSpread(_objectSpread({}, props), {}, {
-    onSelectionChange: onSelectionChange
+    onSelectionChange: onSelectionChange,
+    items: mode === 'list' ? allItems : items
   }));
 
   var _useTabList = useTabList(props, state, tabListRef),
@@ -70,7 +95,11 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     isRow: orientation === ORIENTATION.HORIZONTAL
   }, tabListProps, raTabListProps, {
     ref: tabListRef
-  }), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+  }), _mapInstanceProperty(_context4 = _filterInstanceProperty(_context5 = _Array$from(state.collection)).call(_context5, function (item) {
+    var _item$value;
+
+    return !(item === null || item === void 0 ? void 0 : (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.isListItem);
+  })).call(_context4, function (item) {
     var _item$props;
 
     return ___EmotionJSX(CollectionTab, {
@@ -100,7 +129,7 @@ Tabs.propTypes = {
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
 
   /** Determines the behavior model for the tabs. */
-  mode: PropTypes.oneOf(['default', 'tooltip']),
+  mode: PropTypes.oneOf(['default', 'tooltip', 'list']),
 
   /**
    * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
@@ -118,12 +147,16 @@ Tabs.propTypes = {
   tabListProps: PropTypes.shape({}),
 
   /** Props object that is spread directly into all of the tab panel wrapper elements. */
-  tabPanelProps: PropTypes.shape({})
+  tabPanelProps: PropTypes.shape({}),
+
+  /** Whether tabs are activated automatically on focus or manually¸ */
+  keyboardActivation: PropTypes.oneOf(['automatic', 'manual'])
 };
 Tabs.defaultProps = {
   isDisabled: false,
   orientation: 'horizontal',
-  mode: 'default'
+  mode: 'default',
+  keyboardActivation: 'manual'
 };
 Tabs.displayName = 'Tabs';
 export default Tabs;

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

@@ -1,3 +1,4 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
@@ -225,4 +226,30 @@ export var ContentSlots = function ContentSlots() {
       afterTab: afterTabNode
     }
   }, ___EmotionJSX(Text, null, "Users Matched"))));
+};
+export var WithList = function WithList() {
+  var _context;
+
+  var allTabs = _concatInstanceProperty(_context = []).call(_context, tabs, [{
+    name: 'Tab 4',
+    list: [{
+      key: 'tab1list',
+      name: 'Tab 1 list',
+      children: 'Tab 1 from list'
+    }, {
+      key: 'tab2list',
+      name: 'Tab 2 list',
+      children: 'Tab 2 from list'
+    }]
+  }]);
+
+  return ___EmotionJSX(Tabs, {
+    items: allTabs,
+    mode: "list"
+  }, function (item) {
+    return ___EmotionJSX(Tab, _extends({
+      key: item.name,
+      title: item.name
+    }, item), item.children);
+  });
 };

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

@@ -4,6 +4,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerat
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
@@ -33,6 +34,21 @@ var defaultTabs = [{
   name: 'Tab 3',
   children: 'Tab 3 body'
 }];
+var tabsWithList = [{
+  name: 'Tab 1',
+  children: 'Tab 1 body'
+}, {
+  name: 'Tab 2',
+  list: [{
+    key: 'tab1list',
+    name: 'Tab 1 list',
+    children: 'Tab 1 from list'
+  }, {
+    key: 'tab2list',
+    name: 'Tab 2 list',
+    children: 'Tab 2 from list'
+  }]
+}];
 var defaultProps = {
   'data-testid': testId,
   defaultSelectedKey: defaultTabs[0].name
@@ -60,6 +76,21 @@ var getComponent = function getComponent() {
   }))));
 };
 
+var getComponentWithDynamicItems = function getComponentWithDynamicItems(props) {
+  return render(___EmotionJSX(CacheProvider, {
+    value: emotionCache
+  }, ___EmotionJSX(Tabs, props, function (_ref3) {
+    var name = _ref3.name,
+        children = _ref3.children,
+        tabProps = _objectWithoutProperties(_ref3, ["name", "children"]);
+
+    return ___EmotionJSX(Tab, _extends({
+      key: name,
+      title: name
+    }, tabProps), children);
+  })));
+};
+
 var getTabs = function getTabs() {
   var tabs = screen.queryAllByRole('tab');
 
@@ -77,8 +108,8 @@ var getTabs = function getTabs() {
 };
 
 var testTabPanel = function testTabPanel(expectedTabIndex) {
-  return _forEachInstanceProperty(defaultTabs).call(defaultTabs, function (_ref3, index) {
-    var children = _ref3.children;
+  return _forEachInstanceProperty(defaultTabs).call(defaultTabs, function (_ref4, index) {
+    var children = _ref4.children;
     return index === expectedTabIndex ? expect(screen.queryByText(children)).toBeInTheDocument() : expect(screen.queryByText(children)).not.toBeInTheDocument();
   });
 };
@@ -138,7 +169,7 @@ test('interacting with tabs via click', function () {
   testSingleTab(tabs, tab0, 'toContainElement', [screen.getByRole('presentation')]);
   testTabPanel(0);
 });
-test('interacting with tabs via focus -- horizontal', function () {
+test('interacting with tabs with manual activation', function () {
   getComponent();
 
   var _getTabs2 = getTabs(),
@@ -150,6 +181,36 @@ test('interacting with tabs via focus -- horizontal', function () {
     return expect(tab).not.toHaveFocus();
   });
 
+  userEvent.tab();
+  testSingleTab(tabs, tab0, 'toHaveFocus');
+  testTabPanel(0);
+  fireEvent.keyDown(tab0, {
+    key: 'ArrowRight',
+    code: 'ArrowRight'
+  });
+  testSingleTab(tabs, tab1, 'toHaveFocus');
+  testTabPanel(0);
+  fireEvent.keyDown(tab1, {
+    key: 'Enter',
+    code: 'Enter'
+  });
+  testSingleTab(tabs, tab1, 'toHaveFocus');
+  testTabPanel(1);
+});
+test('interacting with tabs via focus -- horizontal', function () {
+  getComponent({
+    keyboardActivation: 'automatic'
+  });
+
+  var _getTabs3 = getTabs(),
+      tabs = _getTabs3.tabs,
+      tab0 = _getTabs3.tab0,
+      tab1 = _getTabs3.tab1;
+
+  _forEachInstanceProperty(tabs).call(tabs, function (tab) {
+    return expect(tab).not.toHaveFocus();
+  });
+
   userEvent.tab();
   testSingleTab(tabs, tab0, 'toHaveFocus');
   testTabPanel(0);
@@ -168,13 +229,14 @@ test('interacting with tabs via focus -- horizontal', function () {
 });
 test('interacting with tabs via focus -- vertical', function () {
   getComponent({
-    orientation: 'vertical'
+    orientation: 'vertical',
+    keyboardActivation: 'automatic'
   });
 
-  var _getTabs3 = getTabs(),
-      tabs = _getTabs3.tabs,
-      tab0 = _getTabs3.tab0,
-      tab1 = _getTabs3.tab1;
+  var _getTabs4 = getTabs(),
+      tabs = _getTabs4.tabs,
+      tab0 = _getTabs4.tab0,
+      tab1 = _getTabs4.tab1;
 
   _forEachInstanceProperty(tabs).call(tabs, function (tab) {
     return expect(tab).not.toHaveFocus();
@@ -201,9 +263,9 @@ test('disabled all tabs', function () {
     isDisabled: true
   });
 
-  var _getTabs4 = getTabs(),
-      tab0 = _getTabs4.tab0,
-      tab1 = _getTabs4.tab1;
+  var _getTabs5 = getTabs(),
+      tab0 = _getTabs5.tab0,
+      tab1 = _getTabs5.tab1;
 
   var tabLine = screen.queryByRole('presentation'); // Tabs cannot be DOM disabled so must check visuals
 
@@ -222,15 +284,16 @@ test('disabled all tabs', function () {
 });
 test('disabled tab is not accessible on click or focus', function () {
   getComponent({
-    disabledKeys: [defaultTabs[1].name]
+    disabledKeys: [defaultTabs[1].name],
+    keyboardActivation: 'automatic'
   });
   testTabPanel(0);
 
-  var _getTabs5 = getTabs(),
-      tabs = _getTabs5.tabs,
-      tab0 = _getTabs5.tab0,
-      tab1 = _getTabs5.tab1,
-      tab2 = _getTabs5.tab2; // Ensure that clicking a disabled tab does nothing
+  var _getTabs6 = getTabs(),
+      tabs = _getTabs6.tabs,
+      tab0 = _getTabs6.tab0,
+      tab1 = _getTabs6.tab1,
+      tab2 = _getTabs6.tab2; // Ensure that clicking a disabled tab does nothing
 
 
   userEvent.click(tab1);
@@ -255,11 +318,11 @@ test('controlled tabs', function () {
   }),
       rerender = _getComponent.rerender;
 
-  var _getTabs6 = getTabs(),
-      tabs = _getTabs6.tabs,
-      tab0 = _getTabs6.tab0,
-      tab1 = _getTabs6.tab1,
-      tab2 = _getTabs6.tab2; // Expect the second tab to be selected
+  var _getTabs7 = getTabs(),
+      tabs = _getTabs7.tabs,
+      tab0 = _getTabs7.tab0,
+      tab1 = _getTabs7.tab1,
+      tab2 = _getTabs7.tab2; // Expect the second tab to be selected
 
 
   expect(onSelectionChange).not.toHaveBeenCalled();
@@ -296,9 +359,9 @@ test('tab line props', function () {
   }),
       rerender = _getComponent2.rerender;
 
-  var _getTabs7 = getTabs(),
-      tabs = _getTabs7.tabs,
-      tab0 = _getTabs7.tab0;
+  var _getTabs8 = getTabs(),
+      tabs = _getTabs8.tabs,
+      tab0 = _getTabs8.tab0;
 
   var tabLine = screen.getByRole('presentation'); // Expect the tab line to have a red background
 
@@ -327,16 +390,16 @@ test('tab with icon', function () {
     tabs: newTabs
   });
 
-  var _getTabs8 = getTabs(),
-      tabs = _getTabs8.tabs,
-      tab0 = _getTabs8.tab0;
+  var _getTabs9 = getTabs(),
+      tabs = _getTabs9.tabs,
+      tab0 = _getTabs9.tab0;
 
   var icon = screen.getByTestId('icon'); // Expect the tab to have the given icon element
 
   testSingleTab(tabs, tab0, 'toContainElement', [icon]);
 });
 test('tooltip renders on tab\'s hover in `tooltip` mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-  var _getTabs9, tab0;
+  var _getTabs10, tab0;
 
   return _regeneratorRuntime.wrap(function _callee$(_context) {
     while (1) {
@@ -346,7 +409,7 @@ test('tooltip renders on tab\'s hover in `tooltip` mode', /*#__PURE__*/_asyncToG
             mode: 'tooltip'
           });
           expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
-          _getTabs9 = getTabs(), tab0 = _getTabs9.tab0;
+          _getTabs10 = getTabs(), tab0 = _getTabs10.tab0;
           fireEvent.mouseMove(tab0);
           fireEvent.mouseEnter(tab0);
 
@@ -370,8 +433,8 @@ test('tabs without selected keys show null tab panel content', function () {
 test('hover tab style', function () {
   getComponent();
 
-  var _getTabs10 = getTabs(),
-      tab0 = _getTabs10.tab0;
+  var _getTabs11 = getTabs(),
+      tab0 = _getTabs11.tab0;
 
   expect(tab0).not.toHaveClass('is-hovered');
   userEvent.hover(tab0);
@@ -414,4 +477,74 @@ test('will render slots.afterTab if provided', function () {
     tabs: tabs
   });
   expect(screen.getByText(testText)).toBeInTheDocument();
+});
+test('will render tab with list if provided', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var _getTabs12, menuBtn, menuItems, firstListItemContent;
+
+  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          getComponentWithDynamicItems({
+            items: tabsWithList,
+            mode: 'list'
+          });
+          testTabPanel(0);
+          _getTabs12 = getTabs(), menuBtn = _getTabs12.tab1.parentElement;
+          userEvent.click(menuBtn);
+          expect(screen.queryByRole('menu')).toBeInTheDocument();
+          testTabPanel(0);
+          menuItems = screen.queryAllByRole('menuitemradio');
+          expect(menuItems).toHaveLength(tabsWithList[1].list.length);
+          expect(menuItems[0]).not.toHaveFocus();
+          userEvent.click(menuItems[0]);
+          firstListItemContent = tabsWithList[1].list[0].children;
+          expect(screen.queryByRole('tabpanel')).toHaveTextContent(firstListItemContent);
+          expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+
+        case 13:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));
+test('tab list is accessible via keyboard', function () {
+  getComponentWithDynamicItems({
+    items: tabsWithList,
+    mode: 'list'
+  });
+
+  var _getTabs13 = getTabs(),
+      tabs = _getTabs13.tabs,
+      tab0 = _getTabs13.tab0,
+      tab1 = _getTabs13.tab1;
+
+  _forEachInstanceProperty(tabs).call(tabs, function (tab) {
+    return expect(tab).not.toHaveFocus();
+  });
+
+  userEvent.tab();
+  testTabPanel(0);
+  fireEvent.keyDown(tab0, {
+    key: 'ArrowRight',
+    code: 'ArrowRight'
+  });
+  expect(tab1).toHaveFocus();
+  fireEvent.keyDown(tab1, {
+    key: 'Enter',
+    code: 'Enter'
+  });
+  expect(screen.queryByRole('menu')).toBeInTheDocument();
+  testTabPanel(0);
+  var menuItems = screen.queryAllByRole('menuitemradio');
+  expect(menuItems).toHaveLength(tabsWithList[1].list.length);
+  expect(menuItems[0]).toHaveFocus();
+  fireEvent.keyDown(menuItems[0], {
+    key: 'Enter',
+    code: 'Enter'
+  });
+  var firstListItemContent = tabsWithList[1].list[0].children;
+  expect(screen.queryByRole('tabpanel')).toHaveTextContent(firstListItemContent);
+  expect(screen.queryByRole('menu')).not.toBeInTheDocument();
 });