fontdue-js 3.10.1 → 3.12.0

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

@@ -14,12 +14,14 @@ interface VerticalMetrics {
  * CSS must use to render it: `"<cssFamily> <styleName>"`, made safe to parse
  * as an unquoted CSS font-family.
  *
- * Some Safari builds parse the FontFace family argument as CSS, so a name
- * like "Hell's Gate fairypools" (the apostrophe opens an unterminated string)
- * or "0712 Regular" (an identifier can't start with a digit) makes `load()`
- * reject with "SyntaxError: The string did not match the expected pattern."
- * and the style never renders, while Chrome and other WebKit builds take the
- * argument literally. A name that is valid either way works everywhere:
+ * Safari 26.0.x (macOS Tahoe / iOS 26 before their point updates) parses the
+ * FontFace family argument as CSS, so a name like "Hell's Gate fairypools"
+ * (the apostrophe opens an unterminated string) or "0712 Regular" (an
+ * identifier can't start with a digit) makes `load()` reject with
+ * "SyntaxError: The string did not match the expected pattern." and the style
+ * never renders. Chrome and other Safari builds (17.3, 18.4, 26.4+, 27.0 were
+ * checked) take the argument literally. A name that is valid either way
+ * works everywhere:
  *
  * - an ASCII character other than a letter, digit, `-` or `_` is escaped as
  *   `_<hex code>` (`'` → `_27`), so distinct names stay distinct;

package/dist/fontLoader.js

@@ -7,12 +7,14 @@ const RESERVED_FAMILY_WORDS = new Set(['inherit', 'initial', 'unset', 'revert',
  * CSS must use to render it: `"<cssFamily> <styleName>"`, made safe to parse
  * as an unquoted CSS font-family.
  *
- * Some Safari builds parse the FontFace family argument as CSS, so a name
- * like "Hell's Gate fairypools" (the apostrophe opens an unterminated string)
- * or "0712 Regular" (an identifier can't start with a digit) makes `load()`
- * reject with "SyntaxError: The string did not match the expected pattern."
- * and the style never renders, while Chrome and other WebKit builds take the
- * argument literally. A name that is valid either way works everywhere:
+ * Safari 26.0.x (macOS Tahoe / iOS 26 before their point updates) parses the
+ * FontFace family argument as CSS, so a name like "Hell's Gate fairypools"
+ * (the apostrophe opens an unterminated string) or "0712 Regular" (an
+ * identifier can't start with a digit) makes `load()` reject with
+ * "SyntaxError: The string did not match the expected pattern." and the style
+ * never renders. Chrome and other Safari builds (17.3, 18.4, 26.4+, 27.0 were
+ * checked) take the argument literally. A name that is valid either way
+ * works everywhere:
  *
  * - an ASCII character other than a letter, digit, `-` or `_` is escaped as
  *   `_<hex code>` (`'` → `_27`), so distinct names stay distinct;

package/dist/fontdue.css

@@ -185,6 +185,9 @@
 .test-fonts__families .test-fonts__checkbox-field {
   margin-bottom: 10px;
 }
+.test-fonts__family-group__families {
+  padding-left: calc(var(--checkbox-size, 20px) + var(--checkbox-margin, 10px));
+}
 .test-fonts__agreement[data-highlighted=true] {
   color: red;
 }

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.10.1";
+export const version = "3.12.0";

package/package.json

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