Add "auto" size option

This size option doesn't apply any width/height to the widget unlike
the explicit options (normal/compact/invisible). This allows changing
the widget type in the Turnstile settings page without needed to make
the corresponding size change in code. Using size: 'auto' may come at
the cost of the user experiencing some layout shift depending in some
cases.

demos/nextjs/src/constants.ts

@@ -32,6 +32,7 @@ export const themeOptions = [
 ] as const
 
 export const sizeOptions = [
+ { label: 'Auto', value: 'auto' },
  { label: 'Normal', value: 'normal' },
  { label: 'Compact', value: 'compact' },
  { label: 'Invisible', value: 'invisible' }

docs/props.mdx

@@ -37,7 +37,7 @@ These are the props you can pass to the `Turnstile` component.
 | `tabIndex` | number | `0` | The `tabindex` of Turnstile’s iframe for accessibility purposes. |
 | `responseField` | boolean | `true` | A boolean that controls if an input element with the response token is created. |
 | `responseFieldName` | string | `'cf-turnstile-response'` | Name of the input element. |
-| `size` | string | `'normal'` | The widget size. Can take the following values: `'normal'`, `'compact'`, or `'invisible'`. The normal size is 300x65px, the compact size is 130x120px. Use `invisible` if your key type is `invisible`, this option will prevent creating placeholder for the widget. |
+| `size` | string | `'normal'` | The widget size. Can take the following values: `'auto'`, `'normal'`, `'compact'`, or `'invisible'`. The normal size is 300x65px, the compact size is 130x120px. Use `invisible` if your key type is `invisible`, this option will prevent creating placeholder for the widget. |
 | `retry` | string | `'auto'` | Controls whether the widget should automatically retry to obtain a token if it did not succeed. The default is `'auto'`, which will retry automatically. This can be set to `'never'` to disable retry upon failure. |
 | `retryInterval` | number | `8000` | When `retry` is set to `'auto'`, `retryInterval` controls the time between retry attempts in milliseconds. The value must be a positive integer less than `900000`. When `retry` is set to `'never'`, this parameter has no effect. |
 | `refreshExpired` | string | `'auto'` | Automatically refreshes the token when it expires. Can take `'auto'`, `'manual'` or `'never'`. Read the [Cloudflare docs](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#refreshing-a-widget) for more info about handling expired widgets. |

packages/lib/src/types.ts

@@ -241,7 +241,7 @@ interface ComponentRenderOptions
  * The widget size. Can take the following values: `normal`, `compact`, and `invisible`. The normal size is 300x65px, the compact size is 130x120px, invisible will show no widget.
  * @default `normal`
  */
- size?: RenderOptions['size'] | 'invisible'
+ size?: RenderOptions['size'] | 'invisible' | 'auto'
 
  /**
  * Automatically refreshes the token when it expires. Can take `'auto'`, `'manual'` or `'never'`.

packages/lib/src/utils.ts

@@ -97,6 +97,7 @@ export const CONTAINER_STYLE_SET: ContainerSizeSet = {
  height: 0,
  overflow: 'hidden'
  },
+ auto: {},
  interactionOnly: {
  width: 'fit-content',
  height: 'auto',
@@ -114,7 +115,7 @@ export const CONTAINER_STYLE_SET: ContainerSizeSet = {
 export function getTurnstileSizeOpts(size: keyof ContainerSizeSet): RenderOptions['size'] {
  let result: RenderOptions['size']
 
- if (size !== 'invisible') {
+ if (size !== 'invisible' && size !== 'auto') {
  result = size as RenderOptions['size']
  }