@telus-uds/components-base 0.0.2-prerelease.9 → 1.0.0

package/lib/StackView/StackWrapBox.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,6 +25,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 const offsetSides = {
   row: 'marginBottom',
   column: 'marginRight'
@@ -50,22 +54,25 @@ const spaceSides = {
  * between the container and the stacked children, and requires a negative margin on the container.
  */
 
-const StackWrapBox = ({
+const StackWrapBox = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   gap = space,
   direction: directionProp = 'row',
   children,
   tokens,
   variant,
+  tag,
+  accessibilityRole,
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  const props = { ..._utils.a11yProps.select(rest),
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils.a11yProps.select(rest),
     ..._utils.viewProps.select(rest)
   }; // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
 
@@ -82,13 +89,16 @@ const StackWrapBox = ({
     space: 0,
     box: boxProps
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...props,
     style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], offsetStyle],
     children: content
   });
-};
-
+});
+StackWrapBox.displayName = 'StackWrapBox';
 StackWrapBox.propTypes = { ..._utils.a11yProps.propTypes,
+  tokens: (0, _utils.getTokensPropType)('StackView'),
 
   /**
    * Sets the `flexDirection` of the container
@@ -96,12 +106,27 @@ StackWrapBox.propTypes = { ..._utils.a11yProps.propTypes,
   direction: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
 
   /**
-   * The size of the spacer according to the theme's spacing scale.
+   * The size of the space between items according to the theme's spacing scale.
    * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
    * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
    */
   space: _utils.spacingProps.types.spacingValue,
 
+  /**
+   * The size of the space between lines of content, according to the theme's spacing scale. By default, matches `space`.
+   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
+   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
+   */
+  gap: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: _propTypes.default.oneOf(_utils.layoutTags),
+
   /**
    * A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
    * wrapped in a component. If necessary, children may be wrapped in one React Fragment.

package/lib/StackView/StackWrapGap.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
@@ -25,6 +25,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 /**
  * The primary implementation of StackWrap.
  *
@@ -35,21 +39,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * - The `space` between items is the same as the `gap` between wrapped rows (this is the
  *   default if `gap` prop is undefined)
  */
-const StackWrapGap = ({
+const StackWrapGap = /*#__PURE__*/(0, _react.forwardRef)(({
   space = 1,
   tokens,
   variant,
   direction: directionProp = 'row',
   children,
+  tag,
+  accessibilityRole,
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const direction = (0, _utils.useResponsiveProp)(directionProp, 'row');
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('StackView', tokens, variant, {
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
-  const props = { ..._utils.a11yProps.select(rest),
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils.a11yProps.select(rest),
     ..._utils.viewProps.select(rest)
   };
   const size = (0, _utils.useSpacingScale)(space);
@@ -60,12 +67,14 @@ const StackWrapGap = ({
     direction,
     space: 0
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...props,
     style: [flexStyles, _common.staticStyles.wrap, _common.staticStyles[direction], gapStyle],
     children: content
   });
-};
-
+});
+StackWrapGap.displayName = 'StackWrapGap';
 StackWrapGap.propTypes = _StackWrapBox.default.propTypes;
 var _default = StackWrapGap;
 exports.default = _default;

package/lib/StackView/common.js

@@ -12,11 +12,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const selectFlexStyles = ({
   alignItems,
   justifyContent,
-  flexGrow
+  flexGrow,
+  flexShrink
 }) => ({
   alignItems,
   justifyContent,
-  flexGrow
+  flexGrow,
+  flexShrink
 });
 
 exports.selectFlexStyles = selectFlexStyles;

package/lib/StackView/getStackedContent.js

@@ -64,7 +64,7 @@ const getStackedContent = (children, {
   const validChildren = _react.Children.toArray(topLevelChildren).filter(Boolean);
 
   const content = validChildren.reduce((newChildren, child, index) => {
-    const boxID = "Stack-Box-".concat(index);
+    const boxID = `Stack-Box-${index}`;
     const item = box ?
     /*#__PURE__*/
     // If wrapped in Box, that Box needs a key.
@@ -74,7 +74,7 @@ const getStackedContent = (children, {
       testID: boxID
     }, child) : child;
     if (!index || !space && !divider) return [...newChildren, item];
-    const testID = "Stack-".concat(divider ? 'Divider' : 'Spacer', "-").concat(index);
+    const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {
       testID,
       key: testID,

package/lib/StepTracker/StepTracker.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -35,6 +35,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 const selectContainerStyles = ({
   containerPaddingBottom,
   containerPaddingLeft,
@@ -100,7 +104,7 @@ const selectStepTrackerLabelStyles = ({
  */
 
 
-const StepTracker = ({
+const StepTracker = /*#__PURE__*/(0, _react.forwardRef)(({
   current = 0,
   copy = 'en',
   dictionary = _dictionary.default,
@@ -108,7 +112,7 @@ const StepTracker = ({
   tokens,
   variant,
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     showStepTrackerLabel,
@@ -135,6 +139,7 @@ const StepTracker = ({
     ..._propTypes2.a11yProps.select(rest)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
     style: selectContainerStyles(themeTokens),
     ...accessibilityProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
@@ -160,8 +165,8 @@ const StepTracker = ({
       })]
     })
   });
-};
-
+});
+StepTracker.displayName = 'StepTracker';
 StepTracker.propTypes = {
   current: _propTypes.default.number,
   copy: _propTypes.default.oneOf(['en', 'fr']),

package/lib/Tabs/Tabs.js

@@ -9,20 +9,18 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
 var _ThemeProvider = require("../ThemeProvider");
 
 var _StackView = _interopRequireDefault(require("../StackView"));
 
 var _utils = require("../utils");
 
-var _HorizontalScroll = _interopRequireWildcard(require("./HorizontalScroll"));
+var _HorizontalScroll = _interopRequireWildcard(require("../HorizontalScroll"));
 
 var _TabsItem = _interopRequireDefault(require("./TabsItem"));
 
-var _TabsScrollButton = _interopRequireDefault(require("./TabsScrollButton"));
-
-var _itemPositions = require("./itemPositions");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,11 +29,16 @@ 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 {
+  selectHorizontalScrollTokens,
+  useItemPositions
+} = _HorizontalScroll.horizontalScrollUtils;
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
  */
-const Tabs = ({
+
+const Tabs = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   itemTokens,
   scrollButtonTokens,
@@ -44,7 +47,7 @@ const Tabs = ({
   initialValue,
   onChange,
   items = []
-}) => {
+}, ref) => {
   const {
     space,
     ...themeTokens
@@ -57,18 +60,19 @@ const Tabs = ({
     initialValue,
     onChange
   });
-  const [itemPositions, isPositioningReady] = (0, _itemPositions.useItemPositions)();
-  (0, _utils.useHash)((0, _react.useCallback)(hash => {
+  const [itemPositions, isPositioningReady] = useItemPositions();
+  (0, _utils.useHash)((0, _react.useCallback)((hash, event) => {
     const hashItem = hash && items.find(({
       href
     }) => hash === href);
     const hashId = hashItem && (hashItem.id || hashItem.label);
-    if (hashId) setTimeout(setValue(hashId), 500);
+    if (hashId) setTimeout(setValue(hashId, event), 500);
   }, [items, setValue]), isPositioningReady);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
-    ScrollButton: _TabsScrollButton.default,
+    ref: ref,
+    ScrollButton: _HorizontalScroll.HorizontalScrollButton,
     itemPositions: itemPositions,
-    tokens: (0, _HorizontalScroll.selectHorizontalScrollTokens)(themeTokens),
+    tokens: selectHorizontalScrollTokens(themeTokens),
     scrollButtonTokens: scrollButtonTokens,
     accessibilityRole: "tablist",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
@@ -77,14 +81,16 @@ const Tabs = ({
       children: items.map(({
         href,
         label,
-        id
+        id,
+        ref: itemRef
       }, index) => {
-        const itemId = id !== null && id !== void 0 ? id : label;
+        const itemId = id ?? label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
 
-        const handlePress = () => setValue(itemId);
+        const handlePress = event => setValue(itemId, event);
 
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabsItem.default, {
+          ref: itemRef,
           href: href,
           variant: variant,
           tokens: itemTokens,
@@ -97,20 +103,21 @@ const Tabs = ({
       })
     })
   });
-};
-
+});
+Tabs.displayName = 'Tabs';
 Tabs.propTypes = {
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
     href: _propTypes.default.string,
     label: _propTypes.default.string,
-    id: _propTypes.default.string
+    id: _propTypes.default.string,
+    ref: _airbnbPropTypes.default.ref()
   })),
   value: _propTypes.default.string,
   initialValue: _propTypes.default.string,
   onChange: _propTypes.default.func,
   tokens: (0, _utils.getTokensPropType)('Tabs'),
   itemTokens: (0, _utils.getTokensPropType)('TabsItem'),
-  scrollButtonTokens: (0, _utils.getTokensPropType)('TabsScrollButton'),
+  scrollButtonTokens: (0, _utils.getTokensPropType)('HorizontalScrollButton'),
   variant: _utils.variantProp.propType
 };
 var _default = Tabs;

package/lib/Tabs/TabsItem.js

@@ -19,15 +19,13 @@ var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Te
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
-
 var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
 
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 
-var _itemPositions = require("./itemPositions");
+var _HorizontalScroll = require("../HorizontalScroll");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -37,6 +35,11 @@ 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 {
+  itemPositionsPropType,
+  getItemPositionLayoutHandler
+} = _HorizontalScroll.horizontalScrollUtils;
+
 const selectHighlightBarStyles = ({
   highlightColor,
   highlightBarBorderRadius = 0,
@@ -66,9 +69,9 @@ const selectHighlightTriangleStyles = ({
     width: 0,
     borderWidth: highlightTriangleSize,
     borderTopColor: highlightColor,
-    borderBottomColor: _rn.default.color.transparent,
-    borderLeftColor: _rn.default.color.transparent,
-    borderRightColor: _rn.default.color.transparent
+    borderBottomColor: 'transparent',
+    borderLeftColor: 'transparent',
+    borderRightColor: 'transparent'
   }
 });
 
@@ -95,7 +98,7 @@ const selectContainerStyles = ({
  */
 
 
-const TabsItem = ({
+const TabsItem = /*#__PURE__*/(0, _react.forwardRef)(({
   onPress,
   href,
   variant,
@@ -112,7 +115,7 @@ const TabsItem = ({
     selected
   },
   ...rest
-}) => {
+}, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('TabsItem', tokens, variant);
 
   const resolveTokens = pressableState => (0, _utils.resolvePressableTokens)(getTokens, pressableState, {
@@ -130,7 +133,7 @@ const TabsItem = ({
     }];
   };
 
-  const handleLayout = (0, _itemPositions.getItemPositionLayoutHandler)(itemPositions.positions, index); // On press, update the selection, call any press handler, and open any href in platform-appropriate way
+  const handleLayout = getItemPositionLayoutHandler(itemPositions.positions, index); // On press, update the selection, call any press handler, and open any href in platform-appropriate way
 
   const openHref = href && _utils.linkProps.handleHref({
     href
@@ -160,6 +163,7 @@ const TabsItem = ({
 
   }, [selected, index, itemPositions]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
     onPress: handlePress,
     href: href,
     style: getPressableStyle,
@@ -200,8 +204,8 @@ const TabsItem = ({
       });
     }
   });
-};
-
+});
+TabsItem.displayName = 'TabsItem';
 TabsItem.propTypes = { ..._utils.a11yProps.propTypes,
   tokens: (0, _utils.getTokensPropType)('TabsItem'),
   variant: _utils.variantProp.propType,
@@ -209,7 +213,7 @@ TabsItem.propTypes = { ..._utils.a11yProps.propTypes,
   href: _propTypes.default.string,
   index: _propTypes.default.number,
   selected: _propTypes.default.bool,
-  itemPositions: _itemPositions.itemPositionsPropType,
+  itemPositions: itemPositionsPropType,
   children: _propTypes.default.string
 };
 

package/lib/Tags/Tags.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
@@ -35,6 +37,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 const selectIconTextTokens = ({
   icon,
   iconPosition,
@@ -71,7 +77,7 @@ const selectIconTextTokens = ({
   }
 });
 
-const Tags = ({
+const Tags = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   tokens,
   items = [],
@@ -86,7 +92,7 @@ const Tags = ({
     default: 'none'
   }),
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tags', tokens, variant, {
     viewport
@@ -117,14 +123,17 @@ const Tags = ({
   });
 
   const itemA11yRole = 'checkbox';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, { ...a11y,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    ref: ref,
+    ...a11y,
     space: space,
     direction: direction,
     tokens: stackTokens,
     children: items.map(({
       label,
       id = label,
-      accessibilityLabel
+      accessibilityLabel,
+      ref: itemRef
     }, index) => {
       const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
 
@@ -134,9 +143,9 @@ const Tags = ({
         currentValues
       }]);
 
-      const handlePress = () => {
+      const handlePress = event => {
         if (pressHandlers.onPress) pressHandlers.onPress();
-        toggleOneValue(id);
+        toggleOneValue(id, event);
       };
 
       const itemA11y = {
@@ -147,7 +156,9 @@ const Tags = ({
         accessibilityLabel,
         ..._propTypes2.a11yProps.getPositionInSet(items.length, index)
       };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...pressHandlers,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+        ref: itemRef,
+        ...pressHandlers,
         onPress: handlePress,
         tokens: getButtonTokens,
         selected: isSelected,
@@ -189,8 +200,8 @@ const Tags = ({
       }, id);
     })
   });
-};
-
+});
+Tags.displayName = 'Tags';
 Tags.propTypes = { ..._propTypes2.a11yProps.propTypes,
   ..._propTypes2.pressProps.propTypes,
   tokens: (0, _propTypes2.getTokensPropType)('Tags'),
@@ -222,7 +233,12 @@ Tags.propTypes = { ..._propTypes2.a11yProps.propTypes,
      * which will be used in code and passed to any onChange function.
      * If not provided, the label is used.
      */
-    id: _propTypes.default.string
+    id: _propTypes.default.string,
+
+    /**
+     * An optional ref for one individual Tag button in the tags
+     */
+    ref: _airbnbPropTypes.default.ref()
   })),
 
   /**

package/lib/TextInput/TextArea.js

@@ -53,11 +53,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * or an indicator that the field is optional.
  * It is a more usable and accessible option than the HTML `placeholder` attribute.
  */
-function TextArea({
+const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
   ...remainingProps
-}) {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
   const [inputHeight, setInputHeight] = (0, _react.useState)(); // adjust the text area's height as new lines are added to the content
 
@@ -92,13 +92,15 @@ function TextArea({
     children: ({
       a11yProps,
       inputId
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, { ...inputProps,
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      ref: ref,
+      ...inputProps,
       ...a11yProps,
       nativeID: inputId
     })
   });
-}
-
+});
+TextArea.displayName = 'TextArea';
 TextArea.propTypes = { ..._propTypes.default.types,
   ..._propTypes2.default,
   tokens: (0, _utils.getTokensPropType)('TextArea', 'TextInput'),

package/lib/TextInput/TextInput.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("../utils");
 
@@ -21,6 +21,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -39,11 +43,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-function TextInput({
+const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
   ...remainingProps
-}) {
+}, ref) => {
   const {
     props: supportsProps,
     rest
@@ -59,13 +63,15 @@ function TextInput({
     children: ({
       a11yProps,
       inputId
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, { ...inputProps,
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      ref: ref,
+      ...inputProps,
       ...a11yProps,
       nativeID: inputId
     })
   });
-}
-
+});
+TextInput.displayName = 'TextInput';
 TextInput.propTypes = { ..._propTypes.default.types,
   ..._propTypes2.default,
   tokens: (0, _utils.getTokensPropType)('TextInput'),