fontdue-js 3.11.0 → 3.12.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 3.12.0
+
+- `CustomerLoginForm` runs an invisible reCAPTCHA check when *Enable reCAPTCHA* is on under *Settings → Integration*, giving the sign-in form the same bot protection as `NewsletterSignup` and `TestFontsForm`.
+- Fixed a `TypeTester` with `shy` leaving its OpenType features panel open after the toolbar hides. The panel and the dropdown now close shortly after the toolbar does.
+
 ## 3.11.0
 
 - `TestFontsForm` can group its family checkboxes by superfamily. With *Family list* set to *Grouped by superfamily* under *Settings → Test fonts* – or `testFonts: { familyGrouping: "superfamily" }` in the config, or the `familyGrouping` prop (`family-grouping` on `<fontdue-test-fonts-form>`) – each superfamily gets a checkbox that ticks all of its families, listed beneath it in `.test-fonts__family-group__families`.

package/dist/__generated__/CustomerLoginFormLoginMutation.graphql.d.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fd35a09343fd0b9af65f7c50420747b6>>
+ * @generated SignedSource<<e3f8ae800d45eb22248382f5c156624a>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -8,6 +8,7 @@ export type LoginInput = {
     email?: string | null;
     name?: string | null;
     newsletterOptIn?: boolean | null;
+    recaptchaToken?: string | null;
     target?: string | null;
 };
 export type CustomerLoginFormLoginMutation$variables = {

package/dist/__generated__/CustomerLoginFormLoginMutation.graphql.js

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<fd35a09343fd0b9af65f7c50420747b6>>
+ * @generated SignedSource<<e3f8ae800d45eb22248382f5c156624a>>
  * @lightSyntaxTransform
  * @nogrep
  */

package/dist/__generated__/CustomerLoginFormRecaptchaQuery.graphql.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @generated SignedSource<<ddf67cfa749ae9a10bfcec2bb2d6b15b>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+import { ConcreteRequest } from 'relay-runtime';
+export type CustomerLoginFormRecaptchaQuery$variables = Record<PropertyKey, never>;
+export type CustomerLoginFormRecaptchaQuery$data = {
+    readonly viewer: {
+        readonly settings: {
+            readonly recaptchaEnabled: boolean;
+            readonly recaptchaSiteKey: string | null;
+        } | null;
+    };
+};
+export type CustomerLoginFormRecaptchaQuery = {
+    response: CustomerLoginFormRecaptchaQuery$data;
+    variables: CustomerLoginFormRecaptchaQuery$variables;
+};
+declare const node: ConcreteRequest;
+export default node;

package/dist/__generated__/CustomerLoginFormRecaptchaQuery.graphql.js

@@ -0,0 +1,86 @@
+/**
+ * @generated SignedSource<<ddf67cfa749ae9a10bfcec2bb2d6b15b>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+const node = function () {
+  var v0 = {
+    "alias": null,
+    "args": null,
+    "concreteType": "Settings",
+    "kind": "LinkedField",
+    "name": "settings",
+    "plural": false,
+    "selections": [{
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "recaptchaEnabled",
+      "storageKey": null
+    }, {
+      "alias": null,
+      "args": null,
+      "kind": "ScalarField",
+      "name": "recaptchaSiteKey",
+      "storageKey": null
+    }],
+    "storageKey": null
+  };
+  return {
+    "fragment": {
+      "argumentDefinitions": [],
+      "kind": "Fragment",
+      "metadata": null,
+      "name": "CustomerLoginFormRecaptchaQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [v0 /*: any*/],
+        "storageKey": null
+      }],
+      "type": "RootQueryType",
+      "abstractKey": null
+    },
+    "kind": "Request",
+    "operation": {
+      "argumentDefinitions": [],
+      "kind": "Operation",
+      "name": "CustomerLoginFormRecaptchaQuery",
+      "selections": [{
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [v0 /*: any*/, {
+          "alias": null,
+          "args": null,
+          "kind": "ScalarField",
+          "name": "id",
+          "storageKey": null
+        }],
+        "storageKey": null
+      }]
+    },
+    "params": {
+      "cacheID": "a65b8ea63db01df3cbdf602ac7721787",
+      "id": null,
+      "metadata": {},
+      "name": "CustomerLoginFormRecaptchaQuery",
+      "operationKind": "query",
+      "text": "query CustomerLoginFormRecaptchaQuery {\n  viewer {\n    settings {\n      recaptchaEnabled\n      recaptchaSiteKey\n    }\n    id\n  }\n}\n"
+    }
+  };
+}();
+node.hash = "fe7289e19bcc08dbad62e72d67c48c97";
+export default node;

package/dist/__tests__/customerLoginRecaptcha.test.js

@@ -0,0 +1,113 @@
+// @vitest-environment happy-dom
+
+// The customer sign-in form solves the store's invisible reCAPTCHA before it
+// asks for a sign-in link, when the store has reCAPTCHA on: the form emails
+// whatever address is typed, which made it a tool for email-bombing strangers.
+
+import React, { act, forwardRef, useImperativeHandle, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const {
+  relay
+} = vi.hoisted(() => ({
+  relay: {
+    settings: null,
+    commits: []
+  }
+}));
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  useRelayEnvironment: () => ({}),
+  useLazyLoadQuery: () => ({
+    viewer: {
+      settings: relay.settings
+    }
+  }),
+  commitMutation: (_env, config) => {
+    relay.commits.push(config.variables);
+  }
+}));
+
+// Google's widget: `execute()` hands back a token a moment later, the way the
+// real callback arrives after the form has re-rendered – and, like
+// react-google-recaptcha, it calls whichever `onChange` it holds by then.
+vi.mock('../components/Recaptcha.js', () => ({
+  ReCAPTCHA: /*#__PURE__*/forwardRef(function FakeRecaptcha(props, ref) {
+    const latest = useRef(props);
+    latest.current = props;
+    useImperativeHandle(ref, () => ({
+      execute: () => setTimeout(() => latest.current.onChange('solved-token'), 0),
+      reset: () => {}
+    }));
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "recaptcha"
+    });
+  })
+}));
+import CustomerLoginForm from '../components/CustomerLoginForm/index.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let container;
+let root;
+beforeEach(() => {
+  relay.commits = [];
+  container = document.createElement('div');
+  document.body.append(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+});
+const render = async () => {
+  await act(async () => root.render( /*#__PURE__*/React.createElement(CustomerLoginForm, null)));
+};
+const submit = async email => {
+  const input = container.querySelector('input[type="email"]');
+  await act(async () => {
+    const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
+    setValue.call(input, email);
+    input.dispatchEvent(new Event('input', {
+      bubbles: true
+    }));
+  });
+  await act(async () => {
+    container.querySelector('form').dispatchEvent(new Event('submit', {
+      bubbles: true,
+      cancelable: true
+    }));
+  });
+  // Let the widget's token callback land.
+  await act(async () => new Promise(resolve => setTimeout(resolve, 5)));
+};
+describe('CustomerLoginForm reCAPTCHA', () => {
+  it('asks for a link straight away on a store without reCAPTCHA', async () => {
+    relay.settings = {
+      recaptchaEnabled: false,
+      recaptchaSiteKey: null
+    };
+    await render();
+    expect(container.querySelector('[data-testid="recaptcha"]')).toBeNull();
+    await submit('reader@example.com');
+    expect(relay.commits).toEqual([{
+      input: {
+        email: 'reader@example.com',
+        recaptchaToken: undefined
+      }
+    }]);
+  });
+  it('solves the widget first, and sends its token with the request', async () => {
+    relay.settings = {
+      recaptchaEnabled: true,
+      recaptchaSiteKey: 'site-key'
+    };
+    await render();
+    expect(container.querySelector('[data-testid="recaptcha"]')).not.toBeNull();
+    await submit('reader@example.com');
+    expect(relay.commits).toEqual([{
+      input: {
+        email: 'reader@example.com',
+        recaptchaToken: 'solved-token'
+      }
+    }]);
+  });
+});

package/dist/__tests__/typeTesterHeightAnimation.test.js

@@ -0,0 +1,124 @@
+// @vitest-environment happy-dom
+import React, { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import useHeightAnimation from '../components/TypeTester/useHeightAnimation.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+// happy-dom has no layout and no Web Animations, so both are stubbed: the
+// panel's content is CONTENT_HEIGHT tall, an explicit px height measures as
+// itself, and `midAnimation` stands in for the frame a running animation is on.
+const CONTENT_HEIGHT = 120;
+let midAnimation = null;
+let runs = [];
+function Panel(_ref) {
+  let {
+    open
+  } = _ref;
+  const {
+    ref,
+    style
+  } = useHeightAnimation(open, 300);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "panel",
+    ref: ref,
+    style: style
+  });
+}
+describe('useHeightAnimation', () => {
+  let root;
+  let container;
+  const panel = () => container.querySelector('.panel');
+  const render = open => act(() => root.render( /*#__PURE__*/React.createElement(Panel, {
+    open: open
+  })));
+  const heights = run => run.keyframes.map(k => k.height);
+  beforeEach(() => {
+    runs = [];
+    midAnimation = null;
+    vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function () {
+      const {
+        height
+      } = this.style;
+      const value = midAnimation ?? (height === 'auto' || height === '' ? CONTENT_HEIGHT : parseFloat(height));
+      return {
+        height: value
+      };
+    });
+    Element.prototype.animate = function (keyframes) {
+      const run = {
+        keyframes,
+        cancel: vi.fn(),
+        onfinish: null
+      };
+      runs.push(run);
+      return run;
+    };
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.restoreAllMocks();
+    delete Element.prototype.animate;
+  });
+  it('starts closed without animating', async () => {
+    await render(false);
+    expect(panel().style.height).toBe('0px');
+    expect(panel().style.overflow).toBe('hidden');
+    expect(runs).toHaveLength(0);
+  });
+  it('opens from 0 to the content height, then settles to auto and visible', async () => {
+    await render(false);
+    await render(true);
+    expect(runs).toHaveLength(1);
+    expect(heights(runs[0])).toEqual(['0px', `${CONTENT_HEIGHT}px`]);
+    expect(panel().style.overflow).toBe('hidden');
+    act(() => {
+      var _runs$0$onfinish, _runs$;
+      return (_runs$0$onfinish = (_runs$ = runs[0]).onfinish) === null || _runs$0$onfinish === void 0 ? void 0 : _runs$0$onfinish.call(_runs$);
+    });
+    expect(panel().style.height).toBe('auto');
+    expect(panel().style.overflow).toBe('visible');
+  });
+  it('closes from the open height to 0, and stays clipped', async () => {
+    await render(true);
+    await render(false);
+    expect(heights(runs[0])).toEqual([`${CONTENT_HEIGHT}px`, '0px']);
+    act(() => {
+      var _runs$0$onfinish2, _runs$2;
+      return (_runs$0$onfinish2 = (_runs$2 = runs[0]).onfinish) === null || _runs$0$onfinish2 === void 0 ? void 0 : _runs$0$onfinish2.call(_runs$2);
+    });
+    expect(panel().style.height).toBe('0px');
+    expect(panel().style.overflow).toBe('hidden');
+  });
+  it('reverses an interrupted open from the height on screen', async () => {
+    await render(false);
+    await render(true);
+    const opening = runs[0];
+    midAnimation = 60;
+    await render(false);
+    expect(opening.cancel).toHaveBeenCalled();
+    expect(heights(runs[1])).toEqual(['60px', '0px']);
+
+    // A late finish from the cancelled open must not unclip the closed panel.
+    act(() => {
+      var _opening$onfinish;
+      return (_opening$onfinish = opening.onfinish) === null || _opening$onfinish === void 0 ? void 0 : _opening$onfinish.call(opening);
+    });
+    expect(panel().style.overflow).toBe('hidden');
+  });
+  it('skips the animation for reduced motion', async () => {
+    vi.stubGlobal('matchMedia', () => ({
+      matches: true
+    }));
+    await render(false);
+    await render(true);
+    expect(runs).toHaveLength(0);
+    expect(panel().style.height).toBe('auto');
+    expect(panel().style.overflow).toBe('visible');
+    vi.unstubAllGlobals();
+  });
+});

package/dist/__tests__/typeTesterShyFeaturesClose.test.js

@@ -0,0 +1,133 @@
+// @vitest-environment happy-dom
+import React, { act, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import useCloseWhenToolbarHides, { CLOSE_DELAY } from '../components/TypeTester/useCloseWhenToolbarHides.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let open = false;
+
+// The tester's markup reduced to what the hook reads: the `.type-tester` root,
+// something focusable inside it (the editable text) and the surface's element.
+function Tester(_ref) {
+  let {
+    shy
+  } = _ref;
+  const [featuresOpen, setFeaturesOpen] = useState(true);
+  open = featuresOpen;
+  const ref = useRef(null);
+  useCloseWhenToolbarHides(ref, {
+    open: featuresOpen,
+    setOpen: setFeaturesOpen,
+    shy
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "type-tester"
+  }, /*#__PURE__*/React.createElement("input", {
+    className: "text"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "type-tester__features-container",
+    ref: ref
+  }));
+}
+describe('features surface under a shy toolbar', () => {
+  let root;
+  let container;
+  let outside;
+  const tester = () => container.querySelector('.type-tester');
+  const text = () => container.querySelector('.text');
+  const pointer = function (target, type) {
+    let pointerType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'mouse';
+    return act(() => {
+      target.dispatchEvent(new PointerEvent(type, {
+        pointerType,
+        bubbles: true
+      }));
+    });
+  };
+  const wait = ms => act(() => vi.advanceTimersByTime(ms));
+  const render = shy => act(() => root.render( /*#__PURE__*/React.createElement(Tester, {
+    shy: shy
+  })));
+  beforeEach(() => {
+    vi.useFakeTimers();
+    container = document.createElement('div');
+    outside = document.createElement('button');
+    document.body.append(container, outside);
+    root = createRoot(container);
+  });
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    outside.remove();
+    vi.useRealTimers();
+  });
+  describe("shy: 'hover'", () => {
+    beforeEach(async () => {
+      await render('hover');
+      await pointer(tester(), 'pointerenter');
+    });
+    it('closes once the pointer has been gone for the delay', async () => {
+      await pointer(tester(), 'pointerleave');
+      await wait(CLOSE_DELAY - 1);
+      expect(open).toBe(true);
+      await wait(1);
+      expect(open).toBe(false);
+    });
+    it('stays open when the pointer comes back within the delay', async () => {
+      await pointer(tester(), 'pointerleave');
+      await wait(CLOSE_DELAY - 50);
+      await pointer(tester(), 'pointerenter');
+      await wait(CLOSE_DELAY);
+      expect(open).toBe(true);
+    });
+    it('stays open while the tester holds focus, then closes when focus leaves', async () => {
+      act(() => text().focus());
+      await pointer(tester(), 'pointerleave');
+      await wait(CLOSE_DELAY);
+      expect(open).toBe(true);
+      act(() => outside.focus());
+      await wait(CLOSE_DELAY);
+      expect(open).toBe(false);
+    });
+    it('stays open when focus leaves while the pointer is still over it', async () => {
+      act(() => text().focus());
+      act(() => outside.focus());
+      await wait(CLOSE_DELAY);
+      expect(open).toBe(true);
+    });
+  });
+  it('on a touch device (no hover), closes on a touch outside the tester', async () => {
+    await render('hover');
+    await pointer(tester(), 'pointerleave', 'touch');
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(true);
+    await pointer(text(), 'pointerdown', 'touch');
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(true);
+    await pointer(outside, 'pointerdown', 'touch');
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(false);
+  });
+  it('treats shy: true as hover', async () => {
+    await render(true);
+    await pointer(tester(), 'pointerenter');
+    await pointer(tester(), 'pointerleave');
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(false);
+  });
+  it("closes under shy: 'focus' when focus leaves, even while hovered", async () => {
+    await render('focus');
+    await pointer(tester(), 'pointerenter');
+    act(() => text().focus());
+    act(() => outside.focus());
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(false);
+  });
+  it('leaves the surface alone without shy, where its toggle stays visible', async () => {
+    await render(false);
+    await pointer(tester(), 'pointerenter');
+    await pointer(tester(), 'pointerleave');
+    await wait(CLOSE_DELAY);
+    expect(open).toBe(true);
+  });
+});

package/dist/components/CustomerLoginForm/index.js

@@ -1,13 +1,19 @@
 'use client';
 
+import _CustomerLoginFormRecaptchaQuery from "../../__generated__/CustomerLoginFormRecaptchaQuery.graphql.js";
 import _CustomerLoginFormQuery from "../../__generated__/CustomerLoginFormQuery.graphql.js";
 import _CustomerLoginFormLoginMutation from "../../__generated__/CustomerLoginFormLoginMutation.graphql.js";
-import React, { Suspense, useState } from 'react';
+import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { commitMutation, graphql, useLazyLoadQuery, useRelayEnvironment } from 'react-relay';
+// The script-injecting reCAPTCHA wrapper (loads Google's api.js); see
+// ../Recaptcha for why it isn't the package's named export.
+import { ReCAPTCHA } from '../Recaptcha.js';
 import TextField from '../TextField/index.js';
+import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const loginMutation = (_CustomerLoginFormLoginMutation.hash && _CustomerLoginFormLoginMutation.hash !== "975b639fac1e0d88e0f0c9c55acd8b9c" && console.error("The definition of 'CustomerLoginFormLoginMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerLoginFormLoginMutation);
 const query = (_CustomerLoginFormQuery.hash && _CustomerLoginFormQuery.hash !== "f32c7b0b485a2b2a02ddf2cbc5b87a3c" && console.error("The definition of 'CustomerLoginFormQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerLoginFormQuery);
-const DEFAULT_SUBMITTED_LABEL = '<p>Submitted!</p><p>Please check your email inbox for a link to log in.</p><p>If you don\u2019t receive an email, please contact us to retrieve your order information.</p>';
+const recaptchaQuery = (_CustomerLoginFormRecaptchaQuery.hash && _CustomerLoginFormRecaptchaQuery.hash !== "fe7289e19bcc08dbad62e72d67c48c97" && console.error("The definition of 'CustomerLoginFormRecaptchaQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerLoginFormRecaptchaQuery);
+const DEFAULT_SUBMITTED_LABEL = '<p>Submitted!</p><p>Please check your email inbox for a link to log in.</p><p>If you don’t receive an email, please contact us to retrieve your order information.</p>';
 const CustomerLoginForm = _ref => {
   let {
     submitLabel = 'Submit'
@@ -16,24 +22,40 @@ const CustomerLoginForm = _ref => {
   const [error, setError] = useState(null);
   const [submitting, setSubmitting] = useState(false);
   const [submitted, setSubmitted] = useState(false);
+  // The store's reCAPTCHA site key once known: null when it doesn't use
+  // reCAPTCHA. Undefined until the settings arrive, which is only after mount.
+  const [siteKey, setSiteKey] = useState(undefined);
+  const [recaptchaToken, setRecaptchaToken] = useState(null);
+  const [pendingSubmit, setPendingSubmit] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const recaptchaRef = useRef(null);
+  const recaptchaTimeout = useRecaptchaTimeout();
   const environment = useRelayEnvironment();
-  const handleSubmit = e => {
-    e.preventDefault();
+  useEffect(() => setMounted(true), []);
+  const resetRecaptcha = useCallback(() => {
+    var _recaptchaRef$current;
+    (_recaptchaRef$current = recaptchaRef.current) === null || _recaptchaRef$current === void 0 ? void 0 : _recaptchaRef$current.reset();
+    setRecaptchaToken(null);
+  }, []);
+  const submitForm = useCallback(token => {
+    recaptchaTimeout.clear();
+    setPendingSubmit(false);
     setSubmitting(true);
     commitMutation(environment, {
       mutation: loginMutation,
       variables: {
         input: {
-          email
+          email,
+          recaptchaToken: token ?? undefined
         }
       },
       onCompleted: (_res, errors) => {
+        setSubmitting(false);
         if (errors && errors.length > 0) {
           setError(errors[0].message);
-          setSubmitting(false);
+          resetRecaptcha();
         } else {
           setSubmitted(true);
-          setSubmitting(false);
           setError(null);
         }
       },
@@ -43,8 +65,46 @@ const CustomerLoginForm = _ref => {
         } = _ref2;
         setError(message);
         setSubmitting(false);
+        resetRecaptcha();
       }
     });
+  }, [environment, email, recaptchaTimeout, resetRecaptcha]);
+  const handleRecaptchaChange = useCallback(token => {
+    setRecaptchaToken(token);
+    if (token && pendingSubmit) submitForm(token);
+  }, [pendingSubmit, submitForm]);
+  const handleRecaptchaExpired = useCallback(() => setRecaptchaToken(null), []);
+
+  // Recover when the widget can't produce a token, so the button doesn't sit
+  // on “Submitting…” forever if Google's script fails to load.
+  const abortRecaptcha = useCallback(() => {
+    recaptchaTimeout.clear();
+    setPendingSubmit(false);
+    resetRecaptcha();
+    setError(RECAPTCHA_UNAVAILABLE_MESSAGE);
+  }, [recaptchaTimeout, resetRecaptcha]);
+  const handleRecaptchaErrored = useCallback(() => {
+    if (pendingSubmit) abortRecaptcha();
+  }, [pendingSubmit, abortRecaptcha]);
+  const handleSubmit = e => {
+    e.preventDefault();
+    setError(null);
+    if (siteKey && !recaptchaToken) {
+      var _recaptchaRef$current2;
+      setPendingSubmit(true);
+      // Give up if no token arrives and the script never loaded; a visitor
+      // mid-challenge keeps `grecaptcha` defined and isn't cut off.
+      recaptchaTimeout.start(() => {
+        if (isRecaptchaScriptLoaded()) return;
+        abortRecaptcha();
+      });
+      (_recaptchaRef$current2 = recaptchaRef.current) === null || _recaptchaRef$current2 === void 0 ? void 0 : _recaptchaRef$current2.execute();
+      return;
+    }
+
+    // Settings not in yet (a submit within moments of the page loading) goes
+    // without a token; the server says so if the store needs one.
+    submitForm(recaptchaToken);
   };
   const disabled = !email;
   return /*#__PURE__*/React.createElement("div", {
@@ -69,23 +129,58 @@ const CustomerLoginForm = _ref => {
     onChange: value => setEmail(value),
     autocomplete: "email",
     placeholder: "Your email"
+  })), mounted && /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(LoginRecaptcha, {
+    widgetRef: recaptchaRef,
+    onSiteKey: setSiteKey,
+    onChange: handleRecaptchaChange,
+    onExpired: handleRecaptchaExpired,
+    onErrored: handleRecaptchaErrored
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     className: "submit-button",
     type: "submit",
-    disabled: submitting || disabled
-  }, submitting ? 'Submitting...' : submitLabel, /*#__PURE__*/React.createElement("span", {
+    disabled: submitting || pendingSubmit || disabled
+  }, submitting || pendingSubmit ? 'Submitting...' : submitLabel, /*#__PURE__*/React.createElement("span", {
     className: "submit-button__arrow"
   }, " \u2192")))));
 };
 
+// The store's reCAPTCHA settings and, when it uses reCAPTCHA, the invisible
+// widget. Rendered only after mount, so the lazy query stays out of the SSR
+// pass for the same reason as SubmittedMessage below.
+function LoginRecaptcha(_ref3) {
+  var _data$viewer;
+  let {
+    widgetRef,
+    onSiteKey,
+    onChange,
+    onExpired,
+    onErrored
+  } = _ref3;
+  const data = useLazyLoadQuery(recaptchaQuery, {});
+  const settings = (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.settings;
+  const siteKey = settings !== null && settings !== void 0 && settings.recaptchaEnabled ? settings.recaptchaSiteKey ?? null : null;
+  useEffect(() => onSiteKey(siteKey), [siteKey, onSiteKey]);
+  if (!siteKey) return null;
+  return /*#__PURE__*/React.createElement(ReCAPTCHA, {
+    ref: widgetRef,
+    sitekey: siteKey,
+    size: "invisible",
+    onChange: onChange,
+    onExpired: onExpired,
+    onErrored: onErrored
+  });
+}
+
 // The settings label is only shown after a submit, which can only happen in
 // the browser — fetching it here (not in the form component) keeps the lazy
 // query out of the SSR pass, where it has no session and, in multi-tenant
 // setups, possibly no resolvable GraphQL URL.
 function SubmittedMessage() {
-  var _data$viewer, _data$viewer$settings;
+  var _data$viewer2, _data$viewer2$setting;
   const data = useLazyLoadQuery(query, {});
-  const submittedLabel = ((_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$settings = _data$viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.customerLoginSubmittedLabel) || DEFAULT_SUBMITTED_LABEL;
+  const submittedLabel = ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$setting = _data$viewer2.settings) === null || _data$viewer2$setting === void 0 ? void 0 : _data$viewer2$setting.customerLoginSubmittedLabel) || DEFAULT_SUBMITTED_LABEL;
   return /*#__PURE__*/React.createElement("div", {
     className: "login-form__submitted",
     dangerouslySetInnerHTML: {

package/dist/components/TypeTester/TypeTesterFeatures.js

@@ -1,5 +1,5 @@
 import _TypeTesterFeatures_fontStyle from "../../__generated__/TypeTesterFeatures_fontStyle.graphql.js";
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import { graphql, useFragment } from 'react-relay';
 import Bullet from '../TypeTester/TypeTesterBullet.js';
 import useTypeTesterState from './TypeTesterState.js';
@@ -7,38 +7,8 @@ import Checkbox from '../Checkbox/index.js';
 import ConfigContext from '../ConfigContext.js';
 import useFeaturesData from './useFeaturesData.js';
 import TypeTesterVariableAxes from './TypeTesterVariableAxes.js';
-function useHeightAnimation() {
-  let isOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-  let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 350;
-  const contentRef = useRef(null);
-  const [height, setHeight] = useState(isOpen ? 'auto' : 0);
-  const changed = useRef(false);
-  useEffect(() => {
-    var _contentRef$current;
-    const contentRect = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.getBoundingClientRect();
-    if (!contentRect) return;
-    if (changed.current === false) {
-      // don't run initially. couldn't think of a better solution
-      changed.current = true;
-      return;
-    }
-    setHeight(`${contentRect.height}px`);
-    const first = setTimeout(() => setHeight(isOpen ? `${contentRect.height}px` : 0));
-    const second = setTimeout(() => {
-      if (isOpen) {
-        setHeight('auto');
-      }
-    }, duration);
-    return () => {
-      clearTimeout(first);
-      clearTimeout(second);
-    };
-  }, [isOpen]);
-  return {
-    height,
-    contentRef
-  };
-}
+import useCloseWhenToolbarHides from './useCloseWhenToolbarHides.js';
+import useHeightAnimation from './useHeightAnimation.js';
 const shouldIncludeFeature = (supportedFeatures, feature) => {
   if (!supportedFeatures) return false;
   return supportedFeatures.indexOf(feature) >= 0;
@@ -74,6 +44,17 @@ function useFeaturesSurface(_ref) {
   } = useFeaturesData({
     fontStyle
   });
+
+  // Every surface renders an element carrying this ref inside its tester, so
+  // a shy toolbar takes the open surface with it when it hides. The floating
+  // toolbar has no hover-shy tools to follow (it requires shy: 'focus' and
+  // sits outside the tester).
+  const surfaceRef = useRef(null);
+  useCloseWhenToolbarHides(surfaceRef, {
+    open: featuresOpen,
+    setOpen: setFeaturesOpen,
+    shy: config.toolsPosition === 'inline' ? config.shy : false
+  });
   const selectionStyle = config.openTypeFeatures.selectionStyle;
   const supportedFeatures = (fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.supportedFeatures) ?? null;
   const expandedFeatures = useMemo(() => showFeatures !== null && showFeatures !== void 0 && showFeatures.includes('*') ? supportedFeatures ?? [] : (showFeatures ?? []).filter(feature => shouldIncludeFeature(supportedFeatures, feature)), [showFeatures, supportedFeatures]);
@@ -109,7 +90,8 @@ function useFeaturesSurface(_ref) {
     selectionStyle,
     supportedFeatures,
     expandedFeatures,
-    renderFeature
+    renderFeature,
+    surfaceRef
   };
 }
 function TypeTesterFeaturesDropdown(_ref2) {
@@ -128,7 +110,8 @@ function TypeTesterFeaturesDropdown(_ref2) {
     selectionStyle,
     supportedFeatures,
     expandedFeatures,
-    renderFeature
+    renderFeature,
+    surfaceRef
   } = useFeaturesSurface({
     id,
     fontStyle: fontStyleKey,
@@ -191,6 +174,7 @@ function TypeTesterFeaturesDropdown(_ref2) {
   if (!featuresOpen) {
     return /*#__PURE__*/React.createElement("div", {
       className: "type-tester__features-dropdown-anchor",
+      ref: surfaceRef,
       "data-open": false,
       onMouseDown: anchorMouseDown
     });
@@ -221,6 +205,7 @@ function TypeTesterFeaturesDropdown(_ref2) {
   // unlike the chromeless panel, an empty dropdown would be a visible box.
   return /*#__PURE__*/React.createElement("div", {
     className: "type-tester__features-dropdown-anchor",
+    ref: surfaceRef,
     "data-open": featuresOpen,
     onMouseDown: anchorMouseDown
   }, dropdownFeatures.length > 0 || hasAxes ? /*#__PURE__*/React.createElement("div", {
@@ -251,15 +236,16 @@ function TypeTesterFeaturesPanel(_ref3) {
     selectionStyle,
     supportedFeatures,
     expandedFeatures,
-    renderFeature
+    renderFeature,
+    surfaceRef
   } = useFeaturesSurface({
     id,
     fontStyle: fontStyleKey,
     features
   });
   const {
-    height: featuresHeight,
-    contentRef: featuresContentRef
+    ref: heightRef,
+    style: heightStyle
   } = useHeightAnimation(featuresOpen, 300);
   let featuresColumns;
   if ((_config$openTypeFeatu2 = config.openTypeFeatures) !== null && _config$openTypeFeatu2 !== void 0 && (_config$openTypeFeatu3 = _config$openTypeFeatu2.columns) !== null && _config$openTypeFeatu3 !== void 0 && _config$openTypeFeatu3.length) {
@@ -276,15 +262,12 @@ function TypeTesterFeaturesPanel(_ref3) {
   }
   return /*#__PURE__*/React.createElement("div", {
     className: "type-tester__features-container",
+    ref: heightRef,
     onMouseDown: e => e.preventDefault(),
     "data-open": featuresOpen,
-    style: {
-      height: featuresHeight,
-      overflow: featuresHeight === 'auto' ? 'visible' : 'hidden',
-      transition: `height 300ms ease-out`
-    }
+    style: heightStyle
   }, /*#__PURE__*/React.createElement("div", {
-    ref: featuresContentRef
+    ref: surfaceRef
   }, axes ? /*#__PURE__*/React.createElement(TypeTesterVariableAxes, {
     id: id,
     axes: axes,

package/dist/components/TypeTester/useCloseWhenToolbarHides.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+export declare const CLOSE_DELAY = 250;
+/**
+ * Closes an open features surface (panel or dropdown) when a shy toolbar hides,
+ * so it never stays open without the button that toggles it.
+ *
+ * `shy` hides the toolbar's tools in CSS (`_type-tester.scss`): they show while
+ * the tester is hovered (`'hover'` only) or holds focus. This mirrors that
+ * predicate, re-checked after `CLOSE_DELAY` whenever the pointer leaves, focus
+ * leaves, or a touch lands outside the tester (touch has no hover to leave).
+ * `ref` is any element the surface always renders inside its `.type-tester`.
+ */
+export default function useCloseWhenToolbarHides(ref: RefObject<HTMLElement | null>, { open, setOpen, shy, }: {
+    open: boolean;
+    setOpen: (value: boolean) => void;
+    shy: boolean | 'hover' | 'focus';
+}): void;

package/dist/components/TypeTester/useCloseWhenToolbarHides.js

@@ -0,0 +1,79 @@
+import { useEffect } from 'react';
+
+// How long the toolbar has to stay hidden before the features surface closes.
+// Closing the panel animates its height and moves the page below it, so a
+// cursor that only brushes past the tester's edge shouldn't trigger it.
+export const CLOSE_DELAY = 250;
+const matchesHover = element => {
+  try {
+    return element.matches(':hover');
+  } catch {
+    return false;
+  }
+};
+const focusInside = element => {
+  const root = element.getRootNode();
+  return Boolean(root.activeElement && element.contains(root.activeElement));
+};
+
+/**
+ * Closes an open features surface (panel or dropdown) when a shy toolbar hides,
+ * so it never stays open without the button that toggles it.
+ *
+ * `shy` hides the toolbar's tools in CSS (`_type-tester.scss`): they show while
+ * the tester is hovered (`'hover'` only) or holds focus. This mirrors that
+ * predicate, re-checked after `CLOSE_DELAY` whenever the pointer leaves, focus
+ * leaves, or a touch lands outside the tester (touch has no hover to leave).
+ * `ref` is any element the surface always renders inside its `.type-tester`.
+ */
+export default function useCloseWhenToolbarHides(ref, _ref) {
+  let {
+    open,
+    setOpen,
+    shy
+  } = _ref;
+  useEffect(() => {
+    var _ref$current;
+    if (!open || !shy) return;
+    const tester = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.closest('.type-tester');
+    if (!tester) return;
+    const hoverReveals = shy === true || shy === 'hover';
+    let hovered = matchesHover(tester);
+    let timer;
+    const toolbarShown = () => hoverReveals && hovered || focusInside(tester);
+    const scheduleCheck = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        if (!toolbarShown()) setOpen(false);
+      }, CLOSE_DELAY);
+    };
+    const handlePointerEnter = event => {
+      if (event.pointerType !== 'mouse') return;
+      hovered = true;
+      clearTimeout(timer);
+    };
+    const handlePointerLeave = event => {
+      if (event.pointerType !== 'mouse') return;
+      hovered = false;
+      scheduleCheck();
+    };
+    const handleOutsidePointerDown = event => {
+      var _event$composedPath;
+      if (event.pointerType === 'mouse') return;
+      const target = ((_event$composedPath = event.composedPath) === null || _event$composedPath === void 0 ? void 0 : _event$composedPath.call(event)[0]) ?? null;
+      if (target && tester.contains(target)) return;
+      scheduleCheck();
+    };
+    tester.addEventListener('pointerenter', handlePointerEnter);
+    tester.addEventListener('pointerleave', handlePointerLeave);
+    tester.addEventListener('focusout', scheduleCheck);
+    document.addEventListener('pointerdown', handleOutsidePointerDown);
+    return () => {
+      clearTimeout(timer);
+      tester.removeEventListener('pointerenter', handlePointerEnter);
+      tester.removeEventListener('pointerleave', handlePointerLeave);
+      tester.removeEventListener('focusout', scheduleCheck);
+      document.removeEventListener('pointerdown', handleOutsidePointerDown);
+    };
+  }, [ref, open, setOpen, shy]);
+}

package/dist/components/TypeTester/useHeightAnimation.d.ts

@@ -0,0 +1,27 @@
+import type { CSSProperties } from 'react';
+/**
+ * Animates a disclosure's height between 0 and its content height.
+ *
+ * Driven by the Web Animations API on the element itself rather than through
+ * React state: a CSS transition needs a committed pixel height before the
+ * target one, and `auto` → `0` in a single style recalc (the old
+ * setState-then-setTimeout approach) snaps shut with no animation. Here every
+ * run starts from the height actually on screen, so a close that interrupts an
+ * open (or the reverse) reverses smoothly from where it is.
+ *
+ * Settled open, the element is `height: auto; overflow: visible`, so content
+ * that changes size while open (axis sliders, wrapped features) still fits and
+ * slider tooltips aren't clipped. Settled closed, it is `0px` + `hidden`.
+ *
+ * Spread `style` onto the element (it only carries the initial state and never
+ * changes, so React never overwrites the inline styles set here) and attach
+ * `ref`.
+ *
+ * @example
+ *   const { ref, style } = useHeightAnimation(open, 300);
+ *   return <div ref={ref} style={style}>{children}</div>;
+ */
+export default function useHeightAnimation(isOpen: boolean, duration?: number): {
+    ref: import("react").RefObject<HTMLDivElement | null>;
+    style: CSSProperties;
+};

package/dist/components/TypeTester/useHeightAnimation.js

@@ -0,0 +1,85 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+const prefersReducedMotion = () => {
+  var _window$matchMedia, _window;
+  return typeof window !== 'undefined' && ((_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, '(prefers-reduced-motion: reduce)').matches) === true;
+};
+
+/**
+ * Animates a disclosure's height between 0 and its content height.
+ *
+ * Driven by the Web Animations API on the element itself rather than through
+ * React state: a CSS transition needs a committed pixel height before the
+ * target one, and `auto` → `0` in a single style recalc (the old
+ * setState-then-setTimeout approach) snaps shut with no animation. Here every
+ * run starts from the height actually on screen, so a close that interrupts an
+ * open (or the reverse) reverses smoothly from where it is.
+ *
+ * Settled open, the element is `height: auto; overflow: visible`, so content
+ * that changes size while open (axis sliders, wrapped features) still fits and
+ * slider tooltips aren't clipped. Settled closed, it is `0px` + `hidden`.
+ *
+ * Spread `style` onto the element (it only carries the initial state and never
+ * changes, so React never overwrites the inline styles set here) and attach
+ * `ref`.
+ *
+ * @example
+ *   const { ref, style } = useHeightAnimation(open, 300);
+ *   return <div ref={ref} style={style}>{children}</div>;
+ */
+export default function useHeightAnimation(isOpen) {
+  let duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+  const ref = useRef(null);
+  const animation = useRef(null);
+  const mounted = useRef(false);
+  const [style] = useState(() => isOpen ? {
+    height: 'auto',
+    overflow: 'visible'
+  } : {
+    height: 0,
+    overflow: 'hidden'
+  });
+  useLayoutEffect(() => {
+    var _animation$current;
+    const el = ref.current;
+    if (!el) return;
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+
+    // Measure before cancelling: a running animation's current frame is what
+    // the visitor sees, and cancelling it would jump to the settled style.
+    const from = el.getBoundingClientRect().height;
+    (_animation$current = animation.current) === null || _animation$current === void 0 ? void 0 : _animation$current.cancel();
+    animation.current = null;
+    el.style.height = 'auto';
+    const to = isOpen ? el.getBoundingClientRect().height : 0;
+    el.style.height = isOpen ? 'auto' : '0px';
+    el.style.overflow = 'hidden';
+    const settle = () => {
+      if (isOpen) el.style.overflow = 'visible';
+    };
+    if (from === to || typeof el.animate !== 'function' || prefersReducedMotion()) {
+      settle();
+      return;
+    }
+    const run = el.animate([{
+      height: `${from}px`
+    }, {
+      height: `${to}px`
+    }], {
+      duration,
+      easing: 'ease-out'
+    });
+    animation.current = run;
+    run.onfinish = () => {
+      if (animation.current !== run) return;
+      animation.current = null;
+      settle();
+    };
+  }, [isOpen, duration]);
+  return {
+    ref,
+    style
+  };
+}

package/dist/version.js

@@ -8,4 +8,4 @@
 // (Fontage.ClientVersions) to spot sites that need to upgrade before a
 // feature that depends on a newer client can work for them.
 export const CLIENT_VERSION_HEADER = 'fontdue-client-version';
-export const version = "3.11.0";
+export const version = "3.12.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",