From 719796ef35ef475513e4453cadf4815871d57790 Mon Sep 17 00:00:00 2001 From: Kanika Bansal Date: Thu, 10 Oct 2024 16:06:20 +0530 Subject: [PATCH] fix: scrollbar,selective sorting,id icon --- public/hyperswitch/assets/copyid.svg | 6 +- src/components/SelectBox.res | 21 +- src/components/SelectBox.resi | 540 ++++++++++++----------- src/screens/OMPSwitch/MerchantSwitch.res | 1 + src/screens/OMPSwitch/OMPSwitchUtils.res | 9 +- src/screens/OMPSwitch/OrgSwitch.res | 1 + src/screens/OMPSwitch/ProfileSwitch.res | 1 + 7 files changed, 299 insertions(+), 280 deletions(-) diff --git a/public/hyperswitch/assets/copyid.svg b/public/hyperswitch/assets/copyid.svg index 3206e31f9..f47257706 100644 --- a/public/hyperswitch/assets/copyid.svg +++ b/public/hyperswitch/assets/copyid.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/components/SelectBox.res b/src/components/SelectBox.res index 6bf6ba731..5a2dbc604 100644 --- a/src/components/SelectBox.res +++ b/src/components/SelectBox.res @@ -1104,10 +1104,11 @@ module RenderListItemInBaseRadio = { ~optionClass="", ~selectClass="", ~customScrollStyle=?, + ~shouldDisplaySelectedOnTop ) => { let decodedValue = value->JSON.Decode.string - switch decodedValue { - | Some(str) => + switch (decodedValue, shouldDisplaySelectedOnTop) { + | (Some(str), true) => newOptions->Array.sort((item1, item2) => { if item1.value == str { -1. @@ -1117,7 +1118,7 @@ module RenderListItemInBaseRadio = { 0. } }) - | None => () + | (_, _) => () } let dropdownList = newOptions @@ -1187,7 +1188,6 @@ module RenderListItemInBaseRadio = { let sidebarScrollbarCss = ` @supports (-webkit-appearance: none) { .sidebar-scrollbar { - scrollbar-width: thin !important; scrollbar-color: #8a8c8f; } @@ -1292,6 +1292,7 @@ module BaseRadio = { ~selectClass="", ~customScrollStyle=?, ~dropdownContainerStyle="", + ~shouldDisplaySelectedOnTop=false ) => { let options = React.useMemo(() => { options->Array.map(makeNonOptional) @@ -1445,7 +1446,10 @@ module BaseRadio = { }}
+ className={`${switch customScrollStyle { + | Some(_) => "max-h-full" + | None => maxHeight + }} ${listPadding} ${overflowClass} text-fs-13 font-semibold text-jp-gray-900 text-opacity-75 dark:text-jp-gray-text_darktheme dark:text-opacity-75 ${inlineClass} ${baseComponentCustomStyle}`}> {if newOptions->Array.length === 0 && showMatchingRecordsText {
{React.string("No matching records found")} @@ -1474,6 +1478,7 @@ module BaseRadio = { optionClass selectClass ?customScrollStyle + shouldDisplaySelectedOnTop /> } else { { @@ -1504,6 +1509,7 @@ module BaseRadio = { isHorizontal customMarginStyleOfListItem="ml-8 mx-3 py-2 gap-2" ?customScrollStyle + shouldDisplaySelectedOnTop /> }) @@ -1602,6 +1608,7 @@ module BaseDropdown = { ~customDropdownOuterClass="", ~customScrollStyle=?, ~dropdownContainerStyle="", + ~shouldDisplaySelectedOnTop=false ) => { let transformedOptions = useTransformed(options) let isMobileView = MatchMedia.useMobileChecker() @@ -1871,6 +1878,7 @@ module BaseDropdown = { selectClass ?customScrollStyle dropdownContainerStyle + shouldDisplaySelectedOnTop /> } @@ -2282,6 +2290,7 @@ let make = ( ~onItemSelect=(_, _) => (), ~wrapBasis="", ~customScrollStyle=?, + ~shouldDisplaySelectedOnTop=false, (), ) => { let isMobileView = MatchMedia.useMobileChecker() @@ -2354,6 +2363,7 @@ let make = ( ?searchInputPlaceHolder showSearchIcon ?customScrollStyle + shouldDisplaySelectedOnTop /> } else if allowMultiSelect { } } diff --git a/src/components/SelectBox.resi b/src/components/SelectBox.resi index 695f932cf..fc336a988 100644 --- a/src/components/SelectBox.resi +++ b/src/components/SelectBox.resi @@ -4,51 +4,53 @@ external toDict: 'a => RescriptCore.Dict.t<'t> = "%identity" @send external focus: Dom.element => unit = "focus" external ffInputToSelectInput: ReactFinalForm.fieldRenderPropsInput => ReactFinalForm.fieldRenderPropsCustomInput< array, -> = "%identity" +> = + "%identity" external ffInputToRadioInput: ReactFinalForm.fieldRenderPropsInput => ReactFinalForm.fieldRenderPropsCustomInput< string, -> = "%identity" +> = + "%identity" let regex: (string, string) => RescriptCore.RegExp.t module ListItem: { @react.component let make: ( - ~isDropDown: bool, - ~searchString: string, - ~multiSelect: bool, - ~optionSize: CheckBoxIcon.size=?, - ~isSelectedStateMinus: bool=?, - ~isSelected: bool, - ~isPrevSelected: bool=?, - ~isNextSelected: bool=?, - ~onClick: JsxEventU.Mouse.t => unit, - ~text: Js.String2.t, - ~fill: string=?, - ~labelValue: Js.String2.t=?, - ~isDisabled: bool=?, - ~icon: Button.iconType, - ~leftVacennt: bool=?, - ~showToggle: bool=?, - ~customStyle: string=?, - ~serialNumber: option=?, - ~isMobileView: bool=?, - ~description: option=?, - ~customLabelStyle: option=?, - ~customMarginStyle: string=?, - ~listFlexDirection: string=?, - ~customSelectStyle: string=?, - ~textOverflowClass: string=?, - ~dataId: int, - ~showDescriptionAsTool: bool=?, - ~optionClass: string=?, - ~selectClass: string=?, - ~toggleProps: string=?, - ~checkboxDimension: string=?, - ~iconStroke: string=?, - ~showToolTipOptions: bool=?, - ~textEllipsisForDropDownOptions: bool=?, - ~textColorClass: string=?, - ~customRowClass: string=?, - ) => React.element + ~isDropDown: bool, + ~searchString: string, + ~multiSelect: bool, + ~optionSize: CheckBoxIcon.size=?, + ~isSelectedStateMinus: bool=?, + ~isSelected: bool, + ~isPrevSelected: bool=?, + ~isNextSelected: bool=?, + ~onClick: JsxEventU.Mouse.t => unit, + ~text: Js.String2.t, + ~fill: string=?, + ~labelValue: Js.String2.t=?, + ~isDisabled: bool=?, + ~icon: Button.iconType, + ~leftVacennt: bool=?, + ~showToggle: bool=?, + ~customStyle: string=?, + ~serialNumber: option=?, + ~isMobileView: bool=?, + ~description: option=?, + ~customLabelStyle: option=?, + ~customMarginStyle: string=?, + ~listFlexDirection: string=?, + ~customSelectStyle: string=?, + ~textOverflowClass: string=?, + ~dataId: int, + ~showDescriptionAsTool: bool=?, + ~optionClass: string=?, + ~selectClass: string=?, + ~toggleProps: string=?, + ~checkboxDimension: string=?, + ~iconStroke: string=?, + ~showToolTipOptions: bool=?, + ~textEllipsisForDropDownOptions: bool=?, + ~textColorClass: string=?, + ~customRowClass: string=?, +) => React.element } type dropdownOptionWithoutOptional = { label: string, @@ -80,110 +82,111 @@ let makeOptions: array => array module BaseSelect: { @react.component let make: ( - ~showSelectAll: bool=?, - ~showDropDown: bool=?, - ~isDropDown: bool=?, - ~options: array, - ~optionSize: CheckBoxIcon.size=?, - ~isSelectedStateMinus: bool=?, - ~onSelect: array => unit, - ~value: RescriptCore.JSON.t, - ~onBlur: ReactEvent.Focus.t => unit=?, - ~showClearAll: bool=?, - ~isHorizontal: bool=?, - ~insertselectBtnRef: ReactDOM.Ref.callbackDomRef=?, - ~insertclearBtnRef: ReactDOM.Ref.callbackDomRef=?, - ~customLabelStyle: string=?, - ~showToggle: bool=?, - ~showSerialNumber: bool=?, - ~heading: string=?, - ~showSelectionAsChips: bool=?, - ~maxHeight: string=?, - ~searchable: bool=?, - ~optionRigthElement: React.element=?, - ~searchInputPlaceHolder: string=?, - ~showSearchIcon: bool=?, - ~customStyle: string=?, - ~customMargin: string=?, - ~disableSelect: bool=?, - ~deselectDisable: bool=?, - ~hideBorder: bool=?, - ~allSelectType: allSelectType=?, - ~isMobileView: bool=?, - ~isModalView: bool=?, - ~customSearchStyle: string=?, - ~hasApplyButton: bool=?, - ~setShowDropDown: ('a => bool) => unit=?, - ~dropdownCustomWidth: string=?, - ~sortingBasedOnDisabled: bool=?, - ~customMarginStyle: string=?, - ~listFlexDirection: string=?, - ~onApply: JsxEvent.Mouse.t => unit=?, - ~showAllSelectedOptions: bool=?, - ~showDescriptionAsTool: bool=?, - ~optionClass: string=?, - ~selectClass: string=?, - ~toggleProps: string=?, - ~showSelectCountButton: bool=?, - ~customSelectAllStyle: string=?, - ~checkboxDimension: string=?, - ~dropdownClassName: string=?, - ~onItemSelect: (JsxEventU.Mouse.t, string) => unit=?, - ~wrapBasis: string=?, - ~preservedAppliedOptions: array=?, - ) => React.element + ~showSelectAll: bool=?, + ~showDropDown: bool=?, + ~isDropDown: bool=?, + ~options: array, + ~optionSize: CheckBoxIcon.size=?, + ~isSelectedStateMinus: bool=?, + ~onSelect: array => unit, + ~value: RescriptCore.JSON.t, + ~onBlur: ReactEvent.Focus.t => unit=?, + ~showClearAll: bool=?, + ~isHorizontal: bool=?, + ~insertselectBtnRef: ReactDOM.Ref.callbackDomRef=?, + ~insertclearBtnRef: ReactDOM.Ref.callbackDomRef=?, + ~customLabelStyle: string=?, + ~showToggle: bool=?, + ~showSerialNumber: bool=?, + ~heading: string=?, + ~showSelectionAsChips: bool=?, + ~maxHeight: string=?, + ~searchable: bool=?, + ~optionRigthElement: React.element=?, + ~searchInputPlaceHolder: string=?, + ~showSearchIcon: bool=?, + ~customStyle: string=?, + ~customMargin: string=?, + ~disableSelect: bool=?, + ~deselectDisable: bool=?, + ~hideBorder: bool=?, + ~allSelectType: allSelectType=?, + ~isMobileView: bool=?, + ~isModalView: bool=?, + ~customSearchStyle: string=?, + ~hasApplyButton: bool=?, + ~setShowDropDown: ('a => bool) => unit=?, + ~dropdownCustomWidth: string=?, + ~sortingBasedOnDisabled: bool=?, + ~customMarginStyle: string=?, + ~listFlexDirection: string=?, + ~onApply: JsxEvent.Mouse.t => unit=?, + ~showAllSelectedOptions: bool=?, + ~showDescriptionAsTool: bool=?, + ~optionClass: string=?, + ~selectClass: string=?, + ~toggleProps: string=?, + ~showSelectCountButton: bool=?, + ~customSelectAllStyle: string=?, + ~checkboxDimension: string=?, + ~dropdownClassName: string=?, + ~onItemSelect: (JsxEventU.Mouse.t, string) => unit=?, + ~wrapBasis: string=?, + ~preservedAppliedOptions: array=?, +) => React.element } module BaseSelectButton: { @react.component let make: ( - ~showDropDown: bool=?, - ~isDropDown: bool=?, - ~isHorizontal: bool=?, - ~options: array, - ~optionSize: CheckBoxIcon.size=?, - ~isSelectedStateMinus: bool=?, - ~onSelect: string => unit, - ~value: RescriptCore.JSON.t, - ~deselectDisable: bool=?, - ~onBlur: ReactEvent.Focus.t => unit=?, - ~setShowDropDown: ('a => bool) => unit=?, - ~onAssignClick: string => unit=?, - ~customSearchStyle: string, - ~disableSelect: bool=?, - ~isMobileView: bool=?, - ~hideAssignBtn: bool=?, - ~searchInputPlaceHolder: string=?, - ~showSearchIcon: bool=?, - ~allowButtonTextMinWidth: bool=?, - ) => React.element + ~showDropDown: bool=?, + ~isDropDown: bool=?, + ~isHorizontal: bool=?, + ~options: array, + ~optionSize: CheckBoxIcon.size=?, + ~isSelectedStateMinus: bool=?, + ~onSelect: string => unit, + ~value: RescriptCore.JSON.t, + ~deselectDisable: bool=?, + ~onBlur: ReactEvent.Focus.t => unit=?, + ~setShowDropDown: ('a => bool) => unit=?, + ~onAssignClick: string => unit=?, + ~customSearchStyle: string, + ~disableSelect: bool=?, + ~isMobileView: bool=?, + ~hideAssignBtn: bool=?, + ~searchInputPlaceHolder: string=?, + ~showSearchIcon: bool=?, + ~allowButtonTextMinWidth: bool=?, +) => React.element } module RenderListItemInBaseRadio: { @react.component let make: ( - ~newOptions: array, - ~value: Core__JSON.t, - ~descriptionOnHover: bool, - ~isDropDown: bool, - ~textIconPresent: bool, - ~searchString: string, - ~optionSize: CheckBoxIcon.size, - ~isSelectedStateMinus: bool, - ~onItemClick: (string, bool) => JsxEventU.Mouse.t => unit, - ~fill: string, - ~customStyle: string, - ~isMobileView: bool, - ~listFlexDirection: string, - ~customSelectStyle: string, - ~textOverflowClass: option, - ~showToolTipOptions: bool, - ~textEllipsisForDropDownOptions: bool, - ~isHorizontal: bool, - ~customMarginStyleOfListItem: string=?, - ~bottomComponent: React.element=?, - ~optionClass: string=?, - ~selectClass: string=?, - ~customScrollStyle: string=?, - ) => React.element + ~newOptions: array, + ~value: Core__JSON.t, + ~descriptionOnHover: bool, + ~isDropDown: bool, + ~textIconPresent: bool, + ~searchString: string, + ~optionSize: CheckBoxIcon.size, + ~isSelectedStateMinus: bool, + ~onItemClick: (string, bool) => JsxEventU.Mouse.t => unit, + ~fill: string, + ~customStyle: string, + ~isMobileView: bool, + ~listFlexDirection: string, + ~customSelectStyle: string, + ~textOverflowClass: option, + ~showToolTipOptions: bool, + ~textEllipsisForDropDownOptions: bool, + ~isHorizontal: bool, + ~customMarginStyleOfListItem: string=?, + ~bottomComponent: React.element=?, + ~optionClass: string=?, + ~selectClass: string=?, + ~customScrollStyle: string=?, + ~shouldDisplaySelectedOnTop: bool, +) => React.element } let getHashMappedOptionValues: array => RescriptCore.Dict.t< array, @@ -192,151 +195,153 @@ let getSortedKeys: RescriptCore.Dict.t<'a> => array module BaseRadio: { @react.component let make: ( - ~showDropDown: bool=?, - ~isDropDown: bool=?, - ~isHorizontal: bool=?, - ~options: array, - ~optionSize: CheckBoxIcon.size=?, - ~isSelectedStateMinus: bool=?, - ~onSelect: string => unit, - ~value: RescriptCore.JSON.t, - ~deselectDisable: bool=?, - ~onBlur: ReactEvent.Focus.t => unit=?, - ~fill: string=?, - ~customStyle: string=?, - ~searchable: bool=?, - ~isMobileView: bool=?, - ~customSearchStyle: string=?, - ~descriptionOnHover: bool=?, - ~addDynamicValue: bool=?, - ~dropdownCustomWidth: string=?, - ~dropdownRef: React.ref>=?, - ~showMatchingRecordsText: bool=?, - ~fullLength: bool=?, - ~selectedString: string=?, - ~setSelectedString: ('a => string) => unit=?, - ~setExtSearchString: ('b => string) => unit=?, - ~listFlexDirection: string=?, - ~baseComponentCustomStyle: string=?, - ~customSelectStyle: string=?, - ~maxHeight: string=?, - ~textOverflowClass: string=?, - ~searchInputPlaceHolder: string=?, - ~showSearchIcon: bool=?, - ~showToolTipOptions: bool=?, - ~textEllipsisForDropDownOptions: bool=?, - ~bottomComponent: React.element=?, - ~optionClass: string=?, - ~selectClass: string=?, - ~customScrollStyle: string=?, - ~dropdownContainerStyle: string=?, - ) => React.element + ~showDropDown: bool=?, + ~isDropDown: bool=?, + ~isHorizontal: bool=?, + ~options: array, + ~optionSize: CheckBoxIcon.size=?, + ~isSelectedStateMinus: bool=?, + ~onSelect: string => unit, + ~value: RescriptCore.JSON.t, + ~deselectDisable: bool=?, + ~onBlur: ReactEvent.Focus.t => unit=?, + ~fill: string=?, + ~customStyle: string=?, + ~searchable: bool=?, + ~isMobileView: bool=?, + ~customSearchStyle: string=?, + ~descriptionOnHover: bool=?, + ~addDynamicValue: bool=?, + ~dropdownCustomWidth: string=?, + ~dropdownRef: React.ref>=?, + ~showMatchingRecordsText: bool=?, + ~fullLength: bool=?, + ~selectedString: string=?, + ~setSelectedString: ('a => string) => unit=?, + ~setExtSearchString: ('b => string) => unit=?, + ~listFlexDirection: string=?, + ~baseComponentCustomStyle: string=?, + ~customSelectStyle: string=?, + ~maxHeight: string=?, + ~textOverflowClass: string=?, + ~searchInputPlaceHolder: string=?, + ~showSearchIcon: bool=?, + ~showToolTipOptions: bool=?, + ~textEllipsisForDropDownOptions: bool=?, + ~bottomComponent: React.element=?, + ~optionClass: string=?, + ~selectClass: string=?, + ~customScrollStyle: string=?, + ~dropdownContainerStyle: string=?, + ~shouldDisplaySelectedOnTop: bool=?, +) => React.element } type direction = BottomLeft | BottomMiddle | BottomRight | TopLeft | TopMiddle | TopRight module BaseDropdown: { @react.component let make: ( - ~buttonText: string, - ~buttonSize: Button.buttonSize=?, - ~allowMultiSelect: bool, - ~input: ReactFinalForm.fieldRenderPropsInput, - ~showClearAll: bool=?, - ~showSelectAll: bool=?, - ~options: array, - ~optionSize: CheckBoxIcon.size=?, - ~isSelectedStateMinus: bool=?, - ~hideMultiSelectButtons: bool, - ~deselectDisable: bool=?, - ~buttonType: Button.buttonType=?, - ~baseComponent: React.element=?, - ~baseComponentMethod: bool => React.element=?, - ~disableSelect: bool=?, - ~textStyle: string=?, - ~buttonTextWeight: string=?, - ~defaultLeftIcon: Button.iconType=?, - ~autoApply: bool=?, - ~fullLength: bool=?, - ~customButtonStyle: string=?, - ~onAssignClick: string => unit=?, - ~fixedDropDownDirection: direction=?, - ~addButton: bool=?, - ~marginTop: string=?, - ~customStyle: string=?, - ~customSearchStyle: string=?, - ~showSelectionAsChips: bool=?, - ~showToolTip: bool=?, - ~showNameAsToolTip: bool=?, - ~searchable: bool=?, - ~showBorder: bool=?, - ~dropDownCustomBtnClick: bool=?, - ~showCustomBtnAtEnd: bool=?, - ~customButton: React.element=?, - ~descriptionOnHover: bool=?, - ~addDynamicValue: bool=?, - ~showMatchingRecordsText: bool=?, - ~hasApplyButton: bool=?, - ~dropdownCustomWidth: string=?, - ~allowButtonTextMinWidth: bool=?, - ~customMarginStyle: string=?, - ~customButtonLeftIcon: Button.iconType=?, - ~customTextPaddingClass: string=?, - ~customButtonPaddingClass: string=?, - ~customButtonIconMargin: string=?, - ~textStyleClass: string=?, - ~buttonStyleOnDropDownOpened: string=?, - ~selectedString: string=?, - ~setSelectedString: ('a => string) => unit=?, - ~setExtSearchString: ('b => string) => unit=?, - ~listFlexDirection: string=?, - ~ellipsisOnly: bool=?, - ~isPhoneDropdown: bool=?, - ~onApply: JsxEvent.Mouse.t => unit=?, - ~showAllSelectedOptions: bool=?, - ~buttonClickFn: string => unit=?, - ~toggleChevronState: unit => unit=?, - ~showSelectCountButton: bool=?, - ~maxHeight: string=?, - ~customBackColor: string=?, - ~showToolTipOptions: bool=?, - ~textEllipsisForDropDownOptions: bool=?, - ~showBtnTextToolTip: bool=?, - ~dropdownClassName: string=?, - ~searchInputPlaceHolder: string=?, - ~showSearchIcon: bool=?, - ~sortingBasedOnDisabled: bool=?, - ~customSelectStyle: string=?, - ~baseComponentCustomStyle: string=?, - ~bottomComponent: React.element=?, - ~optionClass: string=?, - ~selectClass: string=?, - ~customDropdownOuterClass: string=?, - ~customScrollStyle: string=?, - ~dropdownContainerStyle: string=?, - ) => React.element + ~buttonText: string, + ~buttonSize: Button.buttonSize=?, + ~allowMultiSelect: bool, + ~input: ReactFinalForm.fieldRenderPropsInput, + ~showClearAll: bool=?, + ~showSelectAll: bool=?, + ~options: array, + ~optionSize: CheckBoxIcon.size=?, + ~isSelectedStateMinus: bool=?, + ~hideMultiSelectButtons: bool, + ~deselectDisable: bool=?, + ~buttonType: Button.buttonType=?, + ~baseComponent: React.element=?, + ~baseComponentMethod: bool => React.element=?, + ~disableSelect: bool=?, + ~textStyle: string=?, + ~buttonTextWeight: string=?, + ~defaultLeftIcon: Button.iconType=?, + ~autoApply: bool=?, + ~fullLength: bool=?, + ~customButtonStyle: string=?, + ~onAssignClick: string => unit=?, + ~fixedDropDownDirection: direction=?, + ~addButton: bool=?, + ~marginTop: string=?, + ~customStyle: string=?, + ~customSearchStyle: string=?, + ~showSelectionAsChips: bool=?, + ~showToolTip: bool=?, + ~showNameAsToolTip: bool=?, + ~searchable: bool=?, + ~showBorder: bool=?, + ~dropDownCustomBtnClick: bool=?, + ~showCustomBtnAtEnd: bool=?, + ~customButton: React.element=?, + ~descriptionOnHover: bool=?, + ~addDynamicValue: bool=?, + ~showMatchingRecordsText: bool=?, + ~hasApplyButton: bool=?, + ~dropdownCustomWidth: string=?, + ~allowButtonTextMinWidth: bool=?, + ~customMarginStyle: string=?, + ~customButtonLeftIcon: Button.iconType=?, + ~customTextPaddingClass: string=?, + ~customButtonPaddingClass: string=?, + ~customButtonIconMargin: string=?, + ~textStyleClass: string=?, + ~buttonStyleOnDropDownOpened: string=?, + ~selectedString: string=?, + ~setSelectedString: ('a => string) => unit=?, + ~setExtSearchString: ('b => string) => unit=?, + ~listFlexDirection: string=?, + ~ellipsisOnly: bool=?, + ~isPhoneDropdown: bool=?, + ~onApply: JsxEvent.Mouse.t => unit=?, + ~showAllSelectedOptions: bool=?, + ~buttonClickFn: string => unit=?, + ~toggleChevronState: unit => unit=?, + ~showSelectCountButton: bool=?, + ~maxHeight: string=?, + ~customBackColor: string=?, + ~showToolTipOptions: bool=?, + ~textEllipsisForDropDownOptions: bool=?, + ~showBtnTextToolTip: bool=?, + ~dropdownClassName: string=?, + ~searchInputPlaceHolder: string=?, + ~showSearchIcon: bool=?, + ~sortingBasedOnDisabled: bool=?, + ~customSelectStyle: string=?, + ~baseComponentCustomStyle: string=?, + ~bottomComponent: React.element=?, + ~optionClass: string=?, + ~selectClass: string=?, + ~customDropdownOuterClass: string=?, + ~customScrollStyle: string=?, + ~dropdownContainerStyle: string=?, + ~shouldDisplaySelectedOnTop: bool=?, +) => React.element } module InfraSelectBox: { @react.component let make: ( - ~options: array, - ~input: ReactFinalForm.fieldRenderPropsInput, - ~deselectDisable: bool=?, - ~allowMultiSelect: bool=?, - ~borderRadius: string=?, - ~selectedClass: string=?, - ~nonSelectedClass: string=?, - ~showTickMark: bool=?, - ) => React.element + ~options: array, + ~input: ReactFinalForm.fieldRenderPropsInput, + ~deselectDisable: bool=?, + ~allowMultiSelect: bool=?, + ~borderRadius: string=?, + ~selectedClass: string=?, + ~nonSelectedClass: string=?, + ~showTickMark: bool=?, +) => React.element } module ChipFilterSelectBox: { @react.component let make: ( - ~options: array, - ~input: ReactFinalForm.fieldRenderPropsInput, - ~deselectDisable: bool=?, - ~allowMultiSelect: bool=?, - ~isTickRequired: bool=?, - ~customStyleForChips: string=?, - ) => React.element + ~options: array, + ~input: ReactFinalForm.fieldRenderPropsInput, + ~deselectDisable: bool=?, + ~allowMultiSelect: bool=?, + ~isTickRequired: bool=?, + ~customStyleForChips: string=?, +) => React.element } @react.component let make: ( @@ -421,4 +426,5 @@ let make: ( ~onItemSelect: (JsxEventU.Mouse.t, string) => unit=?, ~wrapBasis: string=?, ~customScrollStyle: string=?, + ~shouldDisplaySelectedOnTop: bool=?, ) => React.element diff --git a/src/screens/OMPSwitch/MerchantSwitch.res b/src/screens/OMPSwitch/MerchantSwitch.res index cd15d9ffc..2056e194d 100644 --- a/src/screens/OMPSwitch/MerchantSwitch.res +++ b/src/screens/OMPSwitch/MerchantSwitch.res @@ -199,6 +199,7 @@ let make = () => { fullLength=true toggleChevronState customScrollStyle + shouldDisplaySelectedOnTop=true /> diff --git a/src/screens/OMPSwitch/OMPSwitchUtils.res b/src/screens/OMPSwitch/OMPSwitchUtils.res index cc3ecbf62..4a915a09d 100644 --- a/src/screens/OMPSwitch/OMPSwitchUtils.res +++ b/src/screens/OMPSwitch/OMPSwitchUtils.res @@ -96,13 +96,12 @@ let generateDropdownOptions = dropdownList => { icon: Button.CustomRightIcon( - + customStyle="!whitespace-nowrap" + toolTipFor={
+
} toolTipPosition=ToolTip.TopRight - newDesign=true - /> - , + />, ), }) options diff --git a/src/screens/OMPSwitch/OrgSwitch.res b/src/screens/OMPSwitch/OrgSwitch.res index a4e788b6f..0ee0cde46 100644 --- a/src/screens/OMPSwitch/OrgSwitch.res +++ b/src/screens/OMPSwitch/OrgSwitch.res @@ -85,6 +85,7 @@ let make = () => { fullLength=true toggleChevronState customScrollStyle + shouldDisplaySelectedOnTop=true /> { toggleChevronState customScrollStyle dropdownContainerStyle + shouldDisplaySelectedOnTop=true />