@telus-uds/components-base 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 05 Mar 2025 00:01:06 GMT and should not be manually modified.
+This log was last generated on Tue, 11 Mar 2025 21:13:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.4.0
+
+Tue, 11 Mar 2025 21:13:58 GMT
+
+### Minor changes
+
+- `dataSet`: add new contenful attributes (sergio.ramirez@telus.com)
+- Use React's useId hook within useUniqueId for SSR-safe ids (6854874+kyletsang@users.noreply.github.com)
+
 ## 3.3.0
 
-Wed, 05 Mar 2025 00:01:06 GMT
+Wed, 05 Mar 2025 00:06:37 GMT
 
 ### Minor changes
 

package/lib/cjs/Button/ButtonBase.js

@@ -16,7 +16,7 @@ var _utils = require("../utils");
 var _Icon = require("../Icon");
 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.focusHandlerProps, _utils.linkProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.linkProps, _utils.viewProps, _utils.contentfulProps]);
 const getOuterBorderOffset = _ref => {
   let {
     outerBorderGap = 0,

package/lib/cjs/Button/ButtonLink.js

@@ -50,6 +50,7 @@ ButtonLink.propTypes = {
   ..._props.a11yProps.types,
   ..._propTypes2.default,
   ..._props.linkProps.types,
+  ..._props.contentfulProps.types,
   children: _propTypes2.textAndA11yText,
   dataSet: _propTypes.default.object,
   accessibilityRole: _propTypes.default.string

package/lib/cjs/ExpandCollapse/ExpandCollapse.js

@@ -12,7 +12,7 @@ var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 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.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps, _utils.contentfulProps]);
 function selectBorderStyles(tokens) {
   return {
     borderBottomWidth: tokens.borderWidth,
@@ -37,6 +37,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     open,
     initialOpen,
     onChange,
+    dataSet,
     ...rest
   } = _ref;
   const {
@@ -56,6 +57,7 @@ const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     style: staticStyles.container,
     ref: ref,
     ...selectProps(rest),
+    dataSet: dataSet,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectBorderStyles(themeTokens),
       children: typeof children === 'function' ? children({

package/lib/cjs/ExpandCollapseMini/ExpandCollapseMini.js

@@ -11,6 +11,7 @@ var _utils = require("../utils");
 var _ExpandCollapseMiniControl = _interopRequireDefault(require("./ExpandCollapseMiniControl"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectContainerProps, selectedContainerPropTypes] = (0, _utils.selectSystemProps)([_utils.contentfulProps]);
 const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
@@ -18,6 +19,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     tokens = {},
     nativeID,
     initialOpen = false,
+    dataSet,
     ...rest
   } = _ref;
   const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
@@ -31,6 +33,8 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     onChange: handleChange,
     tokens: tokens,
     initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
+    ...selectContainerProps(rest),
+    dataSet: dataSet,
     children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
       ...expandProps,
       panelId: expandCollapeMiniPanelId,
@@ -60,6 +64,7 @@ const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 ExpandCollapseMini.displayName = 'ExpandCollapseMini';
 ExpandCollapseMini.propTypes = {
   ..._ExpandCollapseMiniControl.default.propTypes,
+  ...selectedContainerPropTypes,
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
@@ -79,6 +84,10 @@ ExpandCollapseMini.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  tokens: (0, _utils.getTokensPropType)('ExpandCollapseMini')
+  tokens: (0, _utils.getTokensPropType)('ExpandCollapseMini'),
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: _propTypes.default.object
 };
 var _default = exports.default = ExpandCollapseMini;

package/lib/cjs/Link/Link.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ThemeProvider = require("../ThemeProvider");
 var _LinkBase = _interopRequireDefault(require("./LinkBase"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,5 +32,11 @@ const Link = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   });
 });
 Link.displayName = 'Link';
-Link.propTypes = _LinkBase.default.propTypes;
+Link.propTypes = {
+  ..._LinkBase.default.propTypes,
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: _propTypes.default.object
+};
 var _default = exports.default = Link;

package/lib/cjs/Link/LinkBase.js

@@ -143,6 +143,7 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
     variant,
     tokens = {},
     children,
+    dataSet,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
@@ -177,6 +178,7 @@ const LinkBase = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   } = (0, _ThemeProvider.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, {
     ...selectedProps,
+    dataSet: dataSet,
     inlineFlex: hasIcon
     // assuming links without icons should be inline (even if they are long)
     ,

package/lib/cjs/utils/useUniqueId.js

@@ -5,13 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-let id = 0;
 function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  const [uniqueId] = (0, _react.useState)(() => {
-    id += 1;
-    return `${prefix}-${id}`;
-  });
-  return uniqueId;
+  const id = (0, _react.useId)();
+  return `${prefix ? `${prefix}-` : ''}${id}`;
 }
 var _default = exports.default = useUniqueId;

package/lib/esm/Button/ButtonBase.js

@@ -6,10 +6,10 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Platform from "react-native-web/dist/exports/Platform";
 import { applyTextStyles, applyShadowToken, applyOuterBorder, useTheme } from '../ThemeProvider';
 import buttonPropTypes from './propTypes';
-import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter } from '../utils';
+import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, resolvePressableState, resolvePressableTokens, selectSystemProps, viewProps, wrapStringsInText, withLinkRouter, contentfulProps } from '../utils';
 import { IconText } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps, contentfulProps]);
 const getOuterBorderOffset = _ref => {
   let {
     outerBorderGap = 0,

package/lib/esm/Button/ButtonLink.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ButtonBase from './ButtonBase';
 import buttonPropTypes, { textAndA11yText } from './propTypes';
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props';
+import { a11yProps, hrefAttrsProp, linkProps, contentfulProps } from '../utils/props';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { useViewport } from '../ViewportProvider';
 
@@ -43,6 +43,7 @@ ButtonLink.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types,
+  ...contentfulProps.types,
   children: textAndA11yText,
   dataSet: PropTypes.object,
   accessibilityRole: PropTypes.string

package/lib/esm/ExpandCollapse/ExpandCollapse.js

@@ -3,9 +3,9 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
 import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps } from '../utils';
+import { a11yProps, getTokensPropType, selectSystemProps, useMultipleInputValues, variantProp, viewProps, contentfulProps } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps, contentfulProps]);
 function selectBorderStyles(tokens) {
   return {
     borderBottomWidth: tokens.borderWidth,
@@ -30,6 +30,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     open,
     initialOpen,
     onChange,
+    dataSet,
     ...rest
   } = _ref;
   const {
@@ -49,6 +50,7 @@ const ExpandCollapse = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     style: staticStyles.container,
     ref: ref,
     ...selectProps(rest),
+    dataSet: dataSet,
     children: /*#__PURE__*/_jsx(View, {
       style: selectBorderStyles(themeTokens),
       children: typeof children === 'function' ? children({

package/lib/esm/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ExpandCollapse from '../ExpandCollapse';
-import { getTokensPropType } from '../utils';
+import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps]);
 const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
@@ -11,6 +12,7 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     tokens = {},
     nativeID,
     initialOpen = false,
+    dataSet,
     ...rest
   } = _ref;
   const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel';
@@ -24,6 +26,8 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange: handleChange,
     tokens: tokens,
     initialOpen: initialOpen ? [expandCollapeMiniPanelId] : [],
+    ...selectContainerProps(rest),
+    dataSet: dataSet,
     children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
       ...expandProps,
       panelId: expandCollapeMiniPanelId,
@@ -53,6 +57,7 @@ const ExpandCollapseMini = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 ExpandCollapseMini.displayName = 'ExpandCollapseMini';
 ExpandCollapseMini.propTypes = {
   ...ExpandCollapseMiniControl.propTypes,
+  ...selectedContainerPropTypes,
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
@@ -72,6 +77,10 @@ ExpandCollapseMini.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  tokens: getTokensPropType('ExpandCollapseMini')
+  tokens: getTokensPropType('ExpandCollapseMini'),
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
 };
 export default ExpandCollapseMini;

package/lib/esm/Link/Link.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,5 +25,11 @@ const Link = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   });
 });
 Link.displayName = 'Link';
-Link.propTypes = LinkBase.propTypes;
+Link.propTypes = {
+  ...LinkBase.propTypes,
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
+};
 export default Link;

package/lib/esm/Link/LinkBase.js

@@ -136,6 +136,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     variant,
     tokens = {},
     children,
+    dataSet,
     accessibilityRole = 'link',
     ...rawRest
   } = _ref6;
@@ -170,6 +171,7 @@ const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   } = useTheme();
   return /*#__PURE__*/_jsx(InlinePressable, {
     ...selectedProps,
+    dataSet: dataSet,
     inlineFlex: hasIcon
     // assuming links without icons should be inline (even if they are long)
     ,

package/lib/esm/utils/useUniqueId.js

@@ -1,11 +1,7 @@
-import { useState } from 'react';
-let id = 0;
+import { useId } from 'react';
 function useUniqueId() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  const [uniqueId] = useState(() => {
-    id += 1;
-    return `${prefix}-${id}`;
-  });
-  return uniqueId;
+  const id = useId();
+  return `${prefix ? `${prefix}-` : ''}${id}`;
 }
 export default useUniqueId;

package/lib/package.json

@@ -83,6 +83,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.3.0",
+  "version": "3.4.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -83,6 +83,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.3.0",
+  "version": "3.4.0",
   "types": "types/index.d.ts"
 }

package/src/Button/ButtonBase.jsx

@@ -15,7 +15,8 @@ import {
   selectSystemProps,
   viewProps,
   wrapStringsInText,
-  withLinkRouter
+  withLinkRouter,
+  contentfulProps
 } from '../utils'
 import { IconText } from '../Icon'
 
@@ -23,7 +24,8 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   a11yProps,
   focusHandlerProps,
   linkProps,
-  viewProps
+  viewProps,
+  contentfulProps
 ])
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>

package/src/Button/ButtonLink.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ButtonBase from './ButtonBase'
 import buttonPropTypes, { textAndA11yText } from './propTypes'
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/props'
+import { a11yProps, hrefAttrsProp, linkProps, contentfulProps } from '../utils/props'
 import { useThemeTokensCallback } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
 
@@ -16,6 +16,7 @@ const ButtonLink = React.forwardRef(
     const viewport = useViewport()
     const buttonVariant = { viewport, ...variant }
     const getTokens = useThemeTokensCallback('Button', tokens, buttonVariant)
+
     return (
       <ButtonBase
         ref={ref}
@@ -34,6 +35,7 @@ ButtonLink.propTypes = {
   ...a11yProps.types,
   ...buttonPropTypes,
   ...linkProps.types,
+  ...contentfulProps.types,
   children: textAndA11yText,
   dataSet: PropTypes.object,
   accessibilityRole: PropTypes.string

package/src/ExpandCollapse/ExpandCollapse.jsx

@@ -9,10 +9,15 @@ import {
   selectSystemProps,
   useMultipleInputValues,
   variantProp,
-  viewProps
+  viewProps,
+  contentfulProps
 } from '../utils'
 
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  viewProps,
+  contentfulProps
+])
 
 function selectBorderStyles(tokens) {
   return {
@@ -30,7 +35,7 @@ function selectBorderStyles(tokens) {
  * nested (they do not need to be direct children), and non-interactive items may be included too.
  */
 const ExpandCollapse = React.forwardRef(
-  ({ children, tokens, variant, maxOpen, open, initialOpen, onChange, ...rest }, ref) => {
+  ({ children, tokens, variant, maxOpen, open, initialOpen, onChange, dataSet, ...rest }, ref) => {
     const {
       currentValues: openIds,
       toggleOneValue: onToggle,
@@ -46,7 +51,7 @@ const ExpandCollapse = React.forwardRef(
     const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant)
 
     return (
-      <View style={staticStyles.container} ref={ref} {...selectProps(rest)}>
+      <View style={staticStyles.container} ref={ref} {...selectProps(rest)} dataSet={dataSet}>
         <View style={selectBorderStyles(themeTokens)}>
           {typeof children === 'function'
             ? children({ openIds, onToggle, resetValues, setValues, unsetValues })

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,11 +1,16 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ExpandCollapse from '../ExpandCollapse'
-import { getTokensPropType } from '../utils'
+import { getTokensPropType, selectSystemProps, contentfulProps } from '../utils'
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
 
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([contentfulProps])
+
 const ExpandCollapseMini = React.forwardRef(
-  ({ children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, ...rest }, ref) => {
+  (
+    { children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, dataSet, ...rest },
+    ref
+  ) => {
     const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel'
     const handleChange = (openPanels, event) => {
       if (typeof onToggle === 'function') {
@@ -19,6 +24,8 @@ const ExpandCollapseMini = React.forwardRef(
         onChange={handleChange}
         tokens={tokens}
         initialOpen={initialOpen ? [expandCollapeMiniPanelId] : []}
+        {...selectContainerProps(rest)}
+        dataSet={dataSet}
       >
         {(expandProps) => (
           <ExpandCollapse.Panel
@@ -51,6 +58,7 @@ ExpandCollapseMini.displayName = 'ExpandCollapseMini'
 
 ExpandCollapseMini.propTypes = {
   ...ExpandCollapseMiniControl.propTypes,
+  ...selectedContainerPropTypes,
   /**
    * Function to call on pressing the panel's control, which should open or close the panel.
    */
@@ -70,7 +78,11 @@ ExpandCollapseMini.propTypes = {
   /**
    * Optional variant object to override the default theme tokens
    */
-  tokens: getTokensPropType('ExpandCollapseMini')
+  tokens: getTokensPropType('ExpandCollapseMini'),
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
 }
 
 export default ExpandCollapseMini

package/src/Link/Link.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { useThemeTokensCallback } from '../ThemeProvider'
 import LinkBase from './LinkBase'
@@ -25,6 +26,12 @@ const Link = React.forwardRef(
 )
 Link.displayName = 'Link'
 
-Link.propTypes = LinkBase.propTypes
+Link.propTypes = {
+  ...LinkBase.propTypes,
+  /**
+   * The dataSet prop allows to pass data-* attributes element to the component.
+   */
+  dataSet: PropTypes.object
+}
 
 export default Link

package/src/Link/LinkBase.jsx

@@ -132,6 +132,7 @@ const LinkBase = React.forwardRef(
       variant,
       tokens = {},
       children,
+      dataSet,
       accessibilityRole = 'link',
       ...rawRest
     },
@@ -162,6 +163,7 @@ const LinkBase = React.forwardRef(
     return (
       <InlinePressable
         {...selectedProps}
+        dataSet={dataSet}
         inlineFlex={hasIcon}
         // assuming links without icons should be inline (even if they are long)
         ref={ref}

package/src/utils/useUniqueId.js

@@ -1,14 +1,9 @@
-import { useState } from 'react'
-
-let id = 0
+import { useId } from 'react'
 
 function useUniqueId(prefix = '') {
-  const [uniqueId] = useState(() => {
-    id += 1
-    return `${prefix}-${id}`
-  })
+  const id = useId()
 
-  return uniqueId
+  return `${prefix ? `${prefix}-` : ''}${id}`
 }
 
 export default useUniqueId