@razorpay/blade 7.2.2 → 8.0.0

package/build/components/index.web.js

@@ -3774,7 +3774,6 @@ var assignWithoutSideEffects = function assignWithoutSideEffects(component, sour
  */
 
 var isRoleMenu = function isRoleMenu(dropdownTriggerer) {
-  // @TODO: check this logic once we introduce new triggerer. This may not stand true.
   return isReactNative$4() || dropdownTriggerer !== 'SelectInput';
 };
 /**
@@ -3822,7 +3821,7 @@ var getSeparatorRole = function getSeparatorRole() {
 };
 var getActionListItemWrapperRole = function getActionListItemWrapperRole(hasFooterAction, dropdownTriggerer) {
   if (isRoleMenu(dropdownTriggerer)) {
-    return 'menu';
+    return undefined;
   }
 
   if (hasFooterAction) {
@@ -3894,7 +3893,6 @@ var getActionListProperties = function getActionListProperties(children) {
   var sectionData = [];
   var currentSection = null;
   var actionListOptions = [];
-  var defaultSelectedIndices = [];
   var actionListHeaderChild = null;
   var actionListFooterChild = null;
 
@@ -3903,7 +3901,26 @@ var getActionListProperties = function getActionListProperties(children) {
       actionListOptions.push({
         title: child.props.title,
         value: child.props.value,
-        href: child.props.href
+        onClickTrigger: function onClickTrigger(value) {
+          var _child$props$onClick, _child$props, _child$props$isSelect;
+
+          var anchorLink = child.props.href;
+          (_child$props$onClick = (_child$props = child.props).onClick) === null || _child$props$onClick === void 0 ? void 0 : _child$props$onClick.call(_child$props, {
+            name: child.props.value,
+            value: (_child$props$isSelect = child.props.isSelected) !== null && _child$props$isSelect !== void 0 ? _child$props$isSelect : value
+          });
+
+          if (anchorLink && !isReactNative$4()) {
+            var _child$props$target;
+
+            var target = (_child$props$target = child.props.target) !== null && _child$props$target !== void 0 ? _child$props$target : '_self';
+            window.open(anchorLink, target);
+
+            if (window.top) {
+              window.top.open(anchorLink, target);
+            }
+          }
+        }
       });
       var currentIndex = actionListOptions.length - 1;
       var foundSection = sectionData.find(function (v) {
@@ -3925,10 +3942,6 @@ var getActionListProperties = function getActionListProperties(children) {
         });
       }
 
-      if (child.props.isDefaultSelected) {
-        defaultSelectedIndices.push(currentIndex);
-      }
-
       var clonedChild = /*#__PURE__*/React__default.cloneElement(child, {
         // @ts-expect-error: TS doesn't understand the child's props
         _index: currentIndex
@@ -3998,8 +4011,7 @@ var getActionListProperties = function getActionListProperties(children) {
     childrenWithId: childrenWithId,
     actionListFooterChild: actionListFooterChild,
     actionListHeaderChild: actionListHeaderChild,
-    actionListOptions: actionListOptions,
-    defaultSelectedIndices: defaultSelectedIndices
+    actionListOptions: actionListOptions
   };
 };
 
@@ -4703,7 +4715,11 @@ var ActionListBox = /*#__PURE__*/assignWithoutSideEffects(_ActionListBox, {
  */
 var componentIds = {
   DropdownOverlay: 'DropdownOverlay',
-  Dropdown: 'Dropdown'
+  Dropdown: 'Dropdown',
+  triggers: {
+    SelectInput: 'SelectInput',
+    DropdownButton: 'DropdownButton'
+  }
 }; // Save a list of named combobox actions, for future readability
 
 var SelectActions = {
@@ -4877,8 +4893,8 @@ function isScrollable(element) {
  *
  * This function handles all the keydown actions.
  */
-var performAction = function performAction(action, e, actions) {
-  var event = e.event;
+var performAction = function performAction(action, payload, actions) {
+  var event = payload.event;
 
   switch (action) {
     case SelectActions.Last: // @ts-expect-error: intentional fallthrough, ignoring the warning
@@ -4902,7 +4918,7 @@ var performAction = function performAction(action, e, actions) {
 
     case SelectActions.Close:
       event.preventDefault();
-      actions.setIsOpen(false);
+      actions.close();
       return true;
 
     case SelectActions.Type:
@@ -4982,20 +4998,22 @@ var makeInputDisplayValue = function makeInputDisplayValue(selectedIndices, opti
   return "".concat(selectedIndices.length, " items selected");
 };
 
-var _excluded$4N = ["isOpen", "setIsOpen", "selectedIndices", "setSelectedIndices", "activeIndex", "setActiveIndex", "shouldIgnoreBlur", "setShouldIgnoreBlur", "isKeydownPressed", "setIsKeydownPressed", "options", "selectionType"];
+var _excluded$4N = ["isOpen", "setIsOpen", "close", "selectedIndices", "setSelectedIndices", "activeIndex", "setActiveIndex", "shouldIgnoreBlur", "setShouldIgnoreBlur", "isKeydownPressed", "setIsKeydownPressed", "options", "selectionType", "changeCallbackTriggerer", "setChangeCallbackTriggerer", "isControlled", "setControlledValueIndices"];
 
 function ownKeys$5m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$5l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5m(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 var noop$1 = function noop() {};
 
 var DropdownContext = /*#__PURE__*/React__default.createContext({
   isOpen: false,
   setIsOpen: noop$1,
+  close: noop$1,
   selectedIndices: [],
   setSelectedIndices: noop$1,
+  controlledValueIndices: [],
+  setControlledValueIndices: noop$1,
   options: [],
   setOptions: noop$1,
   activeIndex: -1,
@@ -5010,6 +5028,10 @@ var DropdownContext = /*#__PURE__*/React__default.createContext({
   setHasLabelOnLeft: noop$1,
   isKeydownPressed: false,
   setIsKeydownPressed: noop$1,
+  changeCallbackTriggerer: 0,
+  setChangeCallbackTriggerer: noop$1,
+  isControlled: false,
+  setIsControlled: noop$1,
   dropdownBaseId: '',
   actionListItemRef: {
     current: null
@@ -5031,6 +5053,7 @@ var useDropdown = function useDropdown() {
   var _React$useContext = React__default.useContext(DropdownContext),
       isOpen = _React$useContext.isOpen,
       setIsOpen = _React$useContext.setIsOpen,
+      close = _React$useContext.close,
       selectedIndices = _React$useContext.selectedIndices,
       setSelectedIndices = _React$useContext.setSelectedIndices,
       activeIndex = _React$useContext.activeIndex,
@@ -5041,44 +5064,66 @@ var useDropdown = function useDropdown() {
       setIsKeydownPressed = _React$useContext.setIsKeydownPressed,
       options = _React$useContext.options,
       selectionType = _React$useContext.selectionType,
+      changeCallbackTriggerer = _React$useContext.changeCallbackTriggerer,
+      setChangeCallbackTriggerer = _React$useContext.setChangeCallbackTriggerer,
+      isControlled = _React$useContext.isControlled,
+      setControlledValueIndices = _React$useContext.setControlledValueIndices,
       rest = _objectWithoutProperties$1(_React$useContext, _excluded$4N);
 
   var bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();
 
+  var setIndices = function setIndices(indices) {
+    if (isControlled) {
+      setControlledValueIndices(indices);
+    } else {
+      setSelectedIndices(indices);
+    }
+  };
   /**
    * Marks the given index as selected.
    *
    * In single select, it also closes the menu.
    * In multiselect, it keeps the menu open for more selections
    */
+
+
   var selectOption = function selectOption(index) {
     var properties = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       closeOnSelection: true
     };
+    var isSelected = false;
 
     if (index < 0 || index > options.length - 1) {
-      return;
+      return isSelected;
     }
 
     if (selectionType === 'multiple') {
       if (selectedIndices.includes(index)) {
         // remove existing item
         var existingItemIndex = selectedIndices.indexOf(index);
-        setSelectedIndices([].concat(_toConsumableArray$1(selectedIndices.slice(0, existingItemIndex)), _toConsumableArray$1(selectedIndices.slice(existingItemIndex + 1))));
+        setIndices([].concat(_toConsumableArray$1(selectedIndices.slice(0, existingItemIndex)), _toConsumableArray$1(selectedIndices.slice(existingItemIndex + 1))));
+        isSelected = false;
       } else {
-        setSelectedIndices([].concat(_toConsumableArray$1(selectedIndices), [index]));
+        setIndices([].concat(_toConsumableArray$1(selectedIndices), [index]));
+        isSelected = true;
       }
     } else {
-      setSelectedIndices([index]);
-    }
+      setIndices([index]);
+      isSelected = true;
+    } // Triggers `onChange` on SelectInput
+
+
+    setChangeCallbackTriggerer(changeCallbackTriggerer + 1);
 
     if (activeIndex !== index) {
       setActiveIndex(index);
     }
 
     if (properties !== null && properties !== void 0 && properties.closeOnSelection && selectionType !== 'multiple') {
-      setIsOpen(false);
+      close();
     }
+
+    return isSelected;
   };
   /**
    * Click listener for combobox (or any triggerer of the dropdown)
@@ -5086,7 +5131,11 @@ var useDropdown = function useDropdown() {
 
 
   var onTriggerClick = function onTriggerClick() {
-    setIsOpen(!isOpen);
+    if (isOpen) {
+      close();
+    } else {
+      setIsOpen(true);
+    }
   };
   /**
    * Blur handler on combobox. Also handles the selection logic when user moves focus
@@ -5125,7 +5174,7 @@ var useDropdown = function useDropdown() {
       }
 
       if (!(bottomSheetAndDropdownGlue !== null && bottomSheetAndDropdownGlue !== void 0 && bottomSheetAndDropdownGlue.dropdownHasBottomSheet)) {
-        setIsOpen(false);
+        close();
       }
     }
   };
@@ -5229,12 +5278,13 @@ var useDropdown = function useDropdown() {
     if (actionType) {
       performAction(actionType, e, {
         setIsOpen: setIsOpen,
+        close: close,
         onOptionChange: onOptionChange,
         onComboType: onComboType,
         selectCurrentOption: function selectCurrentOption() {
-          var _options$activeIndex;
+          var _options$activeIndex$, _options$activeIndex;
 
-          selectOption(activeIndex);
+          var isSelected = selectOption(activeIndex);
 
           if (rest.hasFooterAction && !isReactNative$4()) {
             var _rest$triggererRef$cu2;
@@ -5242,15 +5292,7 @@ var useDropdown = function useDropdown() {
             (_rest$triggererRef$cu2 = rest.triggererRef.current) === null || _rest$triggererRef$cu2 === void 0 ? void 0 : _rest$triggererRef$cu2.focus();
           }
 
-          var anchorLink = (_options$activeIndex = options[activeIndex]) === null || _options$activeIndex === void 0 ? void 0 : _options$activeIndex.href;
-
-          if (anchorLink) {
-            window.location.href = anchorLink;
-
-            if (window.top) {
-              window.top.location.href = anchorLink;
-            }
-          }
+          (_options$activeIndex$ = (_options$activeIndex = options[activeIndex]).onClickTrigger) === null || _options$activeIndex$ === void 0 ? void 0 : _options$activeIndex$.call(_options$activeIndex, isSelected);
         }
       });
     }
@@ -5259,8 +5301,10 @@ var useDropdown = function useDropdown() {
   return _objectSpread$5l({
     isOpen: isOpen,
     setIsOpen: setIsOpen,
+    close: close,
     selectedIndices: selectedIndices,
     setSelectedIndices: setSelectedIndices,
+    setControlledValueIndices: setControlledValueIndices,
     onTriggerClick: onTriggerClick,
     onTriggerKeydown: onTriggerKeydown,
     onTriggerBlur: onTriggerBlur,
@@ -5271,6 +5315,9 @@ var useDropdown = function useDropdown() {
     setShouldIgnoreBlur: setShouldIgnoreBlur,
     isKeydownPressed: isKeydownPressed,
     setIsKeydownPressed: setIsKeydownPressed,
+    changeCallbackTriggerer: changeCallbackTriggerer,
+    setChangeCallbackTriggerer: setChangeCallbackTriggerer,
+    isControlled: isControlled,
     options: options,
     value: makeInputValue(selectedIndices, options),
     displayValue: makeInputDisplayValue(selectedIndices, options),
@@ -5350,7 +5397,6 @@ var _ActionList = function _ActionList(_ref) {
       actionListItemRef = _useDropdown.actionListItemRef,
       selectionType = _useDropdown.selectionType,
       dropdownBaseId = _useDropdown.dropdownBaseId,
-      setSelectedIndices = _useDropdown.setSelectedIndices,
       dropdownTriggerer = _useDropdown.dropdownTriggerer,
       hasFooterAction = _useDropdown.hasFooterAction;
 
@@ -5366,16 +5412,12 @@ var _ActionList = function _ActionList(_ref) {
       sectionData = _React$useMemo.sectionData,
       childrenWithId = _React$useMemo.childrenWithId,
       actionListOptions = _React$useMemo.actionListOptions,
-      defaultSelectedIndices = _React$useMemo.defaultSelectedIndices,
       actionListHeaderChild = _React$useMemo.actionListHeaderChild,
       actionListFooterChild = _React$useMemo.actionListFooterChild;
 
   React__default.useEffect(function () {
     setOptions(actionListOptions); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [actionListOptions]);
-  React__default.useEffect(function () {
-    setSelectedIndices(defaultSelectedIndices); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   var actionListContainerRole = getActionListContainerRole(hasFooterAction, dropdownTriggerer);
   var actionListItemWrapperRole = getActionListItemWrapperRole(hasFooterAction, dropdownTriggerer);
   var isMultiSelectable = selectionType === 'multiple';
@@ -17928,7 +17970,26 @@ var _ActionListItem = function _ActionListItem(props) {
 
   var isMobile = platform === 'onMobile';
   var renderOnWebAs = props.href ? 'a' : 'button';
-  var isSelected = typeof props._index === 'number' ? selectedIndices.includes(props._index) : props.isDefaultSelected;
+  /**
+   * In SelectInput, returns the isSelected according to selected indexes in the state
+   *
+   * In Other Triggers (Menu Usecase), returns `props.isSelected` since passing the
+   * isSelected prop explicitly is the only way to select item in menu
+   */
+
+  var getIsSelected = function getIsSelected() {
+    if (dropdownTriggerer === 'SelectInput') {
+      if (typeof props._index === 'number') {
+        return selectedIndices.includes(props._index);
+      }
+
+      return undefined;
+    }
+
+    return props.isSelected;
+  };
+
+  var isSelected = getIsSelected();
   React__default.useEffect(function () {
     validateActionListItemProps({
       leading: props.leading,
@@ -17951,6 +18012,7 @@ var _ActionListItem = function _ActionListItem(props) {
       type: "button",
       tabIndex: -1,
       href: props.href,
+      target: props.target,
       className: activeIndex === props._index ? 'active-focus' : ''
     }, makeAccessible({
       selected: isSelected,
@@ -17958,16 +18020,15 @@ var _ActionListItem = function _ActionListItem(props) {
       role: getActionListItemRole(dropdownTriggerer, props.href),
       disabled: props.isDisabled
     })), makeActionListItemClickable(function (e) {
-      var _props$onClick;
-
       if (typeof props._index === 'number') {
+        var _props$onClick;
+
         onOptionClick(e, props._index);
+        (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, {
+          name: props.value,
+          value: isSelected
+        });
       }
-
-      (_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, {
-        name: props.value,
-        value: isSelected
-      });
     })), metaAttribute({
       name: MetaConstants.ActionListItem,
       testID: props.testID
@@ -18006,7 +18067,8 @@ var _ActionListItem = function _ActionListItem(props) {
 };
 
 var ActionListItem = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.memo(_ActionListItem), {
-  componentId: componentIds$1.ActionListItem
+  componentId: componentIds$1.ActionListItem,
+  displayName: componentIds$1.ActionListItem
 });
 
 function ownKeys$Q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -18132,7 +18194,7 @@ var _ActionListFooter = function _ActionListFooter(props) {
       setHasFooterAction = _useDropdown.setHasFooterAction,
       onTriggerKeydown = _useDropdown.onTriggerKeydown,
       activeIndex = _useDropdown.activeIndex,
-      setIsOpen = _useDropdown.setIsOpen,
+      close = _useDropdown.close,
       selectionType = _useDropdown.selectionType;
 
   var bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();
@@ -18169,7 +18231,7 @@ var _ActionListFooter = function _ActionListFooter(props) {
       if (shouldIgnoreDropdownKeydown) {
         if (selectionType === 'single' && !(bottomSheetAndDropdownGlue !== null && bottomSheetAndDropdownGlue !== void 0 && bottomSheetAndDropdownGlue.dropdownHasBottomSheet)) {
           // We close the dropdown on clicks in single select
-          setIsOpen(false);
+          close();
         }
 
         return;
@@ -18186,7 +18248,7 @@ var _ActionListFooter = function _ActionListFooter(props) {
       var nextItemRole = nextItem === null || nextItem === void 0 ? void 0 : nextItem.getAttribute('role');
 
       if (nextItemRole !== 'combobox' && nextItemRole !== 'option' && !(bottomSheetAndDropdownGlue !== null && bottomSheetAndDropdownGlue !== void 0 && bottomSheetAndDropdownGlue.dropdownHasBottomSheet)) {
-        setIsOpen(false);
+        close();
       }
     }
   }, makeAccessible({
@@ -18774,7 +18836,7 @@ var getStringFromReactText = function getStringFromReactText(childReactText) {
   return String(childReactText);
 };
 
-var _excluded$o = ["variant", "intent", "contrast", "size", "icon", "iconPosition", "isDisabled", "isFullWidth", "isLoading", "onClick", "type", "children", "accessibilityLabel", "testID"];
+var _excluded$o = ["variant", "intent", "contrast", "size", "icon", "iconPosition", "isDisabled", "isFullWidth", "isLoading", "onClick", "onBlur", "onKeyDown", "type", "children", "accessibilityLabel", "testID"];
 
 function ownKeys$L(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -18965,6 +19027,8 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
       _ref4$isLoading = _ref4.isLoading,
       isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
       onClick = _ref4.onClick,
+      onBlur = _ref4.onBlur,
+      onKeyDown = _ref4.onKeyDown,
       _ref4$type = _ref4.type,
       type = _ref4$type === void 0 ? 'button' : _ref4$type,
       children = _ref4.children,
@@ -19051,6 +19115,8 @@ var _BaseButton = function _BaseButton(_ref4, ref) {
     hoverBackgroundColor: hoverBackgroundColor,
     isFullWidth: isFullWidth,
     onClick: onClick,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
     type: type,
     borderWidth: borderWidth,
     borderRadius: borderRadius,
@@ -20146,7 +20212,8 @@ function ownKeys$C(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$C(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$C(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var _Button = function _Button(_ref, ref) {
+var _Button = function _Button( // While adding any prop here, make sure to handle it in DropdownButton as well
+_ref, ref) {
   var children = _ref.children,
       icon = _ref.icon,
       _ref$iconPosition = _ref.iconPosition,
@@ -20632,7 +20699,7 @@ var ComponentIds$1 = {
   BottomSheetGrabHandle: 'BottomSheetGrabHandle'
 };
 
-var _excluded$g = ["children", "selectionType"];
+var _excluded$g = ["children", "selectionType", "onDismiss"];
 
 function ownKeys$x(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -20668,6 +20735,7 @@ var _Dropdown = function _Dropdown(_ref) {
   var children = _ref.children,
       _ref$selectionType = _ref.selectionType,
       selectionType = _ref$selectionType === void 0 ? 'single' : _ref$selectionType,
+      onDismiss = _ref.onDismiss,
       styledProps = _objectWithoutProperties$1(_ref, _excluded$g);
 
   var _React$useState = React__default.useState(false),
@@ -20685,64 +20753,90 @@ var _Dropdown = function _Dropdown(_ref) {
       selectedIndices = _React$useState6[0],
       setSelectedIndices = _React$useState6[1];
 
-  var _React$useState7 = React__default.useState(-1),
+  var _React$useState7 = React__default.useState([]),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      activeIndex = _React$useState8[0],
-      setActiveIndex = _React$useState8[1];
+      controlledValueIndices = _React$useState8[0],
+      setControlledValueIndices = _React$useState8[1];
 
-  var _React$useState9 = React__default.useState(false),
+  var _React$useState9 = React__default.useState(-1),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      shouldIgnoreBlur = _React$useState10[0],
-      setShouldIgnoreBlur = _React$useState10[1];
+      activeIndex = _React$useState10[0],
+      setActiveIndex = _React$useState10[1];
 
   var _React$useState11 = React__default.useState(false),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      shouldIgnoreBlurAnimation = _React$useState12[0],
-      setShouldIgnoreBlurAnimation = _React$useState12[1];
-
-  var triggererRef = React__default.useRef(null);
-  var actionListItemRef = React__default.useRef(null);
+      shouldIgnoreBlur = _React$useState12[0],
+      setShouldIgnoreBlur = _React$useState12[1];
 
   var _React$useState13 = React__default.useState(false),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      hasFooterAction = _React$useState14[0],
-      setHasFooterAction = _React$useState14[1];
+      shouldIgnoreBlurAnimation = _React$useState14[0],
+      setShouldIgnoreBlurAnimation = _React$useState14[1];
+
+  var triggererRef = React__default.useRef(null);
+  var actionListItemRef = React__default.useRef(null);
 
   var _React$useState15 = React__default.useState(false),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      hasLabelOnLeft = _React$useState16[0],
-      setHasLabelOnLeft = _React$useState16[1];
+      hasFooterAction = _React$useState16[0],
+      setHasFooterAction = _React$useState16[1];
 
   var _React$useState17 = React__default.useState(false),
       _React$useState18 = _slicedToArray(_React$useState17, 2),
-      isKeydownPressed = _React$useState18[0],
-      setIsKeydownPressed = _React$useState18[1]; // keep track if dropdown contains bottomsheet
-
+      hasLabelOnLeft = _React$useState18[0],
+      setHasLabelOnLeft = _React$useState18[1];
 
   var _React$useState19 = React__default.useState(false),
       _React$useState20 = _slicedToArray(_React$useState19, 2),
-      dropdownHasBottomSheet = _React$useState20[0],
-      setDropdownHasBottomSheet = _React$useState20[1];
+      isKeydownPressed = _React$useState20[0],
+      setIsKeydownPressed = _React$useState20[1];
+
+  var _React$useState21 = React__default.useState(0),
+      _React$useState22 = _slicedToArray(_React$useState21, 2),
+      changeCallbackTriggerer = _React$useState22[0],
+      setChangeCallbackTriggerer = _React$useState22[1];
+
+  var _React$useState23 = React__default.useState(false),
+      _React$useState24 = _slicedToArray(_React$useState23, 2),
+      isControlled = _React$useState24[0],
+      setIsControlled = _React$useState24[1]; // keep track if dropdown contains bottomsheet
+
+
+  var _React$useState25 = React__default.useState(false),
+      _React$useState26 = _slicedToArray(_React$useState25, 2),
+      dropdownHasBottomSheet = _React$useState26[0],
+      setDropdownHasBottomSheet = _React$useState26[1];
 
   var dropdownBaseId = useId('dropdown');
   var dropdownTriggerer = React__default.useRef();
+  var close = React__default.useCallback(function () {
+    setIsOpen(false);
+    onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+  }, [onDismiss]);
   React__default.Children.map(children, function (child) {
     if ( /*#__PURE__*/React__default.isValidElement(child)) {
-      if (!isValidAllowedChildren(child, 'SelectInput') && !isValidAllowedChildren(child, componentIds.DropdownOverlay) && !isValidAllowedChildren(child, ComponentIds$1.BottomSheet)) {
+      if (!isValidAllowedChildren(child, componentIds.triggers.SelectInput) && !isValidAllowedChildren(child, componentIds.triggers.DropdownButton) && !isValidAllowedChildren(child, componentIds.DropdownOverlay) && !isValidAllowedChildren(child, ComponentIds$1.BottomSheet)) {
         throw new Error("[Dropdown]: Dropdown can only have `SelectInput` and `DropdownOverlay` as children\n\n Check out: https://blade.razorpay.com/?path=/story/components-dropdown");
       }
 
-      if (isValidAllowedChildren(child, 'SelectInput')) {
+      if (isValidAllowedChildren(child, componentIds.triggers.SelectInput)) {
         dropdownTriggerer.current = 'SelectInput';
       }
+
+      if (isValidAllowedChildren(child, componentIds.triggers.DropdownButton)) {
+        dropdownTriggerer.current = 'DropdownButton';
+      }
     }
   });
   var contextValue = React__default.useMemo(function () {
     return {
       isOpen: isOpen,
       setIsOpen: setIsOpen,
+      close: close,
       selectedIndices: selectedIndices,
       setSelectedIndices: setSelectedIndices,
+      controlledValueIndices: controlledValueIndices,
+      setControlledValueIndices: setControlledValueIndices,
       options: options,
       setOptions: setOptions,
       activeIndex: activeIndex,
@@ -20761,23 +20855,24 @@ var _Dropdown = function _Dropdown(_ref) {
       setHasFooterAction: setHasFooterAction,
       hasLabelOnLeft: hasLabelOnLeft,
       setHasLabelOnLeft: setHasLabelOnLeft,
-      dropdownTriggerer: dropdownTriggerer.current
+      dropdownTriggerer: dropdownTriggerer.current,
+      changeCallbackTriggerer: changeCallbackTriggerer,
+      setChangeCallbackTriggerer: setChangeCallbackTriggerer,
+      isControlled: isControlled,
+      setIsControlled: setIsControlled
     };
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isOpen, selectedIndices, options, activeIndex, shouldIgnoreBlur, shouldIgnoreBlurAnimation, selectionType, hasFooterAction, hasLabelOnLeft, isKeydownPressed]); // This is the dismiss function which will be injected into the BottomSheet
-  // Basically <BottomSheet onDismiss={onBottomSheetDismiss} />
-
-  var onBottomSheetDismiss = React__default.useCallback(function () {
-    setIsOpen(false);
-  }, []);
+  [isOpen, selectedIndices, controlledValueIndices, options, activeIndex, shouldIgnoreBlur, shouldIgnoreBlurAnimation, selectionType, hasFooterAction, hasLabelOnLeft, isKeydownPressed, changeCallbackTriggerer, isControlled]);
   var BottomSheetAndDropdownGlueContextValue = React__default.useMemo(function () {
     return {
       isOpen: isOpen,
       dropdownHasBottomSheet: dropdownHasBottomSheet,
       setDropdownHasBottomSheet: setDropdownHasBottomSheet,
-      onBottomSheetDismiss: onBottomSheetDismiss
+      // This is the dismiss function which will be injected into the BottomSheet
+      // Basically <BottomSheet onDismiss={onBottomSheetDismiss} />
+      onBottomSheetDismiss: close
     };
-  }, [dropdownHasBottomSheet, isOpen, onBottomSheetDismiss]);
+  }, [dropdownHasBottomSheet, isOpen, close]);
   return /*#__PURE__*/jsx(BottomSheetAndDropdownGlueContext.Provider, {
     value: BottomSheetAndDropdownGlueContextValue,
     children: /*#__PURE__*/jsx(DropdownContext.Provider, {
@@ -23231,7 +23326,7 @@ var SelectChevronIcon = function SelectChevronIcon(props) {
   });
 };
 
-var _excluded$7 = ["icon", "onChange", "placeholder", "onBlur"];
+var _excluded$7 = ["icon", "onChange", "defaultValue", "placeholder", "onBlur"];
 
 function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -23253,7 +23348,15 @@ var _SelectInput = function _SelectInput(props, ref) {
       hasFooterAction = _useDropdown.hasFooterAction,
       dropdownTriggerer = _useDropdown.dropdownTriggerer,
       shouldIgnoreBlurAnimation = _useDropdown.shouldIgnoreBlurAnimation,
-      setHasLabelOnLeft = _useDropdown.setHasLabelOnLeft;
+      setHasLabelOnLeft = _useDropdown.setHasLabelOnLeft,
+      setSelectedIndices = _useDropdown.setSelectedIndices,
+      controlledValueIndices = _useDropdown.controlledValueIndices,
+      options = _useDropdown.options,
+      changeCallbackTriggerer = _useDropdown.changeCallbackTriggerer,
+      isControlled = _useDropdown.isControlled,
+      setIsControlled = _useDropdown.setIsControlled,
+      selectionType = _useDropdown.selectionType,
+      selectedIndices = _useDropdown.selectedIndices;
 
   var inputRef = useBladeInnerRef(ref, {
     onFocus: function onFocus(opts) {
@@ -23263,19 +23366,92 @@ var _SelectInput = function _SelectInput(props, ref) {
     }
   });
 
-  var icon = props.icon,
-      onChange = props.onChange,
-      _props$placeholder = props.placeholder,
+  var icon = props.icon;
+      props.onChange;
+      props.defaultValue;
+      var _props$placeholder = props.placeholder,
       placeholder = _props$placeholder === void 0 ? 'Select Option' : _props$placeholder,
       _onBlur = props.onBlur,
       baseInputProps = _objectWithoutProperties$1(props, _excluded$7);
 
+  var getValuesArrayFromIndices = function getValuesArrayFromIndices() {
+    var indices = [];
+
+    if (isControlled) {
+      indices = controlledValueIndices;
+    } else {
+      indices = selectedIndices;
+    }
+
+    return indices.map(function (selectionIndex) {
+      return options[selectionIndex].value;
+    });
+  };
+
+  var isFirstRenderRef = React__default.useRef(true);
+
+  var selectValues = function selectValues(valuesToSelect) {
+    if (options.length > 0) {
+      if (typeof valuesToSelect === 'string') {
+        // single select control
+        var selectedItemIndex = options.findIndex(function (option) {
+          return option.value === valuesToSelect;
+        });
+
+        if (selectedItemIndex >= 0) {
+          setSelectedIndices([selectedItemIndex]);
+        }
+      } else {
+        // multiselect control
+        // Handles repeated values in user state
+        var uniqueValues = Array.from(new Set(valuesToSelect)); // Handle selectionType single with multiselect values
+
+        var userValues = selectionType === 'single' ? [valuesToSelect === null || valuesToSelect === void 0 ? void 0 : valuesToSelect[0]] : uniqueValues;
+        var selectedItemIndices = userValues.map(function (optionValue) {
+          return options.findIndex(function (option) {
+            return option.value === optionValue;
+          });
+        }).filter(function (value) {
+          return value >= 0;
+        });
+        setSelectedIndices(selectedItemIndices);
+      }
+    }
+  }; // Handles `defaultValue` prop
+
+
   React__default.useEffect(function () {
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      name: props.name,
-      values: value.split(', ')
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, props.name]);
+    if (options.length > 0 && props.defaultValue) {
+      selectValues(props.defaultValue);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [options.length]); // Handles `value` prop
+
+  React__default.useEffect(function () {
+    if (options.length > 0 && props.value) {
+      if (!isControlled) {
+        setIsControlled(true);
+      }
+
+      selectValues(props.value);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [props.value, options]);
+  React__default.useEffect(function () {
+    // Ignore calling onChange on mount
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+
+    if (props.onChange && !isFirstRenderRef.current) {
+      props.onChange({
+        name: props.name,
+        values: getValuesArrayFromIndices()
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [changeCallbackTriggerer]);
   React__default.useEffect(function () {
     setHasLabelOnLeft(props.labelPosition === 'left');
   }, [props.labelPosition, setHasLabelOnLeft]);
@@ -23372,7 +23548,7 @@ var _SelectInput = function _SelectInput(props, ref) {
 
 
 var SelectInput = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.forwardRef(_SelectInput), {
-  componentId: 'SelectInput'
+  componentId: componentIds.triggers.SelectInput
 });
 
 var _excluded$6 = ["accessibilityLabel", "children", "size", "intent", "testID"];