@telus-uds/components-base 4.0.0-alpha.1 → 4.0.0-alpha.2

package/lib/cjs/Scroll/ScrollItem.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _viewProps = require("../utils/props/viewProps");
+var _semantics = require("../utils/a11y/semantics");
+var _ScrollContext = require("./ScrollContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const DEFAULT_TAG = 'li';
+const DATA_SCROLL_ITEM = 'scrollItem';
+const INITIAL_DIMENSION = 0;
+const TAB_INDEX = 0;
+const selectContainerStyle = _ref => {
+  let {
+    itemWidth,
+    itemHeight
+  } = _ref;
+  const style = {};
+  if (itemWidth > INITIAL_DIMENSION) {
+    style.width = itemWidth;
+  }
+  if (itemHeight > INITIAL_DIMENSION) {
+    style.height = itemHeight;
+  }
+  return style;
+};
+
+/**
+ * The `ScrollItem` component wraps individual items within a `Scroll` container. Each item
+ * is individually focusable and reports its natural dimensions so the parent can apply uniform
+ * sizing across all items.
+ *
+ * ## Props
+ *
+ * - Use `children` to provide the content of the scroll item
+ * - Use `tag` to set the HTML tag of the outer container (defaults to `'li'`)
+ *
+ */
+const ScrollItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    tag = DEFAULT_TAG,
+    ...rest
+  } = _ref2;
+  const {
+    itemWidth,
+    itemHeight,
+    onItemLayout
+  } = (0, _ScrollContext.useScroll)();
+  const handleLayout = _react.default.useCallback(_ref3 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref3;
+    onItemLayout?.(width, height);
+  }, [onItemLayout]);
+  const selectedProps = selectProps({
+    ...rest,
+    ...(0, _semantics.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    style: selectContainerStyle({
+      itemWidth,
+      itemHeight
+    }),
+    onLayout: handleLayout,
+    dataSet: {
+      [DATA_SCROLL_ITEM]: true
+    },
+    ...(_Platform.default.OS === 'web' ? {
+      tabIndex: TAB_INDEX
+    } : {
+      focusable: true
+    }),
+    ...selectedProps,
+    children: children
+  });
+});
+ScrollItem.displayName = 'ScrollItem';
+ScrollItem.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Content of the scroll item
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
+  /**
+   * Sets the HTML tag of the outer container. Defaults to `'li'`.
+   */
+  tag: _propTypes.default.oneOf(_semantics.layoutTags)
+};
+const MemoizedScrollItem = exports.ScrollItem = /*#__PURE__*/_react.default.memo(ScrollItem);

package/lib/cjs/Scroll/ScrollProgress.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollProgress = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _pressability = require("../utils/pressability");
+var _useAnimatedValue = require("../utils/animation/useAnimatedValue");
+var _Progress = require("../Progress/Progress");
+var _ProgressBar = require("../Progress/ProgressBar");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MAX_PERCENTAGE = 100;
+const BORDER_RADIUS_DIVISOR = 2;
+const staticProgressTokens = {
+  borderWidth: 0,
+  borderColor: 'transparent'
+};
+const staticProgressBarTokens = {
+  gradient: null,
+  outlineWidth: 0
+};
+const selectProgressTokens = _ref => {
+  let {
+    progressTrackHeight,
+    progressBarHeight,
+    progressTrackColor
+  } = _ref;
+  return {
+    height: progressTrackHeight,
+    barHeight: progressBarHeight,
+    backgroundColor: progressTrackColor,
+    borderRadius: progressTrackHeight / BORDER_RADIUS_DIVISOR
+  };
+};
+const selectBarTokens = _ref2 => {
+  let {
+    progressBarColor,
+    progressBarHeight
+  } = _ref2;
+  return {
+    backgroundColor: progressBarColor,
+    borderRadius: progressBarHeight / BORDER_RADIUS_DIVISOR
+  };
+};
+const ScrollProgress = exports.ScrollProgress = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    pressableState,
+    getTokens,
+    thumbWrapperStyle,
+    getCopy
+  } = _ref3;
+  const state = (0, _pressability.resolvePressableState)(pressableState);
+  const themeTokens = getTokens(state);
+  const animatedBarHeight = (0, _useAnimatedValue.useAnimatedValue)(themeTokens.progressBarHeight);
+  const animatedTokens = {
+    ...themeTokens,
+    progressBarHeight: animatedBarHeight
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.Progress, {
+    tokens: {
+      ...staticProgressTokens,
+      ...selectProgressTokens(animatedTokens)
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ref: ref,
+      style: thumbWrapperStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar.ProgressBar, {
+        percentage: MAX_PERCENTAGE,
+        tokens: {
+          ...staticProgressBarTokens,
+          ...selectBarTokens(animatedTokens)
+        },
+        accessibilityLabel: getCopy('progressBarLabel')
+      })
+    })
+  });
+});
+ScrollProgress.displayName = 'ScrollProgress';
+ScrollProgress.propTypes = {
+  /**
+   * State object from Pressable's render callback containing hovered, pressed, and focused states
+   */
+  pressableState: _propTypes.default.object.isRequired,
+  /**
+   * Theme token resolver callback from useThemeTokensCallback that accepts appearance state
+   */
+  getTokens: _propTypes.default.func.isRequired,
+  /**
+   * Style array for the thumb wrapper containing static and dynamic position styles
+   */
+  thumbWrapperStyle: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array]).isRequired,
+  /**
+   * Copy resolver function from useCopy for retrieving localized strings
+   */
+  getCopy: _propTypes.default.func.isRequired
+};

package/lib/cjs/Scroll/dictionary.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
+  en: {
+    accessibilityLabel: 'Scrollable content',
+    instructionText: 'Use Tab, arrow keys, or space bar to navigate',
+    progressBarLabel: 'Scroll position'
+  },
+  fr: {
+    accessibilityLabel: 'Contenu défilable',
+    instructionText: "Utilisez Tab, les touches fléchées ou la barre d'espace pour naviguer",
+    progressBarLabel: 'Position de défilement'
+  }
+};

package/lib/cjs/index.js

@@ -471,6 +471,18 @@ Object.defineProperty(exports, "Responsive", {
     return _Responsive.Responsive;
   }
 });
+Object.defineProperty(exports, "Scroll", {
+  enumerable: true,
+  get: function () {
+    return _Scroll.Scroll;
+  }
+});
+Object.defineProperty(exports, "ScrollItem", {
+  enumerable: true,
+  get: function () {
+    return _ScrollItem.ScrollItem;
+  }
+});
 Object.defineProperty(exports, "Search", {
   enumerable: true,
   get: function () {
@@ -1272,6 +1284,8 @@ var _RadioGroup = require("./Radio/RadioGroup");
 var _RadioCard = require("./RadioCard/RadioCard");
 var _RadioCardGroup = require("./RadioCard/RadioCardGroup");
 var _Responsive = require("./Responsive/Responsive");
+var _Scroll = require("./Scroll/Scroll");
+var _ScrollItem = require("./Scroll/ScrollItem");
 var _Search = require("./Search/Search");
 var _Select = require("./Select/Select");
 var _SelectItem = require("./Select/SelectItem");

package/lib/cjs/utils/animation/useAnimatedValue.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimatedValue = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ANIMATION_DURATION = 200;
+
+/**
+ * Smoothly animates a numeric value to a new target using a quadratic ease-in-out
+ * curve. Returns the current interpolated value as a plain number so
+ * consumers can use it in non-Animated style props.
+ *
+ * @param {number} targetValue - The value to animate towards.
+ * @param {number} [duration=ANIMATION_DURATION] - Animation duration in ms.
+ */
+const useAnimatedValue = function (targetValue) {
+  let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ANIMATION_DURATION;
+  const [currentValue, setCurrentValue] = _react.default.useState(targetValue);
+  const animatedValue = _react.default.useRef(new _Animated.default.Value(targetValue)).current;
+  _react.default.useEffect(() => {
+    const id = animatedValue.addListener(_ref => {
+      let {
+        value
+      } = _ref;
+      return setCurrentValue(value);
+    });
+    return () => animatedValue.removeListener(id);
+  }, [animatedValue]);
+  _react.default.useEffect(() => {
+    const animation = _Animated.default.timing(animatedValue, {
+      toValue: targetValue,
+      duration,
+      easing: _Easing.default.inOut(_Easing.default.quad),
+      useNativeDriver: false
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [targetValue, animatedValue, duration]);
+  return currentValue;
+};
+exports.useAnimatedValue = useAnimatedValue;

package/lib/cjs/utils/children.js

@@ -54,7 +54,8 @@ const unpackFragment = child => {
 exports.unpackFragment = unpackFragment;
 const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number';
 // Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
-const isWrapable = child => isStringOrNumber(child) || child.type === _A11yText.A11yText || child.type?.name === 'FootnoteLink';
+// Check displayName first as it is explicitly set and reliable regardless of export style (named vs default)
+const isWrapable = child => isStringOrNumber(child) || child.type === _A11yText.A11yText || child.type?.__UDS_COMPONENT_NAME__ === 'FootnoteLink';
 const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '');
 
 // Group wrappable children for one `<Text>` parent, merging adjacent text nodes

package/lib/esm/Footnote/FootnoteLink.js

@@ -15,28 +15,28 @@ import { applyTextStyles } from '../ThemeProvider/utils/styles';
 import { useThemeTokens } from '../ThemeProvider/useThemeTokens';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
-
-// The top property varies between devices due to how devices render the viewport.
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const DEFAULT_LINE_HEIGHT = 1;
+const LINE_HEIGHT_MULTIPLIER = 2;
 const selectTextStyle = _ref => {
   let {
     fontSize,
     lineHeight
   } = _ref;
-  return {
-    fontSize,
-    lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
-    ...Platform.select({
-      ios: {
-        top: -fontSize / 2
-      },
-      android: {
-        top: fontSize / 4
-      },
-      web: {
-        top: -fontSize / 2.8
-      }
-    })
-  };
+  return Platform.select({
+    native: {
+      fontSize: fontSize / HALF_FONT_SIZE,
+      lineHeight: fontSize,
+      position: 'relative',
+      top: -(fontSize * lineHeight) / HALF_FONT_SIZE
+    },
+    web: {
+      fontSize,
+      lineHeight: lineHeight !== DEFAULT_LINE_HEIGHT ? lineHeight : fontSize * LINE_HEIGHT_MULTIPLIER,
+      top: -fontSize / QUARTER_FONT_SIZE
+    }
+  });
 };
 export const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
@@ -80,6 +80,7 @@ export const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
 });
 FootnoteLink.displayName = 'FootnoteLink';
+FootnoteLink.__UDS_COMPONENT_NAME__ = 'FootnoteLink';
 const copyShape = PropTypes.shape({
   a11yLabel: PropTypes.string.isRequired
 });

package/lib/esm/Progress/Progress.js

@@ -12,6 +12,8 @@ import { viewProps } from '../utils/props/viewProps';
 import { ProgressContext } from './ProgressContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const BORDER_SIDES = 2;
+const CENTER_DIVISOR = 2;
 const selectProgressStyles = _ref => {
   let {
     backgroundColor,
@@ -30,6 +32,21 @@ const selectProgressStyles = _ref => {
     ...applyShadowToken(shadow)
   };
 };
+const selectBarWrapperStyles = _ref2 => {
+  let {
+    barHeight,
+    borderRadius,
+    borderWidth,
+    height
+  } = _ref2;
+  return {
+    height: barHeight,
+    width: '100%',
+    position: 'absolute',
+    top: (height - borderWidth * BORDER_SIDES - barHeight) / CENTER_DIVISOR,
+    borderRadius
+  };
+};
 
 /**
  * The `Progress` is a container for displaying one or several `ProgressBar`s.
@@ -43,10 +60,11 @@ const selectProgressStyles = _ref => {
  *
  * - Use the following tokens to customize the appearance:
  *   - `backgroundColor` for the background color of the progress container,
+ *   - `barHeight` to control the height of the progress bars displayed within the container,
  *   - `borderColor` to control the color of the border,
  *   - `borderRadius` for the rounded corners,
  *   - `borderWidth` to change the border width.
- *   - `height` to control the height of the progress bars displayed within the progress bar container.
+ *   - `height` to control the height of the progress bar container.
  *   - `shadow` to apply a box shadow to the progress bar container.
  *
  * ## Variants
@@ -67,16 +85,23 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-export const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+export const Progress = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     tokens,
     variant,
     ...rest
-  } = _ref2;
+  } = _ref3;
   const themeTokens = useThemeTokens('Progress', tokens, variant);
-  // Default to false (vertical layout) to preserve existing behavior and avoid breaking changes
   const layers = variant?.layers ?? false;
+  const {
+    barHeight,
+    height
+  } = themeTokens;
+  const content = barHeight && barHeight !== height ? /*#__PURE__*/_jsx(View, {
+    style: selectBarWrapperStyles(themeTokens),
+    children: children
+  }) : children;
   return /*#__PURE__*/_jsx(ProgressContext.Provider, {
     value: {
       layers
@@ -85,7 +110,7 @@ export const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       ref: ref,
       style: [staticStyles.progressContainer, selectProgressStyles(themeTokens)],
       ...selectProps(rest),
-      children: children
+      children: content
     })
   });
 });