@pingux/astro 1.4.1 → 1.5.0-alpha.1

package/lib/cjs/components/MultiselectFilterItem/MultiselectFilterItem.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = require("../../index");
+
+var _react2 = require("@emotion/react");
+
+var MultiselectFilterItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var text = props.text,
+      icon = props.icon;
+  return (0, _react2.jsx)(_index.Box, {
+    "data-testid": "multiselect-filter-item",
+    isRow: true,
+    justifyContent: "space-between",
+    ref: ref
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "multiselectFilterItem"
+  }, text), icon && (0, _react2.jsx)(_index.Icon, {
+    "data-testid": "multiselect-filter-data-icon",
+    icon: icon,
+    mr: "md",
+    color: "neutral.10",
+    size: 13,
+    flexShrink: 0
+  }));
+});
+MultiselectFilterItem.propTypes = {
+  /**
+     * Display text.
+     */
+  text: _propTypes["default"].string,
+
+  /**
+     * List icon.
+     */
+  icon: _propTypes["default"].shape({})
+};
+MultiselectFilterItem.displayName = 'MultiselectFilterItem';
+var _default = MultiselectFilterItem;
+exports["default"] = _default;

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _FilterIcon = _interopRequireDefault(require("mdi-react/FilterIcon"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _MultiselectFilterItem = _interopRequireDefault(require("./MultiselectFilterItem"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'multiselect-filter-item';
+var iconId = 'multiselect-filter-data-icon';
+var defaultProps = {
+  text: 'Item name'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_MultiselectFilterItem["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+afterEach(function () {
+  jest.restoreAllMocks();
+}); // Need to be added to each test file to test accessibility using axe.
+
+(0, _testAxe["default"])(getComponent);
+test('default multiselectFilter', function () {
+  getComponent();
+
+  var multiselectFilterItem = _testWrapper.screen.getByTestId(testId);
+
+  var icon = _testWrapper.screen.queryByTestId(iconId);
+
+  expect(icon).not.toBeInTheDocument();
+  expect(multiselectFilterItem).toBeInTheDocument();
+});
+test('icon displays when icon prop is present', function () {
+  getComponent({
+    icon: _FilterIcon["default"]
+  });
+
+  var icon = _testWrapper.screen.getByTestId(iconId);
+
+  expect(icon).toBeInTheDocument();
+});

package/lib/cjs/components/MultiselectFilterItem/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 _MultiselectFilterItem["default"];
+  }
+});
+
+var _MultiselectFilterItem = _interopRequireDefault(require("./MultiselectFilterItem"));

package/lib/cjs/components/MultiselectListContainer/MultiselectBadge.js

@@ -0,0 +1,47 @@
+"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
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Chip = _interopRequireDefault(require("../Chip"));
+
+var _react2 = require("@emotion/react");
+
+/**
+ * The MultiselectBadge serves as a badge to display selected count.
+ */
+var MultiselectBadge = function MultiselectBadge(props) {
+  var selectedFilterCount = props.selectedFilterCount,
+      others = (0, _objectWithoutProperties2["default"])(props, ["selectedFilterCount"]);
+  return (0, _react2.jsx)(_Chip["default"], (0, _extends2["default"])({
+    as: "span",
+    bg: "neutral.90",
+    label: selectedFilterCount.toString(),
+    textColor: "neutral.30",
+    variant: "multiselectListContainer.multiselectListBadge",
+    isUppercase: true
+  }, others));
+};
+
+MultiselectBadge.propTypes = {
+  selectedFilterCount: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  margin: _propTypes["default"].string
+};
+MultiselectBadge.displayName = 'MultiselectBadge';
+var _default = MultiselectBadge;
+exports["default"] = _default;

package/lib/cjs/components/MultiselectListContainer/MultiselectBadge.test.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _MultiselectBadge = _interopRequireDefault(require("./MultiselectBadge"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'test-multiselectBadge';
+var defaultProps = {
+  'data-testid': testId,
+  selectedFilterCount: 9
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_MultiselectBadge["default"], (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+afterEach(function () {
+  jest.restoreAllMocks();
+}); // Need to be added to each test file to test accessibility using axe.
+
+(0, _testAxe["default"])(getComponent);
+test('default multiselectBadge', function () {
+  getComponent();
+
+  var multiselectBadge = _testWrapper.screen.getByTestId(testId);
+
+  expect(multiselectBadge).toBeInTheDocument();
+});
+test('custom classname can be passed', function () {
+  getComponent({
+    className: 'testing-class'
+  });
+
+  var multiselectBadge = _testWrapper.screen.getByTestId(testId);
+
+  expect(multiselectBadge).toHaveClass('testing-class');
+});

package/lib/cjs/components/MultiselectListContainer/MultiselectListContainer.js

@@ -0,0 +1,157 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+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"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
+
+var _ChevronLeftIcon = _interopRequireDefault(require("mdi-react/ChevronLeftIcon"));
+
+var _overlays = require("@react-stately/overlays");
+
+var _MultiselectBadge = _interopRequireDefault(require("./MultiselectBadge"));
+
+var _index = require("../../index");
+
+var _hooks = require("../../hooks");
+
+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 _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+/**
+ * The MultiselectListContainer serves as a wrapper around a list and its associated trigger,
+ * linking the list's open state with the trigger's press state and providing necessary context.
+ */
+var MultiselectListContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var selectedFilterCount = props.selectedFilterCount,
+      className = props.className,
+      children = props.children,
+      closeAriaLabel = props.closeAriaLabel,
+      isDefaultOpen = props.isDefaultOpen,
+      isOpen = props.isOpen,
+      onOpenChange = props.onOpenChange,
+      openAriaLabel = props.openAriaLabel,
+      others = (0, _objectWithoutProperties2["default"])(props, ["selectedFilterCount", "className", "children", "closeAriaLabel", "isDefaultOpen", "isOpen", "onOpenChange", "openAriaLabel"]);
+
+  var triggerRef = _react["default"].useRef();
+
+  var state = (0, _overlays.useOverlayTriggerState)({
+    defaultOpen: isDefaultOpen,
+    isOpen: isOpen,
+    onOpenChange: onOpenChange
+  });
+  var close = state.close;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isOpen: state.isOpen
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  var handleButtonPress = function handleButtonPress() {
+    if (state.isOpen) {
+      close(state, triggerRef, close);
+    } else {
+      state.open();
+    }
+  };
+
+  var handleClose = function handleClose(e) {
+    if (e.key === 'Escape') {
+      close(state, triggerRef, close);
+    }
+  };
+
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+    className: classNames,
+    onKeyUp: handleClose,
+    ref: ref,
+    variant: "multiselectListContainer.multiselectListContainer",
+    isRow: true
+  }, others), (0, _react2.jsx)(_index.IconButton, {
+    isRow: true,
+    "aria-label": state.isOpen ? closeAriaLabel : openAriaLabel,
+    "data-testid": "multiselect-list-button",
+    onPress: handleButtonPress,
+    ref: triggerRef,
+    variant: "multiselectToggle",
+    pr: "sm"
+  }, (0, _react2.jsx)(_index.Icon, {
+    color: "active",
+    icon: state.isOpen ? _ChevronRightIcon["default"] : _ChevronLeftIcon["default"],
+    role: "button",
+    size: "30px"
+  }), !state.isOpen && selectedFilterCount && (0, _react2.jsx)(_MultiselectBadge["default"], {
+    "data-testid": "multiselect-list-badge",
+    margin: "auto",
+    selectedFilterCount: selectedFilterCount
+  })), state.isOpen && _objectSpread({}, children));
+});
+MultiselectListContainer.propTypes = {
+  /** Amount of selected items indicator. */
+  selectedFilterCount: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+
+  /** Defines a string value that labels the trigger icon when menu is open. */
+  closeAriaLabel: _propTypes["default"].string,
+
+  /** Sets the default open state of the overlay. */
+  isDefaultOpen: _propTypes["default"].bool,
+
+  /** Whether the overlay is currently open. */
+  isOpen: _propTypes["default"].bool,
+
+  /**
+   * Method that is called when the open state of the menu changes.
+   * Returns the new open state and the action that caused the opening of the menu.
+   *
+   * `(isOpen: boolean, overlayTrigger: OverlayTriggerAction) => void`
+   */
+  onOpenChange: _propTypes["default"].func,
+
+  /** Defines a string value that labels the trigger icon when menu is closed. */
+  openAriaLabel: _propTypes["default"].string
+};
+MultiselectListContainer.defaultProps = {
+  openAriaLabel: 'Open filter menu?',
+  closeAriaLabel: 'Close filter menu?'
+};
+MultiselectListContainer.displayName = 'MultiselectListContainer';
+var _default = MultiselectListContainer;
+exports["default"] = _default;

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

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _MultiselectListContainer = _interopRequireDefault(require("./MultiselectListContainer"));
+
+var _react2 = require("@emotion/react");
+
+var testId = 'test-multiselectListContainer';
+var multiselectListBadgeId = 'multiselect-list-badge';
+var multiselectListButtonId = 'multiselect-list-button';
+var multiselectFilterId = 'multiselect-filter';
+var defaultProps = {
+  'data-testid': testId
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_MultiselectListContainer["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)("div", {
+    "data-testid": multiselectFilterId
+  })));
+};
+
+afterEach(function () {
+  jest.restoreAllMocks();
+}); // Need to be added to each test file to test accessibility using axe.
+
+(0, _testAxe["default"])(getComponent);
+test('default MultiselectListContainer', function () {
+  getComponent();
+
+  var multiselectListContainer = _testWrapper.screen.getByTestId(testId);
+
+  expect(multiselectListContainer).toBeInTheDocument();
+});
+test('custom classname can be passed', function () {
+  getComponent({
+    className: 'testing-class'
+  });
+
+  var multiselectListContainer = _testWrapper.screen.getByTestId(testId);
+
+  expect(multiselectListContainer).toHaveClass('testing-class');
+});
+test('shows badge when container is closed', function () {
+  getComponent({
+    selectedFilterCount: 9,
+    state: {
+      isOpen: false
+    }
+  });
+
+  var badge = _testWrapper.screen.getByTestId(multiselectListBadgeId);
+
+  expect(badge).toBeInTheDocument();
+});
+test('updates aria label when button is clicked', function () {
+  var state = {
+    isOpen: true
+  };
+  getComponent({
+    state: state
+  });
+
+  var button = _testWrapper.screen.getByTestId(multiselectListButtonId);
+
+  _userEvent["default"].click(button);
+
+  var multiSelect = _testWrapper.screen.queryByTestId(multiselectFilterId);
+
+  expect(button).toHaveAttribute('aria-label', 'Close filter menu?');
+  expect(multiSelect).toBeInTheDocument();
+
+  _userEvent["default"].click(button);
+
+  expect(button).toHaveAttribute('aria-label', 'Open filter menu?');
+  expect(multiSelect).not.toBeInTheDocument();
+});
+test('shows children when isOpen is true', function () {
+  getComponent({
+    isOpen: true
+  });
+
+  var multiselectFilter = _testWrapper.screen.getByTestId(multiselectFilterId);
+
+  expect(multiselectFilter).toBeInTheDocument();
+});
+test('should hide children when pressing the escape key', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.getByTestId(multiselectListButtonId);
+
+  _userEvent["default"].click(button);
+
+  var multiSelect = _testWrapper.screen.queryByTestId(multiselectFilterId);
+
+  expect(multiSelect).toBeInTheDocument();
+
+  _userEvent["default"].type(button, '{esc}');
+
+  expect(multiSelect).not.toBeInTheDocument();
+});

package/lib/cjs/components/MultiselectListContainer/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 _MultiselectListContainer["default"];
+  }
+});
+
+var _MultiselectListContainer = _interopRequireDefault(require("./MultiselectListContainer"));

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;