fontdue-js 2.26.1 → 2.28.0

package/dist/components/Cart/orderTracking.d.ts

@@ -0,0 +1,10 @@
+import { Environment } from 'relay-runtime';
+/**
+ * Stores the buyer's analytics context (cookie consent, Meta browser IDs,
+ * checkout page URL) on the current order. The server emits the purchase
+ * event from a Stripe webhook — outside the browser — so this is how that
+ * event respects the consent banner and carries attribution.
+ *
+ * Fire-and-forget: tracking must never break checkout.
+ */
+export declare function sendOrderTracking(environment: Environment): void;

package/dist/components/Cart/orderTracking.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sendOrderTracking = sendOrderTracking;
+var _orderTrackingUpdateOrderTrackingMutation2 = _interopRequireDefault(require("../../__generated__/orderTrackingUpdateOrderTrackingMutation.graphql"));
+var _reactRelay = require("react-relay");
+var _consent = require("../ConsentBanner/consent");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function readCookie(name) {
+  const match = document.cookie.match(new RegExp('(?:^|;\\s*)' + name + '=([^;]*)'));
+  return match ? decodeURIComponent(match[1]) : undefined;
+}
+
+/**
+ * Stores the buyer's analytics context (cookie consent, Meta browser IDs,
+ * checkout page URL) on the current order. The server emits the purchase
+ * event from a Stripe webhook — outside the browser — so this is how that
+ * event respects the consent banner and carries attribution.
+ *
+ * Fire-and-forget: tracking must never break checkout.
+ */
+function sendOrderTracking(environment) {
+  try {
+    (0, _reactRelay.commitMutation)(environment, {
+      mutation: (_orderTrackingUpdateOrderTrackingMutation2.default.hash && _orderTrackingUpdateOrderTrackingMutation2.default.hash !== "d59a127a7f140424f507ae549731bac7" && console.error("The definition of 'orderTrackingUpdateOrderTrackingMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _orderTrackingUpdateOrderTrackingMutation2.default),
+      variables: {
+        input: {
+          analyticsConsent: (0, _consent.hasConsent)('analytics'),
+          anonymousId: (0, _consent.getClientAnonymousId)(),
+          fbp: readCookie('_fbp'),
+          fbc: readCookie('_fbc'),
+          url: window.location.href
+        }
+      },
+      onCompleted: () => undefined,
+      onError: () => undefined
+    });
+  } catch {
+    // Ignore — see above.
+  }
+}

package/dist/components/ConfigContext.d.ts

@@ -34,7 +34,7 @@ export interface Config {
 export declare const makeConfig: (config?: Config) => {
     typeTester: {
         autofitOnChange: boolean;
-        truncate: boolean;
+        truncate: number | boolean;
         priceText: boolean;
         selectButtonStyle: "inline" | "outlined";
         selectButtonLabel: string;
@@ -106,7 +106,7 @@ export declare const makeConfig: (config?: Config) => {
 declare const _default: React.Context<{
     typeTester: {
         autofitOnChange: boolean;
-        truncate: boolean;
+        truncate: number | boolean;
         priceText: boolean;
         selectButtonStyle: "inline" | "outlined";
         selectButtonLabel: string;

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

@@ -1,4 +1,5 @@
 import React, { type JSX } from 'react';
+import { VerticalMetrics } from '../useFontStyle';
 import { FontStyle_fontStyle$key } from '../../__generated__/FontStyle_fontStyle.graphql';
 interface FontStyleProps {
     fontStyle: FontStyle_fontStyle$key;
@@ -7,6 +8,7 @@ interface FontStyleProps {
     children: ((props: {
         loaded: boolean;
         style: React.CSSProperties;
+        verticalMetrics: VerticalMetrics | null;
     }) => React.ReactNode) | React.ReactNode;
 }
 export default function FontStyle({ Component, fontStyle: fontStyleKey, style, children, ...rest }: Omit<React.HTMLAttributes<HTMLDivElement | HTMLSpanElement>, 'children'> & FontStyleProps): JSX.Element;

package/dist/components/FontStyle/index.js

@@ -20,7 +20,8 @@ function FontStyle(_ref) {
   const fontStyle = (0, _reactRelay.useFragment)((_FontStyle_fontStyle2.default.hash && _FontStyle_fontStyle2.default.hash !== "7891603bea1a3e40f40297bf1697eb3c" && console.error("The definition of 'FontStyle_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontStyle_fontStyle2.default), fontStyleKey);
   const {
     style: fontStyleStyle,
-    loaded
+    loaded,
+    verticalMetrics
   } = (0, _useFontStyle.default)({
     fontStyle
   });
@@ -33,6 +34,7 @@ function FontStyle(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(Component, renderProps, typeof children === 'function' ? children({
     loaded,
-    style: fontStyleStyle
+    style: fontStyleStyle,
+    verticalMetrics
   }) : children);
 }

package/dist/components/FontdueProvider/FontdueProviderClientComponent.js

@@ -16,6 +16,7 @@ var _ComponentsContext = _interopRequireDefault(require("../ComponentsContext"))
 var _UrlContext = _interopRequireDefault(require("../UrlContext"));
 var _retryImport = _interopRequireDefault(require("../../retryImport"));
 var _corsError = require("../../corsError");
+var _TypeTesterFamilies = _interopRequireDefault(require("../TypeTester/TypeTesterFamilies"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -50,7 +51,7 @@ function FontdueProviderClientComponent(_ref) {
     value: url ?? (typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_FONTDUE_URL : undefined) ?? ''
   }, /*#__PURE__*/_react.default.createElement(_ComponentsContext.default.Provider, {
     value: components ?? {}
-  }, children, /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
+  }, /*#__PURE__*/_react.default.createElement(_TypeTesterFamilies.default, null, children), /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
     fallback: null
   }, /*#__PURE__*/_react.default.createElement(_react.Suspense, {
     fallback: null

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { VariableInstance } from '../../utils';
+export interface TypeTesterFamilyListItem {
+    id: string;
+    name: string;
+    isVariableFont: boolean;
+    featureStyle: {
+        supportedLanguages: readonly string[] | null;
+    } | null;
+}
+export interface TypeTesterFamilyStyle {
+    id: string;
+    name: string;
+    cssWeight: string | null;
+    cssStyle: string | null;
+    cssStretch: string | null;
+    variableInstances: ReadonlyArray<VariableInstance> | null;
+}
+export interface TypeTesterFamilyStylesEntry {
+    loading: boolean;
+    isVariableFont: boolean;
+    styles: TypeTesterFamilyStyle[] | null;
+}
+interface FamiliesContextValue {
+    families: TypeTesterFamilyListItem[] | null;
+    loadingFamilies: boolean;
+    loadFamilies: () => void;
+    getFamilyStyles: (familyId: string) => TypeTesterFamilyStylesEntry | undefined;
+    loadFamilyStyles: (familyId: string) => void;
+}
+export declare function useTypeTesterFamilies(): FamiliesContextValue;
+export declare const typeTesterFamiliesQuery: import("react-relay").GraphQLTaggedNode;
+export declare const typeTesterFamiliesStylesQuery: import("react-relay").GraphQLTaggedNode;
+export default function TypeTesterFamiliesProvider({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export {};

package/dist/components/TypeTester/TypeTesterFamilies.js

@@ -0,0 +1,128 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TypeTesterFamiliesProvider;
+exports.typeTesterFamiliesStylesQuery = exports.typeTesterFamiliesQuery = void 0;
+exports.useTypeTesterFamilies = useTypeTesterFamilies;
+var _TypeTesterFamiliesStylesQuery2 = _interopRequireDefault(require("../../__generated__/TypeTesterFamiliesStylesQuery.graphql"));
+var _TypeTesterFamiliesQuery2 = _interopRequireDefault(require("../../__generated__/TypeTesterFamiliesQuery.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _utils = require("../../utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// A single, lightweight family-list entry for the type tester family switcher.
+// These are all cheap stored columns (plus the once-per-page language filter),
+// so this query never triggers per-style font-binary parsing.
+
+const noop = () => {};
+const TypeTesterFamiliesContext = /*#__PURE__*/(0, _react.createContext)({
+  families: null,
+  loadingFamilies: false,
+  loadFamilies: noop,
+  getFamilyStyles: () => undefined,
+  loadFamilyStyles: noop
+});
+function useTypeTesterFamilies() {
+  return (0, _react.useContext)(TypeTesterFamiliesContext);
+}
+
+// The family-switcher dropdown list. Cheap fields only; `featureStyle
+// { supportedLanguages }` resolves the language filter once per page (instead
+// of once per type tester) — see FD-685.
+const typeTesterFamiliesQuery = (_TypeTesterFamiliesQuery2.default.hash && _TypeTesterFamiliesQuery2.default.hash !== "cda53ca94a4951ee5ba29cc57281a002" && console.error("The definition of 'TypeTesterFamiliesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFamiliesQuery2.default);
+
+// The styles/instances for a single family, fetched lazily when that family is
+// opened or switched to. `variableInstances` font-binary parsing is therefore
+// scoped to one family rather than the whole library.
+exports.typeTesterFamiliesQuery = typeTesterFamiliesQuery;
+const typeTesterFamiliesStylesQuery = (_TypeTesterFamiliesStylesQuery2.default.hash && _TypeTesterFamiliesStylesQuery2.default.hash !== "feee079c690b83b56cfb01cb81f36dce" && console.error("The definition of 'TypeTesterFamiliesStylesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFamiliesStylesQuery2.default);
+exports.typeTesterFamiliesStylesQuery = typeTesterFamiliesStylesQuery;
+function TypeTesterFamiliesProvider(_ref) {
+  let {
+    children
+  } = _ref;
+  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const [families, setFamilies] = (0, _react.useState)(null);
+  const [loadingFamilies, setLoadingFamilies] = (0, _react.useState)(false);
+  const familiesRequested = (0, _react.useRef)(false);
+  const [familyStyles, setFamilyStyles] = (0, _react.useState)(() => new Map());
+  const familyStylesRequested = (0, _react.useRef)(new Set());
+  const loadFamilies = (0, _react.useCallback)(() => {
+    if (familiesRequested.current) return;
+    familiesRequested.current = true;
+    setLoadingFamilies(true);
+    (0, _reactRelay.fetchQuery)(environment, typeTesterFamiliesQuery, {}).toPromise().then(data => {
+      var _data$viewer, _data$viewer$families;
+      const list = ((data === null || data === void 0 ? void 0 : (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$families = _data$viewer.families) === null || _data$viewer$families === void 0 ? void 0 : _data$viewer$families.edges) ?? []).map(edge => edge === null || edge === void 0 ? void 0 : edge.node).filter(_utils.notEmpty).map(node => ({
+        id: node.id,
+        name: node.name,
+        isVariableFont: node.isVariableFont,
+        featureStyle: node.featureStyle ? {
+          supportedLanguages: node.featureStyle.supportedLanguages ?? null
+        } : null
+      }));
+      setFamilies(list);
+    }).catch(() => {
+      // allow a retry on the next open if the request failed
+      familiesRequested.current = false;
+    }).finally(() => setLoadingFamilies(false));
+  }, [environment]);
+  const setEntry = (0, _react.useCallback)((familyId, entry) => {
+    setFamilyStyles(prev => {
+      const next = new Map(prev);
+      next.set(familyId, entry);
+      return next;
+    });
+  }, []);
+  const loadFamilyStyles = (0, _react.useCallback)(familyId => {
+    if (!familyId || familyStylesRequested.current.has(familyId)) return;
+    familyStylesRequested.current.add(familyId);
+    setEntry(familyId, {
+      loading: true,
+      isVariableFont: false,
+      styles: null
+    });
+    (0, _reactRelay.fetchQuery)(environment, typeTesterFamiliesStylesQuery, {
+      familyId
+    }).toPromise().then(data => {
+      const node = data === null || data === void 0 ? void 0 : data.node;
+      const fontStyles = node && 'fontStyles' in node ? node.fontStyles : null;
+      const isVariableFont = node && 'isVariableFont' in node ? node.isVariableFont : false;
+      setEntry(familyId, {
+        loading: false,
+        isVariableFont: isVariableFont ?? false,
+        styles: (fontStyles ?? []).map(style => ({
+          id: style.id,
+          name: style.name,
+          cssWeight: style.cssWeight ?? null,
+          cssStyle: style.cssStyle ?? null,
+          cssStretch: style.cssStretch ?? null,
+          variableInstances: style.variableInstances ?? null
+        }))
+      });
+    }).catch(() => {
+      // allow a retry on the next open if the request failed
+      familyStylesRequested.current.delete(familyId);
+      setEntry(familyId, {
+        loading: false,
+        isVariableFont: false,
+        styles: null
+      });
+    });
+  }, [environment, setEntry]);
+  const getFamilyStyles = (0, _react.useCallback)(familyId => familyStyles.get(familyId), [familyStyles]);
+  return /*#__PURE__*/_react.default.createElement(TypeTesterFamiliesContext.Provider, {
+    value: {
+      families,
+      loadingFamilies,
+      loadFamilies,
+      getFamilyStyles,
+      loadFamilyStyles
+    }
+  }, children);
+}

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -95,7 +95,6 @@ function TypeTesterStandaloneComponent(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_index.default, {
     id: "standalone",
-    viewer: data.viewer,
     fontStyle: changedStyle ? changedStylesData.node : (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.fontStyle,
     onStyleSelect: handleStyleSelect,
     axes: axes,
@@ -106,7 +105,7 @@ function TypeTesterStandaloneComponent(_ref) {
     onBlur: onBlur
   }));
 }
-const query = (_TypeTesterStandaloneQuery2.default.hash && _TypeTesterStandaloneQuery2.default.hash !== "57916b8e26a166271a80c5df1b3f68ec" && console.error("The definition of 'TypeTesterStandaloneQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneQuery2.default);
+const query = (_TypeTesterStandaloneQuery2.default.hash && _TypeTesterStandaloneQuery2.default.hash !== "951214eacb2370ea3ca0b19bebe7fbe7" && console.error("The definition of 'TypeTesterStandaloneQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneQuery2.default);
 function TypeTesterStandalonePreloadedQueryRenderer(_ref3) {
   let {
     preloadedQuery,
@@ -125,13 +124,9 @@ function TypeTesterStandalone(_ref4) {
     styleName,
     ...rest
   } = _ref4;
-  const {
-    typeTester: config
-  } = (0, _react.useContext)(_ConfigContext.default);
   const data = (0, _reactRelay.useLazyLoadQuery)(query, {
     familyName,
-    styleName,
-    selectable: config.selectable
+    styleName
   });
   const fontStyle = (_data$viewer4 = data.viewer) === null || _data$viewer4 === void 0 ? void 0 : _data$viewer4.fontStyle;
   if (!fontStyle) {

package/dist/components/TypeTester/TypeTesterStandalone.server.js

@@ -18,8 +18,7 @@ async function TypeTesterStandalone(_ref) {
   } = _ref;
   const preloadedQuery = await (0, _loadSerializableQuery.default)(_TypeTesterStandaloneQuery.default, {
     familyName,
-    styleName,
-    selectable: true
+    styleName
   });
   return /*#__PURE__*/_react.default.createElement(_TypeTesterStandalone.TypeTesterStandalonePreloadedQueryRenderer, _extends({
     preloadedQuery: preloadedQuery

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

@@ -1,17 +1,27 @@
 import React from 'react';
 import { VariableInstance, VariableSettings } from '../../utils';
+export interface SelectedFamily {
+    id: string;
+    name: string;
+    isVariableFont: boolean;
+    fontStyles: ReadonlyArray<{
+        id: string;
+        name: string;
+        variableInstances: ReadonlyArray<VariableInstance> | null;
+    }> | null;
+}
 interface TypeTesterStyleSelectProps {
     families: {
         id: string;
         name: string;
-        readonly fontStyles: ReadonlyArray<{
-            id: string;
-            name: string;
-            variableInstances: ReadonlyArray<VariableInstance> | null;
-        }> | null;
     }[];
+    selectedFamily: SelectedFamily | null;
+    familyValue: string | null;
     selectedFontStyleId: string;
     selectedVariableSettings: VariableSettings | null;
+    loadingFamilies?: boolean;
+    loading?: boolean;
+    onOpen?: () => void;
     onSelectFontStyleValue: (value: {
         fontStyleId: string;
         variableSettings?: VariableSettings;

package/dist/components/TypeTester/TypeTesterStyleSelect.js

@@ -9,36 +9,30 @@ var _utils = require("../../utils");
 var _Select = _interopRequireDefault(require("../Select"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const VARIABLE_AXES = 'VARIABLE_AXES';
+const LOADING = '__loading__';
 const TypeTesterStyleSelect = _ref => {
-  var _selectedFamily$fontS7;
+  var _selectedFamily$fontS4;
   let {
     families,
+    selectedFamily,
+    familyValue,
     selectedFontStyleId,
     selectedVariableSettings,
+    loadingFamilies,
+    loading,
+    onOpen,
     onSelectFontStyleValue,
     onSelectVariableAxes,
     onSelectFamilyId,
     includeVariableAxesOption
   } = _ref;
-  const selectedFamily = families.find(family => family.fontStyles && family.fontStyles.some(_ref2 => {
-    let {
-      id
-    } = _ref2;
-    return id === selectedFontStyleId;
-  }));
-  const selectedFontStyle = selectedFamily && selectedFamily.fontStyles && selectedFamily.fontStyles.find(_ref3 => {
-    let {
-      id
-    } = _ref3;
-    return id === selectedFontStyleId;
-  });
   const handleSelectFontStyle = selection => {
     if (selection === VARIABLE_AXES) {
       onSelectVariableAxes();
     } else if (selection.includes(':::')) {
       var _selectedFamily$fontS, _selectedFamily$fontS2, _selectedFamily$fontS3;
       const [fontStyleId, instanceName] = selection.split(':::');
-      const instance = selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS = selectedFamily.fontStyles) === null || _selectedFamily$fontS === void 0 ? void 0 : (_selectedFamily$fontS2 = _selectedFamily$fontS.find(style => style.id === fontStyleId)) === null || _selectedFamily$fontS2 === void 0 ? void 0 : (_selectedFamily$fontS3 = _selectedFamily$fontS2.variableInstances) === null || _selectedFamily$fontS3 === void 0 ? void 0 : _selectedFamily$fontS3.find(instance => instance.name === instanceName);
+      const instance = selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS = selectedFamily.fontStyles) === null || _selectedFamily$fontS === void 0 ? void 0 : (_selectedFamily$fontS2 = _selectedFamily$fontS.find(style => style.id === fontStyleId)) === null || _selectedFamily$fontS2 === void 0 ? void 0 : (_selectedFamily$fontS3 = _selectedFamily$fontS2.variableInstances) === null || _selectedFamily$fontS3 === void 0 ? void 0 : _selectedFamily$fontS3.find(inst => inst.name === instanceName);
       let variableSettings;
       if (instance) variableSettings = (0, _utils.variableInstanceSettings)(instance);
       onSelectFontStyleValue({
@@ -51,25 +45,28 @@ const TypeTesterStyleSelect = _ref => {
       });
     }
   };
-  if (!selectedFamily || !selectedFontStyle) return null;
-  let value = selectedFontStyleId;
-  if (selectedVariableSettings) {
-    var _selectedFamily$fontS4, _selectedFamily$fontS5, _selectedFamily$fontS6;
-    const instance = selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS4 = selectedFamily.fontStyles) === null || _selectedFamily$fontS4 === void 0 ? void 0 : (_selectedFamily$fontS5 = _selectedFamily$fontS4.find(style => style.id === value)) === null || _selectedFamily$fontS5 === void 0 ? void 0 : (_selectedFamily$fontS6 = _selectedFamily$fontS5.variableInstances) === null || _selectedFamily$fontS6 === void 0 ? void 0 : _selectedFamily$fontS6.find(instance => (0, _utils.compareVariableSettings)(instance, selectedVariableSettings));
-    if (instance) {
-      value = `${value}:::${instance.name}`;
-    } else {
-      value = null;
-    }
-  }
+  const familyOptions = families.map(_ref2 => {
+    let {
+      id,
+      name
+    } = _ref2;
+    return {
+      value: id,
+      text: name
+    };
+  });
+  if (loadingFamilies) familyOptions.push({
+    value: LOADING,
+    text: 'Loading…'
+  });
   let isVariable = false;
-  let options = selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS7 = selectedFamily.fontStyles) === null || _selectedFamily$fontS7 === void 0 ? void 0 : _selectedFamily$fontS7.flatMap(_ref4 => {
+  const styleOptions = (selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS4 = selectedFamily.fontStyles) === null || _selectedFamily$fontS4 === void 0 ? void 0 : _selectedFamily$fontS4.flatMap(_ref3 => {
     let {
       id,
       name,
       variableInstances
-    } = _ref4;
-    if (variableInstances && (variableInstances === null || variableInstances === void 0 ? void 0 : variableInstances.length) > 0) {
+    } = _ref3;
+    if (variableInstances && variableInstances.length > 0) {
       isVariable = true;
       return variableInstances.map(instance => ({
         value: `${id}:::${instance.name}`,
@@ -80,34 +77,47 @@ const TypeTesterStyleSelect = _ref => {
       value: id,
       text: name
     }];
-  });
+  })) ?? [];
   if (isVariable && includeVariableAxesOption) {
-    options === null || options === void 0 ? void 0 : options.push({
+    styleOptions.push({
       value: VARIABLE_AXES,
       text: 'Variable axes...'
     });
   }
+  let styleValue = selectedFontStyleId;
+  if (selectedVariableSettings) {
+    var _selectedFamily$fontS5, _selectedFamily$fontS6, _selectedFamily$fontS7;
+    const instance = selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS5 = selectedFamily.fontStyles) === null || _selectedFamily$fontS5 === void 0 ? void 0 : (_selectedFamily$fontS6 = _selectedFamily$fontS5.find(style => style.id === selectedFontStyleId)) === null || _selectedFamily$fontS6 === void 0 ? void 0 : (_selectedFamily$fontS7 = _selectedFamily$fontS6.variableInstances) === null || _selectedFamily$fontS7 === void 0 ? void 0 : _selectedFamily$fontS7.find(inst => (0, _utils.compareVariableSettings)(inst, selectedVariableSettings));
+    styleValue = instance ? `${selectedFontStyleId}:::${instance.name}` : null;
+  }
+
+  // Ignore the synthetic "Loading…" placeholder if it is somehow selected.
+  const ignoreLoading = cb => e => {
+    if (e.target.value === LOADING) return;
+    cb(e.target.value);
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "type-tester-select"
+    className: "type-tester-select",
+    "data-loading": loading || undefined,
+    "aria-busy": loading || undefined,
+    style: {
+      opacity: loading ? 0.6 : 1,
+      transition: 'opacity 120ms ease'
+    }
   }, /*#__PURE__*/_react.default.createElement(_Select.default, {
-    options: families.map(_ref5 => {
-      let {
-        id,
-        name
-      } = _ref5;
-      return {
-        value: id,
-        text: name
-      };
-    }),
-    value: selectedFamily.id,
-    onChange: e => onSelectFamilyId(e.target.value),
+    options: familyOptions,
+    value: familyValue,
+    onChange: ignoreLoading(onSelectFamilyId),
+    onMouseDown: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(),
+    onFocus: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(),
     onClick: e => e.stopPropagation()
-  }), options && /*#__PURE__*/_react.default.createElement(_Select.default, {
-    options: options,
-    value: value,
+  }), styleOptions.length > 0 && /*#__PURE__*/_react.default.createElement(_Select.default, {
+    options: styleOptions,
+    value: styleValue,
     nullText: "Custom",
-    onChange: e => handleSelectFontStyle(e.target.value),
+    onChange: ignoreLoading(handleSelectFontStyle),
+    onMouseDown: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(),
+    onFocus: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(),
     onClick: e => e.stopPropagation()
   }));
 };

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

@@ -1,11 +1,9 @@
 import React from 'react';
 import { VariableSettings } from '../../utils';
 import { TypeTesterStyleSelectData_fontStyle$key } from '../../__generated__/TypeTesterStyleSelectData_fontStyle.graphql';
-import { TypeTesterStyleSelectData_viewer$key } from '../../__generated__/TypeTesterStyleSelectData_viewer.graphql';
 import { TypeTesterConfig } from '.';
 interface TypeTesterStyleSelectDataProps {
     fontStyle: TypeTesterStyleSelectData_fontStyle$key;
-    viewer: TypeTesterStyleSelectData_viewer$key | null;
     variableSettings: VariableSettings | null;
     onSelectFontStyleValue: (value: {
         fontStyleId: string;
@@ -15,5 +13,5 @@ interface TypeTesterStyleSelectDataProps {
     config: TypeTesterConfig;
     includeVariableAxesOption: boolean;
 }
-export default function TypeTesterStyleSelectData({ fontStyle: fontStyleKey, viewer: viewerKey, onSelectFontStyleValue, onSelectVariableAxes, config, variableSettings, includeVariableAxesOption, }: TypeTesterStyleSelectDataProps): React.JSX.Element | null;
+export default function TypeTesterStyleSelectData({ fontStyle: fontStyleKey, onSelectFontStyleValue, onSelectVariableAxes, config, variableSettings, includeVariableAxesOption, }: TypeTesterStyleSelectDataProps): React.JSX.Element;
 export {};