@tamagui/radio-group 1.5.6 → 1.5.7
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/dist/cjs/RadioGroup.js +9 -6
- package/dist/cjs/RadioGroup.js.map +2 -2
- package/dist/esm/RadioGroup.js +9 -6
- package/dist/esm/RadioGroup.js.map +2 -2
- package/dist/esm/RadioGroup.mjs +9 -6
- package/dist/esm/RadioGroup.mjs.map +2 -2
- package/dist/jsx/RadioGroup.js +9 -6
- package/dist/jsx/RadioGroup.js.map +2 -2
- package/dist/jsx/RadioGroup.mjs +9 -6
- package/dist/jsx/RadioGroup.mjs.map +2 -2
- package/package.json +10 -10
- package/src/RadioGroup.tsx +10 -6
- package/types/RadioGroup.d.ts.map +1 -1
package/dist/cjs/RadioGroup.js
CHANGED
|
@@ -56,8 +56,8 @@ const RadioIndicatorFrame = (0, import_core.styled)(import_stacks.ThemeableStack
|
|
|
56
56
|
variants: {
|
|
57
57
|
unstyled: {
|
|
58
58
|
false: {
|
|
59
|
-
w: "
|
|
60
|
-
h: "
|
|
59
|
+
w: "40%",
|
|
60
|
+
h: "40%",
|
|
61
61
|
br: 1e3,
|
|
62
62
|
backgroundColor: "$color"
|
|
63
63
|
}
|
|
@@ -100,12 +100,16 @@ const RadioGroupItemFrame = (0, import_core.styled)(import_stacks.ThemeableStack
|
|
|
100
100
|
variants: {
|
|
101
101
|
unstyled: {
|
|
102
102
|
false: {
|
|
103
|
-
|
|
103
|
+
size: "$true",
|
|
104
|
+
borderRadius: 1e3,
|
|
104
105
|
backgroundColor: "$background",
|
|
105
106
|
alignItems: "center",
|
|
106
107
|
justifyContent: "center",
|
|
107
|
-
borderWidth:
|
|
108
|
-
borderColor: "
|
|
108
|
+
borderWidth: 1,
|
|
109
|
+
borderColor: "$borderColor",
|
|
110
|
+
hoverStyle: {
|
|
111
|
+
borderColor: "$borderColorHover"
|
|
112
|
+
},
|
|
109
113
|
focusStyle: {
|
|
110
114
|
borderColor: "$borderColorFocus"
|
|
111
115
|
}
|
|
@@ -124,7 +128,6 @@ const RadioGroupItemFrame = (0, import_core.styled)(import_stacks.ThemeableStack
|
|
|
124
128
|
}
|
|
125
129
|
},
|
|
126
130
|
defaultVariants: {
|
|
127
|
-
size: "$true",
|
|
128
131
|
unstyled: false
|
|
129
132
|
}
|
|
130
133
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/RadioGroup.tsx"],
|
|
4
|
-
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/radio-group/src/RadioGroup.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst RADIO_GROUP_NAME = 'RadioGroup'\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\nconst [createRadioGroupContext, createRadioGroupScope] =\n createContextScope(RADIO_GROUP_NAME)\ntype RadioGroupContextValue = {\n value?: string\n disabled?: boolean\n required?: boolean\n onChange?: (value: string) => void\n name?: string\n native?: boolean\n accentColor?: string\n}\nconst [RadioGroupProvider, useRadioGroupContext] =\n createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME)\n\nconst getState = (checked: boolean) => {\n return checked ? 'checked' : 'unchecked'\n}\n\n/* -------------------------------------------------------------------------\n * RadioIndicator\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'\n\nconst RadioIndicatorFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_INDICATOR_NAME,\n pointerEvents: 'none',\n\n variants: {\n unstyled: {\n false: {\n w: '60%',\n h: '60%',\n br: 1000,\n backgroundColor: '$color',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioIndicatorProps = GetProps<typeof RadioIndicatorFrame> & {\n forceMount?: boolean\n unstyled?: boolean\n}\n\ntype RadioIndicatorElement = TamaguiElement\n\nconst RadioIndicator = RadioIndicatorFrame.extractable(\n React.forwardRef<RadioIndicatorElement, RadioIndicatorProps>(\n (props: ScopedRadioGroupItemProps<RadioIndicatorProps>, forwardedRef) => {\n const { __scopeRadioGroupItem, forceMount, disabled, ...indicatorProps } = props\n const { checked } = useRadioGroupItemContext(\n RADIO_GROUP_INDICATOR_NAME,\n __scopeRadioGroupItem\n )\n\n if (forceMount || checked) {\n return (\n <RadioIndicatorFrame\n theme=\"active\"\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n\n return null\n }\n )\n)\n\nRadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------\n * RadioGroupItem\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'\n\ntype RadioGroupItemContextValue = {\n checked: boolean\n disabled?: boolean\n}\n\nconst [RadioGroupItemProvider, useRadioGroupItemContext] =\n createRadioGroupContext<RadioGroupItemContextValue>(RADIO_GROUP_NAME)\n\nconst RadioGroupItemFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_ITEM_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n borderRadius: 9999,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 2,\n borderColor: 'transparent',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (value, { props }) => {\n const size = Math.floor(\n getVariableValue(getSize(value)) * (props['scaleSize'] ?? 0.5)\n )\n return {\n width: size,\n height: size,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$true',\n unstyled: false,\n },\n})\n\ntype RadioGroupItemProps = GetProps<typeof RadioGroupItemFrame> & {\n value: string\n id?: string\n labelledBy?: string\n disabled?: boolean\n}\n\ntype RadioGroupItemElement = HTMLButtonElement\n\ntype ScopedRadioGroupItemProps<P> = P & {\n __scopeRadioGroupItem?: Scope\n}\n\nconst RadioGroupItem = RadioGroupItemFrame.extractable(\n React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(\n (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value,\n labelledBy: ariaLabelledby,\n disabled: itemDisabled,\n ...itemProps\n } = props\n const {\n value: groupValue,\n disabled,\n required,\n onChange,\n name,\n native,\n accentColor,\n } = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup)\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const ref = React.useRef<HTMLButtonElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node), ref)\n const isArrowKeyPressedRef = React.useRef(false)\n\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n\n const checked = groupValue === value\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n\n React.useEffect(() => {\n if (isWeb) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (ARROW_KEYS.includes(event.key)) {\n isArrowKeyPressedRef.current = true\n }\n }\n const handleKeyUp = () => (isArrowKeyPressedRef.current = false)\n document.addEventListener('keydown', handleKeyDown)\n document.addEventListener('keyup', handleKeyUp)\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.removeEventListener('keyup', handleKeyUp)\n }\n }\n }, [])\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focusAndSelect: () => {\n onChange?.(value)\n },\n focus: () => {},\n })\n }, [props.id, value])\n }\n\n const isDisabled = disabled || itemDisabled\n\n return (\n <RadioGroupItemProvider checked={checked} scope={__scopeRadioGroup}>\n {isWeb && native ? (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n id={props.id}\n accentColor={accentColor}\n />\n ) : (\n <>\n <RadioGroupItemFrame\n // theme={checked ? 'active' : undefined}\n data-state={getState(checked)}\n data-disabled={isDisabled ? '' : undefined}\n role=\"radio\"\n aria-labelledby={labelledBy}\n aria-checked={checked}\n aria-required={required}\n disabled={isDisabled}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value: value,\n })}\n // allow them to override all but the handlers that already compose:\n {...itemProps}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n if (!checked) {\n onChange?.(value)\n }\n\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if radio is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect radio updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n })}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault()\n }\n ),\n onFocus: composeEventHandlers(itemProps.onFocus, () => {\n /**\n * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n * and we need to \"check\" it in that case. We click it to \"check\" it (instead\n * of updating `context.value`) so that the radio change event fires.\n */\n if (isArrowKeyPressedRef.current)\n (ref.current as HTMLButtonElement)?.click()\n }),\n })}\n />\n {isFormControl && (\n <BubbleInput\n isHidden\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n />\n )}\n </>\n )}\n </RadioGroupItemProvider>\n )\n }\n )\n)\n\n/* -------------------------------------------------------------------------\n * BubbleInput\n * ------------------------------------------------------------------------ */\n\ninterface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n isHidden?: boolean\n accentColor?: string\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, accentColor, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"radio\"\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n aria-hidden={isHidden}\n style={{\n ...(isHidden\n ? {\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }\n : {\n appearance: 'auto',\n accentColor,\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------\n * RadioGroup\n * ----------------------------------------------------------------------- */\n\ntype ScopedProps<P> = P & { __scopeRadioGroup?: Scope }\n\ntype TamaguiElement = HTMLElement | View\n\ntype RadioGroupElement = TamaguiElement\n\nconst RadioGroupFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_NAME,\n\n variants: {\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n})\n\ntype RadioGroupProps = GetProps<typeof RadioGroupFrame> & {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n required?: boolean\n disabled?: boolean\n name?: string\n native?: boolean\n accentColor?: string\n}\n\nconst RadioGroup = withStaticProperties(\n RadioGroupFrame.extractable(\n React.forwardRef<RadioGroupElement, RadioGroupProps>(\n (props: ScopedProps<RadioGroupProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value: valueProp,\n defaultValue,\n onValueChange,\n disabled = false,\n required = false,\n name,\n orientation,\n native,\n accentColor,\n ...radioGroupProps\n } = props\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n return (\n <RadioGroupProvider\n scope={__scopeRadioGroup}\n value={value}\n required={required}\n onChange={setValue}\n disabled={disabled}\n name={name}\n native={native}\n accentColor={accentColor}\n >\n <RadioGroupFrame\n aria-valuetext={value}\n role=\"radiogroup\"\n aria-orientation={orientation}\n ref={forwardedRef}\n orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n {...radioGroupProps}\n />\n </RadioGroupProvider>\n )\n }\n )\n ),\n {\n Indicator: RadioIndicator,\n Item: RadioGroupItem,\n }\n)\n\nRadioGroup.displayName = RADIO_GROUP_NAME\n\nexport { createRadioGroupScope, RadioGroup }\nexport type { RadioGroupProps }\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwFU;AArFV,gCAA4B;AAC5B,kBAQO;AACP,4BAA0C;AAC1C,uBAAkC;AAClC,sBAA2C;AAC3C,mBAAgC;AAChC,oBAA+B;AAC/B,oCAAqC;AACrC,YAAuB;AAGvB,MAAM,mBAAmB;AAEzB,MAAM,aAAa,CAAC,WAAW,aAAa,aAAa,YAAY;AAErE,MAAM,CAAC,yBAAyB,qBAAqB,QACnD,0CAAmB,gBAAgB;AAUrC,MAAM,CAAC,oBAAoB,oBAAoB,IAC7C,wBAAgD,gBAAgB;AAElE,MAAM,WAAW,CAAC,YAAqB;AACrC,SAAO,UAAU,YAAY;AAC/B;AAMA,MAAM,6BAA6B;AAEnC,MAAM,0BAAsB,oBAAO,8BAAgB;AAAA,EACjD,MAAM;AAAA,EACN,eAAe;AAAA,EAEf,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AASD,MAAM,iBAAiB,oBAAoB;AAAA,EACzC,MAAM;AAAA,IACJ,CAAC,OAAuD,iBAAiB;AACvE,YAAM,EAAE,uBAAuB,YAAY,UAAU,GAAG,eAAe,IAAI;AAC3E,YAAM,EAAE,QAAQ,IAAI;AAAA,QAClB;AAAA,QACA;AAAA,MACF;AAEA,UAAI,cAAc,SAAS;AACzB,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,cAAY,SAAS,OAAO;AAAA,YAC5B,iBAAe,WAAW,KAAK;AAAA,YAC9B,GAAG;AAAA,YACJ,KAAK;AAAA;AAAA,QACP;AAAA,MAEJ;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,eAAe,cAAc;AAM7B,MAAM,wBAAwB;AAO9B,MAAM,CAAC,wBAAwB,wBAAwB,IACrD,wBAAoD,gBAAgB;AAEtE,MAAM,0BAAsB,oBAAO,8BAAgB;AAAA,EACjD,MAAM;AAAA,EACN,KAAK;AAAA,EAEL,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,aAAa;AAAA,QAEb,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW,CAAC,OAAO,EAAE,MAAM,MAAM;AAC/B,cAAM,OAAO,KAAK;AAAA,cAChB,kCAAiB,yBAAQ,KAAK,CAAC,KAAK,MAAM,WAAW,KAAK;AAAA,QAC5D;AACA,eAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,
|
|
4
|
+
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/radio-group/src/RadioGroup.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst RADIO_GROUP_NAME = 'RadioGroup'\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\nconst [createRadioGroupContext, createRadioGroupScope] =\n createContextScope(RADIO_GROUP_NAME)\ntype RadioGroupContextValue = {\n value?: string\n disabled?: boolean\n required?: boolean\n onChange?: (value: string) => void\n name?: string\n native?: boolean\n accentColor?: string\n}\nconst [RadioGroupProvider, useRadioGroupContext] =\n createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME)\n\nconst getState = (checked: boolean) => {\n return checked ? 'checked' : 'unchecked'\n}\n\n/* -------------------------------------------------------------------------\n * RadioIndicator\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'\n\nconst RadioIndicatorFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_INDICATOR_NAME,\n pointerEvents: 'none',\n\n variants: {\n unstyled: {\n false: {\n w: '40%',\n h: '40%',\n br: 1000,\n backgroundColor: '$color',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioIndicatorProps = GetProps<typeof RadioIndicatorFrame> & {\n forceMount?: boolean\n unstyled?: boolean\n}\n\ntype RadioIndicatorElement = TamaguiElement\n\nconst RadioIndicator = RadioIndicatorFrame.extractable(\n React.forwardRef<RadioIndicatorElement, RadioIndicatorProps>(\n (props: ScopedRadioGroupItemProps<RadioIndicatorProps>, forwardedRef) => {\n const { __scopeRadioGroupItem, forceMount, disabled, ...indicatorProps } = props\n const { checked } = useRadioGroupItemContext(\n RADIO_GROUP_INDICATOR_NAME,\n __scopeRadioGroupItem\n )\n\n if (forceMount || checked) {\n return (\n <RadioIndicatorFrame\n theme=\"active\"\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n\n return null\n }\n )\n)\n\nRadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------\n * RadioGroupItem\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'\n\ntype RadioGroupItemContextValue = {\n checked: boolean\n disabled?: boolean\n}\n\nconst [RadioGroupItemProvider, useRadioGroupItemContext] =\n createRadioGroupContext<RadioGroupItemContextValue>(RADIO_GROUP_NAME)\n\nconst RadioGroupItemFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_ITEM_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n borderRadius: 1000,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 1,\n borderColor: '$borderColor',\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (value, { props }) => {\n const size = Math.floor(\n getVariableValue(getSize(value)) * (props['scaleSize'] ?? 0.5)\n )\n return {\n width: size,\n height: size,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioGroupItemProps = GetProps<typeof RadioGroupItemFrame> & {\n value: string\n id?: string\n labelledBy?: string\n disabled?: boolean\n}\n\ntype RadioGroupItemElement = HTMLButtonElement\n\ntype ScopedRadioGroupItemProps<P> = P & {\n __scopeRadioGroupItem?: Scope\n}\n\nconst RadioGroupItem = RadioGroupItemFrame.extractable(\n React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(\n (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value,\n labelledBy: ariaLabelledby,\n disabled: itemDisabled,\n ...itemProps\n } = props\n const {\n value: groupValue,\n disabled,\n required,\n onChange,\n name,\n native,\n accentColor,\n } = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup)\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const ref = React.useRef<HTMLButtonElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node), ref)\n const isArrowKeyPressedRef = React.useRef(false)\n\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n\n const checked = groupValue === value\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n\n React.useEffect(() => {\n if (isWeb) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (ARROW_KEYS.includes(event.key)) {\n isArrowKeyPressedRef.current = true\n }\n }\n const handleKeyUp = () => (isArrowKeyPressedRef.current = false)\n document.addEventListener('keydown', handleKeyDown)\n document.addEventListener('keyup', handleKeyUp)\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.removeEventListener('keyup', handleKeyUp)\n }\n }\n }, [])\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focusAndSelect: () => {\n onChange?.(value)\n },\n focus: () => {},\n })\n }, [props.id, value])\n }\n\n const isDisabled = disabled || itemDisabled\n\n return (\n <RadioGroupItemProvider checked={checked} scope={__scopeRadioGroup}>\n {isWeb && native ? (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n id={props.id}\n accentColor={accentColor}\n />\n ) : (\n <>\n <RadioGroupItemFrame\n // theme={checked ? 'active' : undefined}\n data-state={getState(checked)}\n data-disabled={isDisabled ? '' : undefined}\n role=\"radio\"\n aria-labelledby={labelledBy}\n aria-checked={checked}\n aria-required={required}\n disabled={isDisabled}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value: value,\n })}\n // allow them to override all but the handlers that already compose:\n {...itemProps}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n if (!checked) {\n onChange?.(value)\n }\n\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if radio is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect radio updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n })}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault()\n }\n ),\n onFocus: composeEventHandlers(itemProps.onFocus, () => {\n /**\n * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n * and we need to \"check\" it in that case. We click it to \"check\" it (instead\n * of updating `context.value`) so that the radio change event fires.\n */\n if (isArrowKeyPressedRef.current)\n (ref.current as HTMLButtonElement)?.click()\n }),\n })}\n />\n {isFormControl && (\n <BubbleInput\n isHidden\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n />\n )}\n </>\n )}\n </RadioGroupItemProvider>\n )\n }\n )\n)\n\n/* -------------------------------------------------------------------------\n * BubbleInput\n * ------------------------------------------------------------------------ */\n\ninterface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n isHidden?: boolean\n accentColor?: string\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, accentColor, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"radio\"\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n aria-hidden={isHidden}\n style={{\n ...(isHidden\n ? {\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }\n : {\n appearance: 'auto',\n accentColor,\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------\n * RadioGroup\n * ----------------------------------------------------------------------- */\n\ntype ScopedProps<P> = P & { __scopeRadioGroup?: Scope }\n\ntype TamaguiElement = HTMLElement | View\n\ntype RadioGroupElement = TamaguiElement\n\nconst RadioGroupFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_NAME,\n\n variants: {\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n})\n\ntype RadioGroupProps = GetProps<typeof RadioGroupFrame> & {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n required?: boolean\n disabled?: boolean\n name?: string\n native?: boolean\n accentColor?: string\n}\n\nconst RadioGroup = withStaticProperties(\n RadioGroupFrame.extractable(\n React.forwardRef<RadioGroupElement, RadioGroupProps>(\n (props: ScopedProps<RadioGroupProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value: valueProp,\n defaultValue,\n onValueChange,\n disabled = false,\n required = false,\n name,\n orientation,\n native,\n accentColor,\n ...radioGroupProps\n } = props\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n return (\n <RadioGroupProvider\n scope={__scopeRadioGroup}\n value={value}\n required={required}\n onChange={setValue}\n disabled={disabled}\n name={name}\n native={native}\n accentColor={accentColor}\n >\n <RadioGroupFrame\n aria-valuetext={value}\n role=\"radiogroup\"\n aria-orientation={orientation}\n ref={forwardedRef}\n orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n {...radioGroupProps}\n />\n </RadioGroupProvider>\n )\n }\n )\n ),\n {\n Indicator: RadioIndicator,\n Item: RadioGroupItem,\n }\n)\n\nRadioGroup.displayName = RADIO_GROUP_NAME\n\nexport { createRadioGroupScope, RadioGroup }\nexport type { RadioGroupProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/RadioGroup.js
CHANGED
|
@@ -29,8 +29,8 @@ const RadioIndicatorFrame = styled(ThemeableStack, {
|
|
|
29
29
|
variants: {
|
|
30
30
|
unstyled: {
|
|
31
31
|
false: {
|
|
32
|
-
w: "
|
|
33
|
-
h: "
|
|
32
|
+
w: "40%",
|
|
33
|
+
h: "40%",
|
|
34
34
|
br: 1e3,
|
|
35
35
|
backgroundColor: "$color"
|
|
36
36
|
}
|
|
@@ -73,12 +73,16 @@ const RadioGroupItemFrame = styled(ThemeableStack, {
|
|
|
73
73
|
variants: {
|
|
74
74
|
unstyled: {
|
|
75
75
|
false: {
|
|
76
|
-
|
|
76
|
+
size: "$true",
|
|
77
|
+
borderRadius: 1e3,
|
|
77
78
|
backgroundColor: "$background",
|
|
78
79
|
alignItems: "center",
|
|
79
80
|
justifyContent: "center",
|
|
80
|
-
borderWidth:
|
|
81
|
-
borderColor: "
|
|
81
|
+
borderWidth: 1,
|
|
82
|
+
borderColor: "$borderColor",
|
|
83
|
+
hoverStyle: {
|
|
84
|
+
borderColor: "$borderColorHover"
|
|
85
|
+
},
|
|
82
86
|
focusStyle: {
|
|
83
87
|
borderColor: "$borderColorFocus"
|
|
84
88
|
}
|
|
@@ -97,7 +101,6 @@ const RadioGroupItemFrame = styled(ThemeableStack, {
|
|
|
97
101
|
}
|
|
98
102
|
},
|
|
99
103
|
defaultVariants: {
|
|
100
|
-
size: "$true",
|
|
101
104
|
unstyled: false
|
|
102
105
|
}
|
|
103
106
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/RadioGroup.tsx"],
|
|
4
|
-
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/radio-group/src/RadioGroup.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst RADIO_GROUP_NAME = 'RadioGroup'\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\nconst [createRadioGroupContext, createRadioGroupScope] =\n createContextScope(RADIO_GROUP_NAME)\ntype RadioGroupContextValue = {\n value?: string\n disabled?: boolean\n required?: boolean\n onChange?: (value: string) => void\n name?: string\n native?: boolean\n accentColor?: string\n}\nconst [RadioGroupProvider, useRadioGroupContext] =\n createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME)\n\nconst getState = (checked: boolean) => {\n return checked ? 'checked' : 'unchecked'\n}\n\n/* -------------------------------------------------------------------------\n * RadioIndicator\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'\n\nconst RadioIndicatorFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_INDICATOR_NAME,\n pointerEvents: 'none',\n\n variants: {\n unstyled: {\n false: {\n w: '60%',\n h: '60%',\n br: 1000,\n backgroundColor: '$color',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioIndicatorProps = GetProps<typeof RadioIndicatorFrame> & {\n forceMount?: boolean\n unstyled?: boolean\n}\n\ntype RadioIndicatorElement = TamaguiElement\n\nconst RadioIndicator = RadioIndicatorFrame.extractable(\n React.forwardRef<RadioIndicatorElement, RadioIndicatorProps>(\n (props: ScopedRadioGroupItemProps<RadioIndicatorProps>, forwardedRef) => {\n const { __scopeRadioGroupItem, forceMount, disabled, ...indicatorProps } = props\n const { checked } = useRadioGroupItemContext(\n RADIO_GROUP_INDICATOR_NAME,\n __scopeRadioGroupItem\n )\n\n if (forceMount || checked) {\n return (\n <RadioIndicatorFrame\n theme=\"active\"\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n\n return null\n }\n )\n)\n\nRadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------\n * RadioGroupItem\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'\n\ntype RadioGroupItemContextValue = {\n checked: boolean\n disabled?: boolean\n}\n\nconst [RadioGroupItemProvider, useRadioGroupItemContext] =\n createRadioGroupContext<RadioGroupItemContextValue>(RADIO_GROUP_NAME)\n\nconst RadioGroupItemFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_ITEM_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n borderRadius: 9999,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 2,\n borderColor: 'transparent',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (value, { props }) => {\n const size = Math.floor(\n getVariableValue(getSize(value)) * (props['scaleSize'] ?? 0.5)\n )\n return {\n width: size,\n height: size,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$true',\n unstyled: false,\n },\n})\n\ntype RadioGroupItemProps = GetProps<typeof RadioGroupItemFrame> & {\n value: string\n id?: string\n labelledBy?: string\n disabled?: boolean\n}\n\ntype RadioGroupItemElement = HTMLButtonElement\n\ntype ScopedRadioGroupItemProps<P> = P & {\n __scopeRadioGroupItem?: Scope\n}\n\nconst RadioGroupItem = RadioGroupItemFrame.extractable(\n React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(\n (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value,\n labelledBy: ariaLabelledby,\n disabled: itemDisabled,\n ...itemProps\n } = props\n const {\n value: groupValue,\n disabled,\n required,\n onChange,\n name,\n native,\n accentColor,\n } = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup)\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const ref = React.useRef<HTMLButtonElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node), ref)\n const isArrowKeyPressedRef = React.useRef(false)\n\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n\n const checked = groupValue === value\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n\n React.useEffect(() => {\n if (isWeb) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (ARROW_KEYS.includes(event.key)) {\n isArrowKeyPressedRef.current = true\n }\n }\n const handleKeyUp = () => (isArrowKeyPressedRef.current = false)\n document.addEventListener('keydown', handleKeyDown)\n document.addEventListener('keyup', handleKeyUp)\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.removeEventListener('keyup', handleKeyUp)\n }\n }\n }, [])\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focusAndSelect: () => {\n onChange?.(value)\n },\n focus: () => {},\n })\n }, [props.id, value])\n }\n\n const isDisabled = disabled || itemDisabled\n\n return (\n <RadioGroupItemProvider checked={checked} scope={__scopeRadioGroup}>\n {isWeb && native ? (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n id={props.id}\n accentColor={accentColor}\n />\n ) : (\n <>\n <RadioGroupItemFrame\n // theme={checked ? 'active' : undefined}\n data-state={getState(checked)}\n data-disabled={isDisabled ? '' : undefined}\n role=\"radio\"\n aria-labelledby={labelledBy}\n aria-checked={checked}\n aria-required={required}\n disabled={isDisabled}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value: value,\n })}\n // allow them to override all but the handlers that already compose:\n {...itemProps}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n if (!checked) {\n onChange?.(value)\n }\n\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if radio is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect radio updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n })}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault()\n }\n ),\n onFocus: composeEventHandlers(itemProps.onFocus, () => {\n /**\n * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n * and we need to \"check\" it in that case. We click it to \"check\" it (instead\n * of updating `context.value`) so that the radio change event fires.\n */\n if (isArrowKeyPressedRef.current)\n (ref.current as HTMLButtonElement)?.click()\n }),\n })}\n />\n {isFormControl && (\n <BubbleInput\n isHidden\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n />\n )}\n </>\n )}\n </RadioGroupItemProvider>\n )\n }\n )\n)\n\n/* -------------------------------------------------------------------------\n * BubbleInput\n * ------------------------------------------------------------------------ */\n\ninterface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n isHidden?: boolean\n accentColor?: string\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, accentColor, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"radio\"\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n aria-hidden={isHidden}\n style={{\n ...(isHidden\n ? {\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }\n : {\n appearance: 'auto',\n accentColor,\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------\n * RadioGroup\n * ----------------------------------------------------------------------- */\n\ntype ScopedProps<P> = P & { __scopeRadioGroup?: Scope }\n\ntype TamaguiElement = HTMLElement | View\n\ntype RadioGroupElement = TamaguiElement\n\nconst RadioGroupFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_NAME,\n\n variants: {\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n})\n\ntype RadioGroupProps = GetProps<typeof RadioGroupFrame> & {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n required?: boolean\n disabled?: boolean\n name?: string\n native?: boolean\n accentColor?: string\n}\n\nconst RadioGroup = withStaticProperties(\n RadioGroupFrame.extractable(\n React.forwardRef<RadioGroupElement, RadioGroupProps>(\n (props: ScopedProps<RadioGroupProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value: valueProp,\n defaultValue,\n onValueChange,\n disabled = false,\n required = false,\n name,\n orientation,\n native,\n accentColor,\n ...radioGroupProps\n } = props\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n return (\n <RadioGroupProvider\n scope={__scopeRadioGroup}\n value={value}\n required={required}\n onChange={setValue}\n disabled={disabled}\n name={name}\n native={native}\n accentColor={accentColor}\n >\n <RadioGroupFrame\n aria-valuetext={value}\n role=\"radiogroup\"\n aria-orientation={orientation}\n ref={forwardedRef}\n orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n {...radioGroupProps}\n />\n </RadioGroupProvider>\n )\n }\n )\n ),\n {\n Indicator: RadioIndicator,\n Item: RadioGroupItem,\n }\n)\n\nRadioGroup.displayName = RADIO_GROUP_NAME\n\nexport { createRadioGroupScope, RadioGroup }\nexport type { RadioGroupProps }\n"],
|
|
5
|
-
"mappings": "AAwFU,
|
|
4
|
+
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/radio-group/src/RadioGroup.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst RADIO_GROUP_NAME = 'RadioGroup'\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\nconst [createRadioGroupContext, createRadioGroupScope] =\n createContextScope(RADIO_GROUP_NAME)\ntype RadioGroupContextValue = {\n value?: string\n disabled?: boolean\n required?: boolean\n onChange?: (value: string) => void\n name?: string\n native?: boolean\n accentColor?: string\n}\nconst [RadioGroupProvider, useRadioGroupContext] =\n createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME)\n\nconst getState = (checked: boolean) => {\n return checked ? 'checked' : 'unchecked'\n}\n\n/* -------------------------------------------------------------------------\n * RadioIndicator\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'\n\nconst RadioIndicatorFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_INDICATOR_NAME,\n pointerEvents: 'none',\n\n variants: {\n unstyled: {\n false: {\n w: '40%',\n h: '40%',\n br: 1000,\n backgroundColor: '$color',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioIndicatorProps = GetProps<typeof RadioIndicatorFrame> & {\n forceMount?: boolean\n unstyled?: boolean\n}\n\ntype RadioIndicatorElement = TamaguiElement\n\nconst RadioIndicator = RadioIndicatorFrame.extractable(\n React.forwardRef<RadioIndicatorElement, RadioIndicatorProps>(\n (props: ScopedRadioGroupItemProps<RadioIndicatorProps>, forwardedRef) => {\n const { __scopeRadioGroupItem, forceMount, disabled, ...indicatorProps } = props\n const { checked } = useRadioGroupItemContext(\n RADIO_GROUP_INDICATOR_NAME,\n __scopeRadioGroupItem\n )\n\n if (forceMount || checked) {\n return (\n <RadioIndicatorFrame\n theme=\"active\"\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n\n return null\n }\n )\n)\n\nRadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------\n * RadioGroupItem\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'\n\ntype RadioGroupItemContextValue = {\n checked: boolean\n disabled?: boolean\n}\n\nconst [RadioGroupItemProvider, useRadioGroupItemContext] =\n createRadioGroupContext<RadioGroupItemContextValue>(RADIO_GROUP_NAME)\n\nconst RadioGroupItemFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_ITEM_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n borderRadius: 1000,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 1,\n borderColor: '$borderColor',\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (value, { props }) => {\n const size = Math.floor(\n getVariableValue(getSize(value)) * (props['scaleSize'] ?? 0.5)\n )\n return {\n width: size,\n height: size,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioGroupItemProps = GetProps<typeof RadioGroupItemFrame> & {\n value: string\n id?: string\n labelledBy?: string\n disabled?: boolean\n}\n\ntype RadioGroupItemElement = HTMLButtonElement\n\ntype ScopedRadioGroupItemProps<P> = P & {\n __scopeRadioGroupItem?: Scope\n}\n\nconst RadioGroupItem = RadioGroupItemFrame.extractable(\n React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(\n (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value,\n labelledBy: ariaLabelledby,\n disabled: itemDisabled,\n ...itemProps\n } = props\n const {\n value: groupValue,\n disabled,\n required,\n onChange,\n name,\n native,\n accentColor,\n } = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup)\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const ref = React.useRef<HTMLButtonElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node), ref)\n const isArrowKeyPressedRef = React.useRef(false)\n\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n\n const checked = groupValue === value\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n\n React.useEffect(() => {\n if (isWeb) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (ARROW_KEYS.includes(event.key)) {\n isArrowKeyPressedRef.current = true\n }\n }\n const handleKeyUp = () => (isArrowKeyPressedRef.current = false)\n document.addEventListener('keydown', handleKeyDown)\n document.addEventListener('keyup', handleKeyUp)\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.removeEventListener('keyup', handleKeyUp)\n }\n }\n }, [])\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focusAndSelect: () => {\n onChange?.(value)\n },\n focus: () => {},\n })\n }, [props.id, value])\n }\n\n const isDisabled = disabled || itemDisabled\n\n return (\n <RadioGroupItemProvider checked={checked} scope={__scopeRadioGroup}>\n {isWeb && native ? (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n id={props.id}\n accentColor={accentColor}\n />\n ) : (\n <>\n <RadioGroupItemFrame\n // theme={checked ? 'active' : undefined}\n data-state={getState(checked)}\n data-disabled={isDisabled ? '' : undefined}\n role=\"radio\"\n aria-labelledby={labelledBy}\n aria-checked={checked}\n aria-required={required}\n disabled={isDisabled}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value: value,\n })}\n // allow them to override all but the handlers that already compose:\n {...itemProps}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n if (!checked) {\n onChange?.(value)\n }\n\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if radio is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect radio updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n })}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault()\n }\n ),\n onFocus: composeEventHandlers(itemProps.onFocus, () => {\n /**\n * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n * and we need to \"check\" it in that case. We click it to \"check\" it (instead\n * of updating `context.value`) so that the radio change event fires.\n */\n if (isArrowKeyPressedRef.current)\n (ref.current as HTMLButtonElement)?.click()\n }),\n })}\n />\n {isFormControl && (\n <BubbleInput\n isHidden\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n />\n )}\n </>\n )}\n </RadioGroupItemProvider>\n )\n }\n )\n)\n\n/* -------------------------------------------------------------------------\n * BubbleInput\n * ------------------------------------------------------------------------ */\n\ninterface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n isHidden?: boolean\n accentColor?: string\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, accentColor, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"radio\"\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n aria-hidden={isHidden}\n style={{\n ...(isHidden\n ? {\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }\n : {\n appearance: 'auto',\n accentColor,\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------\n * RadioGroup\n * ----------------------------------------------------------------------- */\n\ntype ScopedProps<P> = P & { __scopeRadioGroup?: Scope }\n\ntype TamaguiElement = HTMLElement | View\n\ntype RadioGroupElement = TamaguiElement\n\nconst RadioGroupFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_NAME,\n\n variants: {\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n})\n\ntype RadioGroupProps = GetProps<typeof RadioGroupFrame> & {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n required?: boolean\n disabled?: boolean\n name?: string\n native?: boolean\n accentColor?: string\n}\n\nconst RadioGroup = withStaticProperties(\n RadioGroupFrame.extractable(\n React.forwardRef<RadioGroupElement, RadioGroupProps>(\n (props: ScopedProps<RadioGroupProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value: valueProp,\n defaultValue,\n onValueChange,\n disabled = false,\n required = false,\n name,\n orientation,\n native,\n accentColor,\n ...radioGroupProps\n } = props\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n return (\n <RadioGroupProvider\n scope={__scopeRadioGroup}\n value={value}\n required={required}\n onChange={setValue}\n disabled={disabled}\n name={name}\n native={native}\n accentColor={accentColor}\n >\n <RadioGroupFrame\n aria-valuetext={value}\n role=\"radiogroup\"\n aria-orientation={orientation}\n ref={forwardedRef}\n orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n {...radioGroupProps}\n />\n </RadioGroupProvider>\n )\n }\n )\n ),\n {\n Indicator: RadioIndicator,\n Item: RadioGroupItem,\n }\n)\n\nRadioGroup.displayName = RADIO_GROUP_NAME\n\nexport { createRadioGroupScope, RadioGroup }\nexport type { RadioGroupProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/RadioGroup.mjs
CHANGED
|
@@ -29,8 +29,8 @@ const RadioIndicatorFrame = styled(ThemeableStack, {
|
|
|
29
29
|
variants: {
|
|
30
30
|
unstyled: {
|
|
31
31
|
false: {
|
|
32
|
-
w: "
|
|
33
|
-
h: "
|
|
32
|
+
w: "40%",
|
|
33
|
+
h: "40%",
|
|
34
34
|
br: 1e3,
|
|
35
35
|
backgroundColor: "$color"
|
|
36
36
|
}
|
|
@@ -73,12 +73,16 @@ const RadioGroupItemFrame = styled(ThemeableStack, {
|
|
|
73
73
|
variants: {
|
|
74
74
|
unstyled: {
|
|
75
75
|
false: {
|
|
76
|
-
|
|
76
|
+
size: "$true",
|
|
77
|
+
borderRadius: 1e3,
|
|
77
78
|
backgroundColor: "$background",
|
|
78
79
|
alignItems: "center",
|
|
79
80
|
justifyContent: "center",
|
|
80
|
-
borderWidth:
|
|
81
|
-
borderColor: "
|
|
81
|
+
borderWidth: 1,
|
|
82
|
+
borderColor: "$borderColor",
|
|
83
|
+
hoverStyle: {
|
|
84
|
+
borderColor: "$borderColorHover"
|
|
85
|
+
},
|
|
82
86
|
focusStyle: {
|
|
83
87
|
borderColor: "$borderColorFocus"
|
|
84
88
|
}
|
|
@@ -97,7 +101,6 @@ const RadioGroupItemFrame = styled(ThemeableStack, {
|
|
|
97
101
|
}
|
|
98
102
|
},
|
|
99
103
|
defaultVariants: {
|
|
100
|
-
size: "$true",
|
|
101
104
|
unstyled: false
|
|
102
105
|
}
|
|
103
106
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/RadioGroup.tsx"],
|
|
4
|
-
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/radio-group/src/RadioGroup.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst RADIO_GROUP_NAME = 'RadioGroup'\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\nconst [createRadioGroupContext, createRadioGroupScope] =\n createContextScope(RADIO_GROUP_NAME)\ntype RadioGroupContextValue = {\n value?: string\n disabled?: boolean\n required?: boolean\n onChange?: (value: string) => void\n name?: string\n native?: boolean\n accentColor?: string\n}\nconst [RadioGroupProvider, useRadioGroupContext] =\n createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME)\n\nconst getState = (checked: boolean) => {\n return checked ? 'checked' : 'unchecked'\n}\n\n/* -------------------------------------------------------------------------\n * RadioIndicator\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'\n\nconst RadioIndicatorFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_INDICATOR_NAME,\n pointerEvents: 'none',\n\n variants: {\n unstyled: {\n false: {\n w: '60%',\n h: '60%',\n br: 1000,\n backgroundColor: '$color',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioIndicatorProps = GetProps<typeof RadioIndicatorFrame> & {\n forceMount?: boolean\n unstyled?: boolean\n}\n\ntype RadioIndicatorElement = TamaguiElement\n\nconst RadioIndicator = RadioIndicatorFrame.extractable(\n React.forwardRef<RadioIndicatorElement, RadioIndicatorProps>(\n (props: ScopedRadioGroupItemProps<RadioIndicatorProps>, forwardedRef) => {\n const { __scopeRadioGroupItem, forceMount, disabled, ...indicatorProps } = props\n const { checked } = useRadioGroupItemContext(\n RADIO_GROUP_INDICATOR_NAME,\n __scopeRadioGroupItem\n )\n\n if (forceMount || checked) {\n return (\n <RadioIndicatorFrame\n theme=\"active\"\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n\n return null\n }\n )\n)\n\nRadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------\n * RadioGroupItem\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'\n\ntype RadioGroupItemContextValue = {\n checked: boolean\n disabled?: boolean\n}\n\nconst [RadioGroupItemProvider, useRadioGroupItemContext] =\n createRadioGroupContext<RadioGroupItemContextValue>(RADIO_GROUP_NAME)\n\nconst RadioGroupItemFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_ITEM_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n borderRadius: 9999,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 2,\n borderColor: 'transparent',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (value, { props }) => {\n const size = Math.floor(\n getVariableValue(getSize(value)) * (props['scaleSize'] ?? 0.5)\n )\n return {\n width: size,\n height: size,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$true',\n unstyled: false,\n },\n})\n\ntype RadioGroupItemProps = GetProps<typeof RadioGroupItemFrame> & {\n value: string\n id?: string\n labelledBy?: string\n disabled?: boolean\n}\n\ntype RadioGroupItemElement = HTMLButtonElement\n\ntype ScopedRadioGroupItemProps<P> = P & {\n __scopeRadioGroupItem?: Scope\n}\n\nconst RadioGroupItem = RadioGroupItemFrame.extractable(\n React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(\n (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value,\n labelledBy: ariaLabelledby,\n disabled: itemDisabled,\n ...itemProps\n } = props\n const {\n value: groupValue,\n disabled,\n required,\n onChange,\n name,\n native,\n accentColor,\n } = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup)\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const ref = React.useRef<HTMLButtonElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node), ref)\n const isArrowKeyPressedRef = React.useRef(false)\n\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n\n const checked = groupValue === value\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n\n React.useEffect(() => {\n if (isWeb) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (ARROW_KEYS.includes(event.key)) {\n isArrowKeyPressedRef.current = true\n }\n }\n const handleKeyUp = () => (isArrowKeyPressedRef.current = false)\n document.addEventListener('keydown', handleKeyDown)\n document.addEventListener('keyup', handleKeyUp)\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.removeEventListener('keyup', handleKeyUp)\n }\n }\n }, [])\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focusAndSelect: () => {\n onChange?.(value)\n },\n focus: () => {},\n })\n }, [props.id, value])\n }\n\n const isDisabled = disabled || itemDisabled\n\n return (\n <RadioGroupItemProvider checked={checked} scope={__scopeRadioGroup}>\n {isWeb && native ? (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n id={props.id}\n accentColor={accentColor}\n />\n ) : (\n <>\n <RadioGroupItemFrame\n // theme={checked ? 'active' : undefined}\n data-state={getState(checked)}\n data-disabled={isDisabled ? '' : undefined}\n role=\"radio\"\n aria-labelledby={labelledBy}\n aria-checked={checked}\n aria-required={required}\n disabled={isDisabled}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value: value,\n })}\n // allow them to override all but the handlers that already compose:\n {...itemProps}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n if (!checked) {\n onChange?.(value)\n }\n\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if radio is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect radio updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n })}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault()\n }\n ),\n onFocus: composeEventHandlers(itemProps.onFocus, () => {\n /**\n * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n * and we need to \"check\" it in that case. We click it to \"check\" it (instead\n * of updating `context.value`) so that the radio change event fires.\n */\n if (isArrowKeyPressedRef.current)\n (ref.current as HTMLButtonElement)?.click()\n }),\n })}\n />\n {isFormControl && (\n <BubbleInput\n isHidden\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n />\n )}\n </>\n )}\n </RadioGroupItemProvider>\n )\n }\n )\n)\n\n/* -------------------------------------------------------------------------\n * BubbleInput\n * ------------------------------------------------------------------------ */\n\ninterface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n isHidden?: boolean\n accentColor?: string\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, accentColor, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"radio\"\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n aria-hidden={isHidden}\n style={{\n ...(isHidden\n ? {\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }\n : {\n appearance: 'auto',\n accentColor,\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------\n * RadioGroup\n * ----------------------------------------------------------------------- */\n\ntype ScopedProps<P> = P & { __scopeRadioGroup?: Scope }\n\ntype TamaguiElement = HTMLElement | View\n\ntype RadioGroupElement = TamaguiElement\n\nconst RadioGroupFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_NAME,\n\n variants: {\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n})\n\ntype RadioGroupProps = GetProps<typeof RadioGroupFrame> & {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n required?: boolean\n disabled?: boolean\n name?: string\n native?: boolean\n accentColor?: string\n}\n\nconst RadioGroup = withStaticProperties(\n RadioGroupFrame.extractable(\n React.forwardRef<RadioGroupElement, RadioGroupProps>(\n (props: ScopedProps<RadioGroupProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value: valueProp,\n defaultValue,\n onValueChange,\n disabled = false,\n required = false,\n name,\n orientation,\n native,\n accentColor,\n ...radioGroupProps\n } = props\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n return (\n <RadioGroupProvider\n scope={__scopeRadioGroup}\n value={value}\n required={required}\n onChange={setValue}\n disabled={disabled}\n name={name}\n native={native}\n accentColor={accentColor}\n >\n <RadioGroupFrame\n aria-valuetext={value}\n role=\"radiogroup\"\n aria-orientation={orientation}\n ref={forwardedRef}\n orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n {...radioGroupProps}\n />\n </RadioGroupProvider>\n )\n }\n )\n ),\n {\n Indicator: RadioIndicator,\n Item: RadioGroupItem,\n }\n)\n\nRadioGroup.displayName = RADIO_GROUP_NAME\n\nexport { createRadioGroupScope, RadioGroup }\nexport type { RadioGroupProps }\n"],
|
|
5
|
-
"mappings": "AAwFU,
|
|
4
|
+
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/radio-group/src/RadioGroup.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst RADIO_GROUP_NAME = 'RadioGroup'\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\nconst [createRadioGroupContext, createRadioGroupScope] =\n createContextScope(RADIO_GROUP_NAME)\ntype RadioGroupContextValue = {\n value?: string\n disabled?: boolean\n required?: boolean\n onChange?: (value: string) => void\n name?: string\n native?: boolean\n accentColor?: string\n}\nconst [RadioGroupProvider, useRadioGroupContext] =\n createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME)\n\nconst getState = (checked: boolean) => {\n return checked ? 'checked' : 'unchecked'\n}\n\n/* -------------------------------------------------------------------------\n * RadioIndicator\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'\n\nconst RadioIndicatorFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_INDICATOR_NAME,\n pointerEvents: 'none',\n\n variants: {\n unstyled: {\n false: {\n w: '40%',\n h: '40%',\n br: 1000,\n backgroundColor: '$color',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioIndicatorProps = GetProps<typeof RadioIndicatorFrame> & {\n forceMount?: boolean\n unstyled?: boolean\n}\n\ntype RadioIndicatorElement = TamaguiElement\n\nconst RadioIndicator = RadioIndicatorFrame.extractable(\n React.forwardRef<RadioIndicatorElement, RadioIndicatorProps>(\n (props: ScopedRadioGroupItemProps<RadioIndicatorProps>, forwardedRef) => {\n const { __scopeRadioGroupItem, forceMount, disabled, ...indicatorProps } = props\n const { checked } = useRadioGroupItemContext(\n RADIO_GROUP_INDICATOR_NAME,\n __scopeRadioGroupItem\n )\n\n if (forceMount || checked) {\n return (\n <RadioIndicatorFrame\n theme=\"active\"\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n\n return null\n }\n )\n)\n\nRadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------\n * RadioGroupItem\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'\n\ntype RadioGroupItemContextValue = {\n checked: boolean\n disabled?: boolean\n}\n\nconst [RadioGroupItemProvider, useRadioGroupItemContext] =\n createRadioGroupContext<RadioGroupItemContextValue>(RADIO_GROUP_NAME)\n\nconst RadioGroupItemFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_ITEM_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n borderRadius: 1000,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 1,\n borderColor: '$borderColor',\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (value, { props }) => {\n const size = Math.floor(\n getVariableValue(getSize(value)) * (props['scaleSize'] ?? 0.5)\n )\n return {\n width: size,\n height: size,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioGroupItemProps = GetProps<typeof RadioGroupItemFrame> & {\n value: string\n id?: string\n labelledBy?: string\n disabled?: boolean\n}\n\ntype RadioGroupItemElement = HTMLButtonElement\n\ntype ScopedRadioGroupItemProps<P> = P & {\n __scopeRadioGroupItem?: Scope\n}\n\nconst RadioGroupItem = RadioGroupItemFrame.extractable(\n React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(\n (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value,\n labelledBy: ariaLabelledby,\n disabled: itemDisabled,\n ...itemProps\n } = props\n const {\n value: groupValue,\n disabled,\n required,\n onChange,\n name,\n native,\n accentColor,\n } = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup)\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const ref = React.useRef<HTMLButtonElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node), ref)\n const isArrowKeyPressedRef = React.useRef(false)\n\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n\n const checked = groupValue === value\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n\n React.useEffect(() => {\n if (isWeb) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (ARROW_KEYS.includes(event.key)) {\n isArrowKeyPressedRef.current = true\n }\n }\n const handleKeyUp = () => (isArrowKeyPressedRef.current = false)\n document.addEventListener('keydown', handleKeyDown)\n document.addEventListener('keyup', handleKeyUp)\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.removeEventListener('keyup', handleKeyUp)\n }\n }\n }, [])\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focusAndSelect: () => {\n onChange?.(value)\n },\n focus: () => {},\n })\n }, [props.id, value])\n }\n\n const isDisabled = disabled || itemDisabled\n\n return (\n <RadioGroupItemProvider checked={checked} scope={__scopeRadioGroup}>\n {isWeb && native ? (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n id={props.id}\n accentColor={accentColor}\n />\n ) : (\n <>\n <RadioGroupItemFrame\n // theme={checked ? 'active' : undefined}\n data-state={getState(checked)}\n data-disabled={isDisabled ? '' : undefined}\n role=\"radio\"\n aria-labelledby={labelledBy}\n aria-checked={checked}\n aria-required={required}\n disabled={isDisabled}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value: value,\n })}\n // allow them to override all but the handlers that already compose:\n {...itemProps}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n if (!checked) {\n onChange?.(value)\n }\n\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if radio is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect radio updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n })}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault()\n }\n ),\n onFocus: composeEventHandlers(itemProps.onFocus, () => {\n /**\n * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n * and we need to \"check\" it in that case. We click it to \"check\" it (instead\n * of updating `context.value`) so that the radio change event fires.\n */\n if (isArrowKeyPressedRef.current)\n (ref.current as HTMLButtonElement)?.click()\n }),\n })}\n />\n {isFormControl && (\n <BubbleInput\n isHidden\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n />\n )}\n </>\n )}\n </RadioGroupItemProvider>\n )\n }\n )\n)\n\n/* -------------------------------------------------------------------------\n * BubbleInput\n * ------------------------------------------------------------------------ */\n\ninterface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n isHidden?: boolean\n accentColor?: string\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, accentColor, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"radio\"\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n aria-hidden={isHidden}\n style={{\n ...(isHidden\n ? {\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }\n : {\n appearance: 'auto',\n accentColor,\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------\n * RadioGroup\n * ----------------------------------------------------------------------- */\n\ntype ScopedProps<P> = P & { __scopeRadioGroup?: Scope }\n\ntype TamaguiElement = HTMLElement | View\n\ntype RadioGroupElement = TamaguiElement\n\nconst RadioGroupFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_NAME,\n\n variants: {\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n})\n\ntype RadioGroupProps = GetProps<typeof RadioGroupFrame> & {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n required?: boolean\n disabled?: boolean\n name?: string\n native?: boolean\n accentColor?: string\n}\n\nconst RadioGroup = withStaticProperties(\n RadioGroupFrame.extractable(\n React.forwardRef<RadioGroupElement, RadioGroupProps>(\n (props: ScopedProps<RadioGroupProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value: valueProp,\n defaultValue,\n onValueChange,\n disabled = false,\n required = false,\n name,\n orientation,\n native,\n accentColor,\n ...radioGroupProps\n } = props\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n return (\n <RadioGroupProvider\n scope={__scopeRadioGroup}\n value={value}\n required={required}\n onChange={setValue}\n disabled={disabled}\n name={name}\n native={native}\n accentColor={accentColor}\n >\n <RadioGroupFrame\n aria-valuetext={value}\n role=\"radiogroup\"\n aria-orientation={orientation}\n ref={forwardedRef}\n orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n {...radioGroupProps}\n />\n </RadioGroupProvider>\n )\n }\n )\n ),\n {\n Indicator: RadioIndicator,\n Item: RadioGroupItem,\n }\n)\n\nRadioGroup.displayName = RADIO_GROUP_NAME\n\nexport { createRadioGroupScope, RadioGroup }\nexport type { RadioGroupProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/RadioGroup.js
CHANGED
|
@@ -28,8 +28,8 @@ const RadioIndicatorFrame = styled(ThemeableStack, {
|
|
|
28
28
|
variants: {
|
|
29
29
|
unstyled: {
|
|
30
30
|
false: {
|
|
31
|
-
w: "
|
|
32
|
-
h: "
|
|
31
|
+
w: "40%",
|
|
32
|
+
h: "40%",
|
|
33
33
|
br: 1e3,
|
|
34
34
|
backgroundColor: "$color"
|
|
35
35
|
}
|
|
@@ -69,12 +69,16 @@ const RadioGroupItemFrame = styled(ThemeableStack, {
|
|
|
69
69
|
variants: {
|
|
70
70
|
unstyled: {
|
|
71
71
|
false: {
|
|
72
|
-
|
|
72
|
+
size: "$true",
|
|
73
|
+
borderRadius: 1e3,
|
|
73
74
|
backgroundColor: "$background",
|
|
74
75
|
alignItems: "center",
|
|
75
76
|
justifyContent: "center",
|
|
76
|
-
borderWidth:
|
|
77
|
-
borderColor: "
|
|
77
|
+
borderWidth: 1,
|
|
78
|
+
borderColor: "$borderColor",
|
|
79
|
+
hoverStyle: {
|
|
80
|
+
borderColor: "$borderColorHover"
|
|
81
|
+
},
|
|
78
82
|
focusStyle: {
|
|
79
83
|
borderColor: "$borderColorFocus"
|
|
80
84
|
}
|
|
@@ -93,7 +97,6 @@ const RadioGroupItemFrame = styled(ThemeableStack, {
|
|
|
93
97
|
}
|
|
94
98
|
},
|
|
95
99
|
defaultVariants: {
|
|
96
|
-
size: "$true",
|
|
97
100
|
unstyled: false
|
|
98
101
|
}
|
|
99
102
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/RadioGroup.tsx"],
|
|
4
|
-
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/radio-group/src/RadioGroup.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst RADIO_GROUP_NAME = 'RadioGroup'\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\nconst [createRadioGroupContext, createRadioGroupScope] =\n createContextScope(RADIO_GROUP_NAME)\ntype RadioGroupContextValue = {\n value?: string\n disabled?: boolean\n required?: boolean\n onChange?: (value: string) => void\n name?: string\n native?: boolean\n accentColor?: string\n}\nconst [RadioGroupProvider, useRadioGroupContext] =\n createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME)\n\nconst getState = (checked: boolean) => {\n return checked ? 'checked' : 'unchecked'\n}\n\n/* -------------------------------------------------------------------------\n * RadioIndicator\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'\n\nconst RadioIndicatorFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_INDICATOR_NAME,\n pointerEvents: 'none',\n\n variants: {\n unstyled: {\n false: {\n w: '60%',\n h: '60%',\n br: 1000,\n backgroundColor: '$color',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioIndicatorProps = GetProps<typeof RadioIndicatorFrame> & {\n forceMount?: boolean\n unstyled?: boolean\n}\n\ntype RadioIndicatorElement = TamaguiElement\n\nconst RadioIndicator = RadioIndicatorFrame.extractable(\n React.forwardRef<RadioIndicatorElement, RadioIndicatorProps>(\n (props: ScopedRadioGroupItemProps<RadioIndicatorProps>, forwardedRef) => {\n const { __scopeRadioGroupItem, forceMount, disabled, ...indicatorProps } = props\n const { checked } = useRadioGroupItemContext(\n RADIO_GROUP_INDICATOR_NAME,\n __scopeRadioGroupItem\n )\n\n if (forceMount || checked) {\n return (\n <RadioIndicatorFrame\n theme=\"active\"\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n\n return null\n }\n )\n)\n\nRadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------\n * RadioGroupItem\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'\n\ntype RadioGroupItemContextValue = {\n checked: boolean\n disabled?: boolean\n}\n\nconst [RadioGroupItemProvider, useRadioGroupItemContext] =\n createRadioGroupContext<RadioGroupItemContextValue>(RADIO_GROUP_NAME)\n\nconst RadioGroupItemFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_ITEM_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n borderRadius: 9999,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 2,\n borderColor: 'transparent',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (value, { props }) => {\n const size = Math.floor(\n getVariableValue(getSize(value)) * (props['scaleSize'] ?? 0.5)\n )\n return {\n width: size,\n height: size,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$true',\n unstyled: false,\n },\n})\n\ntype RadioGroupItemProps = GetProps<typeof RadioGroupItemFrame> & {\n value: string\n id?: string\n labelledBy?: string\n disabled?: boolean\n}\n\ntype RadioGroupItemElement = HTMLButtonElement\n\ntype ScopedRadioGroupItemProps<P> = P & {\n __scopeRadioGroupItem?: Scope\n}\n\nconst RadioGroupItem = RadioGroupItemFrame.extractable(\n React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(\n (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value,\n labelledBy: ariaLabelledby,\n disabled: itemDisabled,\n ...itemProps\n } = props\n const {\n value: groupValue,\n disabled,\n required,\n onChange,\n name,\n native,\n accentColor,\n } = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup)\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const ref = React.useRef<HTMLButtonElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node), ref)\n const isArrowKeyPressedRef = React.useRef(false)\n\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n\n const checked = groupValue === value\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n\n React.useEffect(() => {\n if (isWeb) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (ARROW_KEYS.includes(event.key)) {\n isArrowKeyPressedRef.current = true\n }\n }\n const handleKeyUp = () => (isArrowKeyPressedRef.current = false)\n document.addEventListener('keydown', handleKeyDown)\n document.addEventListener('keyup', handleKeyUp)\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.removeEventListener('keyup', handleKeyUp)\n }\n }\n }, [])\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focusAndSelect: () => {\n onChange?.(value)\n },\n focus: () => {},\n })\n }, [props.id, value])\n }\n\n const isDisabled = disabled || itemDisabled\n\n return (\n <RadioGroupItemProvider checked={checked} scope={__scopeRadioGroup}>\n {isWeb && native ? (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n id={props.id}\n accentColor={accentColor}\n />\n ) : (\n <>\n <RadioGroupItemFrame\n // theme={checked ? 'active' : undefined}\n data-state={getState(checked)}\n data-disabled={isDisabled ? '' : undefined}\n role=\"radio\"\n aria-labelledby={labelledBy}\n aria-checked={checked}\n aria-required={required}\n disabled={isDisabled}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value: value,\n })}\n // allow them to override all but the handlers that already compose:\n {...itemProps}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n if (!checked) {\n onChange?.(value)\n }\n\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if radio is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect radio updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n })}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault()\n }\n ),\n onFocus: composeEventHandlers(itemProps.onFocus, () => {\n /**\n * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n * and we need to \"check\" it in that case. We click it to \"check\" it (instead\n * of updating `context.value`) so that the radio change event fires.\n */\n if (isArrowKeyPressedRef.current)\n (ref.current as HTMLButtonElement)?.click()\n }),\n })}\n />\n {isFormControl && (\n <BubbleInput\n isHidden\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n />\n )}\n </>\n )}\n </RadioGroupItemProvider>\n )\n }\n )\n)\n\n/* -------------------------------------------------------------------------\n * BubbleInput\n * ------------------------------------------------------------------------ */\n\ninterface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n isHidden?: boolean\n accentColor?: string\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, accentColor, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"radio\"\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n aria-hidden={isHidden}\n style={{\n ...(isHidden\n ? {\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }\n : {\n appearance: 'auto',\n accentColor,\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------\n * RadioGroup\n * ----------------------------------------------------------------------- */\n\ntype ScopedProps<P> = P & { __scopeRadioGroup?: Scope }\n\ntype TamaguiElement = HTMLElement | View\n\ntype RadioGroupElement = TamaguiElement\n\nconst RadioGroupFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_NAME,\n\n variants: {\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n})\n\ntype RadioGroupProps = GetProps<typeof RadioGroupFrame> & {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n required?: boolean\n disabled?: boolean\n name?: string\n native?: boolean\n accentColor?: string\n}\n\nconst RadioGroup = withStaticProperties(\n RadioGroupFrame.extractable(\n React.forwardRef<RadioGroupElement, RadioGroupProps>(\n (props: ScopedProps<RadioGroupProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value: valueProp,\n defaultValue,\n onValueChange,\n disabled = false,\n required = false,\n name,\n orientation,\n native,\n accentColor,\n ...radioGroupProps\n } = props\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n return (\n <RadioGroupProvider\n scope={__scopeRadioGroup}\n value={value}\n required={required}\n onChange={setValue}\n disabled={disabled}\n name={name}\n native={native}\n accentColor={accentColor}\n >\n <RadioGroupFrame\n aria-valuetext={value}\n role=\"radiogroup\"\n aria-orientation={orientation}\n ref={forwardedRef}\n orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n {...radioGroupProps}\n />\n </RadioGroupProvider>\n )\n }\n )\n ),\n {\n Indicator: RadioIndicator,\n Item: RadioGroupItem,\n }\n)\n\nRadioGroup.displayName = RADIO_GROUP_NAME\n\nexport { createRadioGroupScope, RadioGroup }\nexport type { RadioGroupProps }\n"],
|
|
5
|
-
"mappings": "AAGA,SAAS,mBAAmB;AAC5B;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,0BAA0B;AAC1C,SAAS,yBAAyB;AAClC,SAAS,eAAkC;AAC3C,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAGvB,MAAM,mBAAmB;AAEzB,MAAM,aAAa,CAAC,WAAW,aAAa,aAAa,YAAY;AAErE,MAAM,CAAC,yBAAyB,qBAAqB,IACnD,mBAAmB,gBAAgB;AAUrC,MAAM,CAAC,oBAAoB,oBAAoB,IAC7C,wBAAgD,gBAAgB;AAElE,MAAM,WAAW,CAAC,YAAqB;AACrC,SAAO,UAAU,YAAY;AAC/B;AAMA,MAAM,6BAA6B;AAEnC,MAAM,sBAAsB,OAAO,gBAAgB;AAAA,EACjD,MAAM;AAAA,EACN,eAAe;AAAA,EAEf,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AASD,MAAM,iBAAiB,oBAAoB;AAAA,EACzC,MAAM;AAAA,IACJ,CAAC,OAAuD,iBAAiB;AACvE,YAAM,EAAE,uBAAuB,YAAY,UAAU,GAAG,eAAe,IAAI;AAC3E,YAAM,EAAE,QAAQ,IAAI;AAAA,QAClB;AAAA,QACA;AAAA,MACF;AAEA,UAAI,cAAc,SAAS;AACzB,eACE,CAAC;AAAA,UACC,MAAM;AAAA,UACN,YAAY,SAAS,OAAO;AAAA,UAC5B,eAAe,WAAW,KAAK;AAAA,cAC3B;AAAA,UACJ,KAAK;AAAA,QACP;AAAA,MAEJ;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,eAAe,cAAc;AAM7B,MAAM,wBAAwB;AAO9B,MAAM,CAAC,wBAAwB,wBAAwB,IACrD,wBAAoD,gBAAgB;AAEtE,MAAM,sBAAsB,OAAO,gBAAgB;AAAA,EACjD,MAAM;AAAA,EACN,KAAK;AAAA,EAEL,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,aAAa;AAAA,QAEb,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW,CAAC,OAAO,EAAE,MAAM,MAAM;AAC/B,cAAM,OAAO,KAAK;AAAA,UAChB,iBAAiB,QAAQ,KAAK,CAAC,KAAK,MAAM,WAAW,KAAK;AAAA,QAC5D;AACA,eAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,
|
|
4
|
+
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/radio-group/src/RadioGroup.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst RADIO_GROUP_NAME = 'RadioGroup'\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\nconst [createRadioGroupContext, createRadioGroupScope] =\n createContextScope(RADIO_GROUP_NAME)\ntype RadioGroupContextValue = {\n value?: string\n disabled?: boolean\n required?: boolean\n onChange?: (value: string) => void\n name?: string\n native?: boolean\n accentColor?: string\n}\nconst [RadioGroupProvider, useRadioGroupContext] =\n createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME)\n\nconst getState = (checked: boolean) => {\n return checked ? 'checked' : 'unchecked'\n}\n\n/* -------------------------------------------------------------------------\n * RadioIndicator\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'\n\nconst RadioIndicatorFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_INDICATOR_NAME,\n pointerEvents: 'none',\n\n variants: {\n unstyled: {\n false: {\n w: '40%',\n h: '40%',\n br: 1000,\n backgroundColor: '$color',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioIndicatorProps = GetProps<typeof RadioIndicatorFrame> & {\n forceMount?: boolean\n unstyled?: boolean\n}\n\ntype RadioIndicatorElement = TamaguiElement\n\nconst RadioIndicator = RadioIndicatorFrame.extractable(\n React.forwardRef<RadioIndicatorElement, RadioIndicatorProps>(\n (props: ScopedRadioGroupItemProps<RadioIndicatorProps>, forwardedRef) => {\n const { __scopeRadioGroupItem, forceMount, disabled, ...indicatorProps } = props\n const { checked } = useRadioGroupItemContext(\n RADIO_GROUP_INDICATOR_NAME,\n __scopeRadioGroupItem\n )\n\n if (forceMount || checked) {\n return (\n <RadioIndicatorFrame\n theme=\"active\"\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n\n return null\n }\n )\n)\n\nRadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------\n * RadioGroupItem\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'\n\ntype RadioGroupItemContextValue = {\n checked: boolean\n disabled?: boolean\n}\n\nconst [RadioGroupItemProvider, useRadioGroupItemContext] =\n createRadioGroupContext<RadioGroupItemContextValue>(RADIO_GROUP_NAME)\n\nconst RadioGroupItemFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_ITEM_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n borderRadius: 1000,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 1,\n borderColor: '$borderColor',\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (value, { props }) => {\n const size = Math.floor(\n getVariableValue(getSize(value)) * (props['scaleSize'] ?? 0.5)\n )\n return {\n width: size,\n height: size,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioGroupItemProps = GetProps<typeof RadioGroupItemFrame> & {\n value: string\n id?: string\n labelledBy?: string\n disabled?: boolean\n}\n\ntype RadioGroupItemElement = HTMLButtonElement\n\ntype ScopedRadioGroupItemProps<P> = P & {\n __scopeRadioGroupItem?: Scope\n}\n\nconst RadioGroupItem = RadioGroupItemFrame.extractable(\n React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(\n (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value,\n labelledBy: ariaLabelledby,\n disabled: itemDisabled,\n ...itemProps\n } = props\n const {\n value: groupValue,\n disabled,\n required,\n onChange,\n name,\n native,\n accentColor,\n } = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup)\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const ref = React.useRef<HTMLButtonElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node), ref)\n const isArrowKeyPressedRef = React.useRef(false)\n\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n\n const checked = groupValue === value\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n\n React.useEffect(() => {\n if (isWeb) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (ARROW_KEYS.includes(event.key)) {\n isArrowKeyPressedRef.current = true\n }\n }\n const handleKeyUp = () => (isArrowKeyPressedRef.current = false)\n document.addEventListener('keydown', handleKeyDown)\n document.addEventListener('keyup', handleKeyUp)\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.removeEventListener('keyup', handleKeyUp)\n }\n }\n }, [])\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focusAndSelect: () => {\n onChange?.(value)\n },\n focus: () => {},\n })\n }, [props.id, value])\n }\n\n const isDisabled = disabled || itemDisabled\n\n return (\n <RadioGroupItemProvider checked={checked} scope={__scopeRadioGroup}>\n {isWeb && native ? (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n id={props.id}\n accentColor={accentColor}\n />\n ) : (\n <>\n <RadioGroupItemFrame\n // theme={checked ? 'active' : undefined}\n data-state={getState(checked)}\n data-disabled={isDisabled ? '' : undefined}\n role=\"radio\"\n aria-labelledby={labelledBy}\n aria-checked={checked}\n aria-required={required}\n disabled={isDisabled}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value: value,\n })}\n // allow them to override all but the handlers that already compose:\n {...itemProps}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n if (!checked) {\n onChange?.(value)\n }\n\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if radio is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect radio updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n })}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault()\n }\n ),\n onFocus: composeEventHandlers(itemProps.onFocus, () => {\n /**\n * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n * and we need to \"check\" it in that case. We click it to \"check\" it (instead\n * of updating `context.value`) so that the radio change event fires.\n */\n if (isArrowKeyPressedRef.current)\n (ref.current as HTMLButtonElement)?.click()\n }),\n })}\n />\n {isFormControl && (\n <BubbleInput\n isHidden\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n />\n )}\n </>\n )}\n </RadioGroupItemProvider>\n )\n }\n )\n)\n\n/* -------------------------------------------------------------------------\n * BubbleInput\n * ------------------------------------------------------------------------ */\n\ninterface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n isHidden?: boolean\n accentColor?: string\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, accentColor, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"radio\"\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n aria-hidden={isHidden}\n style={{\n ...(isHidden\n ? {\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }\n : {\n appearance: 'auto',\n accentColor,\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------\n * RadioGroup\n * ----------------------------------------------------------------------- */\n\ntype ScopedProps<P> = P & { __scopeRadioGroup?: Scope }\n\ntype TamaguiElement = HTMLElement | View\n\ntype RadioGroupElement = TamaguiElement\n\nconst RadioGroupFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_NAME,\n\n variants: {\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n})\n\ntype RadioGroupProps = GetProps<typeof RadioGroupFrame> & {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n required?: boolean\n disabled?: boolean\n name?: string\n native?: boolean\n accentColor?: string\n}\n\nconst RadioGroup = withStaticProperties(\n RadioGroupFrame.extractable(\n React.forwardRef<RadioGroupElement, RadioGroupProps>(\n (props: ScopedProps<RadioGroupProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value: valueProp,\n defaultValue,\n onValueChange,\n disabled = false,\n required = false,\n name,\n orientation,\n native,\n accentColor,\n ...radioGroupProps\n } = props\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n return (\n <RadioGroupProvider\n scope={__scopeRadioGroup}\n value={value}\n required={required}\n onChange={setValue}\n disabled={disabled}\n name={name}\n native={native}\n accentColor={accentColor}\n >\n <RadioGroupFrame\n aria-valuetext={value}\n role=\"radiogroup\"\n aria-orientation={orientation}\n ref={forwardedRef}\n orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n {...radioGroupProps}\n />\n </RadioGroupProvider>\n )\n }\n )\n ),\n {\n Indicator: RadioIndicator,\n Item: RadioGroupItem,\n }\n)\n\nRadioGroup.displayName = RADIO_GROUP_NAME\n\nexport { createRadioGroupScope, RadioGroup }\nexport type { RadioGroupProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/RadioGroup.mjs
CHANGED
|
@@ -28,8 +28,8 @@ const RadioIndicatorFrame = styled(ThemeableStack, {
|
|
|
28
28
|
variants: {
|
|
29
29
|
unstyled: {
|
|
30
30
|
false: {
|
|
31
|
-
w: "
|
|
32
|
-
h: "
|
|
31
|
+
w: "40%",
|
|
32
|
+
h: "40%",
|
|
33
33
|
br: 1e3,
|
|
34
34
|
backgroundColor: "$color"
|
|
35
35
|
}
|
|
@@ -69,12 +69,16 @@ const RadioGroupItemFrame = styled(ThemeableStack, {
|
|
|
69
69
|
variants: {
|
|
70
70
|
unstyled: {
|
|
71
71
|
false: {
|
|
72
|
-
|
|
72
|
+
size: "$true",
|
|
73
|
+
borderRadius: 1e3,
|
|
73
74
|
backgroundColor: "$background",
|
|
74
75
|
alignItems: "center",
|
|
75
76
|
justifyContent: "center",
|
|
76
|
-
borderWidth:
|
|
77
|
-
borderColor: "
|
|
77
|
+
borderWidth: 1,
|
|
78
|
+
borderColor: "$borderColor",
|
|
79
|
+
hoverStyle: {
|
|
80
|
+
borderColor: "$borderColorHover"
|
|
81
|
+
},
|
|
78
82
|
focusStyle: {
|
|
79
83
|
borderColor: "$borderColorFocus"
|
|
80
84
|
}
|
|
@@ -93,7 +97,6 @@ const RadioGroupItemFrame = styled(ThemeableStack, {
|
|
|
93
97
|
}
|
|
94
98
|
},
|
|
95
99
|
defaultVariants: {
|
|
96
|
-
size: "$true",
|
|
97
100
|
unstyled: false
|
|
98
101
|
}
|
|
99
102
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/RadioGroup.tsx"],
|
|
4
|
-
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/radio-group/src/RadioGroup.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst RADIO_GROUP_NAME = 'RadioGroup'\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\nconst [createRadioGroupContext, createRadioGroupScope] =\n createContextScope(RADIO_GROUP_NAME)\ntype RadioGroupContextValue = {\n value?: string\n disabled?: boolean\n required?: boolean\n onChange?: (value: string) => void\n name?: string\n native?: boolean\n accentColor?: string\n}\nconst [RadioGroupProvider, useRadioGroupContext] =\n createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME)\n\nconst getState = (checked: boolean) => {\n return checked ? 'checked' : 'unchecked'\n}\n\n/* -------------------------------------------------------------------------\n * RadioIndicator\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'\n\nconst RadioIndicatorFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_INDICATOR_NAME,\n pointerEvents: 'none',\n\n variants: {\n unstyled: {\n false: {\n w: '60%',\n h: '60%',\n br: 1000,\n backgroundColor: '$color',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioIndicatorProps = GetProps<typeof RadioIndicatorFrame> & {\n forceMount?: boolean\n unstyled?: boolean\n}\n\ntype RadioIndicatorElement = TamaguiElement\n\nconst RadioIndicator = RadioIndicatorFrame.extractable(\n React.forwardRef<RadioIndicatorElement, RadioIndicatorProps>(\n (props: ScopedRadioGroupItemProps<RadioIndicatorProps>, forwardedRef) => {\n const { __scopeRadioGroupItem, forceMount, disabled, ...indicatorProps } = props\n const { checked } = useRadioGroupItemContext(\n RADIO_GROUP_INDICATOR_NAME,\n __scopeRadioGroupItem\n )\n\n if (forceMount || checked) {\n return (\n <RadioIndicatorFrame\n theme=\"active\"\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n\n return null\n }\n )\n)\n\nRadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------\n * RadioGroupItem\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'\n\ntype RadioGroupItemContextValue = {\n checked: boolean\n disabled?: boolean\n}\n\nconst [RadioGroupItemProvider, useRadioGroupItemContext] =\n createRadioGroupContext<RadioGroupItemContextValue>(RADIO_GROUP_NAME)\n\nconst RadioGroupItemFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_ITEM_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n borderRadius: 9999,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 2,\n borderColor: 'transparent',\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (value, { props }) => {\n const size = Math.floor(\n getVariableValue(getSize(value)) * (props['scaleSize'] ?? 0.5)\n )\n return {\n width: size,\n height: size,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n size: '$true',\n unstyled: false,\n },\n})\n\ntype RadioGroupItemProps = GetProps<typeof RadioGroupItemFrame> & {\n value: string\n id?: string\n labelledBy?: string\n disabled?: boolean\n}\n\ntype RadioGroupItemElement = HTMLButtonElement\n\ntype ScopedRadioGroupItemProps<P> = P & {\n __scopeRadioGroupItem?: Scope\n}\n\nconst RadioGroupItem = RadioGroupItemFrame.extractable(\n React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(\n (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value,\n labelledBy: ariaLabelledby,\n disabled: itemDisabled,\n ...itemProps\n } = props\n const {\n value: groupValue,\n disabled,\n required,\n onChange,\n name,\n native,\n accentColor,\n } = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup)\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const ref = React.useRef<HTMLButtonElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node), ref)\n const isArrowKeyPressedRef = React.useRef(false)\n\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n\n const checked = groupValue === value\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n\n React.useEffect(() => {\n if (isWeb) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (ARROW_KEYS.includes(event.key)) {\n isArrowKeyPressedRef.current = true\n }\n }\n const handleKeyUp = () => (isArrowKeyPressedRef.current = false)\n document.addEventListener('keydown', handleKeyDown)\n document.addEventListener('keyup', handleKeyUp)\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.removeEventListener('keyup', handleKeyUp)\n }\n }\n }, [])\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focusAndSelect: () => {\n onChange?.(value)\n },\n focus: () => {},\n })\n }, [props.id, value])\n }\n\n const isDisabled = disabled || itemDisabled\n\n return (\n <RadioGroupItemProvider checked={checked} scope={__scopeRadioGroup}>\n {isWeb && native ? (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n id={props.id}\n accentColor={accentColor}\n />\n ) : (\n <>\n <RadioGroupItemFrame\n // theme={checked ? 'active' : undefined}\n data-state={getState(checked)}\n data-disabled={isDisabled ? '' : undefined}\n role=\"radio\"\n aria-labelledby={labelledBy}\n aria-checked={checked}\n aria-required={required}\n disabled={isDisabled}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value: value,\n })}\n // allow them to override all but the handlers that already compose:\n {...itemProps}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n if (!checked) {\n onChange?.(value)\n }\n\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if radio is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect radio updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n })}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault()\n }\n ),\n onFocus: composeEventHandlers(itemProps.onFocus, () => {\n /**\n * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n * and we need to \"check\" it in that case. We click it to \"check\" it (instead\n * of updating `context.value`) so that the radio change event fires.\n */\n if (isArrowKeyPressedRef.current)\n (ref.current as HTMLButtonElement)?.click()\n }),\n })}\n />\n {isFormControl && (\n <BubbleInput\n isHidden\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n />\n )}\n </>\n )}\n </RadioGroupItemProvider>\n )\n }\n )\n)\n\n/* -------------------------------------------------------------------------\n * BubbleInput\n * ------------------------------------------------------------------------ */\n\ninterface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n isHidden?: boolean\n accentColor?: string\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, accentColor, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"radio\"\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n aria-hidden={isHidden}\n style={{\n ...(isHidden\n ? {\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }\n : {\n appearance: 'auto',\n accentColor,\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------\n * RadioGroup\n * ----------------------------------------------------------------------- */\n\ntype ScopedProps<P> = P & { __scopeRadioGroup?: Scope }\n\ntype TamaguiElement = HTMLElement | View\n\ntype RadioGroupElement = TamaguiElement\n\nconst RadioGroupFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_NAME,\n\n variants: {\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n})\n\ntype RadioGroupProps = GetProps<typeof RadioGroupFrame> & {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n required?: boolean\n disabled?: boolean\n name?: string\n native?: boolean\n accentColor?: string\n}\n\nconst RadioGroup = withStaticProperties(\n RadioGroupFrame.extractable(\n React.forwardRef<RadioGroupElement, RadioGroupProps>(\n (props: ScopedProps<RadioGroupProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value: valueProp,\n defaultValue,\n onValueChange,\n disabled = false,\n required = false,\n name,\n orientation,\n native,\n accentColor,\n ...radioGroupProps\n } = props\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n return (\n <RadioGroupProvider\n scope={__scopeRadioGroup}\n value={value}\n required={required}\n onChange={setValue}\n disabled={disabled}\n name={name}\n native={native}\n accentColor={accentColor}\n >\n <RadioGroupFrame\n aria-valuetext={value}\n role=\"radiogroup\"\n aria-orientation={orientation}\n ref={forwardedRef}\n orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n {...radioGroupProps}\n />\n </RadioGroupProvider>\n )\n }\n )\n ),\n {\n Indicator: RadioIndicator,\n Item: RadioGroupItem,\n }\n)\n\nRadioGroup.displayName = RADIO_GROUP_NAME\n\nexport { createRadioGroupScope, RadioGroup }\nexport type { RadioGroupProps }\n"],
|
|
5
|
-
"mappings": "AAGA,SAAS,mBAAmB;AAC5B;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,0BAA0B;AAC1C,SAAS,yBAAyB;AAClC,SAAS,eAAkC;AAC3C,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAGvB,MAAM,mBAAmB;AAEzB,MAAM,aAAa,CAAC,WAAW,aAAa,aAAa,YAAY;AAErE,MAAM,CAAC,yBAAyB,qBAAqB,IACnD,mBAAmB,gBAAgB;AAUrC,MAAM,CAAC,oBAAoB,oBAAoB,IAC7C,wBAAgD,gBAAgB;AAElE,MAAM,WAAW,CAAC,YAAqB;AACrC,SAAO,UAAU,YAAY;AAC/B;AAMA,MAAM,6BAA6B;AAEnC,MAAM,sBAAsB,OAAO,gBAAgB;AAAA,EACjD,MAAM;AAAA,EACN,eAAe;AAAA,EAEf,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AASD,MAAM,iBAAiB,oBAAoB;AAAA,EACzC,MAAM;AAAA,IACJ,CAAC,OAAuD,iBAAiB;AACvE,YAAM,EAAE,uBAAuB,YAAY,UAAU,GAAG,eAAe,IAAI;AAC3E,YAAM,EAAE,QAAQ,IAAI;AAAA,QAClB;AAAA,QACA;AAAA,MACF;AAEA,UAAI,cAAc,SAAS;AACzB,eACE,CAAC;AAAA,UACC,MAAM;AAAA,UACN,YAAY,SAAS,OAAO;AAAA,UAC5B,eAAe,WAAW,KAAK;AAAA,cAC3B;AAAA,UACJ,KAAK;AAAA,QACP;AAAA,MAEJ;AAEA,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,eAAe,cAAc;AAM7B,MAAM,wBAAwB;AAO9B,MAAM,CAAC,wBAAwB,wBAAwB,IACrD,wBAAoD,gBAAgB;AAEtE,MAAM,sBAAsB,OAAO,gBAAgB;AAAA,EACjD,MAAM;AAAA,EACN,KAAK;AAAA,EAEL,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,aAAa;AAAA,QAEb,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW,CAAC,OAAO,EAAE,MAAM,MAAM;AAC/B,cAAM,OAAO,KAAK;AAAA,UAChB,iBAAiB,QAAQ,KAAK,CAAC,KAAK,MAAM,WAAW,KAAK;AAAA,QAC5D;AACA,eAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,
|
|
4
|
+
"sourcesContent": ["// forked from Radix UI\n// https://github.com/radix-ui/primitives/blob/main/packages/react/radio-group/src/RadioGroup.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n withStaticProperties,\n} from '@tamagui/core'\nimport { Scope, createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nconst RADIO_GROUP_NAME = 'RadioGroup'\n\nconst ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\n\nconst [createRadioGroupContext, createRadioGroupScope] =\n createContextScope(RADIO_GROUP_NAME)\ntype RadioGroupContextValue = {\n value?: string\n disabled?: boolean\n required?: boolean\n onChange?: (value: string) => void\n name?: string\n native?: boolean\n accentColor?: string\n}\nconst [RadioGroupProvider, useRadioGroupContext] =\n createRadioGroupContext<RadioGroupContextValue>(RADIO_GROUP_NAME)\n\nconst getState = (checked: boolean) => {\n return checked ? 'checked' : 'unchecked'\n}\n\n/* -------------------------------------------------------------------------\n * RadioIndicator\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator'\n\nconst RadioIndicatorFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_INDICATOR_NAME,\n pointerEvents: 'none',\n\n variants: {\n unstyled: {\n false: {\n w: '40%',\n h: '40%',\n br: 1000,\n backgroundColor: '$color',\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioIndicatorProps = GetProps<typeof RadioIndicatorFrame> & {\n forceMount?: boolean\n unstyled?: boolean\n}\n\ntype RadioIndicatorElement = TamaguiElement\n\nconst RadioIndicator = RadioIndicatorFrame.extractable(\n React.forwardRef<RadioIndicatorElement, RadioIndicatorProps>(\n (props: ScopedRadioGroupItemProps<RadioIndicatorProps>, forwardedRef) => {\n const { __scopeRadioGroupItem, forceMount, disabled, ...indicatorProps } = props\n const { checked } = useRadioGroupItemContext(\n RADIO_GROUP_INDICATOR_NAME,\n __scopeRadioGroupItem\n )\n\n if (forceMount || checked) {\n return (\n <RadioIndicatorFrame\n theme=\"active\"\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n {...indicatorProps}\n ref={forwardedRef}\n />\n )\n }\n\n return null\n }\n )\n)\n\nRadioIndicator.displayName = RADIO_GROUP_INDICATOR_NAME\n\n/* -------------------------------------------------------------------------\n * RadioGroupItem\n * ------------------------------------------------------------------------ */\n\nconst RADIO_GROUP_ITEM_NAME = 'RadioGroupItem'\n\ntype RadioGroupItemContextValue = {\n checked: boolean\n disabled?: boolean\n}\n\nconst [RadioGroupItemProvider, useRadioGroupItemContext] =\n createRadioGroupContext<RadioGroupItemContextValue>(RADIO_GROUP_NAME)\n\nconst RadioGroupItemFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_ITEM_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n borderRadius: 1000,\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n borderWidth: 1,\n borderColor: '$borderColor',\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (value, { props }) => {\n const size = Math.floor(\n getVariableValue(getSize(value)) * (props['scaleSize'] ?? 0.5)\n )\n return {\n width: size,\n height: size,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype RadioGroupItemProps = GetProps<typeof RadioGroupItemFrame> & {\n value: string\n id?: string\n labelledBy?: string\n disabled?: boolean\n}\n\ntype RadioGroupItemElement = HTMLButtonElement\n\ntype ScopedRadioGroupItemProps<P> = P & {\n __scopeRadioGroupItem?: Scope\n}\n\nconst RadioGroupItem = RadioGroupItemFrame.extractable(\n React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(\n (props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value,\n labelledBy: ariaLabelledby,\n disabled: itemDisabled,\n ...itemProps\n } = props\n const {\n value: groupValue,\n disabled,\n required,\n onChange,\n name,\n native,\n accentColor,\n } = useRadioGroupContext(RADIO_GROUP_ITEM_NAME, __scopeRadioGroup)\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const ref = React.useRef<HTMLButtonElement>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node), ref)\n const isArrowKeyPressedRef = React.useRef(false)\n\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n\n const checked = groupValue === value\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\n\n React.useEffect(() => {\n if (isWeb) {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (ARROW_KEYS.includes(event.key)) {\n isArrowKeyPressedRef.current = true\n }\n }\n const handleKeyUp = () => (isArrowKeyPressedRef.current = false)\n document.addEventListener('keydown', handleKeyDown)\n document.addEventListener('keyup', handleKeyUp)\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n document.removeEventListener('keyup', handleKeyUp)\n }\n }\n }, [])\n\n if (process.env.TAMAGUI_TARGET === 'native') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (!props.id) return\n return registerFocusable(props.id, {\n focusAndSelect: () => {\n onChange?.(value)\n },\n focus: () => {},\n })\n }, [props.id, value])\n }\n\n const isDisabled = disabled || itemDisabled\n\n return (\n <RadioGroupItemProvider checked={checked} scope={__scopeRadioGroup}>\n {isWeb && native ? (\n <BubbleInput\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n id={props.id}\n accentColor={accentColor}\n />\n ) : (\n <>\n <RadioGroupItemFrame\n // theme={checked ? 'active' : undefined}\n data-state={getState(checked)}\n data-disabled={isDisabled ? '' : undefined}\n role=\"radio\"\n aria-labelledby={labelledBy}\n aria-checked={checked}\n aria-required={required}\n disabled={isDisabled}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value: value,\n })}\n // allow them to override all but the handlers that already compose:\n {...itemProps}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n if (!checked) {\n onChange?.(value)\n }\n\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if radio is in a form, stop propagation from the button so that we only propagate\n // one click event (from the input). We propagate changes from an input so that native\n // form validation works and form events reflect radio updates.\n if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()\n }\n })}\n {...(isWeb && {\n onKeyDown: composeEventHandlers(\n (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,\n (event) => {\n // According to WAI ARIA, Checkboxes don't activate on enter keypress\n if (event.key === 'Enter') event.preventDefault()\n }\n ),\n onFocus: composeEventHandlers(itemProps.onFocus, () => {\n /**\n * Our `RovingFocusGroup` will focus the radio when navigating with arrow keys\n * and we need to \"check\" it in that case. We click it to \"check\" it (instead\n * of updating `context.value`) so that the radio change event fires.\n */\n if (isArrowKeyPressedRef.current)\n (ref.current as HTMLButtonElement)?.click()\n }),\n })}\n />\n {isFormControl && (\n <BubbleInput\n isHidden\n control={button}\n bubbles={!hasConsumerStoppedPropagationRef.current}\n name={name}\n value={value}\n checked={checked}\n required={required}\n disabled={isDisabled}\n />\n )}\n </>\n )}\n </RadioGroupItemProvider>\n )\n }\n )\n)\n\n/* -------------------------------------------------------------------------\n * BubbleInput\n * ------------------------------------------------------------------------ */\n\ninterface BubbleInputProps extends Omit<React.HTMLProps<HTMLInputElement>, 'checked'> {\n checked: boolean\n control: HTMLElement | null\n bubbles: boolean\n isHidden?: boolean\n accentColor?: string\n}\n\nconst BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, accentColor, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n\n // Bubble checked change to parents (e.g form change event)\n React.useEffect(() => {\n const input = ref.current!\n const inputProto = window.HTMLInputElement.prototype\n const descriptor = Object.getOwnPropertyDescriptor(\n inputProto,\n 'checked'\n ) as PropertyDescriptor\n const setChecked = descriptor.set\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n setChecked.call(input, checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"radio\"\n defaultChecked={checked}\n {...inputProps}\n tabIndex={-1}\n ref={ref}\n aria-hidden={isHidden}\n style={{\n ...(isHidden\n ? {\n // ...controlSize,\n position: 'absolute',\n pointerEvents: 'none',\n opacity: 0,\n margin: 0,\n }\n : {\n appearance: 'auto',\n accentColor,\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------\n * RadioGroup\n * ----------------------------------------------------------------------- */\n\ntype ScopedProps<P> = P & { __scopeRadioGroup?: Scope }\n\ntype TamaguiElement = HTMLElement | View\n\ntype RadioGroupElement = TamaguiElement\n\nconst RadioGroupFrame = styled(ThemeableStack, {\n name: RADIO_GROUP_NAME,\n\n variants: {\n orientation: {\n horizontal: {\n flexDirection: 'row',\n spaceDirection: 'horizontal',\n },\n vertical: {\n flexDirection: 'column',\n spaceDirection: 'vertical',\n },\n },\n } as const,\n})\n\ntype RadioGroupProps = GetProps<typeof RadioGroupFrame> & {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n required?: boolean\n disabled?: boolean\n name?: string\n native?: boolean\n accentColor?: string\n}\n\nconst RadioGroup = withStaticProperties(\n RadioGroupFrame.extractable(\n React.forwardRef<RadioGroupElement, RadioGroupProps>(\n (props: ScopedProps<RadioGroupProps>, forwardedRef) => {\n const {\n __scopeRadioGroup,\n value: valueProp,\n defaultValue,\n onValueChange,\n disabled = false,\n required = false,\n name,\n orientation,\n native,\n accentColor,\n ...radioGroupProps\n } = props\n const [value, setValue] = useControllableState({\n prop: valueProp,\n defaultProp: defaultValue!,\n onChange: onValueChange,\n })\n\n return (\n <RadioGroupProvider\n scope={__scopeRadioGroup}\n value={value}\n required={required}\n onChange={setValue}\n disabled={disabled}\n name={name}\n native={native}\n accentColor={accentColor}\n >\n <RadioGroupFrame\n aria-valuetext={value}\n role=\"radiogroup\"\n aria-orientation={orientation}\n ref={forwardedRef}\n orientation={orientation}\n data-disabled={disabled ? '' : undefined}\n {...radioGroupProps}\n />\n </RadioGroupProvider>\n )\n }\n )\n ),\n {\n Indicator: RadioIndicator,\n Item: RadioGroupItem,\n }\n)\n\nRadioGroup.displayName = RADIO_GROUP_NAME\n\nexport { createRadioGroupScope, RadioGroup }\nexport type { RadioGroupProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/radio-group",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.7",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -24,21 +24,21 @@
|
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@radix-ui/react-use-previous": "^0.1.1",
|
|
27
|
-
"@tamagui/compose-refs": "^1.5.
|
|
28
|
-
"@tamagui/core": "^1.5.
|
|
29
|
-
"@tamagui/create-context": "^1.5.
|
|
30
|
-
"@tamagui/focusable": "^1.5.
|
|
31
|
-
"@tamagui/get-size": "^1.5.
|
|
32
|
-
"@tamagui/label": "^1.5.
|
|
33
|
-
"@tamagui/stacks": "^1.5.
|
|
34
|
-
"@tamagui/use-controllable-state": "^1.5.
|
|
27
|
+
"@tamagui/compose-refs": "^1.5.7",
|
|
28
|
+
"@tamagui/core": "^1.5.7",
|
|
29
|
+
"@tamagui/create-context": "^1.5.7",
|
|
30
|
+
"@tamagui/focusable": "^1.5.7",
|
|
31
|
+
"@tamagui/get-size": "^1.5.7",
|
|
32
|
+
"@tamagui/label": "^1.5.7",
|
|
33
|
+
"@tamagui/stacks": "^1.5.7",
|
|
34
|
+
"@tamagui/use-controllable-state": "^1.5.7"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"react": "*",
|
|
38
38
|
"react-dom": "*"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@tamagui/build": "^1.5.
|
|
41
|
+
"@tamagui/build": "^1.5.7",
|
|
42
42
|
"react": "^18.2.0",
|
|
43
43
|
"react-dom": "^18.2.0"
|
|
44
44
|
},
|
package/src/RadioGroup.tsx
CHANGED
|
@@ -55,8 +55,8 @@ const RadioIndicatorFrame = styled(ThemeableStack, {
|
|
|
55
55
|
variants: {
|
|
56
56
|
unstyled: {
|
|
57
57
|
false: {
|
|
58
|
-
w: '
|
|
59
|
-
h: '
|
|
58
|
+
w: '40%',
|
|
59
|
+
h: '40%',
|
|
60
60
|
br: 1000,
|
|
61
61
|
backgroundColor: '$color',
|
|
62
62
|
},
|
|
@@ -124,12 +124,17 @@ const RadioGroupItemFrame = styled(ThemeableStack, {
|
|
|
124
124
|
variants: {
|
|
125
125
|
unstyled: {
|
|
126
126
|
false: {
|
|
127
|
-
|
|
127
|
+
size: '$true',
|
|
128
|
+
borderRadius: 1000,
|
|
128
129
|
backgroundColor: '$background',
|
|
129
130
|
alignItems: 'center',
|
|
130
131
|
justifyContent: 'center',
|
|
131
|
-
borderWidth:
|
|
132
|
-
borderColor: '
|
|
132
|
+
borderWidth: 1,
|
|
133
|
+
borderColor: '$borderColor',
|
|
134
|
+
|
|
135
|
+
hoverStyle: {
|
|
136
|
+
borderColor: '$borderColorHover',
|
|
137
|
+
},
|
|
133
138
|
|
|
134
139
|
focusStyle: {
|
|
135
140
|
borderColor: '$borderColorFocus',
|
|
@@ -151,7 +156,6 @@ const RadioGroupItemFrame = styled(ThemeableStack, {
|
|
|
151
156
|
} as const,
|
|
152
157
|
|
|
153
158
|
defaultVariants: {
|
|
154
|
-
size: '$true',
|
|
155
159
|
unstyled: false,
|
|
156
160
|
},
|
|
157
161
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,QAAQ,EAOT,MAAM,eAAe,CAAA;AAOtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAMnC,QAAA,MAAgC,qBAAqB,+CACf,CAAA;
|
|
1
|
+
{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,QAAQ,EAOT,MAAM,eAAe,CAAA;AAOtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAMnC,QAAA,MAAgC,qBAAqB,+CACf,CAAA;AAgXtC,KAAK,cAAc,GAAG,WAAW,GAAG,IAAI,CAAA;AAIxC,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAenB,CAAA;AAEF,KAAK,eAAe,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BARU,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAhQhC,MAAM;;;;;CA4Td,CAAA;AAID,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,CAAA;AAC5C,YAAY,EAAE,eAAe,EAAE,CAAA"}
|