@telus-uds/components-web 2.33.2 → 2.34.0

package/lib/VideoPicker/VideoPickerThumbnail.js

@@ -85,7 +85,7 @@ const ThumbnailTitleContainer = /*#__PURE__*/_styledComponents.default.div.withC
   displayName: "VideoPickerThumbnail__ThumbnailTitleContainer",
   componentId: "components-web__sc-1glxurq-2"
 })(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
-const VideoPickerThumbnail = _ref7 => {
+const VideoPickerThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref7, ref) => {
   let {
     videoPlayerRef,
     selectedVideoId,
@@ -185,6 +185,7 @@ const VideoPickerThumbnail = _ref7 => {
         outline: 'none'
       }];
     },
+    ref: ref,
     children: _ref10 => {
       let {
         hovered: hover,
@@ -207,7 +208,8 @@ const VideoPickerThumbnail = _ref7 => {
       });
     }
   }, video.videoId);
-};
+});
+VideoPickerThumbnail.displayName = 'VideoPickerThumbnail';
 VideoPickerThumbnail.propTypes = {
   selectedVideoId: _propTypes.default.string,
   onSelectVideo: _propTypes.default.func,

package/lib/VideoPicker/VideoSlider.js

@@ -4,24 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _componentsBase = require("@telus-uds/components-base");
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _propTypes = _interopRequireDefault(require("prop-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; }
 const {
   useItemPositions
 } = _componentsBase.horizontalScrollUtils;
-const VideoSlider = _ref => {
+const VideoSlider = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children
   } = _ref;
   const viewport = (0, _componentsBase.useViewport)();
   const [itemPositions] = useItemPositions();
-  const [containerWidth, setContainerWidth] = (0, _react.useState)(null);
+  const [containerWidth, setContainerWidth] = _react.default.useState(null);
   const {
     previousIcon: PreviousIcon,
     nextIcon: NextIcon
@@ -53,7 +51,7 @@ const VideoSlider = _ref => {
     tokens: {
       flexGrow: 1
     },
-    children: _react.default.Children.map(children, (child, index) => /*#__PURE__*/(0, _react.cloneElement)(child, {
+    children: _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
       index,
       itemPositions,
       width: itemWidth
@@ -73,6 +71,7 @@ const VideoSlider = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     onLayout: onLayout,
     style: overflow,
+    ref: ref,
     children: containerWidth === null ?
     // Use a 100% width non-scrollable parent until containerWidth is known, to avoid flicker
     content : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.HorizontalScroll, {
@@ -82,7 +81,8 @@ const VideoSlider = _ref => {
       children: content
     })
   });
-};
+});
+VideoSlider.displayName = 'VideoSlider';
 VideoSlider.propTypes = {
   children: _propTypes.default.node
 };

package/lib/WaffleGrid/WaffleGrid.js

@@ -76,7 +76,7 @@ const Center = /*#__PURE__*/(0, _styledComponents.default)('div').withConfig({
 /**
  * The WaffleGrid is used to show items in a waffle like manner with borders surrounding the element
  */
-const WaffleGrid = _ref2 => {
+const WaffleGrid = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     items,
     rowSize = null,
@@ -92,6 +92,7 @@ const WaffleGrid = _ref2 => {
   });
   const currentRowSize = (0, _componentsBase.useResponsiveProp)(rowSize);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+    ref: ref,
     ...selectProps(rest),
     children: items.map(child => /*#__PURE__*/(0, _react.createElement)(Item, {
       ...themeTokens,
@@ -123,7 +124,8 @@ const WaffleGrid = _ref2 => {
       })
     })))
   });
-};
+});
+WaffleGrid.displayName = 'WaffleGrid';
 WaffleGrid.propTypes = {
   ...selectedSystemPropTypes,
   /**

package/lib/WebVideo/WebVideo.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.VideoProps = void 0;
 var _componentsBase = require("@telus-uds/components-base");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactYoutube = _interopRequireDefault(require("react-youtube"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _VideoSplash = _interopRequireDefault(require("../shared/VideoSplash/VideoSplash"));
 var _utils = require("../utils");
+var _utils2 = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
-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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const StyledPlayerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -52,7 +51,7 @@ const AspectLimiter = /*#__PURE__*/_styledComponents.default.div.withConfig({
   ...aspectRatios[props.aspectRatio],
   position: 'relative'
 }));
-const WebVideo = _ref => {
+const WebVideo = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     videoId,
     aspectRatio = '16:9',
@@ -61,15 +60,29 @@ const WebVideo = _ref => {
     beginMuted = false,
     videoLength,
     copy,
-    onPlay,
-    onPause,
-    onEnd,
+    onPlay = () => {},
+    onPause = () => {},
+    onEnd = () => {},
+    onProgress = () => {},
     onStart = () => {},
     ...rest
   } = _ref;
-  const [started, setStarted] = (0, _react.useState)(false);
+  const [started, setStarted] = _react.default.useState(false);
+  const videoStateData = _react.default.useRef({
+    requestAnimationIds: [],
+    state: _utils2.YoutubePlayerState.UNSTARTED
+  });
+  const playerRef = _react.default.useRef(null);
+  const onPlayCallback = event => {
+    onPlay(event, videoStateData.current.state === _utils2.YoutubePlayerState.PAUSED);
+    videoStateData.current.state = _utils2.YoutubePlayerState.PLAYING;
+    if (onProgress) {
+      videoStateData.current.requestAnimationIds = (0, _utils2.triggerInProgressVideoIntervals)(onProgress, playerRef, event);
+    }
+  };
   const initializeYoutubePlayer = event => {
     onStart();
+    playerRef.current = event.target;
     if (beginMuted) {
       event.target.mute();
     }
@@ -77,7 +90,23 @@ const WebVideo = _ref => {
     event.target.playVideo(); // This plays the video after passing the splash screen on mobile.
   };
 
+  const onEndVideoCallback = event => {
+    onEnd(event);
+    videoStateData.current.requestAnimationIds.forEach(id => cancelAnimationFrame(id));
+    videoStateData.current.requestAnimationIds = [];
+    videoStateData.current.state = _utils2.YoutubePlayerState.ENDED;
+    if (onProgress) {
+      onProgress(event, 100);
+    }
+  };
+  const onPauseVideoCallback = event => {
+    videoStateData.current.requestAnimationIds.forEach(id => cancelAnimationFrame(id));
+    onPause(event);
+    videoStateData.current.state = _utils2.YoutubePlayerState.PAUSED;
+    videoStateData.current.requestAnimationIds = [];
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPlayerContainer, {
+    ref: ref,
     "data-testid": "web-video-container",
     ...selectProps(rest),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AspectLimiter, {
@@ -95,9 +124,9 @@ const WebVideo = _ref => {
           }
         },
         onReady: initializeYoutubePlayer,
-        onPlay: onPlay,
-        onPause: onPause,
-        onEnd: onEnd
+        onPlay: onPlayCallback,
+        onPause: onPauseVideoCallback,
+        onEnd: onEndVideoCallback
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
         poster: posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
         videoLength: videoLength,
@@ -108,7 +137,8 @@ const WebVideo = _ref => {
       })
     })
   });
-};
+});
+WebVideo.displayName = 'WebVideo';
 const VideoProps = {
   ...selectedSystemPropTypes,
   /**
@@ -154,7 +184,15 @@ const VideoProps = {
   /**
    * A function to be run when the video ends.
    */
-  onEnd: _propTypes.default.func
+  onEnd: _propTypes.default.func,
+  /**
+   * A function to be run when the video resumes.
+   */
+  onResume: _propTypes.default.func,
+  /**
+   * A function to be run when the video progresses. This function will be run at 10%, 25%, 50%, 75% and 100%.
+   */
+  onProgress: _propTypes.default.func
 };
 exports.VideoProps = VideoProps;
 WebVideo.propTypes = VideoProps;

package/lib/WebVideo/utils/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.triggerInProgressVideoIntervals = exports.YoutubePlayerState = void 0;
+/**
+ * Fires analytics events for inProgress analytics
+ * @param {current progress} progress
+ * @param {callback to run on defined milestones} onProgress
+ * @param {YouTube Video Event} event
+ */
+const fireVideoProgressEvents = (progress, onProgress, event) => {
+  const validProgressValues = [10, 25, 50, 75];
+  if (validProgressValues.includes(progress)) {
+    onProgress(event, progress);
+  }
+};
+const YoutubePlayerState = {
+  UNSTARTED: -1,
+  ENDED: 0,
+  PLAYING: 1,
+  PAUSED: 2,
+  BUFFERING: 3,
+  CUED: 5
+};
+exports.YoutubePlayerState = YoutubePlayerState;
+const PERCENTAGE_MULTIPLIER = 100;
+/**
+ * Run an interval to check the progress of the video and fire events at 10%, 25%, 50% and 75%
+ * @param {callback to run on defined milestones} onProgress
+ * @param {player reference} playerRef
+ * @param {YouTube video event} event
+ */
+const triggerInProgressVideoIntervals = (onProgress, playerRef, event) => {
+  const duration = playerRef.current.getDuration();
+  let lastProgress = null;
+  const requestAnimationFrameIds = [];
+  const frame = () => {
+    const currentTime = playerRef.current.getCurrentTime();
+    const progress = Math.round(currentTime / duration * PERCENTAGE_MULTIPLIER);
+    if (progress !== lastProgress) {
+      fireVideoProgressEvents(progress, onProgress, event);
+      lastProgress = progress;
+    }
+    if (currentTime < duration) {
+      requestAnimationFrameIds.push(requestAnimationFrame(frame));
+    }
+  };
+
+  // Cancel any previous animation frames
+  requestAnimationFrameIds.forEach(id => cancelAnimationFrame(id));
+
+  // Start a new animation frame
+  requestAnimationFrameIds.push(requestAnimationFrame(frame));
+  return requestAnimationFrameIds;
+};
+exports.triggerInProgressVideoIntervals = triggerInProgressVideoIntervals;

package/lib/baseExports.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "ButtonLink", {
     return _componentsBase.ButtonLink;
   }
 });
+Object.defineProperty(exports, "CardGroup", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.CardGroup;
+  }
+});
 Object.defineProperty(exports, "Carousel", {
   enumerable: true,
   get: function () {

package/lib/utils/theming/with-client-theme.js

@@ -23,7 +23,7 @@ const withClientTheme = Component => {
     });
   };
   UdsStyledComponent.propTypes = {
-    tokens: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    tokens: (0, _componentsBase.getTokensPropType)(Component.displayName),
     variant: _propTypes.default.string
   };
   return UdsStyledComponent;

package/lib/utils/theming/with-server-theme.js

@@ -25,7 +25,7 @@ const withServerTheme = (Component, componentName) => {
     });
   };
   UdsStyledComponent.propTypes = {
-    tokens: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    tokens: (0, _server.getTokensPropType)(componentName),
     variant: _propTypes.default.string
   };
   return UdsStyledComponent;

package/lib-module/Badge/Badge.js

@@ -46,7 +46,7 @@ const fontSizeMapping = {
   14: 'small',
   16: 'h6'
 };
-const Badge = _ref6 => {
+const Badge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     tokens,
@@ -91,6 +91,7 @@ const Badge = _ref6 => {
     fontWeight: fontWeight,
     gradient: semanticGradient,
     border: `${borderWidth}px solid ${borderColor}`,
+    ref: ref,
     ...selectProps(rest),
     children: /*#__PURE__*/_jsx(Typography, {
       tokens: {
@@ -104,7 +105,8 @@ const Badge = _ref6 => {
       children: children
     })
   });
-};
+});
+Badge.displayName = 'Badge';
 Badge.propTypes = {
   ...selectedSystemPropTypes,
   children: PropTypes.node,

package/lib-module/BlockQuote/BlockQuote.js

@@ -49,7 +49,7 @@ const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
   } = _ref7;
   return `${marginBottom}px`;
 });
-const BlockQuote = _ref8 => {
+const BlockQuote = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
     children,
     link,
@@ -156,6 +156,7 @@ const BlockQuote = _ref8 => {
     paddingRight: paddingRight,
     width: width,
     backgroundGradient: backgroundGradient,
+    ref: ref,
     children: [renderQuote(), (additionalInfo || link) && /*#__PURE__*/_jsxs(StackView, {
       space: 0,
       children: [link && renderLink(), additionalInfo && /*#__PURE__*/_jsx(Typography, {
@@ -169,7 +170,8 @@ const BlockQuote = _ref8 => {
       })]
     })]
   });
-};
+});
+BlockQuote.displayName = 'BlockQuote';
 BlockQuote.propTypes = {
   ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,

package/lib-module/Breadcrumbs/Breadcrumbs.js

@@ -94,7 +94,7 @@ const getStructuredData = (items, baseUrl) => {
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = _ref2 => {
+const Breadcrumbs = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     baseUrl,
     children,
@@ -109,7 +109,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
@@ -122,12 +122,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);
@@ -150,6 +150,7 @@ const Breadcrumbs = _ref2 => {
   });
   return /*#__PURE__*/_jsxs("nav", {
     "aria-label": "Breadcrumb",
+    ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(StyledList, {
       iconContainerSize: themeTokens.iconContainerSize,
@@ -181,7 +182,8 @@ const Breadcrumbs = _ref2 => {
       })
     }), metadata]
   });
-};
+});
+Breadcrumbs.displayName = 'Breadcrumbs';
 Breadcrumbs.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Breadcrumbs'),

package/lib-module/Breadcrumbs/Item/Item.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
@@ -76,7 +76,7 @@ const IconContainer = /*#__PURE__*/styled.span.withConfig({
     return `${iconContainerSize + iconPadding * 2}px`;
   }
 });
-const Item = /*#__PURE__*/forwardRef((_ref9, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
   let {
     href,
     children,
@@ -173,13 +173,4 @@ Item.propTypes = {
     inverse: PropTypes.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
-  }
-};
 export default Item;

package/lib-module/Callout/Callout.js

@@ -54,7 +54,7 @@ const CalloutContainer = /*#__PURE__*/styled.div.withConfig({
     alignItems: verticalAlignToFlex(verticalAlign)
   };
 });
-const Callout = _ref2 => {
+const Callout = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     icon,
     children,
@@ -88,6 +88,7 @@ const Callout = _ref2 => {
     gap: gap,
     borderRadius: borderRadius,
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+    ref: ref,
     ...selectProps(rest),
     children: [icon && /*#__PURE__*/_jsx(Icon, {
       tokens: {
@@ -109,7 +110,8 @@ const Callout = _ref2 => {
       children: children
     })]
   });
-};
+});
+Callout.displayName = 'Callout';
 Callout.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Callout'),

package/lib-module/Card/Card.js

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Card as CardBase, getTokensPropType, paddingProp, responsiveProps, selectSystemProps, StackView, useThemeTokens, useThemeTokensCallback, variantProp, a11yProps, viewProps, PressableCardBase } from '@telus-uds/components-base';
 import CardContent from './CardContent';
@@ -39,7 +38,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * ## Accessibility
  * `Card` component accepts all the standard accessibility props.
  */
-const Card = /*#__PURE__*/forwardRef(function () {
+const Card = /*#__PURE__*/React.forwardRef(function () {
   let {
     children,
     footer,

package/lib-module/Card/CardContent.js

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

package/lib-module/Countdown/Countdown.js

@@ -1,5 +1,4 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Spacer, StackView, Typography, selectSystemProps, useViewport, useThemeTokens, applyTextStyles, getTokensPropType } from '@telus-uds/components-base';
 import { viewports } from '@telus-uds/system-constants';
@@ -70,7 +69,7 @@ const getMainTextTokens = _ref2 => {
     fontName: textTimerFontName
   };
 };
-const Countdown = /*#__PURE__*/forwardRef((_ref3, ref) => {
+const Countdown = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     copy = 'en',
     targetTime,

package/lib-module/Countdown/Segment.js

@@ -38,7 +38,7 @@ const Container = /*#__PURE__*/styled.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.forwardRef((_ref2, ref) => {
   let {
     copy = 'en',
     segmentFontSize,
@@ -62,6 +62,7 @@ const Segment = _ref2 => {
     segmentFontSize: segmentFontSize,
     segmentWidth: segmentWidth,
     variant: variant,
+    ref: ref,
     children: /*#__PURE__*/_jsxs(StackView, {
       direction: large || feature ? 'column' : 'row',
       space: large || feature ? 0 : 1,
@@ -77,7 +78,8 @@ const Segment = _ref2 => {
       })]
     })
   });
-};
+});
+Segment.displayName = 'Segment';
 Segment.propTypes = {
   /**
    * Copy language identifier or a dictionary instance.

package/lib-module/DatePicker/CalendarContainer.js

@@ -20,7 +20,7 @@ const CalendarContainer = /*#__PURE__*/styled.div.withConfig({
   return `
   ${defaultReactDatesCss}
   > div {
-    z-index: 3;
+    z-index: 1000;
   }
   .SingleDatePicker,
   .SingleDatePickerInput {
@@ -32,7 +32,7 @@ const CalendarContainer = /*#__PURE__*/styled.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%;