@innovaccer/design-system 2.13.3 → 2.13.4-2

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1656597521668 
+   * Generated on: 1661977121792 
    *      Package: @innovaccer/design-system
-   *      Version: v2.13.3
+   *      Version: v2.13.4-2
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -1279,6 +1279,15 @@ var getSelectAll$1 = function getSelectAll(selected, optionsLength, disabledOpti
     checked: false
   };
 };
+var scrollToOptionIndex = function scrollToOptionIndex(scrollIndex, listOptions) {
+  var _listOptions$scrollIn;
+
+  var optionID = listOptions && ((_listOptions$scrollIn = listOptions[scrollIndex]) === null || _listOptions$scrollIn === void 0 ? void 0 : _listOptions$scrollIn.optionID);
+  var targetOption = document.getElementById(optionID);
+  targetOption && targetOption.scrollIntoView && targetOption.scrollIntoView({
+    block: 'center'
+  });
+};
 
 var _excluded$A = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error"];
 var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -1676,7 +1685,8 @@ var DefaultOption = function DefaultOption(props) {
       className: 'Option-label'
     }, /*#__PURE__*/React.createElement(Text, {
       className: textClassName,
-      appearance: appearance
+      appearance: appearance,
+      id: optionData.optionID
     }, label)))
   );
 };
@@ -2038,7 +2048,7 @@ var alignmentMapping = {
 };
 
 var DropdownList = function DropdownList(props) {
-  var _classNames2, _classNames5, _classNames6;
+  var _classNames4, _classNames5;
 
   var _props$listOptions = props.listOptions,
       listOptions = _props$listOptions === void 0 ? [] : _props$listOptions,
@@ -2077,7 +2087,8 @@ var DropdownList = function DropdownList(props) {
       toggleDropdown = props.toggleDropdown,
       className = props.className,
       _props$searchPlacehol = props.searchPlaceholder,
-      searchPlaceholder = _props$searchPlacehol === void 0 ? 'Search..' : _props$searchPlacehol;
+      searchPlaceholder = _props$searchPlacehol === void 0 ? 'Search..' : _props$searchPlacehol,
+      scrollIndex = props.scrollIndex;
   var baseProps = extractBaseProps(props);
   var dropdownRef = /*#__PURE__*/React.createRef();
   var triggerRef = /*#__PURE__*/React.createRef();
@@ -2093,11 +2104,11 @@ var DropdownList = function DropdownList(props) {
   var _React$useState3 = React.useState(firstEnabledOption),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       cursor = _React$useState4[0],
-      setCursor = _React$useState4[1]; // Re-initializes its value to 0 on every re-render
+      setCursor = _React$useState4[1];
 
-
-  var animateOrder = 0;
   React.useEffect(function () {
+    var timer;
+
     if (dropdownOpen) {
       var _triggerRef$current;
 
@@ -2111,8 +2122,18 @@ var DropdownList = function DropdownList(props) {
         minWidth: minWidth ? minWidth : popperMinWidth,
         maxWidth: maxWidth ? maxWidth : '100%'
       };
-      setPopoverStyle(popperWrapperStyle);
+      setPopoverStyle(popperWrapperStyle); // scrolls to current time
+
+      if (scrollIndex && tempSelected.length === 0) {
+        timer = setTimeout(function () {
+          scrollToOptionIndex(scrollIndex, listOptions);
+        }, 100);
+      }
     }
+
+    return function () {
+      clearTimeout(timer);
+    };
   }, [dropdownOpen]);
   React.useEffect(function () {
     if (firstEnabledOption !== cursor) setCursor(firstEnabledOption);
@@ -2153,24 +2174,15 @@ var DropdownList = function DropdownList(props) {
     return Dropdown;
   };
 
-  var animateClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'fade-in', dropdownOpen), _defineProperty$1(_classNames2, 'opacity-0', dropdownOpen), _defineProperty$1(_classNames2, 'Dropdown-items', true), _classNames2));
-
-  var getAnimateOrderStyle = function getAnimateOrderStyle(order) {
-    var animateStyle = {
-      animationDelay: dropdownOpen ? order * 20 + 'ms' : ''
-    };
-    return animateStyle;
-  };
-
   var getDropdownSectionClass = function getDropdownSectionClass(showClearButton) {
-    var _classNames3;
+    var _classNames2;
 
-    return classnames((_classNames3 = {}, _defineProperty$1(_classNames3, 'Dropdown-section', true), _defineProperty$1(_classNames3, 'Dropdown-section--withClear', showClearButton), _classNames3), animateClass);
+    return classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Dropdown-section', true), _defineProperty$1(_classNames2, 'Dropdown-section--withClear', showClearButton), _classNames2));
   };
 
   var dropdownClass = classnames(_defineProperty$1({}, 'Dropdown', true), className);
-  var dropdownWrapperClass = classnames((_classNames5 = {}, _defineProperty$1(_classNames5, 'Dropdown-wrapper', true), _defineProperty$1(_classNames5, 'Dropdown-wrapper--wrap', !truncateOption), _classNames5));
-  var SelectAllClass = classnames((_classNames6 = {}, _defineProperty$1(_classNames6, 'Option-checkbox', true), _defineProperty$1(_classNames6, 'Option-checkbox--active', cursor === 0), _defineProperty$1(_classNames6, 'OptionWrapper', true), _classNames6), animateClass);
+  var dropdownWrapperClass = classnames((_classNames4 = {}, _defineProperty$1(_classNames4, 'Dropdown-wrapper', true), _defineProperty$1(_classNames4, 'Dropdown-wrapper--wrap', !truncateOption), _classNames4));
+  var SelectAllClass = classnames((_classNames5 = {}, _defineProperty$1(_classNames5, 'Option-checkbox', true), _defineProperty$1(_classNames5, 'Option-checkbox--active', cursor === 0), _defineProperty$1(_classNames5, 'OptionWrapper', true), _classNames5));
 
   var onToggleDropdown = function onToggleDropdown(open, type) {
     var _dropdownTriggerRef$c;
@@ -2220,8 +2232,7 @@ var DropdownList = function DropdownList(props) {
     var _props$footerLabel = props.footerLabel,
         footerLabel = _props$footerLabel === void 0 ? 'Search for more options' : _props$footerLabel;
     return /*#__PURE__*/React.createElement("div", {
-      className: "Dropdown-footer ".concat(animateClass),
-      style: getAnimateOrderStyle(++animateOrder)
+      className: "Dropdown-footer"
     }, /*#__PURE__*/React.createElement(Text, {
       size: "small",
       appearance: 'subtle'
@@ -2234,8 +2245,7 @@ var DropdownList = function DropdownList(props) {
       return option.disabled;
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: getDropdownSectionClass(selectedGroup),
-      style: getAnimateOrderStyle(++animateOrder)
+      className: getDropdownSectionClass(selectedGroup)
     }, /*#__PURE__*/React.createElement(Text, {
       size: "small",
       appearance: 'subtle'
@@ -2252,8 +2262,7 @@ var DropdownList = function DropdownList(props) {
     var disable = _isEqual(previousSelected, tempSelected);
 
     return /*#__PURE__*/React.createElement("div", {
-      className: "Dropdown-buttonWrapper ".concat(animateClass),
-      style: getAnimateOrderStyle(++animateOrder)
+      className: "Dropdown-buttonWrapper"
     }, /*#__PURE__*/React.createElement(Button, {
       ref: dropdownCancelButtonRef,
       className: "mr-4",
@@ -2274,8 +2283,7 @@ var DropdownList = function DropdownList(props) {
 
   var renderSearch = function renderSearch() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "Dropdown-inputWrapper ".concat(animateClass),
-      style: getAnimateOrderStyle(++animateOrder)
+      className: "Dropdown-inputWrapper"
     }, /*#__PURE__*/React.createElement(Input, {
       name: "Dropdown-search",
       icon: 'search',
@@ -2312,7 +2320,6 @@ var DropdownList = function DropdownList(props) {
         onSelectAll = props.onSelectAll;
     var label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
     return /*#__PURE__*/React.createElement("div", {
-      style: getAnimateOrderStyle(++animateOrder),
       className: SelectAllClass,
       onMouseEnter: function onMouseEnter() {
         return updateActiveOption(0, true);
@@ -2338,10 +2345,7 @@ var DropdownList = function DropdownList(props) {
     var optionIsSelected = tempSelected.findIndex(function (option) {
       return option.value === item.value;
     }) !== -1;
-    return /*#__PURE__*/React.createElement("div", {
-      style: getAnimateOrderStyle(++animateOrder),
-      className: animateClass
-    }, /*#__PURE__*/React.createElement(Option, {
+    return /*#__PURE__*/React.createElement(Option, {
       optionData: item,
       truncateOption: truncateOption,
       selected: optionIsSelected,
@@ -2358,7 +2362,7 @@ var DropdownList = function DropdownList(props) {
         return props.onSelect(item, e.target.checked);
       },
       optionType: props.optionType
-    }));
+    });
   };
 
   var renderDropdownSection = function renderDropdownSection() {
@@ -2525,7 +2529,7 @@ var DropdownList = function DropdownList(props) {
 
 DropdownList.displayName = 'DropdownList';
 
-var _excluded$v = ["triggerOptions", "selected"];
+var _excluded$v = ["triggerOptions", "selected", "tabIndex"];
 var inputRef = /*#__PURE__*/React.createRef();
 
 /**
@@ -2630,6 +2634,12 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
         var options = res.options,
             count = res.count;
 
+        if (res.scrollToIndex) {
+          setTimeout(function () {
+            scrollToOptionIndex(res.scrollToIndex, options);
+          }, 0);
+        }
+
         if (!res.searchTerm || res.searchTerm && res.searchTerm === _this.state.searchTerm) {
           var _inputRef$current;
 
@@ -2641,6 +2651,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
           var disabledOptions = _this.getDisabledOptions(unSelectedGroup.slice(0, _this.staticLimit));
 
           _this.setState(_objectSpread2(_objectSpread2({}, _this.state), {}, {
+            scrollIndex: res.scrollToIndex || 0,
             optionsLength: optionsLength,
             loading: false,
             async: updatedAsync,
@@ -3116,7 +3127,8 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
           tempSelected = _this$state7.tempSelected,
           selectAll = _this$state7.selectAll,
           triggerLabel = _this$state7.triggerLabel,
-          previousSelected = _this$state7.previousSelected;
+          previousSelected = _this$state7.previousSelected,
+          scrollIndex = _this$state7.scrollIndex;
       var _this$props12 = this.props,
           _this$props12$withSel = _this$props12.withSelectAll,
           withSelectAll = _this$props12$withSel === void 0 ? true : _this$props12$withSel,
@@ -3126,10 +3138,11 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
           _this$props13$trigger = _this$props13.triggerOptions,
           triggerOptions = _this$props13$trigger === void 0 ? {} : _this$props13$trigger;
           _this$props13.selected;
-          var rest = _objectWithoutProperties(_this$props13, _excluded$v);
+          var tabIndex = _this$props13.tabIndex,
+          rest = _objectWithoutProperties(_this$props13, _excluded$v);
 
       var remainingOptionsLen = searchedOptionsLength - options.length;
-      var firstEnabledOption = _isSelectAllPresent(searchTerm, remainingOptionsLen, withSelectAll, withCheckbox) ? 0 : options.findIndex(function (option) {
+      var firstEnabledOption = tabIndex ? tabIndex : _isSelectAllPresent(searchTerm, remainingOptionsLen, withSelectAll, withCheckbox) ? 0 : options.findIndex(function (option) {
         return !option.disabled;
       });
       return /*#__PURE__*/React.createElement(DropdownList, _extends$2({
@@ -3155,7 +3168,8 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
         onSearchChange: this.updateSearchTerm,
         onOptionSelect: this.onOptionSelect,
         onSelectAll: this.onSelectAll,
-        customTrigger: triggerOptions.customTrigger
+        customTrigger: triggerOptions.customTrigger,
+        scrollIndex: scrollIndex
       }, rest));
     }
   }]);
@@ -5118,7 +5132,650 @@ _defineProperty$1(DatePicker, "defaultProps", _objectSpread2(_objectSpread2({},
   closeOnSelect: true
 }));
 
-var TimePicker = function TimePicker(props) {
+var parseDate = function parseDate(date_time) {
+  var d = new Date();
+  d.setHours(date_time.substring(0, 2));
+  d.setMinutes(date_time.substring(3, 5));
+  return d;
+};
+
+var isFormat12Hour = function isFormat12Hour(format) {
+  return format === '12-Hour';
+};
+
+var isTimeIn12HourFormat = function isTimeIn12HourFormat(time) {
+  return _isTimeInAM(time) || _isTimeInPM(time);
+};
+
+var _isTimeInAM = function _isTimeInAM(time) {
+  return time.includes('a') || time.includes('A');
+};
+var _isTimeInPM = function _isTimeInPM(time) {
+  return time.includes('p') || time.includes('P');
+};
+/**
+ * Convert time from 12 hour format to 24 hour format
+ * @param timeStr in hh:mm [AM/PM] format
+ * @returns time in HH:MM format
+ */
+
+var convert12To24HourFormat$1 = function convert12To24HourFormat(timeStr) {
+  var _timeStr$split = timeStr.split(' '),
+      _timeStr$split2 = _slicedToArray(_timeStr$split, 2),
+      time = _timeStr$split2[0],
+      modifier = _timeStr$split2[1];
+
+  var timeArr = time.split(':');
+  var hours = timeArr[0];
+  var minutes = timeArr[1];
+
+  if (hours === '12' && _isTimeInAM(modifier)) {
+    hours = '00';
+  }
+
+  if (_isTimeInPM(modifier) && hours !== '12') {
+    hours = (parseInt(hours, 10) + 12).toString();
+  }
+
+  return "".concat(hours, ":").concat(minutes);
+};
+/**
+ * @param val
+ * @returns insert 0 at start in case of single digit
+ */
+
+var convertToTwoDigit = function convertToTwoDigit(val) {
+  return ('0' + val).slice(-2);
+};
+/**
+ * Convert time from 24 hour format to 12 hour format
+ * @param timeStr in HH:MM format
+ * @returns time in hh:mm [AM/PM] format
+ */
+
+var convert24To12HourFormat = function convert24To12HourFormat(timeStr) {
+  var timeArr = timeStr.split(':');
+  var hours = parseInt(timeArr[0], 10);
+  var modifier = hours >= 12 ? 'PM' : 'AM';
+  var convertedHours = hours % 12 || 12;
+  var hoursInString = convertedHours.toString();
+  hoursInString = convertToTwoDigit(hoursInString);
+  var minutes = timeArr[1];
+  var result = "".concat(hoursInString.toString(), ":").concat(minutes, " ").concat(modifier);
+  return result;
+};
+
+var getTimeIn24HrFormat = function getTimeIn24HrFormat(timeStr) {
+  if (isTimeIn12HourFormat(timeStr)) {
+    return convert12To24HourFormat$1(timeStr);
+  }
+
+  return timeStr;
+};
+/**
+ * @param startTime in HH:MM format
+ * @param endTime in HH:MM format
+ * @returns returns true if start time is greater than end time
+ */
+
+
+var checkTimeDifference = function checkTimeDifference(startTime, endTime) {
+  var parseStartTime = parseDate(startTime);
+  var parseEndTime = parseDate(endTime);
+  return parseStartTime > parseEndTime;
+};
+/**
+ * @param startTime in HH:MM format
+ * @param endTime in HH:MM format
+ * @param interval
+ * @returns array of 24 hour time list based on interval
+ */
+
+var get24HourTimeList = function get24HourTimeList(startTime, endTime, interval) {
+  var timeList = [];
+  var parseStartTime = parseDate(startTime);
+  var parseEndTime = parseDate(endTime);
+
+  while (parseStartTime <= parseEndTime) {
+    timeList.push(parseStartTime.toTimeString().substring(0, 5));
+    parseStartTime.setMinutes(parseStartTime.getMinutes() + interval);
+  }
+
+  return timeList;
+};
+/**
+ * @param startTime in HH:MM format
+ * @param interval
+ * @returns time list in 24 hour format including times option for next day
+ */
+
+
+var getReverseTimeList = function getReverseTimeList(startTime, endTime, interval) {
+  var timeList = get24HourTimeList('00:00', '23:59', interval);
+  var startTimeIndex = timeList.indexOf(startTime);
+  var endTimeIndex = timeList.indexOf(endTime);
+  var nextDayTimeIndex = endTime === '' ? startTimeIndex : endTimeIndex + 1;
+  var presentDayList = timeList.slice(startTimeIndex);
+  var nextDayList = timeList.slice(0, nextDayTimeIndex);
+  var result = presentDayList.concat(nextDayList);
+  return result;
+};
+
+var getTimeListIn24HourFormat = function getTimeListIn24HourFormat(startTime, endTime, interval) {
+  if (endTime === '' || checkTimeDifference(startTime, endTime)) {
+    return getReverseTimeList(startTime, endTime, interval);
+  }
+
+  return get24HourTimeList(startTime, endTime, interval);
+};
+
+var getTimeDifference = function getTimeDifference(startTime, endTime) {
+  var timeStart = new Date('07/07/2022 ' + startTime);
+  var timeEnd = new Date('07/07/2022 ' + endTime);
+  var diff = timeEnd.getTime() - timeStart.getTime();
+  var diff_as_date = new Date(diff);
+  var hour = diff_as_date.getUTCHours();
+  var minute = diff_as_date.getUTCMinutes();
+  return {
+    hour: hour,
+    minute: minute
+  };
+};
+
+var getCustomLabel = function getCustomLabel(time, timeFormat, showDuration, referenceTime) {
+  var label = time;
+
+  if (isFormat12Hour(timeFormat)) {
+    label = convert24To12HourFormat(time);
+  }
+
+  if (showDuration && referenceTime) {
+    var _getTimeDifference = getTimeDifference(referenceTime, time),
+        hour = _getTimeDifference.hour,
+        minute = _getTimeDifference.minute;
+
+    var timeDiffLabel = " (".concat(hour, " hr ").concat(minute, " min)");
+    label += timeDiffLabel;
+  }
+
+  return label;
+};
+
+var isOptionDisabled = function isOptionDisabled(time, timeFormat, disabledSlotList) {
+  var timeValue = time;
+
+  if (isFormat12Hour(timeFormat)) {
+    timeValue = convert24To12HourFormat(time);
+  }
+
+  if (disabledSlotList.includes(timeValue)) {
+    return true;
+  }
+
+  return false;
+};
+
+var convertTimeToOptionList = function convertTimeToOptionList(timeList, timeFormat) {
+  var id = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'TimePicker-Option-key';
+  var showDuration = arguments.length > 3 ? arguments[3] : undefined;
+  var referenceTime = arguments.length > 4 ? arguments[4] : undefined;
+  var disabledSlotList = arguments.length > 5 ? arguments[5] : undefined;
+  var optionList = timeList.map(function (time, index) {
+    return {
+      label: getCustomLabel(time, timeFormat, showDuration, referenceTime),
+      value: time,
+      disabled: disabledSlotList && isOptionDisabled(time, timeFormat, disabledSlotList),
+      selected: false,
+      optionID: id + index
+    };
+  });
+  return optionList;
+};
+
+var computeEndTime = function computeEndTime(startTime) {
+  return startTime ? '' : '23:59';
+};
+
+var getDropdownOptionList = function getDropdownOptionList(props) {
+  var startTime = props.startTime,
+      endTime = props.endTime,
+      interval = props.interval,
+      timeFormat = props.timeFormat,
+      showDuration = props.showDuration,
+      disabledSlotList = props.disabledSlotList,
+      id = props.id;
+  var startTimeIn24Hr = startTime ? getTimeIn24HrFormat(startTime) : '00:00';
+  var endTimeIn24Hr = endTime ? getTimeIn24HrFormat(endTime) : computeEndTime(startTime);
+  var timeList = getTimeListIn24HourFormat(startTimeIn24Hr, endTimeIn24Hr, interval);
+  var dropdownOptionList = convertTimeToOptionList(timeList, timeFormat, id, showDuration, startTime, disabledSlotList);
+  return dropdownOptionList;
+};
+
+var convertMinTo60 = function convertMinTo60(time) {
+  var parseNum = parseInt(time, 10);
+  if (parseNum < 10) return time;
+  var timeInNum = parseNum > 60 ? parseNum % 60 : parseNum;
+  var min = (timeInNum.toString() + '0').slice(0, 2);
+  return min;
+};
+
+var get24HourCurrentTime = function get24HourCurrentTime() {
+  var today = new Date();
+  return convertToTwoDigit(today.getHours()) + ':' + convertToTwoDigit(today.getMinutes());
+};
+
+var convertHourTo24 = function convertHourTo24(time) {
+  var timeInNum = parseInt(time, 10) % 24;
+  return timeInNum.toString();
+};
+
+var convertHourTo12 = function convertHourTo12(time) {
+  var timeInNum = parseInt(time, 10) % 12;
+  return timeInNum.toString();
+};
+
+var _checkNumber = function _checkNumber(str) {
+  var numberRegex = /^[0-9]+$/;
+  return numberRegex.test(str);
+};
+
+var _checkNumberWithAMPM = function _checkNumberWithAMPM(str) {
+  var numberWithAMPMRegex = /^[0-9]+[ AaMmPp]+$/;
+  return numberWithAMPMRegex.test(str);
+};
+
+var _checkNumberWithSpecialChar = function _checkNumberWithSpecialChar(str) {
+  var numberWithSpecialCharRegex = /^[0-9]+[`\s!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~][0-9]*$/;
+  return numberWithSpecialCharRegex.test(str);
+};
+
+var _checkNumberWithSpecialCharAMPM = function _checkNumberWithSpecialCharAMPM(str) {
+  var numberWithSpecialCharAMPM = /^[0-9]+[`\s!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~][0-9]+[ AaMmPp]+$/;
+  return numberWithSpecialCharAMPM.test(str);
+};
+
+var specialCharRegex = /[`\s!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/;
+/**
+ * @param searchTime in [number special-char number] format
+ * @returns timeObj with hour & minute in 24 hour format
+ */
+
+var getTimeFromNumberWithSpecialChar = function getTimeFromNumberWithSpecialChar(searchTime) {
+  var time = searchTime.split(specialCharRegex);
+  var hour = convertHourTo24(time[0]);
+  var hh = convertToTwoDigit(hour);
+  var min = time[1] !== '' ? convertMinTo60(time[1]) : '00';
+  var mm = (min + '0').slice(0, 2);
+  return {
+    hour: hh,
+    min: mm
+  };
+};
+/**
+ * If search term only contains number
+ * @param searchTerm
+ * @returns timeObj with hour & minute in 24 hour format
+ */
+
+
+var getSearchTimeFromNumber = function getSearchTimeFromNumber(searchTerm, show12HourFormat) {
+  var searchLen = searchTerm.length;
+  var searchTimeInNum = parseInt(searchTerm, 10);
+  var firstTwoTerm = searchTerm.slice(0, 2);
+  var hh = '00';
+  var mm = '00';
+
+  switch (searchLen) {
+    case 1:
+      // if search term length is 1 consider it as hour
+      hh = '0' + searchTerm;
+      break;
+
+    case 2:
+      // if search term length is 2
+      if (searchTimeInNum <= 24 || show12HourFormat && searchTimeInNum <= 12) {
+        // consider it as hour
+        hh = convertToTwoDigit(searchTerm);
+      } else {
+        // consider first term as hour and last term as min
+        hh = '0' + searchTerm[0];
+        mm = convertMinTo60(searchTerm[1] + '0'); // mm = searchTerm[1] + '0';
+      }
+
+      break;
+
+    case 3:
+      hh = '0' + searchTerm[0];
+      mm = convertMinTo60(searchTerm.slice(1));
+      break;
+
+    case 4:
+      hh = show12HourFormat ? convertHourTo12(firstTwoTerm) : convertHourTo24(firstTwoTerm);
+      mm = convertMinTo60(searchTerm.slice(2));
+      break;
+
+    default:
+      // set time as -1 in case of invalid time
+      hh = '-1';
+      mm = '-1';
+  }
+
+  return {
+    hour: hh,
+    min: mm
+  };
+};
+/**
+ * @param searchTime in [number AMPM] format
+ * @returns timeObj with hour & minute in 24 hour format
+ */
+
+
+var getTimeFromNumberWithAMPM = function getTimeFromNumberWithAMPM(searchTime) {
+  var timeArr = searchTime.split(/[\saAmMpP]/);
+
+  var _getSearchTimeFromNum = getSearchTimeFromNumber(timeArr[0], true),
+      hour = _getSearchTimeFromNum.hour,
+      min = _getSearchTimeFromNum.min;
+
+  return {
+    hour: hour,
+    min: min
+  };
+};
+/**
+ * @param searchTerm entered by user in any format
+ * @returns modified search term in 24 hour format
+ */
+
+
+var formatSearchTerm = function formatSearchTerm(optionList, searchTerm) {
+  var searchTime = {
+    hour: '00',
+    min: '00'
+  }; // If search term only contains numbers
+
+  if (_checkNumber(searchTerm)) {
+    var searchTimeInHHMM = getSearchTimeFromNumber(searchTerm);
+
+    if (parseInt(searchTimeInHHMM.hour) <= 12 && parseInt(searchTimeInHHMM.hour) > 0) {
+      // switch to AM/PM based on current time
+      searchTime = getCurrentRelativeTime(optionList, searchTimeInHHMM);
+    } else {
+      searchTime = searchTimeInHHMM;
+    }
+  } // if search term contains numbers along with [ampm]
+  else if (_checkNumberWithAMPM(searchTerm)) {
+    searchTime = getTimeFromNumberWithAMPM(searchTerm);
+    searchTime.hour = convert12To24HourFormat(searchTime.hour, searchTerm);
+  } // if search term contains numbers along with special character
+  else if (_checkNumberWithSpecialChar(searchTerm)) {
+    var _searchTimeInHHMM = getTimeFromNumberWithSpecialChar(searchTerm);
+
+    if (parseInt(_searchTimeInHHMM.hour) <= 12) {
+      // switch to AM/PM based on current time
+      searchTime = getCurrentRelativeTime(optionList, _searchTimeInHHMM);
+    } else {
+      searchTime = _searchTimeInHHMM;
+    }
+  } // if search term contains numbers, special character & [AmPm]
+  else if (_checkNumberWithSpecialCharAMPM(searchTerm)) {
+    var timeWithoutAMPM = searchTerm.replace(/[\saApPmM]/g, '');
+
+    if (_checkNumber(timeWithoutAMPM)) {
+      searchTime = getSearchTimeFromNumber(timeWithoutAMPM, true);
+    } else if (_checkNumberWithSpecialChar(timeWithoutAMPM)) {
+      searchTime = getTimeFromNumberWithSpecialChar(timeWithoutAMPM);
+    }
+
+    searchTime.hour = convert12To24HourFormat(searchTime.hour, searchTerm);
+  }
+
+  return searchTime;
+};
+/**
+ * @param hours
+ * @param searchTerm
+ * @returns hours based on AM/PM in 24 hour format
+ */
+
+var convert12To24HourFormat = function convert12To24HourFormat(hours, searchTerm) {
+  if (hours === '12' && _isTimeInAM(searchTerm)) {
+    hours = '00';
+  } else if (_isTimeInPM(searchTerm) && hours !== '12') {
+    hours = (parseInt(hours, 10) + 12).toString();
+  }
+
+  return hours;
+};
+/**
+ * Switch to AM/PM time based on current time
+ * @param optionList
+ * @param searchTime
+ */
+
+
+var getCurrentRelativeTime = function getCurrentRelativeTime(optionList, searchTime) {
+  var searchTimeStr = "".concat(searchTime.hour, ":").concat(searchTime.min);
+  var currentTime = get24HourCurrentTime();
+  var greaterTime = checkTimeDifference(currentTime, searchTimeStr);
+  var currentTimeIndex = findClosestTimeIndex(optionList, currentTime);
+  var searchTimeIndex = findClosestTimeIndex(optionList, searchTimeStr);
+
+  if (greaterTime && currentTimeIndex > searchTimeIndex) {
+    var hourIn24Format = parseInt(searchTime.hour, 10) + 12;
+    searchTime.hour = hourIn24Format.toString();
+  }
+
+  return searchTime;
+};
+
+var findClosestTimeIndex = function findClosestTimeIndex(optionList, searchItem) {
+  var closestItemIndex = 0;
+  var minTime = {
+    hour: 100,
+    mins: 100
+  };
+
+  for (var index = 0; index < optionList.length; index++) {
+    var _getTimeDifference = getTimeDifference(searchItem, optionList[index]),
+        hour = _getTimeDifference.hour,
+        minute = _getTimeDifference.minute;
+
+    if (hour < minTime.hour || hour === minTime.hour && minute < minTime.mins) {
+      minTime.hour = hour;
+      minTime.mins = minute;
+      closestItemIndex = index;
+    }
+  }
+
+  return closestItemIndex;
+};
+/**
+ * Get index of search term from option list
+ * @param optionList
+ * @param searchTerm
+ * @returns Index of the search term in option list
+ */
+
+
+var getSearchIndex = function getSearchIndex(optionList, searchTerm) {
+  var _formatSearchTerm = formatSearchTerm(optionList, searchTerm),
+      hour = _formatSearchTerm.hour,
+      min = _formatSearchTerm.min;
+
+  if (min === '60') {
+    min = '00';
+    hour = (parseInt(hour, 10) + 1).toString();
+  }
+
+  var searchItem = "".concat(hour, ":").concat(min);
+  var searchIndex = findClosestTimeIndex(optionList, searchItem);
+  return searchIndex;
+};
+/**
+ * @param searchTerm
+ * @returns count number of digits present inside search term
+ */
+
+var countNumberInStr = function countNumberInStr(searchTerm) {
+  var _searchTerm$match;
+
+  return ((_searchTerm$match = searchTerm.match(/\d/g)) === null || _searchTerm$match === void 0 ? void 0 : _searchTerm$match.length) || 0;
+};
+
+var isValidSearchTerm = function isValidSearchTerm(searchTerm) {
+  var totalDigit = countNumberInStr(searchTerm);
+  return totalDigit > 0 && totalDigit < 5;
+};
+
+var getValueFromOptionList = function getValueFromOptionList(optionList) {
+  var list = optionList.map(function (option) {
+    return option.value;
+  });
+  return list;
+};
+
+var getSearchValueIndex = function getSearchValueIndex(options, searchTerm) {
+  // Search Term is valid if it contains number
+  if (!isValidSearchTerm(searchTerm)) {
+    return -1;
+  }
+
+  var searchIndex = getSearchIndex(options, searchTerm);
+  return searchIndex;
+};
+
+var getScrollIndex = function getScrollIndex(dropdownOptionList, searchTerm) {
+  var optionList = getValueFromOptionList(dropdownOptionList);
+
+  if (searchTerm === '') {
+    // return current time index
+    var currTime = get24HourCurrentTime();
+    var currTimeIndex = findClosestTimeIndex(optionList, currTime);
+    return currTimeIndex;
+  }
+
+  return getSearchValueIndex(optionList, searchTerm);
+};
+
+var TimePickerWithSearch = function TimePickerWithSearch(props) {
+  var open = props.open,
+      endTime = props.endTime,
+      interval = props.interval,
+      onChange = props.onChange,
+      startTime = props.startTime,
+      timeFormat = props.timeFormat,
+      showDuration = props.showDuration,
+      noResultMessage = props.noResultMessage,
+      disabledSlotList = props.disabledSlotList,
+      fetchTimeOptions = props.fetchTimeOptions;
+
+  var _React$useState = React.useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      tabIndex = _React$useState2[0],
+      setTabIndex = _React$useState2[1];
+
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      openPopover = _React$useState4[0],
+      setOpenPopover = _React$useState4[1];
+
+  var _React$useState5 = React.useState(-1),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      selectedIndex = _React$useState6[0],
+      setSelectedIndex = _React$useState6[1];
+
+  var _React$useState7 = React.useState(0),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      counter = _React$useState8[0],
+      setCounter = _React$useState8[1];
+
+  var dropdownOptionList = getDropdownOptionList(props);
+  React.useEffect(function () {
+    open !== undefined && setOpenPopover(open);
+  }, [open]);
+  React.useEffect(function () {
+    var timer;
+
+    if (openPopover && selectedIndex != -1) {
+      setTabIndex(selectedIndex);
+      timer = setTimeout(function () {
+        scrollToOptionIndex(selectedIndex, dropdownOptionList);
+      }, 100);
+    }
+
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [openPopover]); // Required to re-render dropdown forcefully whenever props changes
+
+  React.useEffect(function () {
+    setCounter(counter + 1);
+  }, [startTime, endTime, interval, showDuration, disabledSlotList]);
+
+  var onChangeHandler = function onChangeHandler(props) {
+    var time = props;
+
+    if (isFormat12Hour(timeFormat)) {
+      time = convert24To12HourFormat(time);
+    }
+
+    var selectIndex = dropdownOptionList.findIndex(function (option) {
+      return option.value === props;
+    });
+    setSelectedIndex(selectIndex);
+    onChange && onChange(time);
+  };
+
+  var getOptionList = function getOptionList(searchTerm) {
+    var scrollIndex;
+    var indexValue = getScrollIndex(dropdownOptionList, searchTerm);
+
+    if (searchTerm === '' && selectedIndex != -1) {
+      scrollIndex = selectedIndex;
+      setTabIndex(selectedIndex);
+    } else {
+      scrollIndex = indexValue;
+      setTabIndex(indexValue);
+    }
+
+    return Promise.resolve({
+      options: indexValue === -1 ? [] : dropdownOptionList,
+      count: dropdownOptionList.length,
+      scrollToIndex: scrollIndex === 0 ? scrollIndex + 1 : scrollIndex,
+      searchTerm: searchTerm
+    });
+  };
+
+  var fetchOptionList = function fetchOptionList() {
+    return fetchTimeOptions ? fetchTimeOptions : getOptionList;
+  };
+
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    key: counter,
+    maxHeight: 160,
+    loadersCount: 0,
+    withSearch: true,
+    open: openPopover,
+    tabIndex: tabIndex,
+    searchPlaceholder: "Search",
+    onChange: onChangeHandler,
+    fetchOptions: fetchOptionList(),
+    noResultMessage: noResultMessage,
+    staticLimit: dropdownOptionList.length,
+    onPopperToggle: function onPopperToggle() {
+      setOpenPopover(!openPopover);
+    }
+  });
+};
+TimePickerWithSearch.defaultProps = {
+  timeFormat: '12-Hour',
+  interval: 15
+};
+TimePickerWithSearch.displayName = 'TimePickerWithSearch';
+
+var TimePickerWithInput = function TimePickerWithInput(props) {
   var validators = props.validators,
       inputOptions = props.inputOptions,
       inputFormat = props.inputFormat,
@@ -5192,12 +5849,18 @@ var TimePicker = function TimePicker(props) {
     id: "parent-TimePicker"
   }));
 };
-TimePicker.defaultProps = {
+TimePickerWithInput.defaultProps = {
   inputFormat: 'hh:mm AM',
   outputFormat: 'hh:mm AM',
   inputOptions: {},
   validators: [time$1]
 };
+TimePickerWithInput.displayName = 'TimePickerWithInput';
+
+var TimePicker = function TimePicker(props) {
+  return props.withSearch ? /*#__PURE__*/React.createElement(TimePickerWithSearch, props) : /*#__PURE__*/React.createElement(TimePickerWithInput, props);
+};
+TimePicker.defaultProps = _objectSpread2(_objectSpread2({}, TimePickerWithInput.defaultProps), TimePickerWithSearch.defaultProps);
 TimePicker.displayName = 'TimePicker';
 
 var _excluded$p = ["appearance", "size", "children", "className"];
@@ -12890,12 +13553,17 @@ var MenuItem = function MenuItem(props) {
       isChildrenVisible = props.isChildrenVisible,
       onClick = props.onClick,
       customItemRenderer = props.customItemRenderer;
-  var baseProps = extractBaseProps(props);
 
-  var onClickHandler = function onClickHandler() {
+  var onClickHandler = function onClickHandler(ev) {
+    ev.preventDefault();
     if (onClick) onClick(menu);
   };
 
+  var baseProps = _objectSpread2({
+    onClick: onClickHandler,
+    href: menu.link
+  }, extractBaseProps(props));
+
   var ItemClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'MenuItem', true), _defineProperty$1(_classNames2, 'MenuItem--vertical', true), _defineProperty$1(_classNames2, 'MenuItem--collapsed', !expanded), _defineProperty$1(_classNames2, 'MenuItem--expanded', expanded), _defineProperty$1(_classNames2, 'MenuItem--active', isActive), _defineProperty$1(_classNames2, 'MenuItem--disabled', menu.disabled), _defineProperty$1(_classNames2, 'MenuItem--subMenu', isChildren && expanded), _defineProperty$1(_classNames2, 'MenuItem--rounded', rounded && expanded), _classNames2));
 
   var renderSubMenu = function renderSubMenu() {
@@ -12945,11 +13613,10 @@ var MenuItem = function MenuItem(props) {
   /*#__PURE__*/
   // TODO(a11y)
   // eslint-disable-next-line
-  React.createElement("div", _extends$2({
+  React.createElement(GenericText, _extends$2({
+    componentType: "a",
     className: ItemClass
-  }, baseProps, {
-    onClick: onClickHandler
-  }), /*#__PURE__*/React.createElement("div", {
+  }, baseProps), /*#__PURE__*/React.createElement("div", {
     className: "d-flex align-items-center overflow-hidden"
   }, menu.icon && /*#__PURE__*/React.createElement(Icon, {
     "data-test": "DesignSystem-VerticalNav--Icon",
@@ -16404,7 +17071,7 @@ var allFilesAccepted = function allFilesAccepted(options) {
   });
 };
 
-var COMMON_MIME_TYPES = new Map([['avi', 'video/avi'], ['gif', 'image/gif'], ['ico', 'image/x-icon'], ['jpeg', 'image/jpeg'], ['jpg', 'image/jpeg'], ['mkv', 'video/x-matroska'], ['mov', 'video/quicktime'], ['mp4', 'video/mp4'], ['pdf', 'application/pdf'], ['png', 'image/png'], ['zip', 'application/zip'], ['doc', 'application/msword'], ['docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']]);
+var COMMON_MIME_TYPES = new Map([['avi', 'video/avi'], ['gif', 'image/gif'], ['ico', 'image/x-icon'], ['jpeg', 'image/jpeg'], ['jpg', 'image/jpeg'], ['mkv', 'video/x-matroska'], ['mov', 'video/quicktime'], ['mp4', 'video/mp4'], ['pdf', 'application/pdf'], ['png', 'image/png'], ['zip', 'application/zip'], ['doc', 'application/msword'], ['docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'], ['csv', 'text/csv'], ['xlss', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'], ['xls', 'application/vnd.ms-excel']]);
 var FILES_TO_IGNORE = ['.DS_Store', 'Thumbs.db'];
 function fromEvent(_x) {
   return _fromEvent.apply(this, arguments);
@@ -20338,6 +21005,6 @@ Divider.defaultProps = {
   vertical: false
 };
 
-var version = "2.13.3";
+var version = "2.13.4-2";
 
-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 };
+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, PlaceholderImage, 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 };