@razorpay/blade 12.25.2 → 12.26.0
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/build/lib/native/components/Checkbox/CheckboxGroup/CheckboxGroup.js +1 -2
- package/build/lib/native/components/Checkbox/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/build/lib/native/components/Checkbox/checkboxTokens.js +1 -1
- package/build/lib/native/components/Checkbox/checkboxTokens.js.map +1 -1
- package/build/lib/native/components/Radio/RadioGroup/RadioGroup.js +1 -2
- package/build/lib/native/components/Radio/RadioGroup/RadioGroup.js.map +1 -1
- package/build/lib/native/components/Radio/radioTokens.js +1 -1
- package/build/lib/native/components/Radio/radioTokens.js.map +1 -1
- package/build/lib/web/development/components/Checkbox/CheckboxGroup/CheckboxGroup.js +5 -6
- package/build/lib/web/development/components/Checkbox/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/build/lib/web/development/components/Checkbox/checkboxTokens.js +4 -4
- package/build/lib/web/development/components/Checkbox/checkboxTokens.js.map +1 -1
- package/build/lib/web/development/components/Radio/RadioGroup/RadioGroup.js +5 -6
- package/build/lib/web/development/components/Radio/RadioGroup/RadioGroup.js.map +1 -1
- package/build/lib/web/development/components/Radio/radioTokens.js +3 -3
- package/build/lib/web/development/components/Radio/radioTokens.js.map +1 -1
- package/build/lib/web/production/components/Checkbox/CheckboxGroup/CheckboxGroup.js +5 -6
- package/build/lib/web/production/components/Checkbox/CheckboxGroup/CheckboxGroup.js.map +1 -1
- package/build/lib/web/production/components/Checkbox/checkboxTokens.js +4 -4
- package/build/lib/web/production/components/Checkbox/checkboxTokens.js.map +1 -1
- package/build/lib/web/production/components/Radio/RadioGroup/RadioGroup.js +5 -6
- package/build/lib/web/production/components/Radio/RadioGroup/RadioGroup.js.map +1 -1
- package/build/lib/web/production/components/Radio/radioTokens.js +3 -3
- package/build/lib/web/production/components/Radio/radioTokens.js.map +1 -1
- package/build/types/components/index.d.ts +14 -2
- package/build/types/components/index.native.d.ts +14 -2
- package/package.json +1 -1
|
@@ -13,7 +13,6 @@ import 'react-native';
|
|
|
13
13
|
import '../../../tokens/global/typography.js';
|
|
14
14
|
import '../../../tokens/global/motion.js';
|
|
15
15
|
import { useBreakpoint } from '../../../utils/useBreakpoint/useBreakpoint.js';
|
|
16
|
-
import { makeSize } from '../../../utils/makeSize/makeSize.js';
|
|
17
16
|
import useTheme from '../../BladeProvider/useTheme.js';
|
|
18
17
|
import 'styled-components/native';
|
|
19
18
|
import '@gorhom/portal';
|
|
@@ -22,7 +21,7 @@ import '../../BottomSheet/BottomSheetStack.js';
|
|
|
22
21
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
23
22
|
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
24
23
|
|
|
25
|
-
var _excluded=["children","label","helpText","isDisabled","isRequired","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","testID"];var CheckboxGroup=function CheckboxGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,validationState=_ref.validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,rest=_objectWithoutProperties(_ref,_excluded);var _useCheckboxGroup=useCheckboxGroup({defaultValue:defaultValue,onChange:onChange,value:value,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,name:name,labelPosition:labelPosition,validationState:validationState,size:size}),contextValue=_useCheckboxGroup.contextValue,ids=_useCheckboxGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`,${showError?errorText:''} ${showHelpText?helpText:''}`;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var gap=checkboxSizes.group.gap[size][matchedDeviceType];
|
|
24
|
+
var _excluded=["children","label","helpText","isDisabled","isRequired","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","testID","orientation"];var CheckboxGroup=function CheckboxGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,validationState=_ref.validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,_ref$orientation=_ref.orientation,orientation=_ref$orientation===void 0?'vertical':_ref$orientation,rest=_objectWithoutProperties(_ref,_excluded);var _useCheckboxGroup=useCheckboxGroup({defaultValue:defaultValue,onChange:onChange,value:value,isDisabled:isDisabled,necessityIndicator:necessityIndicator,isRequired:isRequired,name:name,labelPosition:labelPosition,validationState:validationState,size:size}),contextValue=_useCheckboxGroup.contextValue,ids=_useCheckboxGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`,${showError?errorText:''} ${showHelpText?helpText:''}`;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var gap=checkboxSizes.group.gap[size][matchedDeviceType];return jsx(CheckboxGroupProvider,{value:contextValue,children:jsx(BaseBox,Object.assign({},getStyledProps(rest),{children:jsxs(SelectorGroupField,Object.assign({position:labelPosition,labelledBy:ids.labelId,componentName:"checkbox-group",testID:testID},makeAnalyticsAttribute(rest),{children:[label?jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText,size:size,children:label}):null,jsxs(BaseBox,{children:[jsx(BaseBox,{display:"flex",flexDirection:orientation==='horizontal'?'row':'column',gap:gap,children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{children:child},index);})}),jsx(FormHint,{size:size,errorText:errorText,helpText:helpText,type:validationState==='error'?'error':'help'})]})]}))}))});};
|
|
26
25
|
|
|
27
26
|
export { CheckboxGroup };
|
|
28
27
|
//# sourceMappingURL=CheckboxGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport {
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype CheckboxGroupProps = {\n /**\n * Accepts multiple checkboxes as children\n */\n children: React.ReactNode;\n /**\n * Help text of the checkbox group\n */\n helpText?: string;\n /**\n * Error text of the checkbox group\n * Renders when `validationState` is set to 'error'\n *\n * Overrides helpText\n */\n errorText?: string;\n /**\n * Sets the error state of the CheckboxGroup\n * If set to `error` it will render the `errorText` of the group,\n * and propagate `invalid` prop to every checkbox\n */\n validationState?: 'error' | 'none';\n /**\n * Renders a necessity indicator after CheckboxGroup label\n *\n * If set to `undefined` it renders nothing.\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n /**\n * Sets the disabled state of the CheckboxGroup\n * If set to `true` it propagate down to all the checkboxes\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Sets the required state of the CheckboxGroup\n * @default false\n */\n isRequired?: boolean;\n /**\n * Renders the label of the checkbox group\n */\n label?: string;\n /**\n * Sets the position of the label\n *\n * @default 'top'\n */\n labelPosition?: 'top' | 'left';\n /**\n * Initial value of the checkbox group\n */\n defaultValue?: string[];\n /**\n * value of the checkbox group\n *\n * Use `onChange` to update its value\n */\n value?: string[];\n /**\n * The callback invoked when any of the checkbox's state changes\n */\n onChange?: ({ name, values }: { name: string; values: string[] }) => void;\n /**\n * The name of the input field in a checkbox\n * (Useful for form submission).\n */\n name?: string;\n /**\n * Size of the checkbox\n *\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large';\n /**\n * Orientation of the checkbox group\n *\n * @default \"vertical\"\n */\n orientation?: 'vertical' | 'horizontal';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst CheckboxGroup = ({\n children,\n label,\n helpText,\n isDisabled = false,\n isRequired = false,\n necessityIndicator = 'none',\n labelPosition = 'top',\n validationState,\n errorText,\n name,\n defaultValue,\n onChange,\n value,\n size = 'medium',\n testID,\n orientation = 'vertical',\n ...rest\n}: CheckboxGroupProps): React.ReactElement => {\n const { contextValue, ids } = useCheckboxGroup({\n defaultValue,\n onChange,\n value,\n isDisabled,\n necessityIndicator,\n isRequired,\n name,\n labelPosition,\n validationState,\n size,\n });\n\n const { theme } = useTheme();\n const showError = validationState === 'error' && errorText;\n const showHelpText = !showError && helpText;\n const accessibilityText = `,${showError ? errorText : ''} ${showHelpText ? helpText : ''}`;\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const gap = checkboxSizes.group.gap[size][matchedDeviceType];\n\n return (\n <CheckboxGroupProvider value={contextValue}>\n <BaseBox {...getStyledProps(rest)}>\n <SelectorGroupField\n position={labelPosition}\n labelledBy={ids.labelId}\n componentName=\"checkbox-group\"\n testID={testID}\n {...makeAnalyticsAttribute(rest)}\n >\n {label ? (\n <FormLabel\n as=\"span\"\n necessityIndicator={necessityIndicator}\n position={labelPosition}\n id={ids.labelId}\n accessibilityText={accessibilityText}\n size={size}\n >\n {label}\n </FormLabel>\n ) : null}\n <BaseBox>\n <BaseBox\n display=\"flex\"\n flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n gap={gap}\n >\n {React.Children.map(children, (child, index) => {\n return <BaseBox key={index}>{child}</BaseBox>;\n })}\n </BaseBox>\n <FormHint\n size={size}\n errorText={errorText}\n helpText={helpText}\n type={validationState === 'error' ? 'error' : 'help'}\n />\n </BaseBox>\n </SelectorGroupField>\n </BaseBox>\n </CheckboxGroupProvider>\n );\n};\n\nexport type { CheckboxGroupProps };\nexport { CheckboxGroup };\n"],"names":["CheckboxGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","_ref$orientation","orientation","rest","_objectWithoutProperties","_excluded","_useCheckboxGroup","useCheckboxGroup","contextValue","ids","_useTheme","useTheme","theme","showError","showHelpText","accessibilityText","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","_jsx","CheckboxGroupProvider","BaseBox","Object","assign","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import '../../tokens/global/typography.js';
|
|
|
2
2
|
import '../../tokens/global/motion.js';
|
|
3
3
|
import { size } from '../../tokens/global/size.js';
|
|
4
4
|
|
|
5
|
-
var checkboxSizes={group:{gap:{small:{mobile:'spacing.
|
|
5
|
+
var checkboxSizes={group:{gap:{small:{mobile:'spacing.2',desktop:'spacing.2'},medium:{mobile:'spacing.3',desktop:'spacing.3'},large:{mobile:'spacing.3',desktop:'spacing.3'}}},icon:{small:{width:size[12],height:size[12]},medium:{width:size[16],height:size[16]},large:{width:size[20],height:size[20]}}};var checkboxIconColors={variants:{default:{border:{checked:'colors.interactive.border.primary.default',unchecked:'colors.interactive.border.gray.default'},background:{checked:'colors.interactive.background.primary.default',unchecked:'colors.transparent'}},disabled:{border:{checked:'colors.interactive.border.primary.disabled',unchecked:'colors.interactive.border.gray.disabled'},background:{checked:'colors.interactive.background.primary.disabled',unchecked:'colors.transparent'}},negative:{border:{checked:'colors.interactive.border.negative.default',unchecked:'colors.interactive.border.negative.default'},background:{checked:'colors.interactive.background.negative.default',unchecked:'colors.transparent'}}}};var checkboxHoverTokens={default:{background:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.background.gray.faded'},border:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.border.gray.default'}}};
|
|
6
6
|
|
|
7
7
|
export { checkboxHoverTokens, checkboxIconColors, checkboxSizes };
|
|
8
8
|
//# sourceMappingURL=checkboxTokens.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkboxTokens.js","sources":["../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.
|
|
1
|
+
{"version":3,"file":"checkboxTokens.js","sources":["../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.2',\n desktop: 'spacing.2',\n },\n medium: {\n mobile: 'spacing.3',\n desktop: 'spacing.3',\n },\n large: {\n mobile: 'spacing.3',\n desktop: 'spacing.3',\n },\n },\n },\n icon: {\n small: {\n width: size[12],\n height: size[12],\n },\n medium: {\n width: size[16],\n height: size[16],\n },\n large: {\n width: size[20],\n height: size[20],\n },\n },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n border: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n background: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n};\n\ntype CheckboxIconColors = {\n variants: {\n default: Variant;\n disabled: Variant;\n negative: Variant;\n };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n variants: {\n default: {\n border: {\n checked: 'colors.interactive.border.primary.default',\n unchecked: 'colors.interactive.border.gray.default',\n },\n background: {\n checked: 'colors.interactive.background.primary.default',\n unchecked: 'colors.transparent',\n },\n },\n disabled: {\n border: {\n checked: 'colors.interactive.border.primary.disabled',\n unchecked: 'colors.interactive.border.gray.disabled',\n },\n background: {\n checked: 'colors.interactive.background.primary.disabled',\n unchecked: 'colors.transparent',\n },\n },\n negative: {\n border: {\n checked: 'colors.interactive.border.negative.default',\n unchecked: 'colors.interactive.border.negative.default',\n },\n background: {\n checked: 'colors.interactive.background.negative.default',\n unchecked: 'colors.transparent',\n },\n },\n },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n default: {\n background: {\n checked: 'colors.interactive.background.primary.highlighted',\n unchecked: 'colors.interactive.background.gray.faded',\n },\n border: {\n checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n unchecked: 'colors.interactive.border.gray.default',\n },\n },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","checkboxIconColors","variants","default","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;;AAKM,IAAAA,aAAa,CAAG,CACpBC,KAAK,CAAE,CACLC,GAAG,CAAE,CACHC,KAAK,CAAE,CACLC,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDE,KAAK,CAAE,CACLH,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CACF,CACF,CAAC,CACDG,IAAI,CAAE,CACJL,KAAK,CAAE,CACLM,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CAAC,CACDJ,MAAM,CAAE,CACNG,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CAAC,CACDH,KAAK,CAAE,CACLE,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CACjB,CACF,CACF,EAsBM,IAAAE,kBAAsC,CAAG,CAC7CC,QAAQ,CAAE,CACRC,OAAO,CAAE,CACPC,MAAM,CAAE,CACNC,OAAO,CAAE,2CAA2C,CACpDC,SAAS,CAAE,wCACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,+CAA+C,CACxDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDE,QAAQ,CAAE,CACRJ,MAAM,CAAE,CACNC,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,yCACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDG,QAAQ,CAAE,CACRL,MAAM,CAAE,CACNC,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,4CACb,CAAC,CACDC,UAAU,CAAE,CACVF,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CACF,CACF,EAEM,IAAAI,mBAA6C,CAAG,CACpDP,OAAO,CAAE,CACPI,UAAU,CAAE,CACVF,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,0CACb,CAAC,CACDF,MAAM,CAAE,CACNC,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,wCACb,CACF,CACF;;;;"}
|
|
@@ -13,7 +13,6 @@ import 'react-native';
|
|
|
13
13
|
import '../../../tokens/global/typography.js';
|
|
14
14
|
import '../../../tokens/global/motion.js';
|
|
15
15
|
import { useBreakpoint } from '../../../utils/useBreakpoint/useBreakpoint.js';
|
|
16
|
-
import { makeSize } from '../../../utils/makeSize/makeSize.js';
|
|
17
16
|
import useTheme from '../../BladeProvider/useTheme.js';
|
|
18
17
|
import 'styled-components/native';
|
|
19
18
|
import '@gorhom/portal';
|
|
@@ -22,7 +21,7 @@ import '../../BottomSheet/BottomSheetStack.js';
|
|
|
22
21
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
23
22
|
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
24
23
|
|
|
25
|
-
var _excluded=["children","label","helpText","isDisabled","isRequired","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","testID"];var RadioGroup=function RadioGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,_ref$validationState=_ref.validationState,validationState=_ref$validationState===void 0?'none':_ref$validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,testID=_ref.testID,rest=_objectWithoutProperties(_ref,_excluded);var _useRadioGroup=useRadioGroup({defaultValue:defaultValue,isDisabled:isDisabled,isRequired:isRequired,labelPosition:labelPosition,name:name,necessityIndicator:necessityIndicator,onChange:onChange,validationState:validationState,value:value,size:size}),contextValue=_useRadioGroup.contextValue,ids=_useRadioGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`${showError?errorText:''} ${showHelpText?helpText:''}`.trim();var gap=radioSizes.group.gap[size][matchedDeviceType];
|
|
24
|
+
var _excluded=["children","label","helpText","isDisabled","isRequired","necessityIndicator","labelPosition","validationState","errorText","name","defaultValue","onChange","value","size","orientation","testID"];var RadioGroup=function RadioGroup(_ref){var children=_ref.children,label=_ref.label,helpText=_ref.helpText,_ref$isDisabled=_ref.isDisabled,isDisabled=_ref$isDisabled===void 0?false:_ref$isDisabled,_ref$isRequired=_ref.isRequired,isRequired=_ref$isRequired===void 0?false:_ref$isRequired,_ref$necessityIndicat=_ref.necessityIndicator,necessityIndicator=_ref$necessityIndicat===void 0?'none':_ref$necessityIndicat,_ref$labelPosition=_ref.labelPosition,labelPosition=_ref$labelPosition===void 0?'top':_ref$labelPosition,_ref$validationState=_ref.validationState,validationState=_ref$validationState===void 0?'none':_ref$validationState,errorText=_ref.errorText,name=_ref.name,defaultValue=_ref.defaultValue,onChange=_ref.onChange,value=_ref.value,_ref$size=_ref.size,size=_ref$size===void 0?'medium':_ref$size,_ref$orientation=_ref.orientation,orientation=_ref$orientation===void 0?'vertical':_ref$orientation,testID=_ref.testID,rest=_objectWithoutProperties(_ref,_excluded);var _useRadioGroup=useRadioGroup({defaultValue:defaultValue,isDisabled:isDisabled,isRequired:isRequired,labelPosition:labelPosition,name:name,necessityIndicator:necessityIndicator,onChange:onChange,validationState:validationState,value:value,size:size}),contextValue=_useRadioGroup.contextValue,ids=_useRadioGroup.ids;var _useTheme=useTheme(),theme=_useTheme.theme;var _useBreakpoint=useBreakpoint({breakpoints:theme.breakpoints}),matchedDeviceType=_useBreakpoint.matchedDeviceType;var showError=validationState==='error'&&errorText;var showHelpText=!showError&&helpText;var accessibilityText=`${showError?errorText:''} ${showHelpText?helpText:''}`.trim();var gap=radioSizes.group.gap[size][matchedDeviceType];return jsx(RadioGroupProvider,{value:contextValue,children:jsx(BaseBox,Object.assign({},getStyledProps(rest),{children:jsxs(SelectorGroupField,Object.assign({position:labelPosition,labelledBy:ids.labelId,accessibilityRole:"radiogroup",componentName:"radio-group",testID:testID},makeAnalyticsAttribute(rest),{children:[label?jsx(FormLabel,{as:"span",necessityIndicator:necessityIndicator,position:labelPosition,id:ids.labelId,accessibilityText:accessibilityText&&`,${accessibilityText}`,size:size,children:label}):null,jsxs(BaseBox,{children:[jsx(BaseBox,{display:"flex",flexDirection:orientation==='vertical'?'column':'row',gap:gap,children:React__default.Children.map(children,function(child,index){return jsx(BaseBox,{children:child},index);})}),jsx(FormHint,{size:size,type:validationState==='error'?'error':'help',errorText:errorText,helpText:helpText})]})]}))}))});};
|
|
26
25
|
|
|
27
26
|
export { RadioGroup };
|
|
28
27
|
//# sourceMappingURL=RadioGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { radioSizes } from '../radioTokens';\nimport { RadioGroupProvider } from './RadioContext';\nimport { useRadioGroup } from './useRadioGroup';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport {
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { radioSizes } from '../radioTokens';\nimport { RadioGroupProvider } from './RadioContext';\nimport { useRadioGroup } from './useRadioGroup';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype RadioGroupProps = {\n /**\n * Accepts multiple radios as children\n */\n children: React.ReactNode;\n /**\n * Help text of the radio group\n */\n helpText?: string;\n /**\n * Error text of the radio group\n * Renders when `validationState` is set to 'error'\n *\n * Overrides helpText\n */\n errorText?: string;\n /**\n * Sets the error state of the radioGroup\n * If set to `error` it will render the `errorText` of the group,\n * and propagate `invalid` prop to every radio\n */\n validationState?: 'error' | 'none';\n /**\n * Renders a necessity indicator after radioGroup label\n *\n * If set to `undefined` it renders nothing.\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n /**\n * Sets the disabled state of the radioGroup\n * If set to `true` it propagate down to all the radios\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Sets the required state of the radioGroup\n * @default false\n */\n isRequired?: boolean;\n /**\n * Renders the label of the radio group\n */\n label?: string;\n /**\n * Sets the position of the label\n *\n * @default 'top'\n */\n labelPosition?: 'top' | 'left';\n /**\n * Initial value of the radio group\n */\n defaultValue?: string;\n /**\n * value of the radio group\n *\n * Use `onChange` to update its value\n */\n value?: string;\n /**\n * The callback invoked when any of the radio's state changes\n */\n onChange?: ({\n name,\n value,\n event,\n }: {\n name: string | undefined;\n value: string;\n event: React.ChangeEvent<HTMLInputElement>;\n }) => void;\n /**\n * The name of the input field in a radio\n * (Useful for form submission).\n */\n name?: string;\n /**\n * Size of the radios\n *\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Orientation of the radio group\n *\n * @default 'vertical'\n */\n orientation?: 'vertical' | 'horizontal';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst RadioGroup = ({\n children,\n label,\n helpText,\n isDisabled = false,\n isRequired = false,\n necessityIndicator = 'none',\n labelPosition = 'top',\n validationState = 'none',\n errorText,\n name,\n defaultValue,\n onChange,\n value,\n size = 'medium',\n orientation = 'vertical',\n testID,\n ...rest\n}: RadioGroupProps): React.ReactElement => {\n const { contextValue, ids } = useRadioGroup({\n defaultValue,\n isDisabled,\n isRequired,\n labelPosition,\n name,\n necessityIndicator,\n onChange,\n validationState,\n value,\n size,\n });\n\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const showError = validationState === 'error' && errorText;\n const showHelpText = !showError && helpText;\n const accessibilityText = `${showError ? errorText : ''} ${showHelpText ? helpText : ''}`.trim();\n const gap = radioSizes.group.gap[size][matchedDeviceType];\n\n return (\n <RadioGroupProvider value={contextValue}>\n <BaseBox {...getStyledProps(rest)}>\n <SelectorGroupField\n position={labelPosition}\n labelledBy={ids.labelId}\n accessibilityRole=\"radiogroup\"\n componentName=\"radio-group\"\n testID={testID}\n {...makeAnalyticsAttribute(rest)}\n >\n {label ? (\n <FormLabel\n as=\"span\"\n necessityIndicator={necessityIndicator}\n position={labelPosition}\n id={ids.labelId}\n accessibilityText={accessibilityText && `,${accessibilityText}`}\n size={size}\n >\n {label}\n </FormLabel>\n ) : null}\n <BaseBox>\n <BaseBox\n display=\"flex\"\n flexDirection={orientation === 'vertical' ? 'column' : 'row'}\n gap={gap}\n >\n {React.Children.map(children, (child, index) => {\n return <BaseBox key={index}>{child}</BaseBox>;\n })}\n </BaseBox>\n <FormHint\n size={size}\n type={validationState === 'error' ? 'error' : 'help'}\n errorText={errorText}\n helpText={helpText}\n />\n </BaseBox>\n </SelectorGroupField>\n </BaseBox>\n </RadioGroupProvider>\n );\n};\n\nexport type { RadioGroupProps };\nexport { RadioGroup };\n"],"names":["RadioGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","_ref$validationState","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","_ref$orientation","orientation","testID","rest","_objectWithoutProperties","_excluded","_useRadioGroup","useRadioGroup","contextValue","ids","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","showError","showHelpText","accessibilityText","trim","gap","radioSizes","group","_jsx","RadioGroupProvider","BaseBox","Object","assign","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","accessibilityRole","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import '../../tokens/global/typography.js';
|
|
|
2
2
|
import '../../tokens/global/motion.js';
|
|
3
3
|
import { size } from '../../tokens/global/size.js';
|
|
4
4
|
|
|
5
|
-
var radioSizes={group:{gap:{small:{mobile:'spacing.
|
|
5
|
+
var radioSizes={group:{gap:{small:{mobile:'spacing.2',desktop:'spacing.2'},medium:{mobile:'spacing.3',desktop:'spacing.3'},large:{mobile:'spacing.4',desktop:'spacing.4'}}},icon:{small:{width:size[12],height:size[12],dotRadius:size[2]},medium:{width:size[16],height:size[16],dotRadius:size[3]},large:{width:size[20],height:size[20],dotRadius:size[4]}}};var radioIconColors={variants:{default:{dot:{checked:'colors.interactive.icon.onPrimary.normal',unchecked:'colors.transparent'},border:{checked:'colors.interactive.border.primary.default',unchecked:'colors.interactive.border.gray.default'},background:{checked:'colors.interactive.background.primary.default',unchecked:'colors.transparent'}},disabled:{dot:{checked:'colors.interactive.icon.onPrimary.normal',unchecked:'colors.interactive.icon.onPrimary.normal'},border:{checked:'colors.transparent',unchecked:'colors.interactive.border.gray.disabled'},background:{checked:'colors.interactive.background.primary.disabled',unchecked:'colors.transparent'}},negative:{dot:{checked:'colors.interactive.icon.onPrimary.normal',unchecked:'colors.transparent'},border:{checked:'colors.interactive.border.negative.default',unchecked:'colors.interactive.border.negative.default'},background:{checked:'colors.interactive.background.negative.default',unchecked:'colors.transparent'}}}};var radioHoverTokens={default:{background:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.background.gray.faded'},border:{checked:'colors.interactive.background.primary.highlighted',unchecked:'colors.interactive.border.gray.default'}}};
|
|
6
6
|
|
|
7
7
|
export { radioHoverTokens, radioIconColors, radioSizes };
|
|
8
8
|
//# sourceMappingURL=radioTokens.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioTokens.js","sources":["../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.
|
|
1
|
+
{"version":3,"file":"radioTokens.js","sources":["../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.2',\n desktop: 'spacing.2',\n },\n medium: {\n mobile: 'spacing.3',\n desktop: 'spacing.3',\n },\n large: {\n mobile: 'spacing.4',\n desktop: 'spacing.4',\n },\n },\n },\n icon: {\n small: {\n width: size[12],\n height: size[12],\n dotRadius: size[2],\n },\n medium: {\n width: size[16],\n height: size[16],\n dotRadius: size[3],\n },\n large: {\n width: size[20],\n height: size[20],\n dotRadius: size[4],\n },\n },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n dot: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n border: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n background: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n};\n\ntype RadioIconColors = {\n variants: {\n default: Variant;\n disabled: Variant;\n negative: Variant;\n };\n};\n\nconst radioIconColors: RadioIconColors = {\n variants: {\n default: {\n dot: {\n checked: 'colors.interactive.icon.onPrimary.normal',\n unchecked: 'colors.transparent',\n },\n border: {\n checked: 'colors.interactive.border.primary.default',\n unchecked: 'colors.interactive.border.gray.default',\n },\n background: {\n checked: 'colors.interactive.background.primary.default',\n unchecked: 'colors.transparent',\n },\n },\n disabled: {\n dot: {\n checked: 'colors.interactive.icon.onPrimary.normal',\n unchecked: 'colors.interactive.icon.onPrimary.normal',\n },\n border: {\n checked: 'colors.transparent',\n unchecked: 'colors.interactive.border.gray.disabled',\n },\n background: {\n checked: 'colors.interactive.background.primary.disabled',\n unchecked: 'colors.transparent',\n },\n },\n negative: {\n dot: {\n checked: 'colors.interactive.icon.onPrimary.normal',\n unchecked: 'colors.transparent',\n },\n border: {\n checked: 'colors.interactive.border.negative.default',\n unchecked: 'colors.interactive.border.negative.default',\n },\n background: {\n checked: 'colors.interactive.background.negative.default',\n unchecked: 'colors.transparent',\n },\n },\n },\n} as const;\n\nconst radioHoverTokens: SelectorInputHoverTokens = {\n default: {\n background: {\n checked: 'colors.interactive.background.primary.highlighted',\n unchecked: 'colors.interactive.background.gray.faded',\n },\n border: {\n checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n unchecked: 'colors.interactive.border.gray.default',\n },\n },\n};\n\nexport { radioSizes, radioIconColors, radioHoverTokens };\n"],"names":["radioSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","dotRadius","radioIconColors","variants","default","dot","checked","unchecked","border","background","disabled","negative","radioHoverTokens"],"mappings":";;;;AAKM,IAAAA,UAAU,CAAG,CACjBC,KAAK,CAAE,CACLC,GAAG,CAAE,CACHC,KAAK,CAAE,CACLC,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDC,MAAM,CAAE,CACNF,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CAAC,CACDE,KAAK,CAAE,CACLH,MAAM,CAAE,WAAW,CACnBC,OAAO,CAAE,WACX,CACF,CACF,CAAC,CACDG,IAAI,CAAE,CACJL,KAAK,CAAE,CACLM,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CAAC,CAChBE,SAAS,CAAEF,IAAI,CAAC,CAAC,CACnB,CAAC,CACDJ,MAAM,CAAE,CACNG,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CAAC,CAChBE,SAAS,CAAEF,IAAI,CAAC,CAAC,CACnB,CAAC,CACDH,KAAK,CAAE,CACLE,KAAK,CAAEC,IAAI,CAAC,EAAE,CAAC,CACfC,MAAM,CAAED,IAAI,CAAC,EAAE,CAAC,CAChBE,SAAS,CAAEF,IAAI,CAAC,CAAC,CACnB,CACF,CACF,EA0BM,IAAAG,eAAgC,CAAG,CACvCC,QAAQ,CAAE,CACRC,OAAO,CAAE,CACPC,GAAG,CAAE,CACHC,OAAO,CAAE,0CAA0C,CACnDC,SAAS,CAAE,oBACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,2CAA2C,CACpDC,SAAS,CAAE,wCACb,CAAC,CACDE,UAAU,CAAE,CACVH,OAAO,CAAE,+CAA+C,CACxDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDG,QAAQ,CAAE,CACRL,GAAG,CAAE,CACHC,OAAO,CAAE,0CAA0C,CACnDC,SAAS,CAAE,0CACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,oBAAoB,CAC7BC,SAAS,CAAE,yCACb,CAAC,CACDE,UAAU,CAAE,CACVH,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CAAC,CACDI,QAAQ,CAAE,CACRN,GAAG,CAAE,CACHC,OAAO,CAAE,0CAA0C,CACnDC,SAAS,CAAE,oBACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,4CAA4C,CACrDC,SAAS,CAAE,4CACb,CAAC,CACDE,UAAU,CAAE,CACVH,OAAO,CAAE,gDAAgD,CACzDC,SAAS,CAAE,oBACb,CACF,CACF,CACF,EAEM,IAAAK,gBAA0C,CAAG,CACjDR,OAAO,CAAE,CACPK,UAAU,CAAE,CACVH,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,0CACb,CAAC,CACDC,MAAM,CAAE,CACNF,OAAO,CAAE,mDAAmD,CAC5DC,SAAS,CAAE,wCACb,CACF,CACF;;;;"}
|
|
@@ -10,7 +10,6 @@ import { SelectorGroupField } from '../../Form/Selector/SelectorGroupField.js';
|
|
|
10
10
|
import '../../Box/styledProps/index.js';
|
|
11
11
|
import '../../../utils/index.js';
|
|
12
12
|
import '../../BladeProvider/index.js';
|
|
13
|
-
import '../../../utils/makeSize/index.js';
|
|
14
13
|
import '../../../utils/makeAnalyticsAttribute/index.js';
|
|
15
14
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
16
15
|
import useTheme from '../../BladeProvider/useTheme.js';
|
|
@@ -19,10 +18,9 @@ import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
|
|
|
19
18
|
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
|
|
20
19
|
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
21
20
|
import { FormLabel } from '../../Form/FormLabel.js';
|
|
22
|
-
import { makeSize } from '../../../utils/makeSize/makeSize.js';
|
|
23
21
|
import { FormHint } from '../../Form/FormHint.js';
|
|
24
22
|
|
|
25
|
-
var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
|
|
23
|
+
var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID", "orientation"];
|
|
26
24
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
27
25
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
28
26
|
var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
@@ -46,6 +44,8 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
|
46
44
|
_ref$size = _ref.size,
|
|
47
45
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
48
46
|
testID = _ref.testID,
|
|
47
|
+
_ref$orientation = _ref.orientation,
|
|
48
|
+
orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
|
|
49
49
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
50
50
|
var _useCheckboxGroup = useCheckboxGroup({
|
|
51
51
|
defaultValue: defaultValue,
|
|
@@ -71,7 +71,6 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
|
71
71
|
}),
|
|
72
72
|
matchedDeviceType = _useBreakpoint.matchedDeviceType;
|
|
73
73
|
var gap = checkboxSizes.group.gap[size][matchedDeviceType];
|
|
74
|
-
var childCount = React__default.Children.count(children);
|
|
75
74
|
return /*#__PURE__*/jsx(CheckboxGroupProvider, {
|
|
76
75
|
value: contextValue,
|
|
77
76
|
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getStyledProps(rest)), {}, {
|
|
@@ -92,10 +91,10 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
|
92
91
|
}) : null, /*#__PURE__*/jsxs(BaseBox, {
|
|
93
92
|
children: [/*#__PURE__*/jsx(BaseBox, {
|
|
94
93
|
display: "flex",
|
|
95
|
-
flexDirection:
|
|
94
|
+
flexDirection: orientation === 'horizontal' ? 'row' : 'column',
|
|
95
|
+
gap: gap,
|
|
96
96
|
children: React__default.Children.map(children, function (child, index) {
|
|
97
97
|
return /*#__PURE__*/jsx(BaseBox, {
|
|
98
|
-
marginBottom: index === childCount - 1 ? makeSize(0) : gap,
|
|
99
98
|
children: child
|
|
100
99
|
}, index);
|
|
101
100
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport {
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype CheckboxGroupProps = {\n /**\n * Accepts multiple checkboxes as children\n */\n children: React.ReactNode;\n /**\n * Help text of the checkbox group\n */\n helpText?: string;\n /**\n * Error text of the checkbox group\n * Renders when `validationState` is set to 'error'\n *\n * Overrides helpText\n */\n errorText?: string;\n /**\n * Sets the error state of the CheckboxGroup\n * If set to `error` it will render the `errorText` of the group,\n * and propagate `invalid` prop to every checkbox\n */\n validationState?: 'error' | 'none';\n /**\n * Renders a necessity indicator after CheckboxGroup label\n *\n * If set to `undefined` it renders nothing.\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n /**\n * Sets the disabled state of the CheckboxGroup\n * If set to `true` it propagate down to all the checkboxes\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Sets the required state of the CheckboxGroup\n * @default false\n */\n isRequired?: boolean;\n /**\n * Renders the label of the checkbox group\n */\n label?: string;\n /**\n * Sets the position of the label\n *\n * @default 'top'\n */\n labelPosition?: 'top' | 'left';\n /**\n * Initial value of the checkbox group\n */\n defaultValue?: string[];\n /**\n * value of the checkbox group\n *\n * Use `onChange` to update its value\n */\n value?: string[];\n /**\n * The callback invoked when any of the checkbox's state changes\n */\n onChange?: ({ name, values }: { name: string; values: string[] }) => void;\n /**\n * The name of the input field in a checkbox\n * (Useful for form submission).\n */\n name?: string;\n /**\n * Size of the checkbox\n *\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large';\n /**\n * Orientation of the checkbox group\n *\n * @default \"vertical\"\n */\n orientation?: 'vertical' | 'horizontal';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst CheckboxGroup = ({\n children,\n label,\n helpText,\n isDisabled = false,\n isRequired = false,\n necessityIndicator = 'none',\n labelPosition = 'top',\n validationState,\n errorText,\n name,\n defaultValue,\n onChange,\n value,\n size = 'medium',\n testID,\n orientation = 'vertical',\n ...rest\n}: CheckboxGroupProps): React.ReactElement => {\n const { contextValue, ids } = useCheckboxGroup({\n defaultValue,\n onChange,\n value,\n isDisabled,\n necessityIndicator,\n isRequired,\n name,\n labelPosition,\n validationState,\n size,\n });\n\n const { theme } = useTheme();\n const showError = validationState === 'error' && errorText;\n const showHelpText = !showError && helpText;\n const accessibilityText = `,${showError ? errorText : ''} ${showHelpText ? helpText : ''}`;\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const gap = checkboxSizes.group.gap[size][matchedDeviceType];\n\n return (\n <CheckboxGroupProvider value={contextValue}>\n <BaseBox {...getStyledProps(rest)}>\n <SelectorGroupField\n position={labelPosition}\n labelledBy={ids.labelId}\n componentName=\"checkbox-group\"\n testID={testID}\n {...makeAnalyticsAttribute(rest)}\n >\n {label ? (\n <FormLabel\n as=\"span\"\n necessityIndicator={necessityIndicator}\n position={labelPosition}\n id={ids.labelId}\n accessibilityText={accessibilityText}\n size={size}\n >\n {label}\n </FormLabel>\n ) : null}\n <BaseBox>\n <BaseBox\n display=\"flex\"\n flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n gap={gap}\n >\n {React.Children.map(children, (child, index) => {\n return <BaseBox key={index}>{child}</BaseBox>;\n })}\n </BaseBox>\n <FormHint\n size={size}\n errorText={errorText}\n helpText={helpText}\n type={validationState === 'error' ? 'error' : 'help'}\n />\n </BaseBox>\n </SelectorGroupField>\n </BaseBox>\n </CheckboxGroupProvider>\n );\n};\n\nexport type { CheckboxGroupProps };\nexport { CheckboxGroup };\n"],"names":["CheckboxGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","_ref$orientation","orientation","rest","_objectWithoutProperties","_excluded","_useCheckboxGroup","useCheckboxGroup","contextValue","ids","_useTheme","useTheme","theme","showError","showHelpText","accessibilityText","concat","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","_jsx","CheckboxGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}
|
|
@@ -5,16 +5,16 @@ var checkboxSizes = {
|
|
|
5
5
|
group: {
|
|
6
6
|
gap: {
|
|
7
7
|
small: {
|
|
8
|
-
mobile: 'spacing.
|
|
8
|
+
mobile: 'spacing.2',
|
|
9
9
|
desktop: 'spacing.2'
|
|
10
10
|
},
|
|
11
11
|
medium: {
|
|
12
|
-
mobile: 'spacing.
|
|
12
|
+
mobile: 'spacing.3',
|
|
13
13
|
desktop: 'spacing.3'
|
|
14
14
|
},
|
|
15
15
|
large: {
|
|
16
|
-
mobile: 'spacing.
|
|
17
|
-
desktop: 'spacing.
|
|
16
|
+
mobile: 'spacing.3',
|
|
17
|
+
desktop: 'spacing.3'
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkboxTokens.js","sources":["../../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.
|
|
1
|
+
{"version":3,"file":"checkboxTokens.js","sources":["../../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.2',\n desktop: 'spacing.2',\n },\n medium: {\n mobile: 'spacing.3',\n desktop: 'spacing.3',\n },\n large: {\n mobile: 'spacing.3',\n desktop: 'spacing.3',\n },\n },\n },\n icon: {\n small: {\n width: size[12],\n height: size[12],\n },\n medium: {\n width: size[16],\n height: size[16],\n },\n large: {\n width: size[20],\n height: size[20],\n },\n },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n border: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n background: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n};\n\ntype CheckboxIconColors = {\n variants: {\n default: Variant;\n disabled: Variant;\n negative: Variant;\n };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n variants: {\n default: {\n border: {\n checked: 'colors.interactive.border.primary.default',\n unchecked: 'colors.interactive.border.gray.default',\n },\n background: {\n checked: 'colors.interactive.background.primary.default',\n unchecked: 'colors.transparent',\n },\n },\n disabled: {\n border: {\n checked: 'colors.interactive.border.primary.disabled',\n unchecked: 'colors.interactive.border.gray.disabled',\n },\n background: {\n checked: 'colors.interactive.background.primary.disabled',\n unchecked: 'colors.transparent',\n },\n },\n negative: {\n border: {\n checked: 'colors.interactive.border.negative.default',\n unchecked: 'colors.interactive.border.negative.default',\n },\n background: {\n checked: 'colors.interactive.background.negative.default',\n unchecked: 'colors.transparent',\n },\n },\n },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n default: {\n background: {\n checked: 'colors.interactive.background.primary.highlighted',\n unchecked: 'colors.interactive.background.gray.faded',\n },\n border: {\n checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n unchecked: 'colors.interactive.border.gray.default',\n },\n },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","checkboxIconColors","variants","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;AAKA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDE,MAAAA,KAAK,EAAE;AACLH,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDG,EAAAA,IAAI,EAAE;AACJL,IAAAA,KAAK,EAAE;AACLM,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDJ,IAAAA,MAAM,EAAE;AACNG,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDH,IAAAA,KAAK,EAAE;AACLE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;AACjB,KAAA;AACF,GAAA;AACF,EAAU;AAsBV,IAAME,kBAAsC,GAAG;AAC7CC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMI,mBAA6C,GAAG;EACpD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVF,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDF,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}
|
|
@@ -10,7 +10,6 @@ import { SelectorGroupField } from '../../Form/Selector/SelectorGroupField.js';
|
|
|
10
10
|
import '../../Box/styledProps/index.js';
|
|
11
11
|
import '../../../utils/index.js';
|
|
12
12
|
import '../../BladeProvider/index.js';
|
|
13
|
-
import '../../../utils/makeSize/index.js';
|
|
14
13
|
import '../../../utils/makeAnalyticsAttribute/index.js';
|
|
15
14
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
16
15
|
import useTheme from '../../BladeProvider/useTheme.js';
|
|
@@ -19,10 +18,9 @@ import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
|
|
|
19
18
|
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
|
|
20
19
|
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
21
20
|
import { FormLabel } from '../../Form/FormLabel.js';
|
|
22
|
-
import { makeSize } from '../../../utils/makeSize/makeSize.js';
|
|
23
21
|
import { FormHint } from '../../Form/FormHint.js';
|
|
24
22
|
|
|
25
|
-
var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
|
|
23
|
+
var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "orientation", "testID"];
|
|
26
24
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
27
25
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
28
26
|
var RadioGroup = function RadioGroup(_ref) {
|
|
@@ -46,6 +44,8 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
46
44
|
value = _ref.value,
|
|
47
45
|
_ref$size = _ref.size,
|
|
48
46
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
47
|
+
_ref$orientation = _ref.orientation,
|
|
48
|
+
orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
|
|
49
49
|
testID = _ref.testID,
|
|
50
50
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
51
51
|
var _useRadioGroup = useRadioGroup({
|
|
@@ -72,7 +72,6 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
72
72
|
var showHelpText = !showError && helpText;
|
|
73
73
|
var accessibilityText = "".concat(showError ? errorText : '', " ").concat(showHelpText ? helpText : '').trim();
|
|
74
74
|
var gap = radioSizes.group.gap[size][matchedDeviceType];
|
|
75
|
-
var childCount = React__default.Children.count(children);
|
|
76
75
|
return /*#__PURE__*/jsx(RadioGroupProvider, {
|
|
77
76
|
value: contextValue,
|
|
78
77
|
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getStyledProps(rest)), {}, {
|
|
@@ -94,10 +93,10 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
94
93
|
}) : null, /*#__PURE__*/jsxs(BaseBox, {
|
|
95
94
|
children: [/*#__PURE__*/jsx(BaseBox, {
|
|
96
95
|
display: "flex",
|
|
97
|
-
flexDirection:
|
|
96
|
+
flexDirection: orientation === 'vertical' ? 'column' : 'row',
|
|
97
|
+
gap: gap,
|
|
98
98
|
children: React__default.Children.map(children, function (child, index) {
|
|
99
99
|
return /*#__PURE__*/jsx(BaseBox, {
|
|
100
|
-
marginBottom: index === childCount - 1 ? makeSize(0) : gap,
|
|
101
100
|
children: child
|
|
102
101
|
}, index);
|
|
103
102
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { radioSizes } from '../radioTokens';\nimport { RadioGroupProvider } from './RadioContext';\nimport { useRadioGroup } from './useRadioGroup';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype RadioGroupProps = {\n /**\n * Accepts multiple radios as children\n */\n children: React.ReactNode;\n /**\n * Help text of the radio group\n */\n helpText?: string;\n /**\n * Error text of the radio group\n * Renders when `validationState` is set to 'error'\n *\n * Overrides helpText\n */\n errorText?: string;\n /**\n * Sets the error state of the radioGroup\n * If set to `error` it will render the `errorText` of the group,\n * and propagate `invalid` prop to every radio\n */\n validationState?: 'error' | 'none';\n /**\n * Renders a necessity indicator after radioGroup label\n *\n * If set to `undefined` it renders nothing.\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n /**\n * Sets the disabled state of the radioGroup\n * If set to `true` it propagate down to all the radios\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Sets the required state of the radioGroup\n * @default false\n */\n isRequired?: boolean;\n /**\n * Renders the label of the radio group\n */\n label?: string;\n /**\n * Sets the position of the label\n *\n * @default 'top'\n */\n labelPosition?: 'top' | 'left';\n /**\n * Initial value of the radio group\n */\n defaultValue?: string;\n /**\n * value of the radio group\n *\n * Use `onChange` to update its value\n */\n value?: string;\n /**\n * The callback invoked when any of the radio's state changes\n */\n onChange?: ({\n name,\n value,\n event,\n }: {\n name: string | undefined;\n value: string;\n event: React.ChangeEvent<HTMLInputElement>;\n }) => void;\n /**\n * The name of the input field in a radio\n * (Useful for form submission).\n */\n name?: string;\n /**\n * Size of the radios\n *\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst RadioGroup = ({\n children,\n label,\n helpText,\n isDisabled = false,\n isRequired = false,\n necessityIndicator = 'none',\n labelPosition = 'top',\n validationState = 'none',\n errorText,\n name,\n defaultValue,\n onChange,\n value,\n size = 'medium',\n testID,\n ...rest\n}: RadioGroupProps): React.ReactElement => {\n const { contextValue, ids } = useRadioGroup({\n defaultValue,\n isDisabled,\n isRequired,\n labelPosition,\n name,\n necessityIndicator,\n onChange,\n validationState,\n value,\n size,\n });\n\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const showError = validationState === 'error' && errorText;\n const showHelpText = !showError && helpText;\n const accessibilityText = `${showError ? errorText : ''} ${showHelpText ? helpText : ''}`.trim();\n const gap = radioSizes.group.gap[size][matchedDeviceType];\n const childCount = React.Children.count(children);\n\n return (\n <RadioGroupProvider value={contextValue}>\n <BaseBox {...getStyledProps(rest)}>\n <SelectorGroupField\n position={labelPosition}\n labelledBy={ids.labelId}\n accessibilityRole=\"radiogroup\"\n componentName=\"radio-group\"\n testID={testID}\n {...makeAnalyticsAttribute(rest)}\n >\n {label ? (\n <FormLabel\n as=\"span\"\n necessityIndicator={necessityIndicator}\n position={labelPosition}\n id={ids.labelId}\n accessibilityText={accessibilityText && `,${accessibilityText}`}\n size={size}\n >\n {label}\n </FormLabel>\n ) : null}\n <BaseBox>\n <BaseBox display=\"flex\" flexDirection=\"column\">\n {React.Children.map(children, (child, index) => {\n return (\n <BaseBox\n key={index}\n {...{ marginBottom: index === childCount - 1 ? makeSize(0) : gap }}\n >\n {child}\n </BaseBox>\n );\n })}\n </BaseBox>\n <FormHint\n size={size}\n type={validationState === 'error' ? 'error' : 'help'}\n errorText={errorText}\n helpText={helpText}\n />\n </BaseBox>\n </SelectorGroupField>\n </BaseBox>\n </RadioGroupProvider>\n );\n};\n\nexport type { RadioGroupProps };\nexport { RadioGroup };\n"],"names":["RadioGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","_ref$validationState","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","rest","_objectWithoutProperties","_excluded","_useRadioGroup","useRadioGroup","contextValue","ids","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","showError","showHelpText","accessibilityText","concat","trim","gap","radioSizes","group","childCount","React","Children","count","_jsx","RadioGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","accessibilityRole","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","map","child","index","marginBottom","makeSize","FormHint","type"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { radioSizes } from '../radioTokens';\nimport { RadioGroupProvider } from './RadioContext';\nimport { useRadioGroup } from './useRadioGroup';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype RadioGroupProps = {\n /**\n * Accepts multiple radios as children\n */\n children: React.ReactNode;\n /**\n * Help text of the radio group\n */\n helpText?: string;\n /**\n * Error text of the radio group\n * Renders when `validationState` is set to 'error'\n *\n * Overrides helpText\n */\n errorText?: string;\n /**\n * Sets the error state of the radioGroup\n * If set to `error` it will render the `errorText` of the group,\n * and propagate `invalid` prop to every radio\n */\n validationState?: 'error' | 'none';\n /**\n * Renders a necessity indicator after radioGroup label\n *\n * If set to `undefined` it renders nothing.\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n /**\n * Sets the disabled state of the radioGroup\n * If set to `true` it propagate down to all the radios\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Sets the required state of the radioGroup\n * @default false\n */\n isRequired?: boolean;\n /**\n * Renders the label of the radio group\n */\n label?: string;\n /**\n * Sets the position of the label\n *\n * @default 'top'\n */\n labelPosition?: 'top' | 'left';\n /**\n * Initial value of the radio group\n */\n defaultValue?: string;\n /**\n * value of the radio group\n *\n * Use `onChange` to update its value\n */\n value?: string;\n /**\n * The callback invoked when any of the radio's state changes\n */\n onChange?: ({\n name,\n value,\n event,\n }: {\n name: string | undefined;\n value: string;\n event: React.ChangeEvent<HTMLInputElement>;\n }) => void;\n /**\n * The name of the input field in a radio\n * (Useful for form submission).\n */\n name?: string;\n /**\n * Size of the radios\n *\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Orientation of the radio group\n *\n * @default 'vertical'\n */\n orientation?: 'vertical' | 'horizontal';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst RadioGroup = ({\n children,\n label,\n helpText,\n isDisabled = false,\n isRequired = false,\n necessityIndicator = 'none',\n labelPosition = 'top',\n validationState = 'none',\n errorText,\n name,\n defaultValue,\n onChange,\n value,\n size = 'medium',\n orientation = 'vertical',\n testID,\n ...rest\n}: RadioGroupProps): React.ReactElement => {\n const { contextValue, ids } = useRadioGroup({\n defaultValue,\n isDisabled,\n isRequired,\n labelPosition,\n name,\n necessityIndicator,\n onChange,\n validationState,\n value,\n size,\n });\n\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const showError = validationState === 'error' && errorText;\n const showHelpText = !showError && helpText;\n const accessibilityText = `${showError ? errorText : ''} ${showHelpText ? helpText : ''}`.trim();\n const gap = radioSizes.group.gap[size][matchedDeviceType];\n\n return (\n <RadioGroupProvider value={contextValue}>\n <BaseBox {...getStyledProps(rest)}>\n <SelectorGroupField\n position={labelPosition}\n labelledBy={ids.labelId}\n accessibilityRole=\"radiogroup\"\n componentName=\"radio-group\"\n testID={testID}\n {...makeAnalyticsAttribute(rest)}\n >\n {label ? (\n <FormLabel\n as=\"span\"\n necessityIndicator={necessityIndicator}\n position={labelPosition}\n id={ids.labelId}\n accessibilityText={accessibilityText && `,${accessibilityText}`}\n size={size}\n >\n {label}\n </FormLabel>\n ) : null}\n <BaseBox>\n <BaseBox\n display=\"flex\"\n flexDirection={orientation === 'vertical' ? 'column' : 'row'}\n gap={gap}\n >\n {React.Children.map(children, (child, index) => {\n return <BaseBox key={index}>{child}</BaseBox>;\n })}\n </BaseBox>\n <FormHint\n size={size}\n type={validationState === 'error' ? 'error' : 'help'}\n errorText={errorText}\n helpText={helpText}\n />\n </BaseBox>\n </SelectorGroupField>\n </BaseBox>\n </RadioGroupProvider>\n );\n};\n\nexport type { RadioGroupProps };\nexport { RadioGroup };\n"],"names":["RadioGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","_ref$validationState","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","_ref$orientation","orientation","testID","rest","_objectWithoutProperties","_excluded","_useRadioGroup","useRadioGroup","contextValue","ids","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","showError","showHelpText","accessibilityText","concat","trim","gap","radioSizes","group","_jsx","RadioGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","accessibilityRole","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}
|
|
@@ -5,15 +5,15 @@ var radioSizes = {
|
|
|
5
5
|
group: {
|
|
6
6
|
gap: {
|
|
7
7
|
small: {
|
|
8
|
-
mobile: 'spacing.
|
|
8
|
+
mobile: 'spacing.2',
|
|
9
9
|
desktop: 'spacing.2'
|
|
10
10
|
},
|
|
11
11
|
medium: {
|
|
12
|
-
mobile: 'spacing.
|
|
12
|
+
mobile: 'spacing.3',
|
|
13
13
|
desktop: 'spacing.3'
|
|
14
14
|
},
|
|
15
15
|
large: {
|
|
16
|
-
mobile: 'spacing.
|
|
16
|
+
mobile: 'spacing.4',
|
|
17
17
|
desktop: 'spacing.4'
|
|
18
18
|
}
|
|
19
19
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioTokens.js","sources":["../../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.
|
|
1
|
+
{"version":3,"file":"radioTokens.js","sources":["../../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.2',\n desktop: 'spacing.2',\n },\n medium: {\n mobile: 'spacing.3',\n desktop: 'spacing.3',\n },\n large: {\n mobile: 'spacing.4',\n desktop: 'spacing.4',\n },\n },\n },\n icon: {\n small: {\n width: size[12],\n height: size[12],\n dotRadius: size[2],\n },\n medium: {\n width: size[16],\n height: size[16],\n dotRadius: size[3],\n },\n large: {\n width: size[20],\n height: size[20],\n dotRadius: size[4],\n },\n },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n dot: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n border: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n background: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n};\n\ntype RadioIconColors = {\n variants: {\n default: Variant;\n disabled: Variant;\n negative: Variant;\n };\n};\n\nconst radioIconColors: RadioIconColors = {\n variants: {\n default: {\n dot: {\n checked: 'colors.interactive.icon.onPrimary.normal',\n unchecked: 'colors.transparent',\n },\n border: {\n checked: 'colors.interactive.border.primary.default',\n unchecked: 'colors.interactive.border.gray.default',\n },\n background: {\n checked: 'colors.interactive.background.primary.default',\n unchecked: 'colors.transparent',\n },\n },\n disabled: {\n dot: {\n checked: 'colors.interactive.icon.onPrimary.normal',\n unchecked: 'colors.interactive.icon.onPrimary.normal',\n },\n border: {\n checked: 'colors.transparent',\n unchecked: 'colors.interactive.border.gray.disabled',\n },\n background: {\n checked: 'colors.interactive.background.primary.disabled',\n unchecked: 'colors.transparent',\n },\n },\n negative: {\n dot: {\n checked: 'colors.interactive.icon.onPrimary.normal',\n unchecked: 'colors.transparent',\n },\n border: {\n checked: 'colors.interactive.border.negative.default',\n unchecked: 'colors.interactive.border.negative.default',\n },\n background: {\n checked: 'colors.interactive.background.negative.default',\n unchecked: 'colors.transparent',\n },\n },\n },\n} as const;\n\nconst radioHoverTokens: SelectorInputHoverTokens = {\n default: {\n background: {\n checked: 'colors.interactive.background.primary.highlighted',\n unchecked: 'colors.interactive.background.gray.faded',\n },\n border: {\n checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n unchecked: 'colors.interactive.border.gray.default',\n },\n },\n};\n\nexport { radioSizes, radioIconColors, radioHoverTokens };\n"],"names":["radioSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","dotRadius","radioIconColors","variants","dot","checked","unchecked","border","background","disabled","negative","radioHoverTokens"],"mappings":"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"}
|
|
@@ -10,7 +10,6 @@ import { SelectorGroupField } from '../../Form/Selector/SelectorGroupField.js';
|
|
|
10
10
|
import '../../Box/styledProps/index.js';
|
|
11
11
|
import '../../../utils/index.js';
|
|
12
12
|
import '../../BladeProvider/index.js';
|
|
13
|
-
import '../../../utils/makeSize/index.js';
|
|
14
13
|
import '../../../utils/makeAnalyticsAttribute/index.js';
|
|
15
14
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
16
15
|
import useTheme from '../../BladeProvider/useTheme.js';
|
|
@@ -19,10 +18,9 @@ import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
|
|
|
19
18
|
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
|
|
20
19
|
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
21
20
|
import { FormLabel } from '../../Form/FormLabel.js';
|
|
22
|
-
import { makeSize } from '../../../utils/makeSize/makeSize.js';
|
|
23
21
|
import { FormHint } from '../../Form/FormHint.js';
|
|
24
22
|
|
|
25
|
-
var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
|
|
23
|
+
var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID", "orientation"];
|
|
26
24
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
27
25
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
28
26
|
var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
@@ -46,6 +44,8 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
|
46
44
|
_ref$size = _ref.size,
|
|
47
45
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
48
46
|
testID = _ref.testID,
|
|
47
|
+
_ref$orientation = _ref.orientation,
|
|
48
|
+
orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
|
|
49
49
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
50
50
|
var _useCheckboxGroup = useCheckboxGroup({
|
|
51
51
|
defaultValue: defaultValue,
|
|
@@ -71,7 +71,6 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
|
71
71
|
}),
|
|
72
72
|
matchedDeviceType = _useBreakpoint.matchedDeviceType;
|
|
73
73
|
var gap = checkboxSizes.group.gap[size][matchedDeviceType];
|
|
74
|
-
var childCount = React__default.Children.count(children);
|
|
75
74
|
return /*#__PURE__*/jsx(CheckboxGroupProvider, {
|
|
76
75
|
value: contextValue,
|
|
77
76
|
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getStyledProps(rest)), {}, {
|
|
@@ -92,10 +91,10 @@ var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
|
92
91
|
}) : null, /*#__PURE__*/jsxs(BaseBox, {
|
|
93
92
|
children: [/*#__PURE__*/jsx(BaseBox, {
|
|
94
93
|
display: "flex",
|
|
95
|
-
flexDirection:
|
|
94
|
+
flexDirection: orientation === 'horizontal' ? 'row' : 'column',
|
|
95
|
+
gap: gap,
|
|
96
96
|
children: React__default.Children.map(children, function (child, index) {
|
|
97
97
|
return /*#__PURE__*/jsx(BaseBox, {
|
|
98
|
-
marginBottom: index === childCount - 1 ? makeSize(0) : gap,
|
|
99
98
|
children: child
|
|
100
99
|
}, index);
|
|
101
100
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport {
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.js","sources":["../../../../../../../src/components/Checkbox/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { checkboxSizes } from '../checkboxTokens';\nimport { CheckboxGroupProvider } from './CheckboxGroupContext';\nimport { useCheckboxGroup } from './useCheckboxGroup';\nimport { FormLabel, FormHint } from '~components/Form';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\n\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype CheckboxGroupProps = {\n /**\n * Accepts multiple checkboxes as children\n */\n children: React.ReactNode;\n /**\n * Help text of the checkbox group\n */\n helpText?: string;\n /**\n * Error text of the checkbox group\n * Renders when `validationState` is set to 'error'\n *\n * Overrides helpText\n */\n errorText?: string;\n /**\n * Sets the error state of the CheckboxGroup\n * If set to `error` it will render the `errorText` of the group,\n * and propagate `invalid` prop to every checkbox\n */\n validationState?: 'error' | 'none';\n /**\n * Renders a necessity indicator after CheckboxGroup label\n *\n * If set to `undefined` it renders nothing.\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n /**\n * Sets the disabled state of the CheckboxGroup\n * If set to `true` it propagate down to all the checkboxes\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Sets the required state of the CheckboxGroup\n * @default false\n */\n isRequired?: boolean;\n /**\n * Renders the label of the checkbox group\n */\n label?: string;\n /**\n * Sets the position of the label\n *\n * @default 'top'\n */\n labelPosition?: 'top' | 'left';\n /**\n * Initial value of the checkbox group\n */\n defaultValue?: string[];\n /**\n * value of the checkbox group\n *\n * Use `onChange` to update its value\n */\n value?: string[];\n /**\n * The callback invoked when any of the checkbox's state changes\n */\n onChange?: ({ name, values }: { name: string; values: string[] }) => void;\n /**\n * The name of the input field in a checkbox\n * (Useful for form submission).\n */\n name?: string;\n /**\n * Size of the checkbox\n *\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large';\n /**\n * Orientation of the checkbox group\n *\n * @default \"vertical\"\n */\n orientation?: 'vertical' | 'horizontal';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst CheckboxGroup = ({\n children,\n label,\n helpText,\n isDisabled = false,\n isRequired = false,\n necessityIndicator = 'none',\n labelPosition = 'top',\n validationState,\n errorText,\n name,\n defaultValue,\n onChange,\n value,\n size = 'medium',\n testID,\n orientation = 'vertical',\n ...rest\n}: CheckboxGroupProps): React.ReactElement => {\n const { contextValue, ids } = useCheckboxGroup({\n defaultValue,\n onChange,\n value,\n isDisabled,\n necessityIndicator,\n isRequired,\n name,\n labelPosition,\n validationState,\n size,\n });\n\n const { theme } = useTheme();\n const showError = validationState === 'error' && errorText;\n const showHelpText = !showError && helpText;\n const accessibilityText = `,${showError ? errorText : ''} ${showHelpText ? helpText : ''}`;\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const gap = checkboxSizes.group.gap[size][matchedDeviceType];\n\n return (\n <CheckboxGroupProvider value={contextValue}>\n <BaseBox {...getStyledProps(rest)}>\n <SelectorGroupField\n position={labelPosition}\n labelledBy={ids.labelId}\n componentName=\"checkbox-group\"\n testID={testID}\n {...makeAnalyticsAttribute(rest)}\n >\n {label ? (\n <FormLabel\n as=\"span\"\n necessityIndicator={necessityIndicator}\n position={labelPosition}\n id={ids.labelId}\n accessibilityText={accessibilityText}\n size={size}\n >\n {label}\n </FormLabel>\n ) : null}\n <BaseBox>\n <BaseBox\n display=\"flex\"\n flexDirection={orientation === 'horizontal' ? 'row' : 'column'}\n gap={gap}\n >\n {React.Children.map(children, (child, index) => {\n return <BaseBox key={index}>{child}</BaseBox>;\n })}\n </BaseBox>\n <FormHint\n size={size}\n errorText={errorText}\n helpText={helpText}\n type={validationState === 'error' ? 'error' : 'help'}\n />\n </BaseBox>\n </SelectorGroupField>\n </BaseBox>\n </CheckboxGroupProvider>\n );\n};\n\nexport type { CheckboxGroupProps };\nexport { CheckboxGroup };\n"],"names":["CheckboxGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","_ref$orientation","orientation","rest","_objectWithoutProperties","_excluded","_useCheckboxGroup","useCheckboxGroup","contextValue","ids","_useTheme","useTheme","theme","showError","showHelpText","accessibilityText","concat","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","gap","checkboxSizes","group","_jsx","CheckboxGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}
|
|
@@ -5,16 +5,16 @@ var checkboxSizes = {
|
|
|
5
5
|
group: {
|
|
6
6
|
gap: {
|
|
7
7
|
small: {
|
|
8
|
-
mobile: 'spacing.
|
|
8
|
+
mobile: 'spacing.2',
|
|
9
9
|
desktop: 'spacing.2'
|
|
10
10
|
},
|
|
11
11
|
medium: {
|
|
12
|
-
mobile: 'spacing.
|
|
12
|
+
mobile: 'spacing.3',
|
|
13
13
|
desktop: 'spacing.3'
|
|
14
14
|
},
|
|
15
15
|
large: {
|
|
16
|
-
mobile: 'spacing.
|
|
17
|
-
desktop: 'spacing.
|
|
16
|
+
mobile: 'spacing.3',
|
|
17
|
+
desktop: 'spacing.3'
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkboxTokens.js","sources":["../../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.
|
|
1
|
+
{"version":3,"file":"checkboxTokens.js","sources":["../../../../../../src/components/Checkbox/checkboxTokens.ts"],"sourcesContent":["import type { DotNotationToken } from '../../utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst checkboxSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.2',\n desktop: 'spacing.2',\n },\n medium: {\n mobile: 'spacing.3',\n desktop: 'spacing.3',\n },\n large: {\n mobile: 'spacing.3',\n desktop: 'spacing.3',\n },\n },\n },\n icon: {\n small: {\n width: size[12],\n height: size[12],\n },\n medium: {\n width: size[16],\n height: size[16],\n },\n large: {\n width: size[20],\n height: size[20],\n },\n },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n border: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n background: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n};\n\ntype CheckboxIconColors = {\n variants: {\n default: Variant;\n disabled: Variant;\n negative: Variant;\n };\n};\n\nconst checkboxIconColors: CheckboxIconColors = {\n variants: {\n default: {\n border: {\n checked: 'colors.interactive.border.primary.default',\n unchecked: 'colors.interactive.border.gray.default',\n },\n background: {\n checked: 'colors.interactive.background.primary.default',\n unchecked: 'colors.transparent',\n },\n },\n disabled: {\n border: {\n checked: 'colors.interactive.border.primary.disabled',\n unchecked: 'colors.interactive.border.gray.disabled',\n },\n background: {\n checked: 'colors.interactive.background.primary.disabled',\n unchecked: 'colors.transparent',\n },\n },\n negative: {\n border: {\n checked: 'colors.interactive.border.negative.default',\n unchecked: 'colors.interactive.border.negative.default',\n },\n background: {\n checked: 'colors.interactive.background.negative.default',\n unchecked: 'colors.transparent',\n },\n },\n },\n} as const;\n\nconst checkboxHoverTokens: SelectorInputHoverTokens = {\n default: {\n background: {\n checked: 'colors.interactive.background.primary.highlighted',\n unchecked: 'colors.interactive.background.gray.faded',\n },\n border: {\n checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n unchecked: 'colors.interactive.border.gray.default',\n },\n },\n};\n\nexport { checkboxSizes, checkboxIconColors, checkboxHoverTokens };\n"],"names":["checkboxSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","checkboxIconColors","variants","border","checked","unchecked","background","disabled","negative","checkboxHoverTokens"],"mappings":";;;AAKA,IAAMA,aAAa,GAAG;AACpBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDE,MAAAA,KAAK,EAAE;AACLH,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDG,EAAAA,IAAI,EAAE;AACJL,IAAAA,KAAK,EAAE;AACLM,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDJ,IAAAA,MAAM,EAAE;AACNG,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;KAChB;AACDH,IAAAA,KAAK,EAAE;AACLE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;MACfC,MAAM,EAAED,IAAI,CAAC,EAAE,CAAA;AACjB,KAAA;AACF,GAAA;AACF,EAAU;AAsBV,IAAME,kBAAsC,GAAG;AAC7CC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDC,MAAAA,UAAU,EAAE;AACVF,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMI,mBAA6C,GAAG;EACpD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVF,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDF,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}
|
|
@@ -10,7 +10,6 @@ import { SelectorGroupField } from '../../Form/Selector/SelectorGroupField.js';
|
|
|
10
10
|
import '../../Box/styledProps/index.js';
|
|
11
11
|
import '../../../utils/index.js';
|
|
12
12
|
import '../../BladeProvider/index.js';
|
|
13
|
-
import '../../../utils/makeSize/index.js';
|
|
14
13
|
import '../../../utils/makeAnalyticsAttribute/index.js';
|
|
15
14
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
16
15
|
import useTheme from '../../BladeProvider/useTheme.js';
|
|
@@ -19,10 +18,9 @@ import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
|
|
|
19
18
|
import { getStyledProps } from '../../Box/styledProps/getStyledProps.js';
|
|
20
19
|
import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
|
|
21
20
|
import { FormLabel } from '../../Form/FormLabel.js';
|
|
22
|
-
import { makeSize } from '../../../utils/makeSize/makeSize.js';
|
|
23
21
|
import { FormHint } from '../../Form/FormHint.js';
|
|
24
22
|
|
|
25
|
-
var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "testID"];
|
|
23
|
+
var _excluded = ["children", "label", "helpText", "isDisabled", "isRequired", "necessityIndicator", "labelPosition", "validationState", "errorText", "name", "defaultValue", "onChange", "value", "size", "orientation", "testID"];
|
|
26
24
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
27
25
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
28
26
|
var RadioGroup = function RadioGroup(_ref) {
|
|
@@ -46,6 +44,8 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
46
44
|
value = _ref.value,
|
|
47
45
|
_ref$size = _ref.size,
|
|
48
46
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
47
|
+
_ref$orientation = _ref.orientation,
|
|
48
|
+
orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
|
|
49
49
|
testID = _ref.testID,
|
|
50
50
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
51
51
|
var _useRadioGroup = useRadioGroup({
|
|
@@ -72,7 +72,6 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
72
72
|
var showHelpText = !showError && helpText;
|
|
73
73
|
var accessibilityText = "".concat(showError ? errorText : '', " ").concat(showHelpText ? helpText : '').trim();
|
|
74
74
|
var gap = radioSizes.group.gap[size][matchedDeviceType];
|
|
75
|
-
var childCount = React__default.Children.count(children);
|
|
76
75
|
return /*#__PURE__*/jsx(RadioGroupProvider, {
|
|
77
76
|
value: contextValue,
|
|
78
77
|
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getStyledProps(rest)), {}, {
|
|
@@ -94,10 +93,10 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
94
93
|
}) : null, /*#__PURE__*/jsxs(BaseBox, {
|
|
95
94
|
children: [/*#__PURE__*/jsx(BaseBox, {
|
|
96
95
|
display: "flex",
|
|
97
|
-
flexDirection:
|
|
96
|
+
flexDirection: orientation === 'vertical' ? 'column' : 'row',
|
|
97
|
+
gap: gap,
|
|
98
98
|
children: React__default.Children.map(children, function (child, index) {
|
|
99
99
|
return /*#__PURE__*/jsx(BaseBox, {
|
|
100
|
-
marginBottom: index === childCount - 1 ? makeSize(0) : gap,
|
|
101
100
|
children: child
|
|
102
101
|
}, index);
|
|
103
102
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { radioSizes } from '../radioTokens';\nimport { RadioGroupProvider } from './RadioContext';\nimport { useRadioGroup } from './useRadioGroup';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype RadioGroupProps = {\n /**\n * Accepts multiple radios as children\n */\n children: React.ReactNode;\n /**\n * Help text of the radio group\n */\n helpText?: string;\n /**\n * Error text of the radio group\n * Renders when `validationState` is set to 'error'\n *\n * Overrides helpText\n */\n errorText?: string;\n /**\n * Sets the error state of the radioGroup\n * If set to `error` it will render the `errorText` of the group,\n * and propagate `invalid` prop to every radio\n */\n validationState?: 'error' | 'none';\n /**\n * Renders a necessity indicator after radioGroup label\n *\n * If set to `undefined` it renders nothing.\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n /**\n * Sets the disabled state of the radioGroup\n * If set to `true` it propagate down to all the radios\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Sets the required state of the radioGroup\n * @default false\n */\n isRequired?: boolean;\n /**\n * Renders the label of the radio group\n */\n label?: string;\n /**\n * Sets the position of the label\n *\n * @default 'top'\n */\n labelPosition?: 'top' | 'left';\n /**\n * Initial value of the radio group\n */\n defaultValue?: string;\n /**\n * value of the radio group\n *\n * Use `onChange` to update its value\n */\n value?: string;\n /**\n * The callback invoked when any of the radio's state changes\n */\n onChange?: ({\n name,\n value,\n event,\n }: {\n name: string | undefined;\n value: string;\n event: React.ChangeEvent<HTMLInputElement>;\n }) => void;\n /**\n * The name of the input field in a radio\n * (Useful for form submission).\n */\n name?: string;\n /**\n * Size of the radios\n *\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst RadioGroup = ({\n children,\n label,\n helpText,\n isDisabled = false,\n isRequired = false,\n necessityIndicator = 'none',\n labelPosition = 'top',\n validationState = 'none',\n errorText,\n name,\n defaultValue,\n onChange,\n value,\n size = 'medium',\n testID,\n ...rest\n}: RadioGroupProps): React.ReactElement => {\n const { contextValue, ids } = useRadioGroup({\n defaultValue,\n isDisabled,\n isRequired,\n labelPosition,\n name,\n necessityIndicator,\n onChange,\n validationState,\n value,\n size,\n });\n\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const showError = validationState === 'error' && errorText;\n const showHelpText = !showError && helpText;\n const accessibilityText = `${showError ? errorText : ''} ${showHelpText ? helpText : ''}`.trim();\n const gap = radioSizes.group.gap[size][matchedDeviceType];\n const childCount = React.Children.count(children);\n\n return (\n <RadioGroupProvider value={contextValue}>\n <BaseBox {...getStyledProps(rest)}>\n <SelectorGroupField\n position={labelPosition}\n labelledBy={ids.labelId}\n accessibilityRole=\"radiogroup\"\n componentName=\"radio-group\"\n testID={testID}\n {...makeAnalyticsAttribute(rest)}\n >\n {label ? (\n <FormLabel\n as=\"span\"\n necessityIndicator={necessityIndicator}\n position={labelPosition}\n id={ids.labelId}\n accessibilityText={accessibilityText && `,${accessibilityText}`}\n size={size}\n >\n {label}\n </FormLabel>\n ) : null}\n <BaseBox>\n <BaseBox display=\"flex\" flexDirection=\"column\">\n {React.Children.map(children, (child, index) => {\n return (\n <BaseBox\n key={index}\n {...{ marginBottom: index === childCount - 1 ? makeSize(0) : gap }}\n >\n {child}\n </BaseBox>\n );\n })}\n </BaseBox>\n <FormHint\n size={size}\n type={validationState === 'error' ? 'error' : 'help'}\n errorText={errorText}\n helpText={helpText}\n />\n </BaseBox>\n </SelectorGroupField>\n </BaseBox>\n </RadioGroupProvider>\n );\n};\n\nexport type { RadioGroupProps };\nexport { RadioGroup };\n"],"names":["RadioGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","_ref$validationState","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","testID","rest","_objectWithoutProperties","_excluded","_useRadioGroup","useRadioGroup","contextValue","ids","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","showError","showHelpText","accessibilityText","concat","trim","gap","radioSizes","group","childCount","React","Children","count","_jsx","RadioGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","accessibilityRole","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","map","child","index","marginBottom","makeSize","FormHint","type"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../src/components/Radio/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { radioSizes } from '../radioTokens';\nimport { RadioGroupProvider } from './RadioContext';\nimport { useRadioGroup } from './useRadioGroup';\nimport BaseBox from '~components/Box/BaseBox';\nimport { FormHint, FormLabel } from '~components/Form';\nimport { SelectorGroupField } from '~components/Form/Selector/SelectorGroupField';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useBreakpoint } from '~utils';\nimport { useTheme } from '~components/BladeProvider';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype RadioGroupProps = {\n /**\n * Accepts multiple radios as children\n */\n children: React.ReactNode;\n /**\n * Help text of the radio group\n */\n helpText?: string;\n /**\n * Error text of the radio group\n * Renders when `validationState` is set to 'error'\n *\n * Overrides helpText\n */\n errorText?: string;\n /**\n * Sets the error state of the radioGroup\n * If set to `error` it will render the `errorText` of the group,\n * and propagate `invalid` prop to every radio\n */\n validationState?: 'error' | 'none';\n /**\n * Renders a necessity indicator after radioGroup label\n *\n * If set to `undefined` it renders nothing.\n */\n necessityIndicator?: 'required' | 'optional' | 'none';\n /**\n * Sets the disabled state of the radioGroup\n * If set to `true` it propagate down to all the radios\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Sets the required state of the radioGroup\n * @default false\n */\n isRequired?: boolean;\n /**\n * Renders the label of the radio group\n */\n label?: string;\n /**\n * Sets the position of the label\n *\n * @default 'top'\n */\n labelPosition?: 'top' | 'left';\n /**\n * Initial value of the radio group\n */\n defaultValue?: string;\n /**\n * value of the radio group\n *\n * Use `onChange` to update its value\n */\n value?: string;\n /**\n * The callback invoked when any of the radio's state changes\n */\n onChange?: ({\n name,\n value,\n event,\n }: {\n name: string | undefined;\n value: string;\n event: React.ChangeEvent<HTMLInputElement>;\n }) => void;\n /**\n * The name of the input field in a radio\n * (Useful for form submission).\n */\n name?: string;\n /**\n * Size of the radios\n *\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * Orientation of the radio group\n *\n * @default 'vertical'\n */\n orientation?: 'vertical' | 'horizontal';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst RadioGroup = ({\n children,\n label,\n helpText,\n isDisabled = false,\n isRequired = false,\n necessityIndicator = 'none',\n labelPosition = 'top',\n validationState = 'none',\n errorText,\n name,\n defaultValue,\n onChange,\n value,\n size = 'medium',\n orientation = 'vertical',\n testID,\n ...rest\n}: RadioGroupProps): React.ReactElement => {\n const { contextValue, ids } = useRadioGroup({\n defaultValue,\n isDisabled,\n isRequired,\n labelPosition,\n name,\n necessityIndicator,\n onChange,\n validationState,\n value,\n size,\n });\n\n const { theme } = useTheme();\n const { matchedDeviceType } = useBreakpoint({ breakpoints: theme.breakpoints });\n const showError = validationState === 'error' && errorText;\n const showHelpText = !showError && helpText;\n const accessibilityText = `${showError ? errorText : ''} ${showHelpText ? helpText : ''}`.trim();\n const gap = radioSizes.group.gap[size][matchedDeviceType];\n\n return (\n <RadioGroupProvider value={contextValue}>\n <BaseBox {...getStyledProps(rest)}>\n <SelectorGroupField\n position={labelPosition}\n labelledBy={ids.labelId}\n accessibilityRole=\"radiogroup\"\n componentName=\"radio-group\"\n testID={testID}\n {...makeAnalyticsAttribute(rest)}\n >\n {label ? (\n <FormLabel\n as=\"span\"\n necessityIndicator={necessityIndicator}\n position={labelPosition}\n id={ids.labelId}\n accessibilityText={accessibilityText && `,${accessibilityText}`}\n size={size}\n >\n {label}\n </FormLabel>\n ) : null}\n <BaseBox>\n <BaseBox\n display=\"flex\"\n flexDirection={orientation === 'vertical' ? 'column' : 'row'}\n gap={gap}\n >\n {React.Children.map(children, (child, index) => {\n return <BaseBox key={index}>{child}</BaseBox>;\n })}\n </BaseBox>\n <FormHint\n size={size}\n type={validationState === 'error' ? 'error' : 'help'}\n errorText={errorText}\n helpText={helpText}\n />\n </BaseBox>\n </SelectorGroupField>\n </BaseBox>\n </RadioGroupProvider>\n );\n};\n\nexport type { RadioGroupProps };\nexport { RadioGroup };\n"],"names":["RadioGroup","_ref","children","label","helpText","_ref$isDisabled","isDisabled","_ref$isRequired","isRequired","_ref$necessityIndicat","necessityIndicator","_ref$labelPosition","labelPosition","_ref$validationState","validationState","errorText","name","defaultValue","onChange","value","_ref$size","size","_ref$orientation","orientation","testID","rest","_objectWithoutProperties","_excluded","_useRadioGroup","useRadioGroup","contextValue","ids","_useTheme","useTheme","theme","_useBreakpoint","useBreakpoint","breakpoints","matchedDeviceType","showError","showHelpText","accessibilityText","concat","trim","gap","radioSizes","group","_jsx","RadioGroupProvider","BaseBox","_objectSpread","getStyledProps","_jsxs","SelectorGroupField","position","labelledBy","labelId","accessibilityRole","componentName","makeAnalyticsAttribute","FormLabel","as","id","display","flexDirection","React","Children","map","child","index","FormHint","type"],"mappings":"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"}
|
|
@@ -5,15 +5,15 @@ var radioSizes = {
|
|
|
5
5
|
group: {
|
|
6
6
|
gap: {
|
|
7
7
|
small: {
|
|
8
|
-
mobile: 'spacing.
|
|
8
|
+
mobile: 'spacing.2',
|
|
9
9
|
desktop: 'spacing.2'
|
|
10
10
|
},
|
|
11
11
|
medium: {
|
|
12
|
-
mobile: 'spacing.
|
|
12
|
+
mobile: 'spacing.3',
|
|
13
13
|
desktop: 'spacing.3'
|
|
14
14
|
},
|
|
15
15
|
large: {
|
|
16
|
-
mobile: 'spacing.
|
|
16
|
+
mobile: 'spacing.4',
|
|
17
17
|
desktop: 'spacing.4'
|
|
18
18
|
}
|
|
19
19
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radioTokens.js","sources":["../../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.
|
|
1
|
+
{"version":3,"file":"radioTokens.js","sources":["../../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n group: {\n gap: {\n small: {\n mobile: 'spacing.2',\n desktop: 'spacing.2',\n },\n medium: {\n mobile: 'spacing.3',\n desktop: 'spacing.3',\n },\n large: {\n mobile: 'spacing.4',\n desktop: 'spacing.4',\n },\n },\n },\n icon: {\n small: {\n width: size[12],\n height: size[12],\n dotRadius: size[2],\n },\n medium: {\n width: size[16],\n height: size[16],\n dotRadius: size[3],\n },\n large: {\n width: size[20],\n height: size[20],\n dotRadius: size[4],\n },\n },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n dot: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n border: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n background: {\n checked: ColorTokens;\n unchecked: ColorTokens;\n };\n};\n\ntype RadioIconColors = {\n variants: {\n default: Variant;\n disabled: Variant;\n negative: Variant;\n };\n};\n\nconst radioIconColors: RadioIconColors = {\n variants: {\n default: {\n dot: {\n checked: 'colors.interactive.icon.onPrimary.normal',\n unchecked: 'colors.transparent',\n },\n border: {\n checked: 'colors.interactive.border.primary.default',\n unchecked: 'colors.interactive.border.gray.default',\n },\n background: {\n checked: 'colors.interactive.background.primary.default',\n unchecked: 'colors.transparent',\n },\n },\n disabled: {\n dot: {\n checked: 'colors.interactive.icon.onPrimary.normal',\n unchecked: 'colors.interactive.icon.onPrimary.normal',\n },\n border: {\n checked: 'colors.transparent',\n unchecked: 'colors.interactive.border.gray.disabled',\n },\n background: {\n checked: 'colors.interactive.background.primary.disabled',\n unchecked: 'colors.transparent',\n },\n },\n negative: {\n dot: {\n checked: 'colors.interactive.icon.onPrimary.normal',\n unchecked: 'colors.transparent',\n },\n border: {\n checked: 'colors.interactive.border.negative.default',\n unchecked: 'colors.interactive.border.negative.default',\n },\n background: {\n checked: 'colors.interactive.background.negative.default',\n unchecked: 'colors.transparent',\n },\n },\n },\n} as const;\n\nconst radioHoverTokens: SelectorInputHoverTokens = {\n default: {\n background: {\n checked: 'colors.interactive.background.primary.highlighted',\n unchecked: 'colors.interactive.background.gray.faded',\n },\n border: {\n checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n unchecked: 'colors.interactive.border.gray.default',\n },\n },\n};\n\nexport { radioSizes, radioIconColors, radioHoverTokens };\n"],"names":["radioSizes","group","gap","small","mobile","desktop","medium","large","icon","width","size","height","dotRadius","radioIconColors","variants","dot","checked","unchecked","border","background","disabled","negative","radioHoverTokens"],"mappings":"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"}
|
|
@@ -13379,8 +13379,14 @@ type CheckboxGroupProps = {
|
|
|
13379
13379
|
* @default "medium"
|
|
13380
13380
|
*/
|
|
13381
13381
|
size?: 'small' | 'medium' | 'large';
|
|
13382
|
+
/**
|
|
13383
|
+
* Orientation of the checkbox group
|
|
13384
|
+
*
|
|
13385
|
+
* @default "vertical"
|
|
13386
|
+
*/
|
|
13387
|
+
orientation?: 'vertical' | 'horizontal';
|
|
13382
13388
|
} & TestID & DataAnalyticsAttribute & StyledPropsBlade;
|
|
13383
|
-
declare const CheckboxGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...rest }: CheckboxGroupProps) => React__default.ReactElement;
|
|
13389
|
+
declare const CheckboxGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, orientation, ...rest }: CheckboxGroupProps) => React__default.ReactElement;
|
|
13384
13390
|
|
|
13385
13391
|
type CommonChatMessageProps = {
|
|
13386
13392
|
/**
|
|
@@ -19681,8 +19687,14 @@ type RadioGroupProps = {
|
|
|
19681
19687
|
* @default "medium"
|
|
19682
19688
|
*/
|
|
19683
19689
|
size?: 'small' | 'medium' | 'large';
|
|
19690
|
+
/**
|
|
19691
|
+
* Orientation of the radio group
|
|
19692
|
+
*
|
|
19693
|
+
* @default 'vertical'
|
|
19694
|
+
*/
|
|
19695
|
+
orientation?: 'vertical' | 'horizontal';
|
|
19684
19696
|
} & TestID & DataAnalyticsAttribute & StyledPropsBlade;
|
|
19685
|
-
declare const RadioGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...rest }: RadioGroupProps) => React__default.ReactElement;
|
|
19697
|
+
declare const RadioGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, orientation, testID, ...rest }: RadioGroupProps) => React__default.ReactElement;
|
|
19686
19698
|
|
|
19687
19699
|
type ScaleProps = Pick<BaseMotionBoxProps, 'type' | 'motionTriggers' | 'children'> & {
|
|
19688
19700
|
/**
|
|
@@ -8627,8 +8627,14 @@ type CheckboxGroupProps = {
|
|
|
8627
8627
|
* @default "medium"
|
|
8628
8628
|
*/
|
|
8629
8629
|
size?: 'small' | 'medium' | 'large';
|
|
8630
|
+
/**
|
|
8631
|
+
* Orientation of the checkbox group
|
|
8632
|
+
*
|
|
8633
|
+
* @default "vertical"
|
|
8634
|
+
*/
|
|
8635
|
+
orientation?: 'vertical' | 'horizontal';
|
|
8630
8636
|
} & TestID & DataAnalyticsAttribute & StyledPropsBlade;
|
|
8631
|
-
declare const CheckboxGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...rest }: CheckboxGroupProps) => React__default.ReactElement;
|
|
8637
|
+
declare const CheckboxGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, orientation, ...rest }: CheckboxGroupProps) => React__default.ReactElement;
|
|
8632
8638
|
|
|
8633
8639
|
type CommonChatMessageProps = {
|
|
8634
8640
|
/**
|
|
@@ -12902,8 +12908,14 @@ type RadioGroupProps = {
|
|
|
12902
12908
|
* @default "medium"
|
|
12903
12909
|
*/
|
|
12904
12910
|
size?: 'small' | 'medium' | 'large';
|
|
12911
|
+
/**
|
|
12912
|
+
* Orientation of the radio group
|
|
12913
|
+
*
|
|
12914
|
+
* @default 'vertical'
|
|
12915
|
+
*/
|
|
12916
|
+
orientation?: 'vertical' | 'horizontal';
|
|
12905
12917
|
} & TestID & DataAnalyticsAttribute & StyledPropsBlade;
|
|
12906
|
-
declare const RadioGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, testID, ...rest }: RadioGroupProps) => React__default.ReactElement;
|
|
12918
|
+
declare const RadioGroup: ({ children, label, helpText, isDisabled, isRequired, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, orientation, testID, ...rest }: RadioGroupProps) => React__default.ReactElement;
|
|
12907
12919
|
|
|
12908
12920
|
type ScaleProps = Pick<BaseMotionBoxProps, 'type' | 'motionTriggers' | 'children'> & {
|
|
12909
12921
|
/**
|