react-fontpicker-ts 0.3.1 → 0.4.0

package/dist/index.js

@@ -48,6 +48,26 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // font-preview/font-previews.css
 var init_font_previews = __esm({
@@ -202,6 +222,21 @@ var fontInfo_default = [
       "1,900"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Afacad",
+    sane: "afacad",
+    variants: [
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "1,400",
+      "1,500",
+      "1,600",
+      "1,700"
+    ]
+  },
   {
     category: "display",
     name: "Agbalumo",
@@ -908,6 +943,15 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "serif",
+    name: "Annapurna SIL",
+    sane: "annapurna_sil",
+    variants: [
+      "0,400",
+      "0,700"
+    ]
+  },
   {
     category: "handwriting",
     name: "Annie Use Your Telescope",
@@ -927,6 +971,14 @@ var fontInfo_default = [
       "1,700"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Anta",
+    sane: "anta",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Antic",
@@ -5133,12 +5185,12 @@ var fontInfo_default = [
     sane: "gelasio",
     variants: [
       "0,400",
-      "1,400",
       "0,500",
-      "1,500",
       "0,600",
-      "1,600",
       "0,700",
+      "1,400",
+      "1,500",
+      "1,600",
       "1,700"
     ]
   },
@@ -5840,6 +5892,22 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Hedvig Letters Sans",
+    sane: "hedvig_letters_sans",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "serif",
+    name: "Hedvig Letters Serif",
+    sane: "hedvig_letters_serif",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Heebo",
@@ -5988,6 +6056,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Honk",
+    sane: "honk",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Hubballi",
@@ -6555,6 +6631,38 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Jacquard 12 Charted",
+    sane: "jacquard_12_charted",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Jacquard 24",
+    sane: "jacquard_24",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Jacquarda Bastarda 9",
+    sane: "jacquarda_bastarda_9",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Jacquarda Bastarda 9 Charted",
+    sane: "jacquarda_bastarda_9_charted",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "serif",
     name: "Jacques Francois",
@@ -6580,6 +6688,62 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "display",
+    name: "Jersey 10",
+    sane: "jersey_10",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Jersey 10 Charted",
+    sane: "jersey_10_charted",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Jersey 15",
+    sane: "jersey_15",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Jersey 15 Charted",
+    sane: "jersey_15_charted",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Jersey 20",
+    sane: "jersey_20",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Jersey 20 Charted",
+    sane: "jersey_20_charted",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Jersey 25",
+    sane: "jersey_25",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "monospace",
     name: "JetBrains Mono",
@@ -6887,6 +7051,20 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "serif",
+    name: "Kalnia",
+    sane: "kalnia",
+    variants: [
+      "0,100",
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700"
+    ]
+  },
   {
     category: "serif",
     name: "Kameron",
@@ -7156,6 +7334,17 @@ var fontInfo_default = [
       "1,700"
     ]
   },
+  {
+    category: "monospace",
+    name: "Kode Mono",
+    sane: "kode_mono",
+    variants: [
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700"
+    ]
+  },
   {
     category: "sans-serif",
     name: "KoHo",
@@ -8154,6 +8343,14 @@ var fontInfo_default = [
       "0,900"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Madimi One",
+    sane: "madimi_one",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Magra",
@@ -8691,6 +8888,22 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Micro 5",
+    sane: "micro_5",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Micro 5 Charted",
+    sane: "micro_5_charted",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Milonga",
@@ -9345,6 +9558,18 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "serif",
+    name: "Namdhinggo",
+    sane: "namdhinggo",
+    variants: [
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800"
+    ]
+  },
   {
     category: "handwriting",
     name: "Nanum Brush Script",
@@ -9391,11 +9616,15 @@ var fontInfo_default = [
     ]
   },
   {
-    category: "sans-serif",
+    category: "serif",
     name: "Narnoor",
     sane: "narnoor",
     variants: [
-      "0,400"
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800"
     ]
   },
   {
@@ -9584,6 +9813,22 @@ var fontInfo_default = [
       "1,700"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Noto Kufi Arabic",
+    sane: "noto_kufi_arabic",
+    variants: [
+      "0,100",
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800",
+      "0,900"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Noto Music",
@@ -9636,22 +9881,22 @@ var fontInfo_default = [
     sane: "noto_sans",
     variants: [
       "0,100",
-      "1,100",
       "0,200",
-      "1,200",
       "0,300",
-      "1,300",
       "0,400",
-      "1,400",
       "0,500",
-      "1,500",
       "0,600",
-      "1,600",
       "0,700",
-      "1,700",
       "0,800",
-      "1,800",
       "0,900",
+      "1,100",
+      "1,200",
+      "1,300",
+      "1,400",
+      "1,500",
+      "1,600",
+      "1,700",
+      "1,800",
       "1,900"
     ]
   },
@@ -11776,6 +12021,14 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Noto Znamenny Musical Notation",
+    sane: "noto_znamenny_musical_notation",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Nova Cut",
@@ -11942,6 +12195,20 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Ojuju",
+    sane: "ojuju",
+    variants: [
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800"
+    ]
+  },
   {
     category: "display",
     name: "Oldenburg",
@@ -12573,6 +12840,25 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "serif",
+    name: "Platypi",
+    sane: "platypi",
+    variants: [
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800",
+      "1,300",
+      "1,400",
+      "1,500",
+      "1,600",
+      "1,700",
+      "1,800"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Play",
@@ -12911,6 +13197,38 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Protest Guerrilla",
+    sane: "protest_guerrilla",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Protest Revolution",
+    sane: "protest_revolution",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Protest Riot",
+    sane: "protest_riot",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Protest Strike",
+    sane: "protest_strike",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Proza Libre",
@@ -13362,6 +13680,21 @@ var fontInfo_default = [
       "0,700"
     ]
   },
+  {
+    category: "monospace",
+    name: "Reddit Mono",
+    sane: "reddit_mono",
+    variants: [
+      "0,200",
+      "0,300",
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800",
+      "0,900"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Red Hat Display",
@@ -13508,6 +13841,23 @@ var fontInfo_default = [
       "1,900"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Rethink Sans",
+    sane: "rethink_sans",
+    variants: [
+      "0,400",
+      "0,500",
+      "0,600",
+      "0,700",
+      "0,800",
+      "1,400",
+      "1,500",
+      "1,600",
+      "1,700",
+      "1,800"
+    ]
+  },
   {
     category: "display",
     name: "Revalia",
@@ -13841,6 +14191,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Rubik Broken Fax",
+    sane: "rubik_broken_fax",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Rubik Bubbles",
@@ -13873,6 +14231,22 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Rubik Doodle Shadow",
+    sane: "rubik_doodle_shadow",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Rubik Doodle Triangles",
+    sane: "rubik_doodle_triangles",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Rubik Gemstones",
@@ -13889,6 +14263,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Rubik Glitch Pop",
+    sane: "rubik_glitch_pop",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Rubik Iso",
@@ -13897,6 +14279,22 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Rubik Lines",
+    sane: "rubik_lines",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Rubik Maps",
+    sane: "rubik_maps",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Rubik Marker Hatch",
@@ -13953,6 +14351,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Rubik Scribble",
+    sane: "rubik_scribble",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Rubik Spray Paint",
@@ -14392,6 +14798,15 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "serif",
+    name: "Sedan",
+    sane: "sedan",
+    variants: [
+      "0,400",
+      "1,400"
+    ]
+  },
   {
     category: "handwriting",
     name: "Sedgwick Ave",
@@ -14679,6 +15094,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "monospace",
+    name: "Sixtyfour",
+    sane: "sixtyfour",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Skranji",
@@ -15496,6 +15919,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Tac One",
+    sane: "tac_one",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "serif",
     name: "Tai Heritage Pro",
@@ -16552,6 +16983,14 @@ var fontInfo_default = [
       "1,800"
     ]
   },
+  {
+    category: "monospace",
+    name: "Workbench",
+    sane: "workbench",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Work Sans",
@@ -16625,6 +17064,38 @@ var fontInfo_default = [
       "0,900"
     ]
   },
+  {
+    category: "display",
+    name: "Yarndings 12",
+    sane: "yarndings_12",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Yarndings 12 Charted",
+    sane: "yarndings_12_charted",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Yarndings 20",
+    sane: "yarndings_20",
+    variants: [
+      "0,400"
+    ]
+  },
+  {
+    category: "display",
+    name: "Yarndings 20 Charted",
+    sane: "yarndings_20_charted",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Yatra One",
@@ -17002,6 +17473,48 @@ var fontInfo_default = [
   }
 ];
 
+// src/lib/fontChecker.ts
+function checkLoaded(_0) {
+  return __async(this, arguments, function* ({
+    fontFamily,
+    fontStyle,
+    fontWeight,
+    timeout = 500
+  }) {
+    const start = (/* @__PURE__ */ new Date()).getTime();
+    let timeoutId;
+    return new Promise(function(resolve, reject) {
+      if (document == null ? void 0 : document.fonts) {
+        const checker = new Promise(function(resolve2, reject2) {
+          const check = function() {
+            const now = (/* @__PURE__ */ new Date()).getTime();
+            if (now - start >= timeout) {
+              reject2(new Error(`Font not loaded within ${timeout} ms`));
+            } else {
+              const loaded = document.fonts.check(`${fontStyle != null ? fontStyle : ""} ${fontWeight != null ? fontWeight : ""} 0 ${fontFamily}`);
+              if (loaded) {
+                resolve2(true);
+              } else {
+                setTimeout(check, 25);
+              }
+            }
+          };
+          check();
+        });
+        const timer = new Promise(function(resolve2, reject2) {
+          timeoutId = setTimeout(() => reject2(new Error(`Font not loaded within ${timeout} ms`)), timeout);
+        });
+        Promise.race([timer, checker]).then((value) => {
+          clearTimeout(timeoutId);
+          resolve(value);
+        }, reject);
+      } else {
+        reject(new Error("Fonts API not supported by client"));
+      }
+    });
+  });
+}
+
 // src/components/FontPicker.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var FontPreviews2 = (0, import_react.lazy)(() => Promise.resolve().then(() => (init_FontPreviews(), FontPreviews_exports)));
@@ -17044,6 +17557,8 @@ function FontPicker(_a) {
     localFonts = [],
     fontVariants,
     value,
+    fontsLoaded,
+    fontsLoadedTimeout,
     loading = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: "Font previews loading ..." }),
     inputId
   } = _b, rest = __objRest(_b, [
@@ -17058,6 +17573,8 @@ function FontPicker(_a) {
     "localFonts",
     "fontVariants",
     "value",
+    "fontsLoaded",
+    "fontsLoadedTimeout",
     "loading",
     "inputId"
   ]);
@@ -17101,6 +17618,23 @@ function FontPicker(_a) {
       });
     }
   };
+  const loadFontsFontNames = (0, import_react.useMemo)(() => {
+    const names = [];
+    if (loadFonts) {
+      if (typeof loadFonts === "string") {
+        names.push(loadFonts);
+      } else {
+        loadFonts == null ? void 0 : loadFonts.forEach((font) => {
+          const fontName = typeof font === "string" ? font : font == null ? void 0 : font.fontName;
+          if (!fontName) {
+            return;
+          }
+          names.push(fontName);
+        });
+      }
+    }
+    return names;
+  }, [loadFonts]);
   const fontPickerOptionsRef = (0, import_react.useRef)(null);
   const saveOptionsRef = (key) => (node) => {
     const map = getOptionsRef();
@@ -17346,6 +17880,12 @@ function FontPicker(_a) {
     },
     [value]
   );
+  const emitFontLoaded = (0, import_react.useCallback)(
+    (isLoaded) => {
+      fontsLoaded == null ? void 0 : fontsLoaded(isLoaded);
+    },
+    [fontsLoaded]
+  );
   const loadFontFromObject = (0, import_react.useCallback)(
     (font, variants = []) => {
       if ((variants == null ? void 0 : variants.length) > 0) {
@@ -17370,7 +17910,7 @@ function FontPicker(_a) {
         link.id = cssId;
         link.href = "https://fonts.googleapis.com/css2?family=" + font.name + ":ital,wght@" + variants.sort().join(";") + "&display=swap";
         link.setAttribute("data-testid", cssId);
-        document.getElementsByTagName("head")[0].appendChild(link);
+        document.head.appendChild(link);
       }
     },
     [loadAllVariants]
@@ -17428,6 +17968,36 @@ function FontPicker(_a) {
   (0, import_react.useEffect)(() => {
     setCurrent(defaultCurrent);
   }, [defaultCurrent]);
+  (0, import_react.useEffect)(() => {
+    function callCheckLoaded(fontNames) {
+      return __async(this, null, function* () {
+        try {
+          const promises = fontNames == null ? void 0 : fontNames.map((font) => __async(this, null, function* () {
+            try {
+              const fontLoaded = yield checkLoaded({
+                fontFamily: font,
+                timeout: fontsLoadedTimeout
+              });
+              return fontLoaded;
+            } catch (e) {
+              return false;
+            }
+          }));
+          const results = yield Promise.all(promises);
+          const allLoaded = !results.some((res) => !res);
+          emitFontLoaded(allLoaded);
+        } catch (e) {
+          console.error(`Exception thrown checking if font families loaded`);
+          console.error(e);
+          emitFontLoaded(false);
+        }
+      });
+    }
+    const fontsToCheck = [.../* @__PURE__ */ new Set([current.name, ...loadFontsFontNames])];
+    if (fontsLoaded) {
+      callCheckLoaded(fontsToCheck);
+    }
+  }, [autoLoad, loadFonts, current.name, emitFontLoaded, fontsLoaded, loadFontsFontNames, fontsLoadedTimeout]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: !loaderOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", __spreadProps(__spreadValues({ className: (_a2 = outerClasses()) == null ? void 0 : _a2.join(" ") }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: loading }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FontPreviews2, {}),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: previewRef, className: (_b2 = previewClasses()) == null ? void 0 : _b2.join(" ") }),