@razorpay/blade
Version:
The Design System that powers Razorpay
29 lines (26 loc) • 4.7 kB
JavaScript
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