@tamagui/checkbox 1.15.13 → 1.15.15
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/Checkbox.js.map +0 -1
- package/dist/cjs/index.js.map +0 -1
- package/dist/esm/Checkbox.js.map +0 -1
- package/dist/esm/Checkbox.mjs.map +0 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/index.mjs.map +0 -1
- package/dist/jsx/Checkbox.js.map +0 -1
- package/dist/jsx/Checkbox.mjs.map +0 -1
- package/dist/jsx/index.js.map +0 -1
- package/dist/jsx/index.mjs.map +0 -1
- package/package.json +11 -11
package/dist/cjs/Checkbox.js.map
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["// fork of radix\n// https://github.com/radix-ui/primitives/tree/main/packages/react/checkbox/src/Checkbox.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n SizeTokens,\n TamaguiElement,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n useMediaPropsActive,\n useTheme,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nexport type CheckedState = boolean | 'indeterminate'\n\nexport function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n return checked === 'indeterminate'\n}\n\nexport function getState(checked: CheckedState) {\n return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'\n}\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: CheckedState\n control: HTMLElement | null\n bubbles: boolean\n\n isHidden?: boolean\n}\n\nexport const BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\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\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n input.indeterminate = isIndeterminate(checked)\n setChecked.call(input, isIndeterminate(checked) ? false : checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n defaultChecked={isIndeterminate(checked) ? false : 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: 'var(--color6)',\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator'\n\nconst CheckboxIndicatorFrame = styled(ThemeableStack, {\n // use Checkbox for easier themes\n name: INDICATOR_NAME,\n})\n\ntype CheckboxIndicatorFrameProps = GetProps<typeof CheckboxIndicatorFrame>\n\nexport type CheckboxIndicatorProps = CheckboxIndicatorFrameProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n /**\n * Used to disable passing styles down to children.\n */\n disablePassStyles?: boolean\n}\n\nconst CheckboxIndicator = CheckboxIndicatorFrame.extractable(\n React.forwardRef<TamaguiElement, CheckboxIndicatorProps>(\n (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n children: childrenProp,\n forceMount,\n disablePassStyles,\n ...indicatorProps\n } = props\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox)\n const iconSize =\n (typeof context.size === 'number'\n ? context.size * 0.65\n : getFontSize(context.size)) * context.scaleIcon\n const theme = useTheme()\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })\n\n const childrens = React.Children.toArray(childrenProp)\n const children = childrens.map((child) => {\n if (disablePassStyles || !React.isValidElement(child)) {\n return child\n }\n return getThemedIcon(child)\n })\n\n if (forceMount || isIndeterminate(context.state) || context.state === true)\n return (\n <CheckboxIndicatorFrame\n data-state={getState(context.state)}\n data-disabled={context.disabled ? '' : undefined}\n pointerEvents=\"none\"\n {...indicatorProps}\n ref={forwardedRef}\n >\n {children}\n </CheckboxIndicatorFrame>\n )\n\n return null\n }\n )\n)\n\nCheckboxIndicator.displayName = INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_NAME = 'Checkbox'\n\nexport const CheckboxFrame = styled(ThemeableStack, {\n name: CHECKBOX_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n pressTheme: true,\n focusable: true,\n borderWidth: 1,\n borderColor: '$borderColor',\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (val, { tokens }) => {\n const radiusToken = getVariableValue(getSize(val)) / 8\n return {\n borderRadius: radiusToken,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope }\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME)\n\ntype CheckboxContextValue = {\n state: CheckedState\n disabled?: boolean\n size: SizeTokens\n scaleIcon: number\n}\n\nconst [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME)\n\ntype CheckboxFrameProps = GetProps<typeof CheckboxFrame>\nexport interface CheckboxProps\n extends Omit<CheckboxFrameProps, 'checked' | 'defaultChecked'> {\n checked?: CheckedState\n defaultChecked?: CheckedState\n required?: boolean\n onCheckedChange?(checked: CheckedState): void\n labelledBy?: string\n name?: string\n value?: string\n native?: boolean\n scaleIcon?: number\n scaleSize?: number\n sizeAdjust?: number\n}\n\nexport const Checkbox = withStaticProperties(\n CheckboxFrame.extractable(\n React.forwardRef<HTMLButtonElement, CheckboxProps>(\n (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n labelledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n scaleIcon = 1,\n scaleSize = 0.45,\n sizeAdjust = 0,\n disabled,\n value = 'on',\n onCheckedChange,\n native,\n ...checkboxProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node))\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const propsActive = useMediaPropsActive(props)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked!,\n onChange: onCheckedChange,\n })\n\n const adjustedSize = getVariableValue(\n stepTokenUpOrDown('size', propsActive.size, sizeAdjust)\n )\n const size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\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 setChecked((x) => !x)\n },\n focus: () => {},\n })\n }, [props.id, setChecked])\n }\n\n return (\n <CheckboxProvider\n scope={__scopeCheckbox}\n state={checked}\n disabled={disabled}\n size={size}\n scaleIcon={scaleIcon}\n >\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={disabled}\n id={props.id}\n />\n ) : (\n <>\n <CheckboxFrame\n width={size}\n height={size}\n tag=\"button\"\n role=\"checkbox\"\n aria-labelledby={labelledBy}\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n {...checkboxProps}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value,\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 })}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n setChecked((prevChecked) =>\n isIndeterminate(prevChecked) ? true : !prevChecked\n )\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if checkbox 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 checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current)\n event.stopPropagation()\n }\n })}\n />\n\n {isWeb && 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={disabled}\n />\n ) : null}\n </>\n )}\n </CheckboxProvider>\n )\n }\n )\n ),\n {\n Indicator: CheckboxIndicator,\n }\n)\n\nCheckbox.displayName = CHECKBOX_NAME\n\nexport { createCheckboxScope }\n"],
|
|
5
4
|
"mappings": "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",
|
|
6
5
|
"names": []
|
|
7
6
|
}
|
package/dist/cjs/index.js.map
CHANGED
package/dist/esm/Checkbox.js.map
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["// fork of radix\n// https://github.com/radix-ui/primitives/tree/main/packages/react/checkbox/src/Checkbox.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n SizeTokens,\n TamaguiElement,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n useMediaPropsActive,\n useTheme,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nexport type CheckedState = boolean | 'indeterminate'\n\nexport function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n return checked === 'indeterminate'\n}\n\nexport function getState(checked: CheckedState) {\n return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'\n}\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: CheckedState\n control: HTMLElement | null\n bubbles: boolean\n\n isHidden?: boolean\n}\n\nexport const BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\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\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n input.indeterminate = isIndeterminate(checked)\n setChecked.call(input, isIndeterminate(checked) ? false : checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n defaultChecked={isIndeterminate(checked) ? false : 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: 'var(--color6)',\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator'\n\nconst CheckboxIndicatorFrame = styled(ThemeableStack, {\n // use Checkbox for easier themes\n name: INDICATOR_NAME,\n})\n\ntype CheckboxIndicatorFrameProps = GetProps<typeof CheckboxIndicatorFrame>\n\nexport type CheckboxIndicatorProps = CheckboxIndicatorFrameProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n /**\n * Used to disable passing styles down to children.\n */\n disablePassStyles?: boolean\n}\n\nconst CheckboxIndicator = CheckboxIndicatorFrame.extractable(\n React.forwardRef<TamaguiElement, CheckboxIndicatorProps>(\n (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n children: childrenProp,\n forceMount,\n disablePassStyles,\n ...indicatorProps\n } = props\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox)\n const iconSize =\n (typeof context.size === 'number'\n ? context.size * 0.65\n : getFontSize(context.size)) * context.scaleIcon\n const theme = useTheme()\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })\n\n const childrens = React.Children.toArray(childrenProp)\n const children = childrens.map((child) => {\n if (disablePassStyles || !React.isValidElement(child)) {\n return child\n }\n return getThemedIcon(child)\n })\n\n if (forceMount || isIndeterminate(context.state) || context.state === true)\n return (\n <CheckboxIndicatorFrame\n data-state={getState(context.state)}\n data-disabled={context.disabled ? '' : undefined}\n pointerEvents=\"none\"\n {...indicatorProps}\n ref={forwardedRef}\n >\n {children}\n </CheckboxIndicatorFrame>\n )\n\n return null\n }\n )\n)\n\nCheckboxIndicator.displayName = INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_NAME = 'Checkbox'\n\nexport const CheckboxFrame = styled(ThemeableStack, {\n name: CHECKBOX_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n pressTheme: true,\n focusable: true,\n borderWidth: 1,\n borderColor: '$borderColor',\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (val, { tokens }) => {\n const radiusToken = getVariableValue(getSize(val)) / 8\n return {\n borderRadius: radiusToken,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope }\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME)\n\ntype CheckboxContextValue = {\n state: CheckedState\n disabled?: boolean\n size: SizeTokens\n scaleIcon: number\n}\n\nconst [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME)\n\ntype CheckboxFrameProps = GetProps<typeof CheckboxFrame>\nexport interface CheckboxProps\n extends Omit<CheckboxFrameProps, 'checked' | 'defaultChecked'> {\n checked?: CheckedState\n defaultChecked?: CheckedState\n required?: boolean\n onCheckedChange?(checked: CheckedState): void\n labelledBy?: string\n name?: string\n value?: string\n native?: boolean\n scaleIcon?: number\n scaleSize?: number\n sizeAdjust?: number\n}\n\nexport const Checkbox = withStaticProperties(\n CheckboxFrame.extractable(\n React.forwardRef<HTMLButtonElement, CheckboxProps>(\n (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n labelledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n scaleIcon = 1,\n scaleSize = 0.45,\n sizeAdjust = 0,\n disabled,\n value = 'on',\n onCheckedChange,\n native,\n ...checkboxProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node))\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const propsActive = useMediaPropsActive(props)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked!,\n onChange: onCheckedChange,\n })\n\n const adjustedSize = getVariableValue(\n stepTokenUpOrDown('size', propsActive.size, sizeAdjust)\n )\n const size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\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 setChecked((x) => !x)\n },\n focus: () => {},\n })\n }, [props.id, setChecked])\n }\n\n return (\n <CheckboxProvider\n scope={__scopeCheckbox}\n state={checked}\n disabled={disabled}\n size={size}\n scaleIcon={scaleIcon}\n >\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={disabled}\n id={props.id}\n />\n ) : (\n <>\n <CheckboxFrame\n width={size}\n height={size}\n tag=\"button\"\n role=\"checkbox\"\n aria-labelledby={labelledBy}\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n {...checkboxProps}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value,\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 })}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n setChecked((prevChecked) =>\n isIndeterminate(prevChecked) ? true : !prevChecked\n )\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if checkbox 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 checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current)\n event.stopPropagation()\n }\n })}\n />\n\n {isWeb && 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={disabled}\n />\n ) : null}\n </>\n )}\n </CheckboxProvider>\n )\n }\n )\n ),\n {\n Indicator: CheckboxIndicator,\n }\n)\n\nCheckbox.displayName = CHECKBOX_NAME\n\nexport { createCheckboxScope }\n"],
|
|
5
4
|
"mappings": "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",
|
|
6
5
|
"names": []
|
|
7
6
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["// fork of radix\n// https://github.com/radix-ui/primitives/tree/main/packages/react/checkbox/src/Checkbox.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n SizeTokens,\n TamaguiElement,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n useMediaPropsActive,\n useTheme,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nexport type CheckedState = boolean | 'indeterminate'\n\nexport function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n return checked === 'indeterminate'\n}\n\nexport function getState(checked: CheckedState) {\n return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'\n}\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: CheckedState\n control: HTMLElement | null\n bubbles: boolean\n\n isHidden?: boolean\n}\n\nexport const BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\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\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n input.indeterminate = isIndeterminate(checked)\n setChecked.call(input, isIndeterminate(checked) ? false : checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n defaultChecked={isIndeterminate(checked) ? false : 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: 'var(--color6)',\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator'\n\nconst CheckboxIndicatorFrame = styled(ThemeableStack, {\n // use Checkbox for easier themes\n name: INDICATOR_NAME,\n})\n\ntype CheckboxIndicatorFrameProps = GetProps<typeof CheckboxIndicatorFrame>\n\nexport type CheckboxIndicatorProps = CheckboxIndicatorFrameProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n /**\n * Used to disable passing styles down to children.\n */\n disablePassStyles?: boolean\n}\n\nconst CheckboxIndicator = CheckboxIndicatorFrame.extractable(\n React.forwardRef<TamaguiElement, CheckboxIndicatorProps>(\n (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n children: childrenProp,\n forceMount,\n disablePassStyles,\n ...indicatorProps\n } = props\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox)\n const iconSize =\n (typeof context.size === 'number'\n ? context.size * 0.65\n : getFontSize(context.size)) * context.scaleIcon\n const theme = useTheme()\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })\n\n const childrens = React.Children.toArray(childrenProp)\n const children = childrens.map((child) => {\n if (disablePassStyles || !React.isValidElement(child)) {\n return child\n }\n return getThemedIcon(child)\n })\n\n if (forceMount || isIndeterminate(context.state) || context.state === true)\n return (\n <CheckboxIndicatorFrame\n data-state={getState(context.state)}\n data-disabled={context.disabled ? '' : undefined}\n pointerEvents=\"none\"\n {...indicatorProps}\n ref={forwardedRef}\n >\n {children}\n </CheckboxIndicatorFrame>\n )\n\n return null\n }\n )\n)\n\nCheckboxIndicator.displayName = INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_NAME = 'Checkbox'\n\nexport const CheckboxFrame = styled(ThemeableStack, {\n name: CHECKBOX_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n pressTheme: true,\n focusable: true,\n borderWidth: 1,\n borderColor: '$borderColor',\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (val, { tokens }) => {\n const radiusToken = getVariableValue(getSize(val)) / 8\n return {\n borderRadius: radiusToken,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope }\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME)\n\ntype CheckboxContextValue = {\n state: CheckedState\n disabled?: boolean\n size: SizeTokens\n scaleIcon: number\n}\n\nconst [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME)\n\ntype CheckboxFrameProps = GetProps<typeof CheckboxFrame>\nexport interface CheckboxProps\n extends Omit<CheckboxFrameProps, 'checked' | 'defaultChecked'> {\n checked?: CheckedState\n defaultChecked?: CheckedState\n required?: boolean\n onCheckedChange?(checked: CheckedState): void\n labelledBy?: string\n name?: string\n value?: string\n native?: boolean\n scaleIcon?: number\n scaleSize?: number\n sizeAdjust?: number\n}\n\nexport const Checkbox = withStaticProperties(\n CheckboxFrame.extractable(\n React.forwardRef<HTMLButtonElement, CheckboxProps>(\n (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n labelledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n scaleIcon = 1,\n scaleSize = 0.45,\n sizeAdjust = 0,\n disabled,\n value = 'on',\n onCheckedChange,\n native,\n ...checkboxProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node))\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const propsActive = useMediaPropsActive(props)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked!,\n onChange: onCheckedChange,\n })\n\n const adjustedSize = getVariableValue(\n stepTokenUpOrDown('size', propsActive.size, sizeAdjust)\n )\n const size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\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 setChecked((x) => !x)\n },\n focus: () => {},\n })\n }, [props.id, setChecked])\n }\n\n return (\n <CheckboxProvider\n scope={__scopeCheckbox}\n state={checked}\n disabled={disabled}\n size={size}\n scaleIcon={scaleIcon}\n >\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={disabled}\n id={props.id}\n />\n ) : (\n <>\n <CheckboxFrame\n width={size}\n height={size}\n tag=\"button\"\n role=\"checkbox\"\n aria-labelledby={labelledBy}\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n {...checkboxProps}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value,\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 })}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n setChecked((prevChecked) =>\n isIndeterminate(prevChecked) ? true : !prevChecked\n )\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if checkbox 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 checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current)\n event.stopPropagation()\n }\n })}\n />\n\n {isWeb && 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={disabled}\n />\n ) : null}\n </>\n )}\n </CheckboxProvider>\n )\n }\n )\n ),\n {\n Indicator: CheckboxIndicator,\n }\n)\n\nCheckbox.displayName = CHECKBOX_NAME\n\nexport { createCheckboxScope }\n"],
|
|
5
4
|
"mappings": "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",
|
|
6
5
|
"names": []
|
|
7
6
|
}
|
package/dist/esm/index.js.map
CHANGED
package/dist/esm/index.mjs.map
CHANGED
package/dist/jsx/Checkbox.js.map
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["// fork of radix\n// https://github.com/radix-ui/primitives/tree/main/packages/react/checkbox/src/Checkbox.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n SizeTokens,\n TamaguiElement,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n useMediaPropsActive,\n useTheme,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nexport type CheckedState = boolean | 'indeterminate'\n\nexport function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n return checked === 'indeterminate'\n}\n\nexport function getState(checked: CheckedState) {\n return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'\n}\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: CheckedState\n control: HTMLElement | null\n bubbles: boolean\n\n isHidden?: boolean\n}\n\nexport const BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\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\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n input.indeterminate = isIndeterminate(checked)\n setChecked.call(input, isIndeterminate(checked) ? false : checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n defaultChecked={isIndeterminate(checked) ? false : 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: 'var(--color6)',\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator'\n\nconst CheckboxIndicatorFrame = styled(ThemeableStack, {\n // use Checkbox for easier themes\n name: INDICATOR_NAME,\n})\n\ntype CheckboxIndicatorFrameProps = GetProps<typeof CheckboxIndicatorFrame>\n\nexport type CheckboxIndicatorProps = CheckboxIndicatorFrameProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n /**\n * Used to disable passing styles down to children.\n */\n disablePassStyles?: boolean\n}\n\nconst CheckboxIndicator = CheckboxIndicatorFrame.extractable(\n React.forwardRef<TamaguiElement, CheckboxIndicatorProps>(\n (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n children: childrenProp,\n forceMount,\n disablePassStyles,\n ...indicatorProps\n } = props\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox)\n const iconSize =\n (typeof context.size === 'number'\n ? context.size * 0.65\n : getFontSize(context.size)) * context.scaleIcon\n const theme = useTheme()\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })\n\n const childrens = React.Children.toArray(childrenProp)\n const children = childrens.map((child) => {\n if (disablePassStyles || !React.isValidElement(child)) {\n return child\n }\n return getThemedIcon(child)\n })\n\n if (forceMount || isIndeterminate(context.state) || context.state === true)\n return (\n <CheckboxIndicatorFrame\n data-state={getState(context.state)}\n data-disabled={context.disabled ? '' : undefined}\n pointerEvents=\"none\"\n {...indicatorProps}\n ref={forwardedRef}\n >\n {children}\n </CheckboxIndicatorFrame>\n )\n\n return null\n }\n )\n)\n\nCheckboxIndicator.displayName = INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_NAME = 'Checkbox'\n\nexport const CheckboxFrame = styled(ThemeableStack, {\n name: CHECKBOX_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n pressTheme: true,\n focusable: true,\n borderWidth: 1,\n borderColor: '$borderColor',\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (val, { tokens }) => {\n const radiusToken = getVariableValue(getSize(val)) / 8\n return {\n borderRadius: radiusToken,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope }\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME)\n\ntype CheckboxContextValue = {\n state: CheckedState\n disabled?: boolean\n size: SizeTokens\n scaleIcon: number\n}\n\nconst [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME)\n\ntype CheckboxFrameProps = GetProps<typeof CheckboxFrame>\nexport interface CheckboxProps\n extends Omit<CheckboxFrameProps, 'checked' | 'defaultChecked'> {\n checked?: CheckedState\n defaultChecked?: CheckedState\n required?: boolean\n onCheckedChange?(checked: CheckedState): void\n labelledBy?: string\n name?: string\n value?: string\n native?: boolean\n scaleIcon?: number\n scaleSize?: number\n sizeAdjust?: number\n}\n\nexport const Checkbox = withStaticProperties(\n CheckboxFrame.extractable(\n React.forwardRef<HTMLButtonElement, CheckboxProps>(\n (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n labelledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n scaleIcon = 1,\n scaleSize = 0.45,\n sizeAdjust = 0,\n disabled,\n value = 'on',\n onCheckedChange,\n native,\n ...checkboxProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node))\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const propsActive = useMediaPropsActive(props)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked!,\n onChange: onCheckedChange,\n })\n\n const adjustedSize = getVariableValue(\n stepTokenUpOrDown('size', propsActive.size, sizeAdjust)\n )\n const size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\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 setChecked((x) => !x)\n },\n focus: () => {},\n })\n }, [props.id, setChecked])\n }\n\n return (\n <CheckboxProvider\n scope={__scopeCheckbox}\n state={checked}\n disabled={disabled}\n size={size}\n scaleIcon={scaleIcon}\n >\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={disabled}\n id={props.id}\n />\n ) : (\n <>\n <CheckboxFrame\n width={size}\n height={size}\n tag=\"button\"\n role=\"checkbox\"\n aria-labelledby={labelledBy}\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n {...checkboxProps}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value,\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 })}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n setChecked((prevChecked) =>\n isIndeterminate(prevChecked) ? true : !prevChecked\n )\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if checkbox 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 checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current)\n event.stopPropagation()\n }\n })}\n />\n\n {isWeb && 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={disabled}\n />\n ) : null}\n </>\n )}\n </CheckboxProvider>\n )\n }\n )\n ),\n {\n Indicator: CheckboxIndicator,\n }\n)\n\nCheckbox.displayName = CHECKBOX_NAME\n\nexport { createCheckboxScope }\n"],
|
|
5
4
|
"mappings": "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",
|
|
6
5
|
"names": []
|
|
7
6
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Checkbox.tsx"],
|
|
4
|
-
"sourcesContent": ["// fork of radix\n// https://github.com/radix-ui/primitives/tree/main/packages/react/checkbox/src/Checkbox.tsx\n\nimport { usePrevious } from '@radix-ui/react-use-previous'\nimport {\n GetProps,\n SizeTokens,\n TamaguiElement,\n composeEventHandlers,\n getVariableValue,\n isWeb,\n styled,\n useComposedRefs,\n useMediaPropsActive,\n useTheme,\n withStaticProperties,\n} from '@tamagui/core'\nimport type { Scope } from '@tamagui/create-context'\nimport { createContextScope } from '@tamagui/create-context'\nimport { registerFocusable } from '@tamagui/focusable'\nimport { getFontSize } from '@tamagui/font-size'\nimport { getSize, stepTokenUpOrDown } from '@tamagui/get-size'\nimport { useGetThemedIcon } from '@tamagui/helpers-tamagui'\nimport { useLabelContext } from '@tamagui/label'\nimport { ThemeableStack } from '@tamagui/stacks'\nimport { useControllableState } from '@tamagui/use-controllable-state'\nimport * as React from 'react'\n\nexport type CheckedState = boolean | 'indeterminate'\n\nexport function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {\n return checked === 'indeterminate'\n}\n\nexport function getState(checked: CheckedState) {\n return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'\n}\n\ntype InputProps = any //Radix.ComponentPropsWithoutRef<'input'>\ninterface BubbleInputProps extends Omit<InputProps, 'checked'> {\n checked: CheckedState\n control: HTMLElement | null\n bubbles: boolean\n\n isHidden?: boolean\n}\n\nexport const BubbleInput = (props: BubbleInputProps) => {\n const { checked, bubbles = true, control, isHidden, ...inputProps } = props\n const ref = React.useRef<HTMLInputElement>(null)\n const prevChecked = usePrevious(checked)\n // const controlSize = useSize(control)\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\n if (prevChecked !== checked && setChecked) {\n const event = new Event('click', { bubbles })\n input.indeterminate = isIndeterminate(checked)\n setChecked.call(input, isIndeterminate(checked) ? false : checked)\n input.dispatchEvent(event)\n }\n }, [prevChecked, checked, bubbles])\n\n return (\n <input\n type=\"checkbox\"\n defaultChecked={isIndeterminate(checked) ? false : 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: 'var(--color6)',\n }),\n\n ...props.style,\n }}\n />\n )\n}\n\n/* -------------------------------------------------------------------------------------------------\n * CheckboxIndicator\n * -----------------------------------------------------------------------------------------------*/\n\nconst INDICATOR_NAME = 'CheckboxIndicator'\n\nconst CheckboxIndicatorFrame = styled(ThemeableStack, {\n // use Checkbox for easier themes\n name: INDICATOR_NAME,\n})\n\ntype CheckboxIndicatorFrameProps = GetProps<typeof CheckboxIndicatorFrame>\n\nexport type CheckboxIndicatorProps = CheckboxIndicatorFrameProps & {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true\n /**\n * Used to disable passing styles down to children.\n */\n disablePassStyles?: boolean\n}\n\nconst CheckboxIndicator = CheckboxIndicatorFrame.extractable(\n React.forwardRef<TamaguiElement, CheckboxIndicatorProps>(\n (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n children: childrenProp,\n forceMount,\n disablePassStyles,\n ...indicatorProps\n } = props\n const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox)\n const iconSize =\n (typeof context.size === 'number'\n ? context.size * 0.65\n : getFontSize(context.size)) * context.scaleIcon\n const theme = useTheme()\n const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })\n\n const childrens = React.Children.toArray(childrenProp)\n const children = childrens.map((child) => {\n if (disablePassStyles || !React.isValidElement(child)) {\n return child\n }\n return getThemedIcon(child)\n })\n\n if (forceMount || isIndeterminate(context.state) || context.state === true)\n return (\n <CheckboxIndicatorFrame\n data-state={getState(context.state)}\n data-disabled={context.disabled ? '' : undefined}\n pointerEvents=\"none\"\n {...indicatorProps}\n ref={forwardedRef}\n >\n {children}\n </CheckboxIndicatorFrame>\n )\n\n return null\n }\n )\n)\n\nCheckboxIndicator.displayName = INDICATOR_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * Checkbox\n * -----------------------------------------------------------------------------------------------*/\n\nconst CHECKBOX_NAME = 'Checkbox'\n\nexport const CheckboxFrame = styled(ThemeableStack, {\n name: CHECKBOX_NAME,\n tag: 'button',\n\n variants: {\n unstyled: {\n false: {\n size: '$true',\n backgroundColor: '$background',\n alignItems: 'center',\n justifyContent: 'center',\n pressTheme: true,\n focusable: true,\n borderWidth: 1,\n borderColor: '$borderColor',\n\n hoverStyle: {\n borderColor: '$borderColorHover',\n },\n\n focusStyle: {\n borderColor: '$borderColorFocus',\n },\n },\n },\n\n size: {\n '...size': (val, { tokens }) => {\n const radiusToken = getVariableValue(getSize(val)) / 8\n return {\n borderRadius: radiusToken,\n }\n },\n },\n } as const,\n\n defaultVariants: {\n unstyled: false,\n },\n})\n\ntype ScopedProps<P> = P & { __scopeCheckbox?: Scope }\nconst [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME)\n\ntype CheckboxContextValue = {\n state: CheckedState\n disabled?: boolean\n size: SizeTokens\n scaleIcon: number\n}\n\nconst [CheckboxProvider, useCheckboxContext] =\n createCheckboxContext<CheckboxContextValue>(CHECKBOX_NAME)\n\ntype CheckboxFrameProps = GetProps<typeof CheckboxFrame>\nexport interface CheckboxProps\n extends Omit<CheckboxFrameProps, 'checked' | 'defaultChecked'> {\n checked?: CheckedState\n defaultChecked?: CheckedState\n required?: boolean\n onCheckedChange?(checked: CheckedState): void\n labelledBy?: string\n name?: string\n value?: string\n native?: boolean\n scaleIcon?: number\n scaleSize?: number\n sizeAdjust?: number\n}\n\nexport const Checkbox = withStaticProperties(\n CheckboxFrame.extractable(\n React.forwardRef<HTMLButtonElement, CheckboxProps>(\n (props: ScopedProps<CheckboxProps>, forwardedRef) => {\n const {\n __scopeCheckbox,\n labelledBy: ariaLabelledby,\n name,\n checked: checkedProp,\n defaultChecked,\n required,\n scaleIcon = 1,\n scaleSize = 0.45,\n sizeAdjust = 0,\n disabled,\n value = 'on',\n onCheckedChange,\n native,\n ...checkboxProps\n } = props\n const [button, setButton] = React.useState<HTMLButtonElement | null>(null)\n const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node))\n const hasConsumerStoppedPropagationRef = React.useRef(false)\n const propsActive = useMediaPropsActive(props)\n // We set this to true by default so that events bubble to forms without JS (SSR)\n const isFormControl = isWeb\n ? button\n ? Boolean(button.closest('form'))\n : true\n : false\n const [checked = false, setChecked] = useControllableState({\n prop: checkedProp,\n defaultProp: defaultChecked!,\n onChange: onCheckedChange,\n })\n\n const adjustedSize = getVariableValue(\n stepTokenUpOrDown('size', propsActive.size, sizeAdjust)\n )\n const size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize\n\n const labelId = useLabelContext(button)\n const labelledBy = ariaLabelledby || labelId\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 setChecked((x) => !x)\n },\n focus: () => {},\n })\n }, [props.id, setChecked])\n }\n\n return (\n <CheckboxProvider\n scope={__scopeCheckbox}\n state={checked}\n disabled={disabled}\n size={size}\n scaleIcon={scaleIcon}\n >\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={disabled}\n id={props.id}\n />\n ) : (\n <>\n <CheckboxFrame\n width={size}\n height={size}\n tag=\"button\"\n role=\"checkbox\"\n aria-labelledby={labelledBy}\n aria-checked={isIndeterminate(checked) ? 'mixed' : checked}\n aria-required={required}\n data-state={getState(checked)}\n data-disabled={disabled ? '' : undefined}\n disabled={disabled}\n {...checkboxProps}\n ref={composedRefs}\n {...(isWeb && {\n type: 'button',\n value,\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 })}\n onPress={composeEventHandlers(props.onPress as any, (event) => {\n setChecked((prevChecked) =>\n isIndeterminate(prevChecked) ? true : !prevChecked\n )\n if (isFormControl) {\n hasConsumerStoppedPropagationRef.current =\n event.isPropagationStopped()\n // if checkbox 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 checkbox updates.\n if (!hasConsumerStoppedPropagationRef.current)\n event.stopPropagation()\n }\n })}\n />\n\n {isWeb && 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={disabled}\n />\n ) : null}\n </>\n )}\n </CheckboxProvider>\n )\n }\n )\n ),\n {\n Indicator: CheckboxIndicator,\n }\n)\n\nCheckbox.displayName = CHECKBOX_NAME\n\nexport { createCheckboxScope }\n"],
|
|
5
4
|
"mappings": "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",
|
|
6
5
|
"names": []
|
|
7
6
|
}
|
package/dist/jsx/index.js.map
CHANGED
package/dist/jsx/index.mjs.map
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/checkbox",
|
|
3
|
-
"version": "1.15.
|
|
3
|
+
"version": "1.15.15",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -20,15 +20,15 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@radix-ui/react-use-previous": "^0.1.1",
|
|
23
|
-
"@tamagui/core": "1.15.
|
|
24
|
-
"@tamagui/create-context": "1.15.
|
|
25
|
-
"@tamagui/focusable": "1.15.
|
|
26
|
-
"@tamagui/font-size": "1.15.
|
|
27
|
-
"@tamagui/get-size": "1.15.
|
|
28
|
-
"@tamagui/helpers-tamagui": "1.15.
|
|
29
|
-
"@tamagui/label": "1.15.
|
|
30
|
-
"@tamagui/stacks": "1.15.
|
|
31
|
-
"@tamagui/use-controllable-state": "1.15.
|
|
23
|
+
"@tamagui/core": "1.15.15",
|
|
24
|
+
"@tamagui/create-context": "1.15.15",
|
|
25
|
+
"@tamagui/focusable": "1.15.15",
|
|
26
|
+
"@tamagui/font-size": "1.15.15",
|
|
27
|
+
"@tamagui/get-size": "1.15.15",
|
|
28
|
+
"@tamagui/helpers-tamagui": "1.15.15",
|
|
29
|
+
"@tamagui/label": "1.15.15",
|
|
30
|
+
"@tamagui/stacks": "1.15.15",
|
|
31
|
+
"@tamagui/use-controllable-state": "1.15.15"
|
|
32
32
|
},
|
|
33
33
|
"exports": {
|
|
34
34
|
"./package.json": "./package.json",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"react": "*"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@tamagui/build": "1.15.
|
|
45
|
+
"@tamagui/build": "1.15.15",
|
|
46
46
|
"react": "^18.2.0"
|
|
47
47
|
},
|
|
48
48
|
"publishConfig": {
|