@telus-uds/components-web 2.32.0 → 2.32.2

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Tue, 12 Mar 2024 22:22:38 GMT and should not be manually modified.
+This log was last generated on Wed, 27 Mar 2024 21:09:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.32.2
+
+Wed, 27 Mar 2024 21:09:55 GMT
+
+### Patches
+
+- validation added to the datepicker input and input cleaned after the content is deleted (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/components-base to v1.81.0
+
+## 2.32.1
+
+Tue, 19 Mar 2024 18:39:50 GMT
+
+### Patches
+
+- `Autocomplete`: Overlay does not render next to `TextInput` (shahzaibkhalidmalik@outlook.com)
+- `NavigationBar`: overlay may render on top of toggle button in smaller viewports (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v1.80.1
+
 ## 2.32.0
 
-Tue, 12 Mar 2024 22:22:38 GMT
+Tue, 12 Mar 2024 22:26:51 GMT
 
 ### Minor changes
 

package/lib/Badge/Badge.js

@@ -11,7 +11,7 @@ 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 }; }
-const [, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 const BadgeContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Badge__BadgeContainer",
   componentId: "components-web__sc-tsiuo2-0"
@@ -48,6 +48,11 @@ const BadgeContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 	    ${gradient && '-webkit-text-fill-color: transparent;'}
     }`;
 });
+const fontSizeMapping = {
+  12: 'micro',
+  14: 'small',
+  16: 'h6'
+};
 const Badge = _ref6 => {
   let {
     children,
@@ -61,10 +66,14 @@ const Badge = _ref6 => {
     borderColor,
     borderRadius,
     borderWidth,
+    color,
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom
+    paddingBottom,
+    fontName,
+    fontWeight,
+    fontSize
   } = (0, _componentsBase.useThemeTokens)('Badge', tokens, variant);
   const semanticGradient = gradient && (0, _utils.transformGradient)(gradient);
   const {
@@ -85,12 +94,20 @@ const Badge = _ref6 => {
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     radius: `${borderRadius}px`,
     background: background,
+    fontName: fontName,
+    fontWeight: fontWeight,
     gradient: semanticGradient,
     border: `${borderWidth}px solid ${borderColor}`,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Badge, {
-      tokens: tokens,
-      variant: variant,
-      ...rest,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      tokens: {
+        fontName,
+        fontWeight,
+        color
+      },
+      variant: {
+        size: fontSizeMapping[fontSize]
+      },
       children: children
     })
   });

package/lib/DatePicker/DatePicker.js

@@ -17,7 +17,6 @@ var _lodash = require("lodash");
 var _CalendarContainer = _interopRequireDefault(require("./CalendarContainer"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _utils = require("../utils");
-var _WebPortal = _interopRequireDefault(require("../WebPortal"));
 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); }
@@ -73,6 +72,7 @@ const PortalPositionedContainer = /*#__PURE__*/_styledComponents.default.div.wit
     return `${top}px`;
   }
 });
+const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -194,14 +194,34 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     if (onDateChange) onDateChange(value);
   };
   const onChangeInput = value => {
-    if ((0, _moment.default)(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
-      setInputDate((0, _moment.default)(value, dateFormat));
-      if (onDateChange) onDateChange((0, _moment.default)(value, dateFormat));
-      setInputText((0, _moment.default)(value, dateFormatWithoutSpaces).format(dateFormat));
+    if (value === '' || (0, _moment.default)(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
+      if (value === '') {
+        setInputDate(undefined); // Set inputDate to undefined if input is empty
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(undefined);
+      } else {
+        setInputDate((0, _moment.default)(value, dateFormat));
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange((0, _moment.default)(value, dateFormat));
+      }
+      setInputText(value === '' ? '' : (0, _moment.default)(value, dateFormatWithoutSpaces).format(dateFormat));
     } else {
       setInputText(value);
     }
   };
+  const handleOnKeyPress = event => {
+    if (event.key === 'Backspace' && inputText === '') {
+      setInputDate(undefined);
+      onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(undefined);
+    }
+  };
+  const handleValidation = inputValidation => {
+    if (validDatePattern.test(inputText.replace(/\s+/g, '')) === false && inputText !== '') {
+      return 'error';
+    }
+    if (inputValidation === 'error' || inputValidation === 'success') {
+      return inputValidation;
+    }
+    return inputValidation;
+  };
   const viewport = (0, _componentsBase.useViewport)();
   const daySize = getResponsiveDaySize(inline, viewport);
   const circleSize = getResponsiveCircleSize(inline, viewport);
@@ -322,14 +342,15 @@ const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         hint: hint,
         placeholder: "DD / MM / YYYY",
         onChange: onChangeInput,
+        onKeyPress: handleOnKeyPress,
         tooltip: tooltip,
         hintPosition: hintPosition,
         label: label ?? ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription),
         value: inputText,
-        validation: validation,
+        validation: handleValidation(validation),
         inactive: disabled,
         ref: textInputRef,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_WebPortal.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PortalPositionedContainer, {
             top: datePickerPosition.top,
             left: datePickerPosition.left,

package/lib/NavigationBar/NavigationSubMenu.js

@@ -33,33 +33,38 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
   } = _ref;
   const focusTrapRef = (0, _react.useRef)();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
+  const defaultOffsets = {
+    offsets: {
+      vertical: 4
+    }
+  };
   const {
     align,
     offsets,
     minWidth
   } = (0, _componentsBase.useResponsiveProp)({
     xs: {
+      ...defaultOffsets,
       align: {
-        top: 'top',
+        top: 'bottom',
         left: 'left'
       },
       minWidth: maxWidth
     },
     sm: {
+      ...defaultOffsets,
       align: {
-        top: 'top',
+        top: 'bottom',
         right: 'right'
       },
       minWidth: maxWidth
     },
     lg: {
+      ...defaultOffsets,
       align: {
         top: 'bottom',
         center: 'center'
       },
-      offsets: {
-        vertical: 4
-      },
       minWidth: 192
     }
   });

package/lib/baseExports.js

@@ -177,6 +177,12 @@ Object.defineProperty(exports, "Pagination", {
     return _componentsBase.Pagination;
   }
 });
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Portal;
+  }
+});
 Object.defineProperty(exports, "QuickLinks", {
   enumerable: true,
   get: function () {
@@ -357,6 +363,12 @@ Object.defineProperty(exports, "ViewportProvider", {
     return _componentsBase.ViewportProvider;
   }
 });
+Object.defineProperty(exports, "WebPortal", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Portal;
+  }
+});
 Object.defineProperty(exports, "useCarousel", {
   enumerable: true,
   get: function () {

package/lib/index.js

@@ -42,8 +42,7 @@ var _exportNames = {
   TermsAndConditions: true,
   NavigationBar: true,
   Progress: true,
-  SkeletonProvider: true,
-  WebPortal: true
+  SkeletonProvider: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
@@ -255,12 +254,6 @@ Object.defineProperty(exports, "WaffleGrid", {
     return _WaffleGrid.default;
   }
 });
-Object.defineProperty(exports, "WebPortal", {
-  enumerable: true,
-  get: function () {
-    return _WebPortal.default;
-  }
-});
 Object.defineProperty(exports, "WebVideo", {
   enumerable: true,
   get: function () {
@@ -315,7 +308,6 @@ var _TermsAndConditions = _interopRequireDefault(require("./TermsAndConditions")
 var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
 var _Progress = _interopRequireDefault(require("./Progress"));
 var _SkeletonProvider = _interopRequireDefault(require("./SkeletonProvider"));
-var _WebPortal = _interopRequireDefault(require("./WebPortal"));
 var _baseExports = require("./baseExports");
 Object.keys(_baseExports).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib-module/Badge/Badge.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { selectSystemProps, getTokensPropType, useThemeTokens, Badge as BaseBadge } from '@telus-uds/components-base';
+import { selectSystemProps, Typography, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
 import { htmlAttrs, transformGradient } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-const [, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
 const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Badge__BadgeContainer",
   componentId: "components-web__sc-tsiuo2-0"
@@ -41,6 +41,11 @@ const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
 	    ${gradient && '-webkit-text-fill-color: transparent;'}
     }`;
 });
+const fontSizeMapping = {
+  12: 'micro',
+  14: 'small',
+  16: 'h6'
+};
 const Badge = _ref6 => {
   let {
     children,
@@ -54,10 +59,14 @@ const Badge = _ref6 => {
     borderColor,
     borderRadius,
     borderWidth,
+    color,
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom
+    paddingBottom,
+    fontName,
+    fontWeight,
+    fontSize
   } = useThemeTokens('Badge', tokens, variant);
   const semanticGradient = gradient && transformGradient(gradient);
   const {
@@ -78,12 +87,20 @@ const Badge = _ref6 => {
     padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
     radius: `${borderRadius}px`,
     background: background,
+    fontName: fontName,
+    fontWeight: fontWeight,
     gradient: semanticGradient,
     border: `${borderWidth}px solid ${borderColor}`,
-    children: /*#__PURE__*/_jsx(BaseBadge, {
-      tokens: tokens,
-      variant: variant,
-      ...rest,
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(Typography, {
+      tokens: {
+        fontName,
+        fontWeight,
+        color
+      },
+      variant: {
+        size: fontSizeMapping[fontSize]
+      },
       children: children
     })
   });

package/lib-module/DatePicker/DatePicker.js

@@ -5,13 +5,12 @@ import momentPropTypes from 'react-moment-proptypes';
 import 'react-dates/initialize';
 import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker';
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController';
-import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType, useSafeLayoutEffect } from '@telus-uds/components-base';
+import { IconButton, TextInput, Portal, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType, useSafeLayoutEffect } from '@telus-uds/components-base';
 import moment from 'moment';
 import { isUndefined, throttle } from 'lodash';
 import CalendarContainer from './CalendarContainer';
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
-import WebPortal from '../WebPortal';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -66,6 +65,7 @@ const PortalPositionedContainer = /*#__PURE__*/styled.div.withConfig({
     return `${top}px`;
   }
 });
+const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/;
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -187,14 +187,34 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
     if (onDateChange) onDateChange(value);
   };
   const onChangeInput = value => {
-    if (moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
-      setInputDate(moment(value, dateFormat));
-      if (onDateChange) onDateChange(moment(value, dateFormat));
-      setInputText(moment(value, dateFormatWithoutSpaces).format(dateFormat));
+    if (value === '' || moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
+      if (value === '') {
+        setInputDate(undefined); // Set inputDate to undefined if input is empty
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(undefined);
+      } else {
+        setInputDate(moment(value, dateFormat));
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(moment(value, dateFormat));
+      }
+      setInputText(value === '' ? '' : moment(value, dateFormatWithoutSpaces).format(dateFormat));
     } else {
       setInputText(value);
     }
   };
+  const handleOnKeyPress = event => {
+    if (event.key === 'Backspace' && inputText === '') {
+      setInputDate(undefined);
+      onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(undefined);
+    }
+  };
+  const handleValidation = inputValidation => {
+    if (validDatePattern.test(inputText.replace(/\s+/g, '')) === false && inputText !== '') {
+      return 'error';
+    }
+    if (inputValidation === 'error' || inputValidation === 'success') {
+      return inputValidation;
+    }
+    return inputValidation;
+  };
   const viewport = useViewport();
   const daySize = getResponsiveDaySize(inline, viewport);
   const circleSize = getResponsiveCircleSize(inline, viewport);
@@ -315,14 +335,15 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
         hint: hint,
         placeholder: "DD / MM / YYYY",
         onChange: onChangeInput,
+        onKeyPress: handleOnKeyPress,
         tooltip: tooltip,
         hintPosition: hintPosition,
         label: label ?? ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription),
         value: inputText,
-        validation: validation,
+        validation: handleValidation(validation),
         inactive: disabled,
         ref: textInputRef,
-        children: /*#__PURE__*/_jsx(WebPortal, {
+        children: /*#__PURE__*/_jsx(Portal, {
           children: /*#__PURE__*/_jsx(PortalPositionedContainer, {
             top: datePickerPosition.top,
             left: datePickerPosition.left,

package/lib-module/NavigationBar/NavigationSubMenu.js

@@ -28,33 +28,38 @@ const NavigationSubMenu = _ref => {
   } = _ref;
   const focusTrapRef = useRef();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
+  const defaultOffsets = {
+    offsets: {
+      vertical: 4
+    }
+  };
   const {
     align,
     offsets,
     minWidth
   } = useResponsiveProp({
     xs: {
+      ...defaultOffsets,
       align: {
-        top: 'top',
+        top: 'bottom',
         left: 'left'
       },
       minWidth: maxWidth
     },
     sm: {
+      ...defaultOffsets,
       align: {
-        top: 'top',
+        top: 'bottom',
         right: 'right'
       },
       minWidth: maxWidth
     },
     lg: {
+      ...defaultOffsets,
       align: {
         top: 'bottom',
         center: 'center'
       },
-      offsets: {
-        vertical: 4
-      },
       minWidth: 192
     }
   });

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, Portal, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.
@@ -13,4 +13,7 @@ A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoPr
 // Enable access to the viewports system for app-specific responsive layouts and features
 useResponsiveProp, useViewport,
 // TODO reenable ViewportContext once published from base  // enable localised viewport overrides e.g. in tests, narrow columns, etc
-useCarousel, useSetTheme } from '@telus-uds/components-base';
+useCarousel, useSetTheme } from '@telus-uds/components-base';
+
+// TODO: Added `WebPortal` alias for backwards compatibility with `Portal` from `@telus-uds/components-base`. Remove in next major version.
+export { Portal as WebPortal } from '@telus-uds/components-base';

package/lib-module/index.js

@@ -36,6 +36,5 @@ export { default as TermsAndConditions } from './TermsAndConditions';
 export { default as NavigationBar } from './NavigationBar';
 export { default as Progress } from './Progress';
 export { default as SkeletonProvider } from './SkeletonProvider';
-export { default as WebPortal } from './WebPortal';
 export { ssrStyles } from './utils';
 export * from './baseExports';

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.80.0",
+    "@telus-uds/components-base": "1.81.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.32.0"
+  "version": "2.32.2"
 }

package/src/Badge/Badge.jsx

@@ -3,13 +3,13 @@ import styled from 'styled-components'
 import PropTypes from 'prop-types'
 import {
   selectSystemProps,
+  Typography,
   getTokensPropType,
-  useThemeTokens,
-  Badge as BaseBadge
+  useThemeTokens
 } from '@telus-uds/components-base'
 import { htmlAttrs, transformGradient } from '../utils'
 
-const [, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
 const BadgeContainer = styled.div`
   background: ${({ background }) => background};
@@ -29,6 +29,12 @@ const BadgeContainer = styled.div`
     }`}
 `
 
+const fontSizeMapping = {
+  12: 'micro',
+  14: 'small',
+  16: 'h6'
+}
+
 const Badge = ({ children, tokens, variant = {}, ...rest }) => {
   const {
     backgroundColor,
@@ -36,10 +42,14 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
     borderColor,
     borderRadius,
     borderWidth,
+    color,
     paddingLeft,
     paddingRight,
     paddingTop,
-    paddingBottom
+    paddingBottom,
+    fontName,
+    fontWeight,
+    fontSize
   } = useThemeTokens('Badge', tokens, variant)
 
   const semanticGradient = gradient && transformGradient(gradient)
@@ -60,12 +70,18 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
       padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
       radius={`${borderRadius}px`}
       background={background}
+      fontName={fontName}
+      fontWeight={fontWeight}
       gradient={semanticGradient}
       border={`${borderWidth}px solid ${borderColor}`}
+      {...selectProps(rest)}
     >
-      <BaseBadge tokens={tokens} variant={variant} {...rest}>
+      <Typography
+        tokens={{ fontName, fontWeight, color }}
+        variant={{ size: fontSizeMapping[fontSize] }}
+      >
         {children}
-      </BaseBadge>
+      </Typography>
     </BadgeContainer>
   )
 }

package/src/DatePicker/DatePicker.jsx

@@ -8,6 +8,7 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS
 import {
   IconButton,
   TextInput,
+  Portal,
   selectSystemProps,
   useCopy,
   useViewport,
@@ -21,7 +22,6 @@ import { isUndefined, throttle } from 'lodash'
 import CalendarContainer from './CalendarContainer'
 import dictionary from './dictionary'
 import { htmlAttrs } from '../utils'
-import WebPortal from '../WebPortal'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 const dateFormat = 'DD / MM / YYYY'
@@ -56,6 +56,8 @@ const PortalPositionedContainer = styled.div({
   top: ({ top }) => `${top}px`
 })
 
+const validDatePattern = /^([0-2][0-9]|3[0-1])(\/)(0[1-9]|1[0-2])\2(\d{4})$/
+
 /**
  * Use DatePicker to select a date on a calendar.
  *
@@ -168,14 +170,42 @@ const DatePicker = forwardRef(
       if (onDateChange) onDateChange(value)
     }
     const onChangeInput = (value) => {
-      if (moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
-        setInputDate(moment(value, dateFormat))
-        if (onDateChange) onDateChange(moment(value, dateFormat))
-        setInputText(moment(value, dateFormatWithoutSpaces).format(dateFormat))
+      if (
+        value === '' ||
+        moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()
+      ) {
+        if (value === '') {
+          setInputDate(undefined) // Set inputDate to undefined if input is empty
+          onDateChange?.(undefined)
+        } else {
+          setInputDate(moment(value, dateFormat))
+          onDateChange?.(moment(value, dateFormat))
+        }
+        setInputText(value === '' ? '' : moment(value, dateFormatWithoutSpaces).format(dateFormat))
       } else {
         setInputText(value)
       }
     }
+
+    const handleOnKeyPress = (event) => {
+      if (event.key === 'Backspace' && inputText === '') {
+        setInputDate(undefined)
+        onDateChange?.(undefined)
+      }
+    }
+
+    const handleValidation = (inputValidation) => {
+      if (validDatePattern.test(inputText.replace(/\s+/g, '')) === false && inputText !== '') {
+        return 'error'
+      }
+
+      if (inputValidation === 'error' || inputValidation === 'success') {
+        return inputValidation
+      }
+
+      return inputValidation
+    }
+
     const viewport = useViewport()
     const daySize = getResponsiveDaySize(inline, viewport)
     const circleSize = getResponsiveCircleSize(inline, viewport)
@@ -286,15 +316,16 @@ const DatePicker = forwardRef(
               hint={hint}
               placeholder="DD / MM / YYYY"
               onChange={onChangeInput}
+              onKeyPress={handleOnKeyPress}
               tooltip={tooltip}
               hintPosition={hintPosition}
               label={label ?? dictionary[copy]?.roleDescription}
               value={inputText}
-              validation={validation}
+              validation={handleValidation(validation)}
               inactive={disabled}
               ref={textInputRef}
             >
-              <WebPortal>
+              <Portal>
                 {/* Because `SingleDatePicker` is an absolutely positioned element,
                  * putting it in a `Portal` breaks view heirarchy because it doesn't
                  * align with `TextInput`, but rather position itself with the nearest
@@ -359,7 +390,7 @@ const DatePicker = forwardRef(
                     />
                   </CalendarContainer>
                 </PortalPositionedContainer>
-              </WebPortal>
+              </Portal>
             </TextInput>
           </DateInputWrapper>
         )}

package/src/NavigationBar/NavigationSubMenu.jsx

@@ -25,12 +25,13 @@ const NavigationSubMenu = ({
   const focusTrapRef = useRef()
 
   const maxWidth = 289 // Slightly over 288 of nav item to account for subpixel rounding
+  const defaultOffsets = { offsets: { vertical: 4 } }
   const { align, offsets, minWidth } = useResponsiveProp({
-    xs: { align: { top: 'top', left: 'left' }, minWidth: maxWidth },
-    sm: { align: { top: 'top', right: 'right' }, minWidth: maxWidth },
+    xs: { ...defaultOffsets, align: { top: 'bottom', left: 'left' }, minWidth: maxWidth },
+    sm: { ...defaultOffsets, align: { top: 'bottom', right: 'right' }, minWidth: maxWidth },
     lg: {
+      ...defaultOffsets,
       align: { top: 'bottom', center: 'center' },
-      offsets: { vertical: 4 },
       minWidth: 192
     }
   })

package/src/baseExports.js

@@ -36,6 +36,7 @@ export {
   MultiSelectFilter,
   Notification,
   Pagination,
+  Portal,
   QuickLinks,
   QuickLinksFeature,
   Radio,
@@ -74,3 +75,6 @@ export {
   useCarousel,
   useSetTheme
 } from '@telus-uds/components-base'
+
+// TODO: Added `WebPortal` alias for backwards compatibility with `Portal` from `@telus-uds/components-base`. Remove in next major version.
+export { Portal as WebPortal } from '@telus-uds/components-base'

package/src/index.js

@@ -36,7 +36,6 @@ export { default as TermsAndConditions } from './TermsAndConditions'
 export { default as NavigationBar } from './NavigationBar'
 export { default as Progress } from './Progress'
 export { default as SkeletonProvider } from './SkeletonProvider'
-export { default as WebPortal } from './WebPortal'
 
 export { ssrStyles } from './utils'
 

package/lib/WebPortal/WebPortal.js

@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * WebPortal component renders its children in a separate portal container appended to the document body.
- *
- * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
- * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
- * to `WebPortal` to solve such issues
- *
- * https://github.com/gorhom/react-native-portal/issues/34
- * https://github.com/gorhom/react-native-portal/issues/2
- * https://github.com/gorhom/react-native-portal/issues/3
- * https://github.com/gorhom/react-native-portal/issues/31
- *
- * @component
- * @param {object} props - The component props.
- * @param {React.ReactNode} props.children - The content to render within the portal.
- * @returns {React.ReactPortal} The React portal component.
- */
-
-const WebPortal = _ref => {
-  let {
-    children
-  } = _ref;
-  const [portalContainer, setPortalContainer] = (0, _react.useState)(null);
-  (0, _react.useEffect)(() => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    setPortalContainer(container);
-    return () => {
-      if (container && container.parentNode) {
-        container.parentNode.removeChild(container);
-      }
-    };
-  }, []);
-  if (!portalContainer) return null;
-  return /*#__PURE__*/_reactDom.default.createPortal(children, portalContainer);
-};
-WebPortal.propTypes = {
-  children: _propTypes.default.node.isRequired
-};
-var _default = WebPortal;
-exports.default = _default;

package/lib/WebPortal/index.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _WebPortal = _interopRequireDefault(require("./WebPortal"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _WebPortal.default;
-exports.default = _default;

package/lib-module/WebPortal/WebPortal.js

@@ -1,44 +0,0 @@
-import { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-/**
- * WebPortal component renders its children in a separate portal container appended to the document body.
- *
- * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
- * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
- * to `WebPortal` to solve such issues
- *
- * https://github.com/gorhom/react-native-portal/issues/34
- * https://github.com/gorhom/react-native-portal/issues/2
- * https://github.com/gorhom/react-native-portal/issues/3
- * https://github.com/gorhom/react-native-portal/issues/31
- *
- * @component
- * @param {object} props - The component props.
- * @param {React.ReactNode} props.children - The content to render within the portal.
- * @returns {React.ReactPortal} The React portal component.
- */
-
-const WebPortal = _ref => {
-  let {
-    children
-  } = _ref;
-  const [portalContainer, setPortalContainer] = useState(null);
-  useEffect(() => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-    setPortalContainer(container);
-    return () => {
-      if (container && container.parentNode) {
-        container.parentNode.removeChild(container);
-      }
-    };
-  }, []);
-  if (!portalContainer) return null;
-  return /*#__PURE__*/ReactDOM.createPortal(children, portalContainer);
-};
-WebPortal.propTypes = {
-  children: PropTypes.node.isRequired
-};
-export default WebPortal;

package/lib-module/WebPortal/index.js

@@ -1,2 +0,0 @@
-import WebPortal from './WebPortal';
-export default WebPortal;

package/src/WebPortal/WebPortal.jsx

@@ -1,47 +0,0 @@
-import { useState, useEffect } from 'react'
-import ReactDOM from 'react-dom'
-import PropTypes from 'prop-types'
-
-/**
- * WebPortal component renders its children in a separate portal container appended to the document body.
- *
- * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
- * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
- * to `WebPortal` to solve such issues
- *
- * https://github.com/gorhom/react-native-portal/issues/34
- * https://github.com/gorhom/react-native-portal/issues/2
- * https://github.com/gorhom/react-native-portal/issues/3
- * https://github.com/gorhom/react-native-portal/issues/31
- *
- * @component
- * @param {object} props - The component props.
- * @param {React.ReactNode} props.children - The content to render within the portal.
- * @returns {React.ReactPortal} The React portal component.
- */
-
-const WebPortal = ({ children }) => {
-  const [portalContainer, setPortalContainer] = useState(null)
-
-  useEffect(() => {
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    setPortalContainer(container)
-
-    return () => {
-      if (container && container.parentNode) {
-        container.parentNode.removeChild(container)
-      }
-    }
-  }, [])
-
-  if (!portalContainer) return null
-
-  return ReactDOM.createPortal(children, portalContainer)
-}
-
-WebPortal.propTypes = {
-  children: PropTypes.node.isRequired
-}
-
-export default WebPortal

package/src/WebPortal/index.js

@@ -1,3 +0,0 @@
-import WebPortal from './WebPortal'
-
-export default WebPortal