@telus-uds/components-base 1.7.1 → 1.8.2

package/lib/Radio/RadioButton.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.selectRadioButtonTokens = void 0;
+exports.selectRadioButtonTokens = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -40,69 +40,79 @@ exports.selectRadioButtonTokens = selectRadioButtonTokens;
 
 const getBorderRadius = inputSize => inputSize / 2;
 
-const selectCheckedStyles = ({
-  checkedBackgroundColor,
-  checkedSize
-}) => ({
-  backgroundColor: checkedBackgroundColor,
-  borderRadius: checkedSize / 2,
-  height: checkedSize,
-  width: checkedSize
-});
+const selectCheckedStyles = _ref => {
+  let {
+    checkedBackgroundColor,
+    checkedSize
+  } = _ref;
+  return {
+    backgroundColor: checkedBackgroundColor,
+    borderRadius: checkedSize / 2,
+    height: checkedSize,
+    width: checkedSize
+  };
+};
 
-const selectInputStyles = ({
-  inputBackgroundColor,
-  inputBorderColor,
-  inputBorderWidth,
-  inputOutlineColor,
-  inputOutlineWidth,
-  inputSize
-}) => ({
-  borderColor: inputBorderColor,
-  borderRadius: getBorderRadius(inputSize),
-  borderWidth: inputBorderWidth,
-  backgroundColor: inputBackgroundColor,
-  height: inputSize,
-  width: inputSize,
-  ..._Platform.default.select({
-    web: {
-      outlineStyle: 'solid',
-      outlineColor: inputOutlineColor,
-      outlineWidth: inputOutlineWidth
-    }
-  })
-});
+const selectInputStyles = _ref2 => {
+  let {
+    inputBackgroundColor,
+    inputBorderColor,
+    inputBorderWidth,
+    inputOutlineColor,
+    inputOutlineWidth,
+    inputSize
+  } = _ref2;
+  return {
+    borderColor: inputBorderColor,
+    borderRadius: getBorderRadius(inputSize),
+    borderWidth: inputBorderWidth,
+    backgroundColor: inputBackgroundColor,
+    height: inputSize,
+    width: inputSize,
+    ..._Platform.default.select({
+      web: {
+        outlineStyle: 'solid',
+        outlineColor: inputOutlineColor,
+        outlineWidth: inputOutlineWidth
+      }
+    })
+  };
+};
 
-const selectOuterBorderStyles = ({
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  inputSize
-}) => ({ ...(0, _ThemeProvider.applyOuterBorder)({
+const selectOuterBorderStyles = _ref3 => {
+  let {
     outerBorderColor,
     outerBorderWidth,
     outerBorderGap,
-    borderRadius: getBorderRadius(inputSize)
-  })
-});
+    inputSize
+  } = _ref3;
+  return { ...(0, _ThemeProvider.applyOuterBorder)({
+      outerBorderColor,
+      outerBorderWidth,
+      outerBorderGap,
+      borderRadius: getBorderRadius(inputSize)
+    })
+  };
+};
 /**
  * The visual toggle of a radio input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with.
  */
 
 
-const RadioButton = /*#__PURE__*/(0, _react.forwardRef)(({
-  isChecked,
-  tokens,
-  inactive,
-  defaultChecked,
-  inputId,
-  isControlled,
-  handleChange,
-  name: inputName,
-  value,
-  ...rest
-}, ref) => {
+const RadioButton = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+  let {
+    isChecked,
+    tokens,
+    inactive,
+    defaultChecked,
+    inputId,
+    isControlled,
+    handleChange,
+    name: inputName,
+    value,
+    ...rest
+  } = _ref4;
   const themeTokens = (0, _ThemeProvider.validateThemeTokens)((0, _ThemeProvider.resolveThemeTokens)(tokens, {
     checked: isChecked
   }), (0, _utils.getTokensSetPropType)(tokenKeys), 'RadioButton');

package/lib/Radio/RadioGroup.js

@@ -52,7 +52,7 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * ### Uncontrolled version
  *
  * If the RadioGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.
- * Whenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).
+ * Whenever the radio gets toggled, it calls the `onChange` callback with the new value (string).
  *
  * ### Use in forms
  *
@@ -82,24 +82,26 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * ```
  */
 
-const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
-  tokens,
-  radioTokens,
-  variant,
-  items = [],
-  legend,
-  tooltip,
-  hint,
-  validation,
-  feedback,
-  initialCheckedId,
-  checkedId,
-  onChange,
-  readOnly,
-  name: inputGroupName,
-  inactive,
-  ...rest
-}, ref) => {
+const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    copy = 'en',
+    tokens,
+    radioTokens,
+    variant,
+    items = [],
+    legend,
+    tooltip,
+    hint,
+    validation,
+    feedback,
+    initialCheckedId,
+    checkedId,
+    onChange,
+    readOnly,
+    name: inputGroupName,
+    inactive,
+    ...rest
+  } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     space,
@@ -122,13 +124,14 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
-  const radios = items.map(({
-    label,
-    id,
-    onChange: itemOnChange,
-    ref: itemRef,
-    ...itemRest
-  }, index) => {
+  const radios = items.map((_ref2, index) => {
+    let {
+      label,
+      id,
+      onChange: itemOnChange,
+      ref: itemRef,
+      ...itemRest
+    } = _ref2;
     const radioId = id || `Radio[${index}]`;
     const isChecked = currentValue === radioId;
 
@@ -151,6 +154,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     }, radioId);
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    copy: copy,
     ref: ref,
     name: inputGroupName,
     legend: legend,
@@ -171,6 +175,11 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)(({
 RadioGroup.displayName = 'RadioGroup';
 RadioGroup.propTypes = { ...selectedSystemPropTypes,
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
   /**
    * Optional theme token overrides for the outer RadioGroup component
    */
@@ -222,12 +231,12 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
   feedback: _propTypes.default.string,
 
   /**
-   * If provided, the radio card with this id is selected on first render.
+   * If provided, the radio with this id is selected on first render.
    */
   initialCheckedId: _propTypes.default.string,
 
   /**
-   * If not undefined, the radio card with this id is selected (or none is selected if `null`), and the
+   * If not undefined, the radio with this id is selected (or none is selected if `null`), and the
    * element's selection state will be controlled by its parent using the `onChange` function.
    */
   checkedId: _propTypes.default.string,
@@ -239,12 +248,12 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
   onChange: _propTypes.default.func,
 
   /**
-   * If true, the radio cards cannot be selected by the user and simply show their current state.
+   * If true, the radios cannot be selected by the user and simply show their current state.
    */
   readOnly: _propTypes.default.bool,
 
   /**
-   * If true, the radio card cannot be interacted with, elements are set as `disabled` and if the
+   * If true, the radios cannot be interacted with, elements are set as `disabled` and if the
    * theme supports `inactive` appearances rules, these are applied.
    */
   inactive: _propTypes.default.bool,

package/lib/Radio/RadioInput.js

@@ -20,16 +20,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * On Web we need to include an actual input but hide it.
  */
-const RadioInput = /*#__PURE__*/(0, _react.forwardRef)(({
-  checked,
-  defaultChecked,
-  disabled,
-  id,
-  isControlled,
-  name,
-  onChange,
-  value
-}, ref) => {
+const RadioInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    disabled,
+    id,
+    isControlled,
+    name,
+    onChange,
+    value
+  } = _ref;
+
   const handleClick = event => {
     // Cancel the click dispatched via the label tag, since it's already wrapped
     // in <Pressable>

package/lib/RadioCard/RadioCard.js

@@ -70,20 +70,21 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * or the internal state in case of uncontrolled radio button.
  */
 
-const RadioCard = /*#__PURE__*/(0, _react.forwardRef)(({
-  tokens,
-  variant,
-  title,
-  children,
-  inactive,
-  defaultChecked,
-  checked,
-  name: inputName,
-  value,
-  id,
-  onChange,
-  ...rest
-}, ref) => {
+const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    title,
+    children,
+    inactive,
+    defaultChecked,
+    checked,
+    name: inputName,
+    value,
+    id,
+    onChange,
+    ...rest
+  } = _ref;
   const {
     currentValue: isChecked,
     setValue: setIsChecked,

package/lib/RadioCard/RadioCardGroup.js

@@ -82,24 +82,26 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * ```
  */
 
-const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
-  tokens,
-  radioCardTokens,
-  variant,
-  items = [],
-  legend,
-  tooltip,
-  hint,
-  validation,
-  feedback,
-  initialCheckedId,
-  checkedId,
-  onChange,
-  readOnly,
-  name: inputGroupName,
-  inactive,
-  ...rest
-}, ref) => {
+const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    copy = 'en',
+    tokens,
+    radioCardTokens,
+    variant,
+    items = [],
+    legend,
+    tooltip,
+    hint,
+    validation,
+    feedback,
+    initialCheckedId,
+    checkedId,
+    onChange,
+    readOnly,
+    name: inputGroupName,
+    inactive,
+    ...rest
+  } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     space,
@@ -128,6 +130,7 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    copy: copy,
     ref: ref,
     name: inputGroupName,
     legend: legend,
@@ -142,13 +145,14 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     children: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(StackContainer, {
       space: space,
       accessibilityRole: "radiogroup",
-      children: items.map(({
-        title,
-        content,
-        id,
-        onChange: itemOnChange,
-        ...itemRest
-      }, index) => {
+      children: items.map((_ref2, index) => {
+        let {
+          title,
+          content,
+          id,
+          onChange: itemOnChange,
+          ...itemRest
+        } = _ref2;
         const cardId = id || `RadioCard[${index}]`;
 
         const handleChange = (newCheckedState, event) => {
@@ -177,6 +181,11 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)(({
 RadioCardGroup.displayName = 'RadioCardGroup';
 RadioCardGroup.propTypes = { ...selectedSystemPropTypes,
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
   /**
    * Optional theme token overrides for the outer RadioCardGroup component
    */

package/lib/Search/Search.js

@@ -38,11 +38,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const [selectInputProps, selectedInputPropTypes] = (0, _utils.selectSystemProps)([_utils.textInputHandlerProps, _utils.textInputProps]);
 
-const selectInputTokens = ({
-  searchTokens,
-  buttonTokens,
-  buttonsGapSize
-}) => {
+const selectInputTokens = _ref => {
+  let {
+    searchTokens,
+    buttonTokens,
+    buttonsGapSize
+  } = _ref;
   const {
     paddingRight: inputPaddingRight,
     clearButtonIcon,
@@ -62,19 +63,25 @@ const selectInputTokens = ({
 
 const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', tokens);
 
-const selectIconsContainerStyle = ({
-  paddingRight
-}) => ({
-  paddingRight
-});
+const selectIconsContainerStyle = _ref2 => {
+  let {
+    paddingRight
+  } = _ref2;
+  return {
+    paddingRight
+  };
+};
 
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  color: iconColor,
-  size: iconSize
-});
+const selectIconTokens = _ref3 => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref3;
+  return {
+    color: iconColor,
+    size: iconSize
+  };
+};
 /**
  * The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.
  * Use `Search` to feature autocomplete interactions.
@@ -90,20 +97,22 @@ const selectIconTokens = ({
  */
 
 
-const Search = /*#__PURE__*/(0, _react.forwardRef)(({
-  initialValue,
-  value,
-  placeholder,
-  inactive,
-  onChange,
-  onSubmit,
-  onClear,
-  accessibilityLabel,
-  copy = 'en',
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+  let {
+    initialValue,
+    value,
+    placeholder,
+    inactive,
+    onChange,
+    onSubmit,
+    onClear,
+    onFocus,
+    accessibilityLabel,
+    copy = 'en',
+    tokens,
+    variant,
+    ...rest
+  } = _ref4;
   const {
     currentValue = '',
     setValue
@@ -141,6 +150,10 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)(({
     if (onClear !== undefined) onClear('', event);
   };
 
+  const handleFocus = event => {
+    if (onFocus !== undefined) onFocus(event);
+  };
+
   const isEmpty = currentValue === ''; // Accessibility label should always be present and correctly localised
 
   const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel'); // Placeholder is optional and may be unset by passing an empty string
@@ -165,6 +178,7 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)(({
       value: currentValue,
       onChange: setValue,
       onSubmitEditing: handleSubmit,
+      onFocus: handleFocus,
       accessibilityLabel: a11yLabelText
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)],
@@ -235,12 +249,18 @@ Search.propTypes = { ...selectedContainerPropTypes,
   onClear: _propTypes.default.func,
 
   /**
+   * Triggered when the search input is focused.
+   */
+  onFocus: _propTypes.default.func,
+
+  /**
+   *
    * Use to provide an accessible label for the input (visually hidden).
    */
   accessibilityLabel: _propTypes.default.string,
 
   /**
-   * Select english or french copy for the accessible labels.
+   * 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({

package/lib/Select/Group.js

@@ -15,10 +15,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Group = ({
-  children,
-  label
-}) => {
+const Group = _ref => {
+  let {
+    children,
+    label
+  } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("optgroup", {
     label: label,
     children: children

package/lib/Select/Group.native.js

@@ -11,9 +11,10 @@ var _utils = require("../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Group = ({
-  children
-}) => {
+const Group = _ref => {
+  let {
+    children
+  } = _ref;
   return children;
 };
 

package/lib/Select/Item.js

@@ -13,13 +13,16 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Item = ({
-  children,
-  value
-}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-  value: value,
-  children: children
-});
+const Item = _ref => {
+  let {
+    children,
+    value
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
+    value: value,
+    children: children
+  });
+};
 
 var _default = Item;
 exports.default = _default;

package/lib/Select/Item.native.js

@@ -5,15 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const Item = () => null;
 
 var _default = Item;
-exports.default = _default;
-Item.propTypes = {
-  children: _propTypes.default.string.isRequired,
-  value: _propTypes.default.string.isRequired
-};
+exports.default = _default;

package/lib/Select/Picker.js

@@ -19,21 +19,22 @@ 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 Picker = /*#__PURE__*/(0, _react.forwardRef)(({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  onMouseOver,
-  onMouseOut,
-  style,
-  inactive,
-  children,
-  placeholder,
-  nativeID,
-  testID,
-  ...rest
-}, ref) => {
+const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseOut,
+    style,
+    inactive,
+    children,
+    placeholder,
+    nativeID,
+    testID,
+    ...rest
+  } = _ref;
   const {
     accessibilityLabel,
     accessibilityDescribedBy,