UNPKG

@razorpay/blade

Version:

The Design System that powers Razorpay

29 lines (26 loc) 4.7 kB
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties'; import React__default from 'react'; import { chipGroupLabelSizeTokens, chipGroupGapTokens } from './chipTokens.js'; import { ChipGroupProvider } from './ChipGroupContext.js'; import { useChipGroup } from './useChipGroup.js'; import { BaseBox } from '../Box/BaseBox/BaseBox.native.js'; import { FormHint } from '../Form/FormHint.js'; import { FormLabel } from '../Form/FormLabel.js'; import { SelectorGroupField } from '../Form/Selector/SelectorGroupField.js'; import { getStyledProps } from '../Box/styledProps/getStyledProps.js'; import '@babel/runtime/helpers/slicedToArray'; import 'react-native'; import '../../tokens/global/typography.js'; import '../../tokens/global/motion.js'; import { throwBladeError } from '../../utils/logger/logger.js'; import '../BladeProvider/useTheme.js'; import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.native.js'; import '../Typography/Heading/Heading.js'; import { Text } from '../Typography/Text/Text.js'; import '../Typography/Code/Code.js'; import '../Typography/Display/Display.js'; import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js'; import { jsx, jsxs } from 'react/jsx-runtime'; var _excluded=["accessibilityLabel","label","labelPosition","necessityIndicator","validationState","errorText","helpText","isRequired","children","isDisabled","name","defaultValue","onChange","value","size","color","testID","selectionType"];var _ChipGroup=function _ChipGroup(_ref,ref){var accessibilityLabel=_ref.accessibilityLabel,label=_ref.label,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$validationState=_ref.validationState,validationState=_ref$validationState===void 0?'none':_ref$validationState,errorText=_ref.errorText,helpText=_ref.helpText,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,children=_ref.children,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'small':_ref$size,_ref$color=_ref.color,color=_ref$color===void 0?'primary':_ref$color,testID=_ref.testID,_ref$selectionType=_ref.selectionType,selectionType=_ref$selectionType===void 0?'single':_ref$selectionType,rest=_objectWithoutProperties(_ref,_excluded);var _useChipGroup=useChipGroup({defaultValue:defaultValue,onChange:onChange,value:value,isDisabled:isDisabled,name:name,size:size,color:color,selectionType:selectionType,isRequired:isRequired,validationState:validationState,necessityIndicator:necessityIndicator}),contextValue=_useChipGroup.contextValue,ids=_useChipGroup.ids;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`${showError?errorText:''} ${showHelpText?helpText:''}`.trim();if(__DEV__){if(selectionType==='single'&&Array.isArray(defaultValue)){throwBladeError({moduleName:'ChipGroup',message:`When "selectionType" is "single", the "defaultValue" prop must be a string value, but an array was provided.`});}if(selectionType==='single'&&Array.isArray(value)){throwBladeError({moduleName:'ChipGroup',message:`When "selectionType" is "single", the "value" prop must be a string value, but an array was provided.`});}}return jsx(ChipGroupProvider,{value:contextValue,children:jsx(BaseBox,Object.assign({ref:ref},getStyledProps(rest),{children:jsxs(SelectorGroupField,Object.assign({position:labelPosition,accessibilityRole:selectionType==='single'?'radiogroup':'group',labelledBy:ids.labelId,componentName:"chip-group",testID:testID},makeAnalyticsAttribute(rest),{children:[label?jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText&&`,${accessibilityText}`,size:chipGroupLabelSizeTokens[size],children:label}):null,jsxs(BaseBox,{children:[jsx(VisuallyHidden,{children:jsx(Text,{children:accessibilityLabel})}),jsx(BaseBox,{display:"flex",flexDirection:"row",flexWrap:"wrap",rowGap:chipGroupGapTokens[size].bottom,columnGap:chipGroupGapTokens[size].right,marginBottom:chipGroupGapTokens[size].bottom,children:children}),jsx(FormHint,{size:chipGroupLabelSizeTokens[size],type:validationState==='error'?'error':'help',errorText:errorText,helpText:helpText})]})]}))}))});};var ChipGroup=React__default.forwardRef(_ChipGroup); export { ChipGroup }; //# sourceMappingURL=ChipGroup.js.map