@telus-uds/components-web 2.33.1 → 2.34.0

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Wed, 24 Apr 2024 16:28:55 GMT and should not be manually modified.
+This log was last generated on Fri, 17 May 2024 16:25:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.34.0
+
+Fri, 17 May 2024 16:25:38 GMT
+
+### Minor changes
+
+- Refactor existing `CardGroup` to be `CardGroupWeb` (Mauricio.BatresMontejo@telus.com)
+- Adding the placeholder prop to the Datepicker web component (jose.avalos@telus.com)
+- Implemented onProgress and other analytics callbacks for WebVideo and VideoPicker (kristina.kirpichnikova@telus.com)
+- Bump @telus-uds/components-base to v1.85.0
+- Bump @telus-uds/system-theme-tokens to v2.56.0
+
+### Patches
+
+- `DatePicker` may not render correctly inside `Modal` because of `z-index` values overlap (shahzaibkhalidmalik@outlook.com)
+- `QuantitySelector`: Remove the default outer spacing (shahzaibkhalidmalik@outlook.com)
+
+## 2.33.2
+
+Mon, 06 May 2024 16:39:58 GMT
+
+### Patches
+
+- Bug fixed for Terms and Conditions component, the component added extra padding to the page when the content exceed the mean height and overflows the container (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.84.0
+- Bump @telus-uds/system-theme-tokens to v2.55.0
+
 ## 2.33.1
 
-Wed, 24 Apr 2024 16:28:55 GMT
+Wed, 24 Apr 2024 16:35:16 GMT
 
 ### Patches
 

package/lib/Badge/Badge.js

@@ -53,7 +53,7 @@ const fontSizeMapping = {
   14: 'small',
   16: 'h6'
 };
-const Badge = _ref6 => {
+const Badge = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,
@@ -98,6 +98,7 @@ const Badge = _ref6 => {
     fontWeight: fontWeight,
     gradient: semanticGradient,
     border: `${borderWidth}px solid ${borderColor}`,
+    ref: ref,
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       tokens: {
@@ -111,7 +112,8 @@ const Badge = _ref6 => {
       children: children
     })
   });
-};
+});
+Badge.displayName = 'Badge';
 Badge.propTypes = {
   ...selectedSystemPropTypes,
   children: _propTypes.default.node,

package/lib/BlockQuote/BlockQuote.js

@@ -55,7 +55,7 @@ const QuoteContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   } = _ref7;
   return `${marginBottom}px`;
 });
-const BlockQuote = _ref8 => {
+const BlockQuote = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     children,
     link,
@@ -162,6 +162,7 @@ const BlockQuote = _ref8 => {
     paddingRight: paddingRight,
     width: width,
     backgroundGradient: backgroundGradient,
+    ref: ref,
     children: [renderQuote(), (additionalInfo || link) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       space: 0,
       children: [link && renderLink(), additionalInfo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
@@ -175,7 +176,8 @@ const BlockQuote = _ref8 => {
       })]
     })]
   });
-};
+});
+BlockQuote.displayName = 'BlockQuote';
 BlockQuote.propTypes = {
   ...selectedSystemPropTypes,
   ..._componentsBase.withLinkRouter.propTypes,

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -101,7 +101,7 @@ const getStructuredData = (items, baseUrl) => {
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = _ref2 => {
+const Breadcrumbs = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     baseUrl,
     children,
@@ -116,7 +116,7 @@ const Breadcrumbs = _ref2 => {
   // React Helmet can cause a memory leak in SSR if not properly configured.
   // Only run it in SSR if theme options tells us to.
   /* const {
-    themeOptions: { enableHelmetSSR }
+  themeOptions: { enableHelmetSSR }
   } = useTheme() */
   // const isHydrating = useHydrationContext()
   // const isSSR = typeof window === 'undefined' || isHydrating
@@ -129,12 +129,12 @@ const Breadcrumbs = _ref2 => {
         children: breadcrumbName,
         ...itemRest
       },
-      ref
+      ref: routeRef
     } = _ref3;
     return {
       path: href,
       breadcrumbName,
-      ref,
+      routeRef,
       ...itemRest
     };
   }) : routes.filter(route => route.path && route.breadcrumbName);
@@ -157,6 +157,7 @@ const Breadcrumbs = _ref2 => {
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
     "aria-label": "Breadcrumb",
+    ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
       iconContainerSize: themeTokens.iconContainerSize,
@@ -188,7 +189,8 @@ const Breadcrumbs = _ref2 => {
       })
     }), metadata]
   });
-};
+});
+Breadcrumbs.displayName = 'Breadcrumbs';
 Breadcrumbs.propTypes = {
   ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('Breadcrumbs'),

package/lib/Breadcrumbs/Item/Item.js

@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _componentsBase = require("@telus-uds/components-base");
 var _utils = require("../../utils");
 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; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig({
   displayName: "Item__StyledItemContainer",
@@ -83,7 +81,7 @@ const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
     return `${iconContainerSize + iconPadding * 2}px`;
   }
 });
-const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
+const Item = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
   let {
     href,
     children,
@@ -180,14 +178,5 @@ Item.propTypes = {
     inverse: _propTypes.default.bool
   })
 };
-
-// Since react/require-default-props eslint rule doesn't pick up default arguments as default props when combined with `forwardRef`
-// - probably related https://github.com/yannickcr/eslint-plugin-react/issues/2760
-Item.defaultProps = {
-  current: false,
-  variant: {
-    light: true
-  }
-};
 var _default = Item;
 exports.default = _default;

package/lib/Callout/Callout.js

@@ -60,7 +60,7 @@ const CalloutContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     alignItems: verticalAlignToFlex(verticalAlign)
   };
 });
-const Callout = _ref2 => {
+const Callout = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     icon,
     children,
@@ -94,6 +94,7 @@ const Callout = _ref2 => {
     gap: gap,
     borderRadius: borderRadius,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+    ref: ref,
     ...selectProps(rest),
     children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
       tokens: {
@@ -115,7 +116,8 @@ const Callout = _ref2 => {
       children: children
     })]
   });
-};
+});
+Callout.displayName = 'Callout';
 Callout.propTypes = {
   ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('Callout'),

package/lib/Card/Card.js

@@ -4,18 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _CardContent = _interopRequireDefault(require("./CardContent"));
 var _CardFooter = _interopRequireDefault(require("./CardFooter"));
 var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
 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; }
-/* eslint-disable react/require-default-props */
-
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
 
@@ -47,7 +45,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
-const Card = /*#__PURE__*/(0, _react.forwardRef)(function () {
+const Card = /*#__PURE__*/_react.default.forwardRef(function () {
   let {
     children,
     footer,

package/lib/Card/CardContent.js

@@ -52,7 +52,7 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
 /**
  * Card content, applying the card tokens as per the theme used.
  */
-const CardContent = _ref2 => {
+const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     flexContent,
@@ -69,10 +69,12 @@ const CardContent = _ref2 => {
     ...themeTokens,
     flexContent: flexContent,
     withFooter: withFooter,
+    ref: ref,
     ...selectProps(rest),
     children: children
   });
-};
+});
+CardContent.displayName = 'CardContent';
 CardContent.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib/Countdown/Countdown.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _systemConstants = require("@telus-uds/system-constants");
@@ -15,10 +15,6 @@ var _useCountdown = _interopRequireDefault(require("./useCountdown"));
 var _types = require("./types");
 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; }
-/* eslint-disable react/require-default-props */
-
 // Reading these from the RN palette since they will be used to generate
 // the `Typography` tokens
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
@@ -79,7 +75,7 @@ const getMainTextTokens = _ref2 => {
     fontName: textTimerFontName
   };
 };
-const Countdown = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const Countdown = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     targetTime,

package/lib/Countdown/Segment.js

@@ -44,7 +44,7 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
 // A segment of the countdown string: we need to make sure it
 // keeps its width constant to prevent the whole component from
 // being automatically resized while using variable size fonts
-const Segment = _ref2 => {
+const Segment = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     segmentFontSize,
@@ -68,6 +68,7 @@ const Segment = _ref2 => {
     segmentFontSize: segmentFontSize,
     segmentWidth: segmentWidth,
     variant: variant,
+    ref: ref,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
       direction: large || feature ? 'column' : 'row',
       space: large || feature ? 0 : 1,
@@ -83,7 +84,8 @@ const Segment = _ref2 => {
       })]
     })
   });
-};
+});
+Segment.displayName = 'Segment';
 Segment.propTypes = {
   /**
    * Copy language identifier or a dictionary instance.

package/lib/DatePicker/CalendarContainer.js

@@ -25,7 +25,7 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
   return `
   ${_reactDatesCss.default}
   > div {
-    z-index: 3;
+    z-index: 1000;
   }
   .SingleDatePicker,
   .SingleDatePickerInput {
@@ -37,7 +37,7 @@ const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
     border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
     border-radius: ${remainingTokens.singleDatePickerRadius}px;
     padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${remainingTokens.singleDatePickerLeftRight}px;
-    z-index: 3;
+    z-index: 1000;
   }
   .DateInput {
     width: 100%;

package/lib/DatePicker/DatePicker.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _reactMomentProptypes = _interopRequireDefault(require("react-moment-proptypes"));
@@ -19,8 +19,6 @@ var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _utils = require("../utils");
 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; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const dateFormat = 'DD / MM / YYYY';
 const dateFormatWithoutSpaces = 'DD/MM/YYYY';
@@ -95,32 +93,33 @@ const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
  * - Optimized for keyboard interaction and tablet touch
  * - Recommended for viewports greater than or equal to 576px
  */
-const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const DatePicker = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   var _dictionary$copy;
   let {
     copy = 'en',
     id,
     date,
     feedback,
-    inline,
+    inline = false,
     isDayDisabled,
     label,
-    onDateChange,
+    onDateChange = () => {},
     hint,
     hintPosition = 'inline',
     tooltip,
     tokens,
     variant = {},
     validation,
-    disabled,
-    prevTestID,
-    nextTestID,
+    disabled = false,
+    prevTestID = '',
+    nextTestID = '',
+    placeholder = 'DD / MM / YYYY',
     ...rest
   } = _ref3;
-  const [inputDate, setInputDate] = (0, _react.useState)(date instanceof _moment.default ? date : undefined);
-  const [inputText, setInputText] = (0, _react.useState)(date instanceof _moment.default ? date.format(dateFormat) : '');
-  const textInputRef = (0, _react.useRef)();
-  const [datePickerPosition, setDatePickerPosition] = (0, _react.useState)({
+  const [inputDate, setInputDate] = _react.default.useState(date instanceof _moment.default ? date : undefined);
+  const [inputText, setInputText] = _react.default.useState(date instanceof _moment.default ? date.format(dateFormat) : '');
+  const textInputRef = _react.default.useRef();
+  const [datePickerPosition, setDatePickerPosition] = _react.default.useState({
     left: 0,
     top: 0
   });
@@ -144,13 +143,13 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     window.addEventListener('resize', throttledUpdateDimensions);
     return () => window.removeEventListener('resize', throttledUpdateDimensions);
   }, []);
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [isClickedInside, setIsClickedInside] = (0, _react.useState)(false);
+  const [isFocused, setIsFocused] = _react.default.useState(false);
+  const [isClickedInside, setIsClickedInside] = _react.default.useState(false);
   const getCopy = (0, _componentsBase.useCopy)({
     dictionary: _dictionary.default,
     copy
   });
-  (0, _react.useEffect)(() => {
+  _react.default.useEffect(() => {
     /**
      * `date` could be passed as `null` to reset the value so explicitly
      * checking for not being `undefined`
@@ -341,7 +340,7 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         copy: copy,
         feedback: feedback,
         hint: hint,
-        placeholder: "DD / MM / YYYY",
+        placeholder: placeholder,
         onChange: onChangeInput,
         onKeyPress: handleOnKeyPress,
         tooltip: tooltip,
@@ -473,24 +472,11 @@ DatePicker.propTypes = {
    * This is for automation testing purposes.
    * Will be added as a `data-testid-next` attribute for example.
    */
-  nextTestID: _propTypes.default.string
-};
-DatePicker.defaultProps = {
-  copy: 'en',
-  date: undefined,
-  feedback: undefined,
-  inline: false,
-  isDayDisabled: undefined,
-  label: undefined,
-  hint: undefined,
-  hintPosition: 'inline',
-  tooltip: undefined,
-  onDateChange: () => {},
-  validation: undefined,
-  disabled: false,
-  tokens: undefined,
-  prevTestID: '',
-  nextTestID: ''
+  nextTestID: _propTypes.default.string,
+  /**
+   * Optional placeholder for the date input. If not set the default value will be `DD / MM / YYYY`
+   */
+  placeholder: _propTypes.default.string
 };
 var _default = DatePicker;
 exports.default = _default;

package/lib/Disclaimer/Disclaimer.js

@@ -39,18 +39,20 @@ const StyledDisclaimer = /*#__PURE__*/_styledComponents.default.p.withConfig({
  * Use Disclaimer to display singular legal statement and must be displayed
  * immediately adjacent to the related, originating content.
  */
-const Disclaimer = _ref2 => {
+const Disclaimer = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     ...rest
   } = _ref2;
   const themeTokens = (0, _componentsBase.useThemeTokens)('Disclaimer');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDisclaimer, {
+    ref: ref,
     ...selectProps(rest),
     ...themeTokens,
     children: children
   });
-};
+});
+Disclaimer.displayName = 'Disclaimer';
 Disclaimer.propTypes = {
   ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('Disclaimer'),

package/lib/ExpandCollapseMini/ExpandCollapseMini.js

@@ -4,19 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _ExpandCollapseMiniControl = _interopRequireDefault(require("./ExpandCollapseMiniControl"));
 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; }
-const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const ExpandCollapseMini = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
-    onToggle,
-    tokens,
+    onToggle = () => {},
+    tokens = {},
     nativeID,
     ...rest
   } = _ref;
@@ -28,6 +26,7 @@ const ExpandCollapseMini = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
     onChange: handleChange,
+    tokens: tokens,
     children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, {
       ...expandProps,
       panelId: "ExpandCollapseMiniPanel",
@@ -71,10 +70,5 @@ ExpandCollapseMini.propTypes = {
   children: _propTypes.default.node.isRequired,
   tokens: (0, _componentsBase.getTokensPropType)('ExpandCollapseMini')
 };
-ExpandCollapseMini.defaultProps = {
-  onToggle: () => {},
-  tokens: {},
-  nativeID: ''
-};
 var _default = ExpandCollapseMini;
 exports.default = _default;

package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -36,7 +36,7 @@ const selectLinkTokens = _ref => {
     blockFontSize: fontSize
   };
 };
-const ExpandCollapseMiniControl = _ref2 => {
+const ExpandCollapseMiniControl = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     pressableState,
     collapseTitle,
@@ -93,11 +93,13 @@ const ExpandCollapseMiniControl = _ref2 => {
       ...selectLinkTokens(themeTokens),
       outerBorderColor
     }),
+    ref: ref,
     ...presentationOnly,
     ...selectProps(rest),
     children: expanded ? expandTitle : collapseTitle
   });
-};
+});
+ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl';
 ExpandCollapseMiniControl.propTypes = {
   ...selectedSystemPropTypes,
   ..._componentsBase.Link.propTypes,