@pingux/astro 2.57.0 → 2.58.0

package/lib/components/Stepper/Stepper.mdx

@@ -1,13 +1,14 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Components/Stepper/Stepper" />
 
 # Stepper
 
-The Stepper component acts as a wrapper for individual step components. 
+The Stepper component acts as a wrapper for individual step components.
 It is used to display progress through a sequence of logical and numbered steps, usually within a configuration wizard.
 
 This component should be used:
+
 - To reveal or hide sections of content.
 - For progressive disclosure.
 
@@ -19,23 +20,28 @@ This component requires the Item originating from [react-stately/collections](ht
 
 ### Accessibility
 
-This component should adhere to the [WAI-ARIA Stepper](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines. 
+This component should adhere to the [WAI-ARIA Stepper](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines.
 
 #### Keyboard Navigation
 
-These keys provide additional functionality to the component. 
+These keys provide additional functionality to the component.
 
-| Keys | Function |
-| ---- | ---- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Arrow keys | When this field is focused, the arrow keys can be used to navigate through the steps. |
-| Shift + Tab | Moves focus to the previous focusable component.  |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first step. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last step. |
+| Keys                                                 | Function                                                                              |
+| ---------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| Tab                                                  | The field is focusable using the Tab key and follows the page tab sequence.           |
+| Arrow keys                                           | When this field is focused, the arrow keys can be used to navigate through the steps. |
+| Shift + Tab                                          | Moves focus to the previous focusable component.                                      |
+| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first step.                                                   |
+| End(Fn + Left Arrow Key) Or Control/Command + End    | Shifts the focus to the last step.                                                    |
 
 #### Screen Readers
 
 This component uses the following attributes to assist screen readers:
-- The **`aria-orientation`**  attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous. 
-- Each step uses the **`aria-selected`**  attribute to indicate the selection status, and the **`aria-control`**  attribute is supplied with the associated panel ID that displays the content.
-- Each step uses the **`aria-labelledby`** with the label ID to reference it.
+
+- The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
+- Each step uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.
+- Each step uses the **`aria-labelledby`** with the label ID to reference it.
+
+#### Usage
+
+- The stepper component is always center-aligned in its context, whether it's in a page, a panel, or a popup.

package/lib/components/Stepper/Stepper.stories.js

@@ -1,9 +1,11 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Item } from 'react-stately';
+import CreationOutlineIcon from '@pingux/mdi-react/CreationOutlineIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Stepper, Text } from '../../index';
+import { useOverlayPanelState } from '../../hooks';
+import { Box, Button, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, Stepper, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
 import StepperReadme from './Stepper.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -56,30 +58,69 @@ export default {
   }
 };
 var steps = [{
-  label: 'Label 1',
-  children: 'This is content for step 1',
+  label: 'Duis Aute',
+  children: 'Quis autem vel eum iure reprehenderit qui in ea voluptate',
+  title: 'Duis Aute',
   name: 'step1'
 }, {
-  label: 'Label 2',
-  children: 'This is content for step 2',
+  label: 'Lorem Ipsum',
+  children: 'Sed ut perspiciatis unde omnis',
+  title: 'Lorem Ipsum',
   name: 'step2'
 }, {
-  label: 'Label 3',
-  children: 'This is content for step 3',
+  label: 'Excepteur Sint',
+  children: 'Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam',
+  title: 'Excepteur Sint',
   name: 'step3'
 }];
+var sx = {
+  overlayPanel: {
+    padding: '0px',
+    transition: 'width 500ms, right 500ms'
+  },
+  stepperContainer: {
+    padding: 'lg'
+  },
+  contentContainer: {
+    marginTop: 'lg',
+    gap: 'sm'
+  },
+  buttonStyle: {
+    margin: '50px 0px'
+  }
+};
 export var Default = function Default(args) {
   return ___EmotionJSX(Stepper, args, ___EmotionJSX(Item, {
     key: "step1",
-    textValue: "Step 1"
+    textValue: "Duis Aute"
+  }, ___EmotionJSX(Box, {
+    sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    pt: "lg"
-  }, "This is content for step 1")), ___EmotionJSX(Item, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Duis Aute"), ___EmotionJSX(Text, {
+    fontSize: "md"
+  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
     key: "step2",
-    textValue: "Step 2"
+    textValue: "Lorem Ipsum"
+  }, ___EmotionJSX(Box, {
+    sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    pt: "lg"
-  }, "This is content for step 2")));
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Lorem Ipsum"), ___EmotionJSX(Text, {
+    fontSize: "md"
+  }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
+    key: "step3",
+    textValue: "Excepteur Sint"
+  }, ___EmotionJSX(Box, {
+    sx: sx.contentContainer
+  }, ___EmotionJSX(Text, {
+    fontSize: "md",
+    fontWeight: "3"
+  }, "Excepteur Sint"), ___EmotionJSX(Text, {
+    fontSize: "md"
+  }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 Default.parameters = {
   design: {
@@ -92,12 +133,6 @@ export var ControlledStepper = function ControlledStepper() {
     _useState2 = _slicedToArray(_useState, 2),
     activeStep = _useState2[0],
     setActiveStep = _useState2[1];
-
-  // steps = [
-  // { label: 'Label 1', children: 'This is content for step 1', name: 'step1' },
-  // { label: 'Label 2', children: 'This is content for step 2', name: 'step2' },
-  // { label: 'Label 3', children: 'This is content for step 3', name: 'step3' },
-  // ];
   return ___EmotionJSX(Stepper, {
     items: steps,
     activeStep: activeStep,
@@ -105,21 +140,67 @@ export var ControlledStepper = function ControlledStepper() {
   }, function (item) {
     return ___EmotionJSX(Item, {
       key: item.name,
-      textValue: item.name
+      textValue: item.title
+    }, ___EmotionJSX(Box, {
+      sx: sx.contentContainer
     }, ___EmotionJSX(Text, {
-      pt: "lg"
-    }, item.children));
+      fontSize: "md",
+      fontWeight: "3"
+    }, item.title), ___EmotionJSX(Text, {
+      fontSize: "md"
+    }, item.children)));
   });
 };
-export var WithoutContent = function WithoutContent() {
-  return ___EmotionJSX(Stepper, null, ___EmotionJSX(Item, {
-    key: "step1",
-    textValue: "Step 1"
-  }), ___EmotionJSX(Item, {
-    key: "step2",
-    textValue: "Step 2"
-  }), ___EmotionJSX(Item, {
-    key: "step3",
-    textValue: "Step 3"
-  }));
+export var Panel = function Panel() {
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeStep = _useState4[0],
+    setActiveStep = _useState4[1];
+  var _useOverlayPanelState = useOverlayPanelState(),
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
+  var triggerRef = useRef < HTMLButtonElement > null;
+  var onCloseHandler = function onCloseHandler() {
+    return onClose(state, triggerRef);
+  };
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+    // readers when an overlay opens.
+    ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
+      onPress: state.open,
+      "aria-expanded": state.isOpen,
+      sx: sx.buttonStyle
+    }, "Open Panel"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, {
+      isTransitioning: state.isTransitioning,
+      isOpen: state.isOpen,
+      state: state,
+      triggerRef: triggerRef,
+      sx: sx.overlayPanel,
+      size: "full"
+    }, ___EmotionJSX(PanelHeader, {
+      data: {
+        icon: CreationOutlineIcon,
+        text: 'Sed Ut Perspiciatis'
+      }
+    }, ___EmotionJSX(PanelHeaderCloseButton, {
+      onPress: onCloseHandler
+    })), ___EmotionJSX(Stepper, {
+      items: steps,
+      activeStep: activeStep,
+      onStepChange: setActiveStep,
+      sx: sx.stepperContainer
+    }, function (item) {
+      return ___EmotionJSX(Item, {
+        key: item.name,
+        textValue: item.title
+      }, ___EmotionJSX(Box, {
+        sx: sx.contentContainer
+      }, ___EmotionJSX(Text, {
+        fontSize: "md",
+        fontWeight: "3"
+      }, item.title), ___EmotionJSX(Text, {
+        fontSize: "md"
+      }, item.children)));
+    })))
+  );
 };

package/lib/components/Stepper/Stepper.styles.js

@@ -18,7 +18,8 @@ var tabs = {
   outline: 'none',
   borderBottom: 'none',
   mb: 0,
-  width: '100%'
+  width: '100%',
+  justifyContent: 'center'
 };
 var tab = {
   mb: 0,

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();
 });