fontdue-js 3.10.1 → 3.12.0

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/ConfigContext.d.ts

@@ -29,8 +29,10 @@ interface PreviewConfig {
     clientSide?: boolean;
 }
 export type TestFontsFamilySelection = 'all' | 'choice';
+export type TestFontsFamilyGrouping = 'flat' | 'superfamily';
 interface TestFontsConfig {
     familySelection?: TestFontsFamilySelection;
+    familyGrouping?: TestFontsFamilyGrouping;
 }
 export interface Config {
     form?: FormConfig;
@@ -101,6 +103,7 @@ export declare const makeConfig: (config?: Config) => {
     };
     testFonts: {
         familySelection: TestFontsFamilySelection | undefined;
+        familyGrouping: TestFontsFamilyGrouping | undefined;
     };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";
@@ -182,6 +185,7 @@ declare const _default: React.Context<{
     };
     testFonts: {
         familySelection: TestFontsFamilySelection | undefined;
+        familyGrouping: TestFontsFamilyGrouping | undefined;
     };
     storeModal: {
         indexLayout: "styled-aa" | "styled-font-names";

package/dist/components/ConfigContext.js

@@ -88,7 +88,7 @@ export const mergeConfig = (base, override) => {
   return deepMerge(base, override);
 };
 export const makeConfig = config => {
-  var _config$form, _config$testFonts, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4, _config$preview, _config$preview2, _config$preview3;
+  var _config$form, _config$testFonts, _config$testFonts2, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4, _config$preview, _config$preview2, _config$preview3;
   return {
     typeTester: makeTypeTesterConfig(config === null || config === void 0 ? void 0 : config.typeTester),
     form: {
@@ -98,7 +98,8 @@ export const makeConfig = config => {
       // Deliberately no default: the form falls back to the dashboard setting
       // it reads in its own query (the npm path never merges server config
       // into `children`'s context – see ServerConfigProvider).
-      familySelection: config === null || config === void 0 ? void 0 : (_config$testFonts = config.testFonts) === null || _config$testFonts === void 0 ? void 0 : _config$testFonts.familySelection
+      familySelection: config === null || config === void 0 ? void 0 : (_config$testFonts = config.testFonts) === null || _config$testFonts === void 0 ? void 0 : _config$testFonts.familySelection,
+      familyGrouping: config === null || config === void 0 ? void 0 : (_config$testFonts2 = config.testFonts) === null || _config$testFonts2 === void 0 ? void 0 : _config$testFonts2.familyGrouping
     },
     storeModal: {
       indexLayout: (config === null || config === void 0 ? void 0 : (_config$storeModal = config.storeModal) === null || _config$storeModal === void 0 ? void 0 : _config$storeModal.indexLayout) ?? 'styled-aa',

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/TestFontsForm/TestFontsFormElement.d.ts

@@ -6,6 +6,7 @@ interface TestFontsFormElement_props {
     collectionId?: string;
     collectionSlug?: string;
     familySelection?: string;
+    familyGrouping?: string;
 }
-declare const TestFontsFormElement: ({ familySelection, ...props }: TestFontsFormElement_props) => React.JSX.Element;
+declare const TestFontsFormElement: ({ familySelection, familyGrouping, ...props }: TestFontsFormElement_props) => React.JSX.Element;
 export default TestFontsFormElement;

package/dist/components/TestFontsForm/TestFontsFormElement.js

@@ -2,12 +2,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import TestFontsFormFetcher from './index.js';
 const FAMILY_SELECTIONS = ['all', 'choice'];
+const FAMILY_GROUPINGS = ['flat', 'superfamily'];
 const TestFontsFormElement = _ref => {
   let {
     familySelection,
+    familyGrouping,
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement(TestFontsFormFetcher, _extends({}, props, {
+    familyGrouping: familyGrouping && FAMILY_GROUPINGS.includes(familyGrouping) ? familyGrouping : undefined,
     familySelection: familySelection && FAMILY_SELECTIONS.includes(familySelection) ? familySelection : undefined,
     newsletterCheckboxChecked: props.newsletterCheckboxChecked === 'true' ? true : false
   }));

package/dist/components/TestFontsForm/familyGroups.d.ts

@@ -0,0 +1,16 @@
+import { TestFontsFamilyGrouping } from '../ConfigContext.js';
+interface Superfamily {
+    readonly id: string;
+    readonly name: string | null | undefined;
+}
+export interface TestFontsFamily {
+    readonly id: string;
+    readonly name: string | null | undefined;
+    readonly parent?: Superfamily | null;
+}
+export interface FamilyGroup<Family extends TestFontsFamily> {
+    superfamily: Superfamily | null;
+    families: Family[];
+}
+export declare function groupFamilies<Family extends TestFontsFamily>(families: readonly Family[], grouping: TestFontsFamilyGrouping): FamilyGroup<Family>[];
+export {};

package/dist/components/TestFontsForm/familyGroups.js

@@ -0,0 +1,34 @@
+// One row of the family checkboxes: a lone family (`superfamily` null), or a
+// superfamily with its families nested beneath it.
+
+// Lays the families out for the form's checkboxes, keeping their order: flat
+// lists each family on its own; 'superfamily' gathers families under their
+// superfamily, placed where its first family falls. A superfamily with only one
+// family to offer adds nothing over that family, so the family stands alone.
+export function groupFamilies(families, grouping) {
+  const alone = family => ({
+    superfamily: null,
+    families: [family]
+  });
+  if (grouping !== 'superfamily') return families.map(alone);
+  const groups = [];
+  const bySuperfamily = new Map();
+  for (const family of families) {
+    const superfamily = family.parent;
+    if (!superfamily) {
+      groups.push(alone(family));
+      continue;
+    }
+    let group = bySuperfamily.get(superfamily.id);
+    if (!group) {
+      group = {
+        superfamily,
+        families: []
+      };
+      bySuperfamily.set(superfamily.id, group);
+      groups.push(group);
+    }
+    group.families.push(family);
+  }
+  return groups.map(group => group.families.length > 1 ? group : alone(group.families[0]));
+}

package/dist/components/TestFontsForm/index.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
 import { TestFontsForm_Query } from '../../__generated__/TestFontsForm_Query.graphql.js';
 import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
-import { Config, TestFontsFamilySelection } from '../ConfigContext.js';
+import { Config, TestFontsFamilyGrouping, TestFontsFamilySelection } from '../ConfigContext.js';
 import { TestFontsFormCollectionProps } from './variables.js';
 export interface TestFontsForm_props extends TestFontsFormCollectionProps {
     agreementLabel?: string;
     downloadLabel?: string;
     newsletterCheckboxChecked?: boolean;
     familySelection?: TestFontsFamilySelection;
+    familyGrouping?: TestFontsFamilyGrouping;
 }
 export type TestFontsFormPreloadedQuery = SerializablePreloadedQuery<TestFontsForm_Query>;
 export type LoadTestFontsFormQueryVariables = TestFontsFormCollectionProps;

package/dist/components/TestFontsForm/index.js

@@ -18,6 +18,7 @@ import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQ
 import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
 import ConfigContext from '../ConfigContext.js';
 import { testFontsFormQueryVariables } from './variables.js';
+import { groupFamilies } from './familyGroups.js';
 import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const updateCustomerMutation = (_TestFontsFormUpdateCustomerMutation.hash && _TestFontsFormUpdateCustomerMutation.hash !== "ba56958399f0893bd667ff02c33a6975" && console.error("The definition of 'TestFontsFormUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsFormUpdateCustomerMutation);
 // The archive endpoint's family filter: `collection_ids[]` narrows the ZIP to
@@ -41,7 +42,7 @@ const TestFontsDownloading = _ref => {
   }, "here"), ".")));
 };
 const TestFontsFormComponent = _ref2 => {
-  var _data$viewer$testFont, _data$viewer$fontdueC, _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont2;
+  var _data$viewer$testFont, _data$viewer$fontdueC, _data$viewer$fontdueC2, _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont2;
   let {
     data,
     agreementLabel,
@@ -49,7 +50,8 @@ const TestFontsFormComponent = _ref2 => {
     newsletterCheckboxChecked = false,
     collectionId,
     collectionSlug,
-    familySelection: familySelectionProp
+    familySelection: familySelectionProp,
+    familyGrouping: familyGroupingProp
   } = _ref2;
   const [email, setEmail] = useState('');
   const [name, setName] = useState('');
@@ -82,11 +84,30 @@ const TestFontsFormComponent = _ref2 => {
   // This form's prop, then code config (which, on the script-tag path, already
   // has the dashboard setting merged beneath it), then the dashboard setting.
   const familySelection = familySelectionProp ?? config.testFonts.familySelection ?? ((_data$viewer$fontdueC = data.viewer.fontdueConfig) === null || _data$viewer$fontdueC === void 0 ? void 0 : _data$viewer$fontdueC.testFonts.familySelection) ?? 'all';
+  // Resolved the same way as the family selection.
+  const familyGrouping = familyGroupingProp ?? config.testFonts.familyGrouping ?? ((_data$viewer$fontdueC2 = data.viewer.fontdueConfig) === null || _data$viewer$fontdueC2 === void 0 ? void 0 : _data$viewer$fontdueC2.testFonts.familyGrouping) ?? 'flat';
   // One family leaves nothing to choose.
   const choosing = !limited && familySelection === 'choice' && families.length > 1;
   const downloadIds = limited ? families.map(family => family.id) : choosing ? families.map(family => family.id).filter(id => chosenIds.includes(id)) : [];
-  const toggleFamily = (id, checked) => setChosenIds(ids => checked ? [...ids, id] : ids.filter(other => other !== id));
-  const allChosen = families.every(family => chosenIds.includes(family.id));
+
+  // Ticks or unticks families – one, or a superfamily's.
+  const toggleFamilies = (toggled, checked) => setChosenIds(ids => [...ids.filter(id => !toggled.includes(id)), ...(checked ? toggled : [])]);
+  const allChosen = list => list.every(family => chosenIds.includes(family.id));
+  const familyGroups = groupFamilies(families, familyGrouping);
+  const familyField = family => {
+    const fieldId = `${idPrefix}-family-${families.indexOf(family)}`;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__checkbox-field test-fonts__family",
+      key: family.id
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      id: fieldId,
+      value: family.id,
+      checked: chosenIds.includes(family.id),
+      onChange: event => toggleFamilies([family.id], event.target.checked)
+    }), /*#__PURE__*/React.createElement("label", {
+      htmlFor: fieldId
+    }, family.name));
+  };
   const recaptchaEnabled = ((_data$viewer$settings = data.viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.recaptchaEnabled) ?? false;
   const recaptchaSiteKey = (_data$viewer$settings2 = data.viewer.settings) === null || _data$viewer$settings2 === void 0 ? void 0 : _data$viewer$settings2.recaptchaSiteKey;
   const submitForm = useCallback(token => {
@@ -212,21 +233,30 @@ const TestFontsFormComponent = _ref2 => {
     className: "test-fonts__checkbox-field test-fonts__families__all"
   }, /*#__PURE__*/React.createElement(Checkbox, {
     id: `${idPrefix}-families-all`,
-    checked: allChosen,
+    checked: allChosen(families),
     onChange: event => setChosenIds(event.target.checked ? families.map(family => family.id) : [])
   }), /*#__PURE__*/React.createElement("label", {
     htmlFor: `${idPrefix}-families-all`
-  }, "Select all")), families.map((family, index) => /*#__PURE__*/React.createElement("div", {
-    className: "test-fonts__checkbox-field test-fonts__family",
-    key: family.id
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    id: `${idPrefix}-family-${index}`,
-    value: family.id,
-    checked: chosenIds.includes(family.id),
-    onChange: event => toggleFamily(family.id, event.target.checked)
-  }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: `${idPrefix}-family-${index}`
-  }, family.name)))), /*#__PURE__*/React.createElement("div", {
+  }, "Select all")), familyGroups.map((_ref4, groupIndex) => {
+    let {
+      superfamily,
+      families: grouped
+    } = _ref4;
+    return superfamily ? /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__family-group",
+      key: superfamily.id
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__checkbox-field test-fonts__superfamily"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      id: `${idPrefix}-superfamily-${groupIndex}`,
+      checked: allChosen(grouped),
+      onChange: event => toggleFamilies(grouped.map(family => family.id), event.target.checked)
+    }), /*#__PURE__*/React.createElement("label", {
+      htmlFor: `${idPrefix}-superfamily-${groupIndex}`
+    }, superfamily.name)), /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts__family-group__families"
+    }, grouped.map(familyField))) : familyField(grouped[0]);
+  })), /*#__PURE__*/React.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/React.createElement(TextField, {
     label: "Name *",
@@ -289,7 +319,7 @@ const TestFontsFormComponent = _ref2 => {
     value: id
   }))));
 };
-const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "da75e312a602ac0ee2dfb79271299c77" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
+const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "9ef2c42a7043469fec07a31649623766" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
 // Pass the same `collectionId` / `collectionSlug` as the form's props.
 export async function loadTestFontsFormQuery(variables, options) {
   // Before the collection variables existed this took `options` alone.
@@ -298,11 +328,11 @@ export async function loadTestFontsFormQuery(variables, options) {
   }
   return loadSerializableQuery(TestFontsFormQueryNode, testFontsFormQueryVariables(variables ?? {}), options);
 }
-export function TestFontsFormPreloadedQueryRenderer(_ref4) {
+export function TestFontsFormPreloadedQueryRenderer(_ref5) {
   let {
     preloadedQuery,
     ...rest
-  } = _ref4;
+  } = _ref5;
   // The query node lets the hook commit the payload into the store, so
   // usePreloadedQuery resolves synchronously during SSR instead of
   // refetching (the response cache only exists in the browser).
@@ -322,11 +352,11 @@ function TestFontsFormLazyQueryRenderer(props) {
 // (server-side preload path) or fetches lazily on mount. `EnsureFontdueContext`
 // only self-wraps with `FontdueContextProvider` when no parent Fontdue
 // context is present, seeding it with `config`.
-export default function TestFontsForm(_ref5) {
+export default function TestFontsForm(_ref6) {
   let {
     config,
     ...props
-  } = _ref5;
+  } = _ref6;
   return /*#__PURE__*/React.createElement(EnsureFontdueContext, {
     config: config
   }, props.preloadedQuery ? /*#__PURE__*/React.createElement(TestFontsFormPreloadedQueryRenderer, _extends({}, props, {