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

package/generate-component-docs.js

@@ -0,0 +1,56 @@
+const fs = require('fs')
+const schema = require('@telus-uds/system-theme-tokens')
+const allExports = require('./src')
+
+const { a11yProps } = allExports
+const a11yPropTypes = Object.keys(a11yProps.types)
+
+const parseComponentDocs = (name, generated) => {
+  const { description } = generated // TODO parse markdown and split by heading
+  const props = {} // store derived prop data
+  const attributes = {
+    // any other computed attributes
+    acceptsRNA11yProps: a11yPropTypes.every((key) => key in generated.props)
+  }
+
+  Object.entries(generated.props).forEach(([propName, prop]) => {
+    if (prop.description?.includes('@ignore')) {
+      return // remove ignored props
+    }
+    if (attributes.acceptsRNA11yProps && a11yPropTypes.includes(propName)) {
+      return // remove a11y props if all supported (there are 30+, instead we have the above attribute to show this)
+    }
+
+    const out = { ...prop }
+
+    // check if this prop references the tokens schema
+    const tokensProp = out.type?.raw?.match(/getTokensPropType\('([A-z]+)'\)/)?.[1]
+    if (tokensProp) {
+      if (!schema.components[tokensProp]) {
+        throw new Error(`Unknown schema component reference: ${tokensProp} from component: ${name}`)
+      }
+      out.type = { ...out.type, raw: schema.components[tokensProp] }
+    }
+    props[propName] = out
+  })
+
+  return { docs: { description, props, attributes } }
+}
+
+const components = {}
+
+Object.entries(allExports).forEach(([name, exp]) => {
+  if (exp.__docgenInfo) {
+    // populated by babel-plugin-react-docgen
+    components[name] = parseComponentDocs(name, exp.__docgenInfo)
+
+    // check for second-level components e.g List.Item (can only be on a component)
+    Object.entries(exp).forEach(([subComponentName, prop]) => {
+      if (prop.__docgenInfo) {
+        components[name][subComponentName] = parseComponentDocs(subComponentName, prop.__docgenInfo)
+      }
+    })
+  }
+}, {})
+
+fs.writeFileSync('./component-docs.json', JSON.stringify({ schema, components }, null, 2))

package/lib/A11yText/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
@@ -21,17 +21,21 @@ 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; }
+
 /**
  * A11yText is a zero-size invisible element that adds text to be read by screen readers.
  *
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = ({
+const A11yText = /*#__PURE__*/(0, _react.forwardRef)(({
   text,
   heading,
   ...rest
-}) => {
+}, ref) => {
   const a11y = _propTypes2.a11yProps.select({
     // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
@@ -45,10 +49,11 @@ const A11yText = ({
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: styles.invisible,
+    ref: ref,
     ...a11y
   });
-};
-
+});
+A11yText.displayName = 'A11yText';
 A11yText.propTypes = {
   text: _propTypes.default.string.isRequired,
   heading: _propTypes.default.bool

package/lib/ActivityIndicator/Spinner.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _shared = require("./shared");
 
 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 SVG_RADIUS = 20;
 const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
@@ -19,25 +21,26 @@ const MIN_SVG_LENGTH = _shared.MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
 const MAX_SVG_LENGTH = (1 - _shared.MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
 const animationProps = {
   begin: '0s',
-  dur: "".concat(_shared.DURATION, "ms"),
+  dur: `${_shared.DURATION}ms`,
   fill: 'freeze',
   repeatCount: 'indefinite'
 };
 const bezierProps = {
   calcMode: 'spline',
   keyTimes: '0; 0.5; 1',
-  keySplines: "".concat(_shared.BEZIER.join(', '), " ; ").concat(_shared.BEZIER.join(', '))
+  keySplines: `${_shared.BEZIER.join(', ')} ; ${_shared.BEZIER.join(', ')}`
 }; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
 
-const Spinner = ({
+const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
   size,
   color,
   thickness,
   label
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
-  width: "".concat(size, "px"),
-  height: "".concat(size, "px"),
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  ref: ref,
+  width: `${size}px`,
+  height: `${size}px`,
   viewBox: "0 0 48 48",
   "aria-valuetext": label,
   role: "progressbar",
@@ -46,7 +49,7 @@ const Spinner = ({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
       attributeName: "transform",
       type: "rotate",
-      values: "-180 24 24;".concat(360 + _shared.MIN_STROKE_ANGLE - 180, " 24 24"),
+      values: `-180 24 24;${360 + _shared.MIN_STROKE_ANGLE - 180} 24 24`,
       ...animationProps
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("circle", {
       fill: "none",
@@ -60,19 +63,19 @@ const Spinner = ({
       strokeDashoffset: 0,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
         attributeName: "stroke-dashoffset",
-        values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),
+        values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
         ...animationProps,
         ...bezierProps
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
         attributeName: "stroke-dasharray",
-        values: "".concat(MIN_SVG_LENGTH, ", 200;").concat(MAX_SVG_LENGTH, ", 200;").concat(MIN_SVG_LENGTH, ", 200"),
+        values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
         ...animationProps,
         ...bezierProps
       })]
     })]
   })
-});
-
+}));
+Spinner.displayName = 'Spinner';
 Spinner.propTypes = _shared.propTypes;
 var _default = Spinner;
 exports.default = _default;

package/lib/ActivityIndicator/Spinner.native.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
 
@@ -21,15 +21,18 @@ 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 ea = _shared.MIN_EMPTY_ANGLE / 2;
 const sa = _shared.MIN_STROKE_ANGLE / 2;
-
-const Spinner = ({
+const Spinner = /*#__PURE__*/(0, _react.forwardRef)(({
   size,
   color,
   thickness,
   label
-}) => {
+}, ref) => {
   const {
     current: timer
   } = _react.default.useRef(new _Animated.default.Value(0));
@@ -58,6 +61,7 @@ const Spinner = ({
   }; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
     style: [styles.container],
     accessible: true,
     accessibilityLabel: label,
@@ -82,7 +86,7 @@ const Spinner = ({
           }
 
           const direction = index ? -1 : +1;
-          return "".concat(direction * (180 - (sa + ea)) * easing(progress) + rotation, "deg");
+          return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
         });
         const layerStyle = {
           width: size,
@@ -90,7 +94,7 @@ const Spinner = ({
           transform: [{
             rotate: timer.interpolate({
               inputRange: [0, 1],
-              outputRange: ["".concat(0 + ea + sa, "deg"), "".concat(2 * 360 + ea + sa, "deg")]
+              outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
             })
           }]
         };
@@ -139,8 +143,8 @@ const Spinner = ({
       })
     })
   });
-};
-
+});
+Spinner.displayName = 'Spinner';
 Spinner.propTypes = _shared.propTypes;
 
 const styles = _StyleSheet.default.create({

package/lib/Box/Box.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"));
 
@@ -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; }
+
 /**
  * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
@@ -107,7 +111,7 @@ const selectBoxStyles = tokens => {
  */
 
 
-const Box = ({
+const Box = /*#__PURE__*/(0, _react.forwardRef)(({
   space,
   horizontal = space,
   vertical = space,
@@ -115,18 +119,24 @@ const Box = ({
   bottom = vertical,
   left = horizontal,
   right = horizontal,
+  flex,
   children,
   variant,
   tokens,
   scroll,
+  tag,
+  accessibilityRole,
   testID,
+  dataSet,
   ...rest
-}) => {
-  const props = { ..._utils.a11yProps.select(rest),
+}, ref) => {
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils.a11yProps.select(rest),
     ..._utils.viewProps.select(rest)
   };
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Box', tokens, variant);
   const styles = {
+    flex,
     paddingLeft: (0, _utils.useSpacingScale)(left),
     paddingRight: (0, _utils.useSpacingScale)(right),
     paddingTop: (0, _utils.useSpacingScale)(top),
@@ -140,6 +150,8 @@ const Box = ({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, { ...scrollProps,
       ...props,
       testID: testID,
+      dataSet: dataSet,
+      ref: ref,
       children: children
     });
   }
@@ -147,22 +159,105 @@ const Box = ({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
     style: styles,
     testID: testID,
+    dataSet: dataSet,
+    ref: ref,
     children: children
   });
-};
+});
+Box.displayName = 'Box';
+Box.propTypes = { ..._utils.a11yProps.propTypes,
+  ..._utils.viewProps.types,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Box'),
 
-Box.propTypes = {
+  /**
+   * Sets default padding on all sides of the box using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   space: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Sets top and bottom padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   vertical: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Sets left and right padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   horizontal: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Sets bottom padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   bottom: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Sets left padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   left: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Sets right padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   right: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Sets top padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
   top: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Sets the `flex` style, which controls `flexGrow`, `flexShrink` and `flexBasis` styles.
+   *
+   * Set as 1 for the box to stretch and grow to fit in the available space, or another number to share
+   * space disproportionately with siblings. See https://reactnative.dev/docs/flexbox#flex for details.
+   *
+   * With the default `0`, the box takes its minimum width from its content.
+   */
+  flex: _propTypes.default.number,
+
+  /**
+   * Renders a scrollable ScrollView instead of an unscrollable View.
+   *
+   * May take an object of ScrollView props which are passed to the rendered ScrollView.
+   */
   scroll: _propTypes.default.oneOfType([_propTypes.default.bool, _ScrollView.default.propTypes ? _propTypes.default.shape(_ScrollView.default.propTypes) : _propTypes.default.object]),
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('Box'),
+
+  /**
+   * 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),
+
+  /**
+   * Use in tests if the box itself needs to be targetted and no other way of selecting the
+   * box is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`).
+   */
   testID: _propTypes.default.string,
+
+  /**
+   * @ignore
+   */
+  dataSet: _propTypes.default.object,
+
+  /**
+   * Box accepts any content as children.
+   */
   children: _propTypes.default.node.isRequired
 };
 var _default = Box;

package/lib/Button/Button.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
 
@@ -17,25 +17,26 @@ var _propTypes2 = require("../utils/propTypes");
 
 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; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Button = ({
+const Button = /*#__PURE__*/(0, _react.forwardRef)(({
   accessibilityRole = 'button',
   tokens,
   variant,
   ...props
-}) => {
+}, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...props,
     tokens: getTokens,
-    accessibilityRole: accessibilityRole
+    accessibilityRole: accessibilityRole,
+    ref: ref
   });
-};
-
+});
+Button.displayName = 'Button';
 Button.propTypes = { ..._propTypes2.a11yProps.types,
   ..._propTypes.default,
   children: _propTypes.textAndA11yText

package/lib/Button/ButtonBase.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 
@@ -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 getOuterBorderOffset = ({
   outerBorderGap = 0,
   outerBorderWidth = 0
@@ -83,7 +87,7 @@ const selectOuterWidthStyles = ({
 
 
   if (_Platform.default.OS === 'web') {
-    widthStyles.width = "calc(".concat(width, " + ").concat(outerBorderOffset * 2, "px)");
+    widthStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
     return widthStyles;
   } // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
 
@@ -156,7 +160,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, {
   return _Platform.default.select({
     web: {
       // if it would overflow the container, wraps instead
-      maxWidth: "calc(100% + ".concat(getOuterBorderOffset(themeTokens) * 2, "px)"),
+      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
       outline: 'none',
       // removes the default browser :focus outline
       ...(0, _utils2.getCursorStyle)(inactive, accessibilityRole)
@@ -165,7 +169,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, {
   });
 };
 
-const ButtonBase = ({
+const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)(({
   href,
   hrefAttrs,
   children,
@@ -175,8 +179,9 @@ const ButtonBase = ({
   // alias for inactive
   inactive = disabled,
   selected = false,
+  dataSet,
   ...rest
-}) => {
+}, ref) => {
   const extraButtonState = {
     inactive,
     selected
@@ -192,6 +197,7 @@ const ButtonBase = ({
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
     href: href,
     onPress: _utils2.linkProps.handleHref({
       href,
@@ -199,6 +205,7 @@ const ButtonBase = ({
     }),
     style: getPressableStyle,
     disabled: inactive,
+    dataSet: dataSet,
     hrefAttrs: hrefAttrs,
     ...a11y,
     children: pressableState => {
@@ -226,8 +233,8 @@ const ButtonBase = ({
       });
     }
   });
-};
-
+});
+ButtonBase.displayName = 'ButtonBase';
 ButtonBase.propTypes = { ..._utils2.a11yProps.types,
   ..._propTypes.default,
   ..._utils2.linkProps.types

package/lib/Button/ButtonGroup.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 _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
@@ -29,7 +31,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const ButtonGroup = ({
+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 ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   tokens,
   items = [],
@@ -45,7 +51,7 @@ const ButtonGroup = ({
     default: 'none'
   }),
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
     viewport
@@ -77,10 +83,12 @@ const ButtonGroup = ({
     space: space,
     direction: direction,
     tokens: stackTokens,
+    ref: ref,
     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
 
@@ -90,9 +98,9 @@ const ButtonGroup = ({
         currentValues
       }]);
 
-      const handlePress = () => {
+      const handlePress = event => {
         if (pressHandlers.onPress) pressHandlers.onPress();
-        toggleOneValue(id);
+        toggleOneValue(id, event);
       };
 
       const itemA11y = {
@@ -105,7 +113,9 @@ const ButtonGroup = ({
       }; // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
       // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
 
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...pressHandlers,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+        ref: itemRef,
+        ...pressHandlers,
         onPress: handlePress,
         tokens: getButtonTokens,
         selected: isSelected,
@@ -115,8 +125,8 @@ const ButtonGroup = ({
       }, id);
     })
   });
-};
-
+});
+ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = { ..._propTypes2.a11yProps.propTypes,
   ..._propTypes2.pressProps.propTypes,
   tokens: (0, _propTypes2.getTokensPropType)('ButtonGroup'),
@@ -149,7 +159,12 @@ ButtonGroup.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 button in the ButtonGroup
+     */
+    ref: _airbnbPropTypes.default.ref()
   })),
 
   /**