fontdue-js 3.11.0 → 3.12.1

package/dist/components/CustomerSignIn/CustomerSignInElement.js

@@ -0,0 +1,132 @@
+'use client';
+
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import _CustomerSignInElementQuery from "../../__generated__/CustomerSignInElementQuery.graphql.js";
+import React, { Suspense, useCallback, useState, useSyncExternalStore } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { graphql, useLazyLoadQuery } from 'react-relay';
+import CustomerSignIn from './index.js';
+import { clearTokens, getTokens, subscribeToTokens } from '../../auth/tokenStore.js';
+import { useFontdueUrl } from '../UrlContext.js';
+const query = (_CustomerSignInElementQuery.hash && _CustomerSignInElementQuery.hash !== "e7d4a8fb8d19581d6bc36f29090230af" && console.error("The definition of 'CustomerSignInElementQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CustomerSignInElementQuery);
+
+/** Dispatched on `window` once the customer is signed in; `detail.customer`. */
+export const SIGNED_IN_EVENT = 'fontdue:customer-signed-in';
+/** Dispatched on `window` when the customer clicks the element's sign-out button. */
+export const SIGNED_OUT_EVENT = 'fontdue:customer-signed-out';
+/**
+ * `<fontdue-customer-sign-in>`: the script-tag wrapper around `CustomerSignIn`.
+ *
+ * A page has no React of its own to read `useCurrentCustomer()` with, so the
+ * element shows the signed-in state itself – who is signed in and a way out –
+ * and tells the page about both changes with window events, as `setConsent`
+ * does with `fontdue:consent`.
+ *
+ * Not in the npm package's `exports`: sign-in is script-tag only for now.
+ */
+export default function CustomerSignInElement(_ref) {
+  let {
+    signOutLabel = 'Sign out',
+    ...props
+  } = _ref;
+  const url = useFontdueUrl();
+  // The script tag never renders on a server, so reading the store during
+  // render can't cause a hydration mismatch – and it means a returning
+  // customer never sees the form flash before their session is read.
+  const accessToken = useSyncExternalStore(subscribeToTokens, () => {
+    var _getTokens;
+    return ((_getTokens = getTokens(url)) === null || _getTokens === void 0 ? void 0 : _getTokens.accessToken) ?? null;
+  }, () => null);
+  // The customer `verifyLoginCode` just returned, tied to the token it came
+  // with, so the signed-in state shows at once instead of after a lookup. Any
+  // other session – a page load, a sign-in in another element, a renewed
+  // token – is looked up.
+  const [justSignedIn, setJustSignedIn] = useState(null);
+  const handleSignedIn = useCallback(customer => {
+    if (customer) {
+      var _getTokens2;
+      setJustSignedIn({
+        accessToken: (_getTokens2 = getTokens(url)) === null || _getTokens2 === void 0 ? void 0 : _getTokens2.accessToken,
+        customer
+      });
+    }
+    window.dispatchEvent(new CustomEvent(SIGNED_IN_EVENT, {
+      detail: {
+        customer
+      }
+    }));
+  }, [url]);
+  const signOut = useCallback(() => {
+    clearTokens(url);
+    setJustSignedIn(null);
+    window.dispatchEvent(new CustomEvent(SIGNED_OUT_EVENT));
+  }, [url]);
+  const form = /*#__PURE__*/React.createElement(CustomerSignIn, _extends({}, props, {
+    onSignedIn: handleSignedIn
+  }));
+  if (accessToken == null) return form;
+  if (justSignedIn && justSignedIn.accessToken === accessToken) {
+    return /*#__PURE__*/React.createElement(SignedIn, {
+      customer: justSignedIn.customer,
+      signOut: signOut,
+      signOutLabel: signOutLabel
+    });
+  }
+
+  // A lookup that fails leaves the visitor able to sign in again rather than
+  // facing an empty element.
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    fallback: form,
+    resetKeys: [accessToken]
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(SignedInLookup, {
+    key: accessToken,
+    form: form,
+    signOut: signOut,
+    signOutLabel: signOutLabel
+  })));
+}
+function SignedInLookup(_ref2) {
+  var _data$viewer;
+  let {
+    form,
+    signOut,
+    signOutLabel
+  } = _ref2;
+  // network-only: who is signed in *now*, never a store hit left over from the
+  // previous customer.
+  const data = useLazyLoadQuery(query, {}, {
+    fetchPolicy: 'network-only'
+  });
+  const customer = (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.currentCustomer;
+
+  // A token the server no longer honours is cleared by the network layer,
+  // which re-renders the element signed out. A null here without that is a
+  // session that names nobody; offer the form.
+  if (!customer) return form;
+  return /*#__PURE__*/React.createElement(SignedIn, {
+    customer: customer,
+    signOut: signOut,
+    signOutLabel: signOutLabel
+  });
+}
+function SignedIn(_ref3) {
+  let {
+    customer,
+    signOut,
+    signOutLabel
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "customer-sign-in",
+    "data-step": "signed-in"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "customer-sign-in__intro"
+  }, "Signed in as ", customer.email ?? customer.name, "."), /*#__PURE__*/React.createElement("div", {
+    className: "customer-sign-in__actions"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "customer-sign-in__back",
+    type: "button",
+    onClick: signOut
+  }, signOutLabel)));
+}

package/dist/components/CustomerSignIn/index.js

@@ -54,9 +54,11 @@ function CustomerSignInFields(_ref) {
           email
         }
       },
-      onCompleted: res => {
+      onCompleted: (res, errors) => {
         var _res$requestLoginCode;
-        if ((_res$requestLoginCode = res.requestLoginCode) !== null && _res$requestLoginCode !== void 0 && _res$requestLoginCode.success) {
+        if (errors && errors.length > 0) {
+          setError(errors[0].message);
+        } else if ((_res$requestLoginCode = res.requestLoginCode) !== null && _res$requestLoginCode !== void 0 && _res$requestLoginCode.success) {
           setStep('code');
         } else {
           // The only unsuccessful answer is the rate limit, and it is about the

package/dist/components/Root/index.js

@@ -25,6 +25,8 @@ const customElementMap = {
   'fontdue-cookie-notification': /*#__PURE__*/lazy(() => retryImport(() => import('../CookieNotification/index.js'))),
   'fontdue-font-families': /*#__PURE__*/lazy(() => retryImport(() => import('../FontFamilies/index.js'))),
   'fontdue-customer-login-form': /*#__PURE__*/lazy(() => retryImport(() => import('../CustomerLoginForm/index.js'))),
+  // Script tag only: CustomerSignIn isn't in the npm package's `exports` yet.
+  'fontdue-customer-sign-in': /*#__PURE__*/lazy(() => retryImport(() => import('../CustomerSignIn/CustomerSignInElement.js'))),
   'fontdue-newsletter-signup': /*#__PURE__*/lazy(() => retryImport(() => import('../NewsletterSignup/NewsletterSignupElement.js'))),
   'fontdue-node-password-form': /*#__PURE__*/lazy(() => retryImport(() => import('../NodePasswordForm/NodePasswordFormElement.js'))),
   // @ts-ignore

package/dist/components/StripeProvider/index.js

@@ -1,11 +1,13 @@
 import _StripeProviderCreateCheckoutSessionMutation from "../../__generated__/StripeProviderCreateCheckoutSessionMutation.graphql.js";
 import _StripeProvider_viewer from "../../__generated__/StripeProvider_viewer.graphql.js";
-import React, { useCallback, useContext, useRef } from 'react';
+import React, { useCallback, useContext, useRef, useState } from 'react';
 import { commitMutation, graphql, useFragment, useRelayEnvironment } from 'react-relay';
 import { Elements, EmbeddedCheckoutProvider } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import { parseCustomProperties } from '../../utils.js';
 import ConfigContext from '../ConfigContext.js';
+import StoreModalPageContainer from '../elements/StoreModalPageContainer/index.js';
+const CHECKOUT_ERROR = 'We couldn’t start the checkout – please try again';
 const StripeProvider = _ref => {
   var _data$currentOrder, _data$settings, _data$settings$uiFont, _data$settings$uiFont2, _data$settings$uiFont3, _data$settings2, _data$currentOrder2, _data$currentOrder2$s, _data$themeConfig;
   let {
@@ -26,6 +28,7 @@ const StripeProvider = _ref => {
   const {
     stripe: config
   } = useContext(ConfigContext);
+  const [checkoutError, setCheckoutError] = useState(null);
   let customFontSource;
   const woffSrc = (_data$settings = data.settings) === null || _data$settings === void 0 ? void 0 : (_data$settings$uiFont = _data$settings.uiFontStyle) === null || _data$settings$uiFont === void 0 ? void 0 : (_data$settings$uiFont2 = _data$settings$uiFont.webfontSources) === null || _data$settings$uiFont2 === void 0 ? void 0 : (_data$settings$uiFont3 = _data$settings$uiFont2.find(source => (source === null || source === void 0 ? void 0 : source.format) === 'woff2')) === null || _data$settings$uiFont3 === void 0 ? void 0 : _data$settings$uiFont3.url;
   let fontFamily = (_data$settings2 = data.settings) !== null && _data$settings2 !== void 0 && _data$settings2.uiFontStyle ? `${data.settings.uiFontStyle.cssFamily} ${data.settings.uiFontStyle.name}` : undefined;
@@ -50,16 +53,22 @@ const StripeProvider = _ref => {
       commitMutation(environment, {
         mutation: (_StripeProviderCreateCheckoutSessionMutation.hash && _StripeProviderCreateCheckoutSessionMutation.hash !== "2ca9a7fcfed1292117e3cd6d0d95cca6" && console.error("The definition of 'StripeProviderCreateCheckoutSessionMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _StripeProviderCreateCheckoutSessionMutation),
         variables: {},
-        onCompleted: response => {
+        onCompleted: (response, errors) => {
           var _response$createOrder, _response$createOrder2, _response$createOrder3;
           const clientSecret = (_response$createOrder = response.createOrderCheckoutSession) === null || _response$createOrder === void 0 ? void 0 : (_response$createOrder2 = _response$createOrder.order) === null || _response$createOrder2 === void 0 ? void 0 : (_response$createOrder3 = _response$createOrder2.stripeCheckoutSession) === null || _response$createOrder3 === void 0 ? void 0 : _response$createOrder3.clientSecret;
           if (clientSecret) {
             resolve(clientSecret);
           } else {
+            var _errors$;
+            // Stripe refused the session (e.g. a total under its minimum
+            // charge): show its reason, which the embedded checkout would
+            // otherwise swallow into a generic error.
+            setCheckoutError((errors === null || errors === void 0 ? void 0 : (_errors$ = errors[0]) === null || _errors$ === void 0 ? void 0 : _errors$.message) ?? CHECKOUT_ERROR);
             reject("Didn't find client secret");
           }
         },
         onError: error => {
+          setCheckoutError(CHECKOUT_ERROR);
           reject(`Error creating checkout session: ${error.message}`);
         }
       });
@@ -147,6 +156,14 @@ const StripeProvider = _ref => {
     syncAddressCheckbox: 'none'
   };
   if (providerType === 'checkout') {
+    if (checkoutError) {
+      return /*#__PURE__*/React.createElement(StoreModalPageContainer, null, {
+        body: /*#__PURE__*/React.createElement("div", {
+          className: "store-modal__cart__error",
+          role: "alert"
+        }, checkoutError)
+      });
+    }
     return /*#__PURE__*/React.createElement(EmbeddedCheckoutProvider, {
       stripe: stripePromiseRef.current,
       options: {

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/TypeTesterStyleSelect.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { compareVariableSettings, variableInstanceSettings } from '../../utils.js';
 import Select from '../Select/index.js';
+import usePrefetchWhenNear from './usePrefetchWhenNear.js';
 const VARIABLE_AXES = 'VARIABLE_AXES';
 const LOADING = '__loading__';
 const TypeTesterStyleSelect = _ref => {
@@ -19,6 +20,8 @@ const TypeTesterStyleSelect = _ref => {
     onSelectFamilyId,
     includeVariableAxesOption
   } = _ref;
+  const containerRef = useRef(null);
+  usePrefetchWhenNear(containerRef, onOpen);
   const handleSelectFontStyle = selection => {
     if (selection === VARIABLE_AXES) {
       onSelectVariableAxes();
@@ -90,7 +93,9 @@ const TypeTesterStyleSelect = _ref => {
     cb(e.target.value);
   };
   return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
     className: "type-tester-select",
+    onPointerEnter: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(),
     "data-loading": loading || undefined,
     "aria-busy": loading || undefined,
     style: {

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/components/TypeTester/usePrefetchWhenNear.d.ts

@@ -0,0 +1,14 @@
+export declare const PREFETCH_ROOT_MARGIN = "300px";
+export declare const PREFETCH_IDLE_TIMEOUT = 2000;
+/**
+ * Calls `prefetch` once, at idle time, after the element first comes near the
+ * viewport. Native `<select>` menus snapshot their options when they open (in
+ * Safari the open menu never updates), so data a dropdown needs has to be
+ * there before the first click – fetching on mousedown is too late. Waiting
+ * for idle keeps the request off the initial render, and waiting for the
+ * viewport keeps a long page of testers from fetching for every one at once.
+ *
+ *     const ref = useRef<HTMLDivElement>(null);
+ *     usePrefetchWhenNear(ref, loadOptions);
+ */
+export default function usePrefetchWhenNear(ref: React.RefObject<Element | null>, prefetch: (() => void) | undefined): void;