@telus-uds/components-base 2.4.0 → 3.0.0

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 10 Jan 2025 21:41:25 GMT and should not be manually modified.
+This log was last generated on Fri, 31 Jan 2025 20:49:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.0.0
+
+Fri, 31 Jan 2025 20:49:19 GMT
+
+### Major changes
+
+- Add CommonJS builds along with ESM (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/system-constants to v3.0.0
+- Bump @telus-uds/system-theme-tokens to v4.0.0
+
+### Minor changes
+
+- `Carousel`: add hero mode and item background color (guillermo.peitzner@telus.com)
+
+### Patches
+
+- `TextArea`: minLines token issue when value size changes fixed (35577399+JoshHC@users.noreply.github.com)
+
+## 2.5.0
+
+Wed, 22 Jan 2025 21:08:36 GMT
+
+### Minor changes
+
+- `Carousel`: hide the progress bar when rendering a 'single' item (guillermo.peitzner@telus.com)
+- `ExpandCollapseMini`: add component (guillermo.peitzner@telus.com)
+
+### Patches
+
+- `Autocomplete`: fix displacement when selecting an item (guillermo.peitzner@telus.com)
+
 ## 2.4.0
 
-Fri, 10 Jan 2025 21:41:25 GMT
+Fri, 10 Jan 2025 21:49:25 GMT
 
 ### Minor changes
 

package/lib/cjs/A11yInfoProvider/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useA11yInfo = exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _AccessibilityInfo = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AccessibilityInfo"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ScreenReaderContext = /*#__PURE__*/_react.default.createContext(false);
+const ReducedMotionContext = /*#__PURE__*/_react.default.createContext(false);
+
+// eslint-disable-next-line no-unused-vars
+const A11yInfoProvider = /*#__PURE__*/_react.default.forwardRef((_ref, _) => {
+  let {
+    children
+  } = _ref;
+  const [reduceMotionEnabled, setReduceMotionEnabled] = _react.default.useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = _react.default.useState(false);
+  _react.default.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.default.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
+    const setInitialA11yInfo = async () => {
+      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([_AccessibilityInfo.default.isReduceMotionEnabled(), _AccessibilityInfo.default.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.default.OS !== 'web' && !!initialScreenReaderEnabled);
+
+      // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
+      setReduceMotionEnabled(!!initialReduceMotionEnabled);
+    };
+    if (_AccessibilityInfo.default.isReduceMotionEnabled && _AccessibilityInfo.default.isScreenReaderEnabled) {
+      setInitialA11yInfo();
+    }
+    return () => {
+      // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
+      if (typeof motionSubscription?.remove === 'function') {
+        motionSubscription?.remove();
+      } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
+        _AccessibilityInfo.default.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReducedMotionContext.Provider, {
+    value: reduceMotionEnabled,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenReaderContext.Provider, {
+      value: screenReaderEnabled,
+      children: children
+    })
+  });
+});
+A11yInfoProvider.displayName = 'A11yInfoProvider';
+A11yInfoProvider.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = exports.default = A11yInfoProvider;
+const useA11yInfo = () => {
+  const screenReaderEnabled = _react.default.useContext(ScreenReaderContext);
+  const reduceMotionEnabled = _react.default.useContext(ReducedMotionContext);
+  return {
+    reduceMotionEnabled,
+    screenReaderEnabled
+  };
+};
+exports.useA11yInfo = useA11yInfo;

package/lib/cjs/A11yText/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _props = require("../utils/props");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.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.default.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.default.OS === 'ios',
+    accessibilityLabel: text,
+    accessibilityRole: heading ? 'header' : role,
+    ...rest
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: styles.invisible,
+    ref: ref,
+    ...selectedProps
+  });
+});
+A11yText.displayName = 'A11yText';
+A11yText.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Text to be read by screen readers
+   */
+  text: _propTypes.default.string.isRequired,
+  /**
+   * Whether text should be rendered as a heading
+   */
+  heading: _propTypes.default.bool,
+  /**
+   * Role of the element
+   */
+  role: _propTypes.default.string
+};
+const styles = _StyleSheet.default.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
+  }
+});
+var _default = exports.default = A11yText;

package/lib/cjs/ActionCard/ActionCard.js

@@ -0,0 +1,349 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _Card = _interopRequireDefault(require("../Card"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps, _utils.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 (0, _ThemeProvider.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 (0, _ThemeProvider.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.default.forwardRef((_ref11, ref) => {
+  let {
+    icon,
+    title,
+    children,
+    href,
+    direction = true,
+    accessibilityRole,
+    tokens,
+    variant,
+    ...rest
+  } = _ref11;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ActionCard', tokens, variant);
+  const actionIconAnimation = _react.default.useRef(new _Animated.default.Value(0)).current;
+  const {
+    onPress,
+    ...props
+  } = _utils.clickProps.toPressProps(rest);
+  const {
+    hrefAttrs,
+    rawRest
+  } = _utils.hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    accessibilityRole,
+    href,
+    onPress: _utils.linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rawRest
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+    ref: ref,
+    interactiveCard: {
+      body: pressableState => {
+        const animate = pressableState.pressed || pressableState.hover || pressableState.focus;
+        _Animated.default.timing(actionIconAnimation, {
+          toValue: animate ? themeTokens.actionIconTranslate : 0,
+          duration: ACTION_ICON_ANIMATION_DURATION,
+          useNativeDriver: false
+        }).start();
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: staticStyles.container,
+          children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: selectIconStyles(themeTokens),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+              ...selectIconProps({
+                icon,
+                ...themeTokens
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+            style: staticStyles.content,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+              style: staticStyles.header,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                style: [selectTitleStyles(themeTokens), staticStyles.title],
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
+                  children: [(0, _utils.wrapStringsInText)(title, {
+                    style: selectTitleTextStyles(themeTokens)
+                  }), themeTokens.statusIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                    style: staticStyles.statusIcon,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                      ...selectStatusIconProps(themeTokens)
+                    })
+                  })]
+                })
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                style: staticStyles.icons,
+                children: direction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+                  style: [selectActionIconStyles(themeTokens), {
+                    transform: [{
+                      translateX: actionIconAnimation
+                    }]
+                  }],
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                    ...selectActionIconProps(themeTokens)
+                  })
+                })
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+              style: [staticStyles.body, selectContentStyles(themeTokens)],
+              children: typeof children === 'string' ? (0, _utils.wrapStringsInText)(children, {
+                style: selectContentTextStyles(themeTokens)
+              }) : children
+            })]
+          })]
+        });
+      },
+      tokens: selectInteractiveCardStyles(themeTokens)
+    },
+    tokens: selectCardStyles(themeTokens),
+    ...selectedProps
+  });
+});
+ActionCard.displayName = 'ActionCard';
+ActionCard.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('ActionCard'),
+  variant: _utils.variantProp.propType,
+  /**
+   * Icon for the ActionCard
+   */
+  icon: _propTypes.default.elementType,
+  /**
+   * Title for the ActionCard
+   */
+  title: _propTypes.default.string,
+  /**
+   * Children for the ActionCard
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.elementType]),
+  /**
+   * href for the ActionCard
+   */
+  href: _propTypes.default.string,
+  /**
+   * Enable or disable the direction of the ActionCard
+   */
+  direction: _propTypes.default.bool,
+  /**
+   * AccesibilityRole for the ActionCard
+   */
+  accessibilityRole: _propTypes.default.string
+};
+const staticStyles = _StyleSheet.default.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
+  }
+});
+var _default = exports.default = ActionCard;

package/lib/cjs/ActionCard/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ActionCard = _interopRequireDefault(require("./ActionCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _ActionCard.default;

package/lib/cjs/ActivityIndicator/Spinner.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _shared = require("./shared");
+var _A11yInfoProvider = require("../A11yInfoProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SVG_RADIUS = 20;
+const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
+const MIN_SVG_LENGTH = _shared.MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
+const MAX_SVG_LENGTH = (1 - _shared.MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
+const animationProps = {
+  begin: '0s',
+  dur: `${_shared.DURATION}ms`,
+  fill: 'freeze',
+  repeatCount: 'indefinite'
+};
+const bezierProps = {
+  calcMode: 'spline',
+  keyTimes: '0; 0.5; 1',
+  keySplines: `${_shared.BEZIER.join(', ')} ; ${_shared.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.default.forwardRef((_ref, ref) => {
+  let {
+    size,
+    color,
+    thickness,
+    label,
+    isStatic = false
+  } = _ref;
+  const {
+    reduceMotionEnabled
+  } = (0, _A11yInfoProvider.useA11yInfo)();
+  const reduceMotion = reduceMotionEnabled || isStatic;
+  return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)("g", {
+      children: [reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
+        attributeName: "transform",
+        type: "rotate",
+        values: `-180 24 24;${360 + _shared.MIN_STROKE_ANGLE - 180} 24 24`,
+        ...animationProps
+      }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+            attributeName: "stroke-dashoffset",
+            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
+            ...animationProps,
+            ...bezierProps
+          }), /*#__PURE__*/(0, _jsxRuntime.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 = _shared.propTypes;
+var _default = exports.default = Spinner;