@wordpress/global-styles-ui 1.10.0 → 1.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/build/block-preview-panel.cjs.map +2 -2
  2. package/build/font-library/font-collection.cjs +2 -1
  3. package/build/font-library/font-collection.cjs.map +2 -2
  4. package/build/font-library/lib/inflate.cjs.map +1 -1
  5. package/build/font-library/lib/lib-font.browser.cjs.map +1 -1
  6. package/build/font-library/lib/unbrotli.cjs.map +1 -1
  7. package/build/font-library/upload-fonts.cjs +1 -1
  8. package/build/font-library/upload-fonts.cjs.map +2 -2
  9. package/build/global-styles-ui.cjs.map +2 -2
  10. package/build/hooks.cjs +28 -7
  11. package/build/hooks.cjs.map +2 -2
  12. package/build/screen-block-list.cjs.map +2 -2
  13. package/build/screen-block.cjs +12 -27
  14. package/build/screen-block.cjs.map +2 -2
  15. package/build/utils.cjs +3 -3
  16. package/build/utils.cjs.map +1 -1
  17. package/build/variations/variations-panel.cjs.map +2 -2
  18. package/build-module/block-preview-panel.mjs.map +2 -2
  19. package/build-module/font-library/font-collection.mjs +2 -1
  20. package/build-module/font-library/font-collection.mjs.map +2 -2
  21. package/build-module/font-library/lib/inflate.mjs.map +1 -1
  22. package/build-module/font-library/lib/lib-font.browser.mjs.map +1 -1
  23. package/build-module/font-library/lib/unbrotli.mjs.map +1 -1
  24. package/build-module/font-library/upload-fonts.mjs +1 -1
  25. package/build-module/font-library/upload-fonts.mjs.map +2 -2
  26. package/build-module/global-styles-ui.mjs.map +2 -2
  27. package/build-module/hooks.mjs +28 -7
  28. package/build-module/hooks.mjs.map +2 -2
  29. package/build-module/screen-block-list.mjs.map +2 -2
  30. package/build-module/screen-block.mjs +12 -27
  31. package/build-module/screen-block.mjs.map +2 -2
  32. package/build-module/utils.mjs +3 -3
  33. package/build-module/utils.mjs.map +1 -1
  34. package/build-module/variations/variations-panel.mjs.map +2 -2
  35. package/build-style/style-rtl.css +1 -0
  36. package/build-style/style.css +1 -0
  37. package/build-types/block-preview-panel.d.ts.map +1 -1
  38. package/build-types/font-library/font-collection.d.ts.map +1 -1
  39. package/build-types/global-styles-ui.d.ts.map +1 -1
  40. package/build-types/hooks.d.ts +4 -1
  41. package/build-types/hooks.d.ts.map +1 -1
  42. package/build-types/screen-block-list.d.ts.map +1 -1
  43. package/build-types/screen-block.d.ts.map +1 -1
  44. package/build-types/screen-typography-element.d.ts +10 -10
  45. package/build-types/variations/variations-panel.d.ts +4 -6
  46. package/build-types/variations/variations-panel.d.ts.map +1 -1
  47. package/package.json +18 -18
  48. package/src/block-preview-panel.tsx +0 -1
  49. package/src/font-library/font-collection.tsx +2 -1
  50. package/src/font-library/lib/inflate.js +1 -1
  51. package/src/font-library/lib/lib-font.browser.js +1 -1
  52. package/src/font-library/lib/unbrotli.js +1 -1
  53. package/src/font-library/upload-fonts.tsx +1 -1
  54. package/src/global-styles-ui.tsx +2 -6
  55. package/src/hooks.ts +33 -8
  56. package/src/screen-block-list.tsx +0 -1
  57. package/src/screen-block.tsx +14 -40
  58. package/src/screen-revisions/style.scss +1 -0
  59. package/src/utils.ts +3 -3
  60. package/src/variations/variations-panel.tsx +1 -8
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../src/block-preview-panel.tsx"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { BlockPreview } from '@wordpress/block-editor';\n// @ts-expect-error: Not typed yet.\nimport { getBlockType, getBlockFromExample } from '@wordpress/blocks';\nimport { __experimentalSpacer as Spacer } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __unstableGeneratePreviewStateStyles as generatePreviewStateStyles } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { getVariationClassName } from './utils';\n\ninterface BlockPreviewPanelProps {\n\tname: string;\n\tvariation?: string;\n\tselectedState?: string;\n\tstateStyles?: any;\n}\n\nconst BlockPreviewPanel = ( {\n\tname,\n\tvariation = '',\n\tselectedState = 'default',\n\tstateStyles,\n}: BlockPreviewPanelProps ) => {\n\tconst blockExample = getBlockType( name )?.example;\n\tconst blocks = useMemo( () => {\n\t\tif ( ! blockExample ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst example = {\n\t\t\t...blockExample,\n\t\t\tattributes: {\n\t\t\t\t...blockExample.attributes,\n\t\t\t\tstyle: undefined,\n\t\t\t\tclassName: variation\n\t\t\t\t\t? getVariationClassName( variation )\n\t\t\t\t\t: blockExample.attributes?.className,\n\t\t\t},\n\t\t};\n\n\t\treturn getBlockFromExample( name, example );\n\t}, [ name, blockExample, variation ] );\n\n\t// Generate CSS for the selected state.\n\tconst stateCSS = useMemo( () => {\n\t\tif ( selectedState === 'default' || ! stateStyles ) {\n\t\t\treturn '';\n\t\t}\n\n\t\treturn generatePreviewStateStyles( stateStyles, name );\n\t}, [ selectedState, stateStyles, name ] );\n\n\tconst viewportWidth = blockExample?.viewportWidth ?? 500;\n\t// Same as height of InserterPreviewPanel.\n\tconst previewHeight = 144;\n\tconst sidebarWidth = 235;\n\tconst scale = sidebarWidth / viewportWidth;\n\tconst minHeight =\n\t\tscale !== 0 && scale < 1 && previewHeight\n\t\t\t? previewHeight / scale\n\t\t\t: previewHeight;\n\n\tif ( ! blockExample ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Spacer marginX={ 4 } marginBottom={ 4 }>\n\t\t\t<div\n\t\t\t\tclassName=\"global-styles-ui__block-preview-panel\"\n\t\t\t\tstyle={ { maxHeight: previewHeight, boxSizing: 'initial' } }\n\t\t\t>\n\t\t\t\t<BlockPreview\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t\tminHeight={ previewHeight }\n\t\t\t\t\tadditionalStyles={\n\t\t\t\t\t\t//We want this CSS to be in sync with the one in InserterPreviewPanel.\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tcss: `\n\t\t\t\t\t\t\t\tbody{\n\t\t\t\t\t\t\t\t\tpadding: 24px;\n\t\t\t\t\t\t\t\t\tmin-height:${ Math.round( minHeight ) }px;\n\t\t\t\t\t\t\t\t\tdisplay:flex;\n\t\t\t\t\t\t\t\t\talign-items:center;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t.is-root-container { width: 100%; }\n\t\t\t\t\t\t\t\t${ stateCSS }\n\t\t\t\t\t\t\t`,\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</div>\n\t\t</Spacer>\n\t);\n};\n\nexport default BlockPreviewPanel;\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,0BAA6B;AAE7B,oBAAkD;AAClD,wBAA+C;AAC/C,qBAAwB;AACxB,kCAAmF;AAKnF,mBAAsC;AAgElC;AAvDJ,IAAM,oBAAoB,CAAE;AAAA,EAC3B;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AACD,MAA+B;AAC9B,QAAM,mBAAe,4BAAc,IAAK,GAAG;AAC3C,QAAM,aAAS,wBAAS,MAAM;AAC7B,QAAK,CAAE,cAAe;AACrB,aAAO;AAAA,IACR;AAEA,UAAM,UAAU;AAAA,MACf,GAAG;AAAA,MACH,YAAY;AAAA,QACX,GAAG,aAAa;AAAA,QAChB,OAAO;AAAA,QACP,WAAW,gBACR,oCAAuB,SAAU,IACjC,aAAa,YAAY;AAAA,MAC7B;AAAA,IACD;AAEA,eAAO,mCAAqB,MAAM,OAAQ;AAAA,EAC3C,GAAG,CAAE,MAAM,cAAc,SAAU,CAAE;AAGrC,QAAM,eAAW,wBAAS,MAAM;AAC/B,QAAK,kBAAkB,aAAa,CAAE,aAAc;AACnD,aAAO;AAAA,IACR;AAEA,eAAO,4BAAAA,sCAA4B,aAAa,IAAK;AAAA,EACtD,GAAG,CAAE,eAAe,aAAa,IAAK,CAAE;AAExC,QAAM,gBAAgB,cAAc,iBAAiB;AAErD,QAAM,gBAAgB;AACtB,QAAM,eAAe;AACrB,QAAM,QAAQ,eAAe;AAC7B,QAAM,YACL,UAAU,KAAK,QAAQ,KAAK,gBACzB,gBAAgB,QAChB;AAEJ,MAAK,CAAE,cAAe;AACrB,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,kBAAAC,sBAAA,EAAO,SAAU,GAAI,cAAe,GACpC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ,EAAE,WAAW,eAAe,WAAW,UAAU;AAAA,MAEzD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAY;AAAA,UACZ;AAAA;AAAA,YAEC;AAAA,cACC;AAAA,gBACC,KAAK;AAAA;AAAA;AAAA,sBAGU,KAAK,MAAO,SAAU,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA,UAKpC,QAAS;AAAA;AAAA,cAEb;AAAA,YACD;AAAA;AAAA;AAAA,MAEF;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,8BAAQ;",
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { BlockPreview } from '@wordpress/block-editor';\nimport { getBlockType, getBlockFromExample } from '@wordpress/blocks';\nimport { __experimentalSpacer as Spacer } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __unstableGeneratePreviewStateStyles as generatePreviewStateStyles } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { getVariationClassName } from './utils';\n\ninterface BlockPreviewPanelProps {\n\tname: string;\n\tvariation?: string;\n\tselectedState?: string;\n\tstateStyles?: any;\n}\n\nconst BlockPreviewPanel = ( {\n\tname,\n\tvariation = '',\n\tselectedState = 'default',\n\tstateStyles,\n}: BlockPreviewPanelProps ) => {\n\tconst blockExample = getBlockType( name )?.example;\n\tconst blocks = useMemo( () => {\n\t\tif ( ! blockExample ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst example = {\n\t\t\t...blockExample,\n\t\t\tattributes: {\n\t\t\t\t...blockExample.attributes,\n\t\t\t\tstyle: undefined,\n\t\t\t\tclassName: variation\n\t\t\t\t\t? getVariationClassName( variation )\n\t\t\t\t\t: blockExample.attributes?.className,\n\t\t\t},\n\t\t};\n\n\t\treturn getBlockFromExample( name, example );\n\t}, [ name, blockExample, variation ] );\n\n\t// Generate CSS for the selected state.\n\tconst stateCSS = useMemo( () => {\n\t\tif ( selectedState === 'default' || ! stateStyles ) {\n\t\t\treturn '';\n\t\t}\n\n\t\treturn generatePreviewStateStyles( stateStyles, name );\n\t}, [ selectedState, stateStyles, name ] );\n\n\tconst viewportWidth = blockExample?.viewportWidth ?? 500;\n\t// Same as height of InserterPreviewPanel.\n\tconst previewHeight = 144;\n\tconst sidebarWidth = 235;\n\tconst scale = sidebarWidth / viewportWidth;\n\tconst minHeight =\n\t\tscale !== 0 && scale < 1 && previewHeight\n\t\t\t? previewHeight / scale\n\t\t\t: previewHeight;\n\n\tif ( ! blockExample ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Spacer marginX={ 4 } marginBottom={ 4 }>\n\t\t\t<div\n\t\t\t\tclassName=\"global-styles-ui__block-preview-panel\"\n\t\t\t\tstyle={ { maxHeight: previewHeight, boxSizing: 'initial' } }\n\t\t\t>\n\t\t\t\t<BlockPreview\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t\tminHeight={ previewHeight }\n\t\t\t\t\tadditionalStyles={\n\t\t\t\t\t\t//We want this CSS to be in sync with the one in InserterPreviewPanel.\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tcss: `\n\t\t\t\t\t\t\t\tbody{\n\t\t\t\t\t\t\t\t\tpadding: 24px;\n\t\t\t\t\t\t\t\t\tmin-height:${ Math.round( minHeight ) }px;\n\t\t\t\t\t\t\t\t\tdisplay:flex;\n\t\t\t\t\t\t\t\t\talign-items:center;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t.is-root-container { width: 100%; }\n\t\t\t\t\t\t\t\t${ stateCSS }\n\t\t\t\t\t\t\t`,\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</div>\n\t\t</Spacer>\n\t);\n};\n\nexport default BlockPreviewPanel;\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,0BAA6B;AAC7B,oBAAkD;AAClD,wBAA+C;AAC/C,qBAAwB;AACxB,kCAAmF;AAKnF,mBAAsC;AAgElC;AAvDJ,IAAM,oBAAoB,CAAE;AAAA,EAC3B;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AACD,MAA+B;AAC9B,QAAM,mBAAe,4BAAc,IAAK,GAAG;AAC3C,QAAM,aAAS,wBAAS,MAAM;AAC7B,QAAK,CAAE,cAAe;AACrB,aAAO;AAAA,IACR;AAEA,UAAM,UAAU;AAAA,MACf,GAAG;AAAA,MACH,YAAY;AAAA,QACX,GAAG,aAAa;AAAA,QAChB,OAAO;AAAA,QACP,WAAW,gBACR,oCAAuB,SAAU,IACjC,aAAa,YAAY;AAAA,MAC7B;AAAA,IACD;AAEA,eAAO,mCAAqB,MAAM,OAAQ;AAAA,EAC3C,GAAG,CAAE,MAAM,cAAc,SAAU,CAAE;AAGrC,QAAM,eAAW,wBAAS,MAAM;AAC/B,QAAK,kBAAkB,aAAa,CAAE,aAAc;AACnD,aAAO;AAAA,IACR;AAEA,eAAO,4BAAAA,sCAA4B,aAAa,IAAK;AAAA,EACtD,GAAG,CAAE,eAAe,aAAa,IAAK,CAAE;AAExC,QAAM,gBAAgB,cAAc,iBAAiB;AAErD,QAAM,gBAAgB;AACtB,QAAM,eAAe;AACrB,QAAM,QAAQ,eAAe;AAC7B,QAAM,YACL,UAAU,KAAK,QAAQ,KAAK,gBACzB,gBAAgB,QAChB;AAEJ,MAAK,CAAE,cAAe;AACrB,WAAO;AAAA,EACR;AAEA,SACC,4CAAC,kBAAAC,sBAAA,EAAO,SAAU,GAAI,cAAe,GACpC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ,EAAE,WAAW,eAAe,WAAW,UAAU;AAAA,MAEzD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAY;AAAA,UACZ;AAAA;AAAA,YAEC;AAAA,cACC;AAAA,gBACC,KAAK;AAAA;AAAA;AAAA,sBAGU,KAAK,MAAO,SAAU,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA,UAKpC,QAAS;AAAA;AAAA,cAEb;AAAA,YACD;AAAA;AAAA;AAAA,MAEF;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,8BAAQ;",
6
6
  "names": ["generatePreviewStateStyles", "Spacer"]
7
7
  }
@@ -152,7 +152,7 @@ function FontCollection({ slug }) {
152
152
  })
153
153
  );
154
154
  }
155
- } catch (error) {
155
+ } catch {
156
156
  setNotice({
157
157
  type: "error",
158
158
  message: (0, import_i18n.__)(
@@ -422,6 +422,7 @@ function FontCollection({ slug }) {
422
422
  ),
423
423
  {
424
424
  div: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": true }),
425
+ // @ts-expect-error — Tag injected via sprintf argument, not visible in format string.
425
426
  CurrentPage: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
426
427
  import_components.SelectControl,
427
428
  {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/font-library/font-collection.tsx"],
4
- "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\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';\nimport { useEntityRecord } from '@wordpress/core-data';\nimport type {\n\tFontCollection as FontCollectionType,\n\tFontFace,\n\tFontFamily,\n\tCollectionFontFamily,\n} from '@wordpress/core-data';\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';\nimport type { FontFamilyToUpload } from './types';\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 }: { slug: string } ) {\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< FontFamily | null >(\n\t\tnull\n\t);\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error' | 'info';\n\t\tmessage: string;\n\t} | null >( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState< FontFamily[] >(\n\t\t[]\n\t);\n\tconst [ page, setPage ] = useState( 1 );\n\tconst [ filters, setFilters ] = useState< {\n\t\tcategory?: string;\n\t\tsearch?: string;\n\t} >( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { installFonts, isInstalling } = useContext( FontLibraryContext );\n\tconst { record: selectedCollection, isResolving: isLoading } =\n\t\tuseEntityRecord< FontCollectionType >( 'root', 'fontCollection', slug );\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\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() =>\n\t\t\t( selectedCollection?.font_families as\n\t\t\t\t| CollectionFontFamily[]\n\t\t\t\t| undefined ) ?? [],\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\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: string ) => {\n\t\tsetFilters( { ...filters, category } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUpdateSearchInput = ( value: string ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t\tsetPage( 1 );\n\t};\n\n\t// @ts-expect-error\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst handleToggleVariant = ( font: FontFamily, face?: FontFace ) => {\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\n\t\t\t? fontsToInstall[ 0 ]?.fontFace?.length ?? 0\n\t\t\t: 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: FontFamily[] = [];\n\t\tif ( ! isSelectAllChecked && selectedFont ) {\n\t\t\tnewFonts.push( selectedFont );\n\t\t}\n\n\t\tsetFontsToInstall( newFonts );\n\t};\n\n\tconst handleInstall = async () => {\n\t\tsetNotice( null );\n\n\t\tconst fontFamily: FontFamilyToUpload = 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 as Error ).message,\n\t\t\t} );\n\t\t}\n\t\tresetFontsToInstall();\n\t};\n\n\tconst getSortedFontFaces = ( fontFamily: 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__tabpanel-layout\">\n\t\t\t{ isLoading && (\n\t\t\t\t<div className=\"font-library__loading\">\n\t\t\t\t\t<ProgressBar />\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ ! isLoading && selectedCollection && (\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__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<HStack spacing={ 4 } justify=\"space-between\">\n\t\t\t\t\t\t\t\t<SearchControl\n\t\t\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Font name\u2026' ) }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\t\t\thideLabelFromVision={ false }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t\t\t<option\n\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\tkey={ category.slug }\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{ category.name }\n\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t\t\t</HStack>\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__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__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__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=\"global-styles-ui-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__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/>\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__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ selectedFont &&\n\t\t\t\t\t\t\t\t\t\tgetSortedFontFaces( selectedFont ).map(\n\t\t\t\t\t\t\t\t\t\t\t( face, i ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\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\t\tclassName=\"font-library__fonts-list-item\"\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<CollectionFontVariant\n\t\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\t\tface={ face }\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\t\thandleToggleVariant\n\t\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\t\tselected={ isFontFontFaceInOutline(\n\t\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\t\tselectedFont.fontFace\n\t\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\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\t\tfontToInstallOutline\n\t\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\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\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</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__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__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__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$d</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.toString() }\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: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\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\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"],
5
- "mappings": "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",
4
+ "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\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';\nimport { useEntityRecord } from '@wordpress/core-data';\nimport type {\n\tFontCollection as FontCollectionType,\n\tFontFace,\n\tFontFamily,\n\tCollectionFontFamily,\n} from '@wordpress/core-data';\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';\nimport type { FontFamilyToUpload } from './types';\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 }: { slug: string } ) {\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< FontFamily | null >(\n\t\tnull\n\t);\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error' | 'info';\n\t\tmessage: string;\n\t} | null >( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState< FontFamily[] >(\n\t\t[]\n\t);\n\tconst [ page, setPage ] = useState( 1 );\n\tconst [ filters, setFilters ] = useState< {\n\t\tcategory?: string;\n\t\tsearch?: string;\n\t} >( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { installFonts, isInstalling } = useContext( FontLibraryContext );\n\tconst { record: selectedCollection, isResolving: isLoading } =\n\t\tuseEntityRecord< FontCollectionType >( 'root', 'fontCollection', slug );\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\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() =>\n\t\t\t( selectedCollection?.font_families as\n\t\t\t\t| CollectionFontFamily[]\n\t\t\t\t| undefined ) ?? [],\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\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: string ) => {\n\t\tsetFilters( { ...filters, category } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUpdateSearchInput = ( value: string ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t\tsetPage( 1 );\n\t};\n\n\t// @ts-expect-error\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst handleToggleVariant = ( font: FontFamily, face?: FontFace ) => {\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\n\t\t\t? fontsToInstall[ 0 ]?.fontFace?.length ?? 0\n\t\t\t: 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: FontFamily[] = [];\n\t\tif ( ! isSelectAllChecked && selectedFont ) {\n\t\t\tnewFonts.push( selectedFont );\n\t\t}\n\n\t\tsetFontsToInstall( newFonts );\n\t};\n\n\tconst handleInstall = async () => {\n\t\tsetNotice( null );\n\n\t\tconst fontFamily: FontFamilyToUpload = 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 {\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 as Error ).message,\n\t\t\t} );\n\t\t}\n\t\tresetFontsToInstall();\n\t};\n\n\tconst getSortedFontFaces = ( fontFamily: 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__tabpanel-layout\">\n\t\t\t{ isLoading && (\n\t\t\t\t<div className=\"font-library__loading\">\n\t\t\t\t\t<ProgressBar />\n\t\t\t\t</div>\n\t\t\t) }\n\n\t\t\t{ ! isLoading && selectedCollection && (\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__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<HStack spacing={ 4 } justify=\"space-between\">\n\t\t\t\t\t\t\t\t<SearchControl\n\t\t\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Font name\u2026' ) }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\t\t\thideLabelFromVision={ false }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t\t\t<option\n\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\tkey={ category.slug }\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{ category.name }\n\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t\t\t</HStack>\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__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__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__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=\"global-styles-ui-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__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/>\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__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ selectedFont &&\n\t\t\t\t\t\t\t\t\t\tgetSortedFontFaces( selectedFont ).map(\n\t\t\t\t\t\t\t\t\t\t\t( face, i ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\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\t\tclassName=\"font-library__fonts-list-item\"\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<CollectionFontVariant\n\t\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\t\tface={ face }\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\t\thandleToggleVariant\n\t\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\t\tselected={ isFontFontFaceInOutline(\n\t\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\t\tselectedFont.fontFace\n\t\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\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\t\tfontToInstallOutline\n\t\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\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\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</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__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__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__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$d</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\t// @ts-expect-error \u2014 Tag injected via sprintf argument, not visible in format string.\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.toString() }\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: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\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\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"],
5
+ "mappings": "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",
6
6
  "names": ["filterFonts", "GoogleFontsConfirmDialog", "HStack", "VStack", "Heading", "Text", "Spacer", "FontCard", "CollectionFontVariant"]
7
7
  }