@innovaccer/design-system 2.13.3 → 2.13.4-2

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1656597521915 
+   * Generated on: 1661977122083 
    *      Package: @innovaccer/design-system
-   *      Version: v2.13.3
+   *      Version: v2.13.4-2
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -923,6 +923,15 @@
         checked: false
       };
     };
+    var scrollToOptionIndex = function scrollToOptionIndex(scrollIndex, listOptions) {
+      var _a;
+
+      var optionID = listOptions && ((_a = listOptions[scrollIndex]) === null || _a === void 0 ? void 0 : _a.optionID);
+      var targetOption = document.getElementById(optionID);
+      targetOption && targetOption.scrollIntoView && targetOption.scrollIntoView({
+        block: 'center'
+      });
+    };
 
     var DropdownButton = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       var _a, _b;
@@ -1301,7 +1310,8 @@
         className: 'Option-label'
       }, /*#__PURE__*/React__namespace.createElement(Text, {
         className: textClassName,
-        appearance: appearance
+        appearance: appearance,
+        id: optionData.optionID
       }, label)));
     };
 
@@ -1643,25 +1653,25 @@
     };
 
     var DropdownList = function DropdownList(props) {
-      var _a, _b, _c, _d;
+      var _a, _b, _c;
 
-      var _e = props.listOptions,
-          listOptions = _e === void 0 ? [] : _e,
+      var _d = props.listOptions,
+          listOptions = _d === void 0 ? [] : _d,
           inputRef = props.inputRef,
-          _f = props.align,
-          align = _f === void 0 ? 'right' : _f,
-          _g = props.optionType,
-          optionType = _g === void 0 ? 'DEFAULT' : _g,
-          _h = props.applyButtonLabel,
-          applyButtonLabel = _h === void 0 ? 'Apply' : _h,
-          _j = props.cancelButtonLabel,
-          cancelButtonLabel = _j === void 0 ? 'Cancel' : _j,
-          _k = props.truncateOption,
-          truncateOption = _k === void 0 ? true : _k,
-          _l = props.withSelectAll,
-          withSelectAll = _l === void 0 ? true : _l,
-          _m = props.maxHeight,
-          maxHeight = _m === void 0 ? 200 : _m,
+          _e = props.align,
+          align = _e === void 0 ? 'right' : _e,
+          _f = props.optionType,
+          optionType = _f === void 0 ? 'DEFAULT' : _f,
+          _g = props.applyButtonLabel,
+          applyButtonLabel = _g === void 0 ? 'Apply' : _g,
+          _h = props.cancelButtonLabel,
+          cancelButtonLabel = _h === void 0 ? 'Cancel' : _h,
+          _j = props.truncateOption,
+          truncateOption = _j === void 0 ? true : _j,
+          _k = props.withSelectAll,
+          withSelectAll = _k === void 0 ? true : _k,
+          _l = props.maxHeight,
+          maxHeight = _l === void 0 ? 200 : _l,
           customTrigger = props.customTrigger,
           selected = props.selected,
           tempSelected = props.tempSelected,
@@ -1681,8 +1691,9 @@
           cancelOptions = props.cancelOptions,
           toggleDropdown = props.toggleDropdown,
           className = props.className,
-          _o = props.searchPlaceholder,
-          searchPlaceholder = _o === void 0 ? 'Search..' : _o;
+          _m = props.searchPlaceholder,
+          searchPlaceholder = _m === void 0 ? 'Search..' : _m,
+          scrollIndex = props.scrollIndex;
       var baseProps = extractBaseProps(props);
       var dropdownRef = /*#__PURE__*/React__namespace.createRef();
       var triggerRef = /*#__PURE__*/React__namespace.createRef();
@@ -1690,18 +1701,19 @@
       var dropdownCancelButtonRef = /*#__PURE__*/React__namespace.createRef();
       var dropdownApplyButtonRef = /*#__PURE__*/React__namespace.createRef();
 
-      var _p = React__namespace.useState(),
-          popoverStyle = _p[0],
-          setPopoverStyle = _p[1];
+      var _o = React__namespace.useState(),
+          popoverStyle = _o[0],
+          setPopoverStyle = _o[1];
 
-      var _q = React__namespace.useState(firstEnabledOption),
-          cursor = _q[0],
-          setCursor = _q[1];
+      var _p = React__namespace.useState(firstEnabledOption),
+          cursor = _p[0],
+          setCursor = _p[1];
 
-      var animateOrder = 0;
       React__namespace.useEffect(function () {
         var _a;
 
+        var timer;
+
         if (dropdownOpen) {
           var width = props.width,
               minWidth = props.minWidth,
@@ -1714,15 +1726,25 @@
             maxWidth: maxWidth ? maxWidth : '100%'
           };
           setPopoverStyle(popperWrapperStyle);
+
+          if (scrollIndex && tempSelected.length === 0) {
+            timer = setTimeout(function () {
+              scrollToOptionIndex(scrollIndex, listOptions);
+            }, 100);
+          }
         }
+
+        return function () {
+          clearTimeout(timer);
+        };
       }, [dropdownOpen]);
       React__namespace.useEffect(function () {
         if (firstEnabledOption !== cursor) setCursor(firstEnabledOption);
       }, [firstEnabledOption]);
-      var _r = props.triggerSize,
-          triggerSize = _r === void 0 ? 'regular' : _r,
-          _s = props.placeholder,
-          placeholder = _s === void 0 ? 'Select' : _s,
+      var _q = props.triggerSize,
+          triggerSize = _q === void 0 ? 'regular' : _q,
+          _r = props.placeholder,
+          placeholder = _r === void 0 ? 'Select' : _r,
           icon = props.icon,
           error = props.error,
           disabled = props.disabled,
@@ -1757,24 +1779,15 @@
         return Dropdown;
       };
 
-      var animateClass = classNames__default["default"]((_a = {}, _a['fade-in'] = dropdownOpen, _a['opacity-0'] = dropdownOpen, _a['Dropdown-items'] = true, _a));
-
-      var getAnimateOrderStyle = function getAnimateOrderStyle(order) {
-        var animateStyle = {
-          animationDelay: dropdownOpen ? order * 20 + 'ms' : ''
-        };
-        return animateStyle;
-      };
-
       var getDropdownSectionClass = function getDropdownSectionClass(showClearButton) {
         var _a;
 
-        return classNames__default["default"]((_a = {}, _a['Dropdown-section'] = true, _a['Dropdown-section--withClear'] = showClearButton, _a), animateClass);
+        return classNames__default["default"]((_a = {}, _a['Dropdown-section'] = true, _a['Dropdown-section--withClear'] = showClearButton, _a));
       };
 
-      var dropdownClass = classNames__default["default"]((_b = {}, _b['Dropdown'] = true, _b), className);
-      var dropdownWrapperClass = classNames__default["default"]((_c = {}, _c['Dropdown-wrapper'] = true, _c['Dropdown-wrapper--wrap'] = !truncateOption, _c));
-      var SelectAllClass = classNames__default["default"]((_d = {}, _d['Option-checkbox'] = true, _d['Option-checkbox--active'] = cursor === 0, _d['OptionWrapper'] = true, _d), animateClass);
+      var dropdownClass = classNames__default["default"]((_a = {}, _a['Dropdown'] = true, _a), className);
+      var dropdownWrapperClass = classNames__default["default"]((_b = {}, _b['Dropdown-wrapper'] = true, _b['Dropdown-wrapper--wrap'] = !truncateOption, _b));
+      var SelectAllClass = classNames__default["default"]((_c = {}, _c['Option-checkbox'] = true, _c['Option-checkbox--active'] = cursor === 0, _c['OptionWrapper'] = true, _c));
 
       var onToggleDropdown = function onToggleDropdown(open, type) {
         var _a;
@@ -1824,8 +1837,7 @@
         var _a = props.footerLabel,
             footerLabel = _a === void 0 ? 'Search for more options' : _a;
         return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "Dropdown-footer " + animateClass,
-          style: getAnimateOrderStyle(++animateOrder)
+          className: "Dropdown-footer"
         }, /*#__PURE__*/React__namespace.createElement(Text, {
           size: "small",
           appearance: 'subtle'
@@ -1838,8 +1850,7 @@
           return option.disabled;
         });
         return /*#__PURE__*/React__namespace.createElement("div", {
-          className: getDropdownSectionClass(selectedGroup),
-          style: getAnimateOrderStyle(++animateOrder)
+          className: getDropdownSectionClass(selectedGroup)
         }, /*#__PURE__*/React__namespace.createElement(Text, {
           size: "small",
           appearance: 'subtle'
@@ -1856,8 +1867,7 @@
         var disable = _isEqual(previousSelected, tempSelected);
 
         return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "Dropdown-buttonWrapper " + animateClass,
-          style: getAnimateOrderStyle(++animateOrder)
+          className: "Dropdown-buttonWrapper"
         }, /*#__PURE__*/React__namespace.createElement(Button, {
           ref: dropdownCancelButtonRef,
           className: "mr-4",
@@ -1878,8 +1888,7 @@
 
       var renderSearch = function renderSearch() {
         return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "Dropdown-inputWrapper " + animateClass,
-          style: getAnimateOrderStyle(++animateOrder)
+          className: "Dropdown-inputWrapper"
         }, /*#__PURE__*/React__namespace.createElement(Input, {
           name: "Dropdown-search",
           icon: 'search',
@@ -1914,7 +1923,6 @@
             onSelectAll = props.onSelectAll;
         var label = selectAllLabel.trim() ? selectAllLabel.trim() : 'Select All';
         return /*#__PURE__*/React__namespace.createElement("div", {
-          style: getAnimateOrderStyle(++animateOrder),
           className: SelectAllClass,
           onMouseEnter: function onMouseEnter() {
             return updateActiveOption(0, true);
@@ -1936,10 +1944,7 @@
         var optionIsSelected = tempSelected.findIndex(function (option) {
           return option.value === item.value;
         }) !== -1;
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          style: getAnimateOrderStyle(++animateOrder),
-          className: animateClass
-        }, /*#__PURE__*/React__namespace.createElement(Option, {
+        return /*#__PURE__*/React__namespace.createElement(Option, {
           optionData: item,
           truncateOption: truncateOption,
           selected: optionIsSelected,
@@ -1956,7 +1961,7 @@
             return props.onSelect(item, e.target.checked);
           },
           optionType: props.optionType
-        }));
+        });
       };
 
       var renderDropdownSection = function renderDropdownSection() {
@@ -2200,6 +2205,12 @@
             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) {
               updatedAsync = searchTerm === '' ? count > _this.staticLimit : updatedAsync;
               var unSelectedGroup = _showSelectedItems(updatedAsync, searchTerm, withCheckbox) ? _this.getUnSelectedOptions(options, init) : options;
@@ -2209,6 +2220,7 @@
               var disabledOptions = _this.getDisabledOptions(unSelectedGroup.slice(0, _this.staticLimit));
 
               _this.setState(__assign(__assign({}, _this.state), {
+                scrollIndex: res.scrollToIndex || 0,
                 optionsLength: optionsLength,
                 loading: false,
                 async: updatedAsync,
@@ -2676,7 +2688,8 @@
             tempSelected = _a.tempSelected,
             selectAll = _a.selectAll,
             triggerLabel = _a.triggerLabel,
-            previousSelected = _a.previousSelected;
+            previousSelected = _a.previousSelected,
+            scrollIndex = _a.scrollIndex;
         var _b = this.props,
             _c = _b.withSelectAll,
             withSelectAll = _c === void 0 ? true : _c,
@@ -2686,10 +2699,11 @@
             _e = _d.triggerOptions,
             triggerOptions = _e === void 0 ? {} : _e;
             _d.selected;
-            var rest = __rest(_d, ["triggerOptions", "selected"]);
+            var tabIndex = _d.tabIndex,
+            rest = __rest(_d, ["triggerOptions", "selected", "tabIndex"]);
 
         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__namespace.createElement(DropdownList, __assign({
@@ -2715,7 +2729,8 @@
           onSearchChange: this.updateSearchTerm,
           onOptionSelect: this.onOptionSelect,
           onSelectAll: this.onSelectAll,
-          customTrigger: triggerOptions.customTrigger
+          customTrigger: triggerOptions.customTrigger,
+          scrollIndex: scrollIndex
         }, rest));
       };
 
@@ -4647,7 +4662,555 @@
       return DatePicker;
     }(React__namespace.Component);
 
-    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');
+    };
+    var convert12To24HourFormat$1 = function convert12To24HourFormat(timeStr) {
+      var _a = timeStr.split(' '),
+          time = _a[0],
+          modifier = _a[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 hours + ":" + minutes;
+    };
+    var convertToTwoDigit = function convertToTwoDigit(val) {
+      return ('0' + val).slice(-2);
+    };
+    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 = hoursInString.toString() + ":" + minutes + " " + modifier;
+      return result;
+    };
+
+    var getTimeIn24HrFormat = function getTimeIn24HrFormat(timeStr) {
+      if (isTimeIn12HourFormat(timeStr)) {
+        return convert12To24HourFormat$1(timeStr);
+      }
+
+      return timeStr;
+    };
+
+    var checkTimeDifference = function checkTimeDifference(startTime, endTime) {
+      var parseStartTime = parseDate(startTime);
+      var parseEndTime = parseDate(endTime);
+      return parseStartTime > parseEndTime;
+    };
+
+    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;
+    };
+
+    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 _a = getTimeDifference(referenceTime, time),
+            hour = _a.hour,
+            minute = _a.minute;
+
+        var timeDiffLabel = " (" + hour + " hr " + 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, id, showDuration, referenceTime, disabledSlotList) {
+      if (id === void 0) {
+        id = 'TimePicker-Option-key';
+      }
+
+      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!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?~]/;
+
+    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
+      };
+    };
+
+    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:
+          hh = '0' + searchTerm;
+          break;
+
+        case 2:
+          if (searchTimeInNum <= 24 || show12HourFormat && searchTimeInNum <= 12) {
+            hh = convertToTwoDigit(searchTerm);
+          } else {
+            hh = '0' + searchTerm[0];
+            mm = convertMinTo60(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:
+          hh = '-1';
+          mm = '-1';
+      }
+
+      return {
+        hour: hh,
+        min: mm
+      };
+    };
+
+    var getTimeFromNumberWithAMPM = function getTimeFromNumberWithAMPM(searchTime) {
+      var timeArr = searchTime.split(/[\saAmMpP]/);
+
+      var _a = getSearchTimeFromNumber(timeArr[0], true),
+          hour = _a.hour,
+          min = _a.min;
+
+      return {
+        hour: hour,
+        min: min
+      };
+    };
+
+    var formatSearchTerm = function formatSearchTerm(optionList, searchTerm) {
+      var searchTime = {
+        hour: '00',
+        min: '00'
+      };
+
+      if (_checkNumber(searchTerm)) {
+        var searchTimeInHHMM = getSearchTimeFromNumber(searchTerm);
+
+        if (parseInt(searchTimeInHHMM.hour) <= 12 && parseInt(searchTimeInHHMM.hour) > 0) {
+          searchTime = getCurrentRelativeTime(optionList, searchTimeInHHMM);
+        } else {
+          searchTime = searchTimeInHHMM;
+        }
+      } else if (_checkNumberWithAMPM(searchTerm)) {
+        searchTime = getTimeFromNumberWithAMPM(searchTerm);
+        searchTime.hour = convert12To24HourFormat(searchTime.hour, searchTerm);
+      } else if (_checkNumberWithSpecialChar(searchTerm)) {
+        var searchTimeInHHMM = getTimeFromNumberWithSpecialChar(searchTerm);
+
+        if (parseInt(searchTimeInHHMM.hour) <= 12) {
+          searchTime = getCurrentRelativeTime(optionList, searchTimeInHHMM);
+        } else {
+          searchTime = searchTimeInHHMM;
+        }
+      } 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;
+    };
+
+    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;
+    };
+
+    var getCurrentRelativeTime = function getCurrentRelativeTime(optionList, searchTime) {
+      var searchTimeStr = searchTime.hour + ":" + 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 _a = getTimeDifference(searchItem, optionList[index]),
+            hour = _a.hour,
+            minute = _a.minute;
+
+        if (hour < minTime.hour || hour === minTime.hour && minute < minTime.mins) {
+          minTime.hour = hour;
+          minTime.mins = minute;
+          closestItemIndex = index;
+        }
+      }
+
+      return closestItemIndex;
+    };
+
+    var getSearchIndex = function getSearchIndex(optionList, searchTerm) {
+      var _a = formatSearchTerm(optionList, searchTerm),
+          hour = _a.hour,
+          min = _a.min;
+
+      if (min === '60') {
+        min = '00';
+        hour = (parseInt(hour, 10) + 1).toString();
+      }
+
+      var searchItem = hour + ":" + min;
+      var searchIndex = findClosestTimeIndex(optionList, searchItem);
+      return searchIndex;
+    };
+
+    var countNumberInStr = function countNumberInStr(searchTerm) {
+      var _a;
+
+      return ((_a = searchTerm.match(/\d/g)) === null || _a === void 0 ? void 0 : _a.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) {
+      if (!isValidSearchTerm(searchTerm)) {
+        return -1;
+      }
+
+      var searchIndex = getSearchIndex(options, searchTerm);
+      return searchIndex;
+    };
+
+    var getScrollIndex = function getScrollIndex(dropdownOptionList, searchTerm) {
+      var optionList = getValueFromOptionList(dropdownOptionList);
+
+      if (searchTerm === '') {
+        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 _a = React__namespace.useState(0),
+          tabIndex = _a[0],
+          setTabIndex = _a[1];
+
+      var _b = React__namespace.useState(false),
+          openPopover = _b[0],
+          setOpenPopover = _b[1];
+
+      var _c = React__namespace.useState(-1),
+          selectedIndex = _c[0],
+          setSelectedIndex = _c[1];
+
+      var _d = React__namespace.useState(0),
+          counter = _d[0],
+          setCounter = _d[1];
+
+      var dropdownOptionList = getDropdownOptionList(props);
+      React__namespace.useEffect(function () {
+        open !== undefined && setOpenPopover(open);
+      }, [open]);
+      React__namespace.useEffect(function () {
+        var timer;
+
+        if (openPopover && selectedIndex != -1) {
+          setTabIndex(selectedIndex);
+          timer = setTimeout(function () {
+            scrollToOptionIndex(selectedIndex, dropdownOptionList);
+          }, 100);
+        }
+
+        return function () {
+          clearTimeout(timer);
+        };
+      }, [openPopover]);
+      React__namespace.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__namespace.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,
@@ -4725,12 +5288,18 @@
         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__namespace.createElement(TimePickerWithSearch, __assign({}, props)) : /*#__PURE__*/React__namespace.createElement(TimePickerWithInput, __assign({}, props));
+    };
+    TimePicker.defaultProps = __assign(__assign({}, TimePickerWithInput.defaultProps), TimePickerWithSearch.defaultProps);
     TimePicker.displayName = 'TimePicker';
 
     var sizeMap = {
@@ -7686,12 +8255,17 @@
           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 = __assign({
+        onClick: onClickHandler,
+        href: menu.link
+      }, extractBaseProps(props));
+
       var ItemClass = classNames__default["default"]((_a = {}, _a['MenuItem'] = true, _a['MenuItem--vertical'] = true, _a['MenuItem--collapsed'] = !expanded, _a['MenuItem--expanded'] = expanded, _a['MenuItem--active'] = isActive, _a['MenuItem--disabled'] = menu.disabled, _a['MenuItem--subMenu'] = isChildren && expanded, _a['MenuItem--rounded'] = rounded && expanded, _a));
 
       var renderSubMenu = function renderSubMenu() {
@@ -7737,11 +8311,10 @@
         }
       });
 
-      return customItemRenderer ? customItemRenderer(customItemProps) : /*#__PURE__*/React__namespace.createElement("div", __assign({
+      return customItemRenderer ? customItemRenderer(customItemProps) : /*#__PURE__*/React__namespace.createElement(GenericText, __assign({
+        componentType: "a",
         className: ItemClass
-      }, baseProps, {
-        onClick: onClickHandler
-      }), /*#__PURE__*/React__namespace.createElement("div", {
+      }, baseProps), /*#__PURE__*/React__namespace.createElement("div", {
         className: "d-flex align-items-center overflow-hidden"
       }, menu.icon && /*#__PURE__*/React__namespace.createElement(Icon, {
         "data-test": "DesignSystem-VerticalNav--Icon",
@@ -11049,7 +11622,7 @@
       });
     };
 
-    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(evt) {
       return __awaiter(this, void 0, void 0, function () {
@@ -14778,7 +15351,7 @@
       vertical: false
     };
 
-    var version = "2.13.3";
+    var version = "2.13.4-2";
 
     exports.Avatar = Avatar;
     exports.AvatarGroup = AvatarGroup;
@@ -14843,6 +15416,7 @@
     exports.Paragraph = Paragraph;
     exports.Pills = Pills;
     exports.Placeholder = Placeholder;
+    exports.PlaceholderImage = PlaceholderImage;
     exports.PlaceholderParagraph = PlaceholderParagraph;
     exports.Popover = Popover;
     exports.ProgressBar = ProgressBar;