@tamagui/radio-group 1.14.9 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/RadioGroup.js +4 -8
- package/dist/cjs/RadioGroup.js.map +2 -2
- package/dist/esm/RadioGroup.js +4 -8
- package/dist/esm/RadioGroup.js.map +2 -2
- package/dist/esm/RadioGroup.mjs +4 -8
- package/dist/esm/RadioGroup.mjs.map +2 -2
- package/dist/jsx/RadioGroup.js +4 -8
- package/dist/jsx/RadioGroup.js.map +2 -2
- package/dist/jsx/RadioGroup.mjs +4 -8
- package/dist/jsx/RadioGroup.mjs.map +2 -2
- package/package.json +11 -11
- package/src/RadioGroup.tsx +3 -7
- package/types/RadioGroup.d.ts.map +1 -1
package/dist/cjs/RadioGroup.js
CHANGED
|
@@ -55,14 +55,11 @@ const RadioIndicatorFrame = (0, import_core.styled)(import_stacks.ThemeableStack
|
|
|
55
55
|
variants: {
|
|
56
56
|
unstyled: {
|
|
57
57
|
false: {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
58
|
+
width: "33%",
|
|
59
|
+
height: "33%",
|
|
60
|
+
borderRadius: 1e3,
|
|
61
61
|
backgroundColor: "$color",
|
|
62
|
-
pressTheme: true
|
|
63
|
-
pressStyle: {
|
|
64
|
-
backgroundColor: "$colorTransparent"
|
|
65
|
-
}
|
|
62
|
+
pressTheme: true
|
|
66
63
|
}
|
|
67
64
|
}
|
|
68
65
|
},
|
|
@@ -82,7 +79,6 @@ const RadioIndicator = RadioIndicatorFrame.extractable(
|
|
|
82
79
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
83
80
|
RadioIndicatorFrame,
|
|
84
81
|
{
|
|
85
|
-
theme: "active",
|
|
86
82
|
"data-state": getState(checked),
|
|
87
83
|
"data-disabled": disabled ? "" : void 0,
|
|
88
84
|
...indicatorProps,
|
|
@@ -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\n variants: {\n unstyled: {\n false: {\n w: '40%',\n h: '40%',\n br: 1000,\n backgroundColor: '$color',\n pressTheme: true,\n pressStyle: {\n backgroundColor: '$colorTransparent',\n },\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 padding: 0,\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n pressStyle: {\n borderColor: '$borderColorFocus',\n background: '$backgroundFocus',\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
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\n variants: {\n unstyled: {\n false: {\n width: '33%',\n height: '33%',\n borderRadius: 1000,\n backgroundColor: '$color',\n pressTheme: true,\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 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 padding: 0,\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n pressStyle: {\n borderColor: '$borderColorFocus',\n background: '$backgroundFocus',\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
|
@@ -28,14 +28,11 @@ const RadioIndicatorFrame = styled(ThemeableStack, {
|
|
|
28
28
|
variants: {
|
|
29
29
|
unstyled: {
|
|
30
30
|
false: {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
width: "33%",
|
|
32
|
+
height: "33%",
|
|
33
|
+
borderRadius: 1e3,
|
|
34
34
|
backgroundColor: "$color",
|
|
35
|
-
pressTheme: true
|
|
36
|
-
pressStyle: {
|
|
37
|
-
backgroundColor: "$colorTransparent"
|
|
38
|
-
}
|
|
35
|
+
pressTheme: true
|
|
39
36
|
}
|
|
40
37
|
}
|
|
41
38
|
},
|
|
@@ -55,7 +52,6 @@ const RadioIndicator = RadioIndicatorFrame.extractable(
|
|
|
55
52
|
return /* @__PURE__ */ jsx(
|
|
56
53
|
RadioIndicatorFrame,
|
|
57
54
|
{
|
|
58
|
-
theme: "active",
|
|
59
55
|
"data-state": getState(checked),
|
|
60
56
|
"data-disabled": disabled ? "" : void 0,
|
|
61
57
|
...indicatorProps,
|
|
@@ -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\n variants: {\n unstyled: {\n false: {\n w: '40%',\n h: '40%',\n br: 1000,\n backgroundColor: '$color',\n pressTheme: true,\n pressStyle: {\n backgroundColor: '$colorTransparent',\n },\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 padding: 0,\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n pressStyle: {\n borderColor: '$borderColorFocus',\n background: '$backgroundFocus',\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": "
|
|
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\n variants: {\n unstyled: {\n false: {\n width: '33%',\n height: '33%',\n borderRadius: 1000,\n backgroundColor: '$color',\n pressTheme: true,\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 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 padding: 0,\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n pressStyle: {\n borderColor: '$borderColorFocus',\n background: '$backgroundFocus',\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
|
@@ -28,14 +28,11 @@ const RadioIndicatorFrame = styled(ThemeableStack, {
|
|
|
28
28
|
variants: {
|
|
29
29
|
unstyled: {
|
|
30
30
|
false: {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
width: "33%",
|
|
32
|
+
height: "33%",
|
|
33
|
+
borderRadius: 1e3,
|
|
34
34
|
backgroundColor: "$color",
|
|
35
|
-
pressTheme: true
|
|
36
|
-
pressStyle: {
|
|
37
|
-
backgroundColor: "$colorTransparent"
|
|
38
|
-
}
|
|
35
|
+
pressTheme: true
|
|
39
36
|
}
|
|
40
37
|
}
|
|
41
38
|
},
|
|
@@ -55,7 +52,6 @@ const RadioIndicator = RadioIndicatorFrame.extractable(
|
|
|
55
52
|
return /* @__PURE__ */ jsx(
|
|
56
53
|
RadioIndicatorFrame,
|
|
57
54
|
{
|
|
58
|
-
theme: "active",
|
|
59
55
|
"data-state": getState(checked),
|
|
60
56
|
"data-disabled": disabled ? "" : void 0,
|
|
61
57
|
...indicatorProps,
|
|
@@ -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\n variants: {\n unstyled: {\n false: {\n w: '40%',\n h: '40%',\n br: 1000,\n backgroundColor: '$color',\n pressTheme: true,\n pressStyle: {\n backgroundColor: '$colorTransparent',\n },\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 padding: 0,\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n pressStyle: {\n borderColor: '$borderColorFocus',\n background: '$backgroundFocus',\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": "
|
|
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\n variants: {\n unstyled: {\n false: {\n width: '33%',\n height: '33%',\n borderRadius: 1000,\n backgroundColor: '$color',\n pressTheme: true,\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 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 padding: 0,\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n pressStyle: {\n borderColor: '$borderColorFocus',\n background: '$backgroundFocus',\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": "AAwFU,SAiLE,UAjLF,KAiLE,YAjLF;AArFV,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,EAEN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,YAAY;AAAA,MACd;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,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,sBAAsB,OAAO,gBAAgB;AAAA,EACjD,MAAM;AAAA,EACN,KAAK;AAAA,EAEL,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,aAAa;AAAA,QACb,SAAS;AAAA,QAET,YAAY;AAAA,UACV,aAAa;AAAA,UACb,YAAY;AAAA,QACd;AAAA,QAEA,YAAY;AAAA,UACV,aAAa;AAAA,UACb,YAAY;AAAA,QACd;AAAA,QAEA,YAAY;AAAA,UACV,aAAa;AAAA,UACb,YAAY;AAAA,QACd;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,UAAU;AAAA,EACZ;AACF,CAAC;AAeD,MAAM,iBAAiB,oBAAoB;AAAA,EACzC,MAAM;AAAA,IACJ,CAAC,OAAyC,iBAAiB;AACzD,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,GAAG;AAAA,MACL,IAAI;AACJ,YAAM;AAAA,QACJ,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,IAAI,qBAAqB,uBAAuB,iBAAiB;AACjE,YAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmC,IAAI;AACzE,YAAM,mCAAmC,MAAM,OAAO,KAAK;AAC3D,YAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,YAAM,eAAe,gBAAgB,cAAc,CAAC,SAAS,UAAU,IAAI,GAAG,GAAG;AACjF,YAAM,uBAAuB,MAAM,OAAO,KAAK;AAE/C,YAAM,gBAAgB,QAClB,SACE,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAC9B,OACF;AAEJ,YAAM,UAAU,eAAe;AAE/B,YAAM,UAAU,gBAAgB,MAAM;AACtC,YAAM,aAAa,kBAAkB;AAErC,YAAM,UAAU,MAAM;AACpB,YAAI,OAAO;AACT,gBAAM,gBAAgB,CAAC,UAAyB;AAC9C,gBAAI,WAAW,SAAS,MAAM,GAAG,GAAG;AAClC,mCAAqB,UAAU;AAAA,YACjC;AAAA,UACF;AACA,gBAAM,cAAc,MAAO,qBAAqB,UAAU;AAC1D,mBAAS,iBAAiB,WAAW,aAAa;AAClD,mBAAS,iBAAiB,SAAS,WAAW;AAC9C,iBAAO,MAAM;AACX,qBAAS,oBAAoB,WAAW,aAAa;AACrD,qBAAS,oBAAoB,SAAS,WAAW;AAAA,UACnD;AAAA,QACF;AAAA,MACF,GAAG,CAAC,CAAC;AAEL,UAAI,QAAQ,IAAI,mBAAmB,UAAU;AAE3C,cAAM,UAAU,MAAM;AACpB,cAAI,CAAC,MAAM;AAAI;AACf,iBAAO,kBAAkB,MAAM,IAAI;AAAA,YACjC,gBAAgB,MAAM;AACpB,mDAAW;AAAA,YACb;AAAA,YACA,OAAO,MAAM;AAAA,YAAC;AAAA,UAChB,CAAC;AAAA,QACH,GAAG,CAAC,MAAM,IAAI,KAAK,CAAC;AAAA,MACtB;AAEA,YAAM,aAAa,YAAY;AAE/B,aACE,oBAAC,0BAAuB,SAAkB,OAAO,mBAC9C,mBAAS,SACR;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,SAAS,CAAC,iCAAiC;AAAA,UAC3C;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,IAAI,MAAM;AAAA,UACV;AAAA;AAAA,MACF,IAEA,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YAEC,cAAY,SAAS,OAAO;AAAA,YAC5B,iBAAe,aAAa,KAAK;AAAA,YACjC,MAAK;AAAA,YACL,mBAAiB;AAAA,YACjB,gBAAc;AAAA,YACd,iBAAe;AAAA,YACf,UAAU;AAAA,YACV,KAAK;AAAA,YACJ,GAAI,SAAS;AAAA,cACZ,MAAM;AAAA,cACN;AAAA,YACF;AAAA,YAEC,GAAG;AAAA,YACJ,SAAS,qBAAqB,MAAM,SAAgB,CAAC,UAAU;AAC7D,kBAAI,CAAC,SAAS;AACZ,qDAAW;AAAA,cACb;AAEA,kBAAI,eAAe;AACjB,iDAAiC,UAC/B,MAAM,qBAAqB;AAI7B,oBAAI,CAAC,iCAAiC;AAAS,wBAAM,gBAAgB;AAAA,cACvE;AAAA,YACF,CAAC;AAAA,YACA,GAAI,SAAS;AAAA,cACZ,WAAW;AAAA,gBACR,MAA6C;AAAA,gBAC9C,CAAC,UAAU;AAET,sBAAI,MAAM,QAAQ;AAAS,0BAAM,eAAe;AAAA,gBAClD;AAAA,cACF;AAAA,cACA,SAAS,qBAAqB,UAAU,SAAS,MAAM;AAhTzE;AAsToB,oBAAI,qBAAqB;AACvB,mBAAC,SAAI,YAAJ,mBAAmC;AAAA,cACxC,CAAC;AAAA,YACH;AAAA;AAAA,QACF;AAAA,QACC,iBACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAQ;AAAA,YACR,SAAS;AAAA,YACT,SAAS,CAAC,iCAAiC;AAAA,YAC3C;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA;AAAA,QACZ;AAAA,SAEJ,GAEJ;AAAA,IAEJ;AAAA,EACF;AACF;AAcA,MAAM,cAAc,CAAC,UAA4B;AAC/C,QAAM,EAAE,SAAS,UAAU,MAAM,SAAS,UAAU,aAAa,GAAG,WAAW,IAAI;AACnF,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,cAAc,YAAY,OAAO;AAGvC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,IAAI;AAClB,UAAM,aAAa,OAAO,iBAAiB;AAC3C,UAAM,aAAa,OAAO;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AACA,UAAM,aAAa,WAAW;AAC9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,iBAAW,KAAK,OAAO,OAAO;AAC9B,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAgB;AAAA,MACf,GAAG;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA,eAAa;AAAA,MACb,OAAO;AAAA,QACL,GAAI,WACA;AAAA;AAAA,UAEE,UAAU;AAAA,UACV,eAAe;AAAA,UACf,SAAS;AAAA,UACT,QAAQ;AAAA,QACV,IACA;AAAA,UACE,YAAY;AAAA,UACZ;AAAA,QACF;AAAA,QAEJ,GAAG,MAAM;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;AAYA,MAAM,kBAAkB,OAAO,gBAAgB;AAAA,EAC7C,MAAM;AAAA,EAEN,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY;AAAA,QACV,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAaD,MAAM,aAAa;AAAA,EACjB,gBAAgB;AAAA,IACd,MAAM;AAAA,MACJ,CAAC,OAAqC,iBAAiB;AACrD,cAAM;AAAA,UACJ;AAAA,UACA,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,WAAW;AAAA,UACX,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACL,IAAI;AACJ,cAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,UAC7C,MAAM;AAAA,UACN,aAAa;AAAA,UACb,UAAU;AAAA,QACZ,CAAC;AAED,eACE;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,kBAAgB;AAAA,gBAChB,MAAK;AAAA,gBACL,oBAAkB;AAAA,gBAClB,KAAK;AAAA,gBACL;AAAA,gBACA,iBAAe,WAAW,KAAK;AAAA,gBAC9B,GAAG;AAAA;AAAA,YACN;AAAA;AAAA,QACF;AAAA,MAEJ;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AACF;AAEA,WAAW,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/RadioGroup.js
CHANGED
|
@@ -27,14 +27,11 @@ const RadioIndicatorFrame = styled(ThemeableStack, {
|
|
|
27
27
|
variants: {
|
|
28
28
|
unstyled: {
|
|
29
29
|
false: {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
width: "33%",
|
|
31
|
+
height: "33%",
|
|
32
|
+
borderRadius: 1e3,
|
|
33
33
|
backgroundColor: "$color",
|
|
34
|
-
pressTheme: true
|
|
35
|
-
pressStyle: {
|
|
36
|
-
backgroundColor: "$colorTransparent"
|
|
37
|
-
}
|
|
34
|
+
pressTheme: true
|
|
38
35
|
}
|
|
39
36
|
}
|
|
40
37
|
},
|
|
@@ -52,7 +49,6 @@ const RadioIndicator = RadioIndicatorFrame.extractable(
|
|
|
52
49
|
);
|
|
53
50
|
if (forceMount || checked) {
|
|
54
51
|
return <RadioIndicatorFrame
|
|
55
|
-
theme="active"
|
|
56
52
|
data-state={getState(checked)}
|
|
57
53
|
data-disabled={disabled ? "" : void 0}
|
|
58
54
|
{...indicatorProps}
|
|
@@ -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\n variants: {\n unstyled: {\n false: {\n w: '40%',\n h: '40%',\n br: 1000,\n backgroundColor: '$color',\n pressTheme: true,\n pressStyle: {\n backgroundColor: '$colorTransparent',\n },\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 padding: 0,\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n pressStyle: {\n borderColor: '$borderColorFocus',\n background: '$backgroundFocus',\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": "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,EAEN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,
|
|
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\n variants: {\n unstyled: {\n false: {\n width: '33%',\n height: '33%',\n borderRadius: 1000,\n backgroundColor: '$color',\n pressTheme: true,\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 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 padding: 0,\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n pressStyle: {\n borderColor: '$borderColorFocus',\n background: '$backgroundFocus',\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
|
@@ -27,14 +27,11 @@ const RadioIndicatorFrame = styled(ThemeableStack, {
|
|
|
27
27
|
variants: {
|
|
28
28
|
unstyled: {
|
|
29
29
|
false: {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
width: "33%",
|
|
31
|
+
height: "33%",
|
|
32
|
+
borderRadius: 1e3,
|
|
33
33
|
backgroundColor: "$color",
|
|
34
|
-
pressTheme: true
|
|
35
|
-
pressStyle: {
|
|
36
|
-
backgroundColor: "$colorTransparent"
|
|
37
|
-
}
|
|
34
|
+
pressTheme: true
|
|
38
35
|
}
|
|
39
36
|
}
|
|
40
37
|
},
|
|
@@ -52,7 +49,6 @@ const RadioIndicator = RadioIndicatorFrame.extractable(
|
|
|
52
49
|
);
|
|
53
50
|
if (forceMount || checked) {
|
|
54
51
|
return <RadioIndicatorFrame
|
|
55
|
-
theme="active"
|
|
56
52
|
data-state={getState(checked)}
|
|
57
53
|
data-disabled={disabled ? "" : void 0}
|
|
58
54
|
{...indicatorProps}
|
|
@@ -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\n variants: {\n unstyled: {\n false: {\n w: '40%',\n h: '40%',\n br: 1000,\n backgroundColor: '$color',\n pressTheme: true,\n pressStyle: {\n backgroundColor: '$colorTransparent',\n },\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 padding: 0,\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n pressStyle: {\n borderColor: '$borderColorFocus',\n background: '$backgroundFocus',\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": "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,EAEN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,
|
|
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\n variants: {\n unstyled: {\n false: {\n width: '33%',\n height: '33%',\n borderRadius: 1000,\n backgroundColor: '$color',\n pressTheme: true,\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 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 padding: 0,\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorHover',\n background: '$backgroundHover',\n },\n\n pressStyle: {\n borderColor: '$borderColorFocus',\n background: '$backgroundFocus',\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": "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,EAEN,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,YAAY;AAAA,MACd;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,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,MAAM;AAAA,QACN,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,aAAa;AAAA,QACb,SAAS;AAAA,QAET,YAAY;AAAA,UACV,aAAa;AAAA,UACb,YAAY;AAAA,QACd;AAAA,QAEA,YAAY;AAAA,UACV,aAAa;AAAA,UACb,YAAY;AAAA,QACd;AAAA,QAEA,YAAY;AAAA,UACV,aAAa;AAAA,UACb,YAAY;AAAA,QACd;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,UAAU;AAAA,EACZ;AACF,CAAC;AAeD,MAAM,iBAAiB,oBAAoB;AAAA,EACzC,MAAM;AAAA,IACJ,CAAC,OAAyC,iBAAiB;AACzD,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,GAAG;AAAA,MACL,IAAI;AACJ,YAAM;AAAA,QACJ,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,IAAI,qBAAqB,uBAAuB,iBAAiB;AACjE,YAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmC,IAAI;AACzE,YAAM,mCAAmC,MAAM,OAAO,KAAK;AAC3D,YAAM,MAAM,MAAM,OAA0B,IAAI;AAChD,YAAM,eAAe,gBAAgB,cAAc,CAAC,SAAS,UAAU,IAAI,GAAG,GAAG;AACjF,YAAM,uBAAuB,MAAM,OAAO,KAAK;AAE/C,YAAM,gBAAgB,QAClB,SACE,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAC9B,OACF;AAEJ,YAAM,UAAU,eAAe;AAE/B,YAAM,UAAU,gBAAgB,MAAM;AACtC,YAAM,aAAa,kBAAkB;AAErC,YAAM,UAAU,MAAM;AACpB,YAAI,OAAO;AACT,gBAAM,gBAAgB,CAAC,UAAyB;AAC9C,gBAAI,WAAW,SAAS,MAAM,GAAG,GAAG;AAClC,mCAAqB,UAAU;AAAA,YACjC;AAAA,UACF;AACA,gBAAM,cAAc,MAAO,qBAAqB,UAAU;AAC1D,mBAAS,iBAAiB,WAAW,aAAa;AAClD,mBAAS,iBAAiB,SAAS,WAAW;AAC9C,iBAAO,MAAM;AACX,qBAAS,oBAAoB,WAAW,aAAa;AACrD,qBAAS,oBAAoB,SAAS,WAAW;AAAA,UACnD;AAAA,QACF;AAAA,MACF,GAAG,CAAC,CAAC;AAEL,UAAI,QAAQ,IAAI,mBAAmB,UAAU;AAE3C,cAAM,UAAU,MAAM;AACpB,cAAI,CAAC,MAAM;AAAI;AACf,iBAAO,kBAAkB,MAAM,IAAI;AAAA,YACjC,gBAAgB,MAAM;AACpB,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA,OAAO,MAAM;AAAA,YAAC;AAAA,UAChB,CAAC;AAAA,QACH,GAAG,CAAC,MAAM,IAAI,KAAK,CAAC;AAAA,MACtB;AAEA,YAAM,aAAa,YAAY;AAE/B,aACE,CAAC,uBAAuB,SAAS,SAAS,OAAO,oBAC9C,SAAS,SACR,CAAC;AAAA,QACC,SAAS;AAAA,QACT,SAAS,CAAC,iCAAiC;AAAA,QAC3C,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,IAAI,MAAM;AAAA,QACV,aAAa;AAAA,MACf,KAEA;AAAA,QACE,CAAC;AAAA,UAEC,YAAY,SAAS,OAAO;AAAA,UAC5B,eAAe,aAAa,KAAK;AAAA,UACjC,KAAK;AAAA,UACL,iBAAiB;AAAA,UACjB,cAAc;AAAA,UACd,eAAe;AAAA,UACf,UAAU;AAAA,UACV,KAAK;AAAA,cACA,SAAS;AAAA,YACZ,MAAM;AAAA,YACN;AAAA,UACF;AAAA,cAEI;AAAA,UACJ,SAAS,qBAAqB,MAAM,SAAgB,CAAC,UAAU;AAC7D,gBAAI,CAAC,SAAS;AACZ,yBAAW,KAAK;AAAA,YAClB;AAEA,gBAAI,eAAe;AACjB,+CAAiC,UAC/B,MAAM,qBAAqB;AAI7B,kBAAI,CAAC,iCAAiC;AAAS,sBAAM,gBAAgB;AAAA,YACvE;AAAA,UACF,CAAC;AAAA,cACI,SAAS;AAAA,YACZ,WAAW;AAAA,cACR,MAA6C;AAAA,cAC9C,CAAC,UAAU;AAET,oBAAI,MAAM,QAAQ;AAAS,wBAAM,eAAe;AAAA,cAClD;AAAA,YACF;AAAA,YACA,SAAS,qBAAqB,UAAU,SAAS,MAAM;AAMrD,kBAAI,qBAAqB;AACvB,gBAAC,IAAI,SAA+B,MAAM;AAAA,YAC9C,CAAC;AAAA,UACH;AAAA,QACF;AAAA,SACC,iBACC,CAAC;AAAA,UACC;AAAA,UACA,SAAS;AAAA,UACT,SAAS,CAAC,iCAAiC;AAAA,UAC3C,MAAM;AAAA,UACN,OAAO;AAAA,UACP,SAAS;AAAA,UACT,UAAU;AAAA,UACV,UAAU;AAAA,QACZ;AAAA,MAEJ,IAEJ,EA9EC;AAAA,IAgFL;AAAA,EACF;AACF;AAcA,MAAM,cAAc,CAAC,UAA4B;AAC/C,QAAM,EAAE,SAAS,UAAU,MAAM,SAAS,UAAU,aAAa,GAAG,WAAW,IAAI;AACnF,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,cAAc,YAAY,OAAO;AAGvC,QAAM,UAAU,MAAM;AACpB,UAAM,QAAQ,IAAI;AAClB,UAAM,aAAa,OAAO,iBAAiB;AAC3C,UAAM,aAAa,OAAO;AAAA,MACxB;AAAA,MACA;AAAA,IACF;AACA,UAAM,aAAa,WAAW;AAC9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,iBAAW,KAAK,OAAO,OAAO;AAC9B,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE,CAAC;AAAA,IACC,KAAK;AAAA,IACL,gBAAgB;AAAA,QACZ;AAAA,IACJ,UAAU;AAAA,IACV,KAAK;AAAA,IACL,aAAa;AAAA,IACb,OAAO;AAAA,MACL,GAAI,WACA;AAAA;AAAA,QAEE,UAAU;AAAA,QACV,eAAe;AAAA,QACf,SAAS;AAAA,QACT,QAAQ;AAAA,MACV,IACA;AAAA,QACE,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MAEJ,GAAG,MAAM;AAAA,IACX;AAAA,EACF;AAEJ;AAYA,MAAM,kBAAkB,OAAO,gBAAgB;AAAA,EAC7C,MAAM;AAAA,EAEN,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY;AAAA,QACV,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAaD,MAAM,aAAa;AAAA,EACjB,gBAAgB;AAAA,IACd,MAAM;AAAA,MACJ,CAAC,OAAqC,iBAAiB;AACrD,cAAM;AAAA,UACJ;AAAA,UACA,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA,WAAW;AAAA,UACX,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACL,IAAI;AACJ,cAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,UAC7C,MAAM;AAAA,UACN,aAAa;AAAA,UACb,UAAU;AAAA,QACZ,CAAC;AAED,eACE,CAAC;AAAA,UACC,OAAO;AAAA,UACP,OAAO;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,aAAa;AAAA,SAEb,CAAC;AAAA,UACC,gBAAgB;AAAA,UAChB,KAAK;AAAA,UACL,kBAAkB;AAAA,UAClB,KAAK;AAAA,UACL,aAAa;AAAA,UACb,eAAe,WAAW,KAAK;AAAA,cAC3B;AAAA,QACN,EACF,EAnBC;AAAA,MAqBL;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AACF;AAEA,WAAW,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/radio-group",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.15.0",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"build": "tamagui-build",
|
|
19
19
|
"watch": "tamagui-build --watch",
|
|
20
20
|
"lint": "../../node_modules/.bin/rome check src",
|
|
21
|
-
"lint:fix": "../../node_modules/.bin/rome check --apply
|
|
21
|
+
"lint:fix": "../../node_modules/.bin/rome check --apply src",
|
|
22
22
|
"clean": "tamagui-build clean",
|
|
23
23
|
"clean:build": "tamagui-build clean:build"
|
|
24
24
|
},
|
|
@@ -32,20 +32,20 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@radix-ui/react-use-previous": "^0.1.1",
|
|
35
|
-
"@tamagui/compose-refs": "1.
|
|
36
|
-
"@tamagui/core": "1.
|
|
37
|
-
"@tamagui/create-context": "1.
|
|
38
|
-
"@tamagui/focusable": "1.
|
|
39
|
-
"@tamagui/get-size": "1.
|
|
40
|
-
"@tamagui/label": "1.
|
|
41
|
-
"@tamagui/stacks": "1.
|
|
42
|
-
"@tamagui/use-controllable-state": "1.
|
|
35
|
+
"@tamagui/compose-refs": "1.15.0",
|
|
36
|
+
"@tamagui/core": "1.15.0",
|
|
37
|
+
"@tamagui/create-context": "1.15.0",
|
|
38
|
+
"@tamagui/focusable": "1.15.0",
|
|
39
|
+
"@tamagui/get-size": "1.15.0",
|
|
40
|
+
"@tamagui/label": "1.15.0",
|
|
41
|
+
"@tamagui/stacks": "1.15.0",
|
|
42
|
+
"@tamagui/use-controllable-state": "1.15.0"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
45
|
"react": "*"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@tamagui/build": "1.
|
|
48
|
+
"@tamagui/build": "1.15.0",
|
|
49
49
|
"react": "^18.2.0"
|
|
50
50
|
},
|
|
51
51
|
"publishConfig": {
|
package/src/RadioGroup.tsx
CHANGED
|
@@ -54,14 +54,11 @@ const RadioIndicatorFrame = styled(ThemeableStack, {
|
|
|
54
54
|
variants: {
|
|
55
55
|
unstyled: {
|
|
56
56
|
false: {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
57
|
+
width: '33%',
|
|
58
|
+
height: '33%',
|
|
59
|
+
borderRadius: 1000,
|
|
60
60
|
backgroundColor: '$color',
|
|
61
61
|
pressTheme: true,
|
|
62
|
-
pressStyle: {
|
|
63
|
-
backgroundColor: '$colorTransparent',
|
|
64
|
-
},
|
|
65
62
|
},
|
|
66
63
|
},
|
|
67
64
|
} as const,
|
|
@@ -90,7 +87,6 @@ const RadioIndicator = RadioIndicatorFrame.extractable(
|
|
|
90
87
|
if (forceMount || checked) {
|
|
91
88
|
return (
|
|
92
89
|
<RadioIndicatorFrame
|
|
93
|
-
theme="active"
|
|
94
90
|
data-state={getState(checked)}
|
|
95
91
|
data-disabled={disabled ? '' : undefined}
|
|
96
92
|
{...indicatorProps}
|
|
@@ -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;AAuXtC,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"}
|