@innovaccer/design-system 2.13.0-0 → 2.13.1

package/CHANGELOG.md

@@ -1,4 +1,76 @@
 
+## 2.13.1  (2022-06-24)
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+NA
+
+### Fixes
+*  fix(daterangepicker): fix error state on blur event (fcc00594)
+*  fix(daterangepicker): fix dateRangePicker input freeze (c98352c0)
+*  fix(popover): fix boundary element story (ca351ed5)
+*  fix(metricInput): fix default metric input story (0eb7e111)
+
+### Improvements
+NA
+
+### Documentation
+*  fix(docs): update distribution id for docs-dev (6e21010d)
+*  fix(docs): update distribution id for docs-dev (6c23c6ed)
+*  feat(docs): add component images (3f9e1fc4)
+*  feat(docs): add helptext component (4601c1e0)
+
+-------------------
+## 2.13.0  (2022-06-21)
+
+### Highlights
+NA
+
+### Breaking changes
+NA
+
+### Migration guide
+NA
+
+### Deprecations
+NA
+
+### Features
+NA
+
+### Fixes
+*  fix(timepicker): fix placeholder value getting disappear (1ac69560)
+*  fix(modal): fix modal closing animation (d0236cfe)
+*  fix(popover): fix popover animation flickering issue (3c01529b)
+*  fix(inputMask): fix cursor position on input mask (cbd7f31a)
+*  fix(grid): fix grid loading state (aa3672bb)
+*  fix(grid): fix loading state in grid (0a8719d5)
+*  fix(datepicker): reset to default on blur state (d5565fd2)
+*  fix(docs): remove checkbox from mobile nav (3d4aa0f1)
+*  fix(datePicker): fix event handlers for datepicker (f79e3c29)
+*  fix(docs): fix links on mobile overview page (17e621ba)
+*  fix(docs): add missing images (17483411)
+
+### Improvements
+NA
+
+### Documentation
+*  docs(docs): add checkbox in mobile (929861d6)
+*  docs(docs): add help text in web components (c5e9fd8a)
+
+-------------------
+
 ## 2.13.0-0  (2022-06-20)
 
 ### Highlights

package/core/components/atoms/metricInput/__stories__/DefaultMetric.story.jsx

@@ -30,7 +30,7 @@ const customCode = `() => {
 
   return (
     <div className="d-flex align-items-center">
-      <Label htmlFor="metric-input" className="mr-5">
+      <Label htmlFor="metric-input" className="mr-5">  No. of Days </Label>
       <div style={{ width: 'var(--spacing-6)' }}>
         <MetricInput
           id="metric-input"

package/core/components/molecules/inputMask/InputMask.tsx

@@ -79,6 +79,7 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
     onFocus,
     onClear,
     className,
+    id,
     ...rest
   } = props;
 
@@ -125,6 +126,10 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
 
   React.useImperativeHandle(forwardRef, () => ref.current as HTMLInputElement);
 
+  React.useEffect(() => {
+    setValue(valueProp || '');
+  }, [valueProp]);
+
   React.useEffect(() => {
     setCursorPosition(newSelectionPos.current);
   }, [value]);
@@ -213,7 +218,7 @@ const InputMask = React.forwardRef<HTMLInputElement, InputMaskProps>((props, for
       enteredVal = inputVal.slice(start, end);
       updatedVal = insertAtIndex(enteredVal, start);
       let oldValue = value;
-      if (oldValue.length === 0) {
+      if (oldValue.length === 0 && id === 'parent-TimePicker') {
         oldValue = defaultPlaceholderValue;
       }
       insertedStringLength = updatedVal.length;

package/core/components/molecules/popover/__stories__/variants/boundaryElement.story.jsx

@@ -38,8 +38,8 @@ export const boundaryElement = () => {
   const ref = React.useRef<HTMLDivElement>(null);
 
   return (
-    <div ref={ref} style={{ height: 150, border: '1px dashed', padding: 20, overflow: 'auto' }}>
-      <Popover {...options} boundaryElement={ref}>
+    <div ref={ref.current} style={{ height: 150, border: '1px dashed', padding: 20, overflow: 'auto' }}>
+      <Popover {...options} boundaryElement={ref.current}>
         <div style={{ width: 100 }} className="mx-6 my-6">
           <Text>Popup</Text>
           <Button className="mt-4" appearance="primary" onClick={action('button clicked inside popover')}>

package/core/components/organisms/datePicker/__tests__/DatePicker.test.tsx

@@ -133,7 +133,7 @@ describe('renders DatePicker component Event Handlers ', () => {
     const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} />);
     const input = getByTestId('DesignSystem-Input');
     fireEvent.blur(input);
-    expect(input).toHaveValue('');
+    expect(input).toHaveValue('__/__/____');
   });
   it('checks onFocus Event', () => {
     const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} />);

package/core/components/organisms/dateRangePicker/SingleInputTrigger.tsx

@@ -76,6 +76,20 @@ export const SingleInputTrigger = (props: TriggerProps) => {
     });
   };
 
+  const getErrorState = (currentVal: string, siblingVal: string) => {
+    const hasNumber = /\d/;
+
+    if (currentVal && siblingVal && !currentVal.includes(placeholderChar) && siblingVal.includes(placeholderChar)) {
+      return true;
+    } else if (currentVal && hasNumber.test(currentVal) && currentVal.includes(placeholderChar)) {
+      return true;
+    } else if ((currentVal && !hasNumber.test(currentVal)) || !currentVal) {
+      return false;
+    }
+
+    return null;
+  };
+
   const onBlurHandler = (_e: React.ChangeEvent<HTMLInputElement>, val: string) => {
     setState({
       init: true,
@@ -85,6 +99,13 @@ export const SingleInputTrigger = (props: TriggerProps) => {
     const startVal = date[0];
     const endVal = date[1];
 
+    const startErr = getErrorState(startVal, endVal);
+    const endErr = getErrorState(endVal, startVal);
+
+    if (startErr !== null && endErr !== null) {
+      setState({ startError: startErr, endError: endErr });
+    }
+
     if (!startVal || startVal.includes(placeholderChar)) setState({ startDate: undefined });
     if (!endVal || endVal.includes(placeholderChar)) setState({ endDate: undefined });
   };
@@ -123,7 +144,7 @@ export const SingleInputTrigger = (props: TriggerProps) => {
           error={showError}
           caption={showError ? errorMessage : ''}
           validators={[inputValidator]}
-          clearOnEmptyBlur={false}
+          clearOnEmptyBlur={true}
         />
       </Column>
     </Row>

package/core/components/organisms/dateRangePicker/Trigger.tsx

@@ -66,12 +66,29 @@ export const Trigger = (props: TriggerProps) => {
     setState({
       init: true,
     });
+    const hasNumber = /\d/;
+
     if (type === 'start') {
       const { placeholderChar = '_' } = startInputOptions;
+
+      if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
+        setState({ startError: true });
+      } else if ((val && !hasNumber.test(val)) || !val) {
+        setState({ startError: false });
+      }
+
       if (!val || val.includes(placeholderChar)) setState({ startDate: undefined });
     }
+
     if (type === 'end') {
       const { placeholderChar = '_' } = endInputOptions;
+
+      if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
+        setState({ endError: true });
+      } else if ((val && !hasNumber.test(val)) || !val) {
+        setState({ endError: false });
+      }
+
       if (!val || val.includes(placeholderChar)) setState({ endDate: undefined });
     }
   };
@@ -145,7 +162,7 @@ export const Trigger = (props: TriggerProps) => {
           error={showStartError}
           caption={showStartError ? startErrorMessage : ''}
           validators={[inputValidator]}
-          clearOnEmptyBlur={false}
+          clearOnEmptyBlur={true}
         />
       </Column>
       <Column size={'6'} sizeXS={'12'} className="DateRangePicker-input DateRangePicker-input--endDate">
@@ -177,7 +194,7 @@ export const Trigger = (props: TriggerProps) => {
           error={showEndError}
           caption={showEndError ? endErrorMessage : ''}
           validators={[inputValidator]}
-          clearOnEmptyBlur={false}
+          clearOnEmptyBlur={true}
         />
       </Column>
     </Row>

package/core/components/organisms/timePicker/TimePicker.tsx

@@ -108,6 +108,7 @@ export const TimePicker = (props: TimePickerProps) => {
       onChange={onChangeHandler}
       onClear={onClearHandler}
       onBlur={onBlurHandler}
+      id="parent-TimePicker"
     />
   );
 };

package/core/utils/masks.ts

@@ -3,7 +3,7 @@ import { DatePickerProps, InputMaskProps } from '@/index.type';
 
 type DateFormat = DatePickerProps['inputFormat'];
 export const date: Record<DateFormat, Mask> = {
-  'dd/mm/yyyy': [/[0123]/, /\d/, '/', /\[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
+  'dd/mm/yyyy': [/[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
   'mm/dd/yyyy': [/[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
   'yyyy/mm/dd': [/\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/],
   'dd-mm-yyyy': [/[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
@@ -16,7 +16,7 @@ export const rangeDate: Record<DateFormat, Mask> = {
     /[0123]/,
     /\d/,
     '/',
-    /\[01]/,
+    /[01]/,
     /\d/,
     '/',
     /\d/,
@@ -29,7 +29,7 @@ export const rangeDate: Record<DateFormat, Mask> = {
     /[0123]/,
     /\d/,
     '/',
-    /\[01]/,
+    /[01]/,
     /\d/,
     '/',
     /\d/,

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1655715450312 
+   * Generated on: 1656070414104 
    *      Package: @innovaccer/design-system
-   *      Version: v2.13.0-0
+   *      Version: v2.13.1
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -667,7 +667,7 @@ var validators = /*#__PURE__*/Object.freeze({
 var _time;
 
 var date = {
-  'dd/mm/yyyy': [/[0123]/, /\d/, '/', /\[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
+  'dd/mm/yyyy': [/[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
   'mm/dd/yyyy': [/[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
   'yyyy/mm/dd': [/\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/],
   'dd-mm-yyyy': [/[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
@@ -675,7 +675,7 @@ var date = {
   'yyyy-mm-dd': [/\d/, /\d/, /\d/, /\d/, '-', /[01]/, /\d/, '-', /[0123]/, /\d/]
 };
 var rangeDate = {
-  'dd/mm/yyyy': [/[0123]/, /\d/, '/', /\[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[0123]/, /\d/, '/', /\[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
+  'dd/mm/yyyy': [/[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
   'mm/dd/yyyy': [/[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
   'yyyy/mm/dd': [/\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/, ' ', '-', ' ', /\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/],
   'dd-mm-yyyy': [/[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
@@ -5204,7 +5204,8 @@ var TimePicker = function TimePicker(props) {
     validators: inputValidator,
     onChange: onChangeHandler,
     onClear: onClearHandler,
-    onBlur: onBlurHandler
+    onBlur: onBlurHandler,
+    id: "parent-TimePicker"
   }));
 };
 TimePicker.defaultProps = {
@@ -5587,7 +5588,7 @@ var getDefaultValue = function getDefaultValue(mask, placeholderChar) {
   return val;
 };
 
-var _excluded$m = ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onBlur", "onFocus", "onClear", "className"];
+var _excluded$m = ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onBlur", "onFocus", "onClear", "className", "id"];
 
 /**
  * It works as Uncontrolled Input
@@ -5613,6 +5614,7 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
       onFocus = props.onFocus,
       onClear = props.onClear,
       className = props.className,
+      id = props.id,
       rest = _objectWithoutProperties(props, _excluded$m);
 
   var isEditable = React.useCallback(function (pos) {
@@ -5668,6 +5670,9 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
   React.useImperativeHandle(forwardRef, function () {
     return ref.current;
   });
+  React.useEffect(function () {
+    setValue(valueProp || '');
+  }, [valueProp]);
   React.useEffect(function () {
     setCursorPosition(newSelectionPos.current);
   }, [value]);
@@ -5749,7 +5754,7 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
     updatedVal = insertAtIndex(enteredVal, start);
     var oldValue = value;
 
-    if (oldValue.length === 0) {
+    if (oldValue.length === 0 && id === 'parent-TimePicker') {
       oldValue = defaultPlaceholderValue;
     }
 
@@ -15183,10 +15188,22 @@ var Trigger = function Trigger(props) {
     setState({
       init: true
     });
+    var hasNumber = /\d/;
 
     if (type === 'start') {
       var _startInputOptions$pl = startInputOptions.placeholderChar,
           placeholderChar = _startInputOptions$pl === void 0 ? '_' : _startInputOptions$pl;
+
+      if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
+        setState({
+          startError: true
+        });
+      } else if (val && !hasNumber.test(val) || !val) {
+        setState({
+          startError: false
+        });
+      }
+
       if (!val || val.includes(placeholderChar)) setState({
         startDate: undefined
       });
@@ -15196,6 +15213,16 @@ var Trigger = function Trigger(props) {
       var _endInputOptions$plac = endInputOptions.placeholderChar,
           _placeholderChar2 = _endInputOptions$plac === void 0 ? '_' : _endInputOptions$plac;
 
+      if (val && hasNumber.test(val) && val.includes(_placeholderChar2)) {
+        setState({
+          endError: true
+        });
+      } else if (val && !hasNumber.test(val) || !val) {
+        setState({
+          endError: false
+        });
+      }
+
       if (!val || val.includes(_placeholderChar2)) setState({
         endDate: undefined
       });
@@ -15274,7 +15301,7 @@ var Trigger = function Trigger(props) {
     error: showStartError,
     caption: showStartError ? startErrorMessage : '',
     validators: [inputValidator],
-    clearOnEmptyBlur: false
+    clearOnEmptyBlur: true
   }))), /*#__PURE__*/React.createElement(Column, {
     size: '6',
     sizeXS: '12',
@@ -15303,7 +15330,7 @@ var Trigger = function Trigger(props) {
     error: showEndError,
     caption: showEndError ? endErrorMessage : '',
     validators: [inputValidator],
-    clearOnEmptyBlur: false
+    clearOnEmptyBlur: true
   }))));
 };
 
@@ -15387,6 +15414,20 @@ var SingleInputTrigger = function SingleInputTrigger(props) {
     });
   };
 
+  var getErrorState = function getErrorState(currentVal, siblingVal) {
+    var hasNumber = /\d/;
+
+    if (currentVal && siblingVal && !currentVal.includes(placeholderChar) && siblingVal.includes(placeholderChar)) {
+      return true;
+    } else if (currentVal && hasNumber.test(currentVal) && currentVal.includes(placeholderChar)) {
+      return true;
+    } else if (currentVal && !hasNumber.test(currentVal) || !currentVal) {
+      return false;
+    }
+
+    return null;
+  };
+
   var onBlurHandler = function onBlurHandler(_e, val) {
     setState({
       init: true
@@ -15394,6 +15435,16 @@ var SingleInputTrigger = function SingleInputTrigger(props) {
     var date = val.split(' - ');
     var startVal = date[0];
     var endVal = date[1];
+    var startErr = getErrorState(startVal, endVal);
+    var endErr = getErrorState(endVal, startVal);
+
+    if (startErr !== null && endErr !== null) {
+      setState({
+        startError: startErr,
+        endError: endErr
+      });
+    }
+
     if (!startVal || startVal.includes(placeholderChar)) setState({
       startDate: undefined
     });
@@ -15433,7 +15484,7 @@ var SingleInputTrigger = function SingleInputTrigger(props) {
     error: showError,
     caption: showError ? errorMessage : '',
     validators: [inputValidator],
-    clearOnEmptyBlur: false
+    clearOnEmptyBlur: true
   }))));
 };
 
@@ -20303,6 +20354,6 @@ Divider.defaultProps = {
   vertical: false
 };
 
-var version = "2.13.0-0";
+var version = "2.13.1";
 
 export { Avatar, AvatarGroup, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, List, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1655715450571 
+   * Generated on: 1656070414367 
    *      Package: @innovaccer/design-system
-   *      Version: v2.13.0-0
+   *      Version: v2.13.1
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -278,7 +278,7 @@
     var _a$1;
 
     var date = {
-      'dd/mm/yyyy': [/[0123]/, /\d/, '/', /\[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
+      'dd/mm/yyyy': [/[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
       'mm/dd/yyyy': [/[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
       'yyyy/mm/dd': [/\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/],
       'dd-mm-yyyy': [/[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
@@ -286,7 +286,7 @@
       'yyyy-mm-dd': [/\d/, /\d/, /\d/, /\d/, '-', /[01]/, /\d/, '-', /[0123]/, /\d/]
     };
     var rangeDate = {
-      'dd/mm/yyyy': [/[0123]/, /\d/, '/', /\[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[0123]/, /\d/, '/', /\[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
+      'dd/mm/yyyy': [/[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[0123]/, /\d/, '/', /[01]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
       'mm/dd/yyyy': [/[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[01]/, /\d/, '/', /[0123]/, /\d/, '/', /\d/, /\d/, /\d/, /\d/],
       'yyyy/mm/dd': [/\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/, ' ', '-', ' ', /\d/, /\d/, /\d/, /\d/, '/', /[01]/, /\d/, '/', /[0123]/, /\d/],
       'dd-mm-yyyy': [/[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/, ' ', '-', ' ', /[0123]/, /\d/, '-', /[01]/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
@@ -4733,7 +4733,8 @@
         validators: inputValidator,
         onChange: onChangeHandler,
         onClear: onClearHandler,
-        onBlur: onBlurHandler
+        onBlur: onBlurHandler,
+        id: "parent-TimePicker"
       }));
     };
     TimePicker.defaultProps = {
@@ -5123,7 +5124,8 @@
           onFocus = props.onFocus,
           onClear = props.onClear,
           className = props.className,
-          rest = __rest(props, ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onBlur", "onFocus", "onClear", "className"]);
+          id = props.id,
+          rest = __rest(props, ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onBlur", "onFocus", "onClear", "className", "id"]);
 
       var isEditable = React__namespace.useCallback(function (pos) {
         return _typeof(mask[pos]) === 'object';
@@ -5183,6 +5185,9 @@
       React__namespace.useImperativeHandle(forwardRef, function () {
         return ref.current;
       });
+      React__namespace.useEffect(function () {
+        setValue(valueProp || '');
+      }, [valueProp]);
       React__namespace.useEffect(function () {
         setCursorPosition(newSelectionPos.current);
       }, [value]);
@@ -5267,7 +5272,7 @@
         updatedVal = insertAtIndex(enteredVal, start);
         var oldValue = value;
 
-        if (oldValue.length === 0) {
+        if (oldValue.length === 0 && id === 'parent-TimePicker') {
           oldValue = defaultPlaceholderValue;
         }
 
@@ -9865,10 +9870,22 @@
         setState({
           init: true
         });
+        var hasNumber = /\d/;
 
         if (type === 'start') {
           var _a = startInputOptions.placeholderChar,
               placeholderChar = _a === void 0 ? '_' : _a;
+
+          if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
+            setState({
+              startError: true
+            });
+          } else if (val && !hasNumber.test(val) || !val) {
+            setState({
+              startError: false
+            });
+          }
+
           if (!val || val.includes(placeholderChar)) setState({
             startDate: undefined
           });
@@ -9877,6 +9894,17 @@
         if (type === 'end') {
           var _b = endInputOptions.placeholderChar,
               placeholderChar = _b === void 0 ? '_' : _b;
+
+          if (val && hasNumber.test(val) && val.includes(placeholderChar)) {
+            setState({
+              endError: true
+            });
+          } else if (val && !hasNumber.test(val) || !val) {
+            setState({
+              endError: false
+            });
+          }
+
           if (!val || val.includes(placeholderChar)) setState({
             endDate: undefined
           });
@@ -9955,7 +9983,7 @@
         error: showStartError,
         caption: showStartError ? startErrorMessage : '',
         validators: [inputValidator],
-        clearOnEmptyBlur: false
+        clearOnEmptyBlur: true
       }))), /*#__PURE__*/React__namespace.createElement(Column, {
         size: '6',
         sizeXS: '12',
@@ -9984,7 +10012,7 @@
         error: showEndError,
         caption: showEndError ? endErrorMessage : '',
         validators: [inputValidator],
-        clearOnEmptyBlur: false
+        clearOnEmptyBlur: true
       }))));
     };
 
@@ -10067,6 +10095,20 @@
         });
       };
 
+      var getErrorState = function getErrorState(currentVal, siblingVal) {
+        var hasNumber = /\d/;
+
+        if (currentVal && siblingVal && !currentVal.includes(placeholderChar) && siblingVal.includes(placeholderChar)) {
+          return true;
+        } else if (currentVal && hasNumber.test(currentVal) && currentVal.includes(placeholderChar)) {
+          return true;
+        } else if (currentVal && !hasNumber.test(currentVal) || !currentVal) {
+          return false;
+        }
+
+        return null;
+      };
+
       var onBlurHandler = function onBlurHandler(_e, val) {
         setState({
           init: true
@@ -10074,6 +10116,16 @@
         var date = val.split(' - ');
         var startVal = date[0];
         var endVal = date[1];
+        var startErr = getErrorState(startVal, endVal);
+        var endErr = getErrorState(endVal, startVal);
+
+        if (startErr !== null && endErr !== null) {
+          setState({
+            startError: startErr,
+            endError: endErr
+          });
+        }
+
         if (!startVal || startVal.includes(placeholderChar)) setState({
           startDate: undefined
         });
@@ -10113,7 +10165,7 @@
         error: showError,
         caption: showError ? errorMessage : '',
         validators: [inputValidator],
-        clearOnEmptyBlur: false
+        clearOnEmptyBlur: true
       }))));
     };
 
@@ -14738,7 +14790,7 @@
       vertical: false
     };
 
-    var version = "2.13.0-0";
+    var version = "2.13.1";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;