fontdue-js 3.2.6 → 3.4.0

package/dist/components/TypeTester/useFeaturesData.js

@@ -1,32 +1,22 @@
 import _useFeaturesData_fontStyle from "../../__generated__/useFeaturesData_fontStyle.graphql.js";
+import { useMemo } from 'react';
 import { graphql, useFragment } from 'react-relay';
-import featureNameData from './features.js';
-const getStylisticSetName = (feature, stylisticSetNames) => stylisticSetNames.find(_ref => {
-  let {
-    featureName
-  } = _ref;
-  return featureName === feature;
-});
-const useFeaturesData = _ref2 => {
-  var _data$fontFeatures;
+const useFeaturesData = _ref => {
   let {
     fontStyle
-  } = _ref2;
-  const data = useFragment((_useFeaturesData_fontStyle.hash && _useFeaturesData_fontStyle.hash !== "3c48a87b1b19f52e3dda10fc11f0030a" && console.error("The definition of 'useFeaturesData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFeaturesData_fontStyle), fontStyle);
-  const featureNames = ((_data$fontFeatures = data.fontFeatures) === null || _data$fontFeatures === void 0 ? void 0 : _data$fontFeatures.supportedFeatures.reduce((acc, feature) => {
-    let featureName = feature;
-    if (featureNameData.hasOwnProperty(feature)) {
-      featureName = featureNameData[feature];
-    }
-    const stylisticSetName = getStylisticSetName(feature, data.fontFeatures.stylisticSetNames);
-    if (stylisticSetName) {
-      featureName = stylisticSetName.humanName;
-    }
-    acc[feature] = featureName;
+  } = _ref;
+  const data = useFragment((_useFeaturesData_fontStyle.hash && _useFeaturesData_fontStyle.hash !== "6a05a092096a4a0c1dd10fc0610bbee2" && console.error("The definition of 'useFeaturesData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFeaturesData_fontStyle), fontStyle);
+  const fontFeatures = (data === null || data === void 0 ? void 0 : data.fontFeatures) ?? null;
+  const featureNames = useMemo(() => (fontFeatures === null || fontFeatures === void 0 ? void 0 : fontFeatures.featureNames.reduce((acc, _ref2) => {
+    let {
+      tag,
+      name
+    } = _ref2;
+    acc[tag] = name;
     return acc;
-  }, {})) ?? [];
+  }, {})) ?? {}, [fontFeatures]);
   return {
-    ...data,
+    fontFeatures,
     featureNames
   };
 };

package/dist/fontdue.css

@@ -700,6 +700,68 @@ fontdue-type-tester {
 .type-tester__features[data-selection-style=checkbox] .type-tester__features__button {
   margin-bottom: 5px;
 }
+.type-tester__features-dropdown-anchor {
+  position: relative;
+  z-index: 3;
+}
+.type-tester__features-dropdown {
+  position: absolute;
+  top: 5px;
+  right: 0;
+  box-sizing: border-box;
+  width: 320px;
+  max-width: 100%;
+  max-height: 320px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 15px;
+  border: 1px solid var(--horizontal_rule_color);
+  background: var(--primary_background_color, canvas);
+  color: var(--primary_text_color);
+}
+.type-tester__features-dropdown .type-tester__features {
+  padding-bottom: 0;
+}
+.type-tester__features-dropdown .type-tester__features[data-columns=dropdown] {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+.type-tester__features-dropdown .type-tester__features__button {
+  min-width: 0;
+}
+.type-tester__features-dropdown .type-tester__features__button > :first-child {
+  flex-shrink: 0;
+}
+.type-tester__features-dropdown .type-tester__features__button:not(:last-child) {
+  margin-bottom: 5px;
+}
+.type-tester__features-dropdown .type-tester__features__name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.type-tester__features-dropdown .type-tester__variable-axes {
+  grid-template-columns: 1fr;
+  margin-bottom: 15px;
+}
+.type-tester__features-dropdown .type-tester__variable-axes__axis {
+  box-sizing: border-box;
+  border: 1px solid var(--horizontal_rule_color);
+  padding: 10px;
+  flex-wrap: wrap;
+}
+.type-tester__features-dropdown .type-tester__variable-axes__value {
+  margin-left: auto;
+  margin-right: 0;
+}
+.type-tester__features-dropdown .type-tester__variable-axes__slider {
+  flex-basis: 100%;
+  margin-top: 8px;
+}
+.type-tester__features-dropdown .type-tester__variable-axes__name {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
 .type-tester > .type-tester__variable-axes:first-child {
   margin-top: 10px;
 }

package/dist/relay/environment.js

@@ -8,7 +8,7 @@ import { NODE_ACCESS_HEADER } from '../nodeAccess.js';
 // (defineVersionPlugin in .babelrc.cjs) with the literal package.json#version.
 // Exported so UI (the admin toolbar) can surface it without re-reading the
 // build-time global in a 'use client' module.
-export const version = "3.2.6";
+export const version = "3.4.0";
 const IS_SERVER = typeof window === typeof undefined;
 
 // Opt server fetches into Next's data cache only in production; dev stays

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.2.6",
+  "version": "3.4.0",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
@@ -57,6 +57,7 @@
     "@types/relay-runtime": "^19.0.0",
     "@types/uuid": "^8.3.3",
     "babel-plugin-relay": "^18.0.0",
+    "happy-dom": "^20.11.2",
     "npm-run-all": "^4.1.5",
     "prettier": "2.0.5",
     "react": "^19.0.0",