@wordpress/edit-site 5.19.3 → 5.20.0

package/build/components/dataviews/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DataViews", {
+  enumerable: true,
+  get: function () {
+    return _dataviews.default;
+  }
+});
+Object.defineProperty(exports, "PAGE_SIZE_VALUES", {
+  enumerable: true,
+  get: function () {
+    return _viewActions.PAGE_SIZE_VALUES;
+  }
+});
+var _dataviews = _interopRequireDefault(require("./dataviews"));
+var _viewActions = require("./view-actions");
+//# sourceMappingURL=index.js.map

package/build/components/dataviews/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_dataviews","_interopRequireDefault","require","_viewActions"],"sources":["@wordpress/edit-site/src/components/dataviews/index.js"],"sourcesContent":["export { default as DataViews } from './dataviews';\nexport { PAGE_SIZE_VALUES } from './view-actions';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA"}

package/build/components/dataviews/list-view.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactTable = require("@tanstack/react-table");
+var _i18n = require("@wordpress/i18n");
+var _icons = require("@wordpress/icons");
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+const sortIcons = {
+  asc: _icons.chevronUp,
+  desc: _icons.chevronDown
+};
+function Header({
+  header
+}) {
+  if (header.isPlaceholder) {
+    return null;
+  }
+  const text = (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext());
+  if (!header.column.getCanSort()) {
+    return text;
+  }
+  const sortDirection = header.column.getIsSorted();
+  return (0, _react.createElement)(_components.Button, {
+    onClick: header.column.getToggleSortingHandler(),
+    icon: sortIcons[sortDirection],
+    iconPosition: "right",
+    text: text,
+    style: {
+      padding: 0
+    }
+  });
+}
+function ListView({
+  dataView,
+  className,
+  isLoading = false
+}, ref) {
+  const {
+    rows
+  } = dataView.getRowModel();
+  const hasRows = !!rows?.length;
+  if (isLoading) {
+    // TODO:Add spinner or progress bar..
+    return (0, _react.createElement)("h3", null, (0, _i18n.__)('Loading'));
+  }
+  return (0, _react.createElement)("div", {
+    className: "dataviews-list-view-wrapper"
+  }, hasRows && (0, _react.createElement)("table", {
+    ref: ref,
+    className: (0, _classnames.default)('dataviews-list-view', className)
+  }, (0, _react.createElement)("thead", null, dataView.getHeaderGroups().map(headerGroup => (0, _react.createElement)("tr", {
+    key: headerGroup.id
+  }, headerGroup.headers.map(header => (0, _react.createElement)("th", {
+    key: header.id,
+    colSpan: header.colSpan,
+    style: {
+      width: header.column.columnDef.width || undefined,
+      maxWidth: header.column.columnDef.maxWidth || undefined
+    }
+  }, (0, _react.createElement)(Header, {
+    header: header
+  })))))), (0, _react.createElement)("tbody", null, rows.map(row => (0, _react.createElement)("tr", {
+    key: row.id
+  }, row.getVisibleCells().map(cell => (0, _react.createElement)("td", {
+    key: cell.id,
+    style: {
+      width: cell.column.columnDef.width || undefined,
+      maxWidth: cell.column.columnDef.maxWidth || undefined
+    }
+  }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()))))))), !hasRows && (0, _react.createElement)("p", null, (0, _i18n.__)('no results')));
+}
+var _default = (0, _element.forwardRef)(ListView);
+exports.default = _default;
+//# sourceMappingURL=list-view.js.map

package/build/components/dataviews/list-view.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_reactTable","_i18n","_icons","_components","_element","sortIcons","asc","chevronUp","desc","chevronDown","Header","header","isPlaceholder","text","flexRender","column","columnDef","getContext","getCanSort","sortDirection","getIsSorted","_react","createElement","Button","onClick","getToggleSortingHandler","icon","iconPosition","style","padding","ListView","dataView","className","isLoading","ref","rows","getRowModel","hasRows","length","__","classnames","getHeaderGroups","map","headerGroup","key","id","headers","colSpan","width","undefined","maxWidth","row","getVisibleCells","cell","_default","forwardRef","exports","default"],"sources":["@wordpress/edit-site/src/components/dataviews/list-view.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { flexRender } from '@tanstack/react-table';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\nimport { Button } from '@wordpress/components';\nimport { forwardRef } from '@wordpress/element';\n\nconst sortIcons = { asc: chevronUp, desc: chevronDown };\nfunction Header( { header } ) {\n\tif ( header.isPlaceholder ) {\n\t\treturn null;\n\t}\n\tconst text = flexRender(\n\t\theader.column.columnDef.header,\n\t\theader.getContext()\n\t);\n\tif ( ! header.column.getCanSort() ) {\n\t\treturn text;\n\t}\n\tconst sortDirection = header.column.getIsSorted();\n\treturn (\n\t\t<Button\n\t\t\tonClick={ header.column.getToggleSortingHandler() }\n\t\t\ticon={ sortIcons[ sortDirection ] }\n\t\t\ticonPosition=\"right\"\n\t\t\ttext={ text }\n\t\t\tstyle={ { padding: 0 } }\n\t\t/>\n\t);\n}\n\nfunction ListView( { dataView, className, isLoading = false }, ref ) {\n\tconst { rows } = dataView.getRowModel();\n\tconst hasRows = !! rows?.length;\n\tif ( isLoading ) {\n\t\t// TODO:Add spinner or progress bar..\n\t\treturn <h3>{ __( 'Loading' ) }</h3>;\n\t}\n\treturn (\n\t\t<div className=\"dataviews-list-view-wrapper\">\n\t\t\t{ hasRows && (\n\t\t\t\t<table\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tclassName={ classnames( 'dataviews-list-view', className ) }\n\t\t\t\t>\n\t\t\t\t\t<thead>\n\t\t\t\t\t\t{ dataView.getHeaderGroups().map( ( headerGroup ) => (\n\t\t\t\t\t\t\t<tr key={ headerGroup.id }>\n\t\t\t\t\t\t\t\t{ headerGroup.headers.map( ( header ) => (\n\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\tkey={ header.id }\n\t\t\t\t\t\t\t\t\t\tcolSpan={ header.colSpan }\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.width ||\n\t\t\t\t\t\t\t\t\t\t\t\tundefined,\n\t\t\t\t\t\t\t\t\t\t\tmaxWidth:\n\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef\n\t\t\t\t\t\t\t\t\t\t\t\t\t.maxWidth || undefined,\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<Header header={ header } />\n\t\t\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</thead>\n\t\t\t\t\t<tbody>\n\t\t\t\t\t\t{ rows.map( ( row ) => (\n\t\t\t\t\t\t\t<tr key={ row.id }>\n\t\t\t\t\t\t\t\t{ row.getVisibleCells().map( ( cell ) => (\n\t\t\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\t\t\tkey={ cell.id }\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.width ||\n\t\t\t\t\t\t\t\t\t\t\t\tundefined,\n\t\t\t\t\t\t\t\t\t\t\tmaxWidth:\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef\n\t\t\t\t\t\t\t\t\t\t\t\t\t.maxWidth || undefined,\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{ flexRender(\n\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\t\tcell.getContext()\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</tbody>\n\t\t\t\t</table>\n\t\t\t) }\n\t\t\t{ ! hasRows && <p>{ __( 'no results' ) }</p> }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( ListView );\n"],"mappings":"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"}

package/build/components/dataviews/pagination.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pagination = Pagination;
+var _react = require("react");
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _i18n = require("@wordpress/i18n");
+var _viewActions = require("./view-actions");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+// 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.
+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 (0, _react.createElement)(_components.__experimentalHStack, {
+    expanded: false,
+    spacing: 3,
+    justify: "space-between",
+    className: "dataviews-pagination"
+  }, (0, _react.createElement)(_components.__experimentalText, {
+    variant: "muted"
+  },
+  // translators: %s: Total number of entries.
+  (0, _i18n.sprintf)(
+  // translators: %s: Total number of entries.
+  (0, _i18n._n)('%s item', '%s items', _totalItems), _totalItems)), !!_totalItems && (0, _react.createElement)(_components.__experimentalHStack, {
+    expanded: false,
+    spacing: 1
+  }, (0, _react.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: () => dataView.setPageIndex(0),
+    disabled: !dataView.getCanPreviousPage(),
+    "aria-label": (0, _i18n.__)('First page')
+  }, "\xAB"), (0, _react.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: () => dataView.previousPage(),
+    disabled: !dataView.getCanPreviousPage(),
+    "aria-label": (0, _i18n.__)('Previous page')
+  }, "\u2039"), (0, _react.createElement)(_components.__experimentalHStack, {
+    justify: "flex-start",
+    expanded: false,
+    spacing: 1
+  }, (0, _element.createInterpolateElement)((0, _i18n.sprintf)(
+  // translators: %1$s: Current page number, %2$s: Total number of pages.
+  (0, _i18n._x)('<CurrenPageControl /> of %2$s', 'paging'), currentPage, numPages), {
+    CurrenPageControl: (0, _react.createElement)(_components.__experimentalNumberControl, {
+      "aria-label": (0, _i18n.__)('Current page'),
+      min: 1,
+      max: numPages,
+      onChange: value => {
+        if (value > numPages) return;
+        dataView.setPageIndex(value - 1);
+      },
+      step: "1",
+      value: currentPage,
+      isDragEnabled: false,
+      spinControls: "none"
+    })
+  })), (0, _react.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: () => dataView.nextPage(),
+    disabled: !dataView.getCanNextPage(),
+    "aria-label": (0, _i18n.__)('Next page')
+  }, "\u203A"), (0, _react.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: () => dataView.setPageIndex(dataView.getPageCount() - 1),
+    disabled: !dataView.getCanNextPage(),
+    "aria-label": (0, _i18n.__)('Last page')
+  }, "\xBB")), (0, _react.createElement)(_viewActions.PageSizeControl, {
+    dataView: dataView
+  }));
+}
+//# sourceMappingURL=pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_element","_i18n","_viewActions","Pagination","dataView","totalItems","currentPage","getState","pagination","pageIndex","numPages","getPageCount","_totalItems","getCoreRowModel","rows","length","_react","createElement","__experimentalHStack","expanded","spacing","justify","className","__experimentalText","variant","sprintf","_n","Button","onClick","setPageIndex","disabled","getCanPreviousPage","__","previousPage","createInterpolateElement","_x","CurrenPageControl","__experimentalNumberControl","min","max","onChange","value","step","isDragEnabled","spinControls","nextPage","getCanNextPage","PageSizeControl"],"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/components/dataviews/text-filter.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TextFilter;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _useDebouncedInput = _interopRequireDefault(require("../../utils/use-debounced-input"));
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+function TextFilter({
+  className,
+  searchLabel = (0, _i18n.__)('Filter list'),
+  onChange
+}) {
+  const [search, setSearch, debouncedSearch] = (0, _useDebouncedInput.default)();
+  (0, _element.useEffect)(() => {
+    onChange(debouncedSearch);
+  }, [debouncedSearch, onChange]);
+  return (0, _react.createElement)(_components.SearchControl, {
+    className: (0, _classnames.default)('dataviews__text-filter', className),
+    onChange: setSearch,
+    value: search,
+    label: searchLabel,
+    placeholder: searchLabel,
+    size: "compact"
+  });
+}
+//# sourceMappingURL=text-filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_i18n","_element","_components","_useDebouncedInput","TextFilter","className","searchLabel","__","onChange","search","setSearch","debouncedSearch","useDebouncedInput","useEffect","_react","createElement","SearchControl","classnames","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":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAKA,IAAAI,kBAAA,GAAAL,sBAAA,CAAAC,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAGe,SAASK,UAAUA,CAAE;EACnCC,SAAS;EACTC,WAAW,GAAG,IAAAC,QAAE,EAAE,aAAc,CAAC;EACjCC;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,MAAM,EAAEC,SAAS,EAAEC,eAAe,CAAE,GAAG,IAAAC,0BAAiB,EAAC,CAAC;EAClE,IAAAC,kBAAS,EAAE,MAAM;IAChBL,QAAQ,CAAEG,eAAgB,CAAC;EAC5B,CAAC,EAAE,CAAEA,eAAe,EAAEH,QAAQ,CAAG,CAAC;EAClC,OACC,IAAAM,MAAA,CAAAC,aAAA,EAACb,WAAA,CAAAc,aAAa;IACbX,SAAS,EAAG,IAAAY,mBAAU,EAAE,wBAAwB,EAAEZ,SAAU,CAAG;IAC/DG,QAAQ,EAAGE,SAAW;IACtBQ,KAAK,EAAGT,MAAQ;IAChBU,KAAK,EAAGb,WAAa;IACrBc,WAAW,EAAGd,WAAa;IAC3Be,IAAI,EAAC;EAAS,CACd,CAAC;AAEJ"}

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

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PAGE_SIZE_VALUES = void 0;
+exports.PageSizeControl = PageSizeControl;
+exports.default = ViewActions;
+var _react = require("react");
+var _components = require("@wordpress/components");
+var _icons = require("@wordpress/icons");
+var _i18n = require("@wordpress/i18n");
+var _lockUnlock = require("../../lock-unlock");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  DropdownMenuV2,
+  DropdownMenuGroupV2,
+  DropdownMenuItemV2,
+  DropdownSubMenuV2,
+  DropdownSubMenuTriggerV2
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+const PAGE_SIZE_VALUES = [5, 20, 50];
+exports.PAGE_SIZE_VALUES = PAGE_SIZE_VALUES;
+function PageSizeControl({
+  dataView
+}) {
+  const label = (0, _i18n.__)('Rows per page:');
+  return (0, _react.createElement)(_components.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: (0, _react.createElement)(_components.__experimentalInputControlPrefixWrapper, {
+      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 (0, _react.createElement)(DropdownSubMenuV2, {
+    trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+      suffix: (0, _react.createElement)(_react.Fragment, null, currenPageSize, (0, _react.createElement)(_components.Icon, {
+        icon: _icons.chevronRightSmall
+      }))
+    }, (0, _i18n.__)('Rows per page'))
+  }, PAGE_SIZE_VALUES.map(size => {
+    return (0, _react.createElement)(DropdownMenuItemV2, {
+      key: size,
+      prefix: currenPageSize === size && (0, _react.createElement)(_components.Icon, {
+        icon: _icons.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 (0, _react.createElement)(DropdownSubMenuV2, {
+    trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+      suffix: (0, _react.createElement)(_components.Icon, {
+        icon: _icons.chevronRightSmall
+      })
+    }, (0, _i18n.__)('Fields'))
+  }, hideableFields?.map(field => {
+    return (0, _react.createElement)(DropdownMenuItemV2, {
+      key: field.id,
+      prefix: field.getIsVisible() && (0, _react.createElement)(_components.Icon, {
+        icon: _icons.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: _icons.arrowUp,
+    label: (0, _i18n.__)('Sort ascending')
+  },
+  desc: {
+    icon: _icons.arrowDown,
+    label: (0, _i18n.__)('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 (0, _react.createElement)(DropdownSubMenuV2, {
+    trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+      suffix: (0, _react.createElement)(_react.Fragment, null, currentSortedField?.columnDef.header, (0, _react.createElement)(_components.Icon, {
+        icon: _icons.chevronRightSmall
+      }))
+    }, (0, _i18n.__)('Sort by'))
+  }, sortableFields?.map(field => {
+    const sortedDirection = field.getIsSorted();
+    return (0, _react.createElement)(DropdownSubMenuV2, {
+      key: field.id,
+      trigger: (0, _react.createElement)(DropdownSubMenuTriggerV2, {
+        suffix: (0, _react.createElement)(_components.Icon, {
+          icon: _icons.chevronRightSmall
+        })
+      }, field.columnDef.header),
+      side: "left"
+    }, Object.entries(sortingItemsInfo).map(([direction, info]) => {
+      return (0, _react.createElement)(DropdownMenuItemV2, {
+        key: direction,
+        prefix: (0, _react.createElement)(_components.Icon, {
+          icon: info.icon
+        }),
+        suffix: sortedDirection === direction && (0, _react.createElement)(_components.Icon, {
+          icon: _icons.check
+        }),
+        onSelect: event => {
+          event.preventDefault();
+          if (sortedDirection === direction) {
+            dataView.resetSorting();
+          } else {
+            dataView.setSorting([{
+              id: field.id,
+              desc: direction === 'desc'
+            }]);
+          }
+        }
+      }, info.label);
+    }));
+  }));
+}
+function ViewActions({
+  dataView,
+  className
+}) {
+  return (0, _react.createElement)(DropdownMenuV2, {
+    label: (0, _i18n.__)('Actions'),
+    className: className,
+    trigger: (0, _react.createElement)(_components.Button, {
+      variant: "tertiary",
+      icon: _icons.blockTable
+    }, (0, _i18n.__)('View'), (0, _react.createElement)(_components.Icon, {
+      icon: _icons.chevronDown
+    }))
+  }, (0, _react.createElement)(DropdownMenuGroupV2, null, (0, _react.createElement)(SortMenu, {
+    dataView: dataView
+  }), (0, _react.createElement)(FieldsVisibilityMenu, {
+    dataView: dataView
+  }), (0, _react.createElement)(PageSizeMenu, {
+    dataView: dataView
+  })));
+}
+//# sourceMappingURL=view-actions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_components","require","_icons","_i18n","_lockUnlock","DropdownMenuV2","DropdownMenuGroupV2","DropdownMenuItemV2","DropdownSubMenuV2","DropdownSubMenuTriggerV2","unlock","componentsPrivateApis","PAGE_SIZE_VALUES","exports","PageSizeControl","dataView","label","__","_react","createElement","SelectControl","__nextHasNoMarginBottom","hideLabelFromVision","prefix","__experimentalInputControlPrefixWrapper","as","className","value","getState","pagination","pageSize","options","map","onChange","setPageSize","PageSizeMenu","currenPageSize","trigger","suffix","Fragment","Icon","icon","chevronRightSmall","size","key","check","onSelect","event","preventDefault","role","FieldsVisibilityMenu","hideableFields","getAllColumns","filter","columnn","getCanHide","length","field","id","getIsVisible","getToggleVisibilityHandler","columnDef","header","sortingItemsInfo","asc","arrowUp","desc","arrowDown","SortMenu","sortableFields","getCanSort","currentSortedField","find","getIsSorted","sortedDirection","side","Object","entries","direction","info","resetSorting","setSorting","ViewActions","Button","variant","blockTable","chevronDown"],"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/components/editor/index.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Editor;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 var _data = require("@wordpress/data");
 var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
@@ -165,39 +166,39 @@ function Editor({
     'aria-busy': 'true',
     'aria-describedby': loadingProgressId
   } : undefined;
-  return (0, _element.createElement)(_element.Fragment, null, isLoading ? (0, _element.createElement)(_canvasLoader.default, {
+  return (0, _react.createElement)(_react.Fragment, null, isLoading ? (0, _react.createElement)(_canvasLoader.default, {
     id: loadingProgressId
-  }) : null, isEditMode && (0, _element.createElement)(_welcomeGuide.default, null), (0, _element.createElement)(_coreData.EntityProvider, {
+  }) : null, isEditMode && (0, _react.createElement)(_welcomeGuide.default, null), (0, _react.createElement)(_coreData.EntityProvider, {
     kind: "root",
     type: "site"
-  }, (0, _element.createElement)(_coreData.EntityProvider, {
+  }, (0, _react.createElement)(_coreData.EntityProvider, {
     kind: "postType",
     type: editedPostType,
     id: editedPostId
-  }, (0, _element.createElement)(_blockEditor.BlockContextProvider, {
+  }, (0, _react.createElement)(_blockEditor.BlockContextProvider, {
     value: blockContext
-  }, (0, _element.createElement)(_sidebarEditMode.SidebarComplementaryAreaFills, null), isEditMode && (0, _element.createElement)(_startTemplateOptions.default, null), (0, _element.createElement)(_interface.InterfaceSkeleton, {
+  }, (0, _react.createElement)(_sidebarEditMode.SidebarComplementaryAreaFills, null), isEditMode && (0, _react.createElement)(_startTemplateOptions.default, null), (0, _react.createElement)(_interface.InterfaceSkeleton, {
     isDistractionFree: true,
     enableRegionNavigation: false,
     className: (0, _classnames.default)('edit-site-editor__interface-skeleton', {
       'show-icon-labels': showIconLabels,
       'is-loading': isLoading
     }),
-    notices: (0, _element.createElement)(_editor.EditorSnackbars, null),
-    content: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_globalStylesRenderer.GlobalStylesRenderer, null), isEditMode && (0, _element.createElement)(_editor.EditorNotices, null), showVisualEditor && editedPost && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor2.default, null), (0, _element.createElement)(BlockRemovalWarningModal, {
+    notices: (0, _react.createElement)(_editor.EditorSnackbars, null),
+    content: (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_globalStylesRenderer.GlobalStylesRenderer, null), isEditMode && (0, _react.createElement)(_editor.EditorNotices, null), showVisualEditor && editedPost && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_blockEditor2.default, null), (0, _react.createElement)(BlockRemovalWarningModal, {
       rules: blockRemovalRules
-    })), editorMode === 'text' && editedPost && isEditMode && (0, _element.createElement)(_codeEditor.default, null), hasLoadedPost && !editedPost && (0, _element.createElement)(_components.Notice, {
+    })), editorMode === 'text' && editedPost && isEditMode && (0, _react.createElement)(_codeEditor.default, null), hasLoadedPost && !editedPost && (0, _react.createElement)(_components.Notice, {
       status: "warning",
       isDismissible: false
-    }, (0, _i18n.__)("You attempted to edit an item that doesn't exist. Perhaps it was deleted?")), isEditMode && (0, _element.createElement)(_editMode.default, null)),
+    }, (0, _i18n.__)("You attempted to edit an item that doesn't exist. Perhaps it was deleted?")), isEditMode && (0, _react.createElement)(_editMode.default, null)),
     contentProps: contentProps,
-    secondarySidebar: isEditMode && (shouldShowInserter && (0, _element.createElement)(_inserterSidebar.default, null) || shouldShowListView && (0, _element.createElement)(_listViewSidebar.default, {
+    secondarySidebar: isEditMode && (shouldShowInserter && (0, _react.createElement)(_inserterSidebar.default, null) || shouldShowListView && (0, _react.createElement)(_listViewSidebar.default, {
       listViewToggleElement: listViewToggleElement
     })),
-    sidebar: isEditMode && isRightSidebarOpen && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_interface.ComplementaryArea.Slot, {
+    sidebar: isEditMode && isRightSidebarOpen && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_interface.ComplementaryArea.Slot, {
       scope: "core/edit-site"
-    }), (0, _element.createElement)(_sidebarFixedBottom.SidebarFixedBottomSlot, null)),
-    footer: shouldShowBlockBreadcrumbs && (0, _element.createElement)(_blockEditor.BlockBreadcrumb, {
+    }), (0, _react.createElement)(_sidebarFixedBottom.SidebarFixedBottomSlot, null)),
+    footer: shouldShowBlockBreadcrumbs && (0, _react.createElement)(_blockEditor.BlockBreadcrumb, {
       rootLabelText: hasPageContentFocus ? (0, _i18n.__)('Page') : (0, _i18n.__)('Template')
     }),
     labels: {