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

package/lib/Radio/Radio.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"));
 
@@ -31,12 +31,12 @@ var _StackView = _interopRequireDefault(require("../StackView"));
 
 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 }; }
-
 // @todo move `LabelContent` outside of the `InputLabel` and fix
 // the issue with the cursor not being pointer on Web
 const selectContainerStyles = ({
@@ -67,7 +67,7 @@ const selectDescriptionStyles = ({
   inputSize,
   labelMarginLeft = 0
 }) => ({
-  marginLeft: descriptionMarginLeft !== null && descriptionMarginLeft !== void 0 ? descriptionMarginLeft : containerPaddingLeft + inputSize + labelMarginLeft,
+  marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
   ...(0, _ThemeProvider.applyTextStyles)({
     fontSize: descriptionFontSize,
     lineHeight: descriptionLineHeight
@@ -123,7 +123,7 @@ const selectLabelStyles = ({
  */
 
 
-const Radio = ({
+const Radio = /*#__PURE__*/(0, _react.forwardRef)(({
   checked,
   defaultChecked,
   description,
@@ -137,7 +137,7 @@ const Radio = ({
   value,
   variant,
   ...rest
-}) => {
+}, ref) => {
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -154,22 +154,23 @@ const Radio = ({
     ...variant
   });
 
-  const handleChange = () => {
+  const handleChange = event => {
     if (!inactive && !isChecked) {
-      setIsChecked(true);
+      setIsChecked(true, event);
     }
   };
 
-  const handleKeyDown = e => {
+  const handleKeyDown = event => {
     // The expected keyboard shortcut for activating a radio 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, _utils.useUniqueId)('radio');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
     disabled: inactive,
     onKeyDown: handleKeyDown,
     onPress: handleChange,
@@ -217,8 +218,8 @@ const Radio = ({
       });
     }
   });
-};
-
+});
+Radio.displayName = 'Radio';
 Radio.propTypes = { ..._propTypes2.a11yProps.propTypes,
 
   /**

package/lib/Radio/RadioButton.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.selectRadioButtonTokens = 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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -23,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; }
+
 // TODO: roll out a standard approach to token sets
 // https://github.com/telus/universal-design-system/issues/782
 const tokenKeys = ['checkedBackgroundColor', 'checkedSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderWidth', 'inputOutlineColor', 'inputOutlineWidth', 'inputSize', 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'inputSize'];
@@ -55,11 +61,15 @@ const selectInputStyles = ({
   borderRadius: getBorderRadius(inputSize),
   borderWidth: inputBorderWidth,
   backgroundColor: inputBackgroundColor,
-  outlineStyle: 'solid',
-  outlineColor: inputOutlineColor,
-  outlineWidth: inputOutlineWidth,
   height: inputSize,
-  width: inputSize
+  width: inputSize,
+  ..._Platform.default.select({
+    web: {
+      outlineStyle: 'solid',
+      outlineColor: inputOutlineColor,
+      outlineWidth: inputOutlineWidth
+    }
+  })
 });
 
 const selectOuterBorderStyles = ({
@@ -80,7 +90,7 @@ const selectOuterBorderStyles = ({
  */
 
 
-const RadioButton = ({
+const RadioButton = /*#__PURE__*/(0, _react.forwardRef)(({
   isChecked,
   tokens,
   inactive,
@@ -90,7 +100,7 @@ const RadioButton = ({
   handleChange,
   name: inputName,
   value
-}) => {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.validateThemeTokens)((0, _ThemeProvider.resolveThemeTokens)(tokens, {
     checked: isChecked
   }), (0, _utils.getTokensSetPropType)(tokenKeys), 'RadioButton');
@@ -100,6 +110,7 @@ const RadioButton = ({
       style: [staticStyles.defaultInputStyles, selectInputStyles(themeTokens, isChecked)],
       testID: "Radio-Input",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioInput.default, {
+        ref: ref,
         checked: isChecked,
         defaultChecked: defaultChecked,
         disabled: inactive,
@@ -114,8 +125,8 @@ const RadioButton = ({
       })]
     })
   });
-};
-
+});
+RadioButton.displayName = 'RadioButton';
 RadioButton.propTypes = {
   isChecked: _propTypes.default.bool,
   tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {

package/lib/Radio/RadioGroup.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 Radios that behave as a radio group. Use when users select a single choice from mutually
  * exclusive options.
@@ -73,7 +79,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * />
  * ```
  */
-const RadioGroup = ({
+const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   radioTokens,
   variant,
@@ -89,7 +95,7 @@ const RadioGroup = ({
   readOnly,
   name: inputGroupName,
   inactive
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     space,
@@ -109,18 +115,21 @@ const RadioGroup = ({
   const radios = items.map(({
     label,
     id,
-    onChange: itemOnChange
+    onChange: itemOnChange,
+    ref: itemRef
   }, index) => {
-    const radioId = id || "Radio[".concat(index, "]");
+    const radioId = id || `Radio[${index}]`;
+    const isChecked = currentValue === radioId;
 
-    const handleChange = (...args) => {
-      if (typeof itemOnChange === 'function') itemOnChange(...args);
-      setValue(radioId);
+    const handleChange = (newCheckedState, event) => {
+      if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
+      if (newCheckedState) setValue(radioId, event);
     };
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
+      ref: itemRef,
       id: radioId,
-      checked: currentValue === radioId,
+      checked: isChecked,
       onChange: handleChange,
       inactive: inactive,
       label: label,
@@ -130,6 +139,7 @@ const RadioGroup = ({
     }, radioId);
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    ref: ref,
     name: inputGroupName,
     legend: legend,
     tooltip: tooltip,
@@ -137,15 +147,15 @@ const RadioGroup = ({
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive,
-    status: validation,
+    validation: validation,
     accessibilityRole: "radiogroup",
     children: (0, _StackView.getStackedContent)(radios, {
       space,
       direction: 'column'
     })
   });
-};
-
+});
+RadioGroup.displayName = 'RadioGroup';
 RadioGroup.propTypes = {
   /**
    * Optional theme token overrides for the outer RadioGroup component
@@ -168,7 +178,8 @@ RadioGroup.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/RadioCard/RadioCard.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"));
 
@@ -27,12 +27,12 @@ var _RadioButton = _interopRequireWildcard(require("../Radio/RadioButton"));
 
 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 }; }
-
 /**
  * A Card that behaves like a radio button. Use when users select a single choice from mutually exclusive options
  * with need to show additional information for each option. The whole card is interactive as one item.
@@ -68,7 +68,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
  * or the internal state in case of uncontrolled radio button.
  */
-const RadioCard = ({
+const RadioCard = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant,
   title,
@@ -81,7 +81,7 @@ const RadioCard = ({
   id,
   onChange,
   ...rest
-}) => {
+}, ref) => {
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -92,21 +92,22 @@ const RadioCard = ({
     onChange
   });
 
-  const handleChange = () => {
+  const handleChange = event => {
     if (!inactive && !isChecked) {
-      setIsChecked(true);
+      setIsChecked(true, event);
     }
   };
 
   const a11y = _utils.a11yProps.select(rest);
 
   const uniqueId = (0, _utils.useUniqueId)('RadioCard');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('RadioCard', tokens, variant);
 
   const getCardTokens = cardState => (0, _Card.selectPressableCardTokens)(getTokens(cardState));
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.PressableCardBase, {
+    ref: ref,
     inactive: inactive,
     checked: isChecked,
     tokens: getCardTokens,
@@ -147,6 +148,9 @@ const RadioCard = ({
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
           direction: "column",
           space: contentSpace,
+          tokens: {
+            flexShrink: 1
+          },
           children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
             style: textStyle,
             children: title
@@ -155,8 +159,8 @@ const RadioCard = ({
       });
     }
   });
-};
-
+});
+RadioCard.displayName = 'RadioCard';
 RadioCard.propTypes = { ..._utils.a11yProps.propTypes,
 
   /**

package/lib/RadioCard/RadioCardGroup.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"));
 
@@ -23,12 +23,12 @@ var _Fieldset = _interopRequireDefault(require("../Fieldset"));
 
 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 }; }
-
 /**
  * A group of Cards that behave as a radio button group. Use when users select a single choice from mutually
  * exclusive options with need to show additional information for each option. The whole cards are each
@@ -79,7 +79,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * />
  * ```
  */
-const RadioCardGroup = ({
+const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   radioCardTokens,
   variant,
@@ -95,7 +95,7 @@ const RadioCardGroup = ({
   readOnly,
   name: inputGroupName,
   inactive
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     space,
@@ -118,6 +118,7 @@ const RadioCardGroup = ({
   // TODO: test this on more web screen readers.
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    ref: ref,
     name: inputGroupName,
     legend: legend,
     tooltip: tooltip,
@@ -125,7 +126,7 @@ const RadioCardGroup = ({
     space: fieldSpace,
     feedback: feedback,
     inactive: inactive || readOnly,
-    status: validation,
+    validation: validation,
     accessibilityRole: "radiogroup",
     children: ({
       a11yProps
@@ -138,11 +139,11 @@ const RadioCardGroup = ({
         id,
         onChange: itemOnChange
       }, index) => {
-        const cardId = id || "RadioCard[".concat(index, "]");
+        const cardId = id || `RadioCard[${index}]`;
 
-        const handleChange = (...args) => {
-          if (typeof itemOnChange === 'function') itemOnChange(...args);
-          setValue(cardId);
+        const handleChange = (newCheckedState, event) => {
+          if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
+          if (newCheckedState) setValue(cardId, event);
         };
 
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioCard.default, {
@@ -161,8 +162,8 @@ const RadioCardGroup = ({
       })
     })
   });
-};
-
+});
+RadioCardGroup.displayName = 'RadioCardGroup';
 RadioCardGroup.propTypes = {
   /**
    * Optional theme token overrides for the outer RadioCardGroup component

package/lib/Search/Search.js

@@ -87,7 +87,7 @@ const selectIconTokens = ({
  */
 
 
-const Search = ({
+const Search = /*#__PURE__*/(0, _react.forwardRef)(({
   initialValue = '',
   placeholder = 'Search',
   inactive,
@@ -98,7 +98,7 @@ const Search = ({
   copy = 'en',
   tokens,
   variant
-}) => {
+}, ref) => {
   const [value, setValue] = (0, _react.useState)(initialValue);
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, variant);
   const buttonTokens = (0, _ThemeProvider.useThemeTokens)('SearchButton', tokens, variant);
@@ -118,26 +118,28 @@ const Search = ({
 
   const buttonsGapSize = (0, _utils.useSpacingScale)(buttonsGap);
 
-  const handleSubmit = () => {
+  const handleSubmit = event => {
     if (onSubmit !== undefined) {
-      onSubmit(value);
+      onSubmit(value, event);
     }
   };
 
-  const handleChange = currentValue => {
-    setValue(currentValue);
-    if (onChange !== undefined) onChange(currentValue);
+  const handleChange = (currentValue, event) => {
+    setValue(currentValue, event);
+    if (onChange !== undefined) onChange(currentValue, event);
   };
 
-  const handleClear = () => {
-    setValue('');
-    if (onClear !== undefined) onClear();
-    if (onChange !== undefined) onChange('');
+  const handleClear = event => {
+    setValue('', event);
+    if (onClear !== undefined) onClear('', event);
+    if (onChange !== undefined) onChange('', event);
   };
 
   const isEmpty = value === '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: staticStyles.container,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      ref: ref,
       tokens: appearances => selectInputTokens({
         searchTokens: getThemeTokens(appearances),
         buttonTokens,
@@ -164,8 +166,7 @@ const Search = ({
           accessibilityRole: "button",
           accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
           tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
-          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, {
-            tokens: selectIconTokens(getButtonTokens(buttonState))
+          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
           })
         }), SubmitButtonIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
           onPress: handleSubmit,
@@ -175,8 +176,7 @@ const Search = ({
           tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
             priority: 'high'
           })),
-          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, {
-            tokens: selectIconTokens(getButtonTokens({ ...buttonState,
+          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
               priority: 'high'
             }))
           })
@@ -184,8 +184,8 @@ const Search = ({
       })
     })]
   });
-};
-
+});
+Search.displayName = 'Search';
 Search.propTypes = {
   /**
    * Use this to set the initial value of the search input.
@@ -225,7 +225,16 @@ Search.propTypes = {
    * Use to provide an accessible label for the input (visually hidden).
    */
   accessibilityLabel: _propTypes.default.string,
-  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.object]),
+
+  /**
+   * Select english or french copy for the accessible labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
+    accessibilityLabel: _propTypes.default.string,
+    clearButtonAccessibilityLabel: _propTypes.default.string,
+    submitButtonAccessibilityLabel: _propTypes.default.string
+  })]),
   tokens: (0, _utils.getTokensPropType)('Search'),
   variant: _utils.variantProp.propType
 };
@@ -233,6 +242,8 @@ var _default = Search;
 exports.default = _default;
 
 const staticStyles = _StyleSheet.default.create({
+  container: {// No styles needed here except the View defaults (position: relative etc)
+  },
   iconsContainer: {
     position: 'absolute',
     right: 0,

package/lib/Select/Picker.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"));
 
@@ -15,7 +15,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Picker = ({
+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 Picker = /*#__PURE__*/(0, _react.forwardRef)(({
   value,
   onChange,
   onFocus,
@@ -29,13 +33,14 @@ const Picker = ({
   nativeID,
   testID,
   ...rest
-}) => {
+}, ref) => {
   const {
     accessibilityLabel,
     accessibilityDescribedBy,
     accessibilityInvalid
   } = rest;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
+    ref: ref,
     style: style,
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
@@ -43,7 +48,7 @@ const Picker = ({
     onBlur: onBlur,
     disabled: inactive,
     value: value || (placeholder !== undefined ? placeholder.value : undefined),
-    onChange: event => onChange(event.target.value),
+    onChange: event => onChange(event.target.value, event),
     id: nativeID,
     "aria-label": accessibilityLabel,
     "aria-describedby": accessibilityDescribedBy,
@@ -56,8 +61,8 @@ const Picker = ({
       children: placeholder.label
     }), children]
   });
-};
-
+});
+Picker.displayName = 'Picker';
 var _default = Picker;
 exports.default = _default;
 Picker.propTypes = {