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

package/lib/Button/ButtonLink.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,22 +17,23 @@ var _ThemeProvider = require("../ThemeProvider");
 
 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 }; }
-
 /**
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
  * ButtonLink is a block-level component and should not be used inline.
  */
-const ButtonLink = ({
+const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)(({
   accessibilityRole = 'link',
   tokens,
   variant,
+  dataSet,
   ...props
-}) => {
+}, ref) => {
   const {
     hrefAttrs,
     rest
@@ -40,13 +41,15 @@ const ButtonLink = ({
 
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
     accessibilityRole: accessibilityRole,
     tokens: getTokens,
     hrefAttrs: hrefAttrs,
+    dataSet: dataSet,
     ...rest
   });
-};
-
+});
+ButtonLink.displayName = 'ButtonLink';
 ButtonLink.propTypes = { ..._propTypes2.a11yProps.types,
   ..._propTypes.default,
   ..._propTypes2.linkProps.types,

package/lib/Card/Card.js

@@ -75,6 +75,7 @@ const Card = ({
   children,
   tokens,
   variant,
+  dataSet,
   ...rest
 }) => {
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -83,6 +84,7 @@ const Card = ({
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
     tokens: themeTokens,
+    dataSet: dataSet,
     ...rest,
     children: children
   });

package/lib/Card/CardBase.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; }
+
 // Ensure explicit selection of tokens
 const selectStyles = ({
   flex,
@@ -53,25 +57,29 @@ const selectStyles = ({
  */
 
 
-const CardBase = ({
+const CardBase = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   tokens,
+  dataSet,
   ...rest
-}) => {
+}, ref) => {
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
   const props = { ..._propTypes2.a11yProps.select(rest),
     ..._propTypes2.viewProps.select(rest)
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: cardStyle,
+    dataSet: dataSet,
+    ref: ref,
     ...props,
     children: children
   });
-};
-
+});
+CardBase.displayName = 'CardBase';
 CardBase.propTypes = {
   children: _propTypes.default.node,
   tokens: (0, _utils.getTokensPropType)('Card'),
+  ..._propTypes2.viewProps.types,
   ..._propTypes2.a11yProps.types
 };
 var _default = CardBase;

package/lib/Card/PressableCardBase.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.selectPressableCardTokens = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -27,6 +27,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 tokenKeys = [...(0, _utils.getTokenNames)('Card'), // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];
@@ -40,8 +44,7 @@ const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key
 
 
 exports.selectPressableCardTokens = selectPressableCardTokens;
-
-const PressableCardBase = ({
+const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   tokens,
   checked,
@@ -52,7 +55,7 @@ const PressableCardBase = ({
   onPress,
   accessibilityRole = href ? 'link' : undefined,
   ...rest
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
 
   const a11y = _propTypes2.a11yProps.select({ ...rest,
@@ -105,12 +108,13 @@ const PressableCardBase = ({
     onPress
   });
 
-  const handleKeyDown = e => {
+  const handleKeyDown = event => {
     // The expected keyboard shortcut for selecting a focused item is the Space key
-    if ((e === null || e === void 0 ? void 0 : e.key) === ' ') handleChange();
+    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
     href: href,
     onPress: handleChange,
     onKeyDown: handleKeyDown,
@@ -122,8 +126,8 @@ const PressableCardBase = ({
       children: typeof children === 'function' ? children(getCardState(pressableState)) : children
     })
   });
-};
-
+});
+PressableCardBase.displayName = 'PressableCardBase';
 PressableCardBase.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {

package/lib/Checkbox/Checkbox.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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
@@ -37,6 +39,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; }
+
 // @todo move `LabelContent` outside of the `InputLabel` and fix
 // the issue with the cursor not being pointer on Web
 const selectInputStyles = ({
@@ -55,12 +61,16 @@ const selectInputStyles = ({
   borderWidth: inputBorderWidth,
   borderRadius: inputBorderRadius,
   backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
-  outlineStyle: 'solid',
-  outlineColor: inputOutlineColor,
-  outlineWidth: inputOutlineWidth,
   height: inputHeight,
   width: inputWidth,
-  ...(0, _ThemeProvider.applyShadowToken)(inputShadow)
+  ...(0, _ThemeProvider.applyShadowToken)(inputShadow),
+  ..._Platform.default.select({
+    web: {
+      outlineStyle: 'solid',
+      outlineColor: inputOutlineColor,
+      outlineWidth: inputOutlineWidth
+    }
+  })
 });
 
 const selectLabelStyles = ({
@@ -137,7 +147,7 @@ const selectFeedbackTokens = ({
  */
 
 
-const Checkbox = ({
+const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(({
   checked,
   defaultChecked,
   error = false,
@@ -151,7 +161,7 @@ const Checkbox = ({
   value,
   variant,
   ...rest
-}) => {
+}, ref) => {
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -181,23 +191,24 @@ const Checkbox = ({
     }
   });
 
-  const handleChange = () => {
+  const handleChange = event => {
     if (!inactive) {
-      setIsChecked(!isChecked);
+      setIsChecked(!isChecked, event);
     }
   };
 
-  const handleKeyDown = e => {
+  const handleKeyDown = event => {
     // The expected keyboard shortcut for activating a checkbox is the Space key
-    if ((e === null || e === void 0 ? void 0 : e.key) === ' ') handleChange();
+    if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
   };
 
   const accessibilityProps = _propTypes2.a11yProps.select(rest);
 
   const uniqueId = (0, _useUniqueId.default)('checkbox');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.wrapper,
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       direction: feedbackPosition === 'top' ? 'column-reverse' : 'column',
       space: 0,
@@ -262,8 +273,8 @@ const Checkbox = ({
       })]
     })
   });
-};
-
+});
+Checkbox.displayName = 'Checkbox';
 Checkbox.propTypes = { ..._propTypes2.a11yProps.propTypes,
 
   /**

package/lib/Checkbox/CheckboxGroup.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 _ViewportProvider = require("../ViewportProvider");
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -25,6 +27,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 group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.
  *
@@ -72,7 +78,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * />
  * ```
  */
-const CheckboxGroup = ({
+const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   radioTokens,
   variant,
@@ -88,7 +94,7 @@ const CheckboxGroup = ({
   readOnly,
   name: inputGroupName,
   inactive
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     space,
@@ -108,16 +114,18 @@ const CheckboxGroup = ({
   const checkboxes = items.map(({
     label,
     id,
-    onChange: itemOnChange
+    onChange: itemOnChange,
+    ref: itemRef
   }, index) => {
-    const checkboxId = id || "Checkbox[".concat(index, "]");
+    const checkboxId = id || `Checkbox[${index}]`;
 
-    const handleChange = (...args) => {
-      if (typeof itemOnChange === 'function') itemOnChange(...args);
-      toggleOneValue(checkboxId);
+    const handleChange = (newCheckedState, event) => {
+      if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
+      toggleOneValue(checkboxId, event);
     };
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      ref: itemRef,
       id: checkboxId,
       checked: currentValues.includes(checkboxId),
       onChange: handleChange,
@@ -129,6 +137,7 @@ const CheckboxGroup = ({
     }, checkboxId);
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    ref: ref,
     name: inputGroupName,
     legend: legend,
     tooltip: tooltip,
@@ -136,14 +145,14 @@ const CheckboxGroup = ({
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
-    status: validation,
+    validation: validation,
     children: (0, _StackView.getStackedContent)(checkboxes, {
       space,
       direction: 'column'
     })
   });
-};
-
+});
+CheckboxGroup.displayName = 'CheckboxGroup';
 CheckboxGroup.propTypes = {
   /**
    * Optional theme token overrides for the outer CheckboxGroup component
@@ -166,7 +175,8 @@ CheckboxGroup.propTypes = {
   items: _propTypes.default.arrayOf(_propTypes.default.exact({
     label: _propTypes.default.string,
     id: _propTypes.default.string,
-    onChange: _propTypes.default.func
+    onChange: _propTypes.default.func,
+    ref: _airbnbPropTypes.default.ref()
   })),
 
   /**

package/lib/Divider/Divider.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; }
+
 /**
  * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
  * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
@@ -66,13 +70,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-const Divider = ({
+const Divider = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   vertical = false,
   space,
   tokens,
   testID
-}) => {
+}, ref) => {
   const {
     color,
     width
@@ -91,6 +95,7 @@ const Divider = ({
   } : // There are no such equivalent attributes for native
   {};
   const divider = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
     style: [styles.divider, borderStyles],
     testID: testID,
     ...a11y
@@ -102,13 +107,13 @@ const Divider = ({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
-      testID: testID ? "".concat(testID, "-Spacer-before") : undefined
+      testID: testID ? `${testID}-Spacer-before` : undefined
     }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
-      testID: testID ? "".concat(testID, "-Spacer-after") : undefined
+      testID: testID ? `${testID}-Spacer-after` : undefined
     })]
   });
-};
-
+});
+Divider.displayName = 'Divider';
 Divider.propTypes = {
   tokens: (0, _utils.getTokensPropType)('Divider'),
   space: _utils.spacingProps.types.spacingValue,

package/lib/ExpandCollapse/Accordion.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _ExpandCollapse = _interopRequireDefault(require("./ExpandCollapse"));
 
@@ -13,13 +13,19 @@ 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; }
+
 /**
  * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
  */
-const Accordion = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, { ...props,
+const Accordion = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+  ref: ref,
+  ...props,
   maxOpen: 1
-});
-
+}));
+Accordion.displayName = 'Accordion';
 Accordion.propTypes = _ExpandCollapse.default.propTypes;
 var _default = Accordion;
 exports.default = _default;

package/lib/ExpandCollapse/Control.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"));
 
@@ -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; }
+
 function selectContainerStyles({
   backgroundColor,
   borderColor,
@@ -66,7 +70,7 @@ function selectIconTokens(tokens) {
   };
 }
 
-const ExpandCollapseControl = ({
+const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)(({
   onPress,
   isExpanded,
   children,
@@ -74,7 +78,7 @@ const ExpandCollapseControl = ({
   accessibilityRole = 'button',
   variant,
   rest
-}) => {
+}, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
 
   const a11y = _utils.a11yProps.select({ ...rest,
@@ -100,7 +104,9 @@ const ExpandCollapseControl = ({
 
   const getPressableStyle = pressableState => selectContainerStyles(getControlTokens(pressableState));
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, { ...a11y,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    ...a11y,
     onPress: onPress,
     style: getPressableStyle,
     children: pressableState => {
@@ -117,8 +123,8 @@ const ExpandCollapseControl = ({
       });
     }
   });
-};
-
+});
+ExpandCollapseControl.displayName = 'ExpandCollapseControl';
 ExpandCollapseControl.propTypes = { ..._utils.a11yProps.propTypes,
   tokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
   variant: _utils.variantProp.propType,

package/lib/ExpandCollapse/ExpandCollapse.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"));
 
@@ -19,6 +19,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; }
+
 function selectBorderStyles(tokens) {
   return {
     borderBottomWidth: tokens.borderWidth,
@@ -35,7 +39,7 @@ function selectBorderStyles(tokens) {
  */
 
 
-const ExpandCollapse = ({
+const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   tokens,
   variant,
@@ -43,7 +47,7 @@ const ExpandCollapse = ({
   open,
   initialOpen,
   onChange
-}) => {
+}, ref) => {
   const {
     currentValues: openIds,
     toggleOneValue: onToggle,
@@ -58,6 +62,7 @@ const ExpandCollapse = ({
   });
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapse', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
     style: selectBorderStyles(themeTokens),
     children: typeof children === 'function' ? children({
       openIds,
@@ -67,8 +72,8 @@ const ExpandCollapse = ({
       unsetValues
     }) : children
   });
-};
-
+});
+ExpandCollapse.displayName = 'ExpandCollapse';
 ExpandCollapse.propTypes = {
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('ExpandCollapse'),

package/lib/ExpandCollapse/Panel.js

@@ -57,7 +57,7 @@ const selectContainerStyles = ({
  */
 
 
-const ExpandCollapsePanel = ({
+const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)(({
   openIds = [],
   panelId,
   onToggle,
@@ -68,7 +68,7 @@ const ExpandCollapsePanel = ({
   tokens,
   variant,
   ...rest
-}) => {
+}, ref) => {
   const [containerHeight, setContainerHeight] = (0, _react.useState)(null);
   const isExpanded = openIds.includes(panelId);
 
@@ -81,9 +81,9 @@ const ExpandCollapsePanel = ({
     expanded: isExpanded
   });
 
-  const handleControlPress = () => {
-    onToggle(panelId);
-    if (onPress) onPress(panelId);
+  const handleControlPress = event => {
+    onToggle(panelId, event);
+    if (onPress) onPress(panelId, event);
   };
 
   const onContainerLayout = event => {
@@ -110,6 +110,7 @@ const ExpandCollapsePanel = ({
   } : undefined;
   const focusabilityProps = isExpanded ? {} : _utils.a11yProps.nonFocusableProps;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: ref,
     style: selectGroupStyles(themeTokens),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Control.default, { ...a11y,
       isExpanded: isExpanded,
@@ -129,8 +130,8 @@ const ExpandCollapsePanel = ({
       })
     })]
   });
-};
-
+});
+ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
 ExpandCollapsePanel.propTypes = {
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('ExpandCollapsePanel'),