@wordpress/global-styles-ui 1.1.0

package/build/font-library-modal/font-demo.js

@@ -0,0 +1,111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var font_demo_exports = {};
+__export(font_demo_exports, {
+  default: () => font_demo_default
+});
+module.exports = __toCommonJS(font_demo_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_context = require("./context");
+var import_preview_styles = require("./utils/preview-styles");
+function getPreviewUrl(fontFace) {
+  if (fontFace.preview) {
+    return fontFace.preview;
+  }
+  if (fontFace.src) {
+    return Array.isArray(fontFace.src) ? fontFace.src[0] : fontFace.src;
+  }
+  return void 0;
+}
+function getDisplayFontFace(font) {
+  if ("fontStyle" in font && font.fontStyle || "fontWeight" in font && font.fontWeight) {
+    return font;
+  }
+  if ("fontFace" in font && font.fontFace && font.fontFace.length) {
+    return font.fontFace.find(
+      (face) => face.fontStyle === "normal" && face.fontWeight === "400"
+    ) || font.fontFace[0];
+  }
+  return {
+    fontStyle: "normal",
+    fontWeight: "400",
+    fontFamily: font.fontFamily,
+    fake: true
+  };
+}
+function FontDemo({ font, text }) {
+  const ref = (0, import_element.useRef)(null);
+  const fontFace = getDisplayFontFace(font);
+  const style = (0, import_preview_styles.getFamilyPreviewStyle)(font);
+  text = text || ("name" in font ? font.name : "");
+  const customPreviewUrl = font.preview;
+  const [isIntersecting, setIsIntersecting] = (0, import_element.useState)(false);
+  const [isAssetLoaded, setIsAssetLoaded] = (0, import_element.useState)(false);
+  const { loadFontFaceAsset } = (0, import_element.useContext)(import_context.FontLibraryContext);
+  const previewUrl = customPreviewUrl ?? getPreviewUrl(fontFace);
+  const isPreviewImage = previewUrl && previewUrl.match(/\.(png|jpg|jpeg|gif|svg)$/i);
+  const faceStyles = (0, import_preview_styles.getFacePreviewStyle)(fontFace);
+  const textDemoStyle = {
+    fontSize: "18px",
+    lineHeight: 1,
+    opacity: isAssetLoaded ? "1" : "0",
+    ...style,
+    ...faceStyles
+  };
+  (0, import_element.useEffect)(() => {
+    const observer = new window.IntersectionObserver(([entry]) => {
+      setIsIntersecting(entry.isIntersecting);
+    }, {});
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => observer.disconnect();
+  }, [ref]);
+  (0, import_element.useEffect)(() => {
+    const loadAsset = async () => {
+      if (isIntersecting) {
+        if (!isPreviewImage && fontFace.src) {
+          await loadFontFaceAsset(fontFace);
+        }
+        setIsAssetLoaded(true);
+      }
+    };
+    loadAsset();
+  }, [fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, children: isPreviewImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      src: previewUrl,
+      loading: "lazy",
+      alt: text,
+      className: "font-library-modal__font-variant_demo-image"
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalText,
+    {
+      style: textDemoStyle,
+      className: "font-library-modal__font-variant_demo-text",
+      children: text
+    }
+  ) });
+}
+var font_demo_default = FontDemo;
+//# sourceMappingURL=font-demo.js.map

package/build/font-library-modal/font-demo.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/font-demo.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalText as Text } from '@wordpress/components';\nimport { useContext, useEffect, useState, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport {\n\tgetFacePreviewStyle,\n\tgetFamilyPreviewStyle,\n} from './utils/preview-styles';\nimport type { FontFamily, FontFace, FontDemoProps } from './types';\n\nfunction getPreviewUrl( fontFace: FontFace ): string | undefined {\n\tif ( fontFace.preview ) {\n\t\treturn fontFace.preview;\n\t}\n\tif ( fontFace.src ) {\n\t\treturn Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;\n\t}\n\treturn undefined;\n}\n\nfunction getDisplayFontFace( font: FontFamily | FontFace ): FontFace {\n\t// if this IS a font face return it\n\tif (\n\t\t( 'fontStyle' in font && font.fontStyle ) ||\n\t\t( 'fontWeight' in font && font.fontWeight )\n\t) {\n\t\treturn font;\n\t}\n\t// if this is a font family with a collection of font faces\n\t// return the first one that is normal and 400 OR just the first one\n\tif ( 'fontFace' in font && font.fontFace && font.fontFace.length ) {\n\t\treturn (\n\t\t\tfont.fontFace.find(\n\t\t\t\t( face ) =>\n\t\t\t\t\tface.fontStyle === 'normal' && face.fontWeight === '400'\n\t\t\t) || font.fontFace[ 0 ]\n\t\t);\n\t}\n\t// This must be a font family with no font faces\n\t// return a fake font face\n\treturn {\n\t\tfontStyle: 'normal',\n\t\tfontWeight: '400',\n\t\tfontFamily: font.fontFamily,\n\t\tfake: true,\n\t};\n}\n\nfunction FontDemo( { font, text }: FontDemoProps ) {\n\tconst ref = useRef< HTMLDivElement >( null );\n\n\tconst fontFace = getDisplayFontFace( font );\n\tconst style = getFamilyPreviewStyle( font );\n\ttext = text || ( 'name' in font ? font.name : '' );\n\tconst customPreviewUrl = font.preview;\n\n\tconst [ isIntersecting, setIsIntersecting ] = useState< boolean >( false );\n\tconst [ isAssetLoaded, setIsAssetLoaded ] = useState< boolean >( false );\n\tconst { loadFontFaceAsset } = useContext( FontLibraryContext );\n\n\tconst previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );\n\tconst isPreviewImage =\n\t\tpreviewUrl && previewUrl.match( /\\.(png|jpg|jpeg|gif|svg)$/i );\n\n\tconst faceStyles = getFacePreviewStyle( fontFace );\n\tconst textDemoStyle = {\n\t\tfontSize: '18px',\n\t\tlineHeight: 1,\n\t\topacity: isAssetLoaded ? '1' : '0',\n\t\t...style,\n\t\t...faceStyles,\n\t};\n\n\tuseEffect( () => {\n\t\tconst observer = new window.IntersectionObserver( ( [ entry ] ) => {\n\t\t\tsetIsIntersecting( entry.isIntersecting );\n\t\t}, {} );\n\t\tif ( ref.current ) {\n\t\t\tobserver.observe( ref.current );\n\t\t}\n\t\treturn () => observer.disconnect();\n\t}, [ ref ] );\n\n\tuseEffect( () => {\n\t\tconst loadAsset = async () => {\n\t\t\tif ( isIntersecting ) {\n\t\t\t\tif ( ! isPreviewImage && fontFace.src ) {\n\t\t\t\t\tawait loadFontFaceAsset( fontFace );\n\t\t\t\t}\n\t\t\t\tsetIsAssetLoaded( true );\n\t\t\t}\n\t\t};\n\t\tloadAsset();\n\t}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );\n\n\treturn (\n\t\t<div ref={ ref }>\n\t\t\t{ isPreviewImage ? (\n\t\t\t\t<img\n\t\t\t\t\tsrc={ previewUrl }\n\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\talt={ text }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-image\"\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Text\n\t\t\t\t\tstyle={ textDemoStyle }\n\t\t\t\t\tclassName=\"font-library-modal__font-variant_demo-text\"\n\t\t\t\t>\n\t\t\t\t\t{ text }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontDemo;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwGI;AArGJ,wBAA2C;AAC3C,qBAAwD;AAKxD,qBAAmC;AACnC,4BAGO;AAGP,SAAS,cAAe,UAAyC;AAChE,MAAK,SAAS,SAAU;AACvB,WAAO,SAAS;AAAA,EACjB;AACA,MAAK,SAAS,KAAM;AACnB,WAAO,MAAM,QAAS,SAAS,GAAI,IAAI,SAAS,IAAK,CAAE,IAAI,SAAS;AAAA,EACrE;AACA,SAAO;AACR;AAEA,SAAS,mBAAoB,MAAwC;AAEpE,MACG,eAAe,QAAQ,KAAK,aAC5B,gBAAgB,QAAQ,KAAK,YAC9B;AACD,WAAO;AAAA,EACR;AAGA,MAAK,cAAc,QAAQ,KAAK,YAAY,KAAK,SAAS,QAAS;AAClE,WACC,KAAK,SAAS;AAAA,MACb,CAAE,SACD,KAAK,cAAc,YAAY,KAAK,eAAe;AAAA,IACrD,KAAK,KAAK,SAAU,CAAE;AAAA,EAExB;AAGA,SAAO;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY,KAAK;AAAA,IACjB,MAAM;AAAA,EACP;AACD;AAEA,SAAS,SAAU,EAAE,MAAM,KAAK,GAAmB;AAClD,QAAM,UAAM,uBAA0B,IAAK;AAE3C,QAAM,WAAW,mBAAoB,IAAK;AAC1C,QAAM,YAAQ,6CAAuB,IAAK;AAC1C,SAAO,SAAU,UAAU,OAAO,KAAK,OAAO;AAC9C,QAAM,mBAAmB,KAAK;AAE9B,QAAM,CAAE,gBAAgB,iBAAkB,QAAI,yBAAqB,KAAM;AACzE,QAAM,CAAE,eAAe,gBAAiB,QAAI,yBAAqB,KAAM;AACvE,QAAM,EAAE,kBAAkB,QAAI,2BAAY,iCAAmB;AAE7D,QAAM,aAAa,oBAAoB,cAAe,QAAS;AAC/D,QAAM,iBACL,cAAc,WAAW,MAAO,4BAA6B;AAE9D,QAAM,iBAAa,2CAAqB,QAAS;AACjD,QAAM,gBAAgB;AAAA,IACrB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS,gBAAgB,MAAM;AAAA,IAC/B,GAAG;AAAA,IACH,GAAG;AAAA,EACJ;AAEA,gCAAW,MAAM;AAChB,UAAM,WAAW,IAAI,OAAO,qBAAsB,CAAE,CAAE,KAAM,MAAO;AAClE,wBAAmB,MAAM,cAAe;AAAA,IACzC,GAAG,CAAC,CAAE;AACN,QAAK,IAAI,SAAU;AAClB,eAAS,QAAS,IAAI,OAAQ;AAAA,IAC/B;AACA,WAAO,MAAM,SAAS,WAAW;AAAA,EAClC,GAAG,CAAE,GAAI,CAAE;AAEX,gCAAW,MAAM;AAChB,UAAM,YAAY,YAAY;AAC7B,UAAK,gBAAiB;AACrB,YAAK,CAAE,kBAAkB,SAAS,KAAM;AACvC,gBAAM,kBAAmB,QAAS;AAAA,QACnC;AACA,yBAAkB,IAAK;AAAA,MACxB;AAAA,IACD;AACA,cAAU;AAAA,EACX,GAAG,CAAE,UAAU,gBAAgB,mBAAmB,cAAe,CAAE;AAEnE,SACC,4CAAC,SAAI,KACF,2BACD;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,SAAQ;AAAA,MACR,KAAM;AAAA,MACN,WAAU;AAAA;AAAA,EACX,IAEA;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,OAAQ;AAAA,MACR,WAAU;AAAA,MAER;AAAA;AAAA,EACH,GAEF;AAEF;AAEA,IAAO,oBAAQ;",
+  "names": ["Text"]
+}

package/build/font-library-modal/google-fonts-confirm-dialog.js

@@ -0,0 +1,58 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var google_fonts_confirm_dialog_exports = {};
+__export(google_fonts_confirm_dialog_exports, {
+  default: () => google_fonts_confirm_dialog_default
+});
+module.exports = __toCommonJS(google_fonts_confirm_dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+function GoogleFontsConfirmDialog() {
+  const handleConfirm = () => {
+    window.localStorage.setItem(
+      "wp-font-library-google-fonts-permission",
+      "true"
+    );
+    window.dispatchEvent(new Event("storage"));
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-library__google-fonts-confirm", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.CardBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { level: 2, children: (0, import_i18n.__)("Connect to Google Fonts") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { margin: 6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", children: (0, import_i18n.__)(
+      "To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts."
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { margin: 3 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { as: "p", children: (0, import_i18n.__)(
+      "You can alternatively upload files directly on the Upload tab."
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { margin: 6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Button,
+      {
+        __next40pxDefaultSize: true,
+        variant: "primary",
+        onClick: handleConfirm,
+        children: (0, import_i18n.__)("Allow access to Google Fonts")
+      }
+    )
+  ] }) }) });
+}
+var google_fonts_confirm_dialog_default = GoogleFontsConfirmDialog;
+//# sourceMappingURL=google-fonts-confirm-dialog.js.map

package/build/font-library-modal/google-fonts-confirm-dialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/google-fonts-confirm-dialog.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\t__experimentalHeading as Heading,\n\t__experimentalText as Text,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nfunction GoogleFontsConfirmDialog(): JSX.Element {\n\tconst handleConfirm = (): void => {\n\t\t// eslint-disable-next-line no-undef\n\t\twindow.localStorage.setItem(\n\t\t\t'wp-font-library-google-fonts-permission',\n\t\t\t'true'\n\t\t);\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\treturn (\n\t\t<div className=\"font-library__google-fonts-confirm\">\n\t\t\t<Card>\n\t\t\t\t<CardBody>\n\t\t\t\t\t<Heading level={ 2 }>\n\t\t\t\t\t\t{ __( 'Connect to Google Fonts' ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<Text as=\"p\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'You can alternatively upload files directly on the Upload tab.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Spacer margin={ 6 } />\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\tonClick={ handleConfirm }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Allow access to Google Fonts' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</CardBody>\n\t\t\t</Card>\n\t\t</div>\n\t);\n}\n\nexport default GoogleFontsConfirmDialog;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BI;AAvBJ,kBAAmB;AACnB,wBAOO;AAEP,SAAS,2BAAwC;AAChD,QAAM,gBAAgB,MAAY;AAEjC,WAAO,aAAa;AAAA,MACnB;AAAA,MACA;AAAA,IACD;AACA,WAAO,cAAe,IAAI,MAAO,SAAU,CAAE;AAAA,EAC9C;AAEA,SACC,4CAAC,SAAI,WAAU,sCACd,sDAAC,0BACA,uDAAC,8BACA;AAAA,gDAAC,kBAAAA,uBAAA,EAAQ,OAAQ,GACd,8BAAI,yBAA0B,GACjC;AAAA,IACA,4CAAC,kBAAAC,sBAAA,EAAO,QAAS,GAAI;AAAA,IACrB,4CAAC,kBAAAC,oBAAA,EAAK,IAAG,KACN;AAAA,MACD;AAAA,IACD,GACD;AAAA,IACA,4CAAC,kBAAAD,sBAAA,EAAO,QAAS,GAAI;AAAA,IACrB,4CAAC,kBAAAC,oBAAA,EAAK,IAAG,KACN;AAAA,MACD;AAAA,IACD,GACD;AAAA,IACA,4CAAC,kBAAAD,sBAAA,EAAO,QAAS,GAAI;AAAA,IACrB;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,SAAQ;AAAA,QACR,SAAU;AAAA,QAER,8BAAI,8BAA+B;AAAA;AAAA,IACtC;AAAA,KACD,GACD,GACD;AAEF;AAEA,IAAO,sCAAQ;",
+  "names": ["Heading", "Spacer", "Text"]
+}

package/build/font-library-modal/index.js

@@ -0,0 +1,110 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var font_library_modal_exports = {};
+__export(font_library_modal_exports, {
+  default: () => font_library_modal_default
+});
+module.exports = __toCommonJS(font_library_modal_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+var import_installed_fonts = __toESM(require("./installed-fonts"));
+var import_font_collection = __toESM(require("./font-collection"));
+var import_upload_fonts = __toESM(require("./upload-fonts"));
+var import_context = require("./context");
+var import_lock_unlock = require("../lock-unlock");
+const { Tabs } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+const DEFAULT_TAB = {
+  id: "installed-fonts",
+  title: (0, import_i18n._x)("Library", "Font library")
+};
+const UPLOAD_TAB = {
+  id: "upload-fonts",
+  title: (0, import_i18n._x)("Upload", "noun")
+};
+const tabsFromCollections = (collections) => collections.map(({ slug, name }) => ({
+  id: slug,
+  title: collections.length === 1 && slug === "google-fonts" ? (0, import_i18n.__)("Install Fonts") : name
+}));
+function FontLibraryModal({
+  onRequestClose,
+  defaultTabId = "installed-fonts"
+}) {
+  const { collections } = (0, import_element.useContext)(import_context.FontLibraryContext);
+  const canUserCreate = (0, import_data.useSelect)((select) => {
+    return select(import_core_data.store).canUser("create", {
+      kind: "postType",
+      name: "wp_font_family"
+    });
+  }, []);
+  const tabs = [DEFAULT_TAB];
+  if (canUserCreate) {
+    tabs.push(UPLOAD_TAB);
+    tabs.push(...tabsFromCollections(collections || []));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Modal,
+    {
+      title: (0, import_i18n.__)("Fonts"),
+      onRequestClose,
+      isFullScreen: true,
+      className: "font-library-modal",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs, { defaultTabId, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-library-modal__tablist-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.TabList, { children: tabs.map(({ id, title }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: id, children: title }, id)) }) }),
+        tabs.map(({ id }) => {
+          let contents;
+          switch (id) {
+            case "upload-fonts":
+              contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_upload_fonts.default, {});
+              break;
+            case "installed-fonts":
+              contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_installed_fonts.default, {});
+              break;
+            default:
+              contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_font_collection.default, { slug: id });
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            Tabs.TabPanel,
+            {
+              tabId: id,
+              focusable: false,
+              children: contents
+            },
+            id
+          );
+        })
+      ] })
+    }
+  );
+}
+var font_library_modal_default = FontLibraryModal;
+//# sourceMappingURL=index.js.map

package/build/font-library-modal/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-library-modal/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport InstalledFonts from './installed-fonts';\nimport FontCollection from './font-collection';\nimport UploadFonts from './upload-fonts';\nimport { FontLibraryContext } from './context';\nimport type { FontCollection as FontCollectionType } from './types';\nimport { unlock } from '../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst DEFAULT_TAB = {\n\tid: 'installed-fonts',\n\ttitle: _x( 'Library', 'Font library' ),\n};\n\nconst UPLOAD_TAB = {\n\tid: 'upload-fonts',\n\ttitle: _x( 'Upload', 'noun' ),\n};\n\nconst tabsFromCollections = ( collections: FontCollectionType[] ) =>\n\tcollections.map( ( { slug, name } ) => ( {\n\t\tid: slug,\n\t\ttitle:\n\t\t\tcollections.length === 1 && slug === 'google-fonts'\n\t\t\t\t? __( 'Install Fonts' )\n\t\t\t\t: name,\n\t} ) );\n\nfunction FontLibraryModal( {\n\tonRequestClose,\n\tdefaultTabId = 'installed-fonts',\n}: {\n\tonRequestClose: () => void;\n\tdefaultTabId?: string;\n} ) {\n\tconst { collections } = useContext( FontLibraryContext );\n\tconst canUserCreate = useSelect( ( select ) => {\n\t\treturn select( coreStore ).canUser( 'create', {\n\t\t\tkind: 'postType',\n\t\t\tname: 'wp_font_family',\n\t\t} );\n\t}, [] );\n\n\tconst tabs: { id: string; title: string }[] = [ DEFAULT_TAB ];\n\n\tif ( canUserCreate ) {\n\t\ttabs.push( UPLOAD_TAB );\n\t\ttabs.push( ...tabsFromCollections( collections || [] ) );\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ __( 'Fonts' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\tisFullScreen\n\t\t\tclassName=\"font-library-modal\"\n\t\t>\n\t\t\t<Tabs defaultTabId={ defaultTabId }>\n\t\t\t\t<div className=\"font-library-modal__tablist-container\">\n\t\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t\t{ tabs.map( ( { id, title } ) => (\n\t\t\t\t\t\t\t<Tabs.Tab key={ id } tabId={ id }>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Tabs.TabList>\n\t\t\t\t</div>\n\t\t\t\t{ tabs.map( ( { id } ) => {\n\t\t\t\t\tlet contents;\n\t\t\t\t\tswitch ( id ) {\n\t\t\t\t\t\tcase 'upload-fonts':\n\t\t\t\t\t\t\tcontents = <UploadFonts />;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'installed-fonts':\n\t\t\t\t\t\t\tcontents = <InstalledFonts />;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\tcontents = <FontCollection slug={ id } />;\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\ttabId={ id }\n\t\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ contents }\n\t\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Tabs>\n\t\t</Modal>\n\t);\n}\n\nexport default FontLibraryModal;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwEG;AArEH,kBAAuB;AACvB,wBAGO;AACP,uBAAmC;AACnC,kBAA0B;AAC1B,qBAA2B;AAK3B,6BAA2B;AAC3B,6BAA2B;AAC3B,0BAAwB;AACxB,qBAAmC;AAEnC,yBAAuB;AAEvB,MAAM,EAAE,KAAK,QAAI,2BAAQ,kBAAAA,WAAsB;AAE/C,MAAM,cAAc;AAAA,EACnB,IAAI;AAAA,EACJ,WAAO,gBAAI,WAAW,cAAe;AACtC;AAEA,MAAM,aAAa;AAAA,EAClB,IAAI;AAAA,EACJ,WAAO,gBAAI,UAAU,MAAO;AAC7B;AAEA,MAAM,sBAAsB,CAAE,gBAC7B,YAAY,IAAK,CAAE,EAAE,MAAM,KAAK,OAAS;AAAA,EACxC,IAAI;AAAA,EACJ,OACC,YAAY,WAAW,KAAK,SAAS,qBAClC,gBAAI,eAAgB,IACpB;AACL,EAAI;AAEL,SAAS,iBAAkB;AAAA,EAC1B;AAAA,EACA,eAAe;AAChB,GAGI;AACH,QAAM,EAAE,YAAY,QAAI,2BAAY,iCAAmB;AACvD,QAAM,oBAAgB,uBAAW,CAAE,WAAY;AAC9C,WAAO,OAAQ,iBAAAC,KAAU,EAAE,QAAS,UAAU;AAAA,MAC7C,MAAM;AAAA,MACN,MAAM;AAAA,IACP,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,QAAM,OAAwC,CAAE,WAAY;AAE5D,MAAK,eAAgB;AACpB,SAAK,KAAM,UAAW;AACtB,SAAK,KAAM,GAAG,oBAAqB,eAAe,CAAC,CAAE,CAAE;AAAA,EACxD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAQ,gBAAI,OAAQ;AAAA,MACpB;AAAA,MACA,cAAY;AAAA,MACZ,WAAU;AAAA,MAEV,uDAAC,QAAK,cACL;AAAA,oDAAC,SAAI,WAAU,yCACd,sDAAC,KAAK,SAAL,EACE,eAAK,IAAK,CAAE,EAAE,IAAI,MAAM,MACzB,4CAAC,KAAK,KAAL,EAAoB,OAAQ,IAC1B,mBADa,EAEhB,CACC,GACH,GACD;AAAA,QACE,KAAK,IAAK,CAAE,EAAE,GAAG,MAAO;AACzB,cAAI;AACJ,kBAAS,IAAK;AAAA,YACb,KAAK;AACJ,yBAAW,4CAAC,oBAAAC,SAAA,EAAY;AACxB;AAAA,YACD,KAAK;AACJ,yBAAW,4CAAC,uBAAAC,SAAA,EAAe;AAC3B;AAAA,YACD;AACC,yBAAW,4CAAC,uBAAAC,SAAA,EAAe,MAAO,IAAK;AAAA,UACzC;AACA,iBACC;AAAA,YAAC,KAAK;AAAA,YAAL;AAAA,cAEA,OAAQ;AAAA,cACR,WAAY;AAAA,cAEV;AAAA;AAAA,YAJI;AAAA,UAKP;AAAA,QAEF,CAAE;AAAA,SACH;AAAA;AAAA,EACD;AAEF;AAEA,IAAO,6BAAQ;",
+  "names": ["componentsPrivateApis", "coreStore", "UploadFonts", "InstalledFonts", "FontCollection"]
+}