@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/Select/Picker.js

@@ -1,25 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _utils = require("../utils");
-
-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 Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { componentPropType, selectSystemProps, htmlAttrs } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const Picker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     value,
     onChange,
@@ -27,6 +11,8 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onBlur,
     onMouseOver,
     onMouseOut,
+    onOpen = () => {},
+    onClose = () => {},
     style,
     inactive,
     children,
@@ -35,51 +21,76 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     testID,
     ...rest
   } = _ref;
+  const selectedProps = selectProps(rest);
   const {
     accessibilityLabel,
     accessibilityDescribedBy,
     accessibilityInvalid
   } = rest;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
-    ref: ref,
-    style: style,
-    onMouseOver: onMouseOver,
-    onMouseOut: onMouseOut,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    disabled: inactive,
-    value: value || (placeholder !== undefined ? placeholder.value : undefined),
-    onChange: event => onChange(event.target.value, event),
-    id: nativeID,
-    "aria-label": accessibilityLabel,
-    "aria-describedby": accessibilityDescribedBy,
-    "aria-invalid": accessibilityInvalid,
-    "data-testid": testID,
-    children: [placeholder !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
-      value: placeholder.value,
-      disabled: true,
-      hidden: true,
-      children: placeholder.label
-    }), children]
-  });
+  return (
+    /*#__PURE__*/
+    /**
+     * The onOpen and onClose methods are to call the new active variant that changes the icon of the select,
+     * onOpen when the select is open and onClose when the select is closed, onOpen is in the event onMousedown
+     * when is selected and oClose is in onMouseOut and onChange when the select is closed.
+     */
+    _jsxs("select", {
+      ref: ref,
+      style: style,
+      onMouseOver: onMouseOver,
+      onMouseOut: () => {
+        onMouseOut === null || onMouseOut === void 0 || onMouseOut();
+        onClose === null || onClose === void 0 || onClose();
+      },
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onMouseDown: onOpen,
+      disabled: inactive,
+      value: value || (placeholder !== undefined ? placeholder.value : undefined),
+      onChange: event => {
+        onClose();
+        onChange(event.target.value, event);
+      },
+      id: nativeID,
+      "aria-label": accessibilityLabel,
+      "aria-describedby": accessibilityDescribedBy,
+      "aria-invalid": accessibilityInvalid,
+      "data-testid": testID,
+      ...selectedProps,
+      children: [placeholder !== undefined && /*#__PURE__*/_jsx("option", {
+        value: placeholder.value,
+        disabled: true,
+        hidden: true,
+        children: placeholder.label
+      }), children]
+    })
+  );
 });
 Picker.displayName = 'Picker';
-var _default = Picker;
-exports.default = _default;
+export default Picker;
 Picker.propTypes = {
-  value: _propTypes.default.string,
-  onChange: _propTypes.default.func,
-  onFocus: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  onMouseOver: _propTypes.default.func,
-  onMouseOut: _propTypes.default.func,
-  style: _propTypes.default.object,
-  inactive: _propTypes.default.bool,
-  children: (0, _utils.componentPropType)(['Item', 'Group']),
-  placeholder: _propTypes.default.shape({
-    value: _propTypes.default.string,
-    label: _propTypes.default.string
+  ...selectedSystemPropTypes,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onMouseOut: PropTypes.func,
+  /**
+   * It executes when the select choices are open
+   */
+  onOpen: PropTypes.func,
+  /**
+   * It executes when the select choices are closed
+   */
+  onClose: PropTypes.func,
+  style: PropTypes.object,
+  inactive: PropTypes.bool,
+  children: componentPropType(['Item', 'Group']),
+  placeholder: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
   }),
-  nativeID: _propTypes.default.string,
-  testID: _propTypes.default.string
+  nativeID: PropTypes.string,
+  testID: PropTypes.string
 };

package/lib/Select/Picker.native.js

@@ -1,35 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _reactNativePickerSelect = _interopRequireDefault(require("react-native-picker-select"));
-
-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 }; }
-
-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; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import NativePicker from 'react-native-picker-select';
+import { a11yProps, componentPropType } from '../utils';
+import Group from './Group';
+import { ANDROID_HEIGHT_OFFSET, ANDROID_HORIZONTAL_PADDING_OFFSET, ANDROID_DEFAULT_PADDING } from './constants';
 
 // Styling of the native input is very limited, most of the styles have to be applied to an additional View
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const selectAndroidInputStyles = _ref => {
   let {
     height = 0,
@@ -41,25 +20,25 @@ const selectAndroidInputStyles = _ref => {
     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 = _constants.ANDROID_DEFAULT_PADDING,
-    paddingRight = _constants.ANDROID_DEFAULT_PADDING,
+    paddingLeft = ANDROID_DEFAULT_PADDING,
+    paddingRight = ANDROID_DEFAULT_PADDING,
     ...rest
   } = _ref2;
-  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
+  return {
+    ...rest,
+    paddingLeft: paddingLeft > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingLeft - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
+    paddingRight: paddingRight > ANDROID_HORIZONTAL_PADDING_OFFSET ? paddingRight - ANDROID_HORIZONTAL_PADDING_OFFSET : ANDROID_DEFAULT_PADDING,
+    paddingBottom: ANDROID_DEFAULT_PADDING,
+    paddingTop: ANDROID_DEFAULT_PADDING,
+    height: rest.height + ANDROID_HEIGHT_OFFSET
   };
 };
-
-const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const Picker = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     value,
     onChange,
@@ -71,16 +50,13 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     placeholder,
     ...rest
   } = _ref3;
-
   // 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) {
+  const flatChildren = React.Children.toArray(children).flatMap(child => {
+    if (child.type === Group) {
       return child.props.children;
     }
-
     return child;
   });
-
   const items = flatChildren.map(_ref4 => {
     let {
       props
@@ -89,8 +65,9 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       label: props.children,
       value: props.value
     };
-  }); // Unlike other input components, react-native-picker-select doesn't pass an event to its change fn.
+  });
 
+  // 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, {
       // TODO: see if it's possible to pass a real React SyntheticEvent here. For now, just pass an
@@ -101,12 +78,11 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       }
     });
   };
-
-  const picker = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativePickerSelect.default, {
+  const picker = /*#__PURE__*/_jsx(NativePicker, {
     pickerProps: {
       ref
     },
-    touchableWrapperProps: _utils.a11yProps.select(rest),
+    touchableWrapperProps: a11yProps.select(rest),
     onOpen: onFocus,
     onClose: onBlur,
     disabled: inactive,
@@ -119,26 +95,25 @@ const Picker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     },
     placeholder: placeholder !== undefined ? placeholder : {}
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: _Platform.default.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {
       style: selectAndroidContainerStyles(style),
       children: picker
     }) : picker
   });
 });
 Picker.displayName = 'Picker';
-var _default = Picker;
-exports.default = _default;
+export default Picker;
 Picker.propTypes = {
-  value: _propTypes.default.string,
-  onChange: _propTypes.default.func,
-  onFocus: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  style: _propTypes.default.object,
-  inactive: _propTypes.default.bool,
-  children: (0, _utils.componentPropType)(['Item', 'Group']),
-  placeholder: _propTypes.default.shape({
-    value: _propTypes.default.string,
-    label: _propTypes.default.string
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  style: PropTypes.object,
+  inactive: PropTypes.bool,
+  children: componentPropType(['Item', 'Group']),
+  placeholder: PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
   })
 };