@telus-uds/components-base 1.18.1 → 1.20.0

package/lib-module/TextInput/TextInputBase.js

@@ -1,11 +1,14 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
 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, useTheme, useThemeTokens, applyOuterBorder } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useInputValue, variantProp, viewProps } from '../utils';
+import StackView from '../StackView';
+import IconButton from '../IconButton';
+import { a11yProps, getTokensPropType, selectSystemProps, textInputHandlerProps, textInputProps, useCopy, useInputValue, useSpacingScale, variantProp, viewProps } from '../utils';
+import dictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, textInputHandlerProps, textInputProps, viewProps]);
@@ -110,35 +113,49 @@ const selectIconTokens = _ref3 => {
   };
 };
 
-const selectIconContainerStyles = _ref4 => {
+const selectIconContainerStyles = (_ref4, buttonCount) => {
   let {
+    buttonSize,
+    buttonsGapSize,
     paddingRight,
     paddingBottom
   } = _ref4;
   return {
-    paddingRight,
+    paddingRight: paddingRight + buttonCount * (buttonSize + buttonsGapSize),
     paddingBottom
   };
 };
 
-const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
+const selectButtonsContainerStyle = _ref5 => {
   let {
-    value,
+    buttonsPaddingRight
+  } = _ref5;
+  return {
+    paddingRight: buttonsPaddingRight
+  };
+};
+
+const TextInputBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
+  let {
+    buttons = [],
+    copy = 'en',
     height,
-    initialValue,
     inactive,
-    readOnly,
+    initialValue,
+    onBlur,
     onChange,
     onChangeText,
+    onClear,
     onFocus,
-    onBlur,
-    onMouseOver,
     onMouseOut,
+    onMouseOver,
     pattern,
+    readOnly,
     tokens,
+    value,
     variant = {},
     ...rest
-  } = _ref5;
+  } = _ref6;
   const [isFocused, setIsFocused] = useState(false);
 
   const handleFocus = event => {
@@ -163,17 +180,22 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
     if (typeof onMouseOut === 'function') onMouseOut(event);
   };
 
+  const defaultRef = useRef();
+  const inputRef = ref !== null && ref !== void 0 ? ref : defaultRef;
   const {
     currentValue,
+    resetValue,
     setValue,
-    isControlled
+    isControlled,
+    isDirty
   } = useInputValue({
     value,
     initialValue,
+    inputRef,
     onChange,
     readOnly
   });
-  const element = ref === null || ref === void 0 ? void 0 : ref.current;
+  const element = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
   useEffect(() => {
     if (Platform.OS === 'web' && pattern && element) {
       // React Native Web doesn't support `pattern`, so we have to attach it via a ref,
@@ -197,8 +219,35 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
   };
   const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
   const {
+    buttonsGap,
+    clearButtonIcon: ClearButtonIcon,
     icon: IconComponent
   } = themeTokens;
+  const buttonsGapSize = useSpacingScale(buttonsGap);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+
+  if (onClear && isDirty) {
+    const handleClear = event => {
+      var _inputRef$current;
+
+      onClear === null || onClear === void 0 ? void 0 : onClear(event);
+      resetValue(event);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    };
+
+    buttons === null || buttons === void 0 ? void 0 : buttons.unshift( /*#__PURE__*/_jsx(IconButton, {
+      accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
+      icon: ClearButtonIcon,
+      onPress: handleClear,
+      variant: {
+        compact: true
+      }
+    }, "clear"));
+  }
+
   const inputProps = { ...selectProps(rest),
     editable: !inactive,
     onFocus: handleFocus,
@@ -220,36 +269,62 @@ const TextInputBase = /*#__PURE__*/forwardRef((_ref5, ref) => {
   return /*#__PURE__*/_jsxs(View, {
     style: selectOuterBorderStyles(themeTokens),
     children: [/*#__PURE__*/_jsx(NativeTextInput, {
-      ref: ref,
+      ref: inputRef,
       style: nativeInputStyle,
       ...inputProps
     }), IconComponent && /*#__PURE__*/_jsx(View, {
       pointerEvents: "none" // avoid hijacking input press events
       ,
-      style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
+      style: [staticStyles.iconContainer, selectIconContainerStyles({ ...themeTokens,
+        buttonsGapSize
+      }, buttons === null || buttons === void 0 ? void 0 : buttons.length)],
       children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconTokens(themeTokens)
       })
+    }), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 0 && /*#__PURE__*/_jsx(View, {
+      style: [staticStyles.buttonsContainer, selectButtonsContainerStyle(themeTokens)],
+      children: /*#__PURE__*/_jsx(StackView, {
+        direction: "row",
+        space: buttonsGap,
+        children: buttons
+      })
     })]
   });
 });
 TextInputBase.displayName = 'TextInputBase';
 TextInputBase.propTypes = { ...selectedSystemPropTypes,
-  value: PropTypes.string,
+  buttons: PropTypes.arrayOf(PropTypes.node),
+
+  /**
+   * Select English or French copy for the accessible labels.
+   * You may also pass in a custom dictionary object.
+   */
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
+    clearButtonAccessibilityLabel: PropTypes.string
+  })]),
   height: PropTypes.number,
-  initialValue: PropTypes.string,
   inactive: PropTypes.bool,
-  readOnly: PropTypes.bool,
+  initialValue: PropTypes.string,
+  onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onChangeText: PropTypes.func,
+  onClear: PropTypes.func,
   onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  readOnly: PropTypes.bool,
   tokens: getTokensPropType('TextInput', 'TextArea'),
+  value: PropTypes.string,
   variant: variantProp.propType
 };
 export default TextInputBase;
 const staticStyles = StyleSheet.create({
+  buttonsContainer: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center'
+  },
   iconContainer: {
     position: 'absolute',
     right: 0,

package/lib-module/TextInput/dictionary.js

@@ -0,0 +1,8 @@
+export default {
+  en: {
+    clearButtonAccessibilityLabel: 'Clear'
+  },
+  fr: {
+    clearButtonAccessibilityLabel: 'Effacer'
+  }
+};

package/lib-module/ThemeProvider/ThemeProvider.js

@@ -12,8 +12,10 @@ const ThemeProvider = _ref => {
     children,
     defaultTheme,
     // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
+    // TODO: switch `forceZIndex` to be false by default in the next major version
     themeOptions = {
-      forceAbsoluteFontSizing: true
+      forceAbsoluteFontSizing: true,
+      forceZIndex: true
     }
   } = _ref;
   const [theme, setTheme] = useState(defaultTheme); // Validate the theme tokens version on every render.
@@ -48,9 +50,12 @@ ThemeProvider.propTypes = {
    *   relative sizing (in `rem`, scales depending on the browser settings)
    * - `contentMaxWidth`: allows configuration of the content max width to be used in components
    *   such as Footnote and Notification to avoid content to stretch width more then the page's width
+   * - `forceZIndex`: available on web only, when set to false, sets zIndex on `View` to be `auto`
+   *   and when true, sets zIndex to be `0` (the default from `react-native-web`)
    */
   themeOptions: PropTypes.shape({
     forceAbsoluteFontSizing: PropTypes.bool,
+    forceZIndex: PropTypes.bool,
     contentMaxWidth: responsiveProps.getTypeOptionallyByViewport(PropTypes.number)
   })
 };

package/lib-module/index.js

@@ -21,6 +21,7 @@ export { default as InputSupports } from './InputSupports';
 export * from './Link';
 export { default as List, ListItem, ListBase } from './List';
 export { default as Modal } from './Modal';
+export { default as MultiSelectFilter } from './MultiSelectFilter';
 export { default as Notification } from './Notification';
 export { default as Pagination } from './Pagination';
 export { default as Progress } from './Progress';
@@ -29,6 +30,7 @@ export { default as Radio } from './Radio';
 export * from './Radio';
 export { default as RadioCard } from './RadioCard';
 export * from './RadioCard';
+export { default as Responsive } from './Responsive';
 export { default as Search } from './Search';
 export { default as Select } from './Select';
 export { default as SideNav } from './SideNav';

package/lib-module/utils/BaseView/BaseView.js

@@ -0,0 +1,43 @@
+import React, { forwardRef } from 'react';
+import NativeView from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import PropTypes from 'prop-types';
+import { useTheme } from '../../ThemeProvider';
+/**
+ * Identical to React Native's View and supporting all the same props, but with:
+ *  - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaseView = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    style,
+    ...rest
+  } = _ref;
+  const {
+    themeOptions
+  } = useTheme();
+  const styleProp = Array.isArray(style) ? [...style] : [style];
+
+  if (!themeOptions.forceZIndex) {
+    styleProp.unshift(styles.resetZIndex);
+  }
+
+  return /*#__PURE__*/_jsx(NativeView, { ...rest,
+    style: styleProp,
+    ref: ref,
+    children: children
+  });
+});
+BaseView.displayName = 'BaseView';
+const styles = StyleSheet.create({
+  resetZIndex: {
+    zIndex: 'auto'
+  }
+});
+BaseView.propTypes = {
+  children: PropTypes.node,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
+};
+export default BaseView;

package/lib-module/utils/BaseView/BaseView.native.js

@@ -0,0 +1,6 @@
+import BaseView from "react-native-web/dist/exports/View";
+/**
+ * Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
+ */
+
+export default BaseView;

package/lib-module/utils/BaseView/index.js

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

package/lib-module/utils/index.js

@@ -15,4 +15,5 @@ export * from './useResponsiveProp';
 export { default as useUniqueId } from './useUniqueId';
 export { default as withLinkRouter } from './withLinkRouter';
 export * from './ssr';
-export { default as containUniqueFields } from './containUniqueFields';
+export { default as containUniqueFields } from './containUniqueFields';
+export { default as BaseView } from './BaseView';

package/lib-module/utils/input.js

@@ -77,6 +77,7 @@ export const useInputValue = function () {
   const {
     value,
     initialValue,
+    inputRef,
     onChange,
     readOnly = false
   } = props;
@@ -90,19 +91,26 @@ export const useInputValue = function () {
   }); // Make current value accessible inside useCallback without rememoizing every time the value changes
 
   valueRef.current.value = currentValue;
+  const isDirty = currentValue !== valueRef.current.initial;
   const setValue = useCallback((arg, event) => {
     if (readOnly) return;
     const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
-    if (!isControlled) setOwnValue(newValue); // Call onChange handler if there's something for it to handle (event or a changed value)
+
+    if (!isControlled) {
+      setOwnValue(newValue);
+      if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue !== null && newValue !== void 0 ? newValue : '';
+    } // Call onChange handler if there's something for it to handle (event or a changed value)
+
 
     if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
-  }, [isControlled, onChange, readOnly]);
+  }, [inputRef, isControlled, onChange, readOnly]);
   const resetValue = useCallback(event => setValue(valueRef.current.initial, event), [setValue]);
   return {
     currentValue,
     setValue,
     resetValue,
-    isControlled
+    isControlled,
+    isDirty
   };
 };
 /**

package/lib-module/utils/props/handlerProps.js

@@ -27,6 +27,11 @@ const textInputHandlerProps = {
      */
     onChangeText: PropTypes.func,
 
+    /**
+     * onClear handler
+     */
+    onClear: PropTypes.func,
+
     /**
      * onSubmit handler
      */

package/package.json

@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/system-constants": "^1.0.4",
-    "@telus-uds/system-theme-tokens": "^2.6.0",
+    "@telus-uds/system-constants": "^1.2.0",
+    "@telus-uds/system-theme-tokens": "^2.8.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -54,6 +54,9 @@
   },
   "scripts": {
     "test": "jest",
+    "test:web": "jest --config jest.config-web.js",
+    "test:ios": "jest --config jest.config-ios.js",
+    "test:android": "jest --config jest.config-android.js",
     "lint": "npm run --prefix ../.. lint:path -- --color packages/components-base",
     "lint:fix": "npm run --prefix ../.. lint:path -- --fix packages/components-base",
     "format": "prettier --write .",
@@ -67,5 +70,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.18.1"
+  "version": "1.20.0"
 }

package/src/BaseProvider/index.jsx

@@ -21,7 +21,10 @@ const BaseProvider = ({ defaultTheme, children, themeOptions }) => (
 BaseProvider.propTypes = {
   children: PropTypes.node.isRequired,
   defaultTheme: ThemeProvider.propTypes?.defaultTheme,
-  themeOptions: PropTypes.shape({ forceAbsoluteFontSizing: PropTypes.bool })
+  themeOptions: PropTypes.shape({
+    forceAbsoluteFontSizing: PropTypes.bool,
+    forceZIndex: PropTypes.bool
+  })
 }
 
 export default BaseProvider

package/src/Box/Box.jsx

@@ -24,7 +24,20 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  */
 
 const selectBoxStyles = (tokens) => {
-  const styles = { backgroundColor: tokens.backgroundColor }
+  let styles = { backgroundColor: tokens.backgroundColor }
+  if (tokens.gradient) {
+    const {
+      gradient: {
+        angle,
+        stops: [stopOne, stopTwo]
+      }
+    } = tokens
+    styles = {
+      ...styles,
+      backgroundImage: `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
+    }
+  }
+
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
   // Only set on styles if token provided because we spread this object after the spacing scale values
   paddings.forEach((side) => {

package/src/Button/ButtonBase.jsx

@@ -123,7 +123,7 @@ const selectBorderStyles = ({ borderColor, borderWidth, borderRadius }) => ({
 })
 
 const selectTextStyles = (
-  { fontSize, color, lineHeight, fontName, fontWeight, textAlign },
+  { fontSize, color, lineHeight, fontName, fontWeight, textAlign, textLine, textLineStyle },
   themeOptions
 ) =>
   applyTextStyles({
@@ -133,7 +133,9 @@ const selectTextStyles = (
     fontName,
     fontWeight,
     themeOptions,
-    textAlign
+    textAlign,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle
   })
 
 const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {

package/src/Button/ButtonDropdown.jsx

@@ -0,0 +1,179 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { Platform, Text, View } from 'react-native'
+import buttonPropTypes, { textAndA11yText } from './propTypes'
+import ButtonBase from './ButtonBase'
+import { useThemeTokensCallback } from '../ThemeProvider'
+import {
+  a11yProps,
+  focusHandlerProps,
+  resolvePressableState,
+  selectTokens,
+  useInputValue
+} from '../utils'
+import Icon from '../Icon'
+import { getStackedContent } from '../StackView'
+import { getPressHandlersWithArgs } from '../utils/pressability'
+
+const selectIconTokens = ({
+  icon,
+  iconPosition,
+  iconSpace,
+  iconSize,
+  iconColor,
+  iconBackground,
+  iconBorderRadius,
+  iconAlignSelf,
+  iconPadding,
+  iconTranslateX,
+  iconTranslateY
+}) => ({
+  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 ButtonDropdown = forwardRef(
+  (
+    {
+      value,
+      initialValue,
+      onChange,
+      label,
+      tokens,
+      variant,
+      inactive = false,
+      readOnly = false,
+      children = null,
+      accessibilityRole = 'radio',
+      ...props
+    },
+    ref
+  ) => {
+    const { currentValue: isOpen, setValue: setIsOpen } = useInputValue(
+      {
+        value,
+        initialValue,
+        onChange,
+        readOnly
+      },
+      'useButtonDropdownValues'
+    )
+
+    const extraState = {
+      open: isOpen,
+      inactive,
+      ...variant
+    }
+
+    const getTokens = useThemeTokensCallback('ButtonDropdown', tokens, extraState)
+
+    const getButtonTokens = (buttonState) => selectTokens('Button', getTokens(buttonState))
+
+    // Pass an object of relevant component state as first argument for any passed-in press handlers
+    const pressHandlers = getPressHandlersWithArgs(props, [{ label, open: isOpen }])
+
+    const handlePress = (event) => {
+      if (!inactive) {
+        if (pressHandlers.onPress) pressHandlers?.onPress(event)
+        setIsOpen(!isOpen, event)
+      }
+    }
+
+    return (
+      <ButtonBase
+        ref={ref}
+        {...pressHandlers}
+        onPress={handlePress}
+        tokens={getButtonTokens}
+        inactive={inactive}
+        icon={() => null}
+        accessibilityRole={accessibilityRole}
+        {...props}
+      >
+        {({ textStyles, ...buttonState }) => {
+          // 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 = getTokens(buttonState)
+
+          const {
+            iconTokens,
+            iconPosition,
+            iconSpace,
+            iconWrapperStyle,
+            icon: IconComponent
+          } = selectIconTokens(itemTokens)
+
+          const iconContent = IconComponent ? (
+            <View style={iconWrapperStyle}>
+              <Icon icon={IconComponent} tokens={iconTokens} />
+            </View>
+          ) : null
+
+          const childrenContent = () =>
+            typeof children === 'function'
+              ? children({ ...resolvePressableState(buttonState, extraState), textStyles })
+              : children
+
+          const content = children ? childrenContent() : <Text style={textStyles}>{label}</Text>
+
+          return getStackedContent(
+            iconPosition === 'left' ? [iconContent, content] : [content, iconContent],
+            { space: iconSpace, direction: 'row' }
+          )
+        }}
+      </ButtonBase>
+    )
+  }
+)
+ButtonDropdown.displayName = 'ButtonDropdown'
+
+ButtonDropdown.propTypes = {
+  ...a11yProps.types,
+  ...focusHandlerProps.types,
+  ...buttonPropTypes,
+  children: textAndA11yText,
+  /**
+   * Callback called when a controlled ButtonDropdown gets interacted with.
+   */
+  onChange: PropTypes.func,
+  /**
+   * `value` prop is being used to set the 'open' state of ButtonDropdown. Use it for
+   *  controlled ButtonDropdown. For uncontrolled ButtonDropdown, use `initialValue`.
+   */
+  value: PropTypes.bool,
+  /**
+   * Use `initialValue` to provide the initial value for an uncontrolled version.
+   */
+  initialValue: PropTypes.bool,
+  /**
+   * The label of ButtonDropdown.
+   */
+  label: PropTypes.string,
+  /**
+   * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
+   */
+  accessibilityRole: PropTypes.string
+}
+
+export default ButtonDropdown

package/src/Button/index.js

@@ -1,5 +1,6 @@
 import Button from './Button'
 import ButtonLink from './ButtonLink'
 import ButtonGroup from './ButtonGroup'
+import ButtonDropdown from './ButtonDropdown'
 
-export { Button, ButtonGroup, ButtonLink }
+export { Button, ButtonDropdown, ButtonGroup, ButtonLink }