@telus-uds/components-base 1.8.3 → 1.9.0

package/lib-module/Tags/Tags.js

@@ -0,0 +1,251 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import ABBPropTypes from 'airbnb-prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import ButtonBase from '../Button/ButtonBase';
+import Icon from '../Icon';
+import { StackWrap, getStackedContent } from '../StackView';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, containUniqueFields, focusHandlerProps, getTokensPropType, pressProps, selectSystemProps, selectTokens, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { getPressHandlersWithArgs } from '../utils/pressability';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
+
+const selectIconTextTokens = _ref => {
+  let {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconSize,
+    iconColor,
+    iconBackground,
+    iconBorderRadius,
+    iconAlignSelf,
+    iconPadding,
+    iconTranslateX,
+    iconTranslateY
+  } = _ref;
+  return {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconWrapperStyle: {
+      backgroundColor: iconBackground,
+      borderRadius: iconBorderRadius,
+      alignSelf: iconAlignSelf,
+      padding: iconPadding,
+      ...Platform.select({
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        web: {
+          transition: 'color 200ms, background 200ms'
+        }
+      })
+    },
+    iconTokens: {
+      size: iconSize,
+      color: iconColor,
+      translateX: iconTranslateX,
+      translateY: iconTranslateY
+    }
+  };
+};
+
+const Tags = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    readOnly = false,
+    inactive = false,
+    accessibilityRole = Platform.select({
+      web: 'group',
+      default: 'none'
+    }),
+    ...rest
+  } = _ref2;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Tags', tokens, variant, {
+    viewport
+  });
+  const stackTokens = selectTokens('StackView', themeTokens);
+  const {
+    direction,
+    space
+  } = themeTokens;
+  const getItemTokens = useThemeTokensCallback('TagsItem', tokens, variant);
+
+  const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
+
+  const {
+    currentValues,
+    toggleOneValue
+  } = useMultipleInputValues({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...rest
+  });
+  const itemA11yRole = 'checkbox';
+  const uniqueFields = ['id', 'label'];
+
+  if (!containUniqueFields(items, uniqueFields)) {
+    throw new Error("Tags items must have unique ".concat(uniqueFields.join(', ')));
+  }
+
+  return /*#__PURE__*/_jsx(StackWrap, {
+    ref: ref,
+    ...selectedProps,
+    space: space,
+    direction: direction,
+    tokens: stackTokens,
+    children: items.map((_ref3, index) => {
+      let {
+        label,
+        id = label,
+        ref: itemRef,
+        ...itemRest
+      } = _ref3;
+      const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+      const pressHandlers = getPressHandlersWithArgs(rest, [{
+        id,
+        label,
+        currentValues
+      }]);
+
+      const handlePress = event => {
+        if (pressHandlers.onPress) pressHandlers.onPress(event);
+        toggleOneValue(id, event);
+      };
+
+      const itemProps = {
+        accessibilityState: {
+          checked: isSelected
+        },
+        accessibilityRole: itemA11yRole,
+        ...a11yProps.getPositionInSet(items.length, index),
+        ...selectItemProps(itemRest)
+      };
+      return /*#__PURE__*/_jsx(ButtonBase, {
+        ref: itemRef,
+        ...pressHandlers,
+        onPress: handlePress,
+        tokens: getButtonTokens,
+        selected: isSelected,
+        inactive: inactive,
+        ...itemProps,
+        children: _ref4 => {
+          let {
+            textStyles,
+            ...buttonState
+          } = _ref4;
+          // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
+          // an icon should go in Icon itself, or possibly via an IconText token set. Related issues:
+          // - Icon: https://github.com/telus/universal-design-system/issues/327
+          // - IconButton: https://github.com/telus/universal-design-system/issues/281
+          // - Token sets: https://github.com/telus/universal-design-system/issues/782
+          const itemTokens = getItemTokens(buttonState);
+          const {
+            iconTokens,
+            iconPosition,
+            iconSpace,
+            iconWrapperStyle,
+            icon: IconComponent
+          } = selectIconTextTokens(itemTokens);
+          const iconContent = IconComponent ? /*#__PURE__*/_jsx(View, {
+            style: iconWrapperStyle,
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: IconComponent,
+              tokens: iconTokens
+            })
+          }) : null;
+
+          const textContent = /*#__PURE__*/_jsx(Text, {
+            style: textStyles,
+            children: label
+          });
+
+          return getStackedContent(iconPosition === 'left' ? [iconContent, textContent] : [textContent, iconContent], {
+            space: iconSpace,
+            direction: 'row'
+          });
+        }
+      }, id);
+    })
+  });
+});
+Tags.displayName = 'Tags';
+Tags.propTypes = { ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Tags'),
+  variant: variantProp.propType,
+
+  /**
+   * If provided, sets a maximum number of items a user may select at once.
+   */
+  maxValues: PropTypes.number,
+
+  /**
+   * The options a user may select
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({ ...selectedItemPropTypes,
+
+    /**
+     * The text displayed to the user in the button, describing this option,
+     * passed to the button as its child.
+     */
+    label: PropTypes.string.isRequired,
+
+    /**
+     * An optional accessibility label may be passed to ButtonGroup Buttons
+     * which is applied as normal for a React Native accessibilityLabel prop.
+     */
+    accessibilityLabel: PropTypes.string,
+
+    /**
+     * An optional unique string may be provided to identify this option,
+     * which will be used in code and passed to any onChange function.
+     * If not provided, the label is used.
+     */
+    id: PropTypes.string,
+
+    /**
+     * An optional ref for one individual Tag button in the tags
+     */
+    ref: ABBPropTypes.ref()
+  })),
+
+  /**
+   * 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.func,
+
+  /**
+   * If the selected item(s) in the button group 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 ButtonGroup a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * If `values` is not passed, making the ButtonGroup 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.arrayOf(PropTypes.string)
+};
+export default Tags;

package/lib-module/Tags/index.js

@@ -0,0 +1,2 @@
+import Tags from './Tags';
+export default Tags;

package/lib-module/TextInput/TextArea.js

@@ -0,0 +1,94 @@
+import React, { forwardRef, useState } from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
+import InputSupports from '../InputSupports';
+import TextInputBase from './TextInputBase';
+import { useThemeTokens } from '../ThemeProvider';
+import textInputPropTypes from './propTypes';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
+/**
+ * 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__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref;
+  const themeTokens = useThemeTokens('TextArea', tokens, variant);
+  const [inputHeight, setInputHeight] = useState(); // adjust the text area's height as new lines are added to the content
+
+  const onHeightChange = _ref2 => {
+    let {
+      nativeEvent: {
+        contentSize: {
+          height
+        }
+      }
+    } = _ref2;
+
+    // on native this is happens out of the box
+    if (Platform.OS === 'web') {
+      setInputHeight(height);
+    }
+  };
+
+  const {
+    supportsProps,
+    ...selectedProps
+  } = selectProps(rest);
+  const inputProps = { ...selectedProps,
+    variant: { ...variant,
+      validation: supportsProps.validation
+    },
+    multiline: true,
+    onContentSizeChange: onHeightChange,
+    height: inputHeight,
+    tokens: themeTokens
+  };
+  return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
+    children: _ref3 => {
+      let {
+        inputId,
+        ...props
+      } = _ref3;
+      return /*#__PURE__*/_jsx(TextInputBase, {
+        ref: ref,
+        ...inputProps,
+        nativeID: inputId,
+        ...props
+      });
+    }
+  });
+});
+TextArea.displayName = 'TextArea';
+TextArea.propTypes = { ...selectedSystemPropTypes,
+  ...textInputPropTypes,
+  tokens: getTokensPropType('TextArea', 'TextInput'),
+  // TODO: support both TextArea and TextInput tokens
+  variant: variantProp.propType
+};
+export default TextArea;

package/lib-module/TextInput/TextInput.js

@@ -0,0 +1,64 @@
+import React, { forwardRef } from 'react';
+import { a11yProps, focusHandlerProps, getTokensPropType, inputSupportsProps, selectSystemProps, textInputHandlerProps, textInputProps, variantProp, viewProps } from '../utils';
+import InputSupports from '../InputSupports';
+import TextInputBase from './TextInputBase';
+import textInputPropTypes from './propTypes';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, inputSupportsProps, textInputHandlerProps, textInputProps, viewProps]);
+/**
+ * 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.
+ *
+ * ## Controlled component
+ * If it is required that the state of the `TextInput` be controlled by the application or other external methods,
+ * `value` and `onChange` props must be passed to the `TextInput`.
+ * If the `TextInput` value should not be changed by user input, a `readOnly` prop must be provided.
+ *
+ * ## Uncontrolled component
+ * If it is not necessary to control the `TextInput` state, you can create one without a value prop.
+ * In this case its value can be accessed within the `onChange` callback.
+ *
+ * NOTE: In order to support more advanced usages all additional props will be passed down to the React Native's
+ * `TextInput` component. See <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native documentation</a> for
+ * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
+ * their implementation on the web.
+ */
+
+const TextInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref;
+  const {
+    supportsProps,
+    ...selectedProps
+  } = selectProps(rest);
+  const inputProps = { ...selectedProps,
+    tokens,
+    variant: { ...variant,
+      validation: supportsProps.validation
+    }
+  };
+  return /*#__PURE__*/_jsx(InputSupports, { ...supportsProps,
+    children: _ref2 => {
+      let {
+        inputId,
+        ...props
+      } = _ref2;
+      return /*#__PURE__*/_jsx(TextInputBase, {
+        ref: ref,
+        ...inputProps,
+        nativeID: inputId,
+        ...props
+      });
+    }
+  });
+});
+TextInput.displayName = 'TextInput';
+TextInput.propTypes = { ...selectedSystemPropTypes,
+  ...textInputPropTypes,
+  tokens: getTokensPropType('TextInput'),
+  variant: variantProp.propType
+};
+export default TextInput;

package/lib-module/TextInput/TextInputBase.js

@@ -0,0 +1,254 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import NativeTextInput from "react-native-web/dist/exports/TextInput";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
+
+const selectInputStyles = (_ref, inactive) => {
+  let {
+    backgroundColor,
+    color,
+    borderWidth = 0,
+    borderColor,
+    borderRadius,
+    paddingTop = 0,
+    paddingBottom = 0,
+    paddingLeft,
+    paddingRight = 0,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    icon,
+    iconSize = 0,
+    minLines,
+    maxLines,
+    width,
+    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;
+
+  const textStyles = applyTextStyles({
+    fontName,
+    fontSize,
+    lineHeight,
+    fontWeight
+  });
+
+  function linesToHeight(lines) {
+    const {
+      lineHeight: absoluteLineHeight
+    } = textStyles;
+    return lines !== undefined ? lines * absoluteLineHeight + paddingTop + paddingBottom : undefined;
+  }
+
+  const minHeight = linesToHeight(minLines);
+  const maxHeight = linesToHeight(maxLines);
+  const webStyles = Platform.select({
+    web: {
+      outline: 'none',
+      cursor: inactive ? 'not-allowed' : undefined,
+      resize: minHeight !== maxHeight ? 'vertical' : 'none' // does nothing for an input, only needed for textarea
+
+    }
+  });
+  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),
+    minHeight,
+    maxHeight,
+    width,
+    height,
+    ...textStyles,
+    ...webStyles
+  };
+};
+
+const selectOuterBorderStyles = _ref2 => {
+  let {
+    outerBackgroundColor,
+    outerBorderWidth,
+    outerBorderColor,
+    borderRadius
+  } = _ref2;
+  return {
+    background: outerBackgroundColor,
+    ...applyOuterBorder({
+      outerBorderColor,
+      outerBorderWidth,
+      borderRadius
+    })
+  };
+};
+
+const selectIconTokens = _ref3 => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref3;
+  return {
+    size: iconSize,
+    color: iconColor
+  };
+};
+
+const selectIconContainerStyles = _ref4 => {
+  let {
+    paddingRight,
+    paddingBottom
+  } = _ref4;
+  return {
+    paddingRight,
+    paddingBottom
+  };
+};
+
+const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
+  let {
+    value,
+    height,
+    initialValue,
+    inactive,
+    readOnly,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseOut,
+    pattern,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref5;
+  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);
+  };
+
+  const {
+    currentValue,
+    setValue,
+    isControlled
+  } = useInputValue({
+    value,
+    initialValue,
+    onChange,
+    readOnly
+  });
+  const element = ref === null || ref === void 0 ? void 0 : ref.current;
+  useEffect(() => {
+    if (Platform.OS === 'web' && pattern && element) {
+      // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
+      // which a `pattern` user must provide anyway to call .checkValidity() on the element.
+      element.pattern = pattern;
+    }
+  }, [element, pattern]);
+
+  const handleChangeText = event => {
+    var _event$nativeEvent, _event$target;
+
+    const text = ((_event$nativeEvent = event.nativeEvent) === null || _event$nativeEvent === void 0 ? void 0 : _event$nativeEvent.text) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value);
+    setValue(text, event);
+    if (typeof onChangeText === 'function') onChangeText(text, event);
+  };
+
+  const states = {
+    focus: isFocused,
+    hover: isHovered,
+    inactive
+  };
+  const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
+  const {
+    icon: IconComponent
+  } = themeTokens;
+  const inputProps = { ...selectProps(rest),
+    editable: !inactive,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onChange: handleChangeText,
+    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
+  };
+  const nativeInputStyle = selectInputStyles({ ...themeTokens,
+    height
+  }, inactive);
+  return /*#__PURE__*/_jsxs(View, {
+    style: selectOuterBorderStyles(themeTokens),
+    children: [/*#__PURE__*/_jsx(NativeTextInput, {
+      ref: ref,
+      style: nativeInputStyle,
+      ...inputProps
+    }), IconComponent && /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none" // avoid hijacking input press events
+      ,
+      style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
+      children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
+      })
+    })]
+  });
+});
+TextInputBase.displayName = 'TextInputBase';
+TextInputBase.propTypes = { ...selectedSystemPropTypes,
+  value: PropTypes.string,
+  height: PropTypes.number,
+  initialValue: PropTypes.string,
+  inactive: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  onChange: PropTypes.func,
+  onChangeText: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onMouseOut: PropTypes.func,
+  tokens: getTokensPropType('TextInput', 'TextArea'),
+  variant: variantProp.propType
+};
+export default TextInputBase;
+const staticStyles = StyleSheet.create({
+  iconContainer: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0
+  }
+});

package/lib-module/TextInput/index.js

@@ -0,0 +1,3 @@
+import TextInput from './TextInput';
+import TextArea from './TextArea';
+export { TextInput, TextArea };

package/lib-module/TextInput/propTypes.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'; // These are prop types specific to UDS TextInput; see also ../utils/props/textInputProps
+// for generic React Native props and HTML input attrs that are passed through.
+
+const textInputPropTypes = {
+  /**
+   * If the input'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 input.
+   * Updating `initialValue` will **not** update the actual value.
+   */
+  initialValue: PropTypes.string,
+
+  /**
+   * 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
+};
+export default textInputPropTypes;