@pingux/astro 1.5.0-alpha.0 → 1.5.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.5.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.4.1...@pingux/astro@1.5.0) (2022-03-22)
+
+
+### Bug Fixes
+
+* [UIP-5282] Code View discrepancies ([9e483b1](https://gitlab.corp.pingidentity.com/ux/pingux/commit/9e483b1078cc47a21c40fce1d256230dc6d57d65))
+
+
+### Features
+
+* [UIP-5162] Add MultiselectFilter component ([b624104](https://gitlab.corp.pingidentity.com/ux/pingux/commit/b624104fe17352d7975498378bc605562698916a))
+* [UIP-5163] Tab with Popover menu ([2334558](https://gitlab.corp.pingidentity.com/ux/pingux/commit/23345584dfd0bcc40700cb9925fa908002388de2))
+
+
+
+
+
 ## [1.4.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.4.0...@pingux/astro@1.4.1) (2022-03-18)
 
 **Note:** Version bump only for package @pingux/astro

package/lib/cjs/components/CodeView/CodeView.js

@@ -140,7 +140,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }
 
   return (0, _react2.jsx)(_.CopyText, {
-    mode: "nonClickableContent",
+    mode: "link",
     textToCopy: children,
     tooltipProps: {
       offset: 15

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

@@ -57,8 +57,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 (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, 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.
 
 (0, _testAxe["default"])(getComponent);
 test('renders component in the default state', function () {
@@ -69,29 +82,22 @@ 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 = _testWrapper.screen.getByTestId(testId);
+  var copyBtn = _testWrapper.screen.getByLabelText('copy');
 
-  _testWrapper.fireEvent.mouseMove(container);
+  expect(copyBtn).not.toHaveFocus();
 
-  _testWrapper.fireEvent.mouseEnter(container);
+  _userEvent["default"].hover(copyBtn);
 
+  expect(copyBtn).toHaveClass('is-hovered');
   expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
   expect(_testWrapper.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 = _testWrapper.screen.getByTestId(testId);
-
-  expect(container).not.toHaveFocus();
-
-  _userEvent["default"].tab();
-
-  expect(container).toHaveFocus();
-
   var copyBtn = _testWrapper.screen.getByLabelText('copy');
 
   expect(copyBtn).not.toHaveFocus();
@@ -100,6 +106,8 @@ test('content and copy button are focused via keyboard', function () {
 
   expect(copyBtn).toHaveFocus();
   expect(copyBtn).toHaveClass('is-focused');
+  expect(_testWrapper.screen.queryByRole('tooltip')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('tooltip')).toHaveTextContent('Copy to clipboard');
 });
 test('doesn\'t render copy button and tooltip with prop hasNoCopyButton', function () {
   getComponent({
@@ -126,19 +134,6 @@ test('renders line numbers with prop hasLineNumbers', function () {
   expect(_testWrapper.screen.queryByText('1')).toBeInTheDocument();
   expect(_testWrapper.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__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
   var button;
   return _regenerator["default"].wrap(function _callee2$(_context2) {

package/lib/cjs/components/CopyText/CopyText.js

@@ -129,7 +129,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ref: ref,
       isRow: true,
       variant: "boxes.copy"
-    }, others), content, (0, _react2.jsx)(TooltipWrapper, {
+    }, wrapperProps, others), content, (0, _react2.jsx)(TooltipWrapper, {
       isOpen: isTooltipOpen,
       tooltip: tooltip
     }, (0, _react2.jsx)(_CopyButton["default"], (0, _extends2["default"])({

package/lib/cjs/components/PopoverMenu/PopoverMenu.js

@@ -83,7 +83,8 @@ var PopoverMenu = /*#__PURE__*/(0, _react.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["default"].Children.toArray(children),
       _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
@@ -124,7 +125,8 @@ var PopoverMenu = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
 
   var contents = (0, _react2.jsx)(_focus.FocusScope, {
-    restoreFocus: true
+    restoreFocus: true,
+    contain: isContainFocus
   }, (0, _react2.jsx)(_overlays.DismissButton, {
     onDismiss: state.close
   }), menu, (0, _react2.jsx)(_overlays.DismissButton, {
@@ -169,6 +171,9 @@ PopoverMenu.propTypes = {
   /** Whether the PopoverMenu hides the arrow. */
   hasNoArrow: _propTypes["default"].bool,
 
+  /** Whether the PopoverMenu contains focus inside the scope. */
+  isContainFocus: _propTypes["default"].bool,
+
   /**
    * Handler that is called when the overlay's open state changes.
    *

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

@@ -10,7 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.CollectionTab = void 0;
+exports["default"] = exports.TabLine = exports.CollectionTab = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -30,19 +30,15 @@ var _utils = require("@react-aria/utils");
 
 var _collections = require("@react-stately/collections");
 
-var _Box = _interopRequireDefault(require("../Box"));
-
 var _Tabs = require("../Tabs");
 
-var _Text = _interopRequireDefault(require("../Text"));
-
 var _hooks = require("../../hooks");
 
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 
-var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
+var _TabPicker = _interopRequireDefault(require("../TabPicker"));
 
-var _Button = _interopRequireDefault(require("../Button"));
+var _ = require("../..");
 
 var _react2 = require("@emotion/react");
 
@@ -101,24 +97,34 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, state, tabRef),
       tabProps = _useTab.tabProps;
 
-  var tab = (0, _react2.jsx)(_Box["default"], {
+  var tab = (0, _react2.jsx)(_.Box, {
     isRow: true
-  }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     className: classNames,
     variant: "tab"
   }, (0, _utils.mergeProps)(focusProps, hoverProps, tabProps), otherItemProps, {
     ref: tabRef,
     title: titleAttr || undefined
-  }), icon, (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
+  }), icon, (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
     variant: "tabLabel"
   }, tabLabelProps), rendered), isSelected && !isDisabled && (0, _react2.jsx)(TabLine, tabLineProps)), slots === null || slots === void 0 ? void 0 : slots.afterTab);
 
+  if (mode === 'list' && itemProps.list) {
+    return (0, _react2.jsx)(_TabPicker["default"], (0, _extends2["default"])({
+      ref: tabRef,
+      className: classNames,
+      items: itemProps.list,
+      state: state,
+      item: item
+    }, (0, _utils.mergeProps)(focusProps, hoverProps, tabProps), otherItemProps));
+  }
+
   if (mode === 'tooltip') {
-    return (0, _react2.jsx)(_react["default"].Fragment, null, separator, (0, _react2.jsx)(_TooltipTrigger["default"], (0, _extends2["default"])({}, tooltipTriggerProps, {
+    return (0, _react2.jsx)(_react["default"].Fragment, null, separator, (0, _react2.jsx)(_.TooltipTrigger, (0, _extends2["default"])({}, tooltipTriggerProps, {
       isOpen: isHovered || isFocusVisible
-    }), (0, _react2.jsx)(_Button["default"], {
+    }), (0, _react2.jsx)(_.Button, {
       variant: "quiet"
-    }, tab), (0, _react2.jsx)(_TooltipTrigger.Tooltip, null, itemProps.textValue || itemProps.title)));
+    }, tab), (0, _react2.jsx)(_.Tooltip, null, itemProps.textValue || itemProps.title)));
   }
 
   return tab;
@@ -133,7 +139,7 @@ CollectionTab.propTypes = {
     rendered: _propTypes["default"].node,
     tabLineProps: _propTypes["default"].shape({})
   }),
-  mode: _propTypes["default"].oneOf(['default', 'tooltip']),
+  mode: _propTypes["default"].oneOf(['default', 'tooltip', 'list']),
   orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),
   tooltipTriggerProps: _propTypes["default"].shape({}),
   slots: _propTypes["default"].shape({
@@ -143,12 +149,13 @@ CollectionTab.propTypes = {
 };
 
 var TabLine = function TabLine(props) {
-  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+  return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     role: "presentation",
     variant: "tabLine"
   }, props));
 }; // Export Item as default Tab for simplicity, convert to CollectionTab within Tabs component
 
 
+exports.TabLine = TabLine;
 var _default = _collections.Item;
 exports["default"] = _default;

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

@@ -0,0 +1,239 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _collections = require("@react-stately/collections");
+
+var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
+
+var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
+
+var _hooks = require("../../hooks");
+
+var _ = require("../..");
+
+var _Tab = require("../Tab");
+
+var _react2 = require("@emotion/react");
+
+/* istanbul ignore next */
+var TabPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+      items = _ref.items,
+      state = _ref.state,
+      item = _ref.item,
+      others = (0, _objectWithoutProperties2["default"])(_ref, ["className", "items", "state", "item"]);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(state.selectedKey),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedItem = _useState4[0],
+      setSelectedItem = _useState4[1];
+
+  var selectionManager = state.selectionManager;
+
+  var _useState5 = (0, _react.useState)(selectionManager.focusedKey),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      focusedItem = _useState6[0],
+      setFocusedItem = _useState6[1];
+
+  var isTabFocused = selectionManager.focusedKey === item.key;
+  var isTabSelected = state.selectedKey === item.key;
+  var isListItemFocused = (0, _some["default"])(items).call(items, function (el) {
+    return el.key === selectionManager.focusedKey;
+  });
+  var isListItemSelected = (0, _some["default"])(items).call(items, function (el) {
+    return el.key === state.selectedKey;
+  });
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var _context, _tabs$prevIndex, _tabs$nextIndex;
+
+    var tabs = (0, _filter["default"])(_context = (0, _from["default"])(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 = (0, _findIndex["default"])(tabs).call(tabs, function (tab) {
+      return tab.key === item.key;
+    }) - 1;
+    var nextIndex = (0, _findIndex["default"])(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 = (0, _hooks.useStatusClasses)(className, {
+    isSelected: isListItemSelected
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  var menuRef = (0, _react.useRef)();
+
+  var handleSelectedItem = function handleSelectedItem(currentItem) {
+    state.setSelectedKey(currentItem);
+    setFocusedItem(currentItem);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (selectedItem) {
+      handleSelectedItem(selectedItem);
+    }
+  }, [selectedItem]);
+  (0, _react.useEffect)(function () {
+    if (focusedItem) {
+      selectionManager.setFocusedKey(focusedItem);
+    }
+  }, [focusedItem]);
+  (0, _react.useEffect)(function () {
+    if (isOpen && (isTabFocused || isListItemSelected) && menuRef.current) {
+      if (focusedItem) {
+        var _context2;
+
+        (0, _find["default"])(_context2 = (0, _from["default"])(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]);
+  (0, _react.useEffect)(function () {
+    if (isOpen && isListItemFocused) {
+      setFocusedItem(selectionManager.focusedKey);
+    } else if (!isOpen && isListItemFocused) {
+      selectionManager.setFocusedKey(item.key);
+    }
+  }, [selectionManager.focusedKey]);
+  (0, _react.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 (0, _react2.jsx)(_.PopoverMenu, {
+    onOpenChange: setIsOpen,
+    isOpen: isOpen,
+    isContainFocus: true
+  }, (0, _react2.jsx)(_.Button, {
+    className: classNames,
+    variant: "menuTab",
+    onKeyDown: handleKeyNavigation
+  }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
+    className: classNames,
+    variant: "tab",
+    ref: ref
+  }, tabProps), (0, _react2.jsx)(_.Text, {
+    variant: "tabLabel"
+  }, item.props.name), selectedItem && (0, _react2.jsx)(_Tab.TabLine, null)), (0, _react2.jsx)(_.Icon, {
+    icon: isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
+  })), (0, _react2.jsx)(_.Menu, {
+    onAction: setSelectedItem,
+    selectionMode: "single",
+    selectedKeys: [selectionManager.focusedKey],
+    ref: menuRef
+  }, (0, _map["default"])(items).call(items, function (tab) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: tab.key
+    }, tab.name);
+  })));
+});
+TabPicker.propTypes = {
+  item: _propTypes["default"].shape({
+    key: _propTypes["default"].string,
+    props: _propTypes["default"].shape({
+      name: _propTypes["default"].string
+    })
+  }),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    key: _propTypes["default"].string
+  })),
+  state: _propTypes["default"].shape({
+    collection: _propTypes["default"].shape({}),
+    selectedKey: _propTypes["default"].string,
+    setSelectedKey: _propTypes["default"]["function"],
+    selectionManager: _propTypes["default"].shape({
+      focusedKey: _propTypes["default"].string,
+      setFocusedKey: _propTypes["default"]["function"]
+    })
+  })
+};
+var _default = TabPicker;
+exports["default"] = _default;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _TabPicker["default"];
+  }
+});
+
+var _TabPicker = _interopRequireDefault(require("./TabPicker"));

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

@@ -18,12 +18,8 @@ var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/c
 
 var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
 
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
 var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
 
-var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
 var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
 
 var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
@@ -32,10 +28,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 
 var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
+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 _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -58,22 +60,23 @@ var _react2 = require("@emotion/react");
 
 function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(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; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(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; (0, _forEach["default"])(_context6 = ownKeys(Object(source), true)).call(_context6, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context7; (0, _forEach["default"])(_context7 = ownKeys(Object(source))).call(_context7, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
 
 var TabsContext = /*#__PURE__*/_react["default"].createContext({});
 
 exports.TabsContext = TabsContext;
 var Tabs = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, ["children", "isDisabled", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"]);
+      others = (0, _objectWithoutProperties2["default"])(props, ["children", "isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"]);
   var tabListRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
@@ -87,8 +90,30 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return tabPanelRef.current;
   });
+  var allItems = [];
+
+  if (mode === 'list') {
+    (0, _forEach["default"])(items).call(items, function (item) {
+      var _context;
+
+      allItems = (0, _concat["default"])(_context = []).call(_context, allItems, [item]);
+
+      if (item.list) {
+        var _context2, _context3;
+
+        var list = (0, _map["default"])(_context2 = item.list).call(_context2, function (el) {
+          return _objectSpread(_objectSpread({}, el), {}, {
+            isListItem: true
+          });
+        });
+        allItems = (0, _concat["default"])(_context3 = []).call(_context3, allItems, list);
+      }
+    });
+  }
+
   var state = (0, _tabs2.useTabListState)(_objectSpread(_objectSpread({}, props), {}, {
-    onSelectionChange: onSelectionChange
+    onSelectionChange: onSelectionChange,
+    items: mode === 'list' ? allItems : items
   }));
 
   var _useTabList = (0, _tabs.useTabList)(props, state, tabListRef),
@@ -106,7 +131,11 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isRow: orientation === _orientation["default"].HORIZONTAL
   }, tabListProps, raTabListProps, {
     ref: tabListRef
-  }), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
+  }), (0, _map["default"])(_context4 = (0, _filter["default"])(_context5 = (0, _from["default"])(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 (0, _react2.jsx)(_Tab.CollectionTab, {
@@ -136,7 +165,7 @@ Tabs.propTypes = {
   orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),
 
   /** Determines the behavior model for the tabs. */
-  mode: _propTypes["default"].oneOf(['default', 'tooltip']),
+  mode: _propTypes["default"].oneOf(['default', 'tooltip', 'list']),
 
   /**
    * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
@@ -154,12 +183,16 @@ Tabs.propTypes = {
   tabListProps: _propTypes["default"].shape({}),
 
   /** Props object that is spread directly into all of the tab panel wrapper elements. */
-  tabPanelProps: _propTypes["default"].shape({})
+  tabPanelProps: _propTypes["default"].shape({}),
+
+  /** Whether tabs are activated automatically on focus or manually¸ */
+  keyboardActivation: _propTypes["default"].oneOf(['automatic', 'manual'])
 };
 Tabs.defaultProps = {
   isDisabled: false,
   orientation: 'horizontal',
-  mode: 'default'
+  mode: 'default',
+  keyboardActivation: 'manual'
 };
 Tabs.displayName = 'Tabs';
 var _default = Tabs;