@tamagui/checkbox 1.5.12 → 1.5.13
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 +1 -2
- package/dist/cjs/Checkbox.js.map +2 -2
- package/dist/esm/Checkbox.js +1 -2
- package/dist/esm/Checkbox.js.map +2 -2
- package/dist/esm/Checkbox.mjs +1 -2
- package/dist/esm/Checkbox.mjs.map +2 -2
- package/dist/jsx/Checkbox.js +1 -2
- package/dist/jsx/Checkbox.js.map +2 -2
- package/dist/jsx/Checkbox.mjs +1 -2
- package/dist/jsx/Checkbox.mjs.map +2 -2
- package/package.json +11 -11
- package/src/Checkbox.tsx +1 -2
- package/types/Checkbox.d.ts.map +1 -1
package/dist/cjs/Checkbox.js
CHANGED
|
@@ -100,6 +100,7 @@ const BubbleInput = (props) => {
|
|
|
100
100
|
};
|
|
101
101
|
const INDICATOR_NAME = "CheckboxIndicator";
|
|
102
102
|
const CheckboxIndicatorFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
|
|
103
|
+
// use Checkbox for easier themes
|
|
103
104
|
name: INDICATOR_NAME
|
|
104
105
|
});
|
|
105
106
|
const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
@@ -127,7 +128,6 @@ const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
|
127
128
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
128
129
|
CheckboxIndicatorFrame,
|
|
129
130
|
{
|
|
130
|
-
theme: "active",
|
|
131
131
|
"data-state": getState(context.state),
|
|
132
132
|
"data-disabled": context.disabled ? "" : void 0,
|
|
133
133
|
pointerEvents: "none",
|
|
@@ -254,7 +254,6 @@ const Checkbox = (0, import_core.withStaticProperties)(
|
|
|
254
254
|
{
|
|
255
255
|
width: size,
|
|
256
256
|
height: size,
|
|
257
|
-
theme: checked ? "active" : null,
|
|
258
257
|
tag: "button",
|
|
259
258
|
role: "checkbox",
|
|
260
259
|
"aria-labelledby": labelledBy,
|
package/dist/cjs/Checkbox.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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 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 theme=\"active\"\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 theme={checked ? 'active' : null}\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
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwEI;AArEJ,gCAA4B;AAC5B,kBAYO;AAEP,4BAAmC;AACnC,uBAAkC;AAClC,uBAA4B;AAC5B,sBAA2C;AAC3C,6BAAiC;AACjC,mBAAgC;AAChC,oBAA+B;AAC/B,oCAAqC;AACrC,YAAuB;AAIhB,SAAS,gBAAgB,SAAoD;AAClF,SAAO,YAAY;AACrB;AAEO,SAAS,SAAS,SAAuB;AAC9C,SAAO,gBAAgB,OAAO,IAAI,kBAAkB,UAAU,YAAY;AAC5E;AAWO,MAAM,cAAc,CAAC,UAA4B;AACtD,QAAM,EAAE,SAAS,UAAU,MAAM,SAAS,UAAU,GAAG,WAAW,IAAI;AACtE,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,kBAAc,uCAAY,OAAO;AAIvC,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;AAE9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,YAAM,gBAAgB,gBAAgB,OAAO;AAC7C,iBAAW,KAAK,OAAO,gBAAgB,OAAO,IAAI,QAAQ,OAAO;AACjE,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAgB,gBAAgB,OAAO,IAAI,QAAQ;AAAA,MAClD,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;AAAA,QACf;AAAA,QAEJ,GAAG,MAAM;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;AAMA,MAAM,iBAAiB;AAEvB,MAAM,6BAAyB,oBAAO,8BAAgB;AAAA,
|
|
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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Checkbox.js
CHANGED
|
@@ -71,6 +71,7 @@ const BubbleInput = (props) => {
|
|
|
71
71
|
};
|
|
72
72
|
const INDICATOR_NAME = "CheckboxIndicator";
|
|
73
73
|
const CheckboxIndicatorFrame = styled(ThemeableStack, {
|
|
74
|
+
// use Checkbox for easier themes
|
|
74
75
|
name: INDICATOR_NAME
|
|
75
76
|
});
|
|
76
77
|
const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
@@ -98,7 +99,6 @@ const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
|
98
99
|
return /* @__PURE__ */ jsx(
|
|
99
100
|
CheckboxIndicatorFrame,
|
|
100
101
|
{
|
|
101
|
-
theme: "active",
|
|
102
102
|
"data-state": getState(context.state),
|
|
103
103
|
"data-disabled": context.disabled ? "" : void 0,
|
|
104
104
|
pointerEvents: "none",
|
|
@@ -225,7 +225,6 @@ const Checkbox = withStaticProperties(
|
|
|
225
225
|
{
|
|
226
226
|
width: size,
|
|
227
227
|
height: size,
|
|
228
|
-
theme: checked ? "active" : null,
|
|
229
228
|
tag: "button",
|
|
230
229
|
role: "checkbox",
|
|
231
230
|
"aria-labelledby": labelledBy,
|
package/dist/esm/Checkbox.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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 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 theme=\"active\"\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 theme={checked ? 'active' : null}\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
|
-
"mappings": "AAwEI,SA2PU,UA3PV,KA2PU,YA3PV;AArEJ,SAAS,mBAAmB;AAC5B;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,SAAS,yBAAyB;AAC3C,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAIhB,SAAS,gBAAgB,SAAoD;AAClF,SAAO,YAAY;AACrB;AAEO,SAAS,SAAS,SAAuB;AAC9C,SAAO,gBAAgB,OAAO,IAAI,kBAAkB,UAAU,YAAY;AAC5E;AAWO,MAAM,cAAc,CAAC,UAA4B;AACtD,QAAM,EAAE,SAAS,UAAU,MAAM,SAAS,UAAU,GAAG,WAAW,IAAI;AACtE,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,cAAc,YAAY,OAAO;AAIvC,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;AAE9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,YAAM,gBAAgB,gBAAgB,OAAO;AAC7C,iBAAW,KAAK,OAAO,gBAAgB,OAAO,IAAI,QAAQ,OAAO;AACjE,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAgB,gBAAgB,OAAO,IAAI,QAAQ;AAAA,MAClD,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;AAAA,QACf;AAAA,QAEJ,GAAG,MAAM;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;AAMA,MAAM,iBAAiB;AAEvB,MAAM,yBAAyB,OAAO,gBAAgB;AAAA,
|
|
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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Checkbox.mjs
CHANGED
|
@@ -71,6 +71,7 @@ const BubbleInput = (props) => {
|
|
|
71
71
|
};
|
|
72
72
|
const INDICATOR_NAME = "CheckboxIndicator";
|
|
73
73
|
const CheckboxIndicatorFrame = styled(ThemeableStack, {
|
|
74
|
+
// use Checkbox for easier themes
|
|
74
75
|
name: INDICATOR_NAME
|
|
75
76
|
});
|
|
76
77
|
const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
@@ -98,7 +99,6 @@ const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
|
98
99
|
return /* @__PURE__ */ jsx(
|
|
99
100
|
CheckboxIndicatorFrame,
|
|
100
101
|
{
|
|
101
|
-
theme: "active",
|
|
102
102
|
"data-state": getState(context.state),
|
|
103
103
|
"data-disabled": context.disabled ? "" : void 0,
|
|
104
104
|
pointerEvents: "none",
|
|
@@ -225,7 +225,6 @@ const Checkbox = withStaticProperties(
|
|
|
225
225
|
{
|
|
226
226
|
width: size,
|
|
227
227
|
height: size,
|
|
228
|
-
theme: checked ? "active" : null,
|
|
229
228
|
tag: "button",
|
|
230
229
|
role: "checkbox",
|
|
231
230
|
"aria-labelledby": labelledBy,
|
|
@@ -1,7 +1,7 @@
|
|
|
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 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 theme=\"active\"\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 theme={checked ? 'active' : null}\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
|
-
"mappings": "AAwEI,SA2PU,UA3PV,KA2PU,YA3PV;AArEJ,SAAS,mBAAmB;AAC5B;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,SAAS,yBAAyB;AAC3C,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAIhB,SAAS,gBAAgB,SAAoD;AAClF,SAAO,YAAY;AACrB;AAEO,SAAS,SAAS,SAAuB;AAC9C,SAAO,gBAAgB,OAAO,IAAI,kBAAkB,UAAU,YAAY;AAC5E;AAWO,MAAM,cAAc,CAAC,UAA4B;AACtD,QAAM,EAAE,SAAS,UAAU,MAAM,SAAS,UAAU,GAAG,WAAW,IAAI;AACtE,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,cAAc,YAAY,OAAO;AAIvC,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;AAE9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,YAAM,gBAAgB,gBAAgB,OAAO;AAC7C,iBAAW,KAAK,OAAO,gBAAgB,OAAO,IAAI,QAAQ,OAAO;AACjE,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAgB,gBAAgB,OAAO,IAAI,QAAQ;AAAA,MAClD,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;AAAA,QACf;AAAA,QAEJ,GAAG,MAAM;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;AAMA,MAAM,iBAAiB;AAEvB,MAAM,yBAAyB,OAAO,gBAAgB;AAAA,
|
|
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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Checkbox.js
CHANGED
|
@@ -67,6 +67,7 @@ const BubbleInput = (props) => {
|
|
|
67
67
|
};
|
|
68
68
|
const INDICATOR_NAME = "CheckboxIndicator";
|
|
69
69
|
const CheckboxIndicatorFrame = styled(ThemeableStack, {
|
|
70
|
+
// use Checkbox for easier themes
|
|
70
71
|
name: INDICATOR_NAME
|
|
71
72
|
});
|
|
72
73
|
const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
@@ -92,7 +93,6 @@ const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
|
92
93
|
});
|
|
93
94
|
if (forceMount || isIndeterminate(context.state) || context.state === true)
|
|
94
95
|
return <CheckboxIndicatorFrame
|
|
95
|
-
theme="active"
|
|
96
96
|
data-state={getState(context.state)}
|
|
97
97
|
data-disabled={context.disabled ? "" : void 0}
|
|
98
98
|
pointerEvents="none"
|
|
@@ -210,7 +210,6 @@ const Checkbox = withStaticProperties(
|
|
|
210
210
|
<CheckboxFrame
|
|
211
211
|
width={size}
|
|
212
212
|
height={size}
|
|
213
|
-
theme={checked ? "active" : null}
|
|
214
213
|
tag="button"
|
|
215
214
|
role="checkbox"
|
|
216
215
|
aria-labelledby={labelledBy}
|
package/dist/jsx/Checkbox.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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 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 theme=\"active\"\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 theme={checked ? 'active' : null}\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
|
-
"mappings": "AAGA,SAAS,mBAAmB;AAC5B;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,SAAS,yBAAyB;AAC3C,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAIhB,SAAS,gBAAgB,SAAoD;AAClF,SAAO,YAAY;AACrB;AAEO,SAAS,SAAS,SAAuB;AAC9C,SAAO,gBAAgB,OAAO,IAAI,kBAAkB,UAAU,YAAY;AAC5E;AAWO,MAAM,cAAc,CAAC,UAA4B;AACtD,QAAM,EAAE,SAAS,UAAU,MAAM,SAAS,UAAU,GAAG,WAAW,IAAI;AACtE,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,cAAc,YAAY,OAAO;AAIvC,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;AAE9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,YAAM,gBAAgB,gBAAgB,OAAO;AAC7C,iBAAW,KAAK,OAAO,gBAAgB,OAAO,IAAI,QAAQ,OAAO;AACjE,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE,CAAC;AAAA,IACC,KAAK;AAAA,IACL,gBAAgB,gBAAgB,OAAO,IAAI,QAAQ;AAAA,QAC/C;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;AAAA,MACf;AAAA,MAEJ,GAAG,MAAM;AAAA,IACX;AAAA,EACF;AAEJ;AAMA,MAAM,iBAAiB;AAEvB,MAAM,yBAAyB,OAAO,gBAAgB;AAAA,
|
|
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
|
+
"mappings": "AAGA,SAAS,mBAAmB;AAC5B;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,SAAS,yBAAyB;AAC3C,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAIhB,SAAS,gBAAgB,SAAoD;AAClF,SAAO,YAAY;AACrB;AAEO,SAAS,SAAS,SAAuB;AAC9C,SAAO,gBAAgB,OAAO,IAAI,kBAAkB,UAAU,YAAY;AAC5E;AAWO,MAAM,cAAc,CAAC,UAA4B;AACtD,QAAM,EAAE,SAAS,UAAU,MAAM,SAAS,UAAU,GAAG,WAAW,IAAI;AACtE,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,cAAc,YAAY,OAAO;AAIvC,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;AAE9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,YAAM,gBAAgB,gBAAgB,OAAO;AAC7C,iBAAW,KAAK,OAAO,gBAAgB,OAAO,IAAI,QAAQ,OAAO;AACjE,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE,CAAC;AAAA,IACC,KAAK;AAAA,IACL,gBAAgB,gBAAgB,OAAO,IAAI,QAAQ;AAAA,QAC/C;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;AAAA,MACf;AAAA,MAEJ,GAAG,MAAM;AAAA,IACX;AAAA,EACF;AAEJ;AAMA,MAAM,iBAAiB;AAEvB,MAAM,yBAAyB,OAAO,gBAAgB;AAAA;AAAA,EAEpD,MAAM;AACR,CAAC;AAgBD,MAAM,oBAAoB,uBAAuB;AAAA,EAC/C,MAAM;AAAA,IACJ,CAAC,OAA4C,iBAAiB;AAC5D,YAAM;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,IAAI;AACJ,YAAM,UAAU,mBAAmB,gBAAgB,eAAe;AAClE,YAAM,YACH,OAAO,QAAQ,SAAS,WACrB,QAAQ,OAAO,OACf,YAAY,QAAQ,IAAI,KAAK,QAAQ;AAC3C,YAAM,QAAQ,SAAS;AACvB,YAAM,gBAAgB,iBAAiB,EAAE,MAAM,UAAU,OAAO,MAAM,MAAM,CAAC;AAE7E,YAAM,YAAY,MAAM,SAAS,QAAQ,YAAY;AACrD,YAAM,WAAW,UAAU,IAAI,CAAC,UAAU;AACxC,YAAI,qBAAqB,CAAC,MAAM,eAAe,KAAK,GAAG;AACrD,iBAAO;AAAA,QACT;AACA,eAAO,cAAc,KAAK;AAAA,MAC5B,CAAC;AAED,UAAI,cAAc,gBAAgB,QAAQ,KAAK,KAAK,QAAQ,UAAU;AACpE,eACE,CAAC;AAAA,UACC,YAAY,SAAS,QAAQ,KAAK;AAAA,UAClC,eAAe,QAAQ,WAAW,KAAK;AAAA,UACvC,cAAc;AAAA,cACV;AAAA,UACJ,KAAK;AAAA,UAEJ,SACH,EARC;AAWL,aAAO;AAAA,IACT;AAAA,EACF;AACF;AAEA,kBAAkB,cAAc;AAMhC,MAAM,gBAAgB;AAEf,MAAM,gBAAgB,OAAO,gBAAgB;AAAA,EAClD,MAAM;AAAA,EACN,KAAK;AAAA,EAEL,UAAU;AAAA,IACR,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,WAAW;AAAA,QACX,aAAa;AAAA,QACb,aAAa;AAAA,QAEb,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,QAEA,YAAY;AAAA,UACV,aAAa;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAAA,IAEA,MAAM;AAAA,MACJ,WAAW,CAAC,KAAK,EAAE,OAAO,MAAM;AAC9B,cAAM,cAAc,iBAAiB,QAAQ,GAAG,CAAC,IAAI;AACrD,eAAO;AAAA,UACL,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,iBAAiB;AAAA,IACf,UAAU;AAAA,EACZ;AACF,CAAC;AAGD,MAAM,CAAC,uBAAuB,mBAAmB,IAAI,mBAAmB,aAAa;AASrF,MAAM,CAAC,kBAAkB,kBAAkB,IACzC,sBAA4C,aAAa;AAkBpD,MAAM,WAAW;AAAA,EACtB,cAAc;AAAA,IACZ,MAAM;AAAA,MACJ,CAAC,OAAmC,iBAAiB;AACnD,cAAM;AAAA,UACJ;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UACA,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ,aAAa;AAAA,UACb;AAAA,UACA,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACL,IAAI;AACJ,cAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAmC,IAAI;AACzE,cAAM,eAAe,gBAAgB,cAAc,CAAC,SAAS,UAAU,IAAI,CAAC;AAC5E,cAAM,mCAAmC,MAAM,OAAO,KAAK;AAC3D,cAAM,cAAc,oBAAoB,KAAK;AAE7C,cAAM,gBAAgB,QAClB,SACE,QAAQ,OAAO,QAAQ,MAAM,CAAC,IAC9B,OACF;AACJ,cAAM,CAAC,UAAU,OAAO,UAAU,IAAI,qBAAqB;AAAA,UACzD,MAAM;AAAA,UACN,aAAa;AAAA,UACb,UAAU;AAAA,QACZ,CAAC;AAED,cAAM,eAAe;AAAA,UACnB,kBAAkB,QAAQ,YAAY,MAAM,UAAU;AAAA,QACxD;AACA,cAAM,OAAO,YAAY,KAAK,MAAM,eAAe,SAAS,IAAI;AAEhE,cAAM,UAAU,gBAAgB,MAAM;AACtC,cAAM,aAAa,kBAAkB;AAErC,YAAI,QAAQ,IAAI,mBAAmB,UAAU;AAE3C,gBAAM,UAAU,MAAM;AACpB,gBAAI,CAAC,MAAM;AAAI;AACf,mBAAO,kBAAkB,MAAM,IAAI;AAAA,cACjC,gBAAgB,MAAM;AACpB,2BAAW,CAAC,MAAM,CAAC,CAAC;AAAA,cACtB;AAAA,cACA,OAAO,MAAM;AAAA,cAAC;AAAA,YAChB,CAAC;AAAA,UACH,GAAG,CAAC,MAAM,IAAI,UAAU,CAAC;AAAA,QAC3B;AAEA,eACE,CAAC;AAAA,UACC,OAAO;AAAA,UACP,OAAO;AAAA,UACP,UAAU;AAAA,UACV,MAAM;AAAA,UACN,WAAW;AAAA,UAEV,SAAS,SACR,CAAC;AAAA,UACC,SAAS;AAAA,UACT,SAAS,CAAC,iCAAiC;AAAA,UAC3C,MAAM;AAAA,UACN,OAAO;AAAA,UACP,SAAS;AAAA,UACT,UAAU;AAAA,UACV,UAAU;AAAA,UACV,IAAI,MAAM;AAAA,QACZ,KAEA;AAAA,UACE,CAAC;AAAA,YACC,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,IAAI;AAAA,YACJ,KAAK;AAAA,YACL,iBAAiB;AAAA,YACjB,cAAc,gBAAgB,OAAO,IAAI,UAAU;AAAA,YACnD,eAAe;AAAA,YACf,YAAY,SAAS,OAAO;AAAA,YAC5B,eAAe,WAAW,KAAK;AAAA,YAC/B,UAAU;AAAA,gBACN;AAAA,YACJ,KAAK;AAAA,gBACA,SAAS;AAAA,cACZ,MAAM;AAAA,cACN;AAAA,cACA,WAAW;AAAA,gBACR,MAA6C;AAAA,gBAC9C,CAAC,UAAU;AAET,sBAAI,MAAM,QAAQ;AAAS,0BAAM,eAAe;AAAA,gBAClD;AAAA,cACF;AAAA,YACF;AAAA,YACA,SAAS,qBAAqB,MAAM,SAAgB,CAAC,UAAU;AAC7D;AAAA,gBAAW,CAAC,gBACV,gBAAgB,WAAW,IAAI,OAAO,CAAC;AAAA,cACzC;AACA,kBAAI,eAAe;AACjB,iDAAiC,UAC/B,MAAM,qBAAqB;AAI7B,oBAAI,CAAC,iCAAiC;AACpC,wBAAM,gBAAgB;AAAA,cAC1B;AAAA,YACF,CAAC;AAAA,UACH;AAAA,WAEC,SAAS,gBACR,CAAC;AAAA,YACC;AAAA,YACA,SAAS;AAAA,YACT,SAAS,CAAC,iCAAiC;AAAA,YAC3C,MAAM;AAAA,YACN,OAAO;AAAA,YACP,SAAS;AAAA,YACT,UAAU;AAAA,YACV,UAAU;AAAA,UACZ,KACE;AAAA,QACN,IAEJ,EA1EC;AAAA,MA4EL;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,WAAW;AAAA,EACb;AACF;AAEA,SAAS,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Checkbox.mjs
CHANGED
|
@@ -67,6 +67,7 @@ const BubbleInput = (props) => {
|
|
|
67
67
|
};
|
|
68
68
|
const INDICATOR_NAME = "CheckboxIndicator";
|
|
69
69
|
const CheckboxIndicatorFrame = styled(ThemeableStack, {
|
|
70
|
+
// use Checkbox for easier themes
|
|
70
71
|
name: INDICATOR_NAME
|
|
71
72
|
});
|
|
72
73
|
const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
@@ -92,7 +93,6 @@ const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
|
92
93
|
});
|
|
93
94
|
if (forceMount || isIndeterminate(context.state) || context.state === true)
|
|
94
95
|
return <CheckboxIndicatorFrame
|
|
95
|
-
theme="active"
|
|
96
96
|
data-state={getState(context.state)}
|
|
97
97
|
data-disabled={context.disabled ? "" : void 0}
|
|
98
98
|
pointerEvents="none"
|
|
@@ -210,7 +210,6 @@ const Checkbox = withStaticProperties(
|
|
|
210
210
|
<CheckboxFrame
|
|
211
211
|
width={size}
|
|
212
212
|
height={size}
|
|
213
|
-
theme={checked ? "active" : null}
|
|
214
213
|
tag="button"
|
|
215
214
|
role="checkbox"
|
|
216
215
|
aria-labelledby={labelledBy}
|
|
@@ -1,7 +1,7 @@
|
|
|
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 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 theme=\"active\"\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 theme={checked ? 'active' : null}\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
|
-
"mappings": "AAGA,SAAS,mBAAmB;AAC5B;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,SAAS,yBAAyB;AAC3C,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,YAAY,WAAW;AAIhB,SAAS,gBAAgB,SAAoD;AAClF,SAAO,YAAY;AACrB;AAEO,SAAS,SAAS,SAAuB;AAC9C,SAAO,gBAAgB,OAAO,IAAI,kBAAkB,UAAU,YAAY;AAC5E;AAWO,MAAM,cAAc,CAAC,UAA4B;AACtD,QAAM,EAAE,SAAS,UAAU,MAAM,SAAS,UAAU,GAAG,WAAW,IAAI;AACtE,QAAM,MAAM,MAAM,OAAyB,IAAI;AAC/C,QAAM,cAAc,YAAY,OAAO;AAIvC,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;AAE9B,QAAI,gBAAgB,WAAW,YAAY;AACzC,YAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,QAAQ,CAAC;AAC5C,YAAM,gBAAgB,gBAAgB,OAAO;AAC7C,iBAAW,KAAK,OAAO,gBAAgB,OAAO,IAAI,QAAQ,OAAO;AACjE,YAAM,cAAc,KAAK;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,OAAO,CAAC;AAElC,SACE,CAAC;AAAA,IACC,KAAK;AAAA,IACL,gBAAgB,gBAAgB,OAAO,IAAI,QAAQ;AAAA,QAC/C;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;AAAA,MACf;AAAA,MAEJ,GAAG,MAAM;AAAA,IACX;AAAA,EACF;AAEJ;AAMA,MAAM,iBAAiB;AAEvB,MAAM,yBAAyB,OAAO,gBAAgB;AAAA,
|
|
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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/checkbox",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.13",
|
|
4
4
|
"sideEffects": [
|
|
5
5
|
"*.css"
|
|
6
6
|
],
|
|
@@ -20,22 +20,22 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@radix-ui/react-use-previous": "^0.1.1",
|
|
23
|
-
"@tamagui/core": "^1.5.
|
|
24
|
-
"@tamagui/create-context": "^1.5.
|
|
25
|
-
"@tamagui/focusable": "^1.5.
|
|
26
|
-
"@tamagui/font-size": "^1.5.
|
|
27
|
-
"@tamagui/get-size": "^1.5.
|
|
28
|
-
"@tamagui/helpers-tamagui": "^1.5.
|
|
29
|
-
"@tamagui/label": "^1.5.
|
|
30
|
-
"@tamagui/stacks": "^1.5.
|
|
31
|
-
"@tamagui/use-controllable-state": "^1.5.
|
|
23
|
+
"@tamagui/core": "^1.5.13",
|
|
24
|
+
"@tamagui/create-context": "^1.5.13",
|
|
25
|
+
"@tamagui/focusable": "^1.5.13",
|
|
26
|
+
"@tamagui/font-size": "^1.5.13",
|
|
27
|
+
"@tamagui/get-size": "^1.5.13",
|
|
28
|
+
"@tamagui/helpers-tamagui": "^1.5.13",
|
|
29
|
+
"@tamagui/label": "^1.5.13",
|
|
30
|
+
"@tamagui/stacks": "^1.5.13",
|
|
31
|
+
"@tamagui/use-controllable-state": "^1.5.13"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": "*",
|
|
35
35
|
"react-dom": "*"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@tamagui/build": "^1.5.
|
|
38
|
+
"@tamagui/build": "^1.5.13",
|
|
39
39
|
"react": "^18.2.0",
|
|
40
40
|
"react-dom": "^18.2.0"
|
|
41
41
|
},
|
package/src/Checkbox.tsx
CHANGED
|
@@ -104,6 +104,7 @@ export const BubbleInput = (props: BubbleInputProps) => {
|
|
|
104
104
|
const INDICATOR_NAME = 'CheckboxIndicator'
|
|
105
105
|
|
|
106
106
|
const CheckboxIndicatorFrame = styled(ThemeableStack, {
|
|
107
|
+
// use Checkbox for easier themes
|
|
107
108
|
name: INDICATOR_NAME,
|
|
108
109
|
})
|
|
109
110
|
|
|
@@ -150,7 +151,6 @@ const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
|
|
|
150
151
|
if (forceMount || isIndeterminate(context.state) || context.state === true)
|
|
151
152
|
return (
|
|
152
153
|
<CheckboxIndicatorFrame
|
|
153
|
-
theme="active"
|
|
154
154
|
data-state={getState(context.state)}
|
|
155
155
|
data-disabled={context.disabled ? '' : undefined}
|
|
156
156
|
pointerEvents="none"
|
|
@@ -325,7 +325,6 @@ export const Checkbox = withStaticProperties(
|
|
|
325
325
|
<CheckboxFrame
|
|
326
326
|
width={size}
|
|
327
327
|
height={size}
|
|
328
|
-
theme={checked ? 'active' : null}
|
|
329
328
|
tag="button"
|
|
330
329
|
role="checkbox"
|
|
331
330
|
aria-labelledby={labelledBy}
|
package/types/Checkbox.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,QAAQ,EACR,UAAU,EACV,cAAc,EASf,MAAM,eAAe,CAAA;AAUtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAA;AAEpD,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,IAAI,eAAe,CAElF;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,YAAY,6CAE7C;AAED,KAAK,UAAU,GAAG,GAAG,CAAA;AACrB,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAC5D,OAAO,EAAE,YAAY,CAAA;IACrB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,OAAO,CAAA;IAEhB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,gBAkDlD,CAAA;AAQD,QAAA,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,QAAQ,EACR,UAAU,EACV,cAAc,EASf,MAAM,eAAe,CAAA;AAUtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAA;AAEpD,wBAAgB,eAAe,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO,IAAI,eAAe,CAElF;AAED,wBAAgB,QAAQ,CAAC,OAAO,EAAE,YAAY,6CAE7C;AAED,KAAK,UAAU,GAAG,GAAG,CAAA;AACrB,UAAU,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IAC5D,OAAO,EAAE,YAAY,CAAA;IACrB,OAAO,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,OAAO,CAAA;IAEhB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,gBAkDlD,CAAA;AAQD,QAAA,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAG1B,CAAA;AAEF,KAAK,2BAA2B,GAAG,QAAQ,CAAC,OAAO,sBAAsB,CAAC,CAAA;AAE1E,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,GAAG;IACjE;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAA;IACjB;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAsDD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCxB,CAAA;AAGF,QAAA,MAA8B,mBAAmB,+CAAqC,CAAA;AAYtF,KAAK,kBAAkB,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAA;AACxD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,gBAAgB,CAAC;IAC9D,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,cAAc,CAAC,EAAE,YAAY,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,CAAC,OAAO,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QArInB;;;WAGG;;QAEH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;CA0QJ,CAAA;AAID,OAAO,EAAE,mBAAmB,EAAE,CAAA"}
|