@pingux/astro 1.5.0-alpha.0 → 1.5.0

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

@@ -10,7 +10,9 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.ContentSlots = exports.TabPanelProps = exports.CustomTabLine = exports.DisabledAllTabs = exports.DisabledSingleTab = exports.Centered = exports.WithTooltips = exports.WithIcon = exports.Controlled = exports.Uncontrolled = exports["default"] = void 0;
+exports.WithList = exports.ContentSlots = exports.TabPanelProps = exports.CustomTabLine = exports.DisabledAllTabs = exports.DisabledSingleTab = exports.Centered = exports.WithTooltips = exports.WithIcon = exports.Controlled = exports.Uncontrolled = exports["default"] = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -278,4 +280,32 @@ var ContentSlots = function ContentSlots() {
   }, (0, _react2.jsx)(_Text["default"], null, "Users Matched"))));
 };
 
-exports.ContentSlots = ContentSlots;
+exports.ContentSlots = ContentSlots;
+
+var WithList = function WithList() {
+  var _context;
+
+  var allTabs = (0, _concat["default"])(_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 (0, _react2.jsx)(_Tabs["default"], {
+    items: allTabs,
+    mode: "list"
+  }, function (item) {
+    return (0, _react2.jsx)(_Tab["default"], (0, _extends2["default"])({
+      key: item.name,
+      title: item.name
+    }, item), item.children);
+  });
+};
+
+exports.WithList = WithList;

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

@@ -14,6 +14,8 @@ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-st
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -52,6 +54,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
@@ -79,6 +96,20 @@ var getComponent = function getComponent() {
   }))));
 };
 
+var getComponentWithDynamicItems = function getComponentWithDynamicItems(props) {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_react2.CacheProvider, {
+    value: emotionCache
+  }, (0, _react2.jsx)(_Tabs["default"], props, function (_ref3) {
+    var name = _ref3.name,
+        children = _ref3.children,
+        tabProps = (0, _objectWithoutProperties2["default"])(_ref3, ["name", "children"]);
+    return (0, _react2.jsx)(_Tab["default"], (0, _extends2["default"])({
+      key: name,
+      title: name
+    }, tabProps), children);
+  })));
+};
+
 var getTabs = function getTabs() {
   var tabs = _testWrapper.screen.queryAllByRole('tab');
 
@@ -96,8 +127,8 @@ var getTabs = function getTabs() {
 };
 
 var testTabPanel = function testTabPanel(expectedTabIndex) {
-  return (0, _forEach["default"])(defaultTabs).call(defaultTabs, function (_ref3, index) {
-    var children = _ref3.children;
+  return (0, _forEach["default"])(defaultTabs).call(defaultTabs, function (_ref4, index) {
+    var children = _ref4.children;
     return index === expectedTabIndex ? expect(_testWrapper.screen.queryByText(children)).toBeInTheDocument() : expect(_testWrapper.screen.queryByText(children)).not.toBeInTheDocument();
   });
 };
@@ -163,7 +194,7 @@ test('interacting with tabs via click', function () {
   testSingleTab(tabs, tab0, 'toContainElement', [_testWrapper.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(),
@@ -185,6 +216,41 @@ test('interacting with tabs via focus -- horizontal', function () {
     code: 'ArrowRight'
   });
 
+  testSingleTab(tabs, tab1, 'toHaveFocus');
+  testTabPanel(0);
+
+  _testWrapper.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;
+
+  (0, _forEach["default"])(tabs).call(tabs, function (tab) {
+    return expect(tab).not.toHaveFocus();
+  });
+
+  _userEvent["default"].tab();
+
+  testSingleTab(tabs, tab0, 'toHaveFocus');
+  testTabPanel(0);
+
+  _testWrapper.fireEvent.keyDown(tab0, {
+    key: 'ArrowRight',
+    code: 'ArrowRight'
+  });
+
   testSingleTab(tabs, tab1, 'toHaveFocus');
   testTabPanel(1);
 
@@ -198,13 +264,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;
 
   (0, _forEach["default"])(tabs).call(tabs, function (tab) {
     return expect(tab).not.toHaveFocus();
@@ -236,9 +303,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 = _testWrapper.screen.queryByRole('presentation'); // Tabs cannot be DOM disabled so must check visuals
 
@@ -259,15 +326,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["default"].click(tab1);
@@ -296,11 +364,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();
@@ -338,9 +406,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 = _testWrapper.screen.getByRole('presentation'); // Expect the tab line to have a red background
 
@@ -369,9 +437,9 @@ 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 = _testWrapper.screen.getByTestId('icon'); // Expect the tab to have the given icon element
 
@@ -379,7 +447,7 @@ test('tab with icon', function () {
   testSingleTab(tabs, tab0, 'toContainElement', [icon]);
 });
 test('tooltip renders on tab\'s hover in `tooltip` mode', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-  var _getTabs9, tab0;
+  var _getTabs10, tab0;
 
   return _regenerator["default"].wrap(function _callee$(_context) {
     while (1) {
@@ -389,7 +457,7 @@ test('tooltip renders on tab\'s hover in `tooltip` mode', /*#__PURE__*/(0, _asyn
             mode: 'tooltip'
           });
           expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
-          _getTabs9 = getTabs(), tab0 = _getTabs9.tab0;
+          _getTabs10 = getTabs(), tab0 = _getTabs10.tab0;
 
           _testWrapper.fireEvent.mouseMove(tab0);
 
@@ -415,8 +483,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');
 
@@ -457,4 +525,87 @@ test('will render slots.afterTab if provided', function () {
     tabs: tabs
   });
   expect(_testWrapper.screen.getByText(testText)).toBeInTheDocument();
+});
+test('will render tab with list if provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+  var _getTabs12, menuBtn, menuItems, firstListItemContent;
+
+  return _regenerator["default"].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["default"].click(menuBtn);
+
+          expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
+          testTabPanel(0);
+          menuItems = _testWrapper.screen.queryAllByRole('menuitemradio');
+          expect(menuItems).toHaveLength(tabsWithList[1].list.length);
+          expect(menuItems[0]).not.toHaveFocus();
+
+          _userEvent["default"].click(menuItems[0]);
+
+          firstListItemContent = tabsWithList[1].list[0].children;
+          expect(_testWrapper.screen.queryByRole('tabpanel')).toHaveTextContent(firstListItemContent);
+          expect(_testWrapper.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;
+
+  (0, _forEach["default"])(tabs).call(tabs, function (tab) {
+    return expect(tab).not.toHaveFocus();
+  });
+
+  _userEvent["default"].tab();
+
+  testTabPanel(0);
+
+  _testWrapper.fireEvent.keyDown(tab0, {
+    key: 'ArrowRight',
+    code: 'ArrowRight'
+  });
+
+  expect(tab1).toHaveFocus();
+
+  _testWrapper.fireEvent.keyDown(tab1, {
+    key: 'Enter',
+    code: 'Enter'
+  });
+
+  expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
+  testTabPanel(0);
+
+  var menuItems = _testWrapper.screen.queryAllByRole('menuitemradio');
+
+  expect(menuItems).toHaveLength(tabsWithList[1].list.length);
+  expect(menuItems[0]).toHaveFocus();
+
+  _testWrapper.fireEvent.keyDown(menuItems[0], {
+    key: 'Enter',
+    code: 'Enter'
+  });
+
+  var firstListItemContent = tabsWithList[1].list[0].children;
+  expect(_testWrapper.screen.queryByRole('tabpanel')).toHaveTextContent(firstListItemContent);
+  expect(_testWrapper.screen.queryByRole('menu')).not.toBeInTheDocument();
 });

package/lib/cjs/styles/variants/buttons.js

@@ -660,6 +660,18 @@ var colorBlock = {
     borderColor: 'accent.20'
   }
 };
+
+var menuTab = _objectSpread(_objectSpread({}, quiet), {}, {
+  color: 'neutral.40',
+  alignItems: 'center',
+  '&.is-selected *, &.is-hovered *': {
+    color: 'active'
+  },
+  '& + *:not(div:first-of-type)': {
+    'ml': 'md'
+  }
+});
+
 var _default = {
   accordionHeader: accordionHeader,
   chipDeleteButton: chipDeleteButton,
@@ -702,6 +714,7 @@ var _default = {
   tooltipIconButton: tooltipIconButton,
   tooltipInline: tooltipInline,
   colorBlock: colorBlock,
+  menuTab: menuTab,
   multiselectToggle: multiselectToggle,
   neutralText: neutralText
 };

package/lib/cjs/styles/variants/codeView.js

@@ -12,7 +12,8 @@ var theme = {
     color: '#545454',
     background: 'none',
     lineHeight: 1.5,
-    tabSize: 4
+    tabSize: 4,
+    fontFamily: '"Roboto Mono", "Lucida Console", Courier, monospace'
   },
   styles: [{
     types: ['prolog', 'constant', 'builtin'],

package/lib/cjs/styles/variants/tabs.js

@@ -23,13 +23,17 @@ var tab = {
   },
   '&.is-selected.is-vertical': {
     bg: 'accent.95'
+  },
+  '& > svg': {
+    flexShrink: 0
   }
 };
 exports.tab = tab;
 var tabLine = {
   height: '2px',
   width: '100%',
-  bg: 'active'
+  bg: 'active',
+  flexShrink: 0
 };
 exports.tabLine = tabLine;
 var tabPanel = {

package/lib/cjs/styles/variants/text.js

@@ -50,11 +50,16 @@ var wordWrap = {
 var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
   fontWeight: 1,
-  mb: 6,
+  mb: 'sm',
+  lineHeight: '16px',
   color: 'neutral.40',
+  height: '100%',
   '.is-selected &, .is-hovered &': {
+    color: 'active'
+  },
+  '.is-selected &': {
     color: 'active',
-    mb: 5
+    mb: 8
   },
   '.is-disabled &': {
     color: 'neutral.80'

package/lib/components/CodeView/CodeView.js

@@ -105,7 +105,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   }
 
   return ___EmotionJSX(CopyText, {
-    mode: "nonClickableContent",
+    mode: "link",
     textToCopy: children,
     tooltipProps: {
       offset: 15

package/lib/components/CodeView/CodeView.test.js

@@ -35,8 +35,21 @@ var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontW
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(CodeView, _extends({}, defaultProps, props), textValue));
-}; // Need to be added to each test file to test accessibility using axe.
+};
 
+beforeEach(function () {
+  var mockClipboard = {
+    writeText: jest.fn()
+  };
+  global.navigator.clipboard = mockClipboard;
+  global.document.execCommand = jest.fn();
+  global.document.execCommand.mockReturnValue(true);
+});
+afterEach(function () {
+  jest.resetAllMocks();
+  global.navigator.clipboard = originalClipboard;
+  global.document.execCommand = originalExecCommand;
+}); // Need to be added to each test file to test accessibility using axe.
 
 axeTest(getComponent);
 test('renders component in the default state', function () {
@@ -45,25 +58,24 @@ test('renders component in the default state', function () {
   expect(container).toBeInstanceOf(HTMLDivElement);
   expect(container).toBeInTheDocument();
 });
-test('tooltip renders on hover', function () {
+test('copy button is hovered and renders tooltip via mouse', function () {
   getComponent();
-  var container = screen.getByTestId(testId);
-  fireEvent.mouseMove(container);
-  fireEvent.mouseEnter(container);
+  var copyBtn = screen.getByLabelText('copy');
+  expect(copyBtn).not.toHaveFocus();
+  userEvent.hover(copyBtn);
+  expect(copyBtn).toHaveClass('is-hovered');
   expect(screen.queryByRole('tooltip')).toBeInTheDocument();
   expect(screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
 });
-test('content and copy button are focused via keyboard', function () {
+test('copy button is focused and renders tooltip via keyboard', function () {
   getComponent();
-  var container = screen.getByTestId(testId);
-  expect(container).not.toHaveFocus();
-  userEvent.tab();
-  expect(container).toHaveFocus();
   var copyBtn = screen.getByLabelText('copy');
   expect(copyBtn).not.toHaveFocus();
   userEvent.tab();
   expect(copyBtn).toHaveFocus();
   expect(copyBtn).toHaveClass('is-focused');
+  expect(screen.queryByRole('tooltip')).toBeInTheDocument();
+  expect(screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
 });
 test('doesn\'t render copy button and tooltip with prop hasNoCopyButton', function () {
   getComponent({
@@ -86,19 +98,6 @@ test('renders line numbers with prop hasLineNumbers', function () {
   expect(screen.queryByText('1')).toBeInTheDocument();
   expect(screen.queryByText(linesLength)).toBeInTheDocument();
 });
-beforeEach(function () {
-  var mockClipboard = {
-    writeText: jest.fn()
-  };
-  global.navigator.clipboard = mockClipboard;
-  global.document.execCommand = jest.fn();
-  global.document.execCommand.mockReturnValue(true);
-});
-afterEach(function () {
-  jest.resetAllMocks();
-  global.navigator.clipboard = originalClipboard;
-  global.document.execCommand = originalExecCommand;
-});
 test('click on copy button copies data to the clipboard', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
   var button;
   return _regeneratorRuntime.wrap(function _callee2$(_context2) {

package/lib/components/CopyText/CopyText.js

@@ -106,7 +106,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
       ref: ref,
       isRow: true,
       variant: "boxes.copy"
-    }, others), content, ___EmotionJSX(TooltipWrapper, {
+    }, wrapperProps, others), content, ___EmotionJSX(TooltipWrapper, {
       isOpen: isTooltipOpen,
       tooltip: tooltip
     }, ___EmotionJSX(CopyButton, _extends({

package/lib/components/PopoverMenu/PopoverMenu.js

@@ -49,7 +49,8 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
       isDefaultOpen = props.isDefaultOpen,
       isNotFlippable = props.isNotFlippable,
       isNotClosedOnSelect = props.isNotClosedOnSelect,
-      hasNoArrow = props.hasNoArrow;
+      hasNoArrow = props.hasNoArrow,
+      isContainFocus = props.isContainFocus;
 
   var _React$Children$toArr = React.Children.toArray(children),
       _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
@@ -90,7 +91,8 @@ var PopoverMenu = /*#__PURE__*/forwardRef(function (props, ref) {
   });
 
   var contents = ___EmotionJSX(FocusScope, {
-    restoreFocus: true
+    restoreFocus: true,
+    contain: isContainFocus
   }, ___EmotionJSX(DismissButton, {
     onDismiss: state.close
   }), menu, ___EmotionJSX(DismissButton, {
@@ -136,6 +138,9 @@ PopoverMenu.propTypes = {
   /** Whether the PopoverMenu hides the arrow. */
   hasNoArrow: PropTypes.bool,
 
+  /** Whether the PopoverMenu contains focus inside the scope. */
+  isContainFocus: PropTypes.bool,
+
   /**
    * Handler that is called when the overlay's open state changes.
    *

package/lib/components/Tab/Tab.js

@@ -7,13 +7,11 @@ import { useFocusRing } from '@react-aria/focus';
 import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { Item as Tab } from '@react-stately/collections';
-import Box from '../Box';
 import { TabsContext } from '../Tabs';
-import Text from '../Text';
 import { useStatusClasses, usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
-import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
-import Button from '../Button';
+import TabPicker from '../TabPicker';
+import { Box, Text, TooltipTrigger, Tooltip, Button } from '../..';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
@@ -84,6 +82,16 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "tabLabel"
   }, tabLabelProps), rendered), isSelected && !isDisabled && ___EmotionJSX(TabLine, tabLineProps)), slots === null || slots === void 0 ? void 0 : slots.afterTab);
 
+  if (mode === 'list' && itemProps.list) {
+    return ___EmotionJSX(TabPicker, _extends({
+      ref: tabRef,
+      className: classNames,
+      items: itemProps.list,
+      state: state,
+      item: item
+    }, mergeProps(focusProps, hoverProps, tabProps), otherItemProps));
+  }
+
   if (mode === 'tooltip') {
     return ___EmotionJSX(React.Fragment, null, separator, ___EmotionJSX(TooltipTrigger, _extends({}, tooltipTriggerProps, {
       isOpen: isHovered || isFocusVisible
@@ -103,7 +111,7 @@ CollectionTab.propTypes = {
     rendered: PropTypes.node,
     tabLineProps: PropTypes.shape({})
   }),
-  mode: PropTypes.oneOf(['default', 'tooltip']),
+  mode: PropTypes.oneOf(['default', 'tooltip', 'list']),
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   tooltipTriggerProps: PropTypes.shape({}),
   slots: PropTypes.shape({
@@ -111,13 +119,11 @@ CollectionTab.propTypes = {
     afterTab: PropTypes.node
   })
 };
-
-var TabLine = function TabLine(props) {
+export var TabLine = function TabLine(props) {
   return ___EmotionJSX(Box, _extends({
     role: "presentation",
     variant: "tabLine"
   }, props));
 }; // Export Item as default Tab for simplicity, convert to CollectionTab within Tabs component
 
-
 export default Tab;