@tamagui/switch 1.30.0 → 1.30.2

package/src/Switch.tsx

@@ -172,136 +172,133 @@ export type SwitchProps = SwitchButtonProps & {
   onCheckedChange?(checked: boolean): void
 }
 
-export const Switch = withStaticProperties(
-  SwitchFrame.extractable(
-    React.forwardRef<HTMLButtonElement | View, SwitchProps>(
-      (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {
-        const {
-          __scopeSwitch,
-          labeledBy: ariaLabelledby,
-          name,
-          checked: checkedProp,
-          defaultChecked,
-          required,
-          disabled,
-          value = 'on',
-          onCheckedChange,
-          size = '$true',
-          unstyled = false,
-          native: nativeProp,
-          nativeProps,
-          ...switchProps
-        } = props
-        const native = Array.isArray(nativeProp) ? nativeProp : [nativeProp]
-        const shouldRenderMobileNative =
-          (!isWeb && nativeProp === true) ||
-          native.includes('mobile') ||
-          (native.includes('android') && Platform.OS === 'android') ||
-          (native.includes('ios') && Platform.OS === 'ios')
-        if (shouldRenderMobileNative) {
-          return (
-            <NativeSwitch
-              value={checkedProp}
-              onValueChange={onCheckedChange}
-              {...nativeProps}
-            />
-          )
-        }
-        const [button, setButton] = React.useState<HTMLButtonElement | null>(null)
-        const composedRefs = useComposedRefs(forwardedRef, (node) =>
-          setButton(node as any)
+const SwitchComponent = SwitchFrame.extractable(
+  React.forwardRef<HTMLButtonElement | View, SwitchProps>(
+    (props: ScopedProps<SwitchProps, 'Switch'>, forwardedRef) => {
+      const {
+        __scopeSwitch,
+        labeledBy: ariaLabelledby,
+        name,
+        checked: checkedProp,
+        defaultChecked,
+        required,
+        disabled,
+        value = 'on',
+        onCheckedChange,
+        size = '$true',
+        unstyled = false,
+        native: nativeProp,
+        nativeProps,
+        ...switchProps
+      } = props
+      const native = Array.isArray(nativeProp) ? nativeProp : [nativeProp]
+      const shouldRenderMobileNative =
+        (!isWeb && nativeProp === true) ||
+        native.includes('mobile') ||
+        (native.includes('android') && Platform.OS === 'android') ||
+        (native.includes('ios') && Platform.OS === 'ios')
+      if (shouldRenderMobileNative) {
+        return (
+          <NativeSwitch
+            value={checkedProp}
+            onValueChange={onCheckedChange}
+            {...nativeProps}
+          />
         )
-        const labelId = useLabelContext(button)
-        const labelledBy = ariaLabelledby || labelId
-        const hasConsumerStoppedPropagationRef = React.useRef(false)
-        // We set this to true by default so that events bubble to forms without JS (SSR)
-        const isFormControl = isWeb
-          ? button
-            ? Boolean(button.closest('form'))
-            : true
-          : false
-        const [checked = false, setChecked] = useControllableState({
-          prop: checkedProp,
-          defaultProp: defaultChecked || false,
-          onChange: onCheckedChange,
-          transition: true,
-        })
-
-        if (!isWeb) {
-          // eslint-disable-next-line react-hooks/rules-of-hooks
-          React.useEffect(() => {
-            if (!props.id) return
-            return registerFocusable(props.id, {
-              focus: () => {
-                setChecked((x) => !x)
-              },
-            })
-          }, [props.id, setChecked])
-        }
+      }
+      const [button, setButton] = React.useState<HTMLButtonElement | null>(null)
+      const composedRefs = useComposedRefs(forwardedRef, (node) => setButton(node as any))
+      const labelId = useLabelContext(button)
+      const labelledBy = ariaLabelledby || labelId
+      const hasConsumerStoppedPropagationRef = React.useRef(false)
+      // We set this to true by default so that events bubble to forms without JS (SSR)
+      const isFormControl = isWeb
+        ? button
+          ? Boolean(button.closest('form'))
+          : true
+        : false
+      const [checked = false, setChecked] = useControllableState({
+        prop: checkedProp,
+        defaultProp: defaultChecked || false,
+        onChange: onCheckedChange,
+        transition: true,
+      })
 
-        return (
-          <SwitchProvider
-            scope={__scopeSwitch}
-            checked={checked}
-            disabled={disabled}
-            size={size}
+      if (!isWeb) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useEffect(() => {
+          if (!props.id) return
+          return registerFocusable(props.id, {
+            focus: () => {
+              setChecked((x) => !x)
+            },
+          })
+        }, [props.id, setChecked])
+      }
+
+      return (
+        <SwitchProvider
+          scope={__scopeSwitch}
+          checked={checked}
+          disabled={disabled}
+          size={size}
+          unstyled={unstyled}
+        >
+          <SwitchFrame
             unstyled={unstyled}
-          >
-            <SwitchFrame
-              unstyled={unstyled}
-              size={size}
-              theme={checked ? 'active' : null}
-              // @ts-ignore
-              role="switch"
-              aria-checked={checked}
-              aria-labelledby={labelledBy}
-              aria-required={required}
-              data-state={getState(checked)}
-              data-disabled={disabled ? '' : undefined}
-              disabled={disabled}
-              // @ts-ignore
-              tabIndex={disabled ? undefined : 0}
-              // @ts-ignore
+            size={size}
+            theme={checked ? 'active' : null}
+            // @ts-ignore
+            role="switch"
+            aria-checked={checked}
+            aria-labelledby={labelledBy}
+            aria-required={required}
+            data-state={getState(checked)}
+            data-disabled={disabled ? '' : undefined}
+            disabled={disabled}
+            // @ts-ignore
+            tabIndex={disabled ? undefined : 0}
+            // @ts-ignore
+            value={value}
+            {...switchProps}
+            ref={composedRefs}
+            onPress={(event) => {
+              props.onPress?.(event)
+              setChecked((prevChecked) => !prevChecked)
+              if (isWeb && isFormControl) {
+                hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()
+                // if switch 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 switch updates.
+                if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()
+              }
+            }}
+          />
+          {isWeb && isFormControl && (
+            <BubbleInput
+              control={button}
+              bubbles={!hasConsumerStoppedPropagationRef.current}
+              name={name}
               value={value}
-              {...switchProps}
-              ref={composedRefs}
-              onPress={(event) => {
-                props.onPress?.(event)
-                setChecked((prevChecked) => !prevChecked)
-                if (isWeb && isFormControl) {
-                  hasConsumerStoppedPropagationRef.current = event.isPropagationStopped()
-                  // if switch 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 switch updates.
-                  if (!hasConsumerStoppedPropagationRef.current) event.stopPropagation()
-                }
-              }}
+              checked={checked}
+              required={required}
+              disabled={disabled}
+              // We transform because the input is absolutely positioned but we have
+              // rendered it **after** the button. This pulls it back to sit on top
+              // of the button.
+              style={{ transform: 'translateX(-100%)' }}
             />
-            {isWeb && isFormControl && (
-              <BubbleInput
-                control={button}
-                bubbles={!hasConsumerStoppedPropagationRef.current}
-                name={name}
-                value={value}
-                checked={checked}
-                required={required}
-                disabled={disabled}
-                // We transform because the input is absolutely positioned but we have
-                // rendered it **after** the button. This pulls it back to sit on top
-                // of the button.
-                style={{ transform: 'translateX(-100%)' }}
-              />
-            )}
-          </SwitchProvider>
-        )
-      }
-    )
-  ),
-  {
-    Thumb: SwitchThumb,
-  }
+          )}
+        </SwitchProvider>
+      )
+    }
+  )
 )
 
+export const Switch = withStaticProperties(SwitchComponent, {
+  Thumb: SwitchThumb,
+})
+
 /* ---------------------------------------------------------------------------------------------- */
 
 type InputProps = any //Radix.ComponentPropsWithoutRef<'input'>

package/types/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,QAAQ,EACR,WAAW,EACX,UAAU,EAKX,MAAM,eAAe,CAAA;AAOtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,WAAW,IAAI,iBAAiB,EAEhC,IAAI,EACL,MAAM,cAAc,CAAA;AAWrB,eAAO,MAAM,iBAAiB,+CAAmB,CAAA;AAejD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0B3B,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEhE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA8BvB,CAAA;AAQD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCtB,CAAA;AAEF,KAAK,iBAAiB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAErD,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,eAAe,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;8BAHS,OAAO,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIzC,CAAA"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../src/Switch.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,QAAQ,EACR,WAAW,EACX,UAAU,EAKX,MAAM,eAAe,CAAA;AAOtB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,WAAW,IAAI,iBAAiB,EAEhC,IAAI,EACL,MAAM,cAAc,CAAA;AAWrB,eAAO,MAAM,iBAAiB,+CAAmB,CAAA;AAejD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0B3B,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEhE,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA8BvB,CAAA;AAQD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCtB,CAAA;AAEF,KAAK,iBAAiB,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAErD,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,eAAe,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;CACzC,CAAA;AA6HD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;8BA9HS,OAAO,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIxC,CAAA"}