@telus-uds/components-base 1.77.1 → 1.78.0

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 20 Feb 2024 23:07:37 GMT and should not be manually modified.
+This log was last generated on Fri, 23 Feb 2024 19:32:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.78.0
+
+Fri, 23 Feb 2024 19:32:18 GMT
+
+### Minor changes
+
+- refactoring Card component to add media queries as an option to prevent layout shifts (hoss.agina@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.52.0
+
+### Patches
+
+- Onpress function reverted due to several bugs (35577399+JoshHC@users.noreply.github.com)
+- fix Link component keyboard interaction (guillermo.peitzner@telus.com)
+- prevent typography dataset property to be overruled (guillermo.peitzner@telus.com)
+- New changes of notification component merged with old changes to support the users in the migraiton to the new ones (35577399+JoshHC@users.noreply.github.com)
+
 ## 1.77.1
 
-Tue, 20 Feb 2024 23:07:37 GMT
+Tue, 20 Feb 2024 23:14:38 GMT
 
 ### Patches
 

package/lib/Card/Card.js

@@ -78,7 +78,14 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...rest
   } = _ref;
   const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Card', tokens, variant, {
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
   const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
@@ -94,11 +101,28 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     paddingRight,
     ...restOfTokens
   } = themeTokens;
+  let cardStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const mediaQueryStyleSheet = (0, _utils.createMediaQueryStyles)(themeTokens);
+    const {
+      ids,
+      styles
+    } = _utils.StyleSheet.create({
+      card: mediaQueryStyleSheet
+    });
+    cardStyles = styles.card;
+    mediaIds = ids.card;
+  } else {
+    cardStyles = themeTokens;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
       ref: ref,
-      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : themeTokens,
-      dataSet: dataSet,
+      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
+      dataSet: mediaIds && {
+        media: mediaIds
+      },
       ...selectProps(rest),
       children: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.default, {

package/lib/Link/ChevronLink.js

@@ -25,7 +25,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     tokens = {},
     variant,
     dataSet,
-    onPress,
     ...otherlinkProps
   } = _ref;
   const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
@@ -54,7 +53,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
     tokens: getTokens,
     dataSet: dataSet,
     ref: ref,
-    onPress: onPress,
     children: children
   });
 });

package/lib/Link/InlinePressable.js

@@ -7,7 +7,6 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 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); }
@@ -25,30 +24,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-/* eslint-disable react/prop-types */const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+// eslint-disable-next-line react/prop-types
+const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
     style,
-    onPress,
     ...props
   } = _ref;
-  const handlePress = (0, _react.useCallback)(() => {
-    if (onPress) {
-      onPress();
-    }
-  }, [onPress]);
-  const handleKeyPress = (0, _react.useCallback)(e => {
-    e.preventDefault();
-    if (e.key === 'Enter' || e.key === ' ') {
-      handlePress();
-    }
-  }, [handlePress]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
     style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
-    onPress: handlePress,
-    onKeyDown: _Platform.default.OS === 'web' ? handleKeyPress : undefined,
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });

package/lib/Link/LinkBase.js

@@ -187,7 +187,6 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
-    keyboardShouldPersistTaps: "handled",
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);

package/lib/Typography/Typography.js

@@ -104,7 +104,6 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   }
   const resolvedTextProps = {
     ...selectTextProps(rest),
-    dataSet,
     maxFontSizeMultiplier
   };
   const containerProps = {
@@ -136,15 +135,17 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     }
     return resetTagStyling(children);
   };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
       ...resolvedTextProps,
       style: textStyles,
-      dataSet: mediaIds && {
-        media: mediaIds
-      },
+      dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
@@ -152,9 +153,7 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...containerProps,
     ...resolvedTextProps,
     style: textStyles,
-    dataSet: mediaIds && {
-      media: mediaIds
-    },
+    dataSet: dataSetValue,
     children: sanitizeChildren(children)
   });
 });
@@ -199,7 +198,11 @@ Typography.propTypes = {
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: _propTypes.default.object
 };
 var _default = Typography;
 exports.default = _default;

package/lib-module/Card/Card.js

@@ -1,8 +1,8 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View";
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils';
+import { useThemeTokens, useThemeTokensCallback, useResponsiveThemeTokens, useTheme } from '../ThemeProvider';
+import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils';
 import { useViewport } from '../ViewportProvider';
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
 import CardBase from './CardBase';
@@ -71,7 +71,14 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const viewport = useViewport();
-  const themeTokens = useThemeTokens('Card', tokens, variant, {
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
     viewport
   });
   const getThemeTokens = useThemeTokensCallback('Card', interactiveCard === null || interactiveCard === void 0 ? void 0 : interactiveCard.tokens, {
@@ -87,11 +94,28 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
     paddingRight,
     ...restOfTokens
   } = themeTokens;
+  let cardStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      card: mediaQueryStyleSheet
+    });
+    cardStyles = styles.card;
+    mediaIds = ids.card;
+  } else {
+    cardStyles = themeTokens;
+  }
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(CardBase, {
       ref: ref,
-      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : themeTokens,
-      dataSet: dataSet,
+      tokens: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? restOfTokens : cardStyles,
+      dataSet: mediaIds && {
+        media: mediaIds
+      },
       ...selectProps(rest),
       children: interactiveCard !== null && interactiveCard !== void 0 && interactiveCard.body ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(PressableCardBase, {

package/lib-module/Link/ChevronLink.js

@@ -18,7 +18,6 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens = {},
     variant,
     dataSet,
-    onPress,
     ...otherlinkProps
   } = _ref;
   const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
@@ -47,7 +46,6 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens: getTokens,
     dataSet: dataSet,
     ref: ref,
-    onPress: onPress,
     children: children
   });
 });

package/lib-module/Link/InlinePressable.js

@@ -1,7 +1,6 @@
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef } from 'react';
 import Pressable from "react-native-web/dist/exports/Pressable";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Platform from "react-native-web/dist/exports/Platform";
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
  */
@@ -14,32 +13,18 @@ import Platform from "react-native-web/dist/exports/Platform";
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-/* eslint-disable react/prop-types */
+// eslint-disable-next-line react/prop-types
 import { jsx as _jsx } from "react/jsx-runtime";
 const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     inlineFlex = true,
     style,
-    onPress,
     ...props
   } = _ref;
-  const handlePress = useCallback(() => {
-    if (onPress) {
-      onPress();
-    }
-  }, [onPress]);
-  const handleKeyPress = useCallback(e => {
-    e.preventDefault();
-    if (e.key === 'Enter' || e.key === ' ') {
-      handlePress();
-    }
-  }, [handlePress]);
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     style: pressState => [typeof style === 'function' ? style(pressState) : style, staticStyles[inlineFlex ? 'inlineFlex' : 'inline']],
-    onPress: handlePress,
-    onKeyDown: Platform.OS === 'web' ? handleKeyPress : undefined,
     ...props,
     children: pressState => typeof children === 'function' ? children(pressState) : children
   });

package/lib-module/Link/LinkBase.js

@@ -178,7 +178,6 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     // assuming links without icons should be inline (even if they are long)
     ,
     ref: ref,
-    keyboardShouldPersistTaps: "handled",
     style: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);

package/lib-module/Typography/Typography.js

@@ -96,7 +96,6 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
   }
   const resolvedTextProps = {
     ...selectTextProps(rest),
-    dataSet,
     maxFontSizeMultiplier
   };
   const containerProps = {
@@ -128,15 +127,17 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     }
     return resetTagStyling(children);
   };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
   return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/_jsx(Text, {
       ...resolvedTextProps,
       style: textStyles,
-      dataSet: mediaIds && {
-        media: mediaIds
-      },
+      dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/_jsx(Text, {
@@ -144,9 +145,7 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...containerProps,
     ...resolvedTextProps,
     style: textStyles,
-    dataSet: mediaIds && {
-      media: mediaIds
-    },
+    dataSet: dataSetValue,
     children: sanitizeChildren(children)
   });
 });
@@ -191,6 +190,10 @@ Typography.propTypes = {
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: PropTypes.object
 };
 export default Typography;

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.51.0",
+    "@telus-uds/system-theme-tokens": "^2.52.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-linear-gradient": "^12.5.0",
@@ -85,6 +85,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.77.1",
+  "version": "1.78.0",
   "types": "types/index.d.ts"
 }

package/src/Card/Card.jsx

@@ -2,8 +2,13 @@ import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
-import { getTokensPropType, variantProp } from '../utils'
+import {
+  useThemeTokens,
+  useThemeTokensCallback,
+  useResponsiveThemeTokens,
+  useTheme
+} from '../ThemeProvider'
+import { getTokensPropType, variantProp, StyleSheet, createMediaQueryStyles } from '../utils'
 import { useViewport } from '../ViewportProvider'
 import { a11yProps, selectSystemProps, viewProps } from '../utils/props'
 import CardBase from './CardBase'
@@ -62,7 +67,19 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 const Card = forwardRef(
   ({ children, tokens, variant, dataSet, onPress, interactiveCard, ...rest }, ref) => {
     const viewport = useViewport()
-    const themeTokens = useThemeTokens('Card', tokens, variant, { viewport })
+    const { themeOptions } = useTheme()
+
+    const { enableMediaQueryStyleSheet } = themeOptions
+
+    const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens
+
+    const themeTokens = useTokens(
+      'Card',
+      tokens,
+      variant,
+      !enableMediaQueryStyleSheet && { viewport }
+    )
+
     const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
       interactive: true,
       ...(interactiveCard?.variant || {})
@@ -71,12 +88,27 @@ const Card = forwardRef(
     // to individual Card sections, not Card as a whole
     const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...restOfTokens } = themeTokens
 
+    let cardStyles
+    let mediaIds
+
+    if (enableMediaQueryStyleSheet) {
+      const mediaQueryStyleSheet = createMediaQueryStyles(themeTokens)
+
+      const { ids, styles } = StyleSheet.create({
+        card: mediaQueryStyleSheet
+      })
+      cardStyles = styles.card
+      mediaIds = ids.card
+    } else {
+      cardStyles = themeTokens
+    }
+
     return (
       <>
         <CardBase
           ref={ref}
-          tokens={interactiveCard?.body ? restOfTokens : themeTokens}
-          dataSet={dataSet}
+          tokens={interactiveCard?.body ? restOfTokens : cardStyles}
+          dataSet={mediaIds && { media: mediaIds }}
           {...selectProps(rest)}
         >
           {interactiveCard?.body ? (

package/src/Link/ChevronLink.jsx

@@ -12,10 +12,7 @@ import LinkBase from './LinkBase'
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
 const ChevronLink = forwardRef(
-  (
-    { direction = 'right', children, tokens = {}, variant, dataSet, onPress, ...otherlinkProps },
-    ref
-  ) => {
+  ({ direction = 'right', children, tokens = {}, variant, dataSet, ...otherlinkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
       const { leftIcon, rightIcon, iconDisplace, height, fontSize, ...otherTokens } =
@@ -41,7 +38,6 @@ const ChevronLink = forwardRef(
         tokens={getTokens}
         dataSet={dataSet}
         ref={ref}
-        onPress={onPress}
       >
         {children}
       </LinkBase>

package/src/Link/InlinePressable.jsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, useCallback } from 'react'
-import { Pressable, StyleSheet, Platform } from 'react-native'
+import React, { forwardRef } from 'react'
+import { Pressable, StyleSheet } from 'react-native'
 
 /**
  * @typedef {import('react-native').PressableProps} PressableProps
@@ -14,42 +14,20 @@ import { Pressable, StyleSheet, Platform } from 'react-native'
  * @param {PressableProps} PressableProps
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
-/* eslint-disable react/prop-types */
-const InlinePressable = forwardRef(
-  ({ children, inlineFlex = true, style, onPress, ...props }, ref) => {
-    const handlePress = useCallback(() => {
-      if (onPress) {
-        onPress()
-      }
-    }, [onPress])
+// eslint-disable-next-line react/prop-types
+const InlinePressable = forwardRef(({ children, inlineFlex = true, style, ...props }, ref) => (
+  <Pressable
+    ref={ref}
+    style={(pressState) => [
+      typeof style === 'function' ? style(pressState) : style,
+      staticStyles[inlineFlex ? 'inlineFlex' : 'inline']
+    ]}
+    {...props}
+  >
+    {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
+  </Pressable>
+))
 
-    const handleKeyPress = useCallback(
-      (e) => {
-        e.preventDefault()
-
-        if (e.key === 'Enter' || e.key === ' ') {
-          handlePress()
-        }
-      },
-      [handlePress]
-    )
-
-    return (
-      <Pressable
-        ref={ref}
-        style={(pressState) => [
-          typeof style === 'function' ? style(pressState) : style,
-          staticStyles[inlineFlex ? 'inlineFlex' : 'inline']
-        ]}
-        onPress={handlePress}
-        onKeyDown={Platform.OS === 'web' ? handleKeyPress : undefined}
-        {...props}
-      >
-        {(pressState) => (typeof children === 'function' ? children(pressState) : children)}
-      </Pressable>
-    )
-  }
-)
 InlinePressable.displayName = 'InlinePressable'
 
 const staticStyles = StyleSheet.create({

package/src/Link/LinkBase.jsx

@@ -162,7 +162,6 @@ const LinkBase = forwardRef(
         inlineFlex={hasIcon}
         // assuming links without icons should be inline (even if they are long)
         ref={ref}
-        keyboardShouldPersistTaps="handled"
         style={(linkState) => {
           const themeTokens = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)

package/src/Typography/Typography.jsx

@@ -124,7 +124,6 @@ const Typography = forwardRef(
 
     const resolvedTextProps = {
       ...selectTextProps(rest),
-      dataSet,
       maxFontSizeMultiplier
     }
 
@@ -158,9 +157,11 @@ const Typography = forwardRef(
       return resetTagStyling(children)
     }
 
+    const dataSetValue = mediaIds ? { media: mediaIds, ...dataSet } : dataSet
+
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps} style={textStyles} dataSet={mediaIds && { media: mediaIds }}>
+        <Text {...resolvedTextProps} style={textStyles} dataSet={dataSetValue}>
           {sanitizeChildren(children)}
         </Text>
       </View>
@@ -170,7 +171,7 @@ const Typography = forwardRef(
         {...containerProps}
         {...resolvedTextProps}
         style={textStyles}
-        dataSet={mediaIds && { media: mediaIds }}
+        dataSet={dataSetValue}
       >
         {sanitizeChildren(children)}
       </Text>
@@ -219,7 +220,11 @@ Typography.propTypes = {
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: PropTypes.object
 }
 
 export default Typography