@razorpay/blade 12.25.1 → 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/Card/Card.js +1 -1
- package/build/lib/native/components/Card/Card.js.map +1 -1
- 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/Checkbox/useCheckbox.js +1 -1
- package/build/lib/native/components/Checkbox/useCheckbox.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/Avatar/AvatarButton.js +2 -2
- package/build/lib/web/development/components/Avatar/AvatarButton.js.map +1 -1
- package/build/lib/web/development/components/Card/Card.js +1 -1
- package/build/lib/web/development/components/Card/Card.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/Checkbox/useCheckbox.js +2 -1
- package/build/lib/web/development/components/Checkbox/useCheckbox.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/Avatar/AvatarButton.js +2 -2
- package/build/lib/web/production/components/Avatar/AvatarButton.js.map +1 -1
- package/build/lib/web/production/components/Card/Card.js +1 -1
- package/build/lib/web/production/components/Card/Card.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/Checkbox/useCheckbox.js +2 -1
- package/build/lib/web/production/components/Checkbox/useCheckbox.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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport const ComponentIds = {\n CardHeader: 'CardHeader',\n CardHeaderTrailing: 'CardHeaderTrailing',\n CardHeaderLeading: 'CardHeaderLeading',\n CardFooter: 'CardFooter',\n CardFooterTrailing: 'CardFooterTrailing',\n CardFooterLeading: 'CardFooterLeading',\n CardBody: 'CardBody',\n CardHeaderIcon: 'CardHeaderIcon',\n CardHeaderCounter: 'CardHeaderCounter',\n CardHeaderBadge: 'CardHeaderBadge',\n CardHeaderAmount: 'CardHeaderAmount',\n CardHeaderText: 'CardHeaderText',\n CardHeaderLink: 'CardHeaderLink',\n CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n /**\n * Card contents\n */\n children: React.ReactNode;\n /**\n * Sets the background color of the Card\n *\n * @default `surface.background.gray.intense`\n */\n backgroundColor?: CardSurfaceBackgroundColors;\n /**\n * Sets the border radius of the Card\n *\n * @default `medium`\n */\n borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n /**\n * Sets the elevation for Cards\n *\n * eg: `theme.elevation.midRaised`\n *\n * @default `theme.elevation.lowRaised`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n */\n elevation?: keyof Elevation;\n /**\n * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n * @default `spacing.7`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n */\n padding?: CardSpacingValueType;\n /**\n * Sets the width of the card\n */\n width?: BoxProps['width'];\n /**\n * Sets the height of the card\n */\n height?: BoxProps['height'];\n /**\n * Sets minimum height of the card\n */\n minHeight?: BoxProps['minHeight'];\n /**\n * Sets minimum width of the card\n */\n minWidth?: BoxProps['minWidth'];\n /**\n * If `true`, the card will be in selected state\n * Card will have a primary color border around it.\n *\n * @default false\n */\n\n isSelected?: boolean;\n /**\n * Makes the Card linkable by setting the `href` prop\n *\n * @default undefined\n */\n href?: string;\n /**\n * Sets the `target` attribute for the linkable card\n */\n target?: string;\n /**\n * Sets the `rel` attribute for the linkable card\n */\n rel?: string;\n /**\n * Sets the accessibility label for the card\n * This is useful when the card has an `href` or `onClick` prop\n * Setting this will announce the label when the card is focused\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the card will scale up on hover\n *\n * On mobile devices it will scale down on press\n *\n * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\n */\n shouldScaleOnHover?: boolean;\n /**\n * Callback triggered when the card is hovered\n */\n onHover?: () => void;\n /**\n * Callback triggered when the card is clicked\n */\n onClick?: (\n event: Platform.Select<{\n web: React.MouseEvent;\n native: GestureResponderEvent;\n }>,\n ) => void;\n /**\n * Sets the HTML element for the Card\n *\n * When `as` is set to `label`, the card will be rendered as a label element\n * This can be used to create a custom checkbox or radio button using the card\n *\n * @default undefined\n */\n as?: 'label';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\n children,\n backgroundColor = 'surface.background.gray.intense',\n borderRadius = 'medium',\n elevation = 'lowRaised',\n testID,\n padding = 'spacing.7',\n width,\n height,\n minHeight,\n minWidth,\n onClick,\n isSelected = false,\n accessibilityLabel,\n shouldScaleOnHover = false,\n onHover,\n href,\n target,\n rel,\n as,\n ...rest\n },\n ref,\n): React.ReactElement => {\n const [isFocused, setIsFocused] = React.useState(false);\n\n useVerifyAllowedChildren({\n children,\n componentName: 'Card',\n allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n });\n\n const linkOverlayProps: LinkOverlayProps = {\n ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n ...makeAccessible({ label: accessibilityLabel, pressed: isSelected }),\n onFocus: () => {\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n };\n const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n return (\n <CardProvider>\n <CardRoot\n as={as}\n ref={ref as never}\n display={'block' as never}\n borderRadius={borderRadius}\n onMouseEnter={onHover as never}\n shouldScaleOnHover={shouldScaleOnHover}\n isSelected={isSelected}\n isFocused={isFocused}\n // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n onClick={isReactNative() ? onClick : undefined}\n width={width}\n height={height}\n minHeight={minHeight}\n minWidth={minWidth}\n href={href}\n accessibilityLabel={accessibilityLabel}\n {...metaAttribute({ name: MetaConstants.Card, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <CardSurface\n height={height}\n minHeight={minHeight}\n padding={padding}\n borderRadius={borderRadius}\n elevation={elevation}\n textAlign={'left' as never}\n backgroundColor={backgroundColor}\n >\n {href ? (\n <LinkOverlay\n onClick={onClick}\n href={href}\n target={target}\n rel={rel ?? defaultRel}\n {...linkOverlayProps}\n />\n ) : null}\n {!href && onClick ? (\n <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n ) : null}\n {children}\n </CardSurface>\n </CardRoot>\n </CardProvider>\n );\n};\n\ntype CardBodyProps = {\n children: React.ReactNode;\n height?: BoxProps['height'];\n} & TestID &\n DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","onFocus","onBlur","defaultRel","undefined","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport { CardSurface } from './CardSurface';\nimport { CardProvider, useVerifyInsideCard } from './CardContext';\nimport { LinkOverlay } from './LinkOverlay';\nimport { CardRoot } from './CardRoot';\nimport type { CardSpacingValueType, LinkOverlayProps } from './types';\nimport { CARD_LINK_OVERLAY_ID } from './constants';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { DataAnalyticsAttribute, BladeElementRef, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { Elevation } from '~tokens/global';\nimport type { BoxProps } from '~components/Box';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { useVerifyAllowedChildren } from '~utils/useVerifyAllowedChildren/useVerifyAllowedChildren';\nimport type { Platform } from '~utils';\nimport { isReactNative } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nexport const ComponentIds = {\n CardHeader: 'CardHeader',\n CardHeaderTrailing: 'CardHeaderTrailing',\n CardHeaderLeading: 'CardHeaderLeading',\n CardFooter: 'CardFooter',\n CardFooterTrailing: 'CardFooterTrailing',\n CardFooterLeading: 'CardFooterLeading',\n CardBody: 'CardBody',\n CardHeaderIcon: 'CardHeaderIcon',\n CardHeaderCounter: 'CardHeaderCounter',\n CardHeaderBadge: 'CardHeaderBadge',\n CardHeaderAmount: 'CardHeaderAmount',\n CardHeaderText: 'CardHeaderText',\n CardHeaderLink: 'CardHeaderLink',\n CardHeaderIconButton: 'CardHeaderIconButton',\n};\n\ntype CardSurfaceBackgroundColors = `surface.background.gray.${DotNotationToken<\n Theme['colors']['surface']['background']['gray']\n>}`;\n\nexport type CardProps = {\n /**\n * Card contents\n */\n children: React.ReactNode;\n /**\n * Sets the background color of the Card\n *\n * @default `surface.background.gray.intense`\n */\n backgroundColor?: CardSurfaceBackgroundColors;\n /**\n * Sets the border radius of the Card\n *\n * @default `medium`\n */\n borderRadius?: Extract<BoxProps['borderRadius'], 'medium' | 'large' | 'xlarge'>;\n /**\n * Sets the elevation for Cards\n *\n * eg: `theme.elevation.midRaised`\n *\n * @default `theme.elevation.lowRaised`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs\n */\n elevation?: keyof Elevation;\n /**\n * Sets the padding equally on all sides. Only few `spacing` tokens are allowed deliberately\n * @default `spacing.7`\n *\n * **Links:**\n * - Docs: https://blade.razorpay.com/?path=/docs/tokens-spacing--docs\n */\n padding?: CardSpacingValueType;\n /**\n * Sets the width of the card\n */\n width?: BoxProps['width'];\n /**\n * Sets the height of the card\n */\n height?: BoxProps['height'];\n /**\n * Sets minimum height of the card\n */\n minHeight?: BoxProps['minHeight'];\n /**\n * Sets minimum width of the card\n */\n minWidth?: BoxProps['minWidth'];\n /**\n * If `true`, the card will be in selected state\n * Card will have a primary color border around it.\n *\n * @default false\n */\n\n isSelected?: boolean;\n /**\n * Makes the Card linkable by setting the `href` prop\n *\n * @default undefined\n */\n href?: string;\n /**\n * Sets the `target` attribute for the linkable card\n */\n target?: string;\n /**\n * Sets the `rel` attribute for the linkable card\n */\n rel?: string;\n /**\n * Sets the accessibility label for the card\n * This is useful when the card has an `href` or `onClick` prop\n * Setting this will announce the label when the card is focused\n */\n accessibilityLabel?: string;\n /**\n * If `true`, the card will scale up on hover\n *\n * On mobile devices it will scale down on press\n *\n * **This prop is deprecated in favour of motion presets released in v12**\n *\n * ### Migration\n *\n * ```diff\n * - <Card\n * - shouldScaleOnHover\n * - />\n *\n * + <Scale motionTriggers={['hover']}>\n * + <Card />\n * + </Scale>\n * ```\n *\n * @default false\n *\n * @deprecated This prop is deprecated in favour of motion presets released in v12\n */\n shouldScaleOnHover?: boolean;\n /**\n * Callback triggered when the card is hovered\n */\n onHover?: () => void;\n /**\n * Callback triggered when the card is clicked\n */\n onClick?: (\n event: Platform.Select<{\n web: React.MouseEvent;\n native: GestureResponderEvent;\n }>,\n ) => void;\n /**\n * Sets the HTML element for the Card\n *\n * When `as` is set to `label`, the card will be rendered as a label element\n * This can be used to create a custom checkbox or radio button using the card\n *\n * @default undefined\n */\n as?: 'label';\n} & TestID &\n DataAnalyticsAttribute &\n StyledPropsBlade;\n\nconst _Card: React.ForwardRefRenderFunction<BladeElementRef, CardProps> = (\n {\n children,\n backgroundColor = 'surface.background.gray.intense',\n borderRadius = 'medium',\n elevation = 'lowRaised',\n testID,\n padding = 'spacing.7',\n width,\n height,\n minHeight,\n minWidth,\n onClick,\n isSelected = false,\n accessibilityLabel,\n shouldScaleOnHover = false,\n onHover,\n href,\n target,\n rel,\n as,\n ...rest\n },\n ref,\n): React.ReactElement => {\n const [isFocused, setIsFocused] = React.useState(false);\n\n useVerifyAllowedChildren({\n children,\n componentName: 'Card',\n allowedComponents: [ComponentIds.CardHeader, ComponentIds.CardBody, ComponentIds.CardFooter],\n });\n\n const linkOverlayProps: LinkOverlayProps = {\n ...metaAttribute({ name: CARD_LINK_OVERLAY_ID }),\n ...makeAccessible({ label: accessibilityLabel, pressed: href ? undefined : isSelected }),\n onFocus: () => {\n setIsFocused(true);\n },\n onBlur: () => {\n setIsFocused(false);\n },\n };\n const defaultRel = target && target === '_blank' ? 'noreferrer noopener' : undefined;\n\n return (\n <CardProvider>\n <CardRoot\n as={as}\n ref={ref as never}\n display={'block' as never}\n borderRadius={borderRadius}\n onMouseEnter={onHover as never}\n shouldScaleOnHover={shouldScaleOnHover}\n isSelected={isSelected}\n isFocused={isFocused}\n // on react native we need to pass onClick to root, because we don't need the LinkOverlay in RN\n onClick={isReactNative() ? onClick : undefined}\n width={width}\n height={height}\n minHeight={minHeight}\n minWidth={minWidth}\n href={href}\n accessibilityLabel={accessibilityLabel}\n {...metaAttribute({ name: MetaConstants.Card, testID })}\n {...getStyledProps(rest)}\n {...makeAnalyticsAttribute(rest)}\n >\n <CardSurface\n height={height}\n minHeight={minHeight}\n padding={padding}\n borderRadius={borderRadius}\n elevation={elevation}\n textAlign={'left' as never}\n backgroundColor={backgroundColor}\n >\n {href ? (\n <LinkOverlay\n onClick={onClick}\n href={href}\n target={target}\n rel={rel ?? defaultRel}\n {...linkOverlayProps}\n />\n ) : null}\n {!href && onClick ? (\n <LinkOverlay as=\"button\" onClick={onClick} {...linkOverlayProps} />\n ) : null}\n {children}\n </CardSurface>\n </CardRoot>\n </CardProvider>\n );\n};\n\ntype CardBodyProps = {\n children: React.ReactNode;\n height?: BoxProps['height'];\n} & TestID &\n DataAnalyticsAttribute;\n\nconst _CardBody = ({ height, children, testID, ...rest }: CardBodyProps): React.ReactElement => {\n useVerifyInsideCard('CardBody');\n\n return (\n <BaseBox\n {...metaAttribute({ name: MetaConstants.CardBody, testID })}\n {...makeAnalyticsAttribute(rest)}\n height={height}\n >\n {children}\n </BaseBox>\n );\n};\n\nconst Card = React.forwardRef(_Card);\nconst CardBody = assignWithoutSideEffects(_CardBody, { componentId: ComponentIds.CardBody });\n\nexport { Card, CardBody };\n"],"names":["ComponentIds","CardHeader","CardHeaderTrailing","CardHeaderLeading","CardFooter","CardFooterTrailing","CardFooterLeading","CardBody","CardHeaderIcon","CardHeaderCounter","CardHeaderBadge","CardHeaderAmount","CardHeaderText","CardHeaderLink","CardHeaderIconButton","_Card","_ref","ref","children","_ref$backgroundColor","backgroundColor","_ref$borderRadius","borderRadius","_ref$elevation","elevation","testID","_ref$padding","padding","width","height","minHeight","minWidth","onClick","_ref$isSelected","isSelected","accessibilityLabel","_ref$shouldScaleOnHov","shouldScaleOnHover","onHover","href","target","rel","as","rest","_objectWithoutProperties","_excluded","_React$useState","React","useState","_React$useState2","_slicedToArray","isFocused","setIsFocused","useVerifyAllowedChildren","componentName","allowedComponents","linkOverlayProps","_objectSpread","metaAttribute","name","CARD_LINK_OVERLAY_ID","makeAccessible","label","pressed","undefined","onFocus","onBlur","defaultRel","_jsx","CardProvider","CardRoot","display","onMouseEnter","isReactNative","MetaConstants","Card","getStyledProps","makeAnalyticsAttribute","_jsxs","CardSurface","textAlign","LinkOverlay","_CardBody","_ref2","_excluded2","useVerifyInsideCard","BaseBox","forwardRef","assignWithoutSideEffects","componentId"],"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;;;;"}
|
|
@@ -24,6 +24,7 @@ function setMixed(element, mixed) {
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
var useCheckbox = function useCheckbox(_ref) {
|
|
27
|
+
var _inputRef$current;
|
|
27
28
|
var _ref$role = _ref.role,
|
|
28
29
|
role = _ref$role === void 0 ? 'checkbox' : _ref$role,
|
|
29
30
|
isChecked = _ref.isChecked,
|
|
@@ -89,7 +90,7 @@ var useCheckbox = function useCheckbox(_ref) {
|
|
|
89
90
|
required: Boolean(isRequired),
|
|
90
91
|
invalid: Boolean(hasError),
|
|
91
92
|
disabled: Boolean(isDisabled),
|
|
92
|
-
checked: checkboxState
|
|
93
|
+
checked: (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.indeterminate ? 'mixed' : checkboxState
|
|
93
94
|
}, hasError ? {
|
|
94
95
|
errorMessage: errorTextId
|
|
95
96
|
} : {}), hasHelperText ? {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCheckbox.js","sources":["../../../../../../src/components/Checkbox/useCheckbox.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport type { CheckboxProps } from './Checkbox';\nimport { useFormId } from '~components/Form/useFormId';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { getPlatformType } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\nimport { throwBladeError } from '~utils/logger';\n\ntype UseCheckboxProps = Pick<\n CheckboxProps,\n | 'isChecked'\n | 'defaultChecked'\n | 'isDisabled'\n | 'isIndeterminate'\n | 'isRequired'\n | 'onChange'\n | 'name'\n | 'value'\n> & {\n role?: 'checkbox' | 'switch';\n hasError?: boolean;\n hasHelperText?: boolean;\n};\n\n/**\n * indeterminate is not a HTML input element prop,\n * it's an IDL prop thus we need to set it on the underlying HTMLInputElement\n */\nfunction setMixed(element: HTMLInputElement, mixed?: boolean) {\n if (mixed) {\n element.indeterminate = true;\n } else if (element.indeterminate) {\n element.indeterminate = false;\n }\n}\n\nconst useCheckbox = ({\n role = 'checkbox',\n isChecked,\n defaultChecked,\n isIndeterminate,\n isDisabled,\n isRequired,\n hasError,\n hasHelperText,\n onChange,\n name,\n value,\n}: UseCheckboxProps) => {\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const isReactNative = getPlatformType() === 'react-native';\n if (__DEV__) {\n if (isChecked && defaultChecked) {\n throwBladeError({\n message: `Do not provide both 'isChecked' and 'defaultChecked' to useCheckbox. Consider if you want this component to be controlled or uncontrolled.`,\n moduleName: 'useCheckbox',\n });\n }\n }\n\n const [checkboxState, setCheckboxStateChange] = useControllableState({\n value: isChecked,\n defaultValue: defaultChecked ?? false,\n });\n\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement> | GestureResponderEvent) => {\n if (isDisabled) {\n event.stopPropagation();\n event.preventDefault();\n return;\n }\n setCheckboxStateChange((checked) => {\n onChange?.({\n isChecked: !checked,\n event: event as React.ChangeEvent,\n value,\n });\n return !checked;\n });\n };\n\n // set indeterminate to input\n React.useEffect(() => {\n const element = inputRef.current;\n if (!element) return;\n setMixed(element, isIndeterminate);\n }, [isIndeterminate]);\n\n const state = {\n isReactNative,\n isChecked: checkboxState,\n setChecked: setCheckboxStateChange,\n };\n\n const { inputId, errorTextId, helpTextId } = useFormId('checkbox');\n\n const accessibilityProps = makeAccessible({\n role,\n required: Boolean(isRequired),\n invalid: Boolean(hasError),\n disabled: Boolean(isDisabled),\n checked: checkboxState,\n ...(hasError ? { errorMessage: errorTextId } : {}),\n ...(hasHelperText ? { describedBy: helpTextId } : {}),\n });\n\n if (isReactNative) {\n return {\n state,\n inputProps: {\n onPress: handleOnChange,\n name,\n value,\n ...accessibilityProps,\n },\n };\n }\n\n return {\n state,\n ids: { inputId, errorTextId, helpTextId },\n inputProps: {\n ref: inputRef,\n onChange: handleOnChange,\n type: 'checkbox',\n name,\n value,\n checked: checkboxState,\n disabled: isDisabled,\n required: isRequired,\n ...accessibilityProps,\n },\n };\n};\n\nexport type InputProps = ReturnType<typeof useCheckbox>['inputProps'];\n\nexport { useCheckbox };\n"],"names":["setMixed","element","mixed","indeterminate","useCheckbox","_ref","_ref$role","role","isChecked","defaultChecked","isIndeterminate","isDisabled","isRequired","hasError","hasHelperText","onChange","name","value","inputRef","React","useRef","isReactNative","getPlatformType","throwBladeError","message","moduleName","_useControllableState","useControllableState","defaultValue","_useControllableState2","_slicedToArray","checkboxState","setCheckboxStateChange","handleOnChange","event","stopPropagation","preventDefault","checked","useEffect","current","state","setChecked","_useFormId","useFormId","inputId","errorTextId","helpTextId","accessibilityProps","makeAccessible","_objectSpread","required","Boolean","invalid","disabled","errorMessage","describedBy","inputProps","onPress","ids","ref","type"],"mappings":";;;;;;;;;;;;;;AA2BA;AACA;AACA;AACA;AACA,SAASA,QAAQA,CAACC,OAAyB,EAAEC,KAAe,EAAE;AAC5D,EAAA,IAAIA,KAAK,EAAE;IACTD,OAAO,CAACE,aAAa,GAAG,IAAI,CAAA;AAC9B,GAAC,MAAM,IAAIF,OAAO,CAACE,aAAa,EAAE;IAChCF,OAAO,CAACE,aAAa,GAAG,KAAK,CAAA;AAC/B,GAAA;AACF,CAAA;AAEA,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAYO;AAAA,EAAA,IAAAC,SAAA,
|
|
1
|
+
{"version":3,"file":"useCheckbox.js","sources":["../../../../../../src/components/Checkbox/useCheckbox.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport type { GestureResponderEvent } from 'react-native';\nimport type { CheckboxProps } from './Checkbox';\nimport { useFormId } from '~components/Form/useFormId';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { getPlatformType } from '~utils';\nimport { useControllableState } from '~utils/useControllable';\nimport { throwBladeError } from '~utils/logger';\n\ntype UseCheckboxProps = Pick<\n CheckboxProps,\n | 'isChecked'\n | 'defaultChecked'\n | 'isDisabled'\n | 'isIndeterminate'\n | 'isRequired'\n | 'onChange'\n | 'name'\n | 'value'\n> & {\n role?: 'checkbox' | 'switch';\n hasError?: boolean;\n hasHelperText?: boolean;\n};\n\n/**\n * indeterminate is not a HTML input element prop,\n * it's an IDL prop thus we need to set it on the underlying HTMLInputElement\n */\nfunction setMixed(element: HTMLInputElement, mixed?: boolean) {\n if (mixed) {\n element.indeterminate = true;\n } else if (element.indeterminate) {\n element.indeterminate = false;\n }\n}\n\nconst useCheckbox = ({\n role = 'checkbox',\n isChecked,\n defaultChecked,\n isIndeterminate,\n isDisabled,\n isRequired,\n hasError,\n hasHelperText,\n onChange,\n name,\n value,\n}: UseCheckboxProps) => {\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const isReactNative = getPlatformType() === 'react-native';\n if (__DEV__) {\n if (isChecked && defaultChecked) {\n throwBladeError({\n message: `Do not provide both 'isChecked' and 'defaultChecked' to useCheckbox. Consider if you want this component to be controlled or uncontrolled.`,\n moduleName: 'useCheckbox',\n });\n }\n }\n\n const [checkboxState, setCheckboxStateChange] = useControllableState({\n value: isChecked,\n defaultValue: defaultChecked ?? false,\n });\n\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement> | GestureResponderEvent) => {\n if (isDisabled) {\n event.stopPropagation();\n event.preventDefault();\n return;\n }\n setCheckboxStateChange((checked) => {\n onChange?.({\n isChecked: !checked,\n event: event as React.ChangeEvent,\n value,\n });\n return !checked;\n });\n };\n\n // set indeterminate to input\n React.useEffect(() => {\n const element = inputRef.current;\n if (!element) return;\n setMixed(element, isIndeterminate);\n }, [isIndeterminate]);\n\n const state = {\n isReactNative,\n isChecked: checkboxState,\n setChecked: setCheckboxStateChange,\n };\n\n const { inputId, errorTextId, helpTextId } = useFormId('checkbox');\n\n const accessibilityProps = makeAccessible({\n role,\n required: Boolean(isRequired),\n invalid: Boolean(hasError),\n disabled: Boolean(isDisabled),\n checked: inputRef.current?.indeterminate ? 'mixed' : checkboxState,\n ...(hasError ? { errorMessage: errorTextId } : {}),\n ...(hasHelperText ? { describedBy: helpTextId } : {}),\n });\n\n if (isReactNative) {\n return {\n state,\n inputProps: {\n onPress: handleOnChange,\n name,\n value,\n ...accessibilityProps,\n },\n };\n }\n\n return {\n state,\n ids: { inputId, errorTextId, helpTextId },\n inputProps: {\n ref: inputRef,\n onChange: handleOnChange,\n type: 'checkbox',\n name,\n value,\n checked: checkboxState,\n disabled: isDisabled,\n required: isRequired,\n ...accessibilityProps,\n },\n };\n};\n\nexport type InputProps = ReturnType<typeof useCheckbox>['inputProps'];\n\nexport { useCheckbox };\n"],"names":["setMixed","element","mixed","indeterminate","useCheckbox","_ref","_inputRef$current","_ref$role","role","isChecked","defaultChecked","isIndeterminate","isDisabled","isRequired","hasError","hasHelperText","onChange","name","value","inputRef","React","useRef","isReactNative","getPlatformType","throwBladeError","message","moduleName","_useControllableState","useControllableState","defaultValue","_useControllableState2","_slicedToArray","checkboxState","setCheckboxStateChange","handleOnChange","event","stopPropagation","preventDefault","checked","useEffect","current","state","setChecked","_useFormId","useFormId","inputId","errorTextId","helpTextId","accessibilityProps","makeAccessible","_objectSpread","required","Boolean","invalid","disabled","errorMessage","describedBy","inputProps","onPress","ids","ref","type"],"mappings":";;;;;;;;;;;;;;AA2BA;AACA;AACA;AACA;AACA,SAASA,QAAQA,CAACC,OAAyB,EAAEC,KAAe,EAAE;AAC5D,EAAA,IAAIA,KAAK,EAAE;IACTD,OAAO,CAACE,aAAa,GAAG,IAAI,CAAA;AAC9B,GAAC,MAAM,IAAIF,OAAO,CAACE,aAAa,EAAE;IAChCF,OAAO,CAACE,aAAa,GAAG,KAAK,CAAA;AAC/B,GAAA;AACF,CAAA;AAEA,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAYO;AAAA,EAAA,IAAAC,iBAAA,CAAA;AAAA,EAAA,IAAAC,SAAA,GAAAF,IAAA,CAXtBG,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,SAAA;IACjBE,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,cAAc,GAAAL,IAAA,CAAdK,cAAc;IACdC,eAAe,GAAAN,IAAA,CAAfM,eAAe;IACfC,UAAU,GAAAP,IAAA,CAAVO,UAAU;IACVC,UAAU,GAAAR,IAAA,CAAVQ,UAAU;IACVC,QAAQ,GAAAT,IAAA,CAARS,QAAQ;IACRC,aAAa,GAAAV,IAAA,CAAbU,aAAa;IACbC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,IAAI,GAAAZ,IAAA,CAAJY,IAAI;IACJC,KAAK,GAAAb,IAAA,CAALa,KAAK,CAAA;AAEL,EAAA,IAAMC,QAAQ,GAAGC,cAAK,CAACC,MAAM,CAAmB,IAAI,CAAC,CAAA;AAErD,EAAA,IAAMC,aAAa,GAAGC,eAAe,EAAE,KAAK,cAAc,CAAA;AAC1D,EAAA,IAAI,KAAO,EAAE;IACX,IAAId,SAAS,IAAIC,cAAc,EAAE;AAC/Bc,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAA8I,4IAAA;AACrJC,QAAAA,UAAU,EAAE,aAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;EAEA,IAAAC,qBAAA,GAAgDC,oBAAoB,CAAC;AACnEV,MAAAA,KAAK,EAAET,SAAS;AAChBoB,MAAAA,YAAY,EAAEnB,cAAc,KAAA,IAAA,IAAdA,cAAc,KAAA,KAAA,CAAA,GAAdA,cAAc,GAAI,KAAA;AAClC,KAAC,CAAC;IAAAoB,sBAAA,GAAAC,cAAA,CAAAJ,qBAAA,EAAA,CAAA,CAAA;AAHKK,IAAAA,aAAa,GAAAF,sBAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,sBAAsB,GAAAH,sBAAA,CAAA,CAAA,CAAA,CAAA;AAK5C,EAAA,IAAMI,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,KAAkE,EAAK;AAC7F,IAAA,IAAIvB,UAAU,EAAE;MACduB,KAAK,CAACC,eAAe,EAAE,CAAA;MACvBD,KAAK,CAACE,cAAc,EAAE,CAAA;AACtB,MAAA,OAAA;AACF,KAAA;IACAJ,sBAAsB,CAAC,UAACK,OAAO,EAAK;AAClCtB,MAAAA,QAAQ,KAARA,IAAAA,IAAAA,QAAQ,KAARA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,QAAQ,CAAG;QACTP,SAAS,EAAE,CAAC6B,OAAO;AACnBH,QAAAA,KAAK,EAAEA,KAA0B;AACjCjB,QAAAA,KAAK,EAALA,KAAAA;AACF,OAAC,CAAC,CAAA;AACF,MAAA,OAAO,CAACoB,OAAO,CAAA;AACjB,KAAC,CAAC,CAAA;GACH,CAAA;;AAED;EACAlB,cAAK,CAACmB,SAAS,CAAC,YAAM;AACpB,IAAA,IAAMtC,OAAO,GAAGkB,QAAQ,CAACqB,OAAO,CAAA;IAChC,IAAI,CAACvC,OAAO,EAAE,OAAA;AACdD,IAAAA,QAAQ,CAACC,OAAO,EAAEU,eAAe,CAAC,CAAA;AACpC,GAAC,EAAE,CAACA,eAAe,CAAC,CAAC,CAAA;AAErB,EAAA,IAAM8B,KAAK,GAAG;AACZnB,IAAAA,aAAa,EAAbA,aAAa;AACbb,IAAAA,SAAS,EAAEuB,aAAa;AACxBU,IAAAA,UAAU,EAAET,sBAAAA;GACb,CAAA;AAED,EAAA,IAAAU,UAAA,GAA6CC,SAAS,CAAC,UAAU,CAAC;IAA1DC,OAAO,GAAAF,UAAA,CAAPE,OAAO;IAAEC,WAAW,GAAAH,UAAA,CAAXG,WAAW;IAAEC,UAAU,GAAAJ,UAAA,CAAVI,UAAU,CAAA;AAExC,EAAA,IAAMC,kBAAkB,GAAGC,cAAc,CAAAC,aAAA,CAAAA,aAAA,CAAA;AACvC1C,IAAAA,IAAI,EAAJA,IAAI;AACJ2C,IAAAA,QAAQ,EAAEC,OAAO,CAACvC,UAAU,CAAC;AAC7BwC,IAAAA,OAAO,EAAED,OAAO,CAACtC,QAAQ,CAAC;AAC1BwC,IAAAA,QAAQ,EAAEF,OAAO,CAACxC,UAAU,CAAC;AAC7B0B,IAAAA,OAAO,EAAE,CAAAhC,iBAAA,GAAAa,QAAQ,CAACqB,OAAO,MAAAlC,IAAAA,IAAAA,iBAAA,eAAhBA,iBAAA,CAAkBH,aAAa,GAAG,OAAO,GAAG6B,aAAAA;AAAa,GAAA,EAC9DlB,QAAQ,GAAG;AAAEyC,IAAAA,YAAY,EAAET,WAAAA;AAAY,GAAC,GAAG,EAAE,CAAA,EAC7C/B,aAAa,GAAG;AAAEyC,IAAAA,WAAW,EAAET,UAAAA;AAAW,GAAC,GAAG,EAAE,CACrD,CAAC,CAAA;AAEF,EAAA,IAAIzB,aAAa,EAAE;IACjB,OAAO;AACLmB,MAAAA,KAAK,EAALA,KAAK;AACLgB,MAAAA,UAAU,EAAAP,aAAA,CAAA;AACRQ,QAAAA,OAAO,EAAExB,cAAc;AACvBjB,QAAAA,IAAI,EAAJA,IAAI;AACJC,QAAAA,KAAK,EAALA,KAAAA;AAAK,OAAA,EACF8B,kBAAkB,CAAA;KAExB,CAAA;AACH,GAAA;EAEA,OAAO;AACLP,IAAAA,KAAK,EAALA,KAAK;AACLkB,IAAAA,GAAG,EAAE;AAAEd,MAAAA,OAAO,EAAPA,OAAO;AAAEC,MAAAA,WAAW,EAAXA,WAAW;AAAEC,MAAAA,UAAU,EAAVA,UAAAA;KAAY;AACzCU,IAAAA,UAAU,EAAAP,aAAA,CAAA;AACRU,MAAAA,GAAG,EAAEzC,QAAQ;AACbH,MAAAA,QAAQ,EAAEkB,cAAc;AACxB2B,MAAAA,IAAI,EAAE,UAAU;AAChB5C,MAAAA,IAAI,EAAJA,IAAI;AACJC,MAAAA,KAAK,EAALA,KAAK;AACLoB,MAAAA,OAAO,EAAEN,aAAa;AACtBsB,MAAAA,QAAQ,EAAE1C,UAAU;AACpBuC,MAAAA,QAAQ,EAAEtC,UAAAA;AAAU,KAAA,EACjBmC,kBAAkB,CAAA;GAExB,CAAA;AACH;;;;"}
|
|
@@ -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":";;;AAKA,IAAMA,UAAU,GAAG;AACjBC,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;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;KAClB;AACDJ,IAAAA,MAAM,EAAE;AACNG,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;KAClB;AACDH,IAAAA,KAAK,EAAE;AACLE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;AACnB,KAAA;AACF,GAAA;AACF,EAAU;AA0BV,IAAMG,eAAgC,GAAG;AACvCC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,oBAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,0CAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,oBAAoB;AAC7BC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDI,IAAAA,QAAQ,EAAE;AACRN,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,oBAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMK,gBAA0C,GAAG;EACjD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVH,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDC,IAAAA,MAAM,EAAE;AACNF,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}
|
|
@@ -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
|
/**
|