@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/lib/TextInput/TextArea.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _utils = require("../utils");
+
+var _InputSupports = _interopRequireDefault(require("../InputSupports"));
+
+var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _propTypes = _interopRequireDefault(require("../InputSupports/propTypes"));
+
+var _propTypes2 = _interopRequireDefault(require("./propTypes"));
+
+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; }
+
+/**
+ * Use to collect long-form information such as product feedback or support queries.
+ * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
+ * The `TextArea` height will automatically increase when new lines are added - this behavior can be limited within the theme.
+ *
+ * ## Controlled component
+ * If it is required that the state of the `TextArea` be controlled by the application or other external methods,
+ * `value` and `onChange` props must be passed to the `TextArea`.
+ * If the `TextArea` value should not be changed by user input, a `readOnly` prop must be provided.
+ *
+ * ## Uncontrolled component
+ * If it is not necessary to control the `TextArea` state, you can create one without a value prop.
+ * In this case its value can be accessed within the `onChange` callback.
+ *
+ * ## Getting feedback for entered values
+ * Use the `feedback` prop to give the user feedback regarding their input.
+ * You can affirm that the user's input was correct, or highlight errors that must be corrected, using the `validation` prop.
+ * Keep feedback text as brief as possible, should be limited to text and links.
+ *
+ * ## Supplying a hint
+ * Use the `hint` prop to succinctly clarify attributes of the expected input data, such as the expected format,
+ * or an indicator that the field is optional.
+ * It is a more usable and accessible option than the HTML `placeholder` attribute.
+ */
+const TextArea = /*#__PURE__*/(0, _react.forwardRef)(({
+  tokens,
+  variant = {},
+  ...remainingProps
+}, ref) => {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
+  const [inputHeight, setInputHeight] = (0, _react.useState)(); // adjust the text area's height as new lines are added to the content
+
+  const onHeightChange = ({
+    nativeEvent: {
+      contentSize: {
+        height
+      }
+    }
+  }) => {
+    // on native this is happens out of the box
+    if (_Platform.default.OS === 'web') {
+      setInputHeight(height);
+    }
+  };
+
+  const {
+    props: supportsProps,
+    rest
+  } = _propTypes.default.select(remainingProps);
+
+  const inputProps = { ...rest,
+    variant: { ...variant,
+      validation: supportsProps.validation
+    },
+    multiline: true,
+    onContentSizeChange: onHeightChange,
+    height: inputHeight,
+    tokens: themeTokens
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
+    children: ({
+      a11yProps,
+      inputId
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      ref: ref,
+      ...inputProps,
+      ...a11yProps,
+      nativeID: inputId
+    })
+  });
+});
+TextArea.displayName = 'TextArea';
+TextArea.propTypes = { ..._propTypes.default.types,
+  ..._propTypes2.default,
+  tokens: (0, _utils.getTokensPropType)('TextArea', 'TextInput'),
+  // TODO: support both TextArea and TextInput tokens
+  variant: _utils.variantProp.propType
+};
+var _default = TextArea;
+exports.default = _default;

package/lib/TextInput/TextInput.js

@@ -1,93 +1,30 @@
-import React, { useState } from 'react';
-import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, useInputValue, variantProp } from '../utils';
-import InputLabel from '../InputLabel';
-import Feedback from '../Feedback';
-import useUniqueId from '../utils/useUniqueId';
-import StackView from '../StackView';
+"use strict";
 
-const selectInputStyles = ({
-  backgroundColor,
-  color,
-  borderWidth,
-  borderColor,
-  borderRadius,
-  paddingTop,
-  paddingBottom,
-  paddingLeft,
-  paddingRight = 0,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight,
-  icon,
-  iconSize = 0
-}, inactive) => {
-  // 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' && typeof borderWidth === 'number' ? Math.max(0, value - borderWidth) : value;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-  const textStyles = applyTextStyles({
-    fontName,
-    fontSize,
-    lineHeight,
-    fontWeight
-  });
-  const webStyles = Platform.select({
-    web: {
-      outline: 'none',
-      cursor: inactive ? 'not-allowed' : undefined
-    }
-  });
-  const paddingWithIcon = iconSize + paddingRight;
-  return {
-    backgroundColor,
-    color,
-    borderWidth,
-    borderColor,
-    borderRadius,
-    paddingLeft: offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
-    paddingTop: offsetBorder(paddingTop),
-    paddingBottom: offsetBorder(paddingBottom),
-    ...textStyles,
-    ...webStyles
-  };
-};
+var _react = _interopRequireWildcard(require("react"));
 
-const selectOuterBorderStyles = ({
-  outerBackgroundColor,
-  outerBorderWidth = 0,
-  outerBorderColor,
-  outerBorderRadius = 0
-}) => {
-  // Use negative margins so that the outer border doesn't expand the input's bounding box
-  const margin = -1 * outerBorderWidth; // Account for the border width since we style it as an outline
+var _utils = require("../utils");
 
-  const borderRadius = outerBorderRadius + outerBorderWidth;
-  return {
-    background: outerBackgroundColor,
-    borderWidth: outerBorderWidth,
-    borderColor: outerBorderColor,
-    borderRadius,
-    marginTop: margin,
-    marginBottom: margin,
-    marginLeft: margin,
-    marginRight: margin
-  };
-};
+var _InputSupports = _interopRequireDefault(require("../InputSupports"));
 
-const selectIconTokens = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
+var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
+
+var _propTypes = _interopRequireDefault(require("../InputSupports/propTypes"));
+
+var _propTypes2 = _interopRequireDefault(require("./propTypes"));
+
+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 joinDefined = array => array.filter(item => item !== undefined).join(' ');
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -106,230 +43,39 @@ const joinDefined = array => array.filter(item => item !== undefined).join(' ');
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-
-
-function TextInput({
-  value,
-  initialValue,
-  label,
-  hint,
-  hintPosition = 'inline',
-  feedback,
-  tooltip,
-  validation,
-  inactive,
-  readOnly,
-  onChange,
-  onChangeText,
-  onFocus,
-  onBlur,
-  onMouseOver,
-  onMouseOut,
+const TextInput = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant = {},
   ...remainingProps
-}) {
-  const inputId = useUniqueId('text-input');
-  const hintId = useUniqueId('text-input-hint');
-  const feedbackId = useUniqueId('text-input-feedback');
-  const [isFocused, setIsFocused] = useState(false);
-
-  const handleFocus = event => {
-    setIsFocused(true);
-    if (typeof onFocus === 'function') onFocus(event);
-  };
-
-  const handleBlur = event => {
-    setIsFocused(false);
-    if (typeof onBlur === 'function') onBlur(event);
-  };
-
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseOver = event => {
-    setIsHovered(true);
-    if (typeof onMouseOver === 'function') onMouseOver(event);
-  };
-
-  const handleMouseOut = event => {
-    setIsHovered(false);
-    if (typeof onMouseOut === 'function') onMouseOut(event);
-  };
-
+}, ref) => {
   const {
-    currentValue,
-    setValue,
-    isControlled
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange,
-    readOnly
-  });
-
-  const handleChangeText = text => {
-    setValue(text);
-    if (typeof onChangeText === 'function') onChangeText(text);
-  };
-
-  const states = {
-    focus: isFocused,
-    hover: isHovered,
-    inactive
-  };
-  const themeTokens = useThemeTokens('TextInput', tokens, { ...variant,
-    validation
-  }, states);
-  const {
-    icon: IconComponent,
-    space
-  } = themeTokens;
-  const hasValidationError = validation === 'error';
-  const inputProps = { ...remainingProps,
-    editable: !inactive,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onChangeText: handleChangeText,
-    accessibilityLabel: label,
-    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]),
-    // native only -> replaced with describedBy on web
-    accessibilityDescribedBy: joinDefined([!hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert, so there's no need to include it here
-    hint && hintId]),
-    // introduced in RNW 0.15.0
-    accessibilityInvalid: hasValidationError,
-    // introduced in RNW 0.15.0
-    nativeID: inputId,
-    defaultValue: initialValue,
-    // currentValue is being updated even if the input is not controlled, passing it down to the
-    // Input could lead to changing its state from uncontrolled to controlled
-    value: isControlled ? currentValue : undefined
+    props: supportsProps,
+    rest
+  } = _propTypes.default.select(remainingProps);
+
+  const inputProps = { ...rest,
+    tokens,
+    variant: { ...variant,
+      validation: supportsProps.validation
+    }
   };
-  const feedbackVariant = {};
-
-  if (hasValidationError) {
-    feedbackVariant.state = 'error';
-  } else if (validation === 'success') {
-    feedbackVariant.state = 'success';
-  }
-
-  return /*#__PURE__*/React.createElement(StackView, {
-    space: space
-  }, label && /*#__PURE__*/React.createElement(InputLabel, {
-    label: label,
-    hint: hint,
-    hintPosition: hintPosition,
-    hintId: hintId,
-    tooltip: tooltip,
-    forId: inputId
-  }), /*#__PURE__*/React.createElement(View, {
-    style: selectOuterBorderStyles(themeTokens)
-  }, /*#__PURE__*/React.createElement(NativeTextInput, Object.assign({
-    style: selectInputStyles(themeTokens, inactive)
-  }, inputProps)), IconComponent && /*#__PURE__*/React.createElement(View, {
-    pointerEvents: "none" // avoid hijacking input press events
-    ,
-    style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]
-  }, /*#__PURE__*/React.createElement(IconComponent, {
-    tokens: selectIconTokens(themeTokens)
-  }))), feedback && /*#__PURE__*/React.createElement(Feedback, {
-    title: feedback,
-    variant: feedbackVariant,
-    accessibilityRole: hasValidationError ? 'alert' : undefined
-  }));
-}
-
-const selectIconContainerStyles = ({
-  paddingRight
-}) => ({
-  paddingRight
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
+    children: ({
+      a11yProps,
+      inputId
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, {
+      ref: ref,
+      ...inputProps,
+      ...a11yProps,
+      nativeID: inputId
+    })
+  });
 });
-
-TextInput.propTypes = {
-  /**
-   * The input label.
-   */
-  label: PropTypes.string,
-
-  /**
-   * If the `TextInput's` state is to be controlled by a parent component, use this prop
-   * together with the `onChange` to pass down and update the lifted state.
-   */
-  value: PropTypes.string,
-
-  /**
-   * Use this to set the initial value of an uncontrolled `TextInput`.
-   * Updating `initialValue` will **not** update the actual value.
-   */
-  initialValue: PropTypes.string,
-
-  /**
-   * A short description of the expected input.
-   */
-  hint: PropTypes.string,
-
-  /**
-   * Position of the hint relative to label.
-   */
-  hintPosition: PropTypes.oneOf(['inline', 'below']),
-
-  /**
-   * A detailed description of validation error/success or additional instructions.
-   * Visual variant is determined based on the `validation` prop.
-   */
-  feedback: PropTypes.string,
-
-  /**
-   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
-   */
-  tooltip: PropTypes.string,
-
-  /**
-   * Use to visually mark an input as valid or invalid.
-   */
-  validation: PropTypes.oneOf(['error', 'success']),
-
-  /**
-   * Disables all user interactions with the input.
-   */
-  inactive: PropTypes.bool,
-
-  /**
-   * Makes it impossible to change the input's value.
-   */
-  readOnly: PropTypes.bool,
-
-  /**
-   * Use to react upon input's value changes. Required when the `value` prop is set.
-   * Will receive the input's value as an argument.
-   */
-  onChange: PropTypes.func,
-
-  /** @ignore */
-  onChangeText: PropTypes.func,
-
-  /** @ignore */
-  onFocus: PropTypes.func,
-
-  /** @ignore */
-  onBlur: PropTypes.func,
-
-  /** @ignore */
-  onMouseOver: PropTypes.func,
-
-  /** @ignore */
-  onMouseOut: PropTypes.func,
-  tokens: getTokensPropType('TextInput'),
-  variant: variantProp.propType
+TextInput.displayName = 'TextInput';
+TextInput.propTypes = { ..._propTypes.default.types,
+  ..._propTypes2.default,
+  tokens: (0, _utils.getTokensPropType)('TextInput'),
+  variant: _utils.variantProp.propType
 };
-export default TextInput;
-const staticStyles = StyleSheet.create({
-  iconContainer: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  }
-});
+var _default = TextInput;
+exports.default = _default;