@razorpay/blade 6.5.1 → 6.5.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/build/components/index.d.ts +4 -4
- package/build/components/index.native.d.ts +4 -4
- package/build/components/index.native.js +3 -3
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.web.js +22 -4
- package/build/components/index.web.js.map +1 -1
- package/build/css/bankingThemeDarkDesktop.css +1 -1
- package/build/css/bankingThemeDarkMobile.css +1 -1
- package/build/css/bankingThemeLightDesktop.css +1 -1
- package/build/css/bankingThemeLightMobile.css +1 -1
- package/build/css/paymentThemeDarkDesktop.css +1 -1
- package/build/css/paymentThemeDarkMobile.css +1 -1
- package/build/css/paymentThemeLightDesktop.css +1 -1
- package/build/css/paymentThemeLightMobile.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3878,7 +3878,7 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
|
|
|
3878
3878
|
*/
|
|
3879
3879
|
type?: Type;
|
|
3880
3880
|
} & StyledPropsBlade;
|
|
3881
|
-
declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "isDisabled" | "labelPosition" | "
|
|
3881
|
+
declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "isDisabled" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
|
|
3882
3882
|
/**
|
|
3883
3883
|
* Decides whether to render a clear icon button
|
|
3884
3884
|
*/
|
|
@@ -4012,7 +4012,7 @@ declare type PasswordInputExtraProps = {
|
|
|
4012
4012
|
autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'password' | 'newPassword'>;
|
|
4013
4013
|
};
|
|
4014
4014
|
declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps & StyledPropsBlade;
|
|
4015
|
-
declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "defaultValue" | "isDisabled" | "labelPosition" | "
|
|
4015
|
+
declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "defaultValue" | "isDisabled" | "labelPosition" | "helpText" | "errorText" | "successText" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<MakeObjectResponsive<{
|
|
4016
4016
|
margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
|
|
4017
4017
|
marginX: SpacingValueType;
|
|
4018
4018
|
marginY: SpacingValueType;
|
|
@@ -4102,7 +4102,7 @@ declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'n
|
|
|
4102
4102
|
*/
|
|
4103
4103
|
onClearButtonClick?: () => void;
|
|
4104
4104
|
} & StyledPropsBlade;
|
|
4105
|
-
declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "defaultValue" | "numberOfLines" | "isDisabled" | "labelPosition" | "
|
|
4105
|
+
declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "value" | "onFocus" | "onBlur" | "onChange" | "onSubmit" | "autoFocus" | "defaultValue" | "numberOfLines" | "isDisabled" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "validationState" | "isRequired" | "maxCharacters"> & {
|
|
4106
4106
|
/**
|
|
4107
4107
|
* Decides whether to render a clear icon button
|
|
4108
4108
|
*/
|
|
@@ -4270,7 +4270,7 @@ declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' |
|
|
|
4270
4270
|
*
|
|
4271
4271
|
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
|
|
4272
4272
|
*/
|
|
4273
|
-
declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "onFocus" | "onBlur" | "onClick" | "autoFocus" | "prefix" | "isDisabled" | "labelPosition" | "
|
|
4273
|
+
declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "testID" | "placeholder" | "label" | "onFocus" | "onBlur" | "onClick" | "autoFocus" | "prefix" | "isDisabled" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired"> & {
|
|
4274
4274
|
icon?: IconComponent$1 | undefined;
|
|
4275
4275
|
onChange?: (({ name, values }: {
|
|
4276
4276
|
name?: string | undefined;
|
|
@@ -3812,7 +3812,7 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
|
|
|
3812
3812
|
*/
|
|
3813
3813
|
type?: Type;
|
|
3814
3814
|
} & StyledPropsBlade;
|
|
3815
|
-
declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "
|
|
3815
|
+
declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "autoCapitalize" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
|
|
3816
3816
|
/**
|
|
3817
3817
|
* Decides whether to render a clear icon button
|
|
3818
3818
|
*/
|
|
@@ -3901,7 +3901,7 @@ declare type PasswordInputExtraProps = {
|
|
|
3901
3901
|
autoCompleteSuggestionType?: Extract<BaseInputProps['autoCompleteSuggestionType'], 'none' | 'password' | 'newPassword'>;
|
|
3902
3902
|
};
|
|
3903
3903
|
declare type PasswordInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'maxCharacters' | 'validationState' | 'errorText' | 'successText' | 'helpText' | 'isDisabled' | 'defaultValue' | 'placeholder' | 'isRequired' | 'value' | 'onChange' | 'onBlur' | 'onSubmit' | 'onFocus' | 'name' | 'autoFocus' | 'keyboardReturnKeyType' | 'autoCompleteSuggestionType' | 'testID'> & PasswordInputExtraProps & StyledPropsBlade;
|
|
3904
|
-
declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "
|
|
3904
|
+
declare const PasswordInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "validationState" | "isRequired" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & PasswordInputExtraProps & Partial<MakeObjectResponsive<{
|
|
3905
3905
|
margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>;
|
|
3906
3906
|
marginX: SpacingValueType;
|
|
3907
3907
|
marginY: SpacingValueType;
|
|
@@ -3946,7 +3946,7 @@ declare type TextAreaProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'n
|
|
|
3946
3946
|
*/
|
|
3947
3947
|
onClearButtonClick?: () => void;
|
|
3948
3948
|
} & StyledPropsBlade;
|
|
3949
|
-
declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "numberOfLines" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "
|
|
3949
|
+
declare const TextArea: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "numberOfLines" | "defaultValue" | "onChange" | "onSubmit" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "validationState" | "isRequired" | "maxCharacters"> & {
|
|
3950
3950
|
/**
|
|
3951
3951
|
* Decides whether to render a clear icon button
|
|
3952
3952
|
*/
|
|
@@ -4069,7 +4069,7 @@ declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' |
|
|
|
4069
4069
|
*
|
|
4070
4070
|
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
|
|
4071
4071
|
*/
|
|
4072
|
-
declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "name" | "onBlur" | "onFocus" | "onClick" | "prefix" | "isDisabled" | "autoFocus" | "labelPosition" | "
|
|
4072
|
+
declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "testID" | "placeholder" | "label" | "name" | "onBlur" | "onFocus" | "onClick" | "prefix" | "isDisabled" | "autoFocus" | "labelPosition" | "helpText" | "errorText" | "successText" | "necessityIndicator" | "suffix" | "validationState" | "isRequired"> & {
|
|
4073
4073
|
icon?: IconComponent$1 | undefined;
|
|
4074
4074
|
onChange?: (({ name, values }: {
|
|
4075
4075
|
name?: string | undefined;
|
|
@@ -3250,7 +3250,7 @@ var StyledListBoxWrapper=styled(ScrollView)(function(props){return _extends({},g
|
|
|
3250
3250
|
|
|
3251
3251
|
var componentIds={DropdownOverlay:'DropdownOverlay',Dropdown:'Dropdown'};var SelectActions={Close:'Close',CloseSelect:'CloseSelect',First:'First',Last:'Last',Next:'Next',Open:'Open',PageDown:'PageDown',PageUp:'PageUp',Previous:'Previous',Select:'Select',Type:'Type'};function filterOptions(){var options=arguments.length>0&&arguments[0]!==undefined?arguments[0]:[];var filter=arguments.length>1?arguments[1]:undefined;var exclude=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[];return options.filter(function(option){var matches=option.toLowerCase().startsWith(filter.toLowerCase());return matches&&!exclude.includes(option);});}function getActionFromKey(e,isOpen){if(!e){return undefined;}var altKey=e.altKey,ctrlKey=e.ctrlKey,metaKey=e.metaKey;var key='';if('key'in e){key=e.key;}var openKeys=['ArrowDown','ArrowUp','Enter',' '];if(!key)return undefined;if(!isOpen&&key&&openKeys.includes(key)){return SelectActions.Open;}if(key==='Home'){return SelectActions.First;}if(key==='End'){return SelectActions.Last;}if(key==='Backspace'||key==='Clear'||key.length===1&&key!==' '&&!altKey&&!ctrlKey&&!metaKey){return SelectActions.Type;}if(isOpen){if(key==='ArrowUp'&&altKey){return SelectActions.CloseSelect;}else if(key==='ArrowDown'&&!altKey){return SelectActions.Next;}else if(key==='ArrowUp'){return SelectActions.Previous;}else if(key==='PageUp'){return SelectActions.PageUp;}else if(key==='PageDown'){return SelectActions.PageDown;}else if(key==='Escape'){return SelectActions.Close;}else if(key==='Enter'||key===' '){return SelectActions.CloseSelect;}}return undefined;}function getIndexByLetter(options,filter){var startIndex=arguments.length>2&&arguments[2]!==undefined?arguments[2]:0;var orderedOptions=[].concat(_toConsumableArray(options.slice(startIndex)),_toConsumableArray(options.slice(0,startIndex)));var firstMatch=filterOptions(orderedOptions,filter)[0];var allSameLetter=function allSameLetter(array){return array.every(function(letter){return letter===array[0];});};if(firstMatch){return options.indexOf(firstMatch);}else if(allSameLetter(filter.split(''))){var matches=filterOptions(orderedOptions,filter[0]);return options.indexOf(matches[0]);}else {return -1;}}function getUpdatedIndex(currentIndex,maxIndex,action){var pageSize=10;switch(action){case SelectActions.First:return 0;case SelectActions.Last:return maxIndex;case SelectActions.Previous:return Math.max(0,currentIndex-1);case SelectActions.Next:return Math.min(maxIndex,currentIndex+1);case SelectActions.PageUp:return Math.max(0,currentIndex-pageSize);case SelectActions.PageDown:return Math.min(maxIndex,currentIndex+pageSize);default:return currentIndex;}}function isElementVisibleOnScreen(element){var bounding=element.getBoundingClientRect();return bounding.top>=0&&bounding.left>=0&&bounding.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&bounding.right<=(window.innerWidth||document.documentElement.clientWidth);}function isScrollable(element){return element&&element.clientHeight<element.scrollHeight;}var performAction=function performAction(action,e,actions){var event=e.event;switch(action){case SelectActions.Last:case SelectActions.First:actions.setIsOpen(true);case SelectActions.Next:case SelectActions.Previous:case SelectActions.PageUp:case SelectActions.PageDown:event.preventDefault();actions.onOptionChange(action);return true;case SelectActions.CloseSelect:event.preventDefault();actions.selectCurrentOption();return true;case SelectActions.Close:event.preventDefault();actions.setIsOpen(false);return true;case SelectActions.Type:actions.onComboType(event.key,action);return true;case SelectActions.Open:event.preventDefault();actions.setIsOpen(true);return true;}return false;};var ensureScrollVisiblity=function ensureScrollVisiblity(newActiveIndex,containerElement,options){if(containerElement){if(isScrollable(containerElement)){var optionEl=containerElement.querySelectorAll('[role="option"]');if(newActiveIndex>=0&&optionEl[newActiveIndex].dataset.value===options[newActiveIndex]){var activeElement=optionEl[newActiveIndex];var bodyRect=containerElement.getBoundingClientRect().top;var elementRect=activeElement.getBoundingClientRect().top;var elementPosition=elementRect-bodyRect;var offsetPosition=elementPosition;containerElement.scrollTo({top:offsetPosition});if(!isElementVisibleOnScreen(optionEl[newActiveIndex])){activeElement.scrollIntoView({behavior:'smooth'});}}}}};var makeInputValue=function makeInputValue(selectedIndices,options){if(options.length===0){return '';}return selectedIndices.map(function(selectedIndex){var _options$selectedInde;return (_options$selectedInde=options[selectedIndex])==null?void 0:_options$selectedInde.value;}).join(', ');};var makeInputDisplayValue=function makeInputDisplayValue(selectedIndices,options){if(options.length===0||selectedIndices.length===0){return '';}if(selectedIndices.length===1){return options[selectedIndices[0]].title;}return selectedIndices.length+" items selected";};
|
|
3252
3252
|
|
|
3253
|
-
var _excluded$4N=["isOpen","setIsOpen","selectedIndices","setSelectedIndices","activeIndex","setActiveIndex","shouldIgnoreBlur","setShouldIgnoreBlur","isKeydownPressed","setIsKeydownPressed","options","selectionType"];var noop=function noop(){};var DropdownContext=React__default.createContext({isOpen:false,setIsOpen:noop,selectedIndices:[],setSelectedIndices:noop,options:[],setOptions:noop,activeIndex:-1,setActiveIndex:noop,shouldIgnoreBlur:false,setShouldIgnoreBlur:noop,shouldIgnoreBlurAnimation:false,setShouldIgnoreBlurAnimation:noop,hasFooterAction:false,setHasFooterAction:noop,hasLabelOnLeft:false,setHasLabelOnLeft:noop,isKeydownPressed:false,setIsKeydownPressed:noop,dropdownBaseId:'',actionListItemRef:{current:null},triggererRef:{current:null}});var searchTimeout;var searchString='';var useDropdown=function useDropdown(){var _React$useContext=React__default.useContext(DropdownContext),isOpen=_React$useContext.isOpen,setIsOpen=_React$useContext.setIsOpen,selectedIndices=_React$useContext.selectedIndices,setSelectedIndices=_React$useContext.setSelectedIndices,activeIndex=_React$useContext.activeIndex,setActiveIndex=_React$useContext.setActiveIndex,shouldIgnoreBlur=_React$useContext.shouldIgnoreBlur,setShouldIgnoreBlur=_React$useContext.setShouldIgnoreBlur,isKeydownPressed=_React$useContext.isKeydownPressed,setIsKeydownPressed=_React$useContext.setIsKeydownPressed,options=_React$useContext.options,selectionType=_React$useContext.selectionType,rest=_objectWithoutProperties(_React$useContext,_excluded$4N);var selectOption=function selectOption(index){var properties=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{closeOnSelection:true};if(index<0||index>options.length-1){return;}if(selectionType==='multiple'){if(selectedIndices.includes(index)){var existingItemIndex=selectedIndices.indexOf(index);setSelectedIndices([].concat(_toConsumableArray(selectedIndices.slice(0,existingItemIndex)),_toConsumableArray(selectedIndices.slice(existingItemIndex+1))));}else {setSelectedIndices([].concat(_toConsumableArray(selectedIndices),[index]));}}else {setSelectedIndices([index]);}if(activeIndex!==index){setActiveIndex(index);}if(properties!=null&&properties.closeOnSelection&&selectionType!=='multiple'){setIsOpen(false);}};var onTriggerClick=function onTriggerClick(){setIsOpen(!isOpen);};var onTriggerBlur=function onTriggerBlur(){if(rest.hasFooterAction){setActiveIndex(-1);}if(shouldIgnoreBlur){setShouldIgnoreBlur(false);return;}if(isOpen){if(selectionType!=='multiple'){selectOption(activeIndex);}setIsOpen(false);}};var onOptionChange=function onOptionChange(actionType,index){var max=options.length-1;var newIndex=index!=null?index:activeIndex;setActiveIndex(getUpdatedIndex(newIndex,max,actionType));var optionValues=options.map(function(option){return option.value;});ensureScrollVisiblity(newIndex,rest.actionListItemRef.current,optionValues);};var onOptionClick=function onOptionClick(e,index){var actionType=getActionFromKey(e,isOpen);if(typeof actionType==='number'){onOptionChange(actionType,index);}selectOption(index);if(!isReactNative$4()){var _rest$triggererRef$cu;(_rest$triggererRef$cu=rest.triggererRef.current)==null?void 0:_rest$triggererRef$cu.focus();}};var onComboType=function onComboType(letter,actionType){setIsOpen(true);if(typeof searchTimeout==='number'){window.clearTimeout(searchTimeout);}searchTimeout=window.setTimeout(function(){searchString='';},500);searchString=searchString+letter;var optionTitles=options.map(function(option){return option.title;});var searchIndex=getIndexByLetter(optionTitles,searchString,activeIndex+1);if(searchIndex>=0){onOptionChange(actionType,searchIndex);}else {window.clearTimeout(searchTimeout);searchString='';}};var onTriggerKeydown=function onTriggerKeydown(e){if(e.event.key==='Tab'&&rest.hasFooterAction){setShouldIgnoreBlur(true);}if(!isKeydownPressed&&![' ','Enter','Escape','Meta'].includes(e.event.key)){setIsKeydownPressed(true);}var actionType=getActionFromKey(e.event,isOpen);if(actionType){performAction(actionType,e,{setIsOpen:setIsOpen,onOptionChange:onOptionChange,onComboType:onComboType,selectCurrentOption:function selectCurrentOption(){var _options$activeIndex;selectOption(activeIndex);if(rest.hasFooterAction&&!isReactNative$4()){var _rest$triggererRef$cu2;(_rest$triggererRef$cu2=rest.triggererRef.current)==null?void 0:_rest$triggererRef$cu2.focus();}var anchorLink=(_options$activeIndex=options[activeIndex])==null?void 0:_options$activeIndex.href;if(anchorLink){window.location.href=anchorLink;if(window.top){window.top.location.href=anchorLink;}}}});}};return _extends({isOpen:isOpen,setIsOpen:setIsOpen,selectedIndices:selectedIndices,setSelectedIndices:setSelectedIndices,onTriggerClick:onTriggerClick,onTriggerKeydown:onTriggerKeydown,onTriggerBlur:onTriggerBlur,onOptionClick:onOptionClick,activeIndex:activeIndex,setActiveIndex:setActiveIndex,shouldIgnoreBlur:shouldIgnoreBlur,setShouldIgnoreBlur:setShouldIgnoreBlur,isKeydownPressed:isKeydownPressed,setIsKeydownPressed:setIsKeydownPressed,options:options,value:makeInputValue(selectedIndices,options),displayValue:makeInputDisplayValue(selectedIndices,options),selectionType:selectionType},rest);};
|
|
3253
|
+
var _excluded$4N=["isOpen","setIsOpen","selectedIndices","setSelectedIndices","activeIndex","setActiveIndex","shouldIgnoreBlur","setShouldIgnoreBlur","isKeydownPressed","setIsKeydownPressed","options","selectionType"];var noop=function noop(){};var DropdownContext=React__default.createContext({isOpen:false,setIsOpen:noop,selectedIndices:[],setSelectedIndices:noop,options:[],setOptions:noop,activeIndex:-1,setActiveIndex:noop,shouldIgnoreBlur:false,setShouldIgnoreBlur:noop,shouldIgnoreBlurAnimation:false,setShouldIgnoreBlurAnimation:noop,hasFooterAction:false,setHasFooterAction:noop,hasLabelOnLeft:false,setHasLabelOnLeft:noop,isKeydownPressed:false,setIsKeydownPressed:noop,dropdownBaseId:'',actionListItemRef:{current:null},triggererRef:{current:null}});var searchTimeout;var searchString='';var useDropdown=function useDropdown(){var _React$useContext=React__default.useContext(DropdownContext),isOpen=_React$useContext.isOpen,setIsOpen=_React$useContext.setIsOpen,selectedIndices=_React$useContext.selectedIndices,setSelectedIndices=_React$useContext.setSelectedIndices,activeIndex=_React$useContext.activeIndex,setActiveIndex=_React$useContext.setActiveIndex,shouldIgnoreBlur=_React$useContext.shouldIgnoreBlur,setShouldIgnoreBlur=_React$useContext.setShouldIgnoreBlur,isKeydownPressed=_React$useContext.isKeydownPressed,setIsKeydownPressed=_React$useContext.setIsKeydownPressed,options=_React$useContext.options,selectionType=_React$useContext.selectionType,rest=_objectWithoutProperties(_React$useContext,_excluded$4N);var selectOption=function selectOption(index){var properties=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{closeOnSelection:true};if(index<0||index>options.length-1){return;}if(selectionType==='multiple'){if(selectedIndices.includes(index)){var existingItemIndex=selectedIndices.indexOf(index);setSelectedIndices([].concat(_toConsumableArray(selectedIndices.slice(0,existingItemIndex)),_toConsumableArray(selectedIndices.slice(existingItemIndex+1))));}else {setSelectedIndices([].concat(_toConsumableArray(selectedIndices),[index]));}}else {setSelectedIndices([index]);}if(activeIndex!==index){setActiveIndex(index);}if(properties!=null&&properties.closeOnSelection&&selectionType!=='multiple'){setIsOpen(false);}};var onTriggerClick=function onTriggerClick(){setIsOpen(!isOpen);};var onTriggerBlur=function onTriggerBlur(_ref){var name=_ref.name,value=_ref.value,onBlurCallback=_ref.onBlurCallback;if(rest.hasFooterAction){setActiveIndex(-1);}if(shouldIgnoreBlur){setShouldIgnoreBlur(false);return;}onBlurCallback==null?void 0:onBlurCallback({name:name,value:value});if(isOpen){if(selectionType!=='multiple'){selectOption(activeIndex);}setIsOpen(false);}};var onOptionChange=function onOptionChange(actionType,index){var max=options.length-1;var newIndex=index!=null?index:activeIndex;setActiveIndex(getUpdatedIndex(newIndex,max,actionType));var optionValues=options.map(function(option){return option.value;});ensureScrollVisiblity(newIndex,rest.actionListItemRef.current,optionValues);};var onOptionClick=function onOptionClick(e,index){var actionType=getActionFromKey(e,isOpen);if(typeof actionType==='number'){onOptionChange(actionType,index);}selectOption(index);if(!isReactNative$4()){var _rest$triggererRef$cu;(_rest$triggererRef$cu=rest.triggererRef.current)==null?void 0:_rest$triggererRef$cu.focus();}};var onComboType=function onComboType(letter,actionType){setIsOpen(true);if(typeof searchTimeout==='number'){window.clearTimeout(searchTimeout);}searchTimeout=window.setTimeout(function(){searchString='';},500);searchString=searchString+letter;var optionTitles=options.map(function(option){return option.title;});var searchIndex=getIndexByLetter(optionTitles,searchString,activeIndex+1);if(searchIndex>=0){onOptionChange(actionType,searchIndex);}else {window.clearTimeout(searchTimeout);searchString='';}};var onTriggerKeydown=function onTriggerKeydown(e){if(e.event.key==='Tab'&&rest.hasFooterAction){setShouldIgnoreBlur(true);}if(!isKeydownPressed&&![' ','Enter','Escape','Meta'].includes(e.event.key)){setIsKeydownPressed(true);}var actionType=getActionFromKey(e.event,isOpen);if(actionType){performAction(actionType,e,{setIsOpen:setIsOpen,onOptionChange:onOptionChange,onComboType:onComboType,selectCurrentOption:function selectCurrentOption(){var _options$activeIndex;selectOption(activeIndex);if(rest.hasFooterAction&&!isReactNative$4()){var _rest$triggererRef$cu2;(_rest$triggererRef$cu2=rest.triggererRef.current)==null?void 0:_rest$triggererRef$cu2.focus();}var anchorLink=(_options$activeIndex=options[activeIndex])==null?void 0:_options$activeIndex.href;if(anchorLink){window.location.href=anchorLink;if(window.top){window.top.location.href=anchorLink;}}}});}};return _extends({isOpen:isOpen,setIsOpen:setIsOpen,selectedIndices:selectedIndices,setSelectedIndices:setSelectedIndices,onTriggerClick:onTriggerClick,onTriggerKeydown:onTriggerKeydown,onTriggerBlur:onTriggerBlur,onOptionClick:onOptionClick,activeIndex:activeIndex,setActiveIndex:setActiveIndex,shouldIgnoreBlur:shouldIgnoreBlur,setShouldIgnoreBlur:setShouldIgnoreBlur,isKeydownPressed:isKeydownPressed,setIsKeydownPressed:setIsKeydownPressed,options:options,value:makeInputValue(selectedIndices,options),displayValue:makeInputDisplayValue(selectedIndices,options),selectionType:selectionType},rest);};
|
|
3254
3254
|
|
|
3255
3255
|
var ThemeContext=createContext({theme:null,colorScheme:'light',platform:'onDesktop',setColorScheme:function setColorScheme(){return null;}});var useTheme=function useTheme(){var themeContext=useContext(ThemeContext);if(!themeContext.theme){throw new Error("[@razorpay/blade:BladeProvider]: BladeProvider is missing theme");}if(themeContext===undefined){throw new Error("[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider");}return themeContext;};
|
|
3256
3256
|
|
|
@@ -3990,7 +3990,7 @@ var StyledCounter=styled(BaseBox)(function(props){return _extends({},getStyledCo
|
|
|
3990
3990
|
|
|
3991
3991
|
var _excluded$f=["value","max","intent","contrast","size","testID"];var getColorProps=function getColorProps(_ref){var _ref$intent=_ref.intent,intent=_ref$intent===void 0?'neutral':_ref$intent,_ref$contrast=_ref.contrast,contrast=_ref$contrast===void 0?'low':_ref$contrast;var props={textColor:"feedback.text."+intent+"."+contrast+"Contrast",backgroundColor:"feedback.background."+intent+"."+contrast+"Contrast"};return props;};var Counter=function Counter(_ref2){var value=_ref2.value,max=_ref2.max,_ref2$intent=_ref2.intent,intent=_ref2$intent===void 0?'neutral':_ref2$intent,_ref2$contrast=_ref2.contrast,contrast=_ref2$contrast===void 0?'low':_ref2$contrast,_ref2$size=_ref2.size,size=_ref2$size===void 0?'medium':_ref2$size,testID=_ref2.testID,styledProps=_objectWithoutProperties(_ref2,_excluded$f);var content=""+value;if(max&&value>max){content=max+"+";}var _useTheme=useTheme(),platform=_useTheme.platform;var _getColorProps=getColorProps({intent:intent,contrast:contrast}),backgroundColor=_getColorProps.backgroundColor,textColor=_getColorProps.textColor;var counterTextSizes={small:{variant:'body',size:'xsmall'},medium:{variant:'body',size:'small'},large:{variant:'body',size:'medium'}};return jsx(StyledCounter,_extends({backgroundColor:backgroundColor,size:size,platform:platform},getStyledProps(styledProps),{children:jsx(BaseBox,_extends({paddingRight:horizontalPadding[size],paddingLeft:horizontalPadding[size],paddingTop:verticalPadding[size],paddingBottom:verticalPadding[size],display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center",overflow:"hidden"},metaAttribute({name:MetaConstants.Counter,testID:testID}),{children:jsx(Text,_extends({},counterTextSizes[size],{type:"normal",weight:"regular",truncateAfterLines:1,color:textColor,children:content}))}))}));};
|
|
3992
3992
|
|
|
3993
|
-
var CardHeaderIcon=function CardHeaderIcon(_ref){var Icon=_ref.icon;useVerifyInsideCard('CardHeaderIcon');return jsx(Icon,{color:"surface.text.normal.lowContrast",size:"xlarge"});};CardHeaderIcon.componentId=ComponentIds$1.CardHeaderIcon;var CardHeaderCounter=function CardHeaderCounter(props){useVerifyInsideCard('CardHeaderCounter');return jsx(Counter,_extends({},props));};CardHeaderCounter.componentId=ComponentIds$1.CardHeaderCounter;var CardHeaderBadge=function CardHeaderBadge(props){useVerifyInsideCard('CardHeaderBadge');return jsx(Badge,_extends({},props));};CardHeaderBadge.componentId=ComponentIds$1.CardHeaderBadge;var CardHeaderText=function CardHeaderText(props){useVerifyInsideCard('CardHeaderText');return jsx(Text,_extends({},props));};CardHeaderText.componentId=ComponentIds$1.CardHeaderText;var CardHeaderLink=function CardHeaderLink(props){useVerifyInsideCard('CardHeaderLink');return jsx(Link,_extends({},props));};CardHeaderLink.componentId=ComponentIds$1.CardHeaderLink;var CardHeaderIconButton=function CardHeaderIconButton(props){useVerifyInsideCard('CardHeaderIconButton');return jsx(BaseBox,{width:makeSpace(minHeight.xsmall),children:jsx(Button,_extends({},props,{variant:"tertiary",size:"xsmall",iconPosition:"left",isFullWidth:true}))});};CardHeaderIconButton.componentId=ComponentIds$1.CardHeaderIconButton;var CardHeader=function CardHeader(_ref2){var children=_ref2.children,testID=_ref2.testID;useVerifyInsideCard('CardHeader');useVerifyAllowedComponents(children,'CardHeader',[ComponentIds$1.CardHeaderLeading,ComponentIds$1.CardHeaderTrailing]);return jsxs(BaseBox,_extends({marginBottom:"spacing.7"},metaAttribute({name:MetaConstants.CardHeader,testID:testID}),{children:[jsx(BaseBox,{marginBottom:"spacing.7",display:"flex",flexDirection:"row",justifyContent:"space-between",children:children}),jsx(Divider,{})]}));};CardHeader.componentId=ComponentIds$1.CardHeader;var CardHeaderLeading=function CardHeaderLeading(_ref3){var title=_ref3.title,subtitle=_ref3.subtitle,prefix=_ref3.prefix,suffix=_ref3.suffix;useVerifyInsideCard('CardHeaderLeading');if(prefix&&!isValidAllowedChildren(prefix,ComponentIds$1.CardHeaderIcon)){throw new Error("[Blade CardHeaderLeading]: Only `"+ComponentIds$1.CardHeaderIcon+"` component is accepted in prefix");}if(suffix&&!isValidAllowedChildren(suffix,ComponentIds$1.CardHeaderCounter)){throw new Error("[Blade CardHeaderLeading]: Only `"+ComponentIds$1.CardHeaderCounter+"` component is accepted in prefix");}return jsxs(BaseBox,{flex:1,display:"flex",flexDirection:"row",children:[jsx(BaseBox,{marginRight:"spacing.3",alignSelf:"center",display:"flex",children:prefix}),jsxs(BaseBox,{children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",flexWrap:"wrap",children:[jsx(Heading,{size:"small",variant:"regular",type:"normal",children:title}),jsx(BaseBox,{marginLeft:"spacing.3",children:suffix})]}),jsx(Text,{variant:"body",size:"small",weight:"regular",children:subtitle})]})]});};CardHeaderLeading.componentId=ComponentIds$1.CardHeaderLeading;var headerTrailingAllowedComponents=[ComponentIds$1.CardHeaderLink,ComponentIds$1.CardHeaderText,ComponentIds$1.CardHeaderIconButton,ComponentIds$1.CardHeaderBadge];var CardHeaderTrailing=function CardHeaderTrailing(_ref4){var visual=_ref4.visual;useVerifyInsideCard('CardHeaderTrailing');if(visual&&!headerTrailingAllowedComponents.includes(getComponentId(visual))){throw new Error("[Blade CardHeaderTrailing]: Only one of `"+headerTrailingAllowedComponents.join(', ')+"` component is accepted in visual");}return jsx(BaseBox,{alignSelf:"center",children:visual});};CardHeaderTrailing.componentId=ComponentIds$1.CardHeaderTrailing;
|
|
3993
|
+
var CardHeaderIcon=function CardHeaderIcon(_ref){var Icon=_ref.icon;useVerifyInsideCard('CardHeaderIcon');return jsx(Icon,{color:"surface.text.normal.lowContrast",size:"xlarge"});};CardHeaderIcon.componentId=ComponentIds$1.CardHeaderIcon;var CardHeaderCounter=function CardHeaderCounter(props){useVerifyInsideCard('CardHeaderCounter');return jsx(Counter,_extends({},props));};CardHeaderCounter.componentId=ComponentIds$1.CardHeaderCounter;var CardHeaderBadge=function CardHeaderBadge(props){useVerifyInsideCard('CardHeaderBadge');return jsx(Badge,_extends({},props));};CardHeaderBadge.componentId=ComponentIds$1.CardHeaderBadge;var CardHeaderText=function CardHeaderText(props){useVerifyInsideCard('CardHeaderText');return jsx(Text,_extends({},props));};CardHeaderText.componentId=ComponentIds$1.CardHeaderText;var CardHeaderLink=function CardHeaderLink(props){useVerifyInsideCard('CardHeaderLink');return jsx(Link,_extends({},props));};CardHeaderLink.componentId=ComponentIds$1.CardHeaderLink;var CardHeaderIconButton=function CardHeaderIconButton(props){useVerifyInsideCard('CardHeaderIconButton');return jsx(BaseBox,{width:makeSpace(minHeight.xsmall),children:jsx(Button,_extends({},props,{variant:"tertiary",size:"xsmall",iconPosition:"left",isFullWidth:true}))});};CardHeaderIconButton.componentId=ComponentIds$1.CardHeaderIconButton;var CardHeader=function CardHeader(_ref2){var children=_ref2.children,testID=_ref2.testID;useVerifyInsideCard('CardHeader');useVerifyAllowedComponents(children,'CardHeader',[ComponentIds$1.CardHeaderLeading,ComponentIds$1.CardHeaderTrailing]);return jsxs(BaseBox,_extends({marginBottom:"spacing.7"},metaAttribute({name:MetaConstants.CardHeader,testID:testID}),{children:[jsx(BaseBox,{marginBottom:"spacing.7",display:"flex",flexDirection:"row",justifyContent:"space-between",children:children}),jsx(Divider,{})]}));};CardHeader.componentId=ComponentIds$1.CardHeader;var CardHeaderLeading=function CardHeaderLeading(_ref3){var title=_ref3.title,subtitle=_ref3.subtitle,prefix=_ref3.prefix,suffix=_ref3.suffix;useVerifyInsideCard('CardHeaderLeading');if(prefix&&!isValidAllowedChildren(prefix,ComponentIds$1.CardHeaderIcon)){throw new Error("[Blade CardHeaderLeading]: Only `"+ComponentIds$1.CardHeaderIcon+"` component is accepted in prefix");}if(suffix&&!isValidAllowedChildren(suffix,ComponentIds$1.CardHeaderCounter)){throw new Error("[Blade CardHeaderLeading]: Only `"+ComponentIds$1.CardHeaderCounter+"` component is accepted in prefix");}return jsxs(BaseBox,{flex:1,display:"flex",flexDirection:"row",children:[jsx(BaseBox,{marginRight:"spacing.3",alignSelf:"center",display:"flex",children:prefix}),jsxs(BaseBox,{children:[jsxs(BaseBox,{display:"flex",flexDirection:"row",alignItems:"center",flexWrap:"wrap",children:[jsx(Heading,{size:"small",variant:"regular",type:"normal",children:title}),jsx(BaseBox,{marginLeft:"spacing.3",children:suffix})]}),subtitle&&jsx(Text,{variant:"body",size:"small",weight:"regular",children:subtitle})]})]});};CardHeaderLeading.componentId=ComponentIds$1.CardHeaderLeading;var headerTrailingAllowedComponents=[ComponentIds$1.CardHeaderLink,ComponentIds$1.CardHeaderText,ComponentIds$1.CardHeaderIconButton,ComponentIds$1.CardHeaderBadge];var CardHeaderTrailing=function CardHeaderTrailing(_ref4){var visual=_ref4.visual;useVerifyInsideCard('CardHeaderTrailing');if(visual&&!headerTrailingAllowedComponents.includes(getComponentId(visual))){throw new Error("[Blade CardHeaderTrailing]: Only one of `"+headerTrailingAllowedComponents.join(', ')+"` component is accepted in visual");}return jsx(BaseBox,{alignSelf:"center",children:visual});};CardHeaderTrailing.componentId=ComponentIds$1.CardHeaderTrailing;
|
|
3994
3994
|
|
|
3995
3995
|
var useIsMobile=function useIsMobile(){var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;return matchedDeviceType==='mobile';};var CardFooter=function CardFooter(_ref){var children=_ref.children,testID=_ref.testID;var isMobile=useIsMobile();useVerifyInsideCard('CardFooter');useVerifyAllowedComponents(children,'CardFooter',[ComponentIds$1.CardFooterLeading,ComponentIds$1.CardFooterTrailing]);return jsxs(BaseBox,_extends({marginTop:"auto"},metaAttribute({name:MetaConstants.CardFooter,testID:testID}),{children:[jsx(BaseBox,{marginTop:"spacing.7"}),jsx(Divider,{}),jsx(BaseBox,{marginTop:"spacing.7",display:"flex",flexDirection:isMobile?'column':'row',justifyContent:"space-between",alignItems:isMobile?'stretch':'center',children:children})]}));};CardFooter.componentId=ComponentIds$1.CardFooter;var CardFooterLeading=function CardFooterLeading(_ref2){var title=_ref2.title,subtitle=_ref2.subtitle;useVerifyInsideCard('CardFooterLeading');return jsxs(BaseBox,{children:[title&&jsx(Text,{variant:"body",size:"medium",weight:"bold",children:title}),subtitle&&jsx(Text,{variant:"body",size:"small",weight:"regular",children:subtitle})]});};CardFooterLeading.componentId=ComponentIds$1.CardFooterLeading;var CardFooterTrailing=function CardFooterTrailing(_ref3){var actions=_ref3.actions;var isMobile=useIsMobile();useVerifyInsideCard('CardFooterTrailing');return jsxs(BaseBox,{display:"flex",flexDirection:"row",alignSelf:isMobile?'auto':'center',marginTop:isMobile?'spacing.5':'spacing.0',marginLeft:isMobile?'spacing.0':'spacing.5',children:[jsx(BaseBox,{flexGrow:1,children:actions!=null&&actions.secondary?jsx(Button,_extends({isFullWidth:true,size:"medium",variant:"secondary"},actions.secondary,{children:actions.secondary.text})):null}),jsx(BaseBox,{marginLeft:"spacing.5"}),jsx(BaseBox,{flexGrow:1,children:actions!=null&&actions.primary?jsx(Button,_extends({isFullWidth:true,size:"medium"},actions.primary,{children:actions.primary.text})):null})]});};CardFooterTrailing.componentId=ComponentIds$1.CardFooterTrailing;
|
|
3996
3996
|
|
|
@@ -4026,7 +4026,7 @@ var _excluded$6=["autoFocus","errorText","helpText","isDisabled","keyboardReturn
|
|
|
4026
4026
|
|
|
4027
4027
|
var StyledChevronIconContainer=styled(TouchableOpacity)(function(_props){return {display:'flex',justifyContent:'center'};});var SelectChevronIcon=function SelectChevronIcon(props){var Icon=props.icon;return jsx(StyledChevronIconContainer,{accessibilityLabel:"Chevron Icon",onPress:props.onClick,children:jsx(Icon,{color:"surface.text.normal.lowContrast",size:"medium"})});};
|
|
4028
4028
|
|
|
4029
|
-
var _excluded$5=["icon","onChange","placeholder"];var _SelectInput=function _SelectInput(props,ref){var _useDropdown=useDropdown(),isOpen=_useDropdown.isOpen,value=_useDropdown.value,displayValue=_useDropdown.displayValue,onTriggerClick=_useDropdown.onTriggerClick,onTriggerKeydown=_useDropdown.onTriggerKeydown,onTriggerBlur=_useDropdown.onTriggerBlur,dropdownBaseId=_useDropdown.dropdownBaseId,activeIndex=_useDropdown.activeIndex,triggererRef=_useDropdown.triggererRef,hasFooterAction=_useDropdown.hasFooterAction,dropdownTriggerer=_useDropdown.dropdownTriggerer,shouldIgnoreBlurAnimation=_useDropdown.shouldIgnoreBlurAnimation,setHasLabelOnLeft=_useDropdown.setHasLabelOnLeft;var inputRef=useBladeInnerRef(ref,{onFocus:function onFocus(opts){var _triggererRef$current;(_triggererRef$current=triggererRef.current)==null?void 0:_triggererRef$current.focus(opts);}});var icon=props.icon,onChange=props.onChange,_props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?'Select Option':_props$placeholder,baseInputProps=_objectWithoutProperties(props,_excluded$5);React__default.useEffect(function(){onChange==null?void 0:onChange({name:props.name,values:value.split(', ')});},[value,props.name]);React__default.useEffect(function(){setHasLabelOnLeft(props.labelPosition==='left');},[props.labelPosition,setHasLabelOnLeft]);return jsxs(BaseBox,{position:"relative",children:[!isReactNative$4()?jsx(VisuallyHidden,{children:jsx("input",{ref:inputRef,tabIndex:-1,required:props.isRequired,name:props.name,value:value,onChange:function onChange(){},"aria-hidden":true})}):null,jsx(BaseInput,_extends({},baseInputProps,{as:"button",componentName:MetaConstants.SelectInput,ref:!isReactNative$4()?triggererRef:null,textAlign:"left",value:displayValue,placeholder:placeholder,id:dropdownBaseId+"-trigger",labelId:dropdownBaseId+"-label",leadingIcon:icon,hasPopup:getActionListContainerRole(hasFooterAction,dropdownTriggerer),isPopupExpanded:isOpen,onClick:onTriggerClick,onKeyDown:onTriggerKeydown,onBlur:onTriggerBlur,activeDescendant:activeIndex>=0?dropdownBaseId+"-"+activeIndex:undefined,popupId:dropdownBaseId+"-actionlist",shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,interactionElement:jsx(SelectChevronIcon,{onClick:function onClick(){if(!isReactNative$4()){var _triggererRef$current2;(_triggererRef$current2=triggererRef.current)==null?void 0:_triggererRef$current2.focus();}onTriggerClick();},icon:isOpen?ChevronUpIcon:ChevronDownIcon}),testID:props.testID}))]});};var SelectInput=React__default.forwardRef(_SelectInput);SelectInput.componentId='SelectInput';
|
|
4029
|
+
var _excluded$5=["icon","onChange","placeholder","onBlur"];var _SelectInput=function _SelectInput(props,ref){var _useDropdown=useDropdown(),isOpen=_useDropdown.isOpen,value=_useDropdown.value,displayValue=_useDropdown.displayValue,onTriggerClick=_useDropdown.onTriggerClick,onTriggerKeydown=_useDropdown.onTriggerKeydown,onTriggerBlur=_useDropdown.onTriggerBlur,dropdownBaseId=_useDropdown.dropdownBaseId,activeIndex=_useDropdown.activeIndex,triggererRef=_useDropdown.triggererRef,hasFooterAction=_useDropdown.hasFooterAction,dropdownTriggerer=_useDropdown.dropdownTriggerer,shouldIgnoreBlurAnimation=_useDropdown.shouldIgnoreBlurAnimation,setHasLabelOnLeft=_useDropdown.setHasLabelOnLeft;var inputRef=useBladeInnerRef(ref,{onFocus:function onFocus(opts){var _triggererRef$current;(_triggererRef$current=triggererRef.current)==null?void 0:_triggererRef$current.focus(opts);}});var icon=props.icon,onChange=props.onChange,_props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?'Select Option':_props$placeholder,_onBlur=props.onBlur,baseInputProps=_objectWithoutProperties(props,_excluded$5);React__default.useEffect(function(){onChange==null?void 0:onChange({name:props.name,values:value.split(', ')});},[value,props.name]);React__default.useEffect(function(){setHasLabelOnLeft(props.labelPosition==='left');},[props.labelPosition,setHasLabelOnLeft]);return jsxs(BaseBox,{position:"relative",children:[!isReactNative$4()?jsx(VisuallyHidden,{children:jsx("input",{ref:inputRef,tabIndex:-1,required:props.isRequired,name:props.name,value:value,onChange:function onChange(){},"aria-hidden":true})}):null,jsx(BaseInput,_extends({},baseInputProps,{as:"button",componentName:MetaConstants.SelectInput,ref:!isReactNative$4()?triggererRef:null,textAlign:"left",value:displayValue,placeholder:placeholder,id:dropdownBaseId+"-trigger",labelId:dropdownBaseId+"-label",leadingIcon:icon,hasPopup:getActionListContainerRole(hasFooterAction,dropdownTriggerer),isPopupExpanded:isOpen,onClick:onTriggerClick,onKeyDown:onTriggerKeydown,onBlur:function onBlur(_ref){var name=_ref.name;onTriggerBlur==null?void 0:onTriggerBlur({name:name,value:value,onBlurCallback:_onBlur});},activeDescendant:activeIndex>=0?dropdownBaseId+"-"+activeIndex:undefined,popupId:dropdownBaseId+"-actionlist",shouldIgnoreBlurAnimation:shouldIgnoreBlurAnimation,interactionElement:jsx(SelectChevronIcon,{onClick:function onClick(){if(!isReactNative$4()){var _triggererRef$current2;(_triggererRef$current2=triggererRef.current)==null?void 0:_triggererRef$current2.focus();}onTriggerClick();},icon:isOpen?ChevronUpIcon:ChevronDownIcon}),testID:props.testID}))]});};var SelectInput=React__default.forwardRef(_SelectInput);SelectInput.componentId='SelectInput';
|
|
4030
4030
|
|
|
4031
4031
|
var _excluded$4=["accessibilityLabel","children","size","intent","testID"];var Indicator=function Indicator(_ref){var accessibilityLabel=_ref.accessibilityLabel,children=_ref.children,_ref$size=_ref.size,size$1=_ref$size===void 0?'medium':_ref$size,_ref$intent=_ref.intent,intent=_ref$intent===void 0?'neutral':_ref$intent,testID=_ref.testID,styledProps=_objectWithoutProperties(_ref,_excluded$4);var _useTheme=useTheme(),theme=_useTheme.theme;var childrenString=getStringFromReactText(children);var fillColor=theme.colors.feedback.background[intent].highContrast;var strokeColor=theme.colors.brand.gray.a100.highContrast;var getDimension=useCallback(function(){switch(size$1){case'small':return {svgSize:size[6],textSize:'small'};case'large':return {svgSize:size[10],textSize:'medium'};default:return {svgSize:size[8],textSize:'medium'};}},[size$1]);var dimensions=getDimension();var isReactNative=getPlatformType()==='react-native';var isWeb=!isReactNative;var a11yProps=makeAccessible(_extends({label:accessibilityLabel!=null?accessibilityLabel:childrenString},isWeb&&{role:'status'}));return jsxs(BaseBox,_extends({display:"flex",flexDirection:"row",alignItems:"center"},a11yProps,metaAttribute({name:MetaConstants.Indicator,testID:testID}),getStyledProps(styledProps),{children:[jsxs(Svg,{width:String(dimensions.svgSize),height:String(dimensions.svgSize),viewBox:"0 0 10 10",fill:"none",children:[jsx(Circle,{cx:"5",cy:"5",r:"5",fill:fillColor}),jsx(Circle,{cx:"5",cy:"5",r:"4.75",stroke:strokeColor,strokeWidth:"0.5"})]}),jsx(BaseBox,{marginLeft:"spacing.2",children:jsx(Text,{contrast:"low",type:"subtle",size:dimensions.textSize,children:children})})]}));};
|
|
4032
4032
|
|