@telus-uds/components-base 1.77.0 → 1.77.1

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 14 Feb 2024 02:21:15 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Feb 2024 23:07:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.77.1
+
+Tue, 20 Feb 2024 23:07:37 GMT
+
+### Patches
+
+- refactor getsteplabel function so step tracker displays multiple labels (evander.owusu@telus.com)
+- fix pagination button-base props warning (guillermo.peitzner@telus.com)
+- fix unexpected scroll when pressing the chevron-link component using the space key (guillermo.peitzner@telus.com)
+
 ## 1.77.0
 
-Wed, 14 Feb 2024 02:21:15 GMT
+Wed, 14 Feb 2024 02:29:37 GMT
 
 ### Minor changes
 

package/lib/Link/InlinePressable.js

@@ -39,6 +39,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     }
   }, [onPress]);
   const handleKeyPress = (0, _react.useCallback)(e => {
+    e.preventDefault();
     if (e.key === 'Enter' || e.key === ' ') {
       handlePress();
     }

package/lib/Pagination/PageButton.js

@@ -11,7 +11,6 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -34,11 +33,11 @@ const PageButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
   const activeProps = isActive ? {
     selected: true,
-    ..._utils.a11yProps.nonFocusableProps,
+    ..._utils.a11yProps.nonFocusableProps
     // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
     // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
-    key: 'active-item'
   } : {};
+  const key = isActive ? 'active-item' : undefined;
   const accessibilityRole = href !== undefined ? 'link' : 'button';
   const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
   const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
@@ -54,13 +53,13 @@ const PageButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     hrefAttrs,
     ...rest
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  return /*#__PURE__*/(0, _react.createElement)(_ButtonBase.default, {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    ...activeProps,
-    children: label
-  });
+    key: key,
+    ...activeProps
+  }, label);
 });
 PageButton.displayName = 'PageButton';
 PageButton.propTypes = {

package/lib/StackView/getStackedContent.js

@@ -68,17 +68,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {
       testID,
-      key: testID,
       space
     };
     const separator = divider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
       vertical: direction.startsWith('row'),
       ...dividerProps,
       ...commonProps
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+    }, testID) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
       direction: direction.startsWith('row') ? 'row' : 'column',
       ...commonProps
-    });
+    }, testID);
     return [...newChildren, separator, item];
   }, []);
   return content;

package/lib/StepTracker/StepTracker.js

@@ -74,7 +74,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * ## Usability and A11y guidelines
  *
  * Keep in mind that in its current implementation this is not an interactive
- * component and can’t be used to navigate between steps. The application
+ * component and can't be used to navigate between steps. The application
  * must provide its own navigation mechanism and state control. That is the
  * main reason the component assumes the `progressbar` role in terms of
  * accessibility. This also makes it extremely important to make sure you
@@ -118,7 +118,13 @@ const StepTracker = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     copy
   });
   const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
-  const getStepLabel = index => themeTokens.showStepLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepLabel : getCopy('stepLabel')).replace('%{stepNumber}', index + 1) : '';
+  const getStepLabel = index => {
+    if (themeTokens.showStepLabel) {
+      var _getCopy;
+      return (_getCopy = getCopy(index + 1)) === null || _getCopy === void 0 ? void 0 : _getCopy.stepLabel.replace('%{stepNumber}', index + 1);
+    }
+    return '';
+  };
   const {
     themeOptions
   } = (0, _ThemeProvider.useTheme)();

package/lib/StepTracker/dictionary.js

@@ -11,7 +11,7 @@ var _default = {
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Step %{stepNumber}',
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     3: {
@@ -25,7 +25,7 @@ var _default = {
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Étape %{stepNumber}',
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     3: {

package/lib-module/Link/InlinePressable.js

@@ -30,6 +30,7 @@ const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, [onPress]);
   const handleKeyPress = useCallback(e => {
+    e.preventDefault();
     if (e.key === 'Enter' || e.key === ' ') {
       handlePress();
     }

package/lib-module/Pagination/PageButton.js

@@ -5,7 +5,7 @@ import { useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps, copyPropTypes, getTokensPropType, hrefAttrsProp, linkProps, selectTokens, variantProp, withLinkRouter } from '../utils';
 import useCopy from '../utils/useCopy';
 import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     label,
@@ -25,11 +25,11 @@ const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
   const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
   const activeProps = isActive ? {
     selected: true,
-    ...a11yProps.nonFocusableProps,
+    ...a11yProps.nonFocusableProps
     // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
     // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
-    key: 'active-item'
   } : {};
+  const key = isActive ? 'active-item' : undefined;
   const accessibilityRole = href !== undefined ? 'link' : 'button';
   const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
   const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
@@ -45,13 +45,13 @@ const PageButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     hrefAttrs,
     ...rest
   };
-  return /*#__PURE__*/_jsx(ButtonBase, {
+  return /*#__PURE__*/_createElement(ButtonBase, {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    ...activeProps,
-    children: label
-  });
+    key: key,
+    ...activeProps
+  }, label);
 });
 PageButton.displayName = 'PageButton';
 PageButton.propTypes = {

package/lib-module/StackView/getStackedContent.js

@@ -62,17 +62,16 @@ const getStackedContent = (children, _ref) => {
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {
       testID,
-      key: testID,
       space
     };
     const separator = divider ? /*#__PURE__*/_jsx(Divider, {
       vertical: direction.startsWith('row'),
       ...dividerProps,
       ...commonProps
-    }) : /*#__PURE__*/_jsx(Spacer, {
+    }, testID) : /*#__PURE__*/_jsx(Spacer, {
       direction: direction.startsWith('row') ? 'row' : 'column',
       ...commonProps
-    });
+    }, testID);
     return [...newChildren, separator, item];
   }, []);
   return content;

package/lib-module/StepTracker/StepTracker.js

@@ -66,7 +66,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * ## Usability and A11y guidelines
  *
  * Keep in mind that in its current implementation this is not an interactive
- * component and can’t be used to navigate between steps. The application
+ * component and can't be used to navigate between steps. The application
  * must provide its own navigation mechanism and state control. That is the
  * main reason the component assumes the `progressbar` role in terms of
  * accessibility. This also makes it extremely important to make sure you
@@ -110,7 +110,13 @@ const StepTracker = /*#__PURE__*/forwardRef((_ref4, ref) => {
     copy
   });
   const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepTrackerLabel : getCopy('stepTrackerLabel')).replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]) : '';
-  const getStepLabel = index => themeTokens.showStepLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).stepLabel : getCopy('stepLabel')).replace('%{stepNumber}', index + 1) : '';
+  const getStepLabel = index => {
+    if (themeTokens.showStepLabel) {
+      var _getCopy;
+      return (_getCopy = getCopy(index + 1)) === null || _getCopy === void 0 ? void 0 : _getCopy.stepLabel.replace('%{stepNumber}', index + 1);
+    }
+    return '';
+  };
   const {
     themeOptions
   } = useTheme();

package/lib-module/StepTracker/dictionary.js

@@ -5,7 +5,7 @@ export default {
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Step %{stepNumber}',
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     3: {
@@ -19,7 +19,7 @@ export default {
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Étape %{stepNumber}',
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     3: {

package/package.json

@@ -85,5 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.77.0"
+  "version": "1.77.1",
+  "types": "types/index.d.ts"
 }

package/src/Link/InlinePressable.jsx

@@ -25,6 +25,8 @@ const InlinePressable = forwardRef(
 
     const handleKeyPress = useCallback(
       (e) => {
+        e.preventDefault()
+
         if (e.key === 'Enter' || e.key === ' ') {
           handlePress()
         }

package/src/Pagination/PageButton.jsx

@@ -28,12 +28,12 @@ const PageButton = forwardRef(
     const activeProps = isActive
       ? {
           selected: true,
-          ...a11yProps.nonFocusableProps,
+          ...a11yProps.nonFocusableProps
           // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
           // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
-          key: 'active-item'
         }
       : {}
+    const key = isActive ? 'active-item' : undefined
 
     const accessibilityRole = href !== undefined ? 'link' : 'button'
     const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : ''
@@ -50,7 +50,7 @@ const PageButton = forwardRef(
     }
 
     return (
-      <ButtonBase ref={ref} {...buttonProps} tokens={getButtonTokens} {...activeProps}>
+      <ButtonBase ref={ref} {...buttonProps} tokens={getButtonTokens} key={key} {...activeProps}>
         {label}
       </ButtonBase>
     )

package/src/StackView/getStackedContent.jsx

@@ -54,11 +54,20 @@ const getStackedContent = (
     if (!index || (!space && !divider)) return [...newChildren, item]
 
     const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`
-    const commonProps = { testID, key: testID, space }
+    const commonProps = { testID, space }
     const separator = divider ? (
-      <Divider vertical={direction.startsWith('row')} {...dividerProps} {...commonProps} />
+      <Divider
+        vertical={direction.startsWith('row')}
+        key={testID}
+        {...dividerProps}
+        {...commonProps}
+      />
     ) : (
-      <Spacer direction={direction.startsWith('row') ? 'row' : 'column'} {...commonProps} />
+      <Spacer
+        direction={direction.startsWith('row') ? 'row' : 'column'}
+        key={testID}
+        {...commonProps}
+      />
     )
     return [...newChildren, separator, item]
   }, [])

package/src/StepTracker/StepTracker.jsx

@@ -51,7 +51,7 @@ const selectStepTrackerLabelStyles = (
  * ## Usability and A11y guidelines
  *
  * Keep in mind that in its current implementation this is not an interactive
- * component and can’t be used to navigate between steps. The application
+ * component and can't be used to navigate between steps. The application
  * must provide its own navigation mechanism and state control. That is the
  * main reason the component assumes the `progressbar` role in terms of
  * accessibility. This also makes it extremely important to make sure you
@@ -106,13 +106,14 @@ const StepTracker = forwardRef(
             current < steps.length ? steps[current] : steps[steps.length - 1]
           )
       : ''
-    const getStepLabel = (index) =>
-      themeTokens.showStepLabel
-        ? (typeof copy === 'string'
-            ? getCopy(textStepTrackerLabel ?? 1).stepLabel
-            : getCopy('stepLabel')
-          ).replace('%{stepNumber}', index + 1)
-        : ''
+
+    const getStepLabel = (index) => {
+      if (themeTokens.showStepLabel) {
+        return getCopy(index + 1)?.stepLabel.replace('%{stepNumber}', index + 1)
+      }
+      return ''
+    }
+
     const { themeOptions } = useTheme()
     if (!steps.length) return null
     const selectedProps = selectProps({

package/src/StepTracker/dictionary.js

@@ -5,7 +5,7 @@ export default {
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Step %{stepNumber}',
       stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
     },
     3: {
@@ -19,7 +19,7 @@ export default {
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     2: {
-      stepLabel: '%{stepNumber}.',
+      stepLabel: 'Étape %{stepNumber}',
       stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
     },
     3: {