@wordpress/edit-site 6.33.3 → 6.34.0

package/build-module/components/global-styles/font-library-modal/font-collection.js

@@ -1,505 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  useContext,
-  useEffect,
-  useState,
-  useMemo,
-  createInterpolateElement
-} from "@wordpress/element";
-import {
-  __experimentalSpacer as Spacer,
-  __experimentalText as Text,
-  __experimentalHStack as HStack,
-  __experimentalVStack as VStack,
-  Navigator,
-  __experimentalHeading as Heading,
-  Notice,
-  SelectControl,
-  FlexItem,
-  Flex,
-  Button,
-  DropdownMenu,
-  SearchControl,
-  ProgressBar,
-  CheckboxControl
-} from "@wordpress/components";
-import { debounce } from "@wordpress/compose";
-import { sprintf, __, _x, isRTL } from "@wordpress/i18n";
-import {
-  moreVertical,
-  next,
-  previous,
-  chevronLeft,
-  chevronRight
-} from "@wordpress/icons";
-import { FontLibraryContext } from "./context";
-import FontCard from "./font-card";
-import filterFonts from "./utils/filter-fonts";
-import { toggleFont } from "./utils/toggleFont";
-import {
-  getFontsOutline,
-  isFontFontFaceInOutline
-} from "./utils/fonts-outline";
-import GoogleFontsConfirmDialog from "./google-fonts-confirm-dialog";
-import { downloadFontFaceAssets } from "./utils";
-import { sortFontFaces } from "./utils/sort-font-faces";
-import CollectionFontVariant from "./collection-font-variant";
-const DEFAULT_CATEGORY = {
-  slug: "all",
-  name: _x("All", "font categories")
-};
-const LOCAL_STORAGE_ITEM = "wp-font-library-google-fonts-permission";
-const MIN_WINDOW_HEIGHT = 500;
-function FontCollection({ slug }) {
-  const requiresPermission = slug === "google-fonts";
-  const getGoogleFontsPermissionFromStorage = () => {
-    return window.localStorage.getItem(LOCAL_STORAGE_ITEM) === "true";
-  };
-  const [selectedFont, setSelectedFont] = useState(null);
-  const [notice, setNotice] = useState(false);
-  const [fontsToInstall, setFontsToInstall] = useState([]);
-  const [page, setPage] = useState(1);
-  const [filters, setFilters] = useState({});
-  const [renderConfirmDialog, setRenderConfirmDialog] = useState(
-    requiresPermission && !getGoogleFontsPermissionFromStorage()
-  );
-  const { collections, getFontCollection, installFonts, isInstalling } = useContext(FontLibraryContext);
-  const selectedCollection = collections.find(
-    (collection) => collection.slug === slug
-  );
-  useEffect(() => {
-    const handleStorage = () => {
-      setRenderConfirmDialog(
-        requiresPermission && !getGoogleFontsPermissionFromStorage()
-      );
-    };
-    handleStorage();
-    window.addEventListener("storage", handleStorage);
-    return () => window.removeEventListener("storage", handleStorage);
-  }, [slug, requiresPermission]);
-  const revokeAccess = () => {
-    window.localStorage.setItem(LOCAL_STORAGE_ITEM, "false");
-    window.dispatchEvent(new Event("storage"));
-  };
-  useEffect(() => {
-    const fetchFontCollection = async () => {
-      try {
-        await getFontCollection(slug);
-        resetFilters();
-      } catch (e) {
-        if (!notice) {
-          setNotice({
-            type: "error",
-            message: e?.message
-          });
-        }
-      }
-    };
-    fetchFontCollection();
-  }, [slug, getFontCollection, setNotice, notice]);
-  useEffect(() => {
-    setSelectedFont(null);
-  }, [slug]);
-  useEffect(() => {
-    setFontsToInstall([]);
-  }, [selectedFont]);
-  const collectionFonts = useMemo(
-    () => selectedCollection?.font_families ?? [],
-    [selectedCollection]
-  );
-  const collectionCategories = selectedCollection?.categories ?? [];
-  const categories = [DEFAULT_CATEGORY, ...collectionCategories];
-  const fonts = useMemo(
-    () => filterFonts(collectionFonts, filters),
-    [collectionFonts, filters]
-  );
-  const isLoading = !selectedCollection?.font_families && !notice;
-  const windowHeight = Math.max(window.innerHeight, MIN_WINDOW_HEIGHT);
-  const pageSize = Math.floor((windowHeight - 417) / 61);
-  const totalPages = Math.ceil(fonts.length / pageSize);
-  const itemsStart = (page - 1) * pageSize;
-  const itemsLimit = page * pageSize;
-  const items = fonts.slice(itemsStart, itemsLimit);
-  const handleCategoryFilter = (category) => {
-    setFilters({ ...filters, category });
-    setPage(1);
-  };
-  const handleUpdateSearchInput = (value) => {
-    setFilters({ ...filters, search: value });
-    setPage(1);
-  };
-  const debouncedUpdateSearchInput = debounce(handleUpdateSearchInput, 300);
-  const resetFilters = () => {
-    setFilters({});
-    setPage(1);
-  };
-  const handleToggleVariant = (font, face) => {
-    const newFontsToInstall = toggleFont(font, face, fontsToInstall);
-    setFontsToInstall(newFontsToInstall);
-  };
-  const fontToInstallOutline = getFontsOutline(fontsToInstall);
-  const resetFontsToInstall = () => {
-    setFontsToInstall([]);
-  };
-  const selectFontCount = fontsToInstall.length > 0 ? fontsToInstall[0]?.fontFace?.length : 0;
-  const isIndeterminate = selectFontCount > 0 && selectFontCount !== selectedFont?.fontFace?.length;
-  const isSelectAllChecked = selectFontCount === selectedFont?.fontFace?.length;
-  const toggleSelectAll = () => {
-    const newFonts = isSelectAllChecked ? [] : [selectedFont];
-    setFontsToInstall(newFonts);
-  };
-  const handleInstall = async () => {
-    setNotice(null);
-    const fontFamily = fontsToInstall[0];
-    try {
-      if (fontFamily?.fontFace) {
-        await Promise.all(
-          fontFamily.fontFace.map(async (fontFace) => {
-            if (fontFace.src) {
-              fontFace.file = await downloadFontFaceAssets(
-                fontFace.src
-              );
-            }
-          })
-        );
-      }
-    } catch (error) {
-      setNotice({
-        type: "error",
-        message: __(
-          "Error installing the fonts, could not be downloaded."
-        )
-      });
-      return;
-    }
-    try {
-      await installFonts([fontFamily]);
-      setNotice({
-        type: "success",
-        message: __("Fonts were installed successfully.")
-      });
-    } catch (error) {
-      setNotice({
-        type: "error",
-        message: error.message
-      });
-    }
-    resetFontsToInstall();
-  };
-  const getSortedFontFaces = (fontFamily) => {
-    if (!fontFamily) {
-      return [];
-    }
-    if (!fontFamily.fontFace || !fontFamily.fontFace.length) {
-      return [
-        {
-          fontFamily: fontFamily.fontFamily,
-          fontStyle: "normal",
-          fontWeight: "400"
-        }
-      ];
-    }
-    return sortFontFaces(fontFamily.fontFace);
-  };
-  if (renderConfirmDialog) {
-    return /* @__PURE__ */ jsx(GoogleFontsConfirmDialog, {});
-  }
-  const ActionsComponent = () => {
-    if (slug !== "google-fonts" || renderConfirmDialog || selectedFont) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(
-      DropdownMenu,
-      {
-        icon: moreVertical,
-        label: __("Actions"),
-        popoverProps: {
-          position: "bottom left"
-        },
-        controls: [
-          {
-            title: __("Revoke access to Google Fonts"),
-            onClick: revokeAccess
-          }
-        ]
-      }
-    );
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "font-library-modal__tabpanel-layout", children: [
-    isLoading && /* @__PURE__ */ jsx("div", { className: "font-library-modal__loading", children: /* @__PURE__ */ jsx(ProgressBar, {}) }),
-    !isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        Navigator,
-        {
-          initialPath: "/",
-          className: "font-library-modal__tabpanel-layout",
-          children: [
-            /* @__PURE__ */ jsxs(Navigator.Screen, { path: "/", children: [
-              /* @__PURE__ */ jsxs(HStack, { justify: "space-between", children: [
-                /* @__PURE__ */ jsxs(VStack, { children: [
-                  /* @__PURE__ */ jsx(Heading, { level: 2, size: 13, children: selectedCollection.name }),
-                  /* @__PURE__ */ jsx(Text, { children: selectedCollection.description })
-                ] }),
-                /* @__PURE__ */ jsx(ActionsComponent, {})
-              ] }),
-              /* @__PURE__ */ jsx(Spacer, { margin: 4 }),
-              /* @__PURE__ */ jsxs(Flex, { children: [
-                /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
-                  SearchControl,
-                  {
-                    className: "font-library-modal__search",
-                    value: filters.search,
-                    placeholder: __("Font name\u2026"),
-                    label: __("Search"),
-                    onChange: debouncedUpdateSearchInput,
-                    __nextHasNoMarginBottom: true,
-                    hideLabelFromVision: false
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
-                  SelectControl,
-                  {
-                    __nextHasNoMarginBottom: true,
-                    __next40pxDefaultSize: true,
-                    label: __("Category"),
-                    value: filters.category,
-                    onChange: handleCategoryFilter,
-                    children: categories && categories.map((category) => /* @__PURE__ */ jsx(
-                      "option",
-                      {
-                        value: category.slug,
-                        children: category.name
-                      },
-                      category.slug
-                    ))
-                  }
-                ) })
-              ] }),
-              /* @__PURE__ */ jsx(Spacer, { margin: 4 }),
-              !!selectedCollection?.font_families?.length && !fonts.length && /* @__PURE__ */ jsx(Text, { children: __(
-                "No fonts found. Try with a different search term."
-              ) }),
-              /* @__PURE__ */ jsx("div", { className: "font-library-modal__fonts-grid__main", children: /* @__PURE__ */ jsx(
-                "ul",
-                {
-                  role: "list",
-                  className: "font-library-modal__fonts-list",
-                  children: items.map((font) => /* @__PURE__ */ jsx(
-                    "li",
-                    {
-                      className: "font-library-modal__fonts-list-item",
-                      children: /* @__PURE__ */ jsx(
-                        FontCard,
-                        {
-                          font: font.font_family_settings,
-                          navigatorPath: "/fontFamily",
-                          onClick: () => {
-                            setSelectedFont(
-                              font.font_family_settings
-                            );
-                          }
-                        }
-                      )
-                    },
-                    font.font_family_settings.slug
-                  ))
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxs(Navigator.Screen, { path: "/fontFamily", children: [
-              /* @__PURE__ */ jsxs(Flex, { justify: "flex-start", children: [
-                /* @__PURE__ */ jsx(
-                  Navigator.BackButton,
-                  {
-                    icon: isRTL() ? chevronRight : chevronLeft,
-                    size: "small",
-                    onClick: () => {
-                      setSelectedFont(null);
-                      setNotice(null);
-                    },
-                    label: __("Back")
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Heading,
-                  {
-                    level: 2,
-                    size: 13,
-                    className: "edit-site-global-styles-header",
-                    children: selectedFont?.name
-                  }
-                )
-              ] }),
-              notice && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(Spacer, { margin: 1 }),
-                /* @__PURE__ */ jsx(
-                  Notice,
-                  {
-                    status: notice.type,
-                    onRemove: () => setNotice(null),
-                    children: notice.message
-                  }
-                ),
-                /* @__PURE__ */ jsx(Spacer, { margin: 1 })
-              ] }),
-              /* @__PURE__ */ jsx(Spacer, { margin: 4 }),
-              /* @__PURE__ */ jsx(Text, { children: __("Select font variants to install.") }),
-              /* @__PURE__ */ jsx(Spacer, { margin: 4 }),
-              /* @__PURE__ */ jsx(
-                CheckboxControl,
-                {
-                  className: "font-library-modal__select-all",
-                  label: __("Select all"),
-                  checked: isSelectAllChecked,
-                  onChange: toggleSelectAll,
-                  indeterminate: isIndeterminate,
-                  __nextHasNoMarginBottom: true
-                }
-              ),
-              /* @__PURE__ */ jsx(VStack, { spacing: 0, children: /* @__PURE__ */ jsx(
-                "ul",
-                {
-                  role: "list",
-                  className: "font-library-modal__fonts-list",
-                  children: getSortedFontFaces(selectedFont).map(
-                    (face, i) => /* @__PURE__ */ jsx(
-                      "li",
-                      {
-                        className: "font-library-modal__fonts-list-item",
-                        children: /* @__PURE__ */ jsx(
-                          CollectionFontVariant,
-                          {
-                            font: selectedFont,
-                            face,
-                            handleToggleVariant,
-                            selected: isFontFontFaceInOutline(
-                              selectedFont.slug,
-                              selectedFont.fontFace ? face : null,
-                              // If the font has no fontFace, we want to check if the font is in the outline
-                              fontToInstallOutline
-                            )
-                          }
-                        )
-                      },
-                      `face${i}`
-                    )
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ jsx(Spacer, { margin: 16 })
-            ] })
-          ]
-        }
-      ),
-      selectedFont && /* @__PURE__ */ jsx(
-        Flex,
-        {
-          justify: "flex-end",
-          className: "font-library-modal__footer",
-          children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              __next40pxDefaultSize: true,
-              variant: "primary",
-              onClick: handleInstall,
-              isBusy: isInstalling,
-              disabled: fontsToInstall.length === 0 || isInstalling,
-              accessibleWhenDisabled: true,
-              children: __("Install")
-            }
-          )
-        }
-      ),
-      !selectedFont && /* @__PURE__ */ jsxs(
-        HStack,
-        {
-          expanded: false,
-          className: "font-library-modal__footer",
-          justify: "end",
-          spacing: 6,
-          children: [
-            /* @__PURE__ */ jsx(
-              HStack,
-              {
-                justify: "flex-start",
-                expanded: false,
-                spacing: 1,
-                className: "font-library-modal__page-selection",
-                children: createInterpolateElement(
-                  sprintf(
-                    // translators: 1: Current page number, 2: Total number of pages.
-                    _x(
-                      "<div>Page</div>%1$s<div>of %2$s</div>",
-                      "paging"
-                    ),
-                    "<CurrentPage />",
-                    totalPages
-                  ),
-                  {
-                    div: /* @__PURE__ */ jsx("div", { "aria-hidden": true }),
-                    CurrentPage: /* @__PURE__ */ jsx(
-                      SelectControl,
-                      {
-                        "aria-label": __(
-                          "Current page"
-                        ),
-                        value: page,
-                        options: [
-                          ...Array(totalPages)
-                        ].map((e, i) => {
-                          return {
-                            label: i + 1,
-                            value: i + 1
-                          };
-                        }),
-                        onChange: (newPage) => setPage(
-                          parseInt(newPage)
-                        ),
-                        size: "small",
-                        __nextHasNoMarginBottom: true,
-                        variant: "minimal"
-                      }
-                    )
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs(HStack, { expanded: false, spacing: 1, children: [
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: () => setPage(page - 1),
-                  disabled: page === 1,
-                  accessibleWhenDisabled: true,
-                  label: __("Previous page"),
-                  icon: isRTL() ? next : previous,
-                  showTooltip: true,
-                  size: "compact",
-                  tooltipPosition: "top"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: () => setPage(page + 1),
-                  disabled: page === totalPages,
-                  accessibleWhenDisabled: true,
-                  label: __("Next page"),
-                  icon: isRTL() ? previous : next,
-                  showTooltip: true,
-                  size: "compact",
-                  tooltipPosition: "top"
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    ] })
-  ] });
-}
-var font_collection_default = FontCollection;
-export {
-  font_collection_default as default
-};
-//# sourceMappingURL=font-collection.js.map

package/build-module/components/global-styles/font-library-modal/font-collection.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/global-styles/font-library-modal/font-collection.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseState,\n\tuseMemo,\n\tcreateInterpolateElement,\n} from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as Text,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tNavigator,\n\t__experimentalHeading as Heading,\n\tNotice,\n\tSelectControl,\n\tFlexItem,\n\tFlex,\n\tButton,\n\tDropdownMenu,\n\tSearchControl,\n\tProgressBar,\n\tCheckboxControl,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { sprintf, __, _x, isRTL } from '@wordpress/i18n';\nimport {\n\tmoreVertical,\n\tnext,\n\tprevious,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport { toggleFont } from './utils/toggleFont';\nimport {\n\tgetFontsOutline,\n\tisFontFontFaceInOutline,\n} from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\nimport { downloadFontFaceAssets } from './utils';\nimport { sortFontFaces } from './utils/sort-font-faces';\nimport CollectionFontVariant from './collection-font-variant';\n\nconst DEFAULT_CATEGORY = {\n\tslug: 'all',\n\tname: _x( 'All', 'font categories' ),\n};\n\nconst LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';\nconst MIN_WINDOW_HEIGHT = 500;\n\nfunction FontCollection( { slug } ) {\n\tconst requiresPermission = slug === 'google-fonts';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn window.localStorage.getItem( LOCAL_STORAGE_ITEM ) === 'true';\n\t};\n\n\tconst [ selectedFont, setSelectedFont ] = useState( null );\n\tconst [ notice, setNotice ] = useState( false );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState( [] );\n\tconst [ page, setPage ] = useState( 1 );\n\tconst [ filters, setFilters ] = useState( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { collections, getFontCollection, installFonts, isInstalling } =\n\t\tuseContext( FontLibraryContext );\n\tconst selectedCollection = collections.find(\n\t\t( collection ) => collection.slug === slug\n\t);\n\n\tuseEffect( () => {\n\t\tconst handleStorage = () => {\n\t\t\tsetRenderConfirmDialog(\n\t\t\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t\t\t);\n\t\t};\n\t\thandleStorage();\n\t\twindow.addEventListener( 'storage', handleStorage );\n\t\treturn () => window.removeEventListener( 'storage', handleStorage );\n\t}, [ slug, requiresPermission ] );\n\n\tconst revokeAccess = () => {\n\t\twindow.localStorage.setItem( LOCAL_STORAGE_ITEM, 'false' );\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\tuseEffect( () => {\n\t\tconst fetchFontCollection = async () => {\n\t\t\ttry {\n\t\t\t\tawait getFontCollection( slug );\n\t\t\t\tresetFilters();\n\t\t\t} catch ( e ) {\n\t\t\t\tif ( ! notice ) {\n\t\t\t\t\tsetNotice( {\n\t\t\t\t\t\ttype: 'error',\n\t\t\t\t\t\tmessage: e?.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tfetchFontCollection();\n\t}, [ slug, getFontCollection, setNotice, notice ] );\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t}, [ slug ] );\n\n\tuseEffect( () => {\n\t\t// If the selected fonts change, reset the selected fonts to install\n\t\tsetFontsToInstall( [] );\n\t}, [ selectedFont ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() => selectedCollection?.font_families ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.categories ?? [];\n\n\tconst categories = [ DEFAULT_CATEGORY, ...collectionCategories ];\n\n\tconst fonts = useMemo(\n\t\t() => filterFonts( collectionFonts, filters ),\n\t\t[ collectionFonts, filters ]\n\t);\n\n\tconst isLoading = ! selectedCollection?.font_families && ! notice;\n\n\t// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px\n\t// The height of each font family item is 61px.\n\tconst windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT );\n\tconst pageSize = Math.floor( ( windowHeight - 417 ) / 61 );\n\tconst totalPages = Math.ceil( fonts.length / pageSize );\n\tconst itemsStart = ( page - 1 ) * pageSize;\n\tconst itemsLimit = page * pageSize;\n\tconst items = fonts.slice( itemsStart, itemsLimit );\n\n\tconst handleCategoryFilter = ( category ) => {\n\t\tsetFilters( { ...filters, category } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUpdateSearchInput = ( value ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst resetFilters = () => {\n\t\tsetFilters( {} );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleToggleVariant = ( font, face ) => {\n\t\tconst newFontsToInstall = toggleFont( font, face, fontsToInstall );\n\t\tsetFontsToInstall( newFontsToInstall );\n\t};\n\n\tconst fontToInstallOutline = getFontsOutline( fontsToInstall );\n\n\tconst resetFontsToInstall = () => {\n\t\tsetFontsToInstall( [] );\n\t};\n\n\tconst selectFontCount =\n\t\tfontsToInstall.length > 0 ? fontsToInstall[ 0 ]?.fontFace?.length : 0;\n\n\t// Check if any fonts are selected.\n\tconst isIndeterminate =\n\t\tselectFontCount > 0 &&\n\t\tselectFontCount !== selectedFont?.fontFace?.length;\n\n\t// Check if all fonts are selected.\n\tconst isSelectAllChecked =\n\t\tselectFontCount === selectedFont?.fontFace?.length;\n\n\t// Toggle select all fonts.\n\tconst toggleSelectAll = () => {\n\t\tconst newFonts = isSelectAllChecked ? [] : [ selectedFont ];\n\n\t\tsetFontsToInstall( newFonts );\n\t};\n\n\tconst handleInstall = async () => {\n\t\tsetNotice( null );\n\n\t\tconst fontFamily = fontsToInstall[ 0 ];\n\n\t\ttry {\n\t\t\tif ( fontFamily?.fontFace ) {\n\t\t\t\tawait Promise.all(\n\t\t\t\t\tfontFamily.fontFace.map( async ( fontFace ) => {\n\t\t\t\t\t\tif ( fontFace.src ) {\n\t\t\t\t\t\t\tfontFace.file = await downloadFontFaceAssets(\n\t\t\t\t\t\t\t\tfontFace.src\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t}\n\t\t} catch ( error ) {\n\t\t\t// If any of the fonts fail to download,\n\t\t\t// show an error notice and stop the request from being sent.\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: __(\n\t\t\t\t\t'Error installing the fonts, could not be downloaded.'\n\t\t\t\t),\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait installFonts( [ fontFamily ] );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: error.message,\n\t\t\t} );\n\t\t}\n\t\tresetFontsToInstall();\n\t};\n\n\tconst getSortedFontFaces = ( fontFamily ) => {\n\t\tif ( ! fontFamily ) {\n\t\t\treturn [];\n\t\t}\n\t\tif ( ! fontFamily.fontFace || ! fontFamily.fontFace.length ) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tfontFamily: fontFamily.fontFamily,\n\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\tfontWeight: '400',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\t\treturn sortFontFaces( fontFamily.fontFace );\n\t};\n\n\tif ( renderConfirmDialog ) {\n\t\treturn <GoogleFontsConfirmDialog />;\n\t}\n\n\tconst ActionsComponent = () => {\n\t\tif ( slug !== 'google-fonts' || renderConfirmDialog || selectedFont ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<DropdownMenu\n\t\t\t\ticon={ moreVertical }\n\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tposition: 'bottom left',\n\t\t\t\t} }\n\t\t\t\tcontrols={ [\n\t\t\t\t\t{\n\t\t\t\t\t\ttitle: __( 'Revoke access to Google Fonts' ),\n\t\t\t\t\t\tonClick: revokeAccess,\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t/>\n\t\t);\n\t};\n\n\treturn (\n\t\t<div className=\"font-library-modal__tabpanel-layout\">\n\t\t\t{ isLoading && (\n\t\t\t\t<div className=\"font-library-modal__loading\">\n\t\t\t\t\t<ProgressBar />\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ ! isLoading && (\n\t\t\t\t<>\n\t\t\t\t\t<Navigator\n\t\t\t\t\t\tinitialPath=\"/\"\n\t\t\t\t\t\tclassName=\"font-library-modal__tabpanel-layout\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t\t\t\t\t{ selectedCollection.name }\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t\t<Text>\n\t\t\t\t\t\t\t\t\t\t{ selectedCollection.description }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t<ActionsComponent />\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<Flex>\n\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t<SearchControl\n\t\t\t\t\t\t\t\t\t\tclassName=\"font-library-modal__search\"\n\t\t\t\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Font name\u2026' ) }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\thideLabelFromVision={ false }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t</Flex>\n\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t\t\t\t\t{ !! selectedCollection?.font_families?.length &&\n\t\t\t\t\t\t\t\t! fonts.length && (\n\t\t\t\t\t\t\t\t\t<Text>\n\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t'No fonts found. Try with a different search term.'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t<div className=\"font-library-modal__fonts-grid__main\">\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library-modal__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ items.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings.slug\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library-modal__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\tfont={\n\t\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedFont(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Navigator.Screen>\n\n\t\t\t\t\t\t<Navigator.Screen path=\"/fontFamily\">\n\t\t\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronRight : chevronLeft\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tsetSelectedFont( null );\n\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ selectedFont?.name }\n\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<Text>\n\t\t\t\t\t\t\t\t{ __( 'Select font variants to install.' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\tclassName=\"font-library-modal__select-all\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Select all' ) }\n\t\t\t\t\t\t\t\tchecked={ isSelectAllChecked }\n\t\t\t\t\t\t\t\tonChange={ toggleSelectAll }\n\t\t\t\t\t\t\t\tindeterminate={ isIndeterminate }\n\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library-modal__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ getSortedFontFaces( selectedFont ).map(\n\t\t\t\t\t\t\t\t\t\t( face, i ) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library-modal__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<CollectionFontVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\t\t\t\t\thandleToggleVariant={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleToggleVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselected={ isFontFontFaceInOutline(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedFont.slug,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedFont.fontFace\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? face\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null, // If the font has no fontFace, we want to check if the font is in the outline\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfontToInstallOutline\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t<Spacer margin={ 16 } />\n\t\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t</Navigator>\n\n\t\t\t\t\t{ selectedFont && (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tclassName=\"font-library-modal__footer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\t\t\tisBusy={ isInstalling }\n\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\tfontsToInstall.length === 0 || isInstalling\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Install' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! selectedFont && (\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"font-library-modal__footer\"\n\t\t\t\t\t\t\tjustify=\"end\"\n\t\t\t\t\t\t\tspacing={ 6 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t\t\tclassName=\"font-library-modal__page-selection\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: 1: Current page number, 2: Total number of pages.\n\t\t\t\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t\t\t\t'<div>Page</div>%1$s<div>of %2$s</div>',\n\t\t\t\t\t\t\t\t\t\t\t'paging'\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t'<CurrentPage />',\n\t\t\t\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tdiv: <div aria-hidden />,\n\t\t\t\t\t\t\t\t\t\tCurrentPage: (\n\t\t\t\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Current page'\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={ page }\n\t\t\t\t\t\t\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t\t\t\t\t\t\t...Array( totalPages ),\n\t\t\t\t\t\t\t\t\t\t\t\t].map( ( e, i ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: i + 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: i + 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={ ( newPage ) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetPage(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparseInt( newPage )\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ () => setPage( page - 1 ) }\n\t\t\t\t\t\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ () => setPage( page + 1 ) }\n\t\t\t\t\t\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontCollection;\n"],
-  "mappings": "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",
-  "names": []
-}

package/build-module/components/global-styles/font-library-modal/font-demo.js

@@ -1,91 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { __experimentalText as Text } from "@wordpress/components";
-import { useContext, useEffect, useState, useRef } from "@wordpress/element";
-import { FontLibraryContext } from "./context";
-import {
-  getFacePreviewStyle,
-  getFamilyPreviewStyle
-} from "./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;
-  }
-}
-function getDisplayFontFace(font) {
-  if (font.fontStyle || font.fontWeight) {
-    return font;
-  }
-  if (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 = useRef(null);
-  const fontFace = getDisplayFontFace(font);
-  const style = getFamilyPreviewStyle(font);
-  text = text || font.name;
-  const customPreviewUrl = font.preview;
-  const [isIntersecting, setIsIntersecting] = useState(false);
-  const [isAssetLoaded, setIsAssetLoaded] = useState(false);
-  const { loadFontFaceAsset } = useContext(FontLibraryContext);
-  const previewUrl = customPreviewUrl ?? getPreviewUrl(fontFace);
-  const isPreviewImage = previewUrl && previewUrl.match(/\.(png|jpg|jpeg|gif|svg)$/i);
-  const faceStyles = getFacePreviewStyle(fontFace);
-  const textDemoStyle = {
-    fontSize: "18px",
-    lineHeight: 1,
-    opacity: isAssetLoaded ? "1" : "0",
-    ...style,
-    ...faceStyles
-  };
-  useEffect(() => {
-    const observer = new window.IntersectionObserver(([entry]) => {
-      setIsIntersecting(entry.isIntersecting);
-    }, {});
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [ref]);
-  useEffect(() => {
-    const loadAsset = async () => {
-      if (isIntersecting) {
-        if (!isPreviewImage && fontFace.src) {
-          await loadFontFaceAsset(fontFace);
-        }
-        setIsAssetLoaded(true);
-      }
-    };
-    loadAsset();
-  }, [fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage]);
-  return /* @__PURE__ */ jsx("div", { ref, children: isPreviewImage ? /* @__PURE__ */ jsx(
-    "img",
-    {
-      src: previewUrl,
-      loading: "lazy",
-      alt: text,
-      className: "font-library-modal__font-variant_demo-image"
-    }
-  ) : /* @__PURE__ */ jsx(
-    Text,
-    {
-      style: textDemoStyle,
-      className: "font-library-modal__font-variant_demo-text",
-      children: text
-    }
-  ) });
-}
-var font_demo_default = FontDemo;
-export {
-  font_demo_default as default
-};
-//# sourceMappingURL=font-demo.js.map

package/build-module/components/global-styles/font-library-modal/font-demo.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/components/global-styles/font-library-modal/font-demo.js"],
-  "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';\n\nfunction getPreviewUrl( fontFace ) {\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}\n\nfunction getDisplayFontFace( font ) {\n\t// if this IS a font face return it\n\tif ( font.fontStyle || font.fontWeight ) {\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 ( 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 } ) {\n\tconst ref = useRef( null );\n\n\tconst fontFace = getDisplayFontFace( font );\n\tconst style = getFamilyPreviewStyle( font );\n\ttext = text || font.name;\n\tconst customPreviewUrl = font.preview;\n\n\tconst [ isIntersecting, setIsIntersecting ] = useState( false );\n\tconst [ isAssetLoaded, setIsAssetLoaded ] = useState( 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\tobserver.observe( ref.current );\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": "AAiGI;AA9FJ,SAAS,sBAAsB,YAAY;AAC3C,SAAS,YAAY,WAAW,UAAU,cAAc;AAKxD,SAAS,0BAA0B;AACnC;AAAA,EACC;AAAA,EACA;AAAA,OACM;AAEP,SAAS,cAAe,UAAW;AAClC,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;AACD;AAEA,SAAS,mBAAoB,MAAO;AAEnC,MAAK,KAAK,aAAa,KAAK,YAAa;AACxC,WAAO;AAAA,EACR;AAGA,MAAK,KAAK,YAAY,KAAK,SAAS,QAAS;AAC5C,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,GAAI;AACnC,QAAM,MAAM,OAAQ,IAAK;AAEzB,QAAM,WAAW,mBAAoB,IAAK;AAC1C,QAAM,QAAQ,sBAAuB,IAAK;AAC1C,SAAO,QAAQ,KAAK;AACpB,QAAM,mBAAmB,KAAK;AAE9B,QAAM,CAAE,gBAAgB,iBAAkB,IAAI,SAAU,KAAM;AAC9D,QAAM,CAAE,eAAe,gBAAiB,IAAI,SAAU,KAAM;AAC5D,QAAM,EAAE,kBAAkB,IAAI,WAAY,kBAAmB;AAE7D,QAAM,aAAa,oBAAoB,cAAe,QAAS;AAC/D,QAAM,iBACL,cAAc,WAAW,MAAO,4BAA6B;AAE9D,QAAM,aAAa,oBAAqB,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,YAAW,MAAM;AAChB,UAAM,WAAW,IAAI,OAAO,qBAAsB,CAAE,CAAE,KAAM,MAAO;AAClE,wBAAmB,MAAM,cAAe;AAAA,IACzC,GAAG,CAAC,CAAE;AACN,aAAS,QAAS,IAAI,OAAQ;AAC9B,WAAO,MAAM,SAAS,WAAW;AAAA,EAClC,GAAG,CAAE,GAAI,CAAE;AAEX,YAAW,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,oBAAC,SAAI,KACF,2BACD;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,SAAQ;AAAA,MACR,KAAM;AAAA,MACN,WAAU;AAAA;AAAA,EACX,IAEA;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ;AAAA,MACR,WAAU;AAAA,MAER;AAAA;AAAA,EACH,GAEF;AAEF;AAEA,IAAO,oBAAQ;",
-  "names": []
-}