@telus-uds/components-base 1.96.0 → 1.97.1

package/src/utils/a11y/semantics.js

@@ -22,7 +22,6 @@ import { Platform } from 'react-native'
  * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js
  */
 // Adding `/** @type {const} */ ({...})` denotes object content as `readonly` in many IDEs
-// eslint-disable-next-line prettier/prettier
 const rolesToTags = /** @type {const} */ {
   article: 'article',
   banner: 'header',
@@ -44,7 +43,6 @@ const rolesToTags = /** @type {const} */ {
 
   // Add special cases that are in RNW's function logic but not in its mapping object
   label: 'label'
-  // eslint-disable-next-line prettier/prettier
 }
 
 // Invert React Native Web's mapping, so a tag gets the role that gets that tag
@@ -56,7 +54,6 @@ export const tagsToRoles = Object.fromEntries(
  * Heading HTML tags map to the "heading" accessibilityRole in native apps, which is similar
  * to headings on web but without the expectation of a hierarchy of headings within one screen.
  */
-// eslint-disable-next-line prettier/prettier
 export const headingTags = /** @type {const} */ ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
 /**
  * @typedef {typeof headingTags[number]} HeadingTag
@@ -80,7 +77,6 @@ export const supportedTags = [...Object.keys(tagsToRoles), ...headingTags]
  *
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
-// eslint-disable-next-line prettier/prettier
 export const layoutTags = /** @type {const} */ [
   ...headingTags,
   'article',
@@ -96,7 +92,6 @@ export const layoutTags = /** @type {const} */ [
   'nav',
   'section',
   'label'
-  // eslint-disable-next-line prettier/prettier
 ]
 /**
  * @typedef {typeof layoutTags[number]} LayoutTag
@@ -107,7 +102,6 @@ export const layoutTags = /** @type {const} */ [
  *
  * Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
  */
-// eslint-disable-next-line prettier/prettier
 export const textTags = /** @type {const} */ [
   ...headingTags,
   'blockquote',
@@ -118,7 +112,6 @@ export const textTags = /** @type {const} */ [
   'li',
   'strong',
   'label'
-  // eslint-disable-next-line prettier/prettier
 ]
 /**
  * @typedef {typeof layoutTags[number]} TextTag

package/types/FileUpload.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentType } from 'react'
+
+export interface FileUploadTokens {
+  buttonBackgroundColor?: string
+  buttonBorderColor?: string
+  buttonBorderRadius?: number
+  buttonBorderWidth?: string
+  buttonTextColor?: string
+  buttonHeight?: string
+  buttonMinWidth?: string
+  buttonWidth?: string
+  notificationBackgroundColor?: string
+  notificationBorderColor?: string
+  notificationBorderRadius?: number
+  notificationTextColor?: string
+  notificationDismissButtonGap?: string
+  notificationDismissIcon?: string
+  notificationDismissIconColor?: string
+  notificationIcon?: string
+  notificationIconColor?: string
+  notificationIconGap?: string
+  notificationIconSize?: number
+}
+
+export interface FileUploadProps {
+  tokens?: FileUploadTokens
+  variant?: Record<string, any>
+  copy?: 'en' | 'fr'
+  fileTypes?: string[]
+  allowMultipleFiles?: boolean
+  maxFileSize?: number
+  maxFilesCount?: number
+  onUpload?: (files: any) => void
+  onDelete?: (file: any) => void
+  documentPicker?: Record<string, any>
+}
+
+declare const FileUpload: ComponentType<FileUploadProps>
+
+export default FileUpload

package/types/index.d.ts

@@ -30,6 +30,9 @@ export {
   ExpandCollapsePanelProps
 } from './ExpandCollapse'
 
+export { default as FileUpload } from './FileUpload'
+export { FileUploadTokens, FileUploadProps } from './FileUpload'
+
 export { default as HorizontalScrollButton } from './HorizontalScrollButton'
 export { HorizontalScrollButtonTokens } from './HorizontalScrollButton'
 

package/lib-module/A11yInfoProvider/index.js

@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import AccessibilityInfo from "react-native-web/dist/exports/AccessibilityInfo";
-import Platform from "react-native-web/dist/exports/Platform";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ScreenReaderContext = /*#__PURE__*/React.createContext(false);
-const ReducedMotionContext = /*#__PURE__*/React.createContext(false);
-const A11yInfoProvider = _ref => {
-  let {
-    children
-  } = _ref;
-  const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false);
-  React.useEffect(() => {
-    if (process.env.NODE_ENV === 'test') {
-      // On Jest these effects do nothing but can cause `act` state change warnings
-      // and "...after the Jest environment has been torn down" errors, so skip them.
-      return () => {};
-    }
-    const motionSubscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-    const setInitialA11yInfo = async () => {
-      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]);
-
-      // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
-      // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
-      setScreenReaderEnabled(Platform.OS !== 'web' && !!initialScreenReaderEnabled);
-
-      // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
-      setReduceMotionEnabled(!!initialReduceMotionEnabled);
-    };
-    if (AccessibilityInfo.isReduceMotionEnabled && AccessibilityInfo.isScreenReaderEnabled) {
-      setInitialA11yInfo();
-    }
-    return () => {
-      // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
-      if (typeof (motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove) === 'function') {
-        motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove();
-      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
-        AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
-      }
-    };
-  }, []);
-  return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {
-    value: reduceMotionEnabled,
-    children: /*#__PURE__*/_jsx(ScreenReaderContext.Provider, {
-      value: screenReaderEnabled,
-      children: children
-    })
-  });
-};
-A11yInfoProvider.propTypes = {
-  children: PropTypes.node.isRequired
-};
-export default A11yInfoProvider;
-export const useA11yInfo = () => {
-  const screenReaderEnabled = React.useContext(ScreenReaderContext);
-  const reduceMotionEnabled = React.useContext(ReducedMotionContext);
-  return {
-    reduceMotionEnabled,
-    screenReaderEnabled
-  };
-};

package/lib-module/A11yText/index.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-/**
- * A11yText is a zero-size invisible element that adds text to be read by screen readers.
- *
- * It should be used to add selectable screen-reader-only text to the main document flow,
- * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
- */
-const A11yText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    text,
-    heading,
-    role = 'text',
-    ...rest
-  } = _ref;
-  const selectedProps = selectProps({
-    // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
-    // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
-    // On Android, may cause this to be skipped when with `<Text>` siblings in an `accessible` View,
-    // see https://github.com/facebook/react-native/issues/30851#issuecomment-790165489
-    accessible: Platform.OS === 'ios',
-    accessibilityLabel: text,
-    accessibilityRole: heading ? 'header' : role,
-    ...rest
-  });
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.invisible,
-    ref: ref,
-    ...selectedProps
-  });
-});
-A11yText.displayName = 'A11yText';
-A11yText.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Text to be read by screen readers
-   */
-  text: PropTypes.string.isRequired,
-  /**
-   * Whether text should be rendered as a heading
-   */
-  heading: PropTypes.bool,
-  /**
-   * Role of the element
-   */
-  role: PropTypes.string
-};
-const styles = StyleSheet.create({
-  invisible: {
-    // Without width or height it is not shown
-    minHeight: 1,
-    minWidth: 1,
-    // Ensures it doesn't occupy space
-    // position: 'absolute' causes it to be read first in its container
-    marginEnd: -1,
-    marginBottom: -1,
-    // Ensures it is in the correct position on Native
-    top: -1
-  }
-});
-export default A11yText;

package/lib-module/ActionCard/ActionCard.js

@@ -1,343 +0,0 @@
-import React from 'react';
-import Animated from "react-native-web/dist/exports/Animated";
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Text from "react-native-web/dist/exports/Text";
-import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText, clickProps, hrefAttrsProp, linkProps } from '../utils';
-import Icon from '../Icon';
-import Card from '../Card';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
-const selectCardStyles = styles => ['borderColor', 'borderRadius', 'borderWidth'].reduce((acc, key) => {
-  if (styles[key]) acc[key] = styles[key];
-  return acc;
-}, {});
-const selectInteractiveCardStyles = _ref => {
-  let {
-    backgroundColor,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop
-  } = _ref;
-  return {
-    ...(backgroundColor && {
-      backgroundColor
-    }),
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop
-  };
-};
-const selectIconStyles = _ref2 => {
-  let {
-    iconMarginBottom,
-    iconMarginLeft,
-    iconMarginRight,
-    iconMarginTop
-  } = _ref2;
-  return {
-    marginBottom: iconMarginBottom,
-    marginLeft: iconMarginLeft,
-    marginRight: iconMarginRight,
-    marginTop: iconMarginTop
-  };
-};
-const selectIconProps = _ref3 => {
-  let {
-    icon,
-    iconBackgroundColor,
-    iconColor
-  } = _ref3;
-  return {
-    icon,
-    variant: {
-      background: true,
-      padding: 'small'
-    },
-    tokens: {
-      backgroundColor: iconBackgroundColor,
-      color: iconColor
-    }
-  };
-};
-const selectTitleStyles = _ref4 => {
-  let {
-    titleMarginBottom,
-    titleMarginLeft,
-    titleMarginRight,
-    titleMarginTop
-  } = _ref4;
-  return {
-    marginBottom: titleMarginBottom,
-    marginLeft: titleMarginLeft,
-    marginRight: titleMarginRight,
-    marginTop: titleMarginTop
-  };
-};
-const selectTitleTextStyles = _ref5 => {
-  let {
-    titleFontColor,
-    titleFontName,
-    titleFontSize,
-    titleFontWeight,
-    titleLineHeight
-  } = _ref5;
-  return applyTextStyles({
-    fontColor: titleFontColor,
-    fontName: titleFontName,
-    fontSize: titleFontSize,
-    fontWeight: titleFontWeight,
-    lineHeight: titleLineHeight
-  });
-};
-const selectContentStyles = _ref6 => {
-  let {
-    contentMarginBottom,
-    contentMarginLeft,
-    contentMarginRight,
-    contentMarginTop
-  } = _ref6;
-  return {
-    marginBottom: contentMarginBottom,
-    marginLeft: contentMarginLeft,
-    marginRight: contentMarginRight,
-    marginTop: contentMarginTop
-  };
-};
-const selectContentTextStyles = _ref7 => {
-  let {
-    contentFontColor,
-    contentFontName,
-    contentFontSize,
-    contentFontWeight,
-    contentLineHeight
-  } = _ref7;
-  return applyTextStyles({
-    fontColor: contentFontColor,
-    fontName: contentFontName,
-    fontSize: contentFontSize,
-    fontWeight: contentFontWeight,
-    lineHeight: contentLineHeight
-  });
-};
-const selectStatusIconProps = _ref8 => {
-  let {
-    statusIcon,
-    statusIconColor
-  } = _ref8;
-  return {
-    icon: statusIcon,
-    tokens: {
-      color: statusIconColor
-    },
-    variant: {
-      size: 'micro'
-    }
-  };
-};
-const selectActionIconStyles = _ref9 => {
-  let {
-    actionIconMarginBottom,
-    actionIconMarginLeft,
-    actionIconMarginRight,
-    actionIconMarginTop
-  } = _ref9;
-  return {
-    marginBottom: actionIconMarginBottom,
-    marginLeft: actionIconMarginLeft,
-    marginRight: actionIconMarginRight,
-    marginTop: actionIconMarginTop
-  };
-};
-const selectActionIconProps = _ref10 => {
-  let {
-    actionIcon,
-    actionIconColor
-  } = _ref10;
-  return {
-    icon: actionIcon,
-    tokens: {
-      color: actionIconColor
-    }
-  };
-};
-const ACTION_ICON_ANIMATION_DURATION = 100;
-
-/**
- * ActionCard component represents a card with an action that can be triggered by the user.
- *
- * @component
- * @example
- * return (
- *   <ActionCard
- *     icon={<Icon icon={Icons.EyeMasked} />}
- *     title="Like"
- *     href="/like"
- *     accessibilityRole="link"
- *     tokens={themeTokens}
- *     variant={{validation: 'warning'}}
- *     onPress={() => handleLike()}
- *   >
- *    Click here to like the post
- *   </ActionCard>
- * )
- */
-const ActionCard = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
-  let {
-    icon,
-    title,
-    children,
-    href,
-    direction = true,
-    accessibilityRole,
-    tokens,
-    variant,
-    ...rest
-  } = _ref11;
-  const themeTokens = useThemeTokens('ActionCard', tokens, variant);
-  const actionIconAnimation = React.useRef(new Animated.Value(0)).current;
-  const {
-    onPress,
-    ...props
-  } = clickProps.toPressProps(rest);
-  const {
-    hrefAttrs,
-    rawRest
-  } = hrefAttrsProp.bundle(props);
-  const selectedProps = selectProps({
-    accessibilityRole,
-    href,
-    onPress: linkProps.handleHref({
-      href,
-      onPress
-    }),
-    hrefAttrs,
-    ...rawRest
-  });
-  return /*#__PURE__*/_jsx(Card, {
-    ref: ref,
-    interactiveCard: {
-      body: pressableState => {
-        const animate = pressableState.pressed || pressableState.hover || pressableState.focus;
-        Animated.timing(actionIconAnimation, {
-          toValue: animate ? themeTokens.actionIconTranslate : 0,
-          duration: ACTION_ICON_ANIMATION_DURATION,
-          useNativeDriver: false
-        }).start();
-        return /*#__PURE__*/_jsxs(View, {
-          style: staticStyles.container,
-          children: [icon && /*#__PURE__*/_jsx(View, {
-            style: selectIconStyles(themeTokens),
-            children: /*#__PURE__*/_jsx(Icon, {
-              ...selectIconProps({
-                icon,
-                ...themeTokens
-              })
-            })
-          }), /*#__PURE__*/_jsxs(View, {
-            style: staticStyles.content,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: staticStyles.header,
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [selectTitleStyles(themeTokens), staticStyles.title],
-                children: /*#__PURE__*/_jsxs(Text, {
-                  children: [wrapStringsInText(title, {
-                    style: selectTitleTextStyles(themeTokens)
-                  }), themeTokens.statusIcon && /*#__PURE__*/_jsx(View, {
-                    style: staticStyles.statusIcon,
-                    children: /*#__PURE__*/_jsx(Icon, {
-                      ...selectStatusIconProps(themeTokens)
-                    })
-                  })]
-                })
-              }), /*#__PURE__*/_jsx(View, {
-                style: staticStyles.icons,
-                children: direction && /*#__PURE__*/_jsx(Animated.View, {
-                  style: [selectActionIconStyles(themeTokens), {
-                    transform: [{
-                      translateX: actionIconAnimation
-                    }]
-                  }],
-                  children: /*#__PURE__*/_jsx(Icon, {
-                    ...selectActionIconProps(themeTokens)
-                  })
-                })
-              })]
-            }), /*#__PURE__*/_jsx(View, {
-              style: [staticStyles.body, selectContentStyles(themeTokens)],
-              children: typeof children === 'string' ? wrapStringsInText(children, {
-                style: selectContentTextStyles(themeTokens)
-              }) : children
-            })]
-          })]
-        });
-      },
-      tokens: selectInteractiveCardStyles(themeTokens)
-    },
-    tokens: selectCardStyles(themeTokens),
-    ...selectedProps
-  });
-});
-ActionCard.displayName = 'ActionCard';
-ActionCard.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('ActionCard'),
-  variant: variantProp.propType,
-  /**
-   * Icon for the ActionCard
-   */
-  icon: PropTypes.elementType,
-  /**
-   * Title for the ActionCard
-   */
-  title: PropTypes.string,
-  /**
-   * Children for the ActionCard
-   */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  /**
-   * href for the ActionCard
-   */
-  href: PropTypes.string,
-  /**
-   * Enable or disable the direction of the ActionCard
-   */
-  direction: PropTypes.bool,
-  /**
-   * AccesibilityRole for the ActionCard
-   */
-  accessibilityRole: PropTypes.string
-};
-const staticStyles = StyleSheet.create({
-  body: {
-    flexDirection: 'column'
-  },
-  container: {
-    flex: 1,
-    flexDirection: 'row'
-  },
-  content: {
-    flex: 1,
-    flexDirection: 'column'
-  },
-  icons: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
-  title: {
-    flexShrink: 1
-  },
-  statusIcon: {
-    marginLeft: 4
-  }
-});
-export default ActionCard;

package/lib-module/ActionCard/index.js

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

package/lib-module/ActivityIndicator/Spinner.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
-import { useA11yInfo } from '../A11yInfoProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const SVG_RADIUS = 20;
-const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
-const MIN_SVG_LENGTH = MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
-const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
-const animationProps = {
-  begin: '0s',
-  dur: `${DURATION}ms`,
-  fill: 'freeze',
-  repeatCount: 'indefinite'
-};
-const bezierProps = {
-  calcMode: 'spline',
-  keyTimes: '0; 0.5; 1',
-  keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
-};
-// We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
-// It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    size,
-    color,
-    thickness,
-    label,
-    isStatic = false
-  } = _ref;
-  const {
-    reduceMotionEnabled
-  } = useA11yInfo();
-  const reduceMotion = reduceMotionEnabled || isStatic;
-  return /*#__PURE__*/_jsx("svg", {
-    ref: ref,
-    width: `${size}px`,
-    height: `${size}px`,
-    viewBox: "0 0 48 48",
-    "aria-valuetext": label,
-    role: "progressbar",
-    "aria-busy": true,
-    children: /*#__PURE__*/_jsxs("g", {
-      children: [reduceMotion ? null : /*#__PURE__*/_jsx("animateTransform", {
-        attributeName: "transform",
-        type: "rotate",
-        values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`,
-        ...animationProps
-      }), /*#__PURE__*/_jsx("circle", {
-        fill: "none",
-        stroke: color,
-        strokeWidth: thickness * 48 / size,
-        strokeLinecap: "round",
-        cx: "24",
-        cy: "24",
-        r: "20",
-        strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
-        strokeDashoffset: 0,
-        vectorEffect: "non-scaling-stroke",
-        children: reduceMotion ? null : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("animate", {
-            attributeName: "stroke-dashoffset",
-            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
-            ...animationProps,
-            ...bezierProps
-          }), /*#__PURE__*/_jsx("animate", {
-            attributeName: "stroke-dasharray",
-            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
-            ...animationProps,
-            ...bezierProps
-          })]
-        })
-      })]
-    })
-  });
-});
-Spinner.displayName = 'Spinner';
-Spinner.propTypes = propTypes;
-export default Spinner;