@telus-uds/components-base 1.18.1 → 1.20.0

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -0,0 +1,276 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = require("../Button");
+
+var _Checkbox = require("../Checkbox");
+
+var _Divider = _interopRequireDefault(require("../Divider"));
+
+var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
+
+var _Modal = _interopRequireDefault(require("../Modal"));
+
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+var _Link = require("../Link");
+
+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 {
+  Col,
+  Row
+} = _FlexGrid.default;
+const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    label,
+    id = label,
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    copy = 'en',
+    readOnly = false,
+    inactive = false,
+    rowLimit = 12,
+    ...rest
+  } = _ref;
+  const {
+    currentValues,
+    setValues
+  } = (0, _utils.useMultipleInputValues)({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, variant);
+
+  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
+
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [checkedIds, setCheckedIds] = (0, _react.useState)(currentValues !== null && currentValues !== void 0 ? currentValues : []);
+  const colSize = items.length > rowLimit ? 2 : 1;
+  const isSelected = currentValues.length > 0;
+  const uniqueFields = ['id', 'label'];
+
+  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+    throw new Error("MultiSelectFilter items must have unique ".concat(uniqueFields.join(', ')));
+  } // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+
+  const pressHandlers = (0, _utils.getPressHandlersWithArgs)(rest, [{
+    id,
+    label,
+    currentValues
+  }]);
+
+  const handleChange = event => {
+    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+    setIsOpen(true);
+  };
+
+  const onApply = e => {
+    setValues(e);
+    setIsOpen(false);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
+      isOpen: isOpen,
+      onClose: () => setIsOpen(false),
+      variant: {
+        width: colSize > 1 ? 'size576' : 's'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            size: 'h4'
+          },
+          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        space: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        space: 1
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        scroll: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+          distribute: "between",
+          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Col, {
+            xs: 12 / colSize,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.CheckboxGroup, {
+              items: items.slice(i * rowLimit, (i + 1) * rowLimit),
+              checkedIds: checkedIds,
+              onChange: e => setCheckedIds(e, i)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+              size: 4
+            })]
+          }, i))
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+        variant: {
+          width: 'full',
+          color: 'E3E6E8',
+          decorative: true,
+          weight: 'thin'
+        },
+        space: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+          direction: "row",
+          space: 3,
+          tokens: {
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            onPress: () => onApply(checkedIds),
+            variant: {
+              size: 'small',
+              priority: 'high'
+            },
+            children: getCopy('applyButtonLabel')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
+              onPress: () => setCheckedIds([]),
+              children: getCopy('clearButtonLabel')
+            })
+          })]
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
+      ref: ref,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id)]
+  });
+});
+MultiSelectFilter.displayName = 'MultiSelectFilter';
+MultiSelectFilter.propTypes = {
+  /**
+   * The text displayed to the user in a ButtonDropdown.
+   */
+  label: _propTypes.default.string.isRequired,
+
+  /**
+   * An optional unique string may be provided to identify the ButtonDropdown.
+   * If not provided, the label is used.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Sets the variant for ButtonDropdown element.
+   */
+  variant: _utils.variantProp.propType,
+
+  /**
+   * Sets the tokens for ButtonDropdown element.
+   */
+  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
+
+  /**
+   * The options a user may select.
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * The text displayed to the user with a checkbox, describing this option.
+     */
+    label: _propTypes.default.string.isRequired,
+
+    /**
+     * An optional unique string may be provided to identify this option.
+     * If not provided, the label is used.
+     */
+    id: _propTypes.default.string
+  })),
+
+  /**
+   * If the selected item(s) in the checkbox group(s) are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the MultiSelectFilter a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * If `values` is not passed, making the MultiSelectFilter an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * If provided, sets a maximum number of items a user may select at once.
+   */
+  maxValues: _propTypes.default.number,
+
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
+  /**
+   * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
+   */
+  readOnly: _propTypes.default.string,
+
+  /**
+   * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
+   * set as `disabled` and if the theme supports `inactive` appearances rules, these
+   * are applied.
+   */
+  inactive: _propTypes.default.string,
+
+  /**
+   * Sets the maximum number of items in one column. If number of items are more
+   * than the `rowLimit`, they will be rendered in 2 columns.
+   */
+  rowLimit: _propTypes.default.number
+};
+var _default = MultiSelectFilter;
+exports.default = _default;

package/lib/MultiSelectFilter/dictionary.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    filterByLabel: 'Filter by %{filterCategory}:',
+    applyButtonLabel: 'Apply',
+    clearButtonLabel: 'Clear'
+  },
+  fr: {
+    filterByLabel: 'Filtrer par %{filterCategory}:',
+    applyButtonLabel: 'Appliquer',
+    clearButtonLabel: 'Effacer'
+  }
+};
+exports.default = _default;

package/lib/MultiSelectFilter/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _MultiSelectFilter = _interopRequireDefault(require("./MultiSelectFilter"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _MultiSelectFilter.default;
+exports.default = _default;

package/lib/Pagination/SideButton.js

@@ -34,10 +34,12 @@ 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; }
 
 // We need to drop the icon here since it gets rendered via children and not
-// `ButtonBase` in order to tap into the state of the button
+// `ButtonBase` in order to tap into the state of the button; `displayLabel` flag
+// is also not needed
 const selectButtonTokens = _ref => {
   let {
     icon: _,
+    displayLabel: __,
     ...rest
   } = _ref;
   return (0, _utils.selectTokens)('Button', rest);
@@ -82,7 +84,8 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     copy
   });
   const {
-    icon
+    icon,
+    displayLabel
   } = getTokens(tokens, buttonVariant);
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
@@ -90,7 +93,6 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  const showLabel = viewport !== 'sm' && viewport !== 'xs';
   const accessibilityLabel = direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel');
   const accessibilityRole = href !== undefined ? 'link' : 'button';
 
@@ -124,7 +126,7 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         space: 1,
         iconPosition: directionToSide[direction],
         iconProps: iconProps,
-        children: showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        children: displayLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
           style: textStyles,
           children: label
         })

package/lib/Responsive/Responsive.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Responsive conditionally renders children based on whether the viewport matches the provided
+ * min and max viewports.
+ *
+ * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
+ * after hydration. This may cause a layout shift on devices other than the narrowest.
+ */
+const Responsive = _ref => {
+  let {
+    min = 'xs',
+    max,
+    children
+  } = _ref;
+  // Start returning children at the 'min' viewport or greater
+  const byViewports = {
+    [min]: children
+  };
+
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = _systemConstants.viewports.keys.indexOf(max);
+
+    const maxPlusOne = maxIndex >= 0 ? _systemConstants.viewports.keys[maxIndex + 1] : null;
+    if (maxPlusOne) byViewports[maxPlusOne] = null;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _utils.useResponsiveProp)(byViewports, null)
+  });
+};
+
+Responsive.propTypes = {
+  min: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  max: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: _propTypes.default.node.isRequired
+};
+var _default = Responsive;
+exports.default = _default;

package/lib/Responsive/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Responsive = _interopRequireDefault(require("./Responsive"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Responsive.default;
+exports.default = _default;

package/lib/Search/Search.js

@@ -9,8 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -21,8 +19,6 @@ var _TextInputBase = _interopRequireDefault(require("../TextInput/TextInputBase"
 
 var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
 
-var _StackView = _interopRequireDefault(require("../StackView"));
-
 var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
 
 var _dictionary = _interopRequireDefault(require("./dictionary"));
@@ -63,20 +59,11 @@ const selectInputTokens = _ref => {
 
 const selectButtonTokens = tokens => (0, _utils.selectTokens)('Button', tokens);
 
-const selectIconsContainerStyle = _ref2 => {
-  let {
-    paddingRight
-  } = _ref2;
-  return {
-    paddingRight
-  };
-};
-
-const selectIconTokens = _ref3 => {
+const selectIconTokens = _ref2 => {
   let {
     iconSize,
     iconColor
-  } = _ref3;
+  } = _ref2;
   return {
     color: iconColor,
     size: iconSize
@@ -97,7 +84,7 @@ const selectIconTokens = _ref3 => {
  */
 
 
-const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     initialValue,
     value,
@@ -112,7 +99,7 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref4;
+  } = _ref3;
   const {
     currentValue = '',
     setValue
@@ -146,8 +133,11 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   };
 
   const handleClear = event => {
+    var _ref$current;
+
     setValue('', event);
-    if (onClear !== undefined) onClear('', event);
+    onClear === null || onClear === void 0 ? void 0 : onClear('', event);
+    ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
   };
 
   const handleFocus = event => {
@@ -164,10 +154,8 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     testID,
     ...containerProps
   } = selectContainerProps(rest);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-    style: staticStyles.container,
-    ...containerProps,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...containerProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
       nativeID: nativeID,
       testID: testID,
       ...selectInputProps(rest),
@@ -187,35 +175,29 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
       onChange: setValue,
       onSubmitEditing: handleSubmit,
       onFocus: handleFocus,
-      accessibilityLabel: a11yLabelText
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: [staticStyles.iconsContainer, selectIconsContainerStyle(themeTokens)],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
-        direction: "row",
-        space: buttonsGap,
-        children: [ClearButtonIcon && !isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-          onPress: handleClear,
-          inactive: inactive,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
-          tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
-          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
-          })
-        }), SubmitButtonIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
-          onPress: handleSubmit,
-          inactive: inactive,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
-          tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+      accessibilityLabel: a11yLabelText,
+      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+        accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleClear,
+        tokens: appearances => selectButtonTokens(getButtonTokens(appearances)),
+        children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearButtonIcon, { ...selectIconTokens(getButtonTokens(buttonState))
+        })
+      }, "clear"), SubmitButtonIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+        accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleSubmit,
+        tokens: buttonState => selectButtonTokens(getButtonTokens({ ...buttonState,
+          priority: 'high'
+        })),
+        children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
             priority: 'high'
-          })),
-          children: buttonState => /*#__PURE__*/(0, _jsxRuntime.jsx)(SubmitButtonIcon, { ...selectIconTokens(getButtonTokens({ ...buttonState,
-              priority: 'high'
-            }))
-          })
-        })]
-      })
-    })]
+          }))
+        })
+      }, "submit")]
+    })
   });
 });
 Search.displayName = 'Search';
@@ -280,16 +262,4 @@ Search.propTypes = { ...selectedContainerPropTypes,
   variant: _utils.variantProp.propType
 };
 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,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  }
-});
+exports.default = _default;

package/lib/Select/Picker.native.js

@@ -19,6 +19,8 @@ var _utils = require("../utils");
 
 var _Group = _interopRequireDefault(require("./Group"));
 
+var _constants = require("./constants");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,32 +29,33 @@ 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
+// Styling of the native input is very limited, most of the styles have to be applied to an additional View
 const selectAndroidInputStyles = _ref => {
   let {
     height = 0,
-    paddingBottom = 0,
-    paddingTop = 0,
-    borderWidth = 0,
     color
   } = _ref;
   return {
-    height: height - paddingTop - paddingBottom - 2 * borderWidth,
+    height,
+    paddingBottom: 0,
+    paddingTop: 0,
     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
+}; // 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,
+    paddingLeft = _constants.ANDROID_DEFAULT_PADDING,
+    paddingRight = _constants.ANDROID_DEFAULT_PADDING,
     ...rest
   } = _ref2;
-  return {
-    paddingLeft: paddingLeft > 8 ? paddingLeft - 8 : 0,
-    paddingRight: paddingRight > 8 ? paddingRight - 8 : 0,
-    ...rest
+  return { ...rest,
+    paddingLeft: paddingLeft > _constants.ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - _constants.ANDROID_HORIZONTAL_PADDING_OFFSET : _constants.ANDROID_DEFAULT_PADDING,
+    paddingRight: paddingRight > _constants.ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - _constants.ANDROID_HORIZONTAL_PADDING_OFFSET : _constants.ANDROID_DEFAULT_PADDING,
+    paddingBottom: _constants.ANDROID_DEFAULT_PADDING,
+    paddingTop: _constants.ANDROID_DEFAULT_PADDING,
+    height: rest.height + _constants.ANDROID_HEIGHT_OFFSET
   };
 };
 
@@ -69,7 +72,7 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     ...rest
   } = _ref3;
 
-  // ungroup items, since there's no way to support groups on native
+  // 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) {
       return child.props.children;

package/lib/Select/Select.js

@@ -23,6 +23,8 @@ var _Picker = _interopRequireDefault(require("./Picker"));
 
 var _InputSupports = _interopRequireDefault(require("../InputSupports"));
 
+var _constants = require("./constants");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -166,7 +168,11 @@ const selectValidationIconContainerStyles = _ref6 => {
   } = _ref6;
   return {
     paddingRight: icon ? paddingRight + iconSize : paddingRight,
-    paddingBottom
+    ...(_Platform.default.OS === 'android' ? {
+      paddingBottom: paddingBottom + _constants.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET
+    } : {
+      paddingBottom
+    })
   };
 };
 /**