@telus-uds/components-base 1.15.0 → 1.17.0

package/lib/Timeline/Timeline.js

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const selectDotStyles = _ref => {
+  let {
+    dotWidth,
+    timelineColor,
+    dotBorderWidth,
+    dotColor
+  } = _ref;
+  return {
+    width: dotWidth,
+    height: dotWidth,
+    borderRadius: dotWidth / 2,
+    backgroundColor: dotColor,
+    borderWidth: dotBorderWidth,
+    borderColor: timelineColor
+  };
+};
+
+const selectConnectorStyles = _ref2 => {
+  let {
+    timelineColor,
+    connectorHeight,
+    connectorWidth
+  } = _ref2;
+  return {
+    width: connectorWidth,
+    height: connectorHeight,
+    backgroundColor: timelineColor
+  };
+};
+
+const selectTimelineContainerStyle = _ref3 => {
+  let {
+    timelineContainerDirection
+  } = _ref3;
+  return {
+    flexDirection: timelineContainerDirection
+  };
+};
+
+const selectLineItemStyles = _ref4 => {
+  let {
+    lineItemAlign,
+    lineItemDirection,
+    lineItemMarginBottom,
+    lineItemMarginRight
+  } = _ref4;
+  return {
+    alignItems: lineItemAlign,
+    flexDirection: lineItemDirection,
+    marginBottom: lineItemMarginBottom,
+    marginRight: lineItemMarginRight,
+    overflow: 'hidden'
+  };
+};
+
+const selectLineItemContainer = _ref5 => {
+  let {
+    lineItemContainerDirection,
+    lineContainerFlexSize
+  } = _ref5;
+  return {
+    flexDirection: lineItemContainerDirection,
+    flex: lineContainerFlexSize
+  };
+};
+
+const selectItemContentStyles = (_ref6, isLastChild) => {
+  let {
+    itemContentFlexSize,
+    itemContentMarginBottom,
+    itemContentMarginRight
+  } = _ref6;
+  return {
+    flex: itemContentFlexSize,
+    marginBottom: !isLastChild && itemContentMarginBottom,
+    marginRight: !isLastChild && itemContentMarginRight
+  };
+};
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+/**
+ * Timeline is a component that displays either a horizontal or vertical list of the
+ * children components passed by props
+ *
+ * ## Component API
+ *
+ * - `horizontal` In order to display the Component list horizontally
+ *
+ *
+ * ## A11y guidelines
+ * Timeline link supports all the common a11y props.
+ */
+
+const Timeline = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
+  let {
+    tokens,
+    variant = {},
+    children,
+    accessibilityLabel,
+    tag = 'ul',
+    childrenTag = 'li',
+    ...rest
+  } = _ref7;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Timeline', tokens, variant, {
+    viewport
+  });
+  const containerProps = { ...selectProps(rest),
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole || 'list'),
+    accessibilityLabel
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...containerProps,
+    ref: ref,
+    style: selectTimelineContainerStyle(themeTokens),
+    children: children.map((child, index) => {
+      var _child$props;
+
+      const childrenProps = { ...(0, _utils.getA11yPropsFromHtmlTag)(childrenTag, (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.accessibilityRole) || 'listitem')
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: selectLineItemContainer(themeTokens) // eslint-disable-next-line react/no-array-index-key
+        ,
+        ...childrenProps,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: selectLineItemStyles(themeTokens),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: selectDotStyles(themeTokens)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: selectConnectorStyles(themeTokens)
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectItemContentStyles(themeTokens, index + 1 === children.length),
+          children: child
+        })]
+      }, "timeline-".concat(index, "-").concat(child.displayName));
+    })
+  });
+});
+Timeline.displayName = 'Timeline';
+Timeline.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('Timeline'),
+  variant: _utils.variantProp.propType,
+
+  /**
+   * A list of components that will be rendered either horizontally or vertically
+   */
+  children: _propTypes.default.arrayOf(_propTypes.default.node).isRequired,
+
+  /**
+   * A required accessibility label that needs to be passed to be used on List
+   * which is applied as normal for a React Native accessibilityLabel prop.
+   */
+  accessibilityLabel: _propTypes.default.string.isRequired,
+
+  /**
+   * Sets the HTML tag of the outer container and the children. By default `'li'` for the children
+   * and `'ul'` for the container
+   *
+   * If either `tag` or `childrenTag` is overridden, the other should be too, to avoid producing invalid HTML.
+   *
+   */
+  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  childrenTag: _propTypes.default.oneOf(_utils.layoutTags)
+};
+var _default = Timeline;
+exports.default = _default;

package/lib/Timeline/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Timeline = _interopRequireDefault(require("./Timeline"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Timeline.default;
+exports.default = _default;

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -35,32 +35,39 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]); // We need to drop the icon before passing it to the `ButtonBase`, because it's
+// being handled separately in this case
 
-const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', { ...tokens,
-  // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
-  width: null
-}); // Map and rename icon-specific tokens to name used within Icon
+const selectButtonTokens = _ref => {
+  let {
+    icon: _,
+    ...tokens
+  } = _ref;
+  return (0, _utils.selectTokens)('Button', { ...tokens,
+    // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
+    width: null
+  });
+}; // Map and rename icon-specific tokens to name used within Icon
 
 
-const selectIconTokens = _ref => {
+const selectIconTokens = _ref2 => {
   let {
     iconSize,
     iconColor
-  } = _ref;
+  } = _ref2;
   return {
     size: iconSize,
     color: iconColor
   };
 };
 
-const selectTrackStyles = _ref2 => {
+const selectTrackStyles = _ref3 => {
   let {
     trackBorderWidth,
     trackBorderColor,
     trackBorderRadius,
     width
-  } = _ref2;
+  } = _ref3;
   return {
     borderWidth: trackBorderWidth,
     borderColor: trackBorderColor,
@@ -69,7 +76,7 @@ const selectTrackStyles = _ref2 => {
   };
 };
 
-const selectSwitchStyles = _ref3 => {
+const selectSwitchStyles = _ref4 => {
   let {
     switchSize,
     switchColor,
@@ -77,7 +84,7 @@ const selectSwitchStyles = _ref3 => {
     switchBorderColor,
     switchBorderRadius,
     switchShadow
-  } = _ref3;
+  } = _ref4;
   return {
     width: switchSize,
     height: switchSize,
@@ -95,23 +102,23 @@ const selectSwitchStyles = _ref3 => {
   };
 };
 
-const selectLabelStyles = _ref4 => {
+const selectLabelStyles = _ref5 => {
   let {
     labelMarginLeft
-  } = _ref4;
+  } = _ref5;
   return {
     marginLeft: labelMarginLeft
   };
 };
 
-const selectLabelTokens = _ref5 => {
+const selectLabelTokens = _ref6 => {
   let {
     labelColor,
     labelFontName,
     labelFontSize,
     labelFontWeight,
     labelLineHeight
-  } = _ref5;
+  } = _ref6;
   return {
     color: labelColor,
     fontName: labelFontName,
@@ -121,7 +128,7 @@ const selectLabelTokens = _ref5 => {
   };
 };
 
-const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
+const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
   let {
     copy = 'en',
     value,
@@ -136,7 +143,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     accessibilityRole = 'switch',
     accessibilityLabel = label,
     ...rest
-  } = _ref6;
+  } = _ref7;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
   const themeTokens = getTokens();
   const {
@@ -260,8 +267,6 @@ ToggleSwitch.propTypes = { ...selectedSystemPropTypes,
 
 const staticStyles = _StyleSheet.default.create({
   track: {
-    flexGrow: 1,
-    alignSelf: 'stretch',
     flexDirection: 'row'
   },
   switch: {

package/lib/index.js

@@ -28,6 +28,7 @@ var _exportNames = {
   Notification: true,
   Pagination: true,
   Progress: true,
+  QuickLinks: true,
   Radio: true,
   RadioCard: true,
   Search: true,
@@ -40,6 +41,7 @@ var _exportNames = {
   StepTracker: true,
   Tabs: true,
   Tags: true,
+  Timeline: true,
   Tooltip: true,
   TooltipButton: true,
   Typography: true,
@@ -56,7 +58,8 @@ var _exportNames = {
   getThemeTokens: true,
   applyOuterBorder: true,
   applyTextStyles: true,
-  applyShadowToken: true
+  applyShadowToken: true,
+  Portal: true
 };
 Object.defineProperty(exports, "A11yInfoProvider", {
   enumerable: true,
@@ -202,6 +205,12 @@ Object.defineProperty(exports, "Pagination", {
     return _Pagination.default;
   }
 });
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _portal.Portal;
+  }
+});
 Object.defineProperty(exports, "PressableCardBase", {
   enumerable: true,
   get: function () {
@@ -214,6 +223,12 @@ Object.defineProperty(exports, "Progress", {
     return _Progress.default;
   }
 });
+Object.defineProperty(exports, "QuickLinks", {
+  enumerable: true,
+  get: function () {
+    return _QuickLinks.default;
+  }
+});
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () {
@@ -292,6 +307,12 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _ThemeProvider.default;
   }
 });
+Object.defineProperty(exports, "Timeline", {
+  enumerable: true,
+  get: function () {
+    return _Timeline.default;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () {
@@ -495,6 +516,8 @@ var _Pagination = _interopRequireDefault(require("./Pagination"));
 
 var _Progress = _interopRequireDefault(require("./Progress"));
 
+var _QuickLinks = _interopRequireDefault(require("./QuickLinks"));
+
 var _Radio = _interopRequireWildcard(require("./Radio"));
 
 Object.keys(_Radio).forEach(function (key) {
@@ -569,6 +592,8 @@ Object.keys(_TextInput).forEach(function (key) {
   });
 });
 
+var _Timeline = _interopRequireDefault(require("./Timeline"));
+
 var _ToggleSwitch = require("./ToggleSwitch");
 
 Object.keys(_ToggleSwitch).forEach(function (key) {
@@ -611,6 +636,8 @@ Object.keys(_utils).forEach(function (key) {
   });
 });
 
+var _portal = require("@gorhom/portal");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }

package/lib/utils/props/a11yProps.js

@@ -48,55 +48,58 @@ const nativeA11yPropTypes = {
   onAccessibilityEscape: _propTypes.default.func,
   onAccessibilityTap: _propTypes.default.func
 };
+const a11yPropTypes = { ...nativeA11yPropTypes,
+  // React Native Web adds many a11y props that alias aria-* attributes
+  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
+  accessibilityActiveDescendant: _propTypes.default.string,
+  accessibilityAtomic: _propTypes.default.bool,
+  accessibilityAutoComplete: _propTypes.default.string,
+  accessibilityBusy: _propTypes.default.bool,
+  accessibilityChecked: _propTypes.default.oneOf([true, false, 'mixed']),
+  accessibilityColumnCount: _propTypes.default.number,
+  accessibilityColumnIndex: _propTypes.default.number,
+  accessibilityColumnSpan: _propTypes.default.number,
+  accessibilityControls: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityCurrent: _propTypes.default.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
+  accessibilityDescribedBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityDetails: _propTypes.default.string,
+  accessibilityDisabled: _propTypes.default.bool,
+  accessibilityErrorMessage: _propTypes.default.string,
+  accessibilityExpanded: _propTypes.default.bool,
+  accessibilityFlowTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityHasPopup: _propTypes.default.string,
+  accessibilityHidden: _propTypes.default.bool,
+  accessibilityInvalid: _propTypes.default.bool,
+  accessibilityKeyShortcuts: _propTypes.default.string,
+  accessibilityLabelledBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityLevel: _propTypes.default.number,
+  accessibilityModal: _propTypes.default.bool,
+  accessibilityMultiline: _propTypes.default.bool,
+  accessibilityMultiSelectable: _propTypes.default.bool,
+  accessibilityOrientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
+  accessibilityOwns: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
+  accessibilityPlaceholder: _propTypes.default.string,
+  accessibilityPosInSet: _propTypes.default.number,
+  accessibilityPressed: _propTypes.default.bool,
+  accessibilityReadOnly: _propTypes.default.bool,
+  accessibilityRequired: _propTypes.default.bool,
+  accessibilityRoleDescription: _propTypes.default.string,
+  accessibilityRowCount: _propTypes.default.number,
+  accessibilityRowIndex: _propTypes.default.number,
+  accessibilityRowSpan: _propTypes.default.number,
+  accessibilitySelected: _propTypes.default.bool,
+  accessibilitySetSize: _propTypes.default.number,
+  accessibilitySort: _propTypes.default.oneOf(['ascending', 'descending', 'none', 'other']),
+  accessibilityValueMax: _propTypes.default.number,
+  accessibilityValueMin: _propTypes.default.number,
+  accessibilityValueNow: _propTypes.default.number,
+  accessibilityValueText: _propTypes.default.string
+};
 
-const a11yPropTypes = _Platform.default.select({
+const a11yPropTypesByPlatform = _Platform.default.select({
   // React Native Web adds many a11y props that alias aria-* attributes
   // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
-  web: { ...nativeA11yPropTypes,
-    accessibilityActiveDescendant: _propTypes.default.string,
-    accessibilityAtomic: _propTypes.default.bool,
-    accessibilityAutoComplete: _propTypes.default.string,
-    accessibilityBusy: _propTypes.default.bool,
-    accessibilityChecked: _propTypes.default.oneOf([true, false, 'mixed']),
-    accessibilityColumnCount: _propTypes.default.number,
-    accessibilityColumnIndex: _propTypes.default.number,
-    accessibilityColumnSpan: _propTypes.default.number,
-    accessibilityControls: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-    accessibilityCurrent: _propTypes.default.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
-    accessibilityDescribedBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-    accessibilityDetails: _propTypes.default.string,
-    accessibilityDisabled: _propTypes.default.bool,
-    accessibilityErrorMessage: _propTypes.default.string,
-    accessibilityExpanded: _propTypes.default.bool,
-    accessibilityFlowTo: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-    accessibilityHasPopup: _propTypes.default.string,
-    accessibilityHidden: _propTypes.default.bool,
-    accessibilityInvalid: _propTypes.default.bool,
-    accessibilityKeyShortcuts: _propTypes.default.string,
-    accessibilityLabelledBy: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-    accessibilityLevel: _propTypes.default.number,
-    accessibilityModal: _propTypes.default.bool,
-    accessibilityMultiline: _propTypes.default.bool,
-    accessibilityMultiSelectable: _propTypes.default.bool,
-    accessibilityOrientation: _propTypes.default.oneOf(['horizontal', 'vertical']),
-    accessibilityOwns: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-    accessibilityPlaceholder: _propTypes.default.string,
-    accessibilityPosInSet: _propTypes.default.number,
-    accessibilityPressed: _propTypes.default.bool,
-    accessibilityReadOnly: _propTypes.default.bool,
-    accessibilityRequired: _propTypes.default.bool,
-    accessibilityRoleDescription: _propTypes.default.string,
-    accessibilityRowCount: _propTypes.default.number,
-    accessibilityRowIndex: _propTypes.default.number,
-    accessibilityRowSpan: _propTypes.default.number,
-    accessibilitySelected: _propTypes.default.bool,
-    accessibilitySetSize: _propTypes.default.number,
-    accessibilitySort: _propTypes.default.oneOf(['ascending', 'descending', 'none', 'other']),
-    accessibilityValueMax: _propTypes.default.number,
-    accessibilityValueMin: _propTypes.default.number,
-    accessibilityValueNow: _propTypes.default.number,
-    accessibilityValueText: _propTypes.default.string
-  },
+  web: a11yPropTypes,
   // Ignore web-only props in native builds
   default: nativeA11yPropTypes
 }); // These RNW-only props only exist in RNW >=0.18. Catch them and map them according to platform
@@ -269,7 +272,7 @@ var _default = {
    * then spread the returned object into the component's props (usually its outer container).
    */
   select: (0, _getPropSelector.default)( // Allow all React Native accessibility props
-  a11yPropTypes, // Allow any `aria-*` attribute on web; ignore them on native
+  a11yPropTypesByPlatform, // Allow any `aria-*` attribute on web; ignore them on native
   _Platform.default.OS === 'web' && /^aria-/, // For the props added and deprecated in React Native Web 0.18, convert them to
   // a form that is platform-appropriate and RNW-version safe
   (key, value) => {

package/lib-module/BaseProvider/index.js

@@ -2,6 +2,7 @@ var _ThemeProvider$propTy;
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { PortalProvider } from '@gorhom/portal';
 import A11yInfoProvider from '../A11yInfoProvider';
 import ViewportProvider from '../ViewportProvider';
 import ThemeProvider from '../ThemeProvider';
@@ -18,7 +19,9 @@ const BaseProvider = _ref => {
       children: /*#__PURE__*/_jsx(ThemeProvider, {
         defaultTheme: defaultTheme,
         themeOptions: themeOptions,
-        children: children
+        children: /*#__PURE__*/_jsx(PortalProvider, {
+          children: children
+        })
       })
     })
   });

package/lib-module/Button/ButtonBase.js

@@ -171,11 +171,12 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
 const selectItemIconTokens = _ref8 => {
   let {
     color,
+    iconColor,
     iconSize
   } = _ref8;
   return {
     size: iconSize,
-    color
+    color: iconColor || color
   };
 };
 

package/lib-module/Carousel/Carousel.js

@@ -16,6 +16,8 @@ import SkipLink from '../SkipLink';
 import A11yText from '../A11yText';
 import CarouselStepTracker from './CarouselStepTracker';
 import CarouselThumbnailNavigation from './CarouselThumbnailNavigation';
+import CarouselTabsPanel from './CarouselTabs/CarouselTabsPanel';
+import CarouselTabsPanelItem from './CarouselTabs/CarouselTabsPanelItem';
 import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -138,7 +140,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onAnimationEnd,
     onIndexChanged,
     skipLinkHref,
-    refocus,
+    tabs,
+    refocus = Boolean(tabs),
     title = 'carousel',
     springConfig = undefined,
     thumbnails = undefined,
@@ -161,6 +164,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     nextIcon,
     showPreviousNextNavigation,
     showPanelNavigation,
+    showPanelTabs,
     spaceBetweenSlideAndPreviousNextNavigation
   } = themeTokens;
   const [activeIndex, setActiveIndex] = React.useState(0);
@@ -389,6 +393,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
     return "".concat(copyText[0].toUpperCase()).concat(copyText.slice(1));
   }, [activeIndex, childrenArray.length, itemLabel, getCopy, title]);
+  const activePanelNavigation = tabs && showPanelTabs ? /*#__PURE__*/_jsx(CarouselTabsPanel, {
+    items: tabs
+  }) : panelNavigation;
   return /*#__PURE__*/_jsxs(CarouselProvider, {
     activeIndex: activeIndex,
     goTo: goTo,
@@ -462,7 +469,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
         })
       })]
-    }), showPanelNavigation ? panelNavigation : null]
+    }), showPanelNavigation ? activePanelNavigation : null]
   });
 });
 Carousel.propTypes = { ...selectedSystemPropTypes,
@@ -543,6 +550,13 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
    */
   skipLinkHref: PropTypes.string,
 
+  /**
+   * If provided, defaults the navigation panel to a CarouselTabsPanel element passing each item as props for one tab.
+   *
+   * Be careful to ensure that the order of each element in the items array matches the order of each child in the Carousel.
+   */
+  tabs: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
+
   /**
    * If true, whenever a new slide comes into view, the focus of the Carousel switches to the start.
    *

package/lib-module/Carousel/CarouselTabs/CarouselTabs.js

@@ -4,7 +4,10 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useResponsiveProp } from '../../utils';
 import Carousel from '../Carousel';
-import CarouselTabsPanel from './CarouselTabsPanel';
+/**
+ * @deprecated Please use Carousel and pass the `tabs` prop.
+ */
+
 import { jsx as _jsx } from "react/jsx-runtime";
 const CarouselTabs = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
@@ -12,16 +15,14 @@ const CarouselTabs = /*#__PURE__*/forwardRef((_ref, ref) => {
     refocus = true,
     ...carouselProps
   } = _ref;
-  const panelNavigation = useResponsiveProp({
-    md: /*#__PURE__*/_jsx(CarouselTabsPanel, {
-      items: items
-    })
+  const tabs = useResponsiveProp({
+    md: items
   });
   return /*#__PURE__*/_jsx(Carousel, {
     refocus: refocus,
     ...carouselProps,
     ref: ref,
-    panelNavigation: panelNavigation,
+    tabs: tabs,
     children: items.map(_ref2 => {
       let {
         title,