react-fontpicker-ts 0.3.1 → 0.4.0

package/dist/index.mjs

@@ -37,6 +37,26 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
+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({
@@ -183,6 +203,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",
@@ -889,6 +924,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",
@@ -908,6 +952,14 @@ var fontInfo_default = [
       "1,700"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Anta",
+    sane: "anta",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Antic",
@@ -5114,12 +5166,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"
     ]
   },
@@ -5821,6 +5873,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",
@@ -5969,6 +6037,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Honk",
+    sane: "honk",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Hubballi",
@@ -6536,6 +6612,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",
@@ -6561,6 +6669,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",
@@ -6868,6 +7032,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",
@@ -7137,6 +7315,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",
@@ -8135,6 +8324,14 @@ var fontInfo_default = [
       "0,900"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Madimi One",
+    sane: "madimi_one",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Magra",
@@ -8672,6 +8869,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",
@@ -9326,6 +9539,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",
@@ -9372,11 +9597,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"
     ]
   },
   {
@@ -9565,6 +9794,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",
@@ -9617,22 +9862,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"
     ]
   },
@@ -11757,6 +12002,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",
@@ -11923,6 +12176,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",
@@ -12554,6 +12821,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",
@@ -12892,6 +13178,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",
@@ -13343,6 +13661,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",
@@ -13489,6 +13822,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",
@@ -13822,6 +14172,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Rubik Broken Fax",
+    sane: "rubik_broken_fax",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Rubik Bubbles",
@@ -13854,6 +14212,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",
@@ -13870,6 +14244,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Rubik Glitch Pop",
+    sane: "rubik_glitch_pop",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Rubik Iso",
@@ -13878,6 +14260,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",
@@ -13934,6 +14332,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "display",
+    name: "Rubik Scribble",
+    sane: "rubik_scribble",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Rubik Spray Paint",
@@ -14373,6 +14779,15 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "serif",
+    name: "Sedan",
+    sane: "sedan",
+    variants: [
+      "0,400",
+      "1,400"
+    ]
+  },
   {
     category: "handwriting",
     name: "Sedgwick Ave",
@@ -14660,6 +15075,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "monospace",
+    name: "Sixtyfour",
+    sane: "sixtyfour",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "display",
     name: "Skranji",
@@ -15477,6 +15900,14 @@ var fontInfo_default = [
       "0,400"
     ]
   },
+  {
+    category: "sans-serif",
+    name: "Tac One",
+    sane: "tac_one",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "serif",
     name: "Tai Heritage Pro",
@@ -16533,6 +16964,14 @@ var fontInfo_default = [
       "1,800"
     ]
   },
+  {
+    category: "monospace",
+    name: "Workbench",
+    sane: "workbench",
+    variants: [
+      "0,400"
+    ]
+  },
   {
     category: "sans-serif",
     name: "Work Sans",
@@ -16606,6 +17045,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",
@@ -16983,6 +17454,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
 import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var FontPreviews2 = lazy(() => Promise.resolve().then(() => (init_FontPreviews(), FontPreviews_exports)));
@@ -17025,6 +17538,8 @@ function FontPicker(_a) {
     localFonts = [],
     fontVariants,
     value,
+    fontsLoaded,
+    fontsLoadedTimeout,
     loading = /* @__PURE__ */ jsx2("div", { children: "Font previews loading ..." }),
     inputId
   } = _b, rest = __objRest(_b, [
@@ -17039,6 +17554,8 @@ function FontPicker(_a) {
     "localFonts",
     "fontVariants",
     "value",
+    "fontsLoaded",
+    "fontsLoadedTimeout",
     "loading",
     "inputId"
   ]);
@@ -17082,6 +17599,23 @@ function FontPicker(_a) {
       });
     }
   };
+  const loadFontsFontNames = 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 = useRef(null);
   const saveOptionsRef = (key) => (node) => {
     const map = getOptionsRef();
@@ -17327,6 +17861,12 @@ function FontPicker(_a) {
     },
     [value]
   );
+  const emitFontLoaded = useCallback(
+    (isLoaded) => {
+      fontsLoaded == null ? void 0 : fontsLoaded(isLoaded);
+    },
+    [fontsLoaded]
+  );
   const loadFontFromObject = useCallback(
     (font, variants = []) => {
       if ((variants == null ? void 0 : variants.length) > 0) {
@@ -17351,7 +17891,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]
@@ -17409,6 +17949,36 @@ function FontPicker(_a) {
   useEffect(() => {
     setCurrent(defaultCurrent);
   }, [defaultCurrent]);
+  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__ */ jsx2(Fragment2, { children: !loaderOnly && /* @__PURE__ */ jsx2("div", __spreadProps(__spreadValues({ className: (_a2 = outerClasses()) == null ? void 0 : _a2.join(" ") }, rest), { children: /* @__PURE__ */ jsxs(Suspense, { fallback: /* @__PURE__ */ jsx2(Fragment2, { children: loading }), children: [
     /* @__PURE__ */ jsx2(FontPreviews2, {}),
     /* @__PURE__ */ jsx2("div", { ref: previewRef, className: (_b2 = previewClasses()) == null ? void 0 : _b2.join(" ") }),