@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/RadioCard/RadioCard.js

@@ -47,20 +47,21 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, foc
  * or the internal state in case of uncontrolled radio button.
  */
 
-const RadioCard = /*#__PURE__*/forwardRef(({
-  tokens,
-  variant,
-  title,
-  children,
-  inactive,
-  defaultChecked,
-  checked,
-  name: inputName,
-  value,
-  id,
-  onChange,
-  ...rest
-}, ref) => {
+const RadioCard = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    title,
+    children,
+    inactive,
+    defaultChecked,
+    checked,
+    name: inputName,
+    value,
+    id,
+    onChange,
+    ...rest
+  } = _ref;
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -78,7 +79,7 @@ const RadioCard = /*#__PURE__*/forwardRef(({
   };
 
   const uniqueId = useUniqueId('RadioCard');
-  const inputId = id ?? uniqueId;
+  const inputId = id !== null && id !== void 0 ? id : uniqueId;
   const getTokens = useThemeTokensCallback('RadioCard', tokens, variant);
 
   const getCardTokens = cardState => selectPressableCardTokens(getTokens(cardState));

package/lib-module/RadioCard/RadioCardGroup.js

@@ -60,25 +60,26 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * ```
  */
 
-const RadioCardGroup = /*#__PURE__*/forwardRef(({
-  copy = 'en',
-  tokens,
-  radioCardTokens,
-  variant,
-  items = [],
-  legend,
-  tooltip,
-  hint,
-  validation,
-  feedback,
-  initialCheckedId,
-  checkedId,
-  onChange,
-  readOnly,
-  name: inputGroupName,
-  inactive,
-  ...rest
-}, ref) => {
+const RadioCardGroup = /*#__PURE__*/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 = useViewport();
   const {
     space,
@@ -103,7 +104,7 @@ const RadioCardGroup = /*#__PURE__*/forwardRef(({
   const uniqueFields = ['id'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("RadioCardGroup items must have unique ".concat(uniqueFields.join(', ')));
   }
 
   return /*#__PURE__*/_jsx(Fieldset, {
@@ -122,14 +123,15 @@ const RadioCardGroup = /*#__PURE__*/forwardRef(({
     children: props => /*#__PURE__*/_jsx(StackContainer, {
       space: space,
       accessibilityRole: "radiogroup",
-      children: items.map(({
-        title,
-        content,
-        id,
-        onChange: itemOnChange,
-        ...itemRest
-      }, index) => {
-        const cardId = id || `RadioCard[${index}]`;
+      children: items.map((_ref2, index) => {
+        let {
+          title,
+          content,
+          id,
+          onChange: itemOnChange,
+          ...itemRest
+        } = _ref2;
+        const cardId = id || "RadioCard[".concat(index, "]");
 
         const handleChange = (newCheckedState, event) => {
           if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);

package/lib-module/Search/Search.js

@@ -14,11 +14,12 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
 
-const selectInputTokens = ({
-  searchTokens,
-  buttonTokens,
-  buttonsGapSize
-}) => {
+const selectInputTokens = _ref => {
+  let {
+    searchTokens,
+    buttonTokens,
+    buttonsGapSize
+  } = _ref;
   const {
     paddingRight: inputPaddingRight,
     clearButtonIcon,
@@ -38,19 +39,25 @@ const selectInputTokens = ({
 
 const selectButtonTokens = tokens => 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.
@@ -66,20 +73,22 @@ const selectIconTokens = ({
  */
 
 
-const Search = /*#__PURE__*/forwardRef(({
-  initialValue,
-  value,
-  placeholder,
-  inactive,
-  onChange,
-  onSubmit,
-  onClear,
-  accessibilityLabel,
-  copy = 'en',
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const Search = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    initialValue,
+    value,
+    placeholder,
+    inactive,
+    onChange,
+    onSubmit,
+    onClear,
+    onFocus,
+    accessibilityLabel,
+    copy = 'en',
+    tokens,
+    variant,
+    ...rest
+  } = _ref4;
   const {
     currentValue = '',
     setValue
@@ -117,11 +126,15 @@ const Search = /*#__PURE__*/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
 
-  const placeholderText = placeholder ?? a11yLabelText;
+  const placeholderText = placeholder !== null && placeholder !== void 0 ? placeholder : a11yLabelText;
   return /*#__PURE__*/_jsxs(View, {
     style: staticStyles.container,
     ...selectContainerProps(rest),
@@ -141,6 +154,7 @@ const Search = /*#__PURE__*/forwardRef(({
       value: currentValue,
       onChange: setValue,
       onSubmitEditing: handleSubmit,
+      onFocus: handleFocus,
       accessibilityLabel: a11yLabelText
     }), /*#__PURE__*/_jsx(View, {
       style: [staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)],
@@ -211,6 +225,12 @@ Search.propTypes = { ...selectedContainerPropTypes,
   onClear: PropTypes.func,
 
   /**
+   * Triggered when the search input is focused.
+   */
+  onFocus: PropTypes.func,
+
+  /**
+   *
    * Use to provide an accessible label for the input (visually hidden).
    */
   accessibilityLabel: PropTypes.string,

package/lib-module/Select/Group.js

@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import { componentPropType } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const Group = ({
-  children,
-  label
-}) => {
+const Group = _ref => {
+  let {
+    children,
+    label
+  } = _ref;
   return /*#__PURE__*/_jsx("optgroup", {
     label: label,
     children: children

package/lib-module/Select/Group.native.js

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import { componentPropType } from '../utils';
 
-const Group = ({
-  children
-}) => {
+const Group = _ref => {
+  let {
+    children
+  } = _ref;
   return children;
 };
 

package/lib-module/Select/Item.js

@@ -2,13 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const Item = ({
-  children,
-  value
-}) => /*#__PURE__*/_jsx("option", {
-  value: value,
-  children: children
-});
+const Item = _ref => {
+  let {
+    children,
+    value
+  } = _ref;
+  return /*#__PURE__*/_jsx("option", {
+    value: value,
+    children: children
+  });
+};
 
 export default Item;
 Item.propTypes = {

package/lib-module/Select/Item.native.js

@@ -1,9 +1,3 @@
-import PropTypes from 'prop-types';
-
 const Item = () => null;
 
-export default Item;
-Item.propTypes = {
-  children: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired
-};
+export default Item;

package/lib-module/Select/Picker.js

@@ -3,21 +3,22 @@ import PropTypes from 'prop-types';
 import { componentPropType } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Picker = /*#__PURE__*/forwardRef(({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  onMouseOver,
-  onMouseOut,
-  style,
-  inactive,
-  children,
-  placeholder,
-  nativeID,
-  testID,
-  ...rest
-}, ref) => {
+const Picker = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseOut,
+    style,
+    inactive,
+    children,
+    placeholder,
+    nativeID,
+    testID,
+    ...rest
+  } = _ref;
   const {
     accessibilityLabel,
     accessibilityDescribedBy,

package/lib-module/Select/Picker.native.js

@@ -9,39 +9,46 @@ import Group from './Group'; // styling of the native input is very limited, mos
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 
-const selectAndroidInputStyles = ({
-  height = 0,
-  paddingBottom = 0,
-  paddingTop = 0,
-  borderWidth = 0,
-  color
-}) => ({
-  height: height - paddingTop - paddingBottom - 2 * borderWidth,
-  color
-}); // the native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
+const selectAndroidInputStyles = _ref => {
+  let {
+    height = 0,
+    paddingBottom = 0,
+    paddingTop = 0,
+    borderWidth = 0,
+    color
+  } = _ref;
+  return {
+    height: height - paddingTop - paddingBottom - 2 * borderWidth,
+    color
+  };
+}; // the native input has a side padding of 8px, which can't be adjusted, so we have to account for that in the container
 
 
-const selectAndroidContainerStyles = ({
-  paddingLeft = 0,
-  paddingRight = 0,
-  ...rest
-}) => ({
-  paddingLeft: paddingLeft > 8 ? paddingLeft - 8 : 0,
-  paddingRight: paddingRight > 8 ? paddingRight - 8 : 0,
-  ...rest
-});
+const selectAndroidContainerStyles = _ref2 => {
+  let {
+    paddingLeft = 0,
+    paddingRight = 0,
+    ...rest
+  } = _ref2;
+  return {
+    paddingLeft: paddingLeft > 8 ? paddingLeft - 8 : 0,
+    paddingRight: paddingRight > 8 ? paddingRight - 8 : 0,
+    ...rest
+  };
+};
 
-const Picker = /*#__PURE__*/forwardRef(({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  style,
-  inactive,
-  children,
-  placeholder,
-  ...rest
-}, ref) => {
+const Picker = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    style,
+    inactive,
+    children,
+    placeholder,
+    ...rest
+  } = _ref3;
   // ungroup items, since there's no way to support groups on native
   const flatChildren = Children.toArray(children).flatMap(child => {
     if (child.type === Group) {
@@ -50,12 +57,15 @@ const Picker = /*#__PURE__*/forwardRef(({
 
     return child;
   });
-  const items = flatChildren.map(({
-    props
-  }) => ({
-    label: props.children,
-    value: props.value
-  })); // Unlike other input components, react-native-picker-select doesn't pass an event to its change fn.
+  const items = flatChildren.map(_ref4 => {
+    let {
+      props
+    } = _ref4;
+    return {
+      label: props.children,
+      value: props.value
+    };
+  }); // Unlike other input components, react-native-picker-select doesn't pass an event to its change fn.
 
   const handleChange = (newValue, index) => {
     if (onChange) onChange(newValue, {