@tamagui/checkbox 1.3.0 → 1.4.0

package/src/Checkbox.tsx

@@ -7,10 +7,8 @@ import {
   SizeTokens,
   TamaguiElement,
   composeEventHandlers,
-  getConfig,
   getVariableValue,
   isWeb,
-  mergeProps,
   styled,
   useComposedRefs,
   useMediaPropsActive,
@@ -24,7 +22,7 @@ import { getFontSize } from '@tamagui/font-size'
 import { getSize, stepTokenUpOrDown } from '@tamagui/get-size'
 import { useGetThemedIcon } from '@tamagui/helpers-tamagui'
 import { useLabelContext } from '@tamagui/label'
-import { ThemeableStack, YStack } from '@tamagui/stacks'
+import { ThemeableStack } from '@tamagui/stacks'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import * as React from 'react'
 
@@ -123,47 +121,49 @@ export type CheckboxIndicatorProps = CheckboxIndicatorFrameProps & {
   disablePassStyles?: boolean
 }
 
-const CheckboxIndicator = React.forwardRef<TamaguiElement, CheckboxIndicatorProps>(
-  (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {
-    const {
-      __scopeCheckbox,
-      children: childrenProp,
-      forceMount,
-      disablePassStyles,
-      ...indicatorProps
-    } = props
-    const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox)
-    const iconSize =
-      (typeof context.size === 'number'
-        ? context.size * 0.65
-        : getFontSize(context.size)) * context.scaleIcon
-    const theme = useTheme()
-    const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })
-
-    const childrens = React.Children.toArray(childrenProp)
-    const children = childrens.map((child) => {
-      if (disablePassStyles || !React.isValidElement(child)) {
-        return child
-      }
-      return getThemedIcon(child)
-    })
-
-    if (forceMount || isIndeterminate(context.state) || context.state === true)
-      return (
-        <CheckboxIndicatorFrame
-          theme="active"
-          data-state={getState(context.state)}
-          data-disabled={context.disabled ? '' : undefined}
-          pointerEvents="none"
-          {...indicatorProps}
-          ref={forwardedRef}
-        >
-          {children}
-        </CheckboxIndicatorFrame>
-      )
-
-    return null
-  }
+const CheckboxIndicator = CheckboxIndicatorFrame.extractable(
+  React.forwardRef<TamaguiElement, CheckboxIndicatorProps>(
+    (props: ScopedProps<CheckboxIndicatorProps>, forwardedRef) => {
+      const {
+        __scopeCheckbox,
+        children: childrenProp,
+        forceMount,
+        disablePassStyles,
+        ...indicatorProps
+      } = props
+      const context = useCheckboxContext(INDICATOR_NAME, __scopeCheckbox)
+      const iconSize =
+        (typeof context.size === 'number'
+          ? context.size * 0.65
+          : getFontSize(context.size)) * context.scaleIcon
+      const theme = useTheme()
+      const getThemedIcon = useGetThemedIcon({ size: iconSize, color: theme.color })
+
+      const childrens = React.Children.toArray(childrenProp)
+      const children = childrens.map((child) => {
+        if (disablePassStyles || !React.isValidElement(child)) {
+          return child
+        }
+        return getThemedIcon(child)
+      })
+
+      if (forceMount || isIndeterminate(context.state) || context.state === true)
+        return (
+          <CheckboxIndicatorFrame
+            theme="active"
+            data-state={getState(context.state)}
+            data-disabled={context.disabled ? '' : undefined}
+            pointerEvents="none"
+            {...indicatorProps}
+            ref={forwardedRef}
+          >
+            {children}
+          </CheckboxIndicatorFrame>
+        )
+
+      return null
+    }
+  )
 )
 
 CheckboxIndicator.displayName = INDICATOR_NAME
@@ -177,19 +177,24 @@ const CHECKBOX_NAME = 'Checkbox'
 export const CheckboxFrame = styled(ThemeableStack, {
   name: CHECKBOX_NAME,
   tag: 'button',
-  backgroundColor: '$background',
-  alignItems: 'center',
-  justifyContent: 'center',
-  pressTheme: true,
-  focusable: true,
-  borderWidth: 2,
-  borderColor: 'transparent',
-
-  focusStyle: {
-    borderColor: '$borderColorFocus',
-  },
 
   variants: {
+    unstyled: {
+      false: {
+        backgroundColor: '$background',
+        alignItems: 'center',
+        justifyContent: 'center',
+        pressTheme: true,
+        focusable: true,
+        borderWidth: 2,
+        borderColor: 'transparent',
+
+        focusStyle: {
+          borderColor: '$borderColorFocus',
+        },
+      },
+    },
+
     size: {
       '...size': (val, { tokens }) => {
         const radiusToken = getVariableValue(getSize(val)) / 8
@@ -202,6 +207,7 @@ export const CheckboxFrame = styled(ThemeableStack, {
 
   defaultVariants: {
     size: '$true',
+    unstyled: false,
   },
 })
 
@@ -230,6 +236,7 @@ export interface CheckboxProps
   value?: string
   native?: boolean
   scaleIcon?: number
+  scaleSize?: number
   sizeAdjust?: number
 }
 
@@ -245,6 +252,7 @@ export const Checkbox = withStaticProperties(
           defaultChecked,
           required,
           scaleIcon = 1,
+          scaleSize = 0.45,
           sizeAdjust = 0,
           disabled,
           value = 'on',
@@ -268,13 +276,15 @@ export const Checkbox = withStaticProperties(
           onChange: onCheckedChange,
         })
 
-        const adjustedSizeToken = stepTokenUpOrDown('size', propsActive.size, sizeAdjust)
-        const size = Math.floor(getVariableValue(adjustedSizeToken) * 0.5)
+        const adjustedSize = getVariableValue(
+          stepTokenUpOrDown('size', propsActive.size, sizeAdjust)
+        )
+        const size = scaleSize ? Math.round(adjustedSize * scaleSize) : adjustedSize
 
         const labelId = useLabelContext(button)
         const labelledBy = ariaLabelledby || labelId
 
-        if (!isWeb) {
+        if (process.env.TAMAGUI_TARGET === 'native') {
           // eslint-disable-next-line react-hooks/rules-of-hooks
           React.useEffect(() => {
             if (!props.id) return
@@ -288,85 +298,82 @@ export const Checkbox = withStaticProperties(
         }
 
         return (
-          // YStack is here to provide theme for native input
-          <YStack asChild theme={checkboxProps.theme}>
-            <CheckboxProvider
-              scope={__scopeCheckbox}
-              state={checked}
-              disabled={disabled}
-              size={size}
-              scaleIcon={scaleIcon}
-            >
-              {isWeb && native ? (
-                <BubbleInput
-                  control={button}
-                  bubbles={!hasConsumerStoppedPropagationRef.current}
-                  name={name}
-                  value={value}
-                  checked={checked}
-                  required={required}
+          <CheckboxProvider
+            scope={__scopeCheckbox}
+            state={checked}
+            disabled={disabled}
+            size={size}
+            scaleIcon={scaleIcon}
+          >
+            {isWeb && native ? (
+              <BubbleInput
+                control={button}
+                bubbles={!hasConsumerStoppedPropagationRef.current}
+                name={name}
+                value={value}
+                checked={checked}
+                required={required}
+                disabled={disabled}
+                id={props.id}
+              />
+            ) : (
+              <>
+                <CheckboxFrame
+                  width={size}
+                  height={size}
+                  theme={checked ? 'active' : null}
+                  tag="button"
+                  role="checkbox"
+                  aria-labelledby={labelledBy}
+                  aria-checked={isIndeterminate(checked) ? 'mixed' : checked}
+                  aria-required={required}
+                  data-state={getState(checked)}
+                  data-disabled={disabled ? '' : undefined}
                   disabled={disabled}
-                  id={props.id}
+                  {...checkboxProps}
+                  ref={composedRefs}
+                  {...(isWeb && {
+                    type: 'button',
+                    value,
+                    onKeyDown: composeEventHandlers(
+                      (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,
+                      (event) => {
+                        // According to WAI ARIA, Checkboxes don't activate on enter keypress
+                        if (event.key === 'Enter') event.preventDefault()
+                      }
+                    ),
+                  })}
+                  onPress={composeEventHandlers(props.onPress as any, (event) => {
+                    setChecked((prevChecked) =>
+                      isIndeterminate(prevChecked) ? true : !prevChecked
+                    )
+                    if (isFormControl) {
+                      hasConsumerStoppedPropagationRef.current =
+                        event.isPropagationStopped()
+                      // if checkbox is in a form, stop propagation from the button so that we only propagate
+                      // one click event (from the input). We propagate changes from an input so that native
+                      // form validation works and form events reflect checkbox updates.
+                      if (!hasConsumerStoppedPropagationRef.current)
+                        event.stopPropagation()
+                    }
+                  })}
                 />
-              ) : (
-                <>
-                  <CheckboxFrame
-                    width={size}
-                    height={size}
-                    theme={checked ? 'active' : null}
-                    tag="button"
-                    role="checkbox"
-                    aria-labelledby={labelledBy}
-                    aria-checked={isIndeterminate(checked) ? 'mixed' : checked}
-                    aria-required={required}
-                    data-state={getState(checked)}
-                    data-disabled={disabled ? '' : undefined}
+
+                {isWeb && isFormControl ? (
+                  <BubbleInput
+                    isHidden
+                    control={button}
+                    bubbles={!hasConsumerStoppedPropagationRef.current}
+                    name={name}
+                    value={value}
+                    checked={checked}
+                    required={required}
                     disabled={disabled}
-                    {...checkboxProps}
-                    ref={composedRefs}
-                    {...(isWeb && {
-                      type: 'button',
-                      value: value,
-                      onKeyDown: composeEventHandlers(
-                        (props as React.HTMLProps<HTMLButtonElement>).onKeyDown,
-                        (event) => {
-                          // According to WAI ARIA, Checkboxes don't activate on enter keypress
-                          if (event.key === 'Enter') event.preventDefault()
-                        }
-                      ),
-                    })}
-                    onPress={composeEventHandlers(props.onPress as any, (event) => {
-                      setChecked((prevChecked) =>
-                        isIndeterminate(prevChecked) ? true : !prevChecked
-                      )
-                      if (isFormControl) {
-                        hasConsumerStoppedPropagationRef.current =
-                          event.isPropagationStopped()
-                        // if checkbox is in a form, stop propagation from the button so that we only propagate
-                        // one click event (from the input). We propagate changes from an input so that native
-                        // form validation works and form events reflect checkbox updates.
-                        if (!hasConsumerStoppedPropagationRef.current)
-                          event.stopPropagation()
-                      }
-                    })}
                   />
-
-                  {isWeb && isFormControl ? (
-                    <BubbleInput
-                      isHidden
-                      control={button}
-                      bubbles={!hasConsumerStoppedPropagationRef.current}
-                      name={name}
-                      value={value}
-                      checked={checked}
-                      required={required}
-                      disabled={disabled}
-                    />
-                  ) : null}
-                </>
-              )}
-            </CheckboxProvider>
-          </YStack>
+                ) : null}
+              </>
+            )}
+          </CheckboxProvider>
         )
       }
     )
@@ -379,8 +386,3 @@ export const Checkbox = withStaticProperties(
 Checkbox.displayName = CHECKBOX_NAME
 
 export { createCheckboxScope }
-
-const cloneElementWithPropOrder = (child: any, props: Object) => {
-  const next = mergeProps(child.props, props, false, getConfig().shorthands)[0]
-  return React.cloneElement({ ...child, props: null }, next)
-}

package/types/Checkbox.d.ts

@@ -152,7 +152,8 @@ export declare const CheckboxFrame: import("@tamagui/core").TamaguiComponent<Omi
     readonly bordered?: number | boolean | undefined;
     readonly transparent?: boolean | undefined;
     readonly chromeless?: boolean | "all" | undefined;
-}, "size"> & {
+}, "size" | "unstyled"> & {
+    readonly unstyled?: boolean | undefined;
     readonly size?: SizeTokens | undefined;
 } & import("@tamagui/core").MediaProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{
     readonly fullscreen?: boolean | undefined;
@@ -169,7 +170,8 @@ export declare const CheckboxFrame: import("@tamagui/core").TamaguiComponent<Omi
     readonly bordered?: number | boolean | undefined;
     readonly transparent?: boolean | undefined;
     readonly chromeless?: boolean | "all" | undefined;
-}, "size"> & {
+}, "size" | "unstyled"> & {
+    readonly unstyled?: boolean | undefined;
     readonly size?: SizeTokens | undefined;
 }>> & import("@tamagui/core").PseudoProps<Partial<Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps & Omit<{
     readonly fullscreen?: boolean | undefined;
@@ -186,7 +188,8 @@ export declare const CheckboxFrame: import("@tamagui/core").TamaguiComponent<Omi
     readonly bordered?: number | boolean | undefined;
     readonly transparent?: boolean | undefined;
     readonly chromeless?: boolean | "all" | undefined;
-}, "size"> & {
+}, "size" | "unstyled"> & {
+    readonly unstyled?: boolean | undefined;
     readonly size?: SizeTokens | undefined;
 }>>, TamaguiElement, Omit<import("react-native").ViewProps, "display" | "children" | "onLayout" | keyof import("react-native").GestureResponderHandlers> & import("@tamagui/core").ExtendBaseStackProps & import("@tamagui/core").TamaguiComponentPropsBase & import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase> & import("@tamagui/core").WithShorthands<import("@tamagui/core").WithThemeValues<import("@tamagui/core").StackStylePropsBase>> & import("@tamagui/core/types/reactNativeTypes").RNViewProps, {
     readonly fullscreen?: boolean | undefined;
@@ -204,6 +207,7 @@ export declare const CheckboxFrame: import("@tamagui/core").TamaguiComponent<Omi
     readonly transparent?: boolean | undefined;
     readonly chromeless?: boolean | "all" | undefined;
 } & {
+    readonly unstyled?: boolean | undefined;
     readonly size?: SizeTokens | undefined;
 }>;
 declare const createCheckboxScope: import("@tamagui/create-context").CreateScope;
@@ -218,6 +222,7 @@ export interface CheckboxProps extends Omit<CheckboxFrameProps, 'checked' | 'def
     value?: string;
     native?: boolean;
     scaleIcon?: number;
+    scaleSize?: number;
     sizeAdjust?: number;
 }
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>> & {

package/types/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,QAAQ,EACR,UAAU,EACV,cAAc,EAWf,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAE1B,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;AAqDD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BxB,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,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAzHnB;;;WAGG;;QAEH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;CA+PJ,CAAA;AAID,OAAO,EAAE,mBAAmB,EAAE,CAAA"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAE1B,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;AAuDD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCxB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAlInB;;;WAGG;;QAEH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;CAwQJ,CAAA;AAID,OAAO,EAAE,mBAAmB,EAAE,CAAA"}