@telus-uds/components-web 2.32.1 → 2.33.0

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Tue, 19 Mar 2024 18:37:02 GMT and should not be manually modified.
+This log was last generated on Fri, 05 Apr 2024 17:10:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.33.0
+
+Fri, 05 Apr 2024 17:10:34 GMT
+
+### Minor changes
+
+- Bump @telus-uds/components-base to v1.82.0
+- Bump @telus-uds/system-theme-tokens to v2.54.0
+
+### Patches
+
+- `Breadcrumbs`: fix text wrapping error (guillermo.peitzner@telus.com)
+
+## 2.32.2
+
+Wed, 27 Mar 2024 21:13:10 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:37:02 GMT
+Tue, 19 Mar 2024 18:39:50 GMT
 
 ### Patches
 

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/Breadcrumbs/Breadcrumbs.js

@@ -27,15 +27,9 @@ const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
   listStylePosition: 'inside',
   margin: 0,
   padding: 0,
-  alignItems: 'baseline',
-  height: _ref => {
-    let {
-      iconContainerSize
-    } = _ref;
-    return `${iconContainerSize}px`;
-  }
+  alignItems: 'baseline'
 });
-const omitProps = _ref2 => {
+const omitProps = _ref => {
   let {
     current,
     path,
@@ -44,7 +38,7 @@ const omitProps = _ref2 => {
     childRoutes,
     component,
     ...props
-  } = _ref2;
+  } = _ref;
   return props;
 };
 const getBreadcrumbName = (item, params) => {
@@ -107,7 +101,7 @@ const getStructuredData = (items, baseUrl) => {
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = _ref3 => {
+const Breadcrumbs = _ref2 => {
   let {
     baseUrl,
     children,
@@ -118,7 +112,7 @@ const Breadcrumbs = _ref3 => {
     variant,
     LinkRouter,
     ...rest
-  } = _ref3;
+  } = _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 {
@@ -128,7 +122,7 @@ const Breadcrumbs = _ref3 => {
   // const isSSR = typeof window === 'undefined' || isHydrating
   // const hasMetadata = isSSR ? enableHelmetSSR : true
   const helmetContext = {};
-  const activeRoutes = children ? _react.default.Children.map((0, _componentsBase.unpackFragment)(children), _ref4 => {
+  const activeRoutes = children ? _react.default.Children.map((0, _componentsBase.unpackFragment)(children), _ref3 => {
     let {
       props: {
         href,
@@ -136,7 +130,7 @@ const Breadcrumbs = _ref3 => {
         ...itemRest
       },
       ref
-    } = _ref4;
+    } = _ref3;
     return {
       path: href,
       breadcrumbName,
@@ -166,7 +160,7 @@ const Breadcrumbs = _ref3 => {
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
       iconContainerSize: themeTokens.iconContainerSize,
-      children: items.map(_ref5 => {
+      children: items.map(_ref4 => {
         let {
           href,
           current,
@@ -174,7 +168,7 @@ const Breadcrumbs = _ref3 => {
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
-        } = _ref5;
+        } = _ref4;
         return /*#__PURE__*/(0, _react.createElement)(_Item.default, {
           ...itemRest,
           current: current,

package/lib/Breadcrumbs/Item/Item.js

@@ -37,7 +37,8 @@ const StyledItemContainer = /*#__PURE__*/_styledComponents.default.li.withConfig
       iconContainerSize
     } = _ref3;
     return `${iconContainerSize}px`;
-  }
+  },
+  marginBottom: '8px'
 });
 const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
   displayName: "Item__IconContainer",

package/lib/DatePicker/DatePicker.js

@@ -72,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.
@@ -193,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);
@@ -321,11 +342,12 @@ 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)(_componentsBase.Portal, {

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/Breadcrumbs/Breadcrumbs.js

@@ -20,15 +20,9 @@ const StyledList = /*#__PURE__*/styled.ol.withConfig({
   listStylePosition: 'inside',
   margin: 0,
   padding: 0,
-  alignItems: 'baseline',
-  height: _ref => {
-    let {
-      iconContainerSize
-    } = _ref;
-    return `${iconContainerSize}px`;
-  }
+  alignItems: 'baseline'
 });
-const omitProps = _ref2 => {
+const omitProps = _ref => {
   let {
     current,
     path,
@@ -37,7 +31,7 @@ const omitProps = _ref2 => {
     childRoutes,
     component,
     ...props
-  } = _ref2;
+  } = _ref;
   return props;
 };
 const getBreadcrumbName = (item, params) => {
@@ -100,7 +94,7 @@ const getStructuredData = (items, baseUrl) => {
 /**
  * Display a hierarchy of links, commonly used for navigation.
  */
-const Breadcrumbs = _ref3 => {
+const Breadcrumbs = _ref2 => {
   let {
     baseUrl,
     children,
@@ -111,7 +105,7 @@ const Breadcrumbs = _ref3 => {
     variant,
     LinkRouter,
     ...rest
-  } = _ref3;
+  } = _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 {
@@ -121,7 +115,7 @@ const Breadcrumbs = _ref3 => {
   // const isSSR = typeof window === 'undefined' || isHydrating
   // const hasMetadata = isSSR ? enableHelmetSSR : true
   const helmetContext = {};
-  const activeRoutes = children ? React.Children.map(unpackFragment(children), _ref4 => {
+  const activeRoutes = children ? React.Children.map(unpackFragment(children), _ref3 => {
     let {
       props: {
         href,
@@ -129,7 +123,7 @@ const Breadcrumbs = _ref3 => {
         ...itemRest
       },
       ref
-    } = _ref4;
+    } = _ref3;
     return {
       path: href,
       breadcrumbName,
@@ -159,7 +153,7 @@ const Breadcrumbs = _ref3 => {
     ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(StyledList, {
       iconContainerSize: themeTokens.iconContainerSize,
-      children: items.map(_ref5 => {
+      children: items.map(_ref4 => {
         let {
           href,
           current,
@@ -167,7 +161,7 @@ const Breadcrumbs = _ref3 => {
           LinkRouter: ItemLinkRouter = LinkRouter,
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
-        } = _ref5;
+        } = _ref4;
         return /*#__PURE__*/_createElement(Item, {
           ...itemRest,
           current: current,

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

@@ -30,7 +30,8 @@ const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
       iconContainerSize
     } = _ref3;
     return `${iconContainerSize}px`;
-  }
+  },
+  marginBottom: '8px'
 });
 const IconContainer = /*#__PURE__*/styled.span.withConfig({
   displayName: "Item__IconContainer",

package/lib-module/DatePicker/DatePicker.js

@@ -65,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.
@@ -186,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);
@@ -314,11 +335,12 @@ 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(Portal, {

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.80.1",
+    "@telus-uds/components-base": "1.82.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
@@ -13,7 +13,7 @@
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.53.0",
+    "@telus-uds/system-theme-tokens": "^2.54.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -83,5 +83,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.32.1"
+  "version": "2.33.0"
 }

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/Breadcrumbs/Breadcrumbs.jsx

@@ -25,8 +25,7 @@ const StyledList = styled.ol({
   listStylePosition: 'inside',
   margin: 0,
   padding: 0,
-  alignItems: 'baseline',
-  height: ({ iconContainerSize }) => `${iconContainerSize}px`
+  alignItems: 'baseline'
 })
 
 const omitProps = ({

package/src/Breadcrumbs/Item/Item.jsx

@@ -17,7 +17,8 @@ const StyledItemContainer = styled.li({
   display: 'flex',
   paddingLeft: ({ listItemPadding }) => `${listItemPadding}px`,
   lineHeight: ({ lineHeight, fontSize }) => `${Math.ceil(lineHeight * fontSize)}px`,
-  height: ({ iconContainerSize }) => `${iconContainerSize}px`
+  height: ({ iconContainerSize }) => `${iconContainerSize}px`,
+  marginBottom: '8px'
 })
 
 const IconContainer = styled.span({

package/src/DatePicker/DatePicker.jsx

@@ -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,11 +316,12 @@ 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}
             >