@pingux/astro 2.57.0-alpha.7 → 2.57.0-alpha.8

package/lib/cjs/components/Tab/Tab.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Item as Tab } from 'react-stately';
+import { TabProps } from '../../types';
+/**
+ * Tab control for dividing up closely-related content.
+ * Typically used as a child of the Tabs component.
+ */
+export declare const CollectionTab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement>>;
+export declare const TabLine: (props: any) => React.JSX.Element;
+export default Tab;

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

@@ -10,12 +10,10 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.TabLine = exports.CollectionTab = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
@@ -23,13 +21,13 @@ var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _TabPicker = _interopRequireDefault(require("../TabPicker"));
 var _Tabs = require("../Tabs");
 var _react2 = require("@emotion/react");
-var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr", "title"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * Tab control for dividing up closely-related content.
  * Typically used as a child of the Tabs component.
  */
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
     item = props.item,
@@ -41,17 +39,8 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var key = item.key,
     rendered = item.rendered,
     itemProps = item.props;
-  var icon = itemProps.icon,
-    tabDisabled = itemProps.isDisabled,
-    separator = itemProps.separator,
-    tabLabelProps = itemProps.tabLabelProps,
-    tabLineProps = itemProps.tabLineProps,
-    content = itemProps.content,
-    titleAttr = itemProps.titleAttr,
-    title = itemProps.title,
-    otherItemProps = (0, _objectWithoutProperties2["default"])(itemProps, _excluded);
   var state = (0, _react.useContext)(_Tabs.TabsContext);
-  var isDisabled = tabsDisabled || tabDisabled || state.disabledKeys.has(key);
+  var isDisabled = tabsDisabled || (itemProps === null || itemProps === void 0 ? void 0 : itemProps.isDisabled) || state.disabledKeys.has(key);
   var isSelected = state.selectedKey === key;
   var _useFocusRing = (0, _reactAria.useFocusRing)(),
     isFocusVisible = _useFocusRing.isFocusVisible,
@@ -68,12 +57,8 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isSelected: isSelected
     }),
     classNames = _useStatusClasses.classNames;
-  var tabRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return tabRef.current;
-  });
+  var tabRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var _useTab = (0, _reactAria.useTab)({
       key: key,
       isDisabled: isDisabled
@@ -84,58 +69,33 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     className: classNames,
     variant: "tab"
-  }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), (0, _pendoID.getPendoID)('Tab'), otherItemProps, {
-    ref: tabRef,
-    title: titleAttr || undefined
-  }), icon, (0, _react2.jsx)(_.Text, (0, _extends2["default"])({
+    // title={itemProps?.titleAttr || undefined}
+  }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), (0, _pendoID.getPendoID)('Tab'), {
+    // {...otherItemProps}
+    ref: tabRef
+  }, itemProps, {
+    role: "tab"
+  }), (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.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) {
+  }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps), rendered), isSelected && !isDisabled && (0, _react2.jsx)(TabLine, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLineProps))), slots === null || slots === void 0 ? void 0 : slots.afterTab);
+  if (mode === 'list' && itemProps !== null && itemProps !== void 0 && itemProps.list) {
     return (0, _react2.jsx)(_TabPicker["default"], (0, _extends2["default"])({
       ref: tabRef,
       className: classNames,
-      items: itemProps.list,
+      items: itemProps === null || itemProps === void 0 ? void 0 : itemProps.list,
       state: state,
       item: item
-    }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), otherItemProps));
+    }, (0, _reactAria.mergeProps)(focusProps, hoverProps, tabProps), itemProps));
   }
   if (mode === 'tooltip') {
-    return (0, _react2.jsx)(_react["default"].Fragment, null, separator, (0, _react2.jsx)(_.TooltipTrigger, (0, _extends2["default"])({}, tooltipTriggerProps, {
+    return (0, _react2.jsx)(_react["default"].Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.separator, (0, _react2.jsx)(_.TooltipTrigger, (0, _extends2["default"])({}, tooltipTriggerProps, {
       isOpen: isHovered || isFocusVisible
-    }), (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)("span", {
-      variant: "quiet"
-    }, tab)), (0, _react2.jsx)(_.Tooltip, null, itemProps.textValue || itemProps.title)));
+    }), (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)("span", null, tab)), (0, _react2.jsx)(_.Tooltip, null, (itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue) || (itemProps === null || itemProps === void 0 ? void 0 : itemProps.title))));
   }
   return tab;
 });
 exports.CollectionTab = CollectionTab;
 CollectionTab.displayName = 'CollectionTab';
-CollectionTab.propTypes = {
-  isDisabled: _propTypes["default"].bool,
-  item: _propTypes["default"].shape({
-    key: _propTypes["default"].string,
-    props: _propTypes["default"].shape({
-      icon: _propTypes["default"].shape({}),
-      isDisabled: _propTypes["default"].bool,
-      textValue: _propTypes["default"].string,
-      tabLineProps: _propTypes["default"].shape({}),
-      tabLabelProps: _propTypes["default"].shape({}),
-      content: _propTypes["default"].shape({}),
-      titleAttr: _propTypes["default"].string,
-      title: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string, _propTypes["default"].object]),
-      separator: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].bool]),
-      list: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
-    }),
-    rendered: _propTypes["default"].node
-  }),
-  mode: _propTypes["default"].oneOf(['default', 'tooltip', 'list']),
-  orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),
-  tooltipTriggerProps: _propTypes["default"].shape({}),
-  slots: _propTypes["default"].shape({
-    beforeTab: _propTypes["default"].node,
-    afterTab: _propTypes["default"].node
-  })
-};
 var TabLine = function TabLine(props) {
   return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     role: "presentation",

package/lib/cjs/components/Tab/index.d.ts

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

package/lib/cjs/components/Tabs/Tabs.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TabsProps } from '../../types';
+export declare const TabsContext: React.Context<{}>;
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLElement>>;
+export default Tabs;

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

@@ -26,14 +26,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-c
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _orientation = _interopRequireDefault(require("../../utils/devUtils/constants/orientation"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _Tab = require("../Tab");
 var _react2 = require("@emotion/react");
 var _excluded = ["state"],
-  _excluded2 = ["children", "isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"];
+  _excluded2 = ["isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -43,23 +42,19 @@ exports.TabsContext = TabsContext;
 var TabPanel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var state = _ref.state,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var tabPanelRef = (0, _react.useRef)();
   var children = props.children,
     tabPanelProps = props.tabPanelProps;
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return tabPanelRef.current;
-  });
-  var _useTabPanel = (0, _reactAria.useTabPanel)(props, state, tabPanelRef),
-    raTabPanelProps = _useTabPanel.tabPanelProps;
+  var tabPanelRef = (0, _hooks.useLocalOrForwardRef)(ref);
+  var _ref2 = (0, _reactAria.useTabPanel)(props, state, tabPanelRef),
+    raTabPanelProps = _ref2.tabPanelProps;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, tabPanelProps, raTabPanelProps, {
-    ref: tabPanelRef
+    ref: tabPanelRef,
+    role: "tabpanel"
   }), children);
 });
 var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context4, _context5, _state$selectedItem, _state$selectedItem2, _state$selectedItem3;
-  var children = props.children,
-    isDisabled = props.isDisabled,
+  var isDisabled = props.isDisabled,
     items = props.items,
     onSelectionChange = props.onSelectionChange,
     orientation = props.orientation,
@@ -67,14 +62,10 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabListProps = props.tabListProps,
     tabPanelProps = props.tabPanelProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
-  var tabListRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  (0, _react.useImperativeHandle)(ref, function () {
-    return tabListRef.current;
-  });
+  var tabListRef = (0, _hooks.useLocalOrForwardRef)(ref);
   var allItems = [];
-  if (mode === 'list') {
+  if (mode === 'list' && items) {
     (0, _forEach["default"])(items).call(items, function (item) {
       var _context;
       allItems = (0, _concat["default"])(_context = []).call(_context, allItems, [item]);
@@ -94,7 +85,8 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     items: mode === 'list' ? allItems : items
   }));
   var _useTabList = (0, _reactAria.useTabList)(props, state, tabListRef),
-    raTabListProps = _useTabList.tabListProps;
+    raTabListProps = _useTabList.tabListProps; //= useTabList(props, state, tabListRef);
+
   return (0, _react2.jsx)(TabsContext.Provider, {
     value: state
   }, (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
@@ -102,19 +94,20 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     gap: "25px",
     isRow: orientation === _orientation["default"].HORIZONTAL
   }, tabListProps, raTabListProps, {
-    ref: tabListRef
+    ref: tabListRef,
+    role: "tablist"
   }), (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 && (_item$value = item.value) !== null && _item$value !== void 0 && _item$value.isListItem);
-  })).call(_context4, function (item) {
     var _item$props;
+    return !(item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.isListItem);
+  })).call(_context4, function (item) {
+    var _item$props2;
     return (0, _react2.jsx)(_Tab.CollectionTab, {
       key: item.key,
       item: item,
       isDisabled: isDisabled,
       orientation: orientation,
       mode: mode,
-      slots: item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.slots
+      slots: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.slots
     });
   })), (0, _react2.jsx)(TabPanel, {
     key: (_state$selectedItem = state.selectedItem) === null || _state$selectedItem === void 0 ? void 0 : _state$selectedItem.key,
@@ -122,43 +115,12 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabPanelProps: tabPanelProps
   }, ((_state$selectedItem2 = state.selectedItem) === null || _state$selectedItem2 === void 0 ? void 0 : _state$selectedItem2.props.children) || ((_state$selectedItem3 = state.selectedItem) === null || _state$selectedItem3 === void 0 ? void 0 : _state$selectedItem3.props.content))));
 });
-Tabs.propTypes = {
-  /** The default tab key to be selected. (uncontrolled) */
-  defaultSelectedKey: _propTypes["default"].string,
-  /** Array of keys to disable within the tab list. */
-  disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  /** The tab key that is currently selected. (controlled) */
-  selectedKey: _propTypes["default"].string,
-  /** Determines the arrangement of the tablist. */
-  orientation: _propTypes["default"].oneOf(['horizontal', 'vertical']),
-  /** Determines the behavior model for the tabs. */
-  mode: _propTypes["default"].oneOf(['default', 'tooltip', 'list']),
-  /**
-   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
-   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
-  */
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
-  /** Whether the entire tablist is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Handler that is called when the selected tab has changed. */
-  onSelectionChange: _propTypes["default"].func,
-  /** A props object that is subsequently spread into the rendered tablist. */
-  tabListProps: _propTypes["default"].shape({}),
-  /** Props object that is spread directly into all of the tab panel wrapper elements. */
-  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',
   keyboardActivation: 'manual'
 };
-TabPanel.propTypes = {
-  state: _propTypes["default"].shape({}),
-  tabPanelProps: _propTypes["default"].shape({})
-};
 Tabs.displayName = 'Tabs';
 var _default = Tabs;
 exports["default"] = _default;

package/lib/cjs/components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryFn } from '@storybook/react';
+import { TabsProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Uncontrolled: StoryFn<TabsProps>;
+export declare const Controlled: StoryFn;
+export declare const WithTooltips: StoryFn;
+export declare const Centered: StoryFn;
+export declare const DisabledSingleTab: StoryFn;
+export declare const DisabledAllTabs: StoryFn;
+export declare const CustomTabLine: StoryFn;
+export declare const TabPanelProps: StoryFn;
+export declare const ContentSlots: StoryFn;
+export declare const WithList: StoryFn;

package/lib/cjs/components/Tabs/Tabs.style.d.ts

@@ -0,0 +1,52 @@
+export declare const tab: {
+    pt: number;
+    cursor: string;
+    alignItems: string;
+    display: string;
+    outline: string;
+    transform: string;
+    '&.is-focused': {
+        '& > span': {
+            boxShadow: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+    };
+    '&.is-disabled': {
+        cursor: string;
+    };
+    '&.is-selected.is-vertical': {
+        bg: string;
+    };
+    '& > svg': {
+        flexShrink: number;
+    };
+};
+export declare const tabLine: {
+    height: string;
+    width: string;
+    bg: string;
+    flexShrink: number;
+};
+export declare const tabPanel: {
+    outline: string;
+};
+export declare const tabs: {
+    borderBottomWidth: number;
+    borderBottomStyle: string;
+    borderBottomColor: string;
+    mb: string;
+};
+export declare const menuTab: {
+    color: string;
+    alignItems: string;
+    '&.is-selected *, &.is-hovered *': {
+        color: string;
+    };
+    '& + *:not(div:first-of-type)': {
+        ml: string;
+    };
+    all: string;
+    display: string;
+};

package/lib/cjs/components/Tabs/Tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -38,17 +38,21 @@ emotionCache.compat = true;
 var testId = 'testId';
 var defaultTabs = [{
   name: 'Tab 1',
-  children: 'Tab 1 body'
+  children: 'Tab 1 body',
+  props: {}
 }, {
   name: 'Tab 2',
-  children: 'Tab 2 body'
+  children: 'Tab 2 body',
+  props: {}
 }, {
   name: 'Tab 3',
-  children: 'Tab 3 body'
+  children: 'Tab 3 body',
+  props: {}
 }];
 var tabsWithList = [{
   name: 'Tab 1',
-  children: 'Tab 1 body'
+  children: 'Tab 1 body',
+  props: {}
 }, {
   name: 'Tab 2',
   list: [{
@@ -61,7 +65,8 @@ var tabsWithList = [{
     name: 'Tab 2 list',
     children: 'Tab 2 from list',
     role: 'menuitemradio'
-  }]
+  }],
+  props: {}
 }];
 var defaultProps = {
   'data-testid': testId,
@@ -78,8 +83,8 @@ var getComponent = function getComponent() {
     value: emotionCache
   }, (0, _react2.jsx)(_Tabs["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _map["default"])(tabs).call(tabs, function (_ref2) {
     var name = _ref2.name,
-      tabProps = _ref2.props,
-      children = _ref2.children;
+      children = _ref2.children,
+      tabProps = _ref2.props;
     return (0, _react2.jsx)(_Tab["default"], (0, _extends2["default"])({
       key: name,
       title: name
@@ -115,7 +120,10 @@ var getTabs = function getTabs() {
 var testTabPanel = function testTabPanel(expectedTabIndex) {
   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();
+    if (typeof children === 'string') {
+      return index === expectedTabIndex ? expect(_testWrapper.screen.queryByText(children)).toBeInTheDocument() : expect(_testWrapper.screen.queryByText(children)).not.toBeInTheDocument();
+    }
+    return null;
   });
 };
 var testSingleTab = function testSingleTab(tabs, tab, thisTest) {
@@ -265,9 +273,11 @@ test('disabled all tabs', function () {
 
   // Tabs cannot be DOM disabled so must check visuals
   (0, _forEach["default"])(defaultTabs).call(defaultTabs, function (tab) {
-    var tabText = _testWrapper.screen.getByText(tab.name);
-    var parentElement = tabText.parentElement;
-    expect(parentElement).toHaveClass('is-disabled');
+    if (tab.name) {
+      var tabText = _testWrapper.screen.getByText(tab.name);
+      var parentElement = tabText.parentElement;
+      expect(parentElement).toHaveClass('is-disabled');
+    }
   });
   expect(tabLine).not.toBeInTheDocument();
 
@@ -414,7 +424,7 @@ test('tabs without selected keys show null tab panel content', function () {
   getComponent({
     defaultSelectedKey: undefined
   });
-  expect(_testWrapper.screen.queryByRole('tabpanel')).not.toHaveTextContent();
+  expect(_testWrapper.screen.queryByRole('tabpanel')).not.toHaveTextContent('');
 });
 test('hover tab style', function () {
   getComponent();
@@ -469,17 +479,21 @@ test('will render tab with list if provided', /*#__PURE__*/(0, _asyncToGenerator
         });
         testTabPanel(0);
         _getTabs12 = getTabs(), menuBtn = _getTabs12.tab1.parentElement;
-        _userEvent["default"].click(menuBtn);
+        if (menuBtn) _userEvent["default"].click(menuBtn);
         expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
         testTabPanel(0);
         menuItems = _testWrapper.screen.queryAllByRole('menuitemradio');
-        expect(menuItems).toHaveLength(tabsWithList[1].list.length);
+        if (tabsWithList[1].list) {
+          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);
+        if (tabsWithList[1].list) {
+          firstListItemContent = tabsWithList[1].list[0].children;
+          expect(_testWrapper.screen.queryByRole('tabpanel')).toHaveTextContent(firstListItemContent);
+        }
         expect(_testWrapper.screen.queryByRole('menu')).not.toBeInTheDocument();
-      case 13:
+      case 12:
       case "end":
         return _context2.stop();
     }
@@ -511,13 +525,17 @@ test('tab list is accessible via keyboard', function () {
   expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
   testTabPanel(0);
   var menuItems = _testWrapper.screen.queryAllByRole('menuitemradio');
-  expect(menuItems).toHaveLength(tabsWithList[1].list.length);
+  if (tabsWithList[1].list) {
+    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);
+  if (tabsWithList[1].list) {
+    var firstListItemContent = tabsWithList[1].list[0].children;
+    expect(_testWrapper.screen.queryByRole('tabpanel')).toHaveTextContent(firstListItemContent);
+  }
   expect(_testWrapper.screen.queryByRole('menu')).not.toBeInTheDocument();
 });

package/lib/cjs/components/Tabs/index.d.ts

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

package/lib/cjs/types/index.d.ts

@@ -34,6 +34,8 @@ export * from './rockerButtonGroup';
 export * from './scrollBox';
 export * from './separator';
 export * from './shared';
+export * from './tab';
 export * from './table';
+export * from './tabs';
 export * from './text';
 export * from './tooltipTrigger';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -403,8 +403,19 @@ _forEachInstanceProperty(_context36 = _Object$keys(_shared)).call(_context36, fu
     }
   });
 });
+var _tab = require("./tab");
+_forEachInstanceProperty(_context37 = _Object$keys(_tab)).call(_context37, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tab[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _tab[key];
+    }
+  });
+});
 var _table = require("./table");
-_forEachInstanceProperty(_context37 = _Object$keys(_table)).call(_context37, function (key) {
+_forEachInstanceProperty(_context38 = _Object$keys(_table)).call(_context38, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -414,8 +425,19 @@ _forEachInstanceProperty(_context37 = _Object$keys(_table)).call(_context37, fun
     }
   });
 });
+var _tabs = require("./tabs");
+_forEachInstanceProperty(_context39 = _Object$keys(_tabs)).call(_context39, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tabs[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _tabs[key];
+    }
+  });
+});
 var _text = require("./text");
-_forEachInstanceProperty(_context38 = _Object$keys(_text)).call(_context38, function (key) {
+_forEachInstanceProperty(_context40 = _Object$keys(_text)).call(_context40, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -426,7 +448,7 @@ _forEachInstanceProperty(_context38 = _Object$keys(_text)).call(_context38, func
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context39 = _Object$keys(_tooltipTrigger)).call(_context39, function (key) {
+_forEachInstanceProperty(_context41 = _Object$keys(_tooltipTrigger)).call(_context41, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/cjs/types/item.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, Key } from 'react';
+import { ElementType, Key, ReactNode } from 'react';
 import type { ItemProps } from '@react-types/shared';
 import { IconTypeExtended } from './icon';
 import { DOMAttributes, StyleProps } from './shared';
@@ -8,13 +8,15 @@ export interface Status {
 declare module '@react-types/shared' {
     interface ItemProps<T> extends StyleProps, DOMAttributes {
         /** The rendered label for the item. */
-        label?: string | React.ReactNode;
+        label?: string | ReactNode;
         /** Props for the accordion item content element. */
         regionProps?: StyleProps;
         /** Props for the accordion item content element. */
         containerProps?: StyleProps;
         /** Props for the accordion item button element. */
         buttonProps?: StyleProps;
+        /** Props for the tab line element. */
+        tabLineProps?: StyleProps;
         /** Whether the item has a separator */
         isSeparator?: boolean;
         /** Whether the item is pressed */
@@ -30,7 +32,9 @@ declare module '@react-types/shared' {
         /** Key for the item. */
         key?: Key;
         slots?: {
-            postHeading: React.ReactNode;
+            postHeading?: ReactNode;
+            afterTab?: ReactNode;
+            beforeTab?: ReactNode;
         };
         icon?: IconTypeExtended;
         /** isCurrent for the Breadcrumbs item. */

package/lib/cjs/types/tab.d.ts

@@ -0,0 +1,32 @@
+import { ElementType, ReactNode } from 'react';
+import { ThemeUICSSProperties } from 'theme-ui';
+import { TestingAttributes } from './shared/test';
+import { DOMAttributes, OrientationProps, StyleProps } from './shared';
+export interface TabProps extends StyleProps, DOMAttributes, OrientationProps, TestingAttributes {
+    isDisabled?: boolean;
+    item: {
+        key: string | number;
+        props?: {
+            icon: ElementType | ReactNode;
+            isDisabled: boolean;
+            textValue: string;
+            tabLineProps?: ThemeUICSSProperties;
+            tabLabelProps: object;
+            content: object;
+            titleAttr: string;
+            title: string;
+            separator: Element | boolean;
+            list: object[];
+        };
+        rendered?: string | ReactNode;
+    };
+    mode?: 'default' | 'tooltip' | 'list';
+    tooltipTriggerProps?: object;
+    title?: string;
+    textValue?: string;
+    tabLineProps?: object;
+    slots?: {
+        beforeTab?: ReactNode;
+        afterTab?: ReactNode;
+    };
+}

package/lib/cjs/types/tab.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/tabs.d.ts

@@ -0,0 +1,51 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { AriaTabListProps } from '@react-aria/tabs';
+import { TabListState } from '@react-stately/tabs';
+import type { CollectionChildren } from '@react-types/shared';
+import { TestingAttributes } from './shared/test';
+import { DOMAttributes, OrientationProps, StyleProps } from './shared';
+export interface TabsProps extends StyleProps, TestingAttributes, OrientationProps {
+    /** The default tab key to be selected. (uncontrolled) */
+    defaultSelectedKey?: string;
+    /** Array of keys to disable within the tab list. */
+    disabledKeys?: string[];
+    /** The tab key that is currently selected. (controlled) */
+    selectedKey?: string;
+    /** Determines the behavior model for the tabs. */
+    mode?: 'default' | 'tooltip' | 'list';
+    /**
+     * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
+     * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
+    */
+    items?: Array<TabListItemProps>;
+    /** Whether the entire tablist is disabled. */
+    isDisabled?: boolean;
+    /** Handler that is called when the selected tab has changed. */
+    onSelectionChange?: Dispatch<SetStateAction<string | undefined>>;
+    /** A props object that is subsequently spread into the rendered tablist. */
+    tabListProps?: object;
+    /** Props object that is spread directly into all of the tab panel wrapper elements. */
+    tabPanelProps?: object;
+    /** Whether tabs are activated automatically on focus or manually¸ */
+    keyboardActivation?: 'automatic' | 'manual';
+    children?: CollectionChildren<object>;
+}
+export interface AriaTabListOptions<T> extends Omit<AriaTabListProps<T>, 'children'> {
+    children: CollectionChildren<T>;
+}
+export interface TabPanelProps extends StyleProps, DOMAttributes {
+    state?: TabListState<object>;
+    tabPanelProps?: object;
+    children?: ReactNode | string;
+}
+export interface TabListItemProps {
+    name?: string;
+    children?: ReactNode | string;
+    list?: Array<{
+        key?: string | number;
+        name: string;
+        children: string;
+        role?: string;
+    }>;
+    props?: object;
+}

package/lib/cjs/types/tabs.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Tab/Tab.js

@@ -1,13 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr", "title"];
-import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { mergeProps, useFocusRing, useTab } from 'react-aria';
 import { Item as Tab } from 'react-stately';
 import { Pressable, useHover } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { Box, Text, Tooltip, TooltipTrigger } from '../..';
-import { usePropWarning, useStatusClasses } from '../../hooks';
+import { useLocalOrForwardRef, usePropWarning, useStatusClasses } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { getPendoID } from '../../utils/devUtils/constants/pendoID';
 import TabPicker from '../TabPicker';
@@ -29,17 +26,8 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   var key = item.key,
     rendered = item.rendered,
     itemProps = item.props;
-  var icon = itemProps.icon,
-    tabDisabled = itemProps.isDisabled,
-    separator = itemProps.separator,
-    tabLabelProps = itemProps.tabLabelProps,
-    tabLineProps = itemProps.tabLineProps,
-    content = itemProps.content,
-    titleAttr = itemProps.titleAttr,
-    title = itemProps.title,
-    otherItemProps = _objectWithoutProperties(itemProps, _excluded);
   var state = useContext(TabsContext);
-  var isDisabled = tabsDisabled || tabDisabled || state.disabledKeys.has(key);
+  var isDisabled = tabsDisabled || (itemProps === null || itemProps === void 0 ? void 0 : itemProps.isDisabled) || state.disabledKeys.has(key);
   var isSelected = state.selectedKey === key;
   var _useFocusRing = useFocusRing(),
     isFocusVisible = _useFocusRing.isFocusVisible,
@@ -56,12 +44,8 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
       isSelected: isSelected
     }),
     classNames = _useStatusClasses.classNames;
-  var tabRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return tabRef.current;
-  });
+  var tabRef = useLocalOrForwardRef(ref);
   var _useTab = useTab({
       key: key,
       isDisabled: isDisabled
@@ -72,57 +56,32 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   }, slots === null || slots === void 0 ? void 0 : slots.beforeTab, ___EmotionJSX(Box, _extends({
     className: classNames,
     variant: "tab"
-  }, mergeProps(focusProps, hoverProps, tabProps), getPendoID('Tab'), otherItemProps, {
-    ref: tabRef,
-    title: titleAttr || undefined
-  }), icon, ___EmotionJSX(Text, _extends({
+    // title={itemProps?.titleAttr || undefined}
+  }, mergeProps(focusProps, hoverProps, tabProps), getPendoID('Tab'), {
+    // {...otherItemProps}
+    ref: tabRef
+  }, itemProps, {
+    role: "tab"
+  }), ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.icon, ___EmotionJSX(Text, _extends({
     variant: "tabLabel"
-  }, tabLabelProps), rendered), isSelected && !isDisabled && ___EmotionJSX(TabLine, tabLineProps)), slots === null || slots === void 0 ? void 0 : slots.afterTab);
-  if (mode === 'list' && itemProps.list) {
+  }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLabelProps), rendered), isSelected && !isDisabled && ___EmotionJSX(TabLine, itemProps === null || itemProps === void 0 ? void 0 : itemProps.tabLineProps))), slots === null || slots === void 0 ? void 0 : slots.afterTab);
+  if (mode === 'list' && itemProps !== null && itemProps !== void 0 && itemProps.list) {
     return ___EmotionJSX(TabPicker, _extends({
       ref: tabRef,
       className: classNames,
-      items: itemProps.list,
+      items: itemProps === null || itemProps === void 0 ? void 0 : itemProps.list,
       state: state,
       item: item
-    }, mergeProps(focusProps, hoverProps, tabProps), otherItemProps));
+    }, mergeProps(focusProps, hoverProps, tabProps), itemProps));
   }
   if (mode === 'tooltip') {
-    return ___EmotionJSX(React.Fragment, null, separator, ___EmotionJSX(TooltipTrigger, _extends({}, tooltipTriggerProps, {
+    return ___EmotionJSX(React.Fragment, null, itemProps === null || itemProps === void 0 ? void 0 : itemProps.separator, ___EmotionJSX(TooltipTrigger, _extends({}, tooltipTriggerProps, {
       isOpen: isHovered || isFocusVisible
-    }), ___EmotionJSX(Pressable, null, ___EmotionJSX("span", {
-      variant: "quiet"
-    }, tab)), ___EmotionJSX(Tooltip, null, itemProps.textValue || itemProps.title)));
+    }), ___EmotionJSX(Pressable, null, ___EmotionJSX("span", null, tab)), ___EmotionJSX(Tooltip, null, (itemProps === null || itemProps === void 0 ? void 0 : itemProps.textValue) || (itemProps === null || itemProps === void 0 ? void 0 : itemProps.title))));
   }
   return tab;
 });
 CollectionTab.displayName = 'CollectionTab';
-CollectionTab.propTypes = {
-  isDisabled: PropTypes.bool,
-  item: PropTypes.shape({
-    key: PropTypes.string,
-    props: PropTypes.shape({
-      icon: PropTypes.shape({}),
-      isDisabled: PropTypes.bool,
-      textValue: PropTypes.string,
-      tabLineProps: PropTypes.shape({}),
-      tabLabelProps: PropTypes.shape({}),
-      content: PropTypes.shape({}),
-      titleAttr: PropTypes.string,
-      title: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.object]),
-      separator: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
-      list: PropTypes.arrayOf(PropTypes.shape({}))
-    }),
-    rendered: PropTypes.node
-  }),
-  mode: PropTypes.oneOf(['default', 'tooltip', 'list']),
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  tooltipTriggerProps: PropTypes.shape({}),
-  slots: PropTypes.shape({
-    beforeTab: PropTypes.node,
-    afterTab: PropTypes.node
-  })
-};
 export var TabLine = function TabLine(props) {
   return ___EmotionJSX(Box, _extends({
     role: "presentation",

package/lib/components/Tabs/Tabs.js

@@ -8,7 +8,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["state"],
-  _excluded2 = ["children", "isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"];
+  _excluded2 = ["isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
@@ -16,11 +16,10 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import { useTabList, useTabPanel } from 'react-aria';
 import { useTabListState } from 'react-stately';
-import PropTypes from 'prop-types';
-import { usePropWarning } from '../../hooks';
+import { useLocalOrForwardRef, usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import Box from '../Box';
 import { CollectionTab } from '../Tab';
@@ -29,23 +28,19 @@ export var TabsContext = /*#__PURE__*/React.createContext({});
 var TabPanel = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var state = _ref.state,
     props = _objectWithoutProperties(_ref, _excluded);
-  var tabPanelRef = useRef();
   var children = props.children,
     tabPanelProps = props.tabPanelProps;
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return tabPanelRef.current;
-  });
-  var _useTabPanel = useTabPanel(props, state, tabPanelRef),
-    raTabPanelProps = _useTabPanel.tabPanelProps;
+  var tabPanelRef = useLocalOrForwardRef(ref);
+  var _ref2 = useTabPanel(props, state, tabPanelRef),
+    raTabPanelProps = _ref2.tabPanelProps;
   return ___EmotionJSX(Box, _extends({}, tabPanelProps, raTabPanelProps, {
-    ref: tabPanelRef
+    ref: tabPanelRef,
+    role: "tabpanel"
   }), children);
 });
 var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context4, _context5, _state$selectedItem, _state$selectedItem2, _state$selectedItem3;
-  var children = props.children,
-    isDisabled = props.isDisabled,
+  var isDisabled = props.isDisabled,
     items = props.items,
     onSelectionChange = props.onSelectionChange,
     orientation = props.orientation,
@@ -53,14 +48,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     tabListProps = props.tabListProps,
     tabPanelProps = props.tabPanelProps,
     others = _objectWithoutProperties(props, _excluded2);
-  var tabListRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return tabListRef.current;
-  });
+  var tabListRef = useLocalOrForwardRef(ref);
   var allItems = [];
-  if (mode === 'list') {
+  if (mode === 'list' && items) {
     _forEachInstanceProperty(items).call(items, function (item) {
       var _context;
       allItems = _concatInstanceProperty(_context = []).call(_context, allItems, [item]);
@@ -80,7 +71,8 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     items: mode === 'list' ? allItems : items
   }));
   var _useTabList = useTabList(props, state, tabListRef),
-    raTabListProps = _useTabList.tabListProps;
+    raTabListProps = _useTabList.tabListProps; //= useTabList(props, state, tabListRef);
+
   return ___EmotionJSX(TabsContext.Provider, {
     value: state
   }, ___EmotionJSX(Box, others, ___EmotionJSX(Box, _extends({
@@ -88,19 +80,20 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     gap: "25px",
     isRow: orientation === ORIENTATION.HORIZONTAL
   }, tabListProps, raTabListProps, {
-    ref: tabListRef
+    ref: tabListRef,
+    role: "tablist"
   }), _mapInstanceProperty(_context4 = _filterInstanceProperty(_context5 = _Array$from(state.collection)).call(_context5, function (item) {
-    var _item$value;
-    return !(item !== null && item !== void 0 && (_item$value = item.value) !== null && _item$value !== void 0 && _item$value.isListItem);
-  })).call(_context4, function (item) {
     var _item$props;
+    return !(item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.isListItem);
+  })).call(_context4, function (item) {
+    var _item$props2;
     return ___EmotionJSX(CollectionTab, {
       key: item.key,
       item: item,
       isDisabled: isDisabled,
       orientation: orientation,
       mode: mode,
-      slots: item === null || item === void 0 || (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.slots
+      slots: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.slots
     });
   })), ___EmotionJSX(TabPanel, {
     key: (_state$selectedItem = state.selectedItem) === null || _state$selectedItem === void 0 ? void 0 : _state$selectedItem.key,
@@ -108,42 +101,11 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
     tabPanelProps: tabPanelProps
   }, ((_state$selectedItem2 = state.selectedItem) === null || _state$selectedItem2 === void 0 ? void 0 : _state$selectedItem2.props.children) || ((_state$selectedItem3 = state.selectedItem) === null || _state$selectedItem3 === void 0 ? void 0 : _state$selectedItem3.props.content))));
 });
-Tabs.propTypes = {
-  /** The default tab key to be selected. (uncontrolled) */
-  defaultSelectedKey: PropTypes.string,
-  /** Array of keys to disable within the tab list. */
-  disabledKeys: PropTypes.arrayOf(PropTypes.string),
-  /** The tab key that is currently selected. (controlled) */
-  selectedKey: PropTypes.string,
-  /** Determines the arrangement of the tablist. */
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  /** Determines the behavior model for the tabs. */
-  mode: PropTypes.oneOf(['default', 'tooltip', 'list']),
-  /**
-   * *For performance reasons, use this prop instead of Array.map when iteratively rendering Items*.
-   * For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections).
-  */
-  items: PropTypes.arrayOf(PropTypes.shape({})),
-  /** Whether the entire tablist is disabled. */
-  isDisabled: PropTypes.bool,
-  /** Handler that is called when the selected tab has changed. */
-  onSelectionChange: PropTypes.func,
-  /** A props object that is subsequently spread into the rendered tablist. */
-  tabListProps: PropTypes.shape({}),
-  /** Props object that is spread directly into all of the tab panel wrapper elements. */
-  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',
   keyboardActivation: 'manual'
 };
-TabPanel.propTypes = {
-  state: PropTypes.shape({}),
-  tabPanelProps: PropTypes.shape({})
-};
 Tabs.displayName = 'Tabs';
 export default Tabs;

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

@@ -37,17 +37,21 @@ emotionCache.compat = true;
 var testId = 'testId';
 var defaultTabs = [{
   name: 'Tab 1',
-  children: 'Tab 1 body'
+  children: 'Tab 1 body',
+  props: {}
 }, {
   name: 'Tab 2',
-  children: 'Tab 2 body'
+  children: 'Tab 2 body',
+  props: {}
 }, {
   name: 'Tab 3',
-  children: 'Tab 3 body'
+  children: 'Tab 3 body',
+  props: {}
 }];
 var tabsWithList = [{
   name: 'Tab 1',
-  children: 'Tab 1 body'
+  children: 'Tab 1 body',
+  props: {}
 }, {
   name: 'Tab 2',
   list: [{
@@ -60,7 +64,8 @@ var tabsWithList = [{
     name: 'Tab 2 list',
     children: 'Tab 2 from list',
     role: 'menuitemradio'
-  }]
+  }],
+  props: {}
 }];
 var defaultProps = {
   'data-testid': testId,
@@ -77,8 +82,8 @@ var getComponent = function getComponent() {
     value: emotionCache
   }, ___EmotionJSX(Tabs, _extends({}, defaultProps, props), _mapInstanceProperty(tabs).call(tabs, function (_ref2) {
     var name = _ref2.name,
-      tabProps = _ref2.props,
-      children = _ref2.children;
+      children = _ref2.children,
+      tabProps = _ref2.props;
     return ___EmotionJSX(Tab, _extends({
       key: name,
       title: name
@@ -114,7 +119,10 @@ var getTabs = function getTabs() {
 var testTabPanel = function testTabPanel(expectedTabIndex) {
   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();
+    if (typeof children === 'string') {
+      return index === expectedTabIndex ? expect(screen.queryByText(children)).toBeInTheDocument() : expect(screen.queryByText(children)).not.toBeInTheDocument();
+    }
+    return null;
   });
 };
 var testSingleTab = function testSingleTab(tabs, tab, thisTest) {
@@ -264,9 +272,11 @@ test('disabled all tabs', function () {
 
   // Tabs cannot be DOM disabled so must check visuals
   _forEachInstanceProperty(defaultTabs).call(defaultTabs, function (tab) {
-    var tabText = screen.getByText(tab.name);
-    var parentElement = tabText.parentElement;
-    expect(parentElement).toHaveClass('is-disabled');
+    if (tab.name) {
+      var tabText = screen.getByText(tab.name);
+      var parentElement = tabText.parentElement;
+      expect(parentElement).toHaveClass('is-disabled');
+    }
   });
   expect(tabLine).not.toBeInTheDocument();
 
@@ -413,7 +423,7 @@ test('tabs without selected keys show null tab panel content', function () {
   getComponent({
     defaultSelectedKey: undefined
   });
-  expect(screen.queryByRole('tabpanel')).not.toHaveTextContent();
+  expect(screen.queryByRole('tabpanel')).not.toHaveTextContent('');
 });
 test('hover tab style', function () {
   getComponent();
@@ -468,17 +478,21 @@ test('will render tab with list if provided', /*#__PURE__*/_asyncToGenerator( /*
         });
         testTabPanel(0);
         _getTabs12 = getTabs(), menuBtn = _getTabs12.tab1.parentElement;
-        userEvent.click(menuBtn);
+        if (menuBtn) userEvent.click(menuBtn);
         expect(screen.queryByRole('menu')).toBeInTheDocument();
         testTabPanel(0);
         menuItems = screen.queryAllByRole('menuitemradio');
-        expect(menuItems).toHaveLength(tabsWithList[1].list.length);
+        if (tabsWithList[1].list) {
+          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);
+        if (tabsWithList[1].list) {
+          firstListItemContent = tabsWithList[1].list[0].children;
+          expect(screen.queryByRole('tabpanel')).toHaveTextContent(firstListItemContent);
+        }
         expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-      case 13:
+      case 12:
       case "end":
         return _context2.stop();
     }
@@ -510,13 +524,17 @@ test('tab list is accessible via keyboard', function () {
   expect(screen.queryByRole('menu')).toBeInTheDocument();
   testTabPanel(0);
   var menuItems = screen.queryAllByRole('menuitemradio');
-  expect(menuItems).toHaveLength(tabsWithList[1].list.length);
+  if (tabsWithList[1].list) {
+    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);
+  if (tabsWithList[1].list) {
+    var firstListItemContent = tabsWithList[1].list[0].children;
+    expect(screen.queryByRole('tabpanel')).toHaveTextContent(firstListItemContent);
+  }
   expect(screen.queryByRole('menu')).not.toBeInTheDocument();
 });

package/lib/types/index.js

@@ -34,6 +34,8 @@ export * from './rockerButtonGroup';
 export * from './scrollBox';
 export * from './separator';
 export * from './shared';
+export * from './tab';
 export * from './table';
+export * from './tabs';
 export * from './text';
 export * from './tooltipTrigger';

package/lib/types/tab.js

@@ -0,0 +1 @@
+export {};

package/lib/types/tabs.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.57.0-alpha.7",
+  "version": "2.57.0-alpha.8",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",