@telus-uds/components-base 1.8.0 → 1.8.3

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,6 +249,12 @@ 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,

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,

package/lib/Select/Picker.native.js

@@ -28,39 +28,47 @@ 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; }
 
 // styling of the native input is very limited, most of the styles have to be applied to an additional View
-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 selectAndroidContainerStyles = ({
-  paddingLeft = 0,
-  paddingRight = 0,
-  ...rest
-}) => ({
-  paddingLeft: paddingLeft > 8 ? paddingLeft - 8 : 0,
-  paddingRight: paddingRight > 8 ? paddingRight - 8 : 0,
-  ...rest
-});
+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 = _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__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    style,
+    inactive,
+    children,
+    placeholder,
+    ...rest
+  } = _ref3;
 
-const Picker = /*#__PURE__*/(0, _react.forwardRef)(({
-  value,
-  onChange,
-  onFocus,
-  onBlur,
-  style,
-  inactive,
-  children,
-  placeholder,
-  ...rest
-}, ref) => {
   // ungroup items, since there's no way to support groups on native
   const flatChildren = _react.Children.toArray(children).flatMap(child => {
     if (child.type === _Group.default) {
@@ -70,12 +78,15 @@ const Picker = /*#__PURE__*/(0, _react.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, {

package/lib/Select/Select.js

@@ -33,26 +33,28 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.inputSupportsProps, _utils.viewProps]);
 
-const selectInputStyles = ({
-  backgroundColor,
-  color,
-  borderWidth = 0,
-  borderColor,
-  borderRadius,
-  paddingTop,
-  paddingBottom,
-  paddingLeft = 0,
-  paddingRight,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight,
-  icon,
-  iconSize = 0,
-  validationIcon,
-  validationIconSize = 0,
-  height
-}, inactive) => {
+const selectInputStyles = (_ref, inactive) => {
+  let {
+    backgroundColor,
+    color,
+    borderWidth = 0,
+    borderColor,
+    borderRadius,
+    paddingTop,
+    paddingBottom,
+    paddingLeft = 0,
+    paddingRight,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    icon,
+    iconSize = 0,
+    validationIcon,
+    validationIconSize = 0,
+    height
+  } = _ref;
+
   // Subtract border width from padding so overall input width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -104,53 +106,68 @@ const selectInputStyles = ({
   };
 };
 
-const selectOuterBorderStyles = ({
-  outerBackgroundColor,
-  outerBorderWidth,
-  outerBorderColor,
-  borderRadius
-}) => ({
-  background: outerBackgroundColor,
-  ...(0, _ThemeProvider.applyOuterBorder)({
-    outerBorderColor,
+const selectOuterBorderStyles = _ref2 => {
+  let {
+    outerBackgroundColor,
     outerBorderWidth,
+    outerBorderColor,
     borderRadius
-  })
-});
+  } = _ref2;
+  return {
+    background: outerBackgroundColor,
+    ...(0, _ThemeProvider.applyOuterBorder)({
+      outerBorderColor,
+      outerBorderWidth,
+      borderRadius
+    })
+  };
+};
 
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
+const selectIconTokens = _ref3 => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref3;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
 
-const selectIconContainerStyles = ({
-  paddingRight,
-  paddingBottom
-}) => ({
-  paddingRight,
-  paddingBottom
-});
+const selectIconContainerStyles = _ref4 => {
+  let {
+    paddingRight,
+    paddingBottom
+  } = _ref4;
+  return {
+    paddingRight,
+    paddingBottom
+  };
+};
 
-const selectValidationIconTokens = ({
-  validationIconSize,
-  validationIconColor
-}) => ({
-  size: validationIconSize,
-  color: validationIconColor
-});
+const selectValidationIconTokens = _ref5 => {
+  let {
+    validationIconSize,
+    validationIconColor
+  } = _ref5;
+  return {
+    size: validationIconSize,
+    color: validationIconColor
+  };
+};
 
-const selectValidationIconContainerStyles = ({
-  icon,
-  iconSize = 0,
-  paddingRight = 0,
-  paddingBottom
-}) => ({
-  paddingRight: icon ? paddingRight + iconSize : paddingRight,
-  paddingBottom
-});
+const selectValidationIconContainerStyles = _ref6 => {
+  let {
+    icon,
+    iconSize = 0,
+    paddingRight = 0,
+    paddingBottom
+  } = _ref6;
+  return {
+    paddingRight: icon ? paddingRight + iconSize : paddingRight,
+    paddingBottom
+  };
+};
 /**
  * A basic form single-choice select component. Use in forms or individually to receive user's input.
  *
@@ -185,20 +202,21 @@ const selectValidationIconContainerStyles = ({
  */
 
 
-const Select = /*#__PURE__*/(0, _react.forwardRef)(({
-  value,
-  initialValue,
-  onChange,
-  children,
-  inactive,
-  readOnly,
-  placeholder,
-  validation,
-  tokens,
-  variant,
-  testID,
-  ...rest
-}, ref) => {
+const Select = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
+  let {
+    value,
+    initialValue,
+    onChange,
+    children,
+    inactive,
+    readOnly,
+    placeholder,
+    validation,
+    tokens,
+    variant,
+    testID,
+    ...rest
+  } = _ref7;
   const {
     currentValue,
     setValue
@@ -236,44 +254,47 @@ const Select = /*#__PURE__*/(0, _react.forwardRef)(({
   } = themeTokens;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
     ...selectedProps,
-    children: ({
-      inputId,
-      ...props
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: selectOuterBorderStyles(themeTokens),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
-        ref: ref,
-        style: selectInputStyles(themeTokens, inactive),
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onMouseOver: handleMouseOver,
-        onMouseOut: handleMouseOut,
-        onChange: setValue,
-        value: currentValue,
-        inactive: inactive,
-        placeholder: placeholder !== undefined ? {
-          label: placeholder,
-          value: ''
-        } : undefined,
-        ...props,
-        nativeID: inputId,
-        testID: testID,
-        children: children
-      }), ValidationIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        pointerEvents: "none",
-        style: [staticStyles.iconContainer, selectValidationIconContainerStyles(themeTokens)],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidationIconComponent, { ...selectValidationIconTokens(themeTokens)
-        })
-      }), IconComponent && _Platform.default.OS !== 'android' &&
-      /*#__PURE__*/
-      // we can't hide the default caret of a native picker on android
-      (0, _jsxRuntime.jsx)(_View.default, {
-        pointerEvents: "none",
-        style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
-        })
-      })]
-    })
+    children: _ref8 => {
+      let {
+        inputId,
+        ...props
+      } = _ref8;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: selectOuterBorderStyles(themeTokens),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Picker.default, {
+          ref: ref,
+          style: selectInputStyles(themeTokens, inactive),
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          onMouseOver: handleMouseOver,
+          onMouseOut: handleMouseOut,
+          onChange: setValue,
+          value: currentValue,
+          inactive: inactive,
+          placeholder: placeholder !== undefined ? {
+            label: placeholder,
+            value: ''
+          } : undefined,
+          ...props,
+          nativeID: inputId,
+          testID: testID,
+          children: children
+        }), ValidationIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          pointerEvents: "none",
+          style: [staticStyles.iconContainer, selectValidationIconContainerStyles(themeTokens)],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ValidationIconComponent, { ...selectValidationIconTokens(themeTokens)
+          })
+        }), IconComponent && _Platform.default.OS !== 'android' &&
+        /*#__PURE__*/
+        // we can't hide the default caret of a native picker on android
+        (0, _jsxRuntime.jsx)(_View.default, {
+          pointerEvents: "none",
+          style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
+          })
+        })]
+      });
+    }
   });
 });
 Select.displayName = 'Select';