@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/esm/Radio/Radio.js

@@ -0,0 +1,282 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import RadioLabel from '../InputLabel/LabelContent';
+import RadioButton, { selectRadioButtonTokens } from './RadioButton';
+import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
+import StackView from '../StackView';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
+const selectContainerStyles = _ref => {
+  let {
+    containerBackgroundColor,
+    containerBorderRadius,
+    containerOpacity,
+    containerPaddingBottom,
+    containerPaddingLeft,
+    containerPaddingRight,
+    containerPaddingTop,
+    containerShadow
+  } = _ref;
+  return {
+    backgroundColor: containerBackgroundColor,
+    borderRadius: containerBorderRadius,
+    opacity: containerOpacity,
+    paddingBottom: containerPaddingBottom,
+    paddingLeft: containerPaddingLeft,
+    paddingRight: containerPaddingRight,
+    paddingTop: containerPaddingTop,
+    ...applyShadowToken(containerShadow)
+  };
+};
+const selectDescriptionStyles = _ref2 => {
+  let {
+    containerPaddingLeft = 0,
+    descriptionFontSize,
+    descriptionLineHeight,
+    descriptionMarginLeft,
+    descriptionFontName,
+    descriptionFontWeight,
+    inputSize,
+    fontColor,
+    labelMarginLeft = 0
+  } = _ref2;
+  return {
+    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
+    color: fontColor,
+    ...applyTextStyles({
+      fontSize: descriptionFontSize,
+      lineHeight: descriptionLineHeight,
+      fontName: descriptionFontName,
+      fontWeight: descriptionFontWeight
+    })
+  };
+};
+const selectLabelStyles = _ref3 => {
+  let {
+    labelColor,
+    labelFontName,
+    labelFontSize,
+    labelFontWeight,
+    labelMarginLeft,
+    labelLineHeight
+  } = _ref3;
+  return applyTextStyles({
+    color: labelColor,
+    fontName: labelFontName,
+    fontWeight: labelFontWeight,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    marginLeft: labelMarginLeft
+  });
+};
+
+/**
+ * Basic Radio component.
+ *
+ * ## Component API
+ *
+ * Use `label` prop to provide a label for the radio button. For a disabled `Radio` set the `inactive` prop to `true`.
+ *
+ * ### Controlled version
+ *
+ * If the radio button is controlled from outside, it needs to receive `checked` and `onChange` props.
+ *
+ * ### Uncontrolled version
+ *
+ * In case of uncontrolled radio button you can use `defaultChecked` prop to provide the initial value.
+ * Whenever the radio button gets toggled, it calls the `onChange` callback with the new value (boolean).
+ *
+ * ### Using within forms
+ *
+ * You can pass `name` and `value` props if you need a particular radio button to be a part of a radio group
+ * on a form.
+ *
+ * ### Validation
+ *
+ * You can mark a radio button as failing validation by setting the `error` prop to `true`.
+ *
+ * ## A11y guidelines
+ *
+ * Radio component accepts all the common accessibility props, but also sets some defaults, including
+ * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
+ * or the internal state in case of uncontrolled radio button.
+ *
+ */
+const Radio = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    description,
+    error = false,
+    id,
+    inactive,
+    label,
+    name: inputName,
+    onChange,
+    tokens,
+    value,
+    variant,
+    ...rest
+  } = _ref4;
+  const {
+    currentValue: isChecked,
+    setValue: setIsChecked,
+    isControlled
+  } = useInputValue({
+    value: checked,
+    initialValue: defaultChecked,
+    onChange
+  }, 'useRadioValue');
+  const getTokens = useThemeTokensCallback('Radio', tokens, {
+    checked: isChecked,
+    inactive,
+    error,
+    ...variant
+  });
+  const handleChange = event => {
+    if (!inactive && !isChecked) {
+      setIsChecked(true, event);
+    }
+  };
+  const handleKeyDown = event => {
+    // The expected keyboard shortcut for activating a radio is the Space key
+    if (event?.key === ' ') handleChange(event);
+  };
+  const uniqueId = useUniqueId('radio');
+  const inputId = id ?? uniqueId;
+  const selectedProps = selectProps({
+    accessibilityRole: 'radio',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    disabled: inactive,
+    onKeyDown: handleKeyDown,
+    onPress: handleChange,
+    ...selectedProps,
+    style: staticStyles.removeOutline,
+    children: _ref5 => {
+      let {
+        focused: focus,
+        hovered: hover,
+        pressed
+      } = _ref5;
+      const stateTokens = getTokens({
+        focus,
+        hover,
+        pressed
+      });
+      const labelStyles = selectLabelStyles(stateTokens);
+      const alignWithLabel = label ? [staticStyles.alignWithLabel, {
+        height: labelStyles.lineHeight
+      }] : null;
+      return /*#__PURE__*/_jsxs(StackView, {
+        space: 0,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: [staticStyles.container, selectContainerStyles(stateTokens)],
+          children: [/*#__PURE__*/_jsx(View, {
+            style: alignWithLabel,
+            children: /*#__PURE__*/_jsx(RadioButton, {
+              tokens: selectRadioButtonTokens(stateTokens),
+              isControlled: isControlled,
+              isChecked: isChecked,
+              inactive: inactive,
+              defaultChecked: defaultChecked,
+              inputId: inputId,
+              handleChange: handleChange,
+              name: inputName,
+              value: value
+            })
+          }), Boolean(label) && /*#__PURE__*/_jsx(Text, {
+            style: labelStyles,
+            children: /*#__PURE__*/_jsx(RadioLabel, {
+              forId: inputId,
+              children: label
+            })
+          })]
+        }), Boolean(description) && /*#__PURE__*/_jsx(Text, {
+          style: selectDescriptionStyles({
+            ...getTokens(),
+            fontColor: labelStyles.color
+          }),
+          children: description
+        })]
+      });
+    }
+  });
+});
+Radio.displayName = 'Radio';
+Radio.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.
+   */
+  checked: PropTypes.bool,
+  /**
+   * Use `defaultChecked` to provide the initial value for an uncontrolled Radio.
+   */
+  defaultChecked: PropTypes.bool,
+  /**
+   * An optional radio button description.
+   */
+  description: PropTypes.string,
+  /**
+   * Radio button ID.
+   */
+  id: PropTypes.string,
+  /**
+   * Whether the corresponding input is disabled or active.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * The label.
+   */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * Associate this radio button with a group (set as the name attribute).
+   */
+  name: PropTypes.string,
+  /**
+   * Whether the underlying input triggered a validation error or not.
+   */
+  error: PropTypes.bool,
+  /**
+   * The value. Must be unique within the group.
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
+  /**
+   * Callback called when a controlled radio button gets interacted with.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Radio tokens.
+   */
+  tokens: getTokensPropType('Radio'),
+  /**
+   * Radio variant.
+   */
+  variant: variantProp.propType
+};
+export default Radio;
+const staticStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  alignWithLabel: {
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
+  },
+  removeOutline: {
+    outlineStyle: 'none'
+  }
+});

package/lib/esm/Search/Search.js

@@ -0,0 +1,274 @@
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, useInputValue, useSpacingScale, textInputHandlerProps, textInputProps, variantProp, viewProps, contentfulProps } from '../utils';
+import TextInputBase from '../TextInput/TextInputBase';
+import ButtonBase from '../Button/ButtonBase';
+import useCopy from '../utils/useCopy';
+import dictionary from './dictionary';
+import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
+const [selectInputProps, selectedInputPropTypes] = selectSystemProps([textInputHandlerProps, textInputProps]);
+const selectInputTokens = _ref => {
+  let {
+    searchTokens,
+    buttonTokens,
+    buttonsGapSize
+  } = _ref;
+  const {
+    paddingRight: inputPaddingRight,
+    clearButtonIcon,
+    submitButtonIcon
+  } = searchTokens;
+  const {
+    paddingLeft = 0,
+    paddingRight = 0,
+    iconSize = 0
+  } = buttonTokens;
+  const buttonWidth = paddingLeft + paddingRight + iconSize;
+  const paddingWithButtons = inputPaddingRight + (submitButtonIcon ? buttonWidth : 0) + (clearButtonIcon ? buttonsGapSize + buttonWidth : 0);
+  return {
+    ...selectTokens('TextInput', searchTokens),
+    paddingRight: paddingWithButtons
+  };
+};
+const selectButtonTokens = tokens => selectTokens('SearchButton', tokens);
+const selectIconTokens = _ref2 => {
+  let {
+    iconSize,
+    iconColor
+  } = _ref2;
+  return {
+    color: iconColor,
+    size: iconSize
+  };
+};
+const selectBorderTokens = _ref3 => {
+  let {
+    borderWidth,
+    mobileBorderWidth,
+    ...tokens
+  } = _ref3;
+  return {
+    borderWidth: Platform.OS === 'web' ? borderWidth : mobileBorderWidth,
+    ...tokens
+  };
+};
+const modifyButtonTokens = tokens => {
+  const modifiedTokens = {
+    ...tokens
+  };
+  if (Platform.OS !== 'web') {
+    modifiedTokens.backgroundColor = tokens.mobileBackgroundColor;
+  }
+  return modifiedTokens;
+};
+
+/**
+ * The `Search` component is a combination of a `TextInput` and 2 different kinds of custom buttons.
+ * Use `Search` to feature autocomplete interactions.
+ *
+ * This component includes a clear button, which will appear as text is entered and pressing it will
+ * cause the input's internal state value to be set to an empty string.
+ *
+ * This component may only be used as uncontrolled, as the search value is managed within an internal state.
+ * You can use the `onChange` prop to react to value changes and the `onSubmit` prop to react on search submission.
+ *
+ * Use the following props to supply additional accessibility labels for the input - `accessibilityLabel`,
+ * clear button - `clearButtonAccessibilityLabel`, and submit button - `submitButtonAccessibilityLabel`.
+ */
+const Search = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+    initialValue,
+    value,
+    placeholder,
+    inactive,
+    onChange,
+    onSubmit,
+    onClear,
+    onFocus,
+    accessibilityLabel,
+    copy = 'en',
+    tokens,
+    variant,
+    nativeSubmitBtnID,
+    searchIconPosition = 'right',
+    dataSet,
+    ...rest
+  } = _ref4;
+  const {
+    currentValue = '',
+    setValue
+  } = useInputValue({
+    value,
+    initialValue,
+    onChange
+  });
+  const themeTokens = useThemeTokens('Search', tokens, {
+    inactive,
+    ...variant
+  });
+  const buttonTokens = useThemeTokens('SearchButton', tokens, variant);
+  const getThemeTokens = useThemeTokensCallback('Search', tokens, variant);
+  const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant);
+
+  // TODO: support overriding the a11y props using a custom dictionary
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const {
+    placeholderColor,
+    buttonsGap,
+    clearButtonIcon: ClearButtonIcon,
+    submitButtonIcon: SubmitButtonIcon
+  } = themeTokens;
+
+  // get the actual gap value for the current viewport
+  const buttonsGapSize = useSpacingScale(buttonsGap);
+  const handleSubmit = event => {
+    if (onSubmit !== undefined) {
+      onSubmit(currentValue, event);
+    }
+  };
+  const handleClear = event => {
+    setValue('', event);
+    onClear?.('', event);
+    ref?.current?.focus();
+  };
+  const handleFocus = event => {
+    if (onFocus !== undefined) onFocus(event);
+  };
+  const isEmpty = currentValue === '';
+
+  // Accessibility label should always be present and correctly localised
+  const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel');
+  // Placeholder is optional and may be unset by passing an empty string
+  const placeholderText = placeholder ?? a11yLabelText;
+  const {
+    nativeID,
+    testID,
+    ...containerProps
+  } = selectContainerProps(rest);
+  return /*#__PURE__*/_jsx(View, {
+    ...containerProps,
+    dataSet: dataSet,
+    children: /*#__PURE__*/_jsx(TextInputBase, {
+      nativeID: nativeID,
+      testID: testID,
+      ...selectInputProps(rest),
+      ref: ref,
+      tokens: pressableStates => selectInputTokens({
+        searchTokens: selectBorderTokens(getThemeTokens(pressableStates)),
+        buttonTokens,
+        buttonsGapSize,
+        isEmpty
+      }),
+      placeholder: placeholderText,
+      placeholderTextColor: placeholderColor,
+      inactive: inactive,
+      enablesReturnKeyAutomatically: true,
+      returnKeyType: "search",
+      value: currentValue,
+      onChange: setValue,
+      onSubmitEditing: handleSubmit,
+      onFocus: handleFocus,
+      accessibilityLabel: a11yLabelText,
+      direction: searchIconPosition,
+      buttons: [ClearButtonIcon && !isEmpty && /*#__PURE__*/_jsx(ButtonBase, {
+        accessibilityLabel: getCopy('clearButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleClear,
+        tokens: pressableStates => modifyButtonTokens(selectButtonTokens(getButtonTokens(pressableStates))),
+        children: buttonState => /*#__PURE__*/_jsx(ClearButtonIcon, {
+          ...selectIconTokens(getButtonTokens(buttonState))
+        })
+      }, "clear"), SubmitButtonIcon && (searchIconPosition === 'right' ? /*#__PURE__*/_jsx(ButtonBase, {
+        accessibilityLabel: getCopy('submitButtonAccessibilityLabel'),
+        accessibilityRole: "button",
+        inactive: inactive,
+        onPress: handleSubmit,
+        tokens: buttonState => selectButtonTokens(getButtonTokens({
+          ...buttonState,
+          priority: 'high'
+        })),
+        nativeID: nativeSubmitBtnID,
+        children: buttonState => /*#__PURE__*/_jsx(SubmitButtonIcon, {
+          ...selectIconTokens(getButtonTokens({
+            ...buttonState,
+            priority: 'high'
+          }))
+        })
+      }, "submit-right") : /*#__PURE__*/_jsx(Icon, {
+        icon: SubmitButtonIcon,
+        testID: "iconLeft",
+        tokens: {
+          color: themeTokens.iconLeftColor,
+          size: themeTokens.iconLeftSize
+        }
+      }, "submitIcon"))]
+    })
+  });
+});
+Search.displayName = 'Search';
+Search.propTypes = {
+  ...selectedContainerPropTypes,
+  ...selectedInputPropTypes,
+  /**
+   * Use this to set the initial value of the search input.
+   * Updating `initialValue` will **not** update the actual value.
+   */
+  initialValue: PropTypes.string,
+  /**
+   * Label rendered in the search input when it has no value.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * Disables all user interactions with the search input.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * Use to react upon search input's value changes.
+   * Will receive the searched value as an argument.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Triggered when the search input is submitted,
+   * either by pressing the submit button, "Enter" key on web,
+   * or "Search" key in a mobile keyboard.
+   */
+  onSubmit: PropTypes.func,
+  /**
+   * Triggered when the clear button is pressed.
+   */
+  onClear: PropTypes.func,
+  /**
+   * Triggered when the search input is focused.
+   */
+  onFocus: PropTypes.func,
+  /**
+   *
+   * Use to provide an accessible label for the input (visually hidden).
+   */
+  accessibilityLabel: PropTypes.string,
+  /**
+   * 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({
+    accessibilityLabel: PropTypes.string,
+    clearButtonAccessibilityLabel: PropTypes.string,
+    submitButtonAccessibilityLabel: PropTypes.string
+  })]),
+  tokens: getTokensPropType('Search'),
+  variant: variantProp.propType,
+  /**
+   * ID for Submit button element on web
+   */
+  nativeSubmitBtnID: PropTypes.string
+};
+export default Search;

package/lib/esm/Select/Picker.js

@@ -0,0 +1,96 @@
+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,
+    onFocus,
+    onBlur,
+    onMouseOver,
+    onMouseOut,
+    onOpen = () => {},
+    onClose = () => {},
+    style,
+    inactive,
+    children,
+    placeholder,
+    nativeID,
+    testID,
+    ...rest
+  } = _ref;
+  const selectedProps = selectProps(rest);
+  const {
+    accessibilityLabel,
+    accessibilityDescribedBy,
+    accessibilityInvalid
+  } = rest;
+  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?.();
+        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';
+export default Picker;
+Picker.propTypes = {
+  ...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.string,
+  testID: PropTypes.string
+};

package/lib/esm/StackView/StackWrap.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
+import StackWrapBox from './StackWrapBox';
+import StackWrapGap from './StackWrapGap';
+
+// In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
+import { jsx as _jsx } from "react/jsx-runtime";
+const cssSupports = (property, value) => Platform.OS === 'web' && typeof window !== 'undefined' && typeof window.CSS?.supports === 'function' && window.CSS.supports(property, value);
+
+// CSS.supports needs an example of the type of value you intend to use.
+// Will be an integer appended `px` after hooks and JSX styles are resolved.
+const exampleGapValue = '1px';
+
+/**
+ * StackWrap is an alternative to StackView where the spaced items are allowed to wrap.
+ *
+ * As well as providing space between the items, StackWrap provides `gap` space between
+ * wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
+ * If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
+ */
+const StackWrap = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const [canUseCSSGap, setCanUseCSSGap] = React.useState(false);
+  const {
+    space
+  } = props;
+  // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
+  const gap = props.gap ?? space;
+  const gapEqualsSpace = gap === space;
+
+  // If possible, use the cleaner implementation that applies CSS `gap` styles to the container,
+  // preserving direct parent-child relationships between the container and each item, which
+  // can result in clearer descriptions on some screen readers (e.g. radio "X of Y" on MacOS).
+  // Else, use the fallback implementation which renders a `Box` component around each child.
+  const Component = canUseCSSGap ? StackWrapGap : StackWrapBox;
+  // In SSR, the type of implementation must match the server during hydration, but
+  // the server can't know if gap is supported, so never use it until after hydration.
+  useSafeLayoutEffect(() => {
+    setCanUseCSSGap(gapEqualsSpace && cssSupports('gap', exampleGapValue));
+  }, [gapEqualsSpace]);
+  return /*#__PURE__*/_jsx(Component, {
+    ref: ref,
+    ...props
+  });
+});
+StackWrap.displayName = 'StackWrap';
+StackWrap.propTypes = StackWrapBox.propTypes;
+export default StackWrap;