@wordpress/edit-site 5.19.6 → 5.20.1

package/build-module/components/dataviews/pagination.js

@@ -0,0 +1,83 @@
+import { createElement } from "react";
+/**
+ * WordPress dependencies
+ */
+import { Button, __experimentalHStack as HStack, __experimentalText as Text, __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+import { sprintf, __, _x, _n } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { PageSizeControl } from './view-actions';
+
+// For now this is copied from the patterns list Pagination component, because
+// the datatable pagination starts from index zero(`0`). Eventually all lists will be
+// using this one.
+export function Pagination({
+  dataView,
+  // If passed, use it, as it's for controlled pagination.
+  totalItems = 0
+}) {
+  const currentPage = dataView.getState().pagination.pageIndex + 1;
+  const numPages = dataView.getPageCount();
+  const _totalItems = totalItems || dataView.getCoreRowModel().rows.length;
+  return createElement(HStack, {
+    expanded: false,
+    spacing: 3,
+    justify: "space-between",
+    className: "dataviews-pagination"
+  }, createElement(Text, {
+    variant: "muted"
+  },
+  // translators: %s: Total number of entries.
+  sprintf(
+  // translators: %s: Total number of entries.
+  _n('%s item', '%s items', _totalItems), _totalItems)), !!_totalItems && createElement(HStack, {
+    expanded: false,
+    spacing: 1
+  }, createElement(Button, {
+    variant: "tertiary",
+    onClick: () => dataView.setPageIndex(0),
+    disabled: !dataView.getCanPreviousPage(),
+    "aria-label": __('First page')
+  }, "\xAB"), createElement(Button, {
+    variant: "tertiary",
+    onClick: () => dataView.previousPage(),
+    disabled: !dataView.getCanPreviousPage(),
+    "aria-label": __('Previous page')
+  }, "\u2039"), createElement(HStack, {
+    justify: "flex-start",
+    expanded: false,
+    spacing: 1
+  }, createInterpolateElement(sprintf(
+  // translators: %1$s: Current page number, %2$s: Total number of pages.
+  _x('<CurrenPageControl /> of %2$s', 'paging'), currentPage, numPages), {
+    CurrenPageControl: createElement(NumberControl, {
+      "aria-label": __('Current page'),
+      min: 1,
+      max: numPages,
+      onChange: value => {
+        if (value > numPages) return;
+        dataView.setPageIndex(value - 1);
+      },
+      step: "1",
+      value: currentPage,
+      isDragEnabled: false,
+      spinControls: "none"
+    })
+  })), createElement(Button, {
+    variant: "tertiary",
+    onClick: () => dataView.nextPage(),
+    disabled: !dataView.getCanNextPage(),
+    "aria-label": __('Next page')
+  }, "\u203A"), createElement(Button, {
+    variant: "tertiary",
+    onClick: () => dataView.setPageIndex(dataView.getPageCount() - 1),
+    disabled: !dataView.getCanNextPage(),
+    "aria-label": __('Last page')
+  }, "\xBB")), createElement(PageSizeControl, {
+    dataView: dataView
+  }));
+}
+//# sourceMappingURL=pagination.js.map

package/build-module/components/dataviews/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","__experimentalHStack","HStack","__experimentalText","Text","__experimentalNumberControl","NumberControl","createInterpolateElement","sprintf","__","_x","_n","PageSizeControl","Pagination","dataView","totalItems","currentPage","getState","pagination","pageIndex","numPages","getPageCount","_totalItems","getCoreRowModel","rows","length","createElement","expanded","spacing","justify","className","variant","onClick","setPageIndex","disabled","getCanPreviousPage","previousPage","CurrenPageControl","min","max","onChange","value","step","isDragEnabled","spinControls","nextPage","getCanNextPage"],"sources":["@wordpress/edit-site/src/components/dataviews/pagination.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\t__experimentalNumberControl as NumberControl,\n} from '@wordpress/components';\nimport { createInterpolateElement } from '@wordpress/element';\nimport { sprintf, __, _x, _n } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { PageSizeControl } from './view-actions';\n\n// For now this is copied from the patterns list Pagination component, because\n// the datatable pagination starts from index zero(`0`). Eventually all lists will be\n// using this one.\nexport function Pagination( {\n\tdataView,\n\t// If passed, use it, as it's for controlled pagination.\n\ttotalItems = 0,\n} ) {\n\tconst currentPage = dataView.getState().pagination.pageIndex + 1;\n\tconst numPages = dataView.getPageCount();\n\tconst _totalItems = totalItems || dataView.getCoreRowModel().rows.length;\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tspacing={ 3 }\n\t\t\tjustify=\"space-between\"\n\t\t\tclassName=\"dataviews-pagination\"\n\t\t>\n\t\t\t<Text variant=\"muted\">\n\t\t\t\t{\n\t\t\t\t\t// translators: %s: Total number of entries.\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t// translators: %s: Total number of entries.\n\t\t\t\t\t\t_n( '%s item', '%s items', _totalItems ),\n\t\t\t\t\t\t_totalItems\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t</Text>\n\t\t\t{ !! _totalItems && (\n\t\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => dataView.setPageIndex( 0 ) }\n\t\t\t\t\t\tdisabled={ ! dataView.getCanPreviousPage() }\n\t\t\t\t\t\taria-label={ __( 'First page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t«\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => dataView.previousPage() }\n\t\t\t\t\t\tdisabled={ ! dataView.getCanPreviousPage() }\n\t\t\t\t\t\taria-label={ __( 'Previous page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t‹\n\t\t\t\t\t</Button>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t// translators: %1$s: Current page number, %2$s: Total number of pages.\n\t\t\t\t\t\t\t\t_x( '<CurrenPageControl /> of %2$s', 'paging' ),\n\t\t\t\t\t\t\t\tcurrentPage,\n\t\t\t\t\t\t\t\tnumPages\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tCurrenPageControl: (\n\t\t\t\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\t\t\t\tmax={ numPages }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\t\t\t\tif ( value > numPages ) return;\n\t\t\t\t\t\t\t\t\t\t\tdataView.setPageIndex( value - 1 );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tstep=\"1\"\n\t\t\t\t\t\t\t\t\t\tvalue={ currentPage }\n\t\t\t\t\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\t\t\t\t\tspinControls=\"none\"\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}\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () => dataView.nextPage() }\n\t\t\t\t\t\tdisabled={ ! dataView.getCanNextPage() }\n\t\t\t\t\t\taria-label={ __( 'Next page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t›\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tdataView.setPageIndex( dataView.getPageCount() - 1 )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ ! dataView.getCanNextPage() }\n\t\t\t\t\t\taria-label={ __( 'Last page' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t»\n\t\t\t\t\t</Button>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t<PageSizeControl dataView={ dataView } />\n\t\t</HStack>\n\t);\n}\n"],"mappings":"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"}

package/build-module/components/dataviews/text-filter.js

@@ -0,0 +1,36 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import { SearchControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import useDebouncedInput from '../../utils/use-debounced-input';
+export default function TextFilter({
+  className,
+  searchLabel = __('Filter list'),
+  onChange
+}) {
+  const [search, setSearch, debouncedSearch] = useDebouncedInput();
+  useEffect(() => {
+    onChange(debouncedSearch);
+  }, [debouncedSearch, onChange]);
+  return createElement(SearchControl, {
+    className: classnames('dataviews__text-filter', className),
+    onChange: setSearch,
+    value: search,
+    label: searchLabel,
+    placeholder: searchLabel,
+    size: "compact"
+  });
+}
+//# sourceMappingURL=text-filter.js.map

package/build-module/components/dataviews/text-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["classnames","__","useEffect","SearchControl","useDebouncedInput","TextFilter","className","searchLabel","onChange","search","setSearch","debouncedSearch","createElement","value","label","placeholder","size"],"sources":["@wordpress/edit-site/src/components/dataviews/text-filter.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\nimport { SearchControl } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useDebouncedInput from '../../utils/use-debounced-input';\n\nexport default function TextFilter( {\n\tclassName,\n\tsearchLabel = __( 'Filter list' ),\n\tonChange,\n} ) {\n\tconst [ search, setSearch, debouncedSearch ] = useDebouncedInput();\n\tuseEffect( () => {\n\t\tonChange( debouncedSearch );\n\t}, [ debouncedSearch, onChange ] );\n\treturn (\n\t\t<SearchControl\n\t\t\tclassName={ classnames( 'dataviews__text-filter', className ) }\n\t\t\tonChange={ setSearch }\n\t\t\tvalue={ search }\n\t\t\tlabel={ searchLabel }\n\t\t\tplaceholder={ searchLabel }\n\t\t\tsize=\"compact\"\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,aAAa,QAAQ,uBAAuB;;AAErD;AACA;AACA;AACA,OAAOC,iBAAiB,MAAM,iCAAiC;AAE/D,eAAe,SAASC,UAAUA,CAAE;EACnCC,SAAS;EACTC,WAAW,GAAGN,EAAE,CAAE,aAAc,CAAC;EACjCO;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAGP,iBAAiB,CAAC,CAAC;EAClEF,SAAS,CAAE,MAAM;IAChBM,QAAQ,CAAEG,eAAgB,CAAC;EAC5B,CAAC,EAAE,CAAEA,eAAe,EAAEH,QAAQ,CAAG,CAAC;EAClC,OACCI,aAAA,CAACT,aAAa;IACbG,SAAS,EAAGN,UAAU,CAAE,wBAAwB,EAAEM,SAAU,CAAG;IAC/DE,QAAQ,EAAGE,SAAW;IACtBG,KAAK,EAAGJ,MAAQ;IAChBK,KAAK,EAAGP,WAAa;IACrBQ,WAAW,EAAGR,WAAa;IAC3BS,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ"}

package/build-module/components/dataviews/view-actions.js

@@ -0,0 +1,179 @@
+import { createElement, Fragment } from "react";
+/**
+ * WordPress dependencies
+ */
+import { Button, Icon, SelectControl, privateApis as componentsPrivateApis, __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper } from '@wordpress/components';
+import { chevronRightSmall, check, blockTable, chevronDown, arrowUp, arrowDown } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+const {
+  DropdownMenuV2,
+  DropdownMenuGroupV2,
+  DropdownMenuItemV2,
+  DropdownSubMenuV2,
+  DropdownSubMenuTriggerV2
+} = unlock(componentsPrivateApis);
+export const PAGE_SIZE_VALUES = [5, 20, 50];
+export function PageSizeControl({
+  dataView
+}) {
+  const label = __('Rows per page:');
+  return createElement(SelectControl, {
+    __nextHasNoMarginBottom: true,
+    label: label,
+    hideLabelFromVision: true
+    // TODO: This should probably use a label based on the wanted design
+    // and we could remove InputControlPrefixWrapper usage.
+    ,
+    prefix: createElement(InputControlPrefixWrapper, {
+      as: "span",
+      className: "dataviews__per-page-control-prefix"
+    }, label),
+    value: dataView.getState().pagination.pageSize,
+    options: PAGE_SIZE_VALUES.map(pageSize => ({
+      value: pageSize,
+      label: pageSize
+    })),
+    onChange: value => dataView.setPageSize(+value)
+  });
+}
+function PageSizeMenu({
+  dataView
+}) {
+  const currenPageSize = dataView.getState().pagination.pageSize;
+  return createElement(DropdownSubMenuV2, {
+    trigger: createElement(DropdownSubMenuTriggerV2, {
+      suffix: createElement(Fragment, null, currenPageSize, createElement(Icon, {
+        icon: chevronRightSmall
+      }))
+    }, __('Rows per page'))
+  }, PAGE_SIZE_VALUES.map(size => {
+    return createElement(DropdownMenuItemV2, {
+      key: size,
+      prefix: currenPageSize === size && createElement(Icon, {
+        icon: check
+      }),
+      onSelect: event => {
+        // We need to handle this on DropDown component probably..
+        event.preventDefault();
+        dataView.setPageSize(size);
+      }
+      // TODO: check about role and a11y.
+      ,
+      role: "menuitemcheckbox"
+    }, size);
+  }));
+}
+function FieldsVisibilityMenu({
+  dataView
+}) {
+  const hideableFields = dataView.getAllColumns().filter(columnn => columnn.getCanHide());
+  if (!hideableFields?.length) {
+    return null;
+  }
+  return createElement(DropdownSubMenuV2, {
+    trigger: createElement(DropdownSubMenuTriggerV2, {
+      suffix: createElement(Icon, {
+        icon: chevronRightSmall
+      })
+    }, __('Fields'))
+  }, hideableFields?.map(field => {
+    return createElement(DropdownMenuItemV2, {
+      key: field.id,
+      prefix: field.getIsVisible() && createElement(Icon, {
+        icon: check
+      }),
+      onSelect: event => {
+        event.preventDefault();
+        field.getToggleVisibilityHandler()(event);
+      },
+      role: "menuitemcheckbox"
+    }, field.columnDef.header);
+  }));
+}
+
+// This object is used to construct the sorting options per sortable field.
+const sortingItemsInfo = {
+  asc: {
+    icon: arrowUp,
+    label: __('Sort ascending')
+  },
+  desc: {
+    icon: arrowDown,
+    label: __('Sort descending')
+  }
+};
+function SortMenu({
+  dataView
+}) {
+  const sortableFields = dataView.getAllColumns().filter(columnn => columnn.getCanSort());
+  if (!sortableFields?.length) {
+    return null;
+  }
+  const currentSortedField = sortableFields.find(field => field.getIsSorted());
+  return createElement(DropdownSubMenuV2, {
+    trigger: createElement(DropdownSubMenuTriggerV2, {
+      suffix: createElement(Fragment, null, currentSortedField?.columnDef.header, createElement(Icon, {
+        icon: chevronRightSmall
+      }))
+    }, __('Sort by'))
+  }, sortableFields?.map(field => {
+    const sortedDirection = field.getIsSorted();
+    return createElement(DropdownSubMenuV2, {
+      key: field.id,
+      trigger: createElement(DropdownSubMenuTriggerV2, {
+        suffix: createElement(Icon, {
+          icon: chevronRightSmall
+        })
+      }, field.columnDef.header),
+      side: "left"
+    }, Object.entries(sortingItemsInfo).map(([direction, info]) => {
+      return createElement(DropdownMenuItemV2, {
+        key: direction,
+        prefix: createElement(Icon, {
+          icon: info.icon
+        }),
+        suffix: sortedDirection === direction && createElement(Icon, {
+          icon: check
+        }),
+        onSelect: event => {
+          event.preventDefault();
+          if (sortedDirection === direction) {
+            dataView.resetSorting();
+          } else {
+            dataView.setSorting([{
+              id: field.id,
+              desc: direction === 'desc'
+            }]);
+          }
+        }
+      }, info.label);
+    }));
+  }));
+}
+export default function ViewActions({
+  dataView,
+  className
+}) {
+  return createElement(DropdownMenuV2, {
+    label: __('Actions'),
+    className: className,
+    trigger: createElement(Button, {
+      variant: "tertiary",
+      icon: blockTable
+    }, __('View'), createElement(Icon, {
+      icon: chevronDown
+    }))
+  }, createElement(DropdownMenuGroupV2, null, createElement(SortMenu, {
+    dataView: dataView
+  }), createElement(FieldsVisibilityMenu, {
+    dataView: dataView
+  }), createElement(PageSizeMenu, {
+    dataView: dataView
+  })));
+}
+//# sourceMappingURL=view-actions.js.map

package/build-module/components/dataviews/view-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Button","Icon","SelectControl","privateApis","componentsPrivateApis","__experimentalInputControlPrefixWrapper","InputControlPrefixWrapper","chevronRightSmall","check","blockTable","chevronDown","arrowUp","arrowDown","__","unlock","DropdownMenuV2","DropdownMenuGroupV2","DropdownMenuItemV2","DropdownSubMenuV2","DropdownSubMenuTriggerV2","PAGE_SIZE_VALUES","PageSizeControl","dataView","label","createElement","__nextHasNoMarginBottom","hideLabelFromVision","prefix","as","className","value","getState","pagination","pageSize","options","map","onChange","setPageSize","PageSizeMenu","currenPageSize","trigger","suffix","Fragment","icon","size","key","onSelect","event","preventDefault","role","FieldsVisibilityMenu","hideableFields","getAllColumns","filter","columnn","getCanHide","length","field","id","getIsVisible","getToggleVisibilityHandler","columnDef","header","sortingItemsInfo","asc","desc","SortMenu","sortableFields","getCanSort","currentSortedField","find","getIsSorted","sortedDirection","side","Object","entries","direction","info","resetSorting","setSorting","ViewActions","variant"],"sources":["@wordpress/edit-site/src/components/dataviews/view-actions.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\tSelectControl,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,\n} from '@wordpress/components';\nimport {\n\tchevronRightSmall,\n\tcheck,\n\tblockTable,\n\tchevronDown,\n\tarrowUp,\n\tarrowDown,\n} from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tDropdownMenuV2,\n\tDropdownMenuGroupV2,\n\tDropdownMenuItemV2,\n\tDropdownSubMenuV2,\n\tDropdownSubMenuTriggerV2,\n} = unlock( componentsPrivateApis );\n\nexport const PAGE_SIZE_VALUES = [ 5, 20, 50 ];\n\nexport function PageSizeControl( { dataView } ) {\n\tconst label = __( 'Rows per page:' );\n\treturn (\n\t\t<SelectControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ label }\n\t\t\thideLabelFromVision\n\t\t\t// TODO: This should probably use a label based on the wanted design\n\t\t\t// and we could remove InputControlPrefixWrapper usage.\n\t\t\tprefix={\n\t\t\t\t<InputControlPrefixWrapper\n\t\t\t\t\tas=\"span\"\n\t\t\t\t\tclassName=\"dataviews__per-page-control-prefix\"\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t}\n\t\t\tvalue={ dataView.getState().pagination.pageSize }\n\t\t\toptions={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( {\n\t\t\t\tvalue: pageSize,\n\t\t\t\tlabel: pageSize,\n\t\t\t} ) ) }\n\t\t\tonChange={ ( value ) => dataView.setPageSize( +value ) }\n\t\t/>\n\t);\n}\n\nfunction PageSizeMenu( { dataView } ) {\n\tconst currenPageSize = dataView.getState().pagination.pageSize;\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ currenPageSize }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ /* TODO: probably label per view type. */ }\n\t\t\t\t\t{ __( 'Rows per page' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ PAGE_SIZE_VALUES.map( ( size ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\tkey={ size }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tcurrenPageSize === size && <Icon icon={ check } />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t// We need to handle this on DropDown component probably..\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tdataView.setPageSize( size );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// TODO: check about role and a11y.\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ size }\n\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\nfunction FieldsVisibilityMenu( { dataView } ) {\n\tconst hideableFields = dataView\n\t\t.getAllColumns()\n\t\t.filter( ( columnn ) => columnn.getCanHide() );\n\tif ( ! hideableFields?.length ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Fields' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ hideableFields?.map( ( field ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\tprefix={\n\t\t\t\t\t\t\tfield.getIsVisible() && <Icon icon={ check } />\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tfield.getToggleVisibilityHandler()( event );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.columnDef.header }\n\t\t\t\t\t</DropdownMenuItemV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\n// This object is used to construct the sorting options per sortable field.\nconst sortingItemsInfo = {\n\tasc: { icon: arrowUp, label: __( 'Sort ascending' ) },\n\tdesc: { icon: arrowDown, label: __( 'Sort descending' ) },\n};\nfunction SortMenu( { dataView } ) {\n\tconst sortableFields = dataView\n\t\t.getAllColumns()\n\t\t.filter( ( columnn ) => columnn.getCanSort() );\n\tif ( ! sortableFields?.length ) {\n\t\treturn null;\n\t}\n\tconst currentSortedField = sortableFields.find( ( field ) =>\n\t\tfield.getIsSorted()\n\t);\n\treturn (\n\t\t<DropdownSubMenuV2\n\t\t\ttrigger={\n\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{ currentSortedField?.columnDef.header }\n\t\t\t\t\t\t\t<Icon icon={ chevronRightSmall } />\n\t\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Sort by' ) }\n\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t}\n\t\t>\n\t\t\t{ sortableFields?.map( ( field ) => {\n\t\t\t\tconst sortedDirection = field.getIsSorted();\n\t\t\t\treturn (\n\t\t\t\t\t<DropdownSubMenuV2\n\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t<DropdownSubMenuTriggerV2\n\t\t\t\t\t\t\t\tsuffix={ <Icon icon={ chevronRightSmall } /> }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ field.columnDef.header }\n\t\t\t\t\t\t\t</DropdownSubMenuTriggerV2>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tside=\"left\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ Object.entries( sortingItemsInfo ).map(\n\t\t\t\t\t\t\t( [ direction, info ] ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<DropdownMenuItemV2\n\t\t\t\t\t\t\t\t\t\tkey={ direction }\n\t\t\t\t\t\t\t\t\t\tprefix={ <Icon icon={ info.icon } /> }\n\t\t\t\t\t\t\t\t\t\tsuffix={\n\t\t\t\t\t\t\t\t\t\t\tsortedDirection === direction && (\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon={ check } />\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\tonSelect={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\tsortedDirection === direction\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\tdataView.resetSorting();\n\t\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\tdataView.setSorting( [\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\t\tid: field.id,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdesc:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tdirection ===\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'desc',\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} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ info.label }\n\t\t\t\t\t\t\t\t\t</DropdownMenuItemV2>\n\t\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</DropdownSubMenuV2>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</DropdownSubMenuV2>\n\t);\n}\n\nexport default function ViewActions( { dataView, className } ) {\n\treturn (\n\t\t<DropdownMenuV2\n\t\t\tlabel={ __( 'Actions' ) }\n\t\t\tclassName={ className }\n\t\t\ttrigger={\n\t\t\t\t<Button variant=\"tertiary\" icon={ blockTable }>\n\t\t\t\t\t{ __( 'View' ) }\n\t\t\t\t\t<Icon icon={ chevronDown } />\n\t\t\t\t</Button>\n\t\t\t}\n\t\t>\n\t\t\t<DropdownMenuGroupV2>\n\t\t\t\t<SortMenu dataView={ dataView } />\n\t\t\t\t<FieldsVisibilityMenu dataView={ dataView } />\n\t\t\t\t<PageSizeMenu dataView={ dataView } />\n\t\t\t</DropdownMenuGroupV2>\n\t\t</DropdownMenuV2>\n\t);\n}\n"],"mappings":"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"}

package/build-module/components/editor/index.js

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */

package/build-module/components/editor-canvas-container/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/error-boundary/index.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/error-boundary/warning.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/global-styles/block-preview-panel.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/global-styles/color-indicator-wrapper.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

package/build-module/components/global-styles/color-palette-panel.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/global-styles/dimensions-panel.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/global-styles/font-families.js

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
@@ -50,10 +50,9 @@ function FontFamilies() {
     font: font
   })))));
 }
-const FontFamiliesComponent = ({
+export default (({
   ...props
 }) => createElement(FontLibraryProvider, null, createElement(FontFamilies, {
   ...props
-}));
-export default process.env.IS_GUTENBERG_PLUGIN ? FontFamiliesComponent : undefined;
+})));
 //# sourceMappingURL=font-families.js.map

package/build-module/components/global-styles/font-families.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","Button","Tooltip","typography","useContext","FontLibraryProvider","FontLibraryContext","FontLibraryModal","FontFamilyItem","Subtitle","FontFamilies","modalTabOpen","toggleModal","themeFonts","customFonts","createElement","Fragment","onRequestClose","initialTabName","spacing","justify","level","text","onClick","icon","size","isBordered","isSeparated","map","font","key","slug","FontFamiliesComponent","props","process","env","IS_GUTENBERG_PLUGIN","undefined"],"sources":["@wordpress/edit-site/src/components/global-styles/font-families.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tButton,\n\tTooltip,\n} from '@wordpress/components';\nimport { typography } from '@wordpress/icons';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport FontLibraryProvider, {\n\tFontLibraryContext,\n} from './font-library-modal/context';\nimport FontLibraryModal from './font-library-modal';\nimport FontFamilyItem from './font-family-item';\nimport Subtitle from './subtitle';\n\nfunction FontFamilies() {\n\tconst { modalTabOpen, toggleModal, themeFonts, customFonts } =\n\t\tuseContext( FontLibraryContext );\n\n\treturn (\n\t\t<>\n\t\t\t{ !! modalTabOpen && (\n\t\t\t\t<FontLibraryModal\n\t\t\t\t\tonRequestClose={ () => toggleModal() }\n\t\t\t\t\tinitialTabName={ modalTabOpen }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>\n\t\t\t\t\t<HStack justify=\"flex-end\">\n\t\t\t\t\t\t<Tooltip text={ __( 'Manage fonts' ) }>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\ttoggleModal( 'installed-fonts' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taria-label={ __( 'Manage fonts' ) }\n\t\t\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\t\t\tsize={ 'small' }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t{ customFonts.map( ( font ) => (\n\t\t\t\t\t\t<FontFamilyItem key={ font.slug } font={ font } />\n\t\t\t\t\t) ) }\n\t\t\t\t\t{ themeFonts.map( ( font ) => (\n\t\t\t\t\t\t<FontFamilyItem key={ font.slug } font={ font } />\n\t\t\t\t\t) ) }\n\t\t\t\t</ItemGroup>\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nconst FontFamiliesComponent = ( { ...props } ) => (\n\t<FontLibraryProvider>\n\t\t<FontFamilies { ...props } />\n\t</FontLibraryProvider>\n);\n\nexport default process.env.IS_GUTENBERG_PLUGIN\n\t? FontFamiliesComponent\n\t: undefined;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,uBAAuB,IAAIC,SAAS,EACpCC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,MAAM,EACNC,OAAO,QACD,uBAAuB;AAC9B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,mBAAmB,IACzBC,kBAAkB,QACZ,8BAA8B;AACrC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,cAAc,MAAM,oBAAoB;AAC/C,OAAOC,QAAQ,MAAM,YAAY;AAEjC,SAASC,YAAYA,CAAA,EAAG;EACvB,MAAM;IAAEC,YAAY;IAAEC,WAAW;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAC3DV,UAAU,CAAEE,kBAAmB,CAAC;EAEjC,OACCS,aAAA,CAAAC,QAAA,QACG,CAAC,CAAEL,YAAY,IAChBI,aAAA,CAACR,gBAAgB;IAChBU,cAAc,EAAGA,CAAA,KAAML,WAAW,CAAC,CAAG;IACtCM,cAAc,EAAGP;EAAc,CAC/B,CACD,EAEDI,aAAA,CAACjB,MAAM;IAACqB,OAAO,EAAG;EAAG,GACpBJ,aAAA,CAACf,MAAM;IAACoB,OAAO,EAAC;EAAe,GAC9BL,aAAA,CAACN,QAAQ;IAACY,KAAK,EAAG;EAAG,GAAG3B,EAAE,CAAE,OAAQ,CAAa,CAAC,EAClDqB,aAAA,CAACf,MAAM;IAACoB,OAAO,EAAC;EAAU,GACzBL,aAAA,CAACb,OAAO;IAACoB,IAAI,EAAG5B,EAAE,CAAE,cAAe;EAAG,GACrCqB,aAAA,CAACd,MAAM;IACNsB,OAAO,EAAGA,CAAA,KACTX,WAAW,CAAE,iBAAkB,CAC/B;IACD,cAAalB,EAAE,CAAE,cAAe,CAAG;IACnC8B,IAAI,EAAGrB,UAAY;IACnBsB,IAAI,EAAG;EAAS,CAChB,CACO,CACF,CACD,CAAC,EACTV,aAAA,CAACnB,SAAS;IAAC8B,UAAU;IAACC,WAAW;EAAA,GAC9Bb,WAAW,CAACc,GAAG,CAAIC,IAAI,IACxBd,aAAA,CAACP,cAAc;IAACsB,GAAG,EAAGD,IAAI,CAACE,IAAM;IAACF,IAAI,EAAGA;EAAM,CAAE,CAChD,CAAC,EACDhB,UAAU,CAACe,GAAG,CAAIC,IAAI,IACvBd,aAAA,CAACP,cAAc;IAACsB,GAAG,EAAGD,IAAI,CAACE,IAAM;IAACF,IAAI,EAAGA;EAAM,CAAE,CAChD,CACQ,CACJ,CACP,CAAC;AAEL;AAEA,MAAMG,qBAAqB,GAAGA,CAAE;EAAE,GAAGC;AAAM,CAAC,KAC3ClB,aAAA,CAACV,mBAAmB,QACnBU,aAAA,CAACL,YAAY;EAAA,GAAMuB;AAAK,CAAI,CACR,CACrB;AAED,eAAeC,OAAO,CAACC,GAAG,CAACC,mBAAmB,GAC3CJ,qBAAqB,GACrBK,SAAS"}
+{"version":3,"names":["__","__experimentalItemGroup","ItemGroup","__experimentalVStack","VStack","__experimentalHStack","HStack","Button","Tooltip","typography","useContext","FontLibraryProvider","FontLibraryContext","FontLibraryModal","FontFamilyItem","Subtitle","FontFamilies","modalTabOpen","toggleModal","themeFonts","customFonts","createElement","Fragment","onRequestClose","initialTabName","spacing","justify","level","text","onClick","icon","size","isBordered","isSeparated","map","font","key","slug","props"],"sources":["@wordpress/edit-site/src/components/global-styles/font-families.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tButton,\n\tTooltip,\n} from '@wordpress/components';\nimport { typography } from '@wordpress/icons';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport FontLibraryProvider, {\n\tFontLibraryContext,\n} from './font-library-modal/context';\nimport FontLibraryModal from './font-library-modal';\nimport FontFamilyItem from './font-family-item';\nimport Subtitle from './subtitle';\n\nfunction FontFamilies() {\n\tconst { modalTabOpen, toggleModal, themeFonts, customFonts } =\n\t\tuseContext( FontLibraryContext );\n\n\treturn (\n\t\t<>\n\t\t\t{ !! modalTabOpen && (\n\t\t\t\t<FontLibraryModal\n\t\t\t\t\tonRequestClose={ () => toggleModal() }\n\t\t\t\t\tinitialTabName={ modalTabOpen }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>\n\t\t\t\t\t<HStack justify=\"flex-end\">\n\t\t\t\t\t\t<Tooltip text={ __( 'Manage fonts' ) }>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\ttoggleModal( 'installed-fonts' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taria-label={ __( 'Manage fonts' ) }\n\t\t\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\t\t\tsize={ 'small' }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t\t{ customFonts.map( ( font ) => (\n\t\t\t\t\t\t<FontFamilyItem key={ font.slug } font={ font } />\n\t\t\t\t\t) ) }\n\t\t\t\t\t{ themeFonts.map( ( font ) => (\n\t\t\t\t\t\t<FontFamilyItem key={ font.slug } font={ font } />\n\t\t\t\t\t) ) }\n\t\t\t\t</ItemGroup>\n\t\t\t</VStack>\n\t\t</>\n\t);\n}\n\nexport default ( { ...props } ) => (\n\t<FontLibraryProvider>\n\t\t<FontFamilies { ...props } />\n\t</FontLibraryProvider>\n);\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SACCC,uBAAuB,IAAIC,SAAS,EACpCC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,MAAM,EACNC,OAAO,QACD,uBAAuB;AAC9B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,mBAAmB,IACzBC,kBAAkB,QACZ,8BAA8B;AACrC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,cAAc,MAAM,oBAAoB;AAC/C,OAAOC,QAAQ,MAAM,YAAY;AAEjC,SAASC,YAAYA,CAAA,EAAG;EACvB,MAAM;IAAEC,YAAY;IAAEC,WAAW;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAC3DV,UAAU,CAAEE,kBAAmB,CAAC;EAEjC,OACCS,aAAA,CAAAC,QAAA,QACG,CAAC,CAAEL,YAAY,IAChBI,aAAA,CAACR,gBAAgB;IAChBU,cAAc,EAAGA,CAAA,KAAML,WAAW,CAAC,CAAG;IACtCM,cAAc,EAAGP;EAAc,CAC/B,CACD,EAEDI,aAAA,CAACjB,MAAM;IAACqB,OAAO,EAAG;EAAG,GACpBJ,aAAA,CAACf,MAAM;IAACoB,OAAO,EAAC;EAAe,GAC9BL,aAAA,CAACN,QAAQ;IAACY,KAAK,EAAG;EAAG,GAAG3B,EAAE,CAAE,OAAQ,CAAa,CAAC,EAClDqB,aAAA,CAACf,MAAM;IAACoB,OAAO,EAAC;EAAU,GACzBL,aAAA,CAACb,OAAO;IAACoB,IAAI,EAAG5B,EAAE,CAAE,cAAe;EAAG,GACrCqB,aAAA,CAACd,MAAM;IACNsB,OAAO,EAAGA,CAAA,KACTX,WAAW,CAAE,iBAAkB,CAC/B;IACD,cAAalB,EAAE,CAAE,cAAe,CAAG;IACnC8B,IAAI,EAAGrB,UAAY;IACnBsB,IAAI,EAAG;EAAS,CAChB,CACO,CACF,CACD,CAAC,EACTV,aAAA,CAACnB,SAAS;IAAC8B,UAAU;IAACC,WAAW;EAAA,GAC9Bb,WAAW,CAACc,GAAG,CAAIC,IAAI,IACxBd,aAAA,CAACP,cAAc;IAACsB,GAAG,EAAGD,IAAI,CAACE,IAAM;IAACF,IAAI,EAAGA;EAAM,CAAE,CAChD,CAAC,EACDhB,UAAU,CAACe,GAAG,CAAIC,IAAI,IACvBd,aAAA,CAACP,cAAc;IAACsB,GAAG,EAAGD,IAAI,CAACE,IAAM;IAACF,IAAI,EAAGA;EAAM,CAAE,CAChD,CACQ,CACJ,CACP,CAAC;AAEL;AAEA,gBAAe,CAAE;EAAE,GAAGG;AAAM,CAAC,KAC5BjB,aAAA,CAACV,mBAAmB,QACnBU,aAAA,CAACL,YAAY;EAAA,GAAMsB;AAAK,CAAI,CACR,CACrB"}

package/build-module/components/global-styles/font-family-item.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/global-styles/font-library-modal/confirm-delete-dialog.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

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

@@ -1,4 +1,4 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/global-styles/global-styles-provider.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

package/build-module/components/global-styles/gradients-palette-panel.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/global-styles/header.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */

package/build-module/components/global-styles/icon-with-current-color.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * External dependencies
  */

package/build-module/components/global-styles/navigation-button.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement } from "react";
 /**
  * WordPress dependencies
  */