@wordpress/block-editor 12.10.3 → 12.11.0

package/build/components/list-view/drop-indicator.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ListViewDropIndicator;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _components = require("@wordpress/components");
 var _dom = require("@wordpress/dom");
+var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 /**
  * WordPress dependencies
@@ -169,13 +170,13 @@ function ListViewDropIndicator({
   if (!targetElement) {
     return null;
   }
-  return (0, _element.createElement)(_components.Popover, {
+  return (0, _react.createElement)(_components.Popover, {
     animate: false,
     anchor: popoverAnchor,
     focusOnMount: false,
     className: "block-editor-list-view-drop-indicator",
     variant: "unstyled"
-  }, (0, _element.createElement)("div", {
+  }, (0, _react.createElement)("div", {
     style: style,
     className: "block-editor-list-view-drop-indicator__line"
   }));

package/build/components/list-view/drop-indicator.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_components","_dom","_i18n","ListViewDropIndicator","listViewRef","blockDropTarget","rootClientId","clientId","dropPosition","rootBlockElement","blockElement","useMemo","current","_rootBlockElement","querySelector","undefined","_blockElement","targetElement","rtl","isRTL","getDropIndicatorIndent","useCallback","targetElementRect","rootBlockIconElement","rootBlockIconRect","getBoundingClientRect","right","left","getDropIndicatorWidth","indent","width","offsetWidth","scrollContainer","getScrollContainer","ownerDocument","windowScroll","body","documentElement","scrollContainerRect","distanceBetweenContainerAndTarget","scrollContainerWidth","clientWidth","style","popoverAnchor","isValidDropPosition","contextElement","rect","top","bottom","doc","scrollbarWidth","height","window","DOMRect","createElement","Popover","animate","anchor","focusOnMount","className","variant"],"sources":["@wordpress/block-editor/src/components/list-view/drop-indicator.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Popover } from '@wordpress/components';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\nexport default function ListViewDropIndicator( {\n\tlistViewRef,\n\tblockDropTarget,\n} ) {\n\tconst { rootClientId, clientId, dropPosition } = blockDropTarget || {};\n\n\tconst [ rootBlockElement, blockElement ] = useMemo( () => {\n\t\tif ( ! listViewRef.current ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t// The rootClientId will be defined whenever dropping into inner\n\t\t// block lists, but is undefined when dropping at the root level.\n\t\tconst _rootBlockElement = rootClientId\n\t\t\t? listViewRef.current.querySelector(\n\t\t\t\t\t`[data-block=\"${ rootClientId }\"]`\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\t// The clientId represents the sibling block, the dragged block will\n\t\t// usually be inserted adjacent to it. It will be undefined when\n\t\t// dropping a block into an empty block list.\n\t\tconst _blockElement = clientId\n\t\t\t? listViewRef.current.querySelector(\n\t\t\t\t\t`[data-block=\"${ clientId }\"]`\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\treturn [ _rootBlockElement, _blockElement ];\n\t}, [ rootClientId, clientId ] );\n\n\t// The targetElement is the element that the drop indicator will appear\n\t// before or after. When dropping into an empty block list, blockElement\n\t// is undefined, so the indicator will appear after the rootBlockElement.\n\tconst targetElement = blockElement || rootBlockElement;\n\n\tconst rtl = isRTL();\n\n\tconst getDropIndicatorIndent = useCallback(\n\t\t( targetElementRect ) => {\n\t\t\tif ( ! rootBlockElement ) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\t// Calculate the indent using the block icon of the root block.\n\t\t\t// Using a classname selector here might be flaky and could be\n\t\t\t// improved.\n\t\t\tconst rootBlockIconElement = rootBlockElement.querySelector(\n\t\t\t\t'.block-editor-block-icon'\n\t\t\t);\n\t\t\tconst rootBlockIconRect =\n\t\t\t\trootBlockIconElement.getBoundingClientRect();\n\t\t\treturn rtl\n\t\t\t\t? targetElementRect.right - rootBlockIconRect.left\n\t\t\t\t: rootBlockIconRect.right - targetElementRect.left;\n\t\t},\n\t\t[ rootBlockElement, rtl ]\n\t);\n\n\tconst getDropIndicatorWidth = useCallback(\n\t\t( targetElementRect, indent ) => {\n\t\t\tif ( ! targetElement ) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\t// Default to assuming that the width of the drop indicator\n\t\t\t// should be the same as the target element.\n\t\t\tlet width = targetElement.offsetWidth;\n\n\t\t\t// In deeply nested lists, where a scrollbar is present,\n\t\t\t// the width of the drop indicator should be the width of\n\t\t\t// the scroll container, minus the distance from the left\n\t\t\t// edge of the scroll container to the left edge of the\n\t\t\t// target element.\n\t\t\tconst scrollContainer = getScrollContainer(\n\t\t\t\ttargetElement,\n\t\t\t\t'horizontal'\n\t\t\t);\n\n\t\t\tconst ownerDocument = targetElement.ownerDocument;\n\t\t\tconst windowScroll =\n\t\t\t\tscrollContainer === ownerDocument.body ||\n\t\t\t\tscrollContainer === ownerDocument.documentElement;\n\n\t\t\tif ( scrollContainer && ! windowScroll ) {\n\t\t\t\tconst scrollContainerRect =\n\t\t\t\t\tscrollContainer.getBoundingClientRect();\n\n\t\t\t\tconst distanceBetweenContainerAndTarget = isRTL()\n\t\t\t\t\t? scrollContainerRect.right - targetElementRect.right\n\t\t\t\t\t: targetElementRect.left - scrollContainerRect.left;\n\n\t\t\t\tconst scrollContainerWidth = scrollContainer.clientWidth;\n\n\t\t\t\tif (\n\t\t\t\t\tscrollContainerWidth <\n\t\t\t\t\twidth + distanceBetweenContainerAndTarget\n\t\t\t\t) {\n\t\t\t\t\twidth =\n\t\t\t\t\t\tscrollContainerWidth -\n\t\t\t\t\t\tdistanceBetweenContainerAndTarget;\n\t\t\t\t}\n\n\t\t\t\t// LTR logic for ensuring the drop indicator does not extend\n\t\t\t\t// beyond the right edge of the scroll container.\n\t\t\t\tif (\n\t\t\t\t\t! rtl &&\n\t\t\t\t\ttargetElementRect.left + indent < scrollContainerRect.left\n\t\t\t\t) {\n\t\t\t\t\twidth -= scrollContainerRect.left - targetElementRect.left;\n\t\t\t\t\treturn width;\n\t\t\t\t}\n\n\t\t\t\t// RTL logic for ensuring the drop indicator does not extend\n\t\t\t\t// beyond the right edge of the scroll container.\n\t\t\t\tif (\n\t\t\t\t\trtl &&\n\t\t\t\t\ttargetElementRect.right - indent > scrollContainerRect.right\n\t\t\t\t) {\n\t\t\t\t\twidth -=\n\t\t\t\t\t\ttargetElementRect.right - scrollContainerRect.right;\n\t\t\t\t\treturn width;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Subtract the indent from the final width of the indicator.\n\t\t\treturn width - indent;\n\t\t},\n\t\t[ rtl, targetElement ]\n\t);\n\n\tconst style = useMemo( () => {\n\t\tif ( ! targetElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst targetElementRect = targetElement.getBoundingClientRect();\n\t\tconst indent = getDropIndicatorIndent( targetElementRect );\n\n\t\treturn {\n\t\t\twidth: getDropIndicatorWidth( targetElementRect, indent ),\n\t\t};\n\t}, [ getDropIndicatorIndent, getDropIndicatorWidth, targetElement ] );\n\n\tconst popoverAnchor = useMemo( () => {\n\t\tconst isValidDropPosition =\n\t\t\tdropPosition === 'top' ||\n\t\t\tdropPosition === 'bottom' ||\n\t\t\tdropPosition === 'inside';\n\t\tif ( ! targetElement || ! isValidDropPosition ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn {\n\t\t\tcontextElement: targetElement,\n\t\t\tgetBoundingClientRect() {\n\t\t\t\tconst rect = targetElement.getBoundingClientRect();\n\t\t\t\tconst indent = getDropIndicatorIndent( rect );\n\t\t\t\t// In RTL languages, the drop indicator should be positioned\n\t\t\t\t// to the left of the target element, with the width of the\n\t\t\t\t// indicator determining the indent at the right edge of the\n\t\t\t\t// target element. In LTR languages, the drop indicator should\n\t\t\t\t// end at the right edge of the target element, with the indent\n\t\t\t\t// added to the position of the left edge of the target element.\n\t\t\t\tlet left = rtl ? rect.left : rect.left + indent;\n\t\t\t\tlet top = 0;\n\t\t\t\tlet bottom = 0;\n\n\t\t\t\t// In deeply nested lists, where a scrollbar is present,\n\t\t\t\t// the width of the drop indicator should be the width of\n\t\t\t\t// the visible area of the scroll container. Additionally,\n\t\t\t\t// the left edge of the drop indicator line needs to be\n\t\t\t\t// offset by the distance the left edge of the target element\n\t\t\t\t// and the left edge of the scroll container. The ensures\n\t\t\t\t// that the drop indicator position never breaks out of the\n\t\t\t\t// visible area of the scroll container.\n\t\t\t\tconst scrollContainer = getScrollContainer(\n\t\t\t\t\ttargetElement,\n\t\t\t\t\t'horizontal'\n\t\t\t\t);\n\n\t\t\t\tconst doc = targetElement.ownerDocument;\n\t\t\t\tconst windowScroll =\n\t\t\t\t\tscrollContainer === doc.body ||\n\t\t\t\t\tscrollContainer === doc.documentElement;\n\n\t\t\t\t// If the scroll container is not the window, offset the left position, if need be.\n\t\t\t\tif ( scrollContainer && ! windowScroll ) {\n\t\t\t\t\tconst scrollContainerRect =\n\t\t\t\t\t\tscrollContainer.getBoundingClientRect();\n\n\t\t\t\t\t// In RTL languages, a vertical scrollbar is present on the\n\t\t\t\t\t// left edge of the scroll container. The width of the\n\t\t\t\t\t// scrollbar needs to be accounted for when positioning the\n\t\t\t\t\t// drop indicator.\n\t\t\t\t\tconst scrollbarWidth = rtl\n\t\t\t\t\t\t? scrollContainer.offsetWidth -\n\t\t\t\t\t\t  scrollContainer.clientWidth\n\t\t\t\t\t\t: 0;\n\n\t\t\t\t\tif ( left < scrollContainerRect.left + scrollbarWidth ) {\n\t\t\t\t\t\tleft = scrollContainerRect.left + scrollbarWidth;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif ( dropPosition === 'top' ) {\n\t\t\t\t\ttop = rect.top;\n\t\t\t\t\tbottom = rect.top;\n\t\t\t\t} else {\n\t\t\t\t\t// `dropPosition` is either `bottom` or `inside`\n\t\t\t\t\ttop = rect.bottom;\n\t\t\t\t\tbottom = rect.bottom;\n\t\t\t\t}\n\n\t\t\t\tconst width = getDropIndicatorWidth( rect, indent );\n\t\t\t\tconst height = bottom - top;\n\n\t\t\t\treturn new window.DOMRect( left, top, width, height );\n\t\t\t},\n\t\t};\n\t}, [\n\t\ttargetElement,\n\t\tdropPosition,\n\t\tgetDropIndicatorIndent,\n\t\tgetDropIndicatorWidth,\n\t\trtl,\n\t] );\n\n\tif ( ! targetElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Popover\n\t\t\tanimate={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tfocusOnMount={ false }\n\t\t\tclassName=\"block-editor-list-view-drop-indicator\"\n\t\t\tvariant=\"unstyled\"\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={ style }\n\t\t\t\tclassName=\"block-editor-list-view-drop-indicator__line\"\n\t\t\t/>\n\t\t</Popover>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_components","require","_dom","_element","_i18n","ListViewDropIndicator","listViewRef","blockDropTarget","rootClientId","clientId","dropPosition","rootBlockElement","blockElement","useMemo","current","_rootBlockElement","querySelector","undefined","_blockElement","targetElement","rtl","isRTL","getDropIndicatorIndent","useCallback","targetElementRect","rootBlockIconElement","rootBlockIconRect","getBoundingClientRect","right","left","getDropIndicatorWidth","indent","width","offsetWidth","scrollContainer","getScrollContainer","ownerDocument","windowScroll","body","documentElement","scrollContainerRect","distanceBetweenContainerAndTarget","scrollContainerWidth","clientWidth","style","popoverAnchor","isValidDropPosition","contextElement","rect","top","bottom","doc","scrollbarWidth","height","window","DOMRect","_react","createElement","Popover","animate","anchor","focusOnMount","className","variant"],"sources":["@wordpress/block-editor/src/components/list-view/drop-indicator.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Popover } from '@wordpress/components';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\nexport default function ListViewDropIndicator( {\n\tlistViewRef,\n\tblockDropTarget,\n} ) {\n\tconst { rootClientId, clientId, dropPosition } = blockDropTarget || {};\n\n\tconst [ rootBlockElement, blockElement ] = useMemo( () => {\n\t\tif ( ! listViewRef.current ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t// The rootClientId will be defined whenever dropping into inner\n\t\t// block lists, but is undefined when dropping at the root level.\n\t\tconst _rootBlockElement = rootClientId\n\t\t\t? listViewRef.current.querySelector(\n\t\t\t\t\t`[data-block=\"${ rootClientId }\"]`\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\t// The clientId represents the sibling block, the dragged block will\n\t\t// usually be inserted adjacent to it. It will be undefined when\n\t\t// dropping a block into an empty block list.\n\t\tconst _blockElement = clientId\n\t\t\t? listViewRef.current.querySelector(\n\t\t\t\t\t`[data-block=\"${ clientId }\"]`\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\treturn [ _rootBlockElement, _blockElement ];\n\t}, [ rootClientId, clientId ] );\n\n\t// The targetElement is the element that the drop indicator will appear\n\t// before or after. When dropping into an empty block list, blockElement\n\t// is undefined, so the indicator will appear after the rootBlockElement.\n\tconst targetElement = blockElement || rootBlockElement;\n\n\tconst rtl = isRTL();\n\n\tconst getDropIndicatorIndent = useCallback(\n\t\t( targetElementRect ) => {\n\t\t\tif ( ! rootBlockElement ) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\t// Calculate the indent using the block icon of the root block.\n\t\t\t// Using a classname selector here might be flaky and could be\n\t\t\t// improved.\n\t\t\tconst rootBlockIconElement = rootBlockElement.querySelector(\n\t\t\t\t'.block-editor-block-icon'\n\t\t\t);\n\t\t\tconst rootBlockIconRect =\n\t\t\t\trootBlockIconElement.getBoundingClientRect();\n\t\t\treturn rtl\n\t\t\t\t? targetElementRect.right - rootBlockIconRect.left\n\t\t\t\t: rootBlockIconRect.right - targetElementRect.left;\n\t\t},\n\t\t[ rootBlockElement, rtl ]\n\t);\n\n\tconst getDropIndicatorWidth = useCallback(\n\t\t( targetElementRect, indent ) => {\n\t\t\tif ( ! targetElement ) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\t// Default to assuming that the width of the drop indicator\n\t\t\t// should be the same as the target element.\n\t\t\tlet width = targetElement.offsetWidth;\n\n\t\t\t// In deeply nested lists, where a scrollbar is present,\n\t\t\t// the width of the drop indicator should be the width of\n\t\t\t// the scroll container, minus the distance from the left\n\t\t\t// edge of the scroll container to the left edge of the\n\t\t\t// target element.\n\t\t\tconst scrollContainer = getScrollContainer(\n\t\t\t\ttargetElement,\n\t\t\t\t'horizontal'\n\t\t\t);\n\n\t\t\tconst ownerDocument = targetElement.ownerDocument;\n\t\t\tconst windowScroll =\n\t\t\t\tscrollContainer === ownerDocument.body ||\n\t\t\t\tscrollContainer === ownerDocument.documentElement;\n\n\t\t\tif ( scrollContainer && ! windowScroll ) {\n\t\t\t\tconst scrollContainerRect =\n\t\t\t\t\tscrollContainer.getBoundingClientRect();\n\n\t\t\t\tconst distanceBetweenContainerAndTarget = isRTL()\n\t\t\t\t\t? scrollContainerRect.right - targetElementRect.right\n\t\t\t\t\t: targetElementRect.left - scrollContainerRect.left;\n\n\t\t\t\tconst scrollContainerWidth = scrollContainer.clientWidth;\n\n\t\t\t\tif (\n\t\t\t\t\tscrollContainerWidth <\n\t\t\t\t\twidth + distanceBetweenContainerAndTarget\n\t\t\t\t) {\n\t\t\t\t\twidth =\n\t\t\t\t\t\tscrollContainerWidth -\n\t\t\t\t\t\tdistanceBetweenContainerAndTarget;\n\t\t\t\t}\n\n\t\t\t\t// LTR logic for ensuring the drop indicator does not extend\n\t\t\t\t// beyond the right edge of the scroll container.\n\t\t\t\tif (\n\t\t\t\t\t! rtl &&\n\t\t\t\t\ttargetElementRect.left + indent < scrollContainerRect.left\n\t\t\t\t) {\n\t\t\t\t\twidth -= scrollContainerRect.left - targetElementRect.left;\n\t\t\t\t\treturn width;\n\t\t\t\t}\n\n\t\t\t\t// RTL logic for ensuring the drop indicator does not extend\n\t\t\t\t// beyond the right edge of the scroll container.\n\t\t\t\tif (\n\t\t\t\t\trtl &&\n\t\t\t\t\ttargetElementRect.right - indent > scrollContainerRect.right\n\t\t\t\t) {\n\t\t\t\t\twidth -=\n\t\t\t\t\t\ttargetElementRect.right - scrollContainerRect.right;\n\t\t\t\t\treturn width;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Subtract the indent from the final width of the indicator.\n\t\t\treturn width - indent;\n\t\t},\n\t\t[ rtl, targetElement ]\n\t);\n\n\tconst style = useMemo( () => {\n\t\tif ( ! targetElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst targetElementRect = targetElement.getBoundingClientRect();\n\t\tconst indent = getDropIndicatorIndent( targetElementRect );\n\n\t\treturn {\n\t\t\twidth: getDropIndicatorWidth( targetElementRect, indent ),\n\t\t};\n\t}, [ getDropIndicatorIndent, getDropIndicatorWidth, targetElement ] );\n\n\tconst popoverAnchor = useMemo( () => {\n\t\tconst isValidDropPosition =\n\t\t\tdropPosition === 'top' ||\n\t\t\tdropPosition === 'bottom' ||\n\t\t\tdropPosition === 'inside';\n\t\tif ( ! targetElement || ! isValidDropPosition ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn {\n\t\t\tcontextElement: targetElement,\n\t\t\tgetBoundingClientRect() {\n\t\t\t\tconst rect = targetElement.getBoundingClientRect();\n\t\t\t\tconst indent = getDropIndicatorIndent( rect );\n\t\t\t\t// In RTL languages, the drop indicator should be positioned\n\t\t\t\t// to the left of the target element, with the width of the\n\t\t\t\t// indicator determining the indent at the right edge of the\n\t\t\t\t// target element. In LTR languages, the drop indicator should\n\t\t\t\t// end at the right edge of the target element, with the indent\n\t\t\t\t// added to the position of the left edge of the target element.\n\t\t\t\tlet left = rtl ? rect.left : rect.left + indent;\n\t\t\t\tlet top = 0;\n\t\t\t\tlet bottom = 0;\n\n\t\t\t\t// In deeply nested lists, where a scrollbar is present,\n\t\t\t\t// the width of the drop indicator should be the width of\n\t\t\t\t// the visible area of the scroll container. Additionally,\n\t\t\t\t// the left edge of the drop indicator line needs to be\n\t\t\t\t// offset by the distance the left edge of the target element\n\t\t\t\t// and the left edge of the scroll container. The ensures\n\t\t\t\t// that the drop indicator position never breaks out of the\n\t\t\t\t// visible area of the scroll container.\n\t\t\t\tconst scrollContainer = getScrollContainer(\n\t\t\t\t\ttargetElement,\n\t\t\t\t\t'horizontal'\n\t\t\t\t);\n\n\t\t\t\tconst doc = targetElement.ownerDocument;\n\t\t\t\tconst windowScroll =\n\t\t\t\t\tscrollContainer === doc.body ||\n\t\t\t\t\tscrollContainer === doc.documentElement;\n\n\t\t\t\t// If the scroll container is not the window, offset the left position, if need be.\n\t\t\t\tif ( scrollContainer && ! windowScroll ) {\n\t\t\t\t\tconst scrollContainerRect =\n\t\t\t\t\t\tscrollContainer.getBoundingClientRect();\n\n\t\t\t\t\t// In RTL languages, a vertical scrollbar is present on the\n\t\t\t\t\t// left edge of the scroll container. The width of the\n\t\t\t\t\t// scrollbar needs to be accounted for when positioning the\n\t\t\t\t\t// drop indicator.\n\t\t\t\t\tconst scrollbarWidth = rtl\n\t\t\t\t\t\t? scrollContainer.offsetWidth -\n\t\t\t\t\t\t  scrollContainer.clientWidth\n\t\t\t\t\t\t: 0;\n\n\t\t\t\t\tif ( left < scrollContainerRect.left + scrollbarWidth ) {\n\t\t\t\t\t\tleft = scrollContainerRect.left + scrollbarWidth;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif ( dropPosition === 'top' ) {\n\t\t\t\t\ttop = rect.top;\n\t\t\t\t\tbottom = rect.top;\n\t\t\t\t} else {\n\t\t\t\t\t// `dropPosition` is either `bottom` or `inside`\n\t\t\t\t\ttop = rect.bottom;\n\t\t\t\t\tbottom = rect.bottom;\n\t\t\t\t}\n\n\t\t\t\tconst width = getDropIndicatorWidth( rect, indent );\n\t\t\t\tconst height = bottom - top;\n\n\t\t\t\treturn new window.DOMRect( left, top, width, height );\n\t\t\t},\n\t\t};\n\t}, [\n\t\ttargetElement,\n\t\tdropPosition,\n\t\tgetDropIndicatorIndent,\n\t\tgetDropIndicatorWidth,\n\t\trtl,\n\t] );\n\n\tif ( ! targetElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Popover\n\t\t\tanimate={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tfocusOnMount={ false }\n\t\t\tclassName=\"block-editor-list-view-drop-indicator\"\n\t\t\tvariant=\"unstyled\"\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={ style }\n\t\t\t\tclassName=\"block-editor-list-view-drop-indicator__line\"\n\t\t\t/>\n\t\t</Popover>\n\t);\n}\n"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ListViewExpander;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _icons = require("@wordpress/icons");
 var _i18n = require("@wordpress/i18n");
 /**
@@ -24,14 +24,14 @@ function ListViewExpander({
     // For the current tree grid implementation, please do not try to make this a button.
     //
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    (0, _element.createElement)("span", {
+    (0, _react.createElement)("span", {
       className: "block-editor-list-view__expander",
       onClick: event => onClick(event, {
         forceToggle: true
       }),
       "aria-hidden": "true",
       "data-testid": "list-view-expander"
-    }, (0, _element.createElement)(_icons.Icon, {
+    }, (0, _react.createElement)(_icons.Icon, {
       icon: (0, _i18n.isRTL)() ? _icons.chevronLeftSmall : _icons.chevronRightSmall
     }))
   );

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

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","_i18n","ListViewExpander","onClick","_element","createElement","className","event","forceToggle","Icon","icon","isRTL","chevronLeftSmall","chevronRightSmall"],"sources":["@wordpress/block-editor/src/components/list-view/expander.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';\nimport { isRTL } from '@wordpress/i18n';\n\nexport default function ListViewExpander( { onClick } ) {\n\treturn (\n\t\t// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js\n\t\t//\n\t\t// The expander component is implemented as a pseudo element in the w3 example\n\t\t// https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html\n\t\t//\n\t\t// We've mimicked this by adding an icon with aria-hidden set to true to hide this from the accessibility tree.\n\t\t// For the current tree grid implementation, please do not try to make this a button.\n\t\t//\n\t\t// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n\t\t<span\n\t\t\tclassName=\"block-editor-list-view__expander\"\n\t\t\tonClick={ ( event ) => onClick( event, { forceToggle: true } ) }\n\t\t\taria-hidden=\"true\"\n\t\t\tdata-testid=\"list-view-expander\"\n\t\t>\n\t\t\t<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIe,SAASE,gBAAgBA,CAAE;EAAEC;AAAQ,CAAC,EAAG;EACvD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAAC,QAAA,CAAAC,aAAA;MACCC,SAAS,EAAC,kCAAkC;MAC5CH,OAAO,EAAKI,KAAK,IAAMJ,OAAO,CAAEI,KAAK,EAAE;QAAEC,WAAW,EAAE;MAAK,CAAE,CAAG;MAChE,eAAY,MAAM;MAClB,eAAY;IAAoB,GAEhC,IAAAJ,QAAA,CAAAC,aAAA,EAACN,MAAA,CAAAU,IAAI;MAACC,IAAI,EAAG,IAAAC,WAAK,EAAC,CAAC,GAAGC,uBAAgB,GAAGC;IAAmB,CAAE,CAC1D;EAAC;AAET"}
+{"version":3,"names":["_icons","require","_i18n","ListViewExpander","onClick","_react","createElement","className","event","forceToggle","Icon","icon","isRTL","chevronLeftSmall","chevronRightSmall"],"sources":["@wordpress/block-editor/src/components/list-view/expander.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { chevronRightSmall, chevronLeftSmall, Icon } from '@wordpress/icons';\nimport { isRTL } from '@wordpress/i18n';\n\nexport default function ListViewExpander( { onClick } ) {\n\treturn (\n\t\t// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js\n\t\t//\n\t\t// The expander component is implemented as a pseudo element in the w3 example\n\t\t// https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html\n\t\t//\n\t\t// We've mimicked this by adding an icon with aria-hidden set to true to hide this from the accessibility tree.\n\t\t// For the current tree grid implementation, please do not try to make this a button.\n\t\t//\n\t\t// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n\t\t<span\n\t\t\tclassName=\"block-editor-list-view__expander\"\n\t\t\tonClick={ ( event ) => onClick( event, { forceToggle: true } ) }\n\t\t\taria-hidden=\"true\"\n\t\t\tdata-testid=\"list-view-expander\"\n\t\t>\n\t\t\t<Icon icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } />\n\t\t</span>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIe,SAASE,gBAAgBA,CAAE;EAAEC;AAAQ,CAAC,EAAG;EACvD;IACC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAAC,MAAA,CAAAC,aAAA;MACCC,SAAS,EAAC,kCAAkC;MAC5CH,OAAO,EAAKI,KAAK,IAAMJ,OAAO,CAAEI,KAAK,EAAE;QAAEC,WAAW,EAAE;MAAK,CAAE,CAAG;MAChE,eAAY,MAAM;MAClB,eAAY;IAAoB,GAEhC,IAAAJ,MAAA,CAAAC,aAAA,EAACN,MAAA,CAAAU,IAAI;MAACC,IAAI,EAAG,IAAAC,WAAK,EAAC,CAAC,GAAGC,uBAAgB,GAAGC;IAAmB,CAAE,CAC1D;EAAC;AAET"}

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

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PrivateListView = exports.BLOCK_LIST_ITEM_HEIGHT = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _compose = require("@wordpress/compose");
 var _components = require("@wordpress/components");
 var _data = require("@wordpress/data");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
+var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _branch = _interopRequireDefault(require("./branch"));
 var _context = require("./context");
@@ -20,6 +21,7 @@ var _useListViewDropZone = _interopRequireDefault(require("./use-list-view-drop-
 var _useListViewExpandSelectedItem = _interopRequireDefault(require("./use-list-view-expand-selected-item"));
 var _store = require("../../store");
 var _blockSettingsDropdown = require("../block-settings-menu/block-settings-dropdown");
+var _utils = require("./utils");
 /**
  * WordPress dependencies
  */
@@ -122,7 +124,6 @@ function ListViewComponent({
   });
   const elementRef = (0, _element.useRef)();
   const treeGridRef = (0, _compose.useMergeRefs)([elementRef, dropZoneRef, ref]);
-  const isMounted = (0, _element.useRef)(false);
   const [insertedBlock, setInsertedBlock] = (0, _element.useState)(null);
   const {
     setSelectedTreeId
@@ -144,7 +145,13 @@ function ListViewComponent({
     }
   }, [setSelectedTreeId, updateBlockSelection, onSelect, getBlock]);
   (0, _element.useEffect)(() => {
-    isMounted.current = true;
+    // If a blocks are already selected when the list view is initially
+    // mounted, shift focus to the first selected block.
+    if (selectedClientIds?.length) {
+      (0, _utils.focusListItem)(selectedClientIds[0], elementRef);
+    }
+    // Disable reason: Only focus on the selected item when the list view is mounted.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const expand = (0, _element.useCallback)(clientId => {
     if (!clientId) {
@@ -176,7 +183,6 @@ function ListViewComponent({
     }
   }, [updateBlockSelection]);
   const contextValue = (0, _element.useMemo)(() => ({
-    isTreeGridMounted: isMounted.current,
     draggedClientIds,
     expandedState,
     expand,
@@ -207,12 +213,12 @@ function ListViewComponent({
   if (!clientIdsTree.length && !showAppender) {
     return null;
   }
-  return (0, _element.createElement)(_data.AsyncModeProvider, {
+  return (0, _react.createElement)(_data.AsyncModeProvider, {
     value: true
-  }, (0, _element.createElement)(_dropIndicator.default, {
+  }, (0, _react.createElement)(_dropIndicator.default, {
     listViewRef: elementRef,
     blockDropTarget: blockDropTarget
-  }), (0, _element.createElement)(_components.__experimentalTreeGrid, {
+  }), (0, _react.createElement)(_components.__experimentalTreeGrid, {
     id: id,
     className: "block-editor-list-view-tree",
     "aria-label": (0, _i18n.__)('Block navigation structure'),
@@ -224,9 +230,9 @@ function ListViewComponent({
     // eslint-disable-next-line jsx-a11y/aria-props
     ,
     "aria-description": description
-  }, (0, _element.createElement)(_context.ListViewContext.Provider, {
+  }, (0, _react.createElement)(_context.ListViewContext.Provider, {
     value: contextValue
-  }, (0, _element.createElement)(_branch.default, {
+  }, (0, _react.createElement)(_branch.default, {
     blocks: clientIdsTree,
     parentId: rootClientId,
     selectBlock: selectEditorBlock,
@@ -247,7 +253,7 @@ const PrivateListView = (0, _element.forwardRef)(ListViewComponent);
 // We wrap the PrivateListView component to hide some props from the public API.
 exports.PrivateListView = PrivateListView;
 var _default = (0, _element.forwardRef)((props, ref) => {
-  return (0, _element.createElement)(PrivateListView, {
+  return (0, _react.createElement)(PrivateListView, {
     ref: ref,
     ...props,
     showAppender: false,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_components","_data","_deprecated","_interopRequireDefault","_i18n","_branch","_context","_dropIndicator","_useBlockSelection","_useListViewClientIds","_useListViewDropZone","_useListViewExpandSelectedItem","_store","_blockSettingsDropdown","expanded","state","action","Array","isArray","clientIds","reduce","newState","id","type","BLOCK_LIST_ITEM_HEIGHT","exports","ListViewComponent","blocks","dropZoneElement","showBlockMovers","isExpanded","showAppender","blockSettingsMenu","BlockSettingsMenu","BlockSettingsDropdown","rootClientId","description","onSelect","additionalBlockContent","AdditionalBlockContent","ref","deprecated","since","alternative","instanceId","useInstanceId","clientIdsTree","draggedClientIds","selectedClientIds","useListViewClientIds","getBlock","useSelect","blockEditorStore","visibleBlockCount","shouldShowInnerBlocks","select","getGlobalBlockCount","getClientIdsOfDescendants","__unstableGetEditorMode","draggedBlockCount","length","updateBlockSelection","useBlockSelection","expandedState","setExpandedState","useReducer","dropZoneRef","target","blockDropTarget","useListViewDropZone","elementRef","useRef","treeGridRef","useMergeRefs","isMounted","insertedBlock","setInsertedBlock","useState","setSelectedTreeId","useListViewExpandSelectedItem","firstSelectedBlockClientId","selectEditorBlock","useCallback","event","blockClientId","focusPosition","useEffect","current","expand","clientId","collapse","expandRow","row","dataset","block","collapseRow","focusRow","startRow","endRow","shiftKey","contextValue","useMemo","isTreeGridMounted","listViewInstanceId","treeGridElementRef","fixedListWindow","useFixedWindowList","useWindowing","windowOverscan","createElement","AsyncModeProvider","value","default","listViewRef","__experimentalTreeGrid","className","__","onCollapseRow","onExpandRow","onFocusRow","applicationAriaLabel","ListViewContext","Provider","parentId","selectBlock","PrivateListView","forwardRef","_default","props","undefined"],"sources":["@wordpress/block-editor/src/components/list-view/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseInstanceId,\n\tuseMergeRefs,\n\t__experimentalUseFixedWindowList as useFixedWindowList,\n} from '@wordpress/compose';\nimport { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';\nimport { AsyncModeProvider, useSelect } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseReducer,\n\tforwardRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ListViewBranch from './branch';\nimport { ListViewContext } from './context';\nimport ListViewDropIndicator from './drop-indicator';\nimport useBlockSelection from './use-block-selection';\nimport useListViewClientIds from './use-list-view-client-ids';\nimport useListViewDropZone from './use-list-view-drop-zone';\nimport useListViewExpandSelectedItem from './use-list-view-expand-selected-item';\nimport { store as blockEditorStore } from '../../store';\nimport { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';\n\nconst expanded = ( state, action ) => {\n\tif ( Array.isArray( action.clientIds ) ) {\n\t\treturn {\n\t\t\t...state,\n\t\t\t...action.clientIds.reduce(\n\t\t\t\t( newState, id ) => ( {\n\t\t\t\t\t...newState,\n\t\t\t\t\t[ id ]: action.type === 'expand',\n\t\t\t\t} ),\n\t\t\t\t{}\n\t\t\t),\n\t\t};\n\t}\n\treturn state;\n};\n\nexport const BLOCK_LIST_ITEM_HEIGHT = 36;\n\n/** @typedef {import('react').ComponentType} ComponentType */\n/** @typedef {import('react').Ref<HTMLElement>} Ref */\n\n/**\n * Show a hierarchical list of blocks.\n *\n * @param {Object}         props                        Components props.\n * @param {string}         props.id                     An HTML element id for the root element of ListView.\n * @param {Array}          props.blocks                 _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.\n * @param {?HTMLElement}   props.dropZoneElement        Optional element to be used as the drop zone.\n * @param {?boolean}       props.showBlockMovers        Flag to enable block movers. Defaults to `false`.\n * @param {?boolean}       props.isExpanded             Flag to determine whether nested levels are expanded by default. Defaults to `false`.\n * @param {?boolean}       props.showAppender           Flag to show or hide the block appender. Defaults to `false`.\n * @param {?ComponentType} props.blockSettingsMenu      Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.\n * @param {string}         props.rootClientId           The client id of the root block from which we determine the blocks to show in the list.\n * @param {string}         props.description            Optional accessible description for the tree grid component.\n * @param {?Function}      props.onSelect               Optional callback to be invoked when a block is selected. Receives the block object that was selected.\n * @param {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.\n * @param {Ref}            ref                          Forwarded ref\n */\nfunction ListViewComponent(\n\t{\n\t\tid,\n\t\tblocks,\n\t\tdropZoneElement,\n\t\tshowBlockMovers = false,\n\t\tisExpanded = false,\n\t\tshowAppender = false,\n\t\tblockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,\n\t\trootClientId,\n\t\tdescription,\n\t\tonSelect,\n\t\tadditionalBlockContent: AdditionalBlockContent,\n\t},\n\tref\n) {\n\t// This can be removed once we no longer need to support the blocks prop.\n\tif ( blocks ) {\n\t\tdeprecated(\n\t\t\t'`blocks` property in `wp.blockEditor.__experimentalListView`',\n\t\t\t{\n\t\t\t\tsince: '6.3',\n\t\t\t\talternative: '`rootClientId` property',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst instanceId = useInstanceId( ListViewComponent );\n\tconst { clientIdsTree, draggedClientIds, selectedClientIds } =\n\t\tuseListViewClientIds( { blocks, rootClientId } );\n\n\tconst { getBlock } = useSelect( blockEditorStore );\n\tconst { visibleBlockCount, shouldShowInnerBlocks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetGlobalBlockCount,\n\t\t\t\tgetClientIdsOfDescendants,\n\t\t\t\t__unstableGetEditorMode,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst draggedBlockCount =\n\t\t\t\tdraggedClientIds?.length > 0\n\t\t\t\t\t? getClientIdsOfDescendants( draggedClientIds ).length + 1\n\t\t\t\t\t: 0;\n\t\t\treturn {\n\t\t\t\tvisibleBlockCount: getGlobalBlockCount() - draggedBlockCount,\n\t\t\t\tshouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',\n\t\t\t};\n\t\t},\n\t\t[ draggedClientIds ]\n\t);\n\n\tconst { updateBlockSelection } = useBlockSelection();\n\n\tconst [ expandedState, setExpandedState ] = useReducer( expanded, {} );\n\n\tconst { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone( {\n\t\tdropZoneElement,\n\t} );\n\tconst elementRef = useRef();\n\tconst treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );\n\n\tconst isMounted = useRef( false );\n\n\tconst [ insertedBlock, setInsertedBlock ] = useState( null );\n\n\tconst { setSelectedTreeId } = useListViewExpandSelectedItem( {\n\t\tfirstSelectedBlockClientId: selectedClientIds[ 0 ],\n\t\tsetExpandedState,\n\t} );\n\tconst selectEditorBlock = useCallback(\n\t\t/**\n\t\t * @param {MouseEvent | KeyboardEvent | undefined} event\n\t\t * @param {string}                                 blockClientId\n\t\t * @param {null | undefined | -1 | 1}              focusPosition\n\t\t */\n\t\t( event, blockClientId, focusPosition ) => {\n\t\t\tupdateBlockSelection( event, blockClientId, null, focusPosition );\n\t\t\tsetSelectedTreeId( blockClientId );\n\t\t\tif ( onSelect ) {\n\t\t\t\tonSelect( getBlock( blockClientId ) );\n\t\t\t}\n\t\t},\n\t\t[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]\n\t);\n\tuseEffect( () => {\n\t\tisMounted.current = true;\n\t}, [] );\n\n\tconst expand = useCallback(\n\t\t( clientId ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetExpandedState( { type: 'expand', clientIds: [ clientId ] } );\n\t\t},\n\t\t[ setExpandedState ]\n\t);\n\tconst collapse = useCallback(\n\t\t( clientId ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetExpandedState( { type: 'collapse', clientIds: [ clientId ] } );\n\t\t},\n\t\t[ setExpandedState ]\n\t);\n\tconst expandRow = useCallback(\n\t\t( row ) => {\n\t\t\texpand( row?.dataset?.block );\n\t\t},\n\t\t[ expand ]\n\t);\n\tconst collapseRow = useCallback(\n\t\t( row ) => {\n\t\t\tcollapse( row?.dataset?.block );\n\t\t},\n\t\t[ collapse ]\n\t);\n\tconst focusRow = useCallback(\n\t\t( event, startRow, endRow ) => {\n\t\t\tif ( event.shiftKey ) {\n\t\t\t\tupdateBlockSelection(\n\t\t\t\t\tevent,\n\t\t\t\t\tstartRow?.dataset?.block,\n\t\t\t\t\tendRow?.dataset?.block\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ updateBlockSelection ]\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tisTreeGridMounted: isMounted.current,\n\t\t\tdraggedClientIds,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tcollapse,\n\t\t\tBlockSettingsMenu,\n\t\t\tlistViewInstanceId: instanceId,\n\t\t\tAdditionalBlockContent,\n\t\t\tinsertedBlock,\n\t\t\tsetInsertedBlock,\n\t\t\ttreeGridElementRef: elementRef,\n\t\t} ),\n\t\t[\n\t\t\tdraggedClientIds,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tcollapse,\n\t\t\tBlockSettingsMenu,\n\t\t\tinstanceId,\n\t\t\tAdditionalBlockContent,\n\t\t\tinsertedBlock,\n\t\t\tsetInsertedBlock,\n\t\t]\n\t);\n\n\t// List View renders a fixed number of items and relies on each having a fixed item height of 36px.\n\t// If this value changes, we should also change the itemHeight value set in useFixedWindowList.\n\t// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.\n\tconst [ fixedListWindow ] = useFixedWindowList(\n\t\telementRef,\n\t\tBLOCK_LIST_ITEM_HEIGHT,\n\t\tvisibleBlockCount,\n\t\t{\n\t\t\t// Ensure that the windowing logic is recalculated when the expanded state changes.\n\t\t\t// This is necessary because expanding a collapsed block in a short list view can\n\t\t\t// switch the list view to a tall list view with a scrollbar, and vice versa.\n\t\t\t// When this happens, the windowing logic needs to be recalculated to ensure that\n\t\t\t// the correct number of blocks are rendered, by rechecking for a scroll container.\n\t\t\texpandedState,\n\t\t\tuseWindowing: true,\n\t\t\twindowOverscan: 40,\n\t\t}\n\t);\n\n\t// If there are no blocks to show and we're not showing the appender, do not render the list view.\n\tif ( ! clientIdsTree.length && ! showAppender ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<AsyncModeProvider value={ true }>\n\t\t\t<ListViewDropIndicator\n\t\t\t\tlistViewRef={ elementRef }\n\t\t\t\tblockDropTarget={ blockDropTarget }\n\t\t\t/>\n\t\t\t<TreeGrid\n\t\t\t\tid={ id }\n\t\t\t\tclassName=\"block-editor-list-view-tree\"\n\t\t\t\taria-label={ __( 'Block navigation structure' ) }\n\t\t\t\tref={ treeGridRef }\n\t\t\t\tonCollapseRow={ collapseRow }\n\t\t\t\tonExpandRow={ expandRow }\n\t\t\t\tonFocusRow={ focusRow }\n\t\t\t\tapplicationAriaLabel={ __( 'Block navigation structure' ) }\n\t\t\t\t// eslint-disable-next-line jsx-a11y/aria-props\n\t\t\t\taria-description={ description }\n\t\t\t>\n\t\t\t\t<ListViewContext.Provider value={ contextValue }>\n\t\t\t\t\t<ListViewBranch\n\t\t\t\t\t\tblocks={ clientIdsTree }\n\t\t\t\t\t\tparentId={ rootClientId }\n\t\t\t\t\t\tselectBlock={ selectEditorBlock }\n\t\t\t\t\t\tshowBlockMovers={ showBlockMovers }\n\t\t\t\t\t\tfixedListWindow={ fixedListWindow }\n\t\t\t\t\t\tselectedClientIds={ selectedClientIds }\n\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\tshouldShowInnerBlocks={ shouldShowInnerBlocks }\n\t\t\t\t\t\tshowAppender={ showAppender }\n\t\t\t\t\t/>\n\t\t\t\t</ListViewContext.Provider>\n\t\t\t</TreeGrid>\n\t\t</AsyncModeProvider>\n\t);\n}\n\n// This is the private API for the ListView component.\n// It allows access to all props, not just the public ones.\nexport const PrivateListView = forwardRef( ListViewComponent );\n\n// This is the public API for the ListView component.\n// We wrap the PrivateListView component to hide some props from the public API.\nexport default forwardRef( ( props, ref ) => {\n\treturn (\n\t\t<PrivateListView\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\tshowAppender={ false }\n\t\t\trootClientId={ null }\n\t\t\tonSelect={ null }\n\t\t\tadditionalBlockContent={ null }\n\t\t\tblockSettingsMenu={ undefined }\n\t\t/>\n\t);\n} );\n"],"mappings":"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"}
+{"version":3,"names":["_compose","require","_components","_data","_deprecated","_interopRequireDefault","_element","_i18n","_branch","_context","_dropIndicator","_useBlockSelection","_useListViewClientIds","_useListViewDropZone","_useListViewExpandSelectedItem","_store","_blockSettingsDropdown","_utils","expanded","state","action","Array","isArray","clientIds","reduce","newState","id","type","BLOCK_LIST_ITEM_HEIGHT","exports","ListViewComponent","blocks","dropZoneElement","showBlockMovers","isExpanded","showAppender","blockSettingsMenu","BlockSettingsMenu","BlockSettingsDropdown","rootClientId","description","onSelect","additionalBlockContent","AdditionalBlockContent","ref","deprecated","since","alternative","instanceId","useInstanceId","clientIdsTree","draggedClientIds","selectedClientIds","useListViewClientIds","getBlock","useSelect","blockEditorStore","visibleBlockCount","shouldShowInnerBlocks","select","getGlobalBlockCount","getClientIdsOfDescendants","__unstableGetEditorMode","draggedBlockCount","length","updateBlockSelection","useBlockSelection","expandedState","setExpandedState","useReducer","dropZoneRef","target","blockDropTarget","useListViewDropZone","elementRef","useRef","treeGridRef","useMergeRefs","insertedBlock","setInsertedBlock","useState","setSelectedTreeId","useListViewExpandSelectedItem","firstSelectedBlockClientId","selectEditorBlock","useCallback","event","blockClientId","focusPosition","useEffect","focusListItem","expand","clientId","collapse","expandRow","row","dataset","block","collapseRow","focusRow","startRow","endRow","shiftKey","contextValue","useMemo","listViewInstanceId","treeGridElementRef","fixedListWindow","useFixedWindowList","useWindowing","windowOverscan","_react","createElement","AsyncModeProvider","value","default","listViewRef","__experimentalTreeGrid","className","__","onCollapseRow","onExpandRow","onFocusRow","applicationAriaLabel","ListViewContext","Provider","parentId","selectBlock","PrivateListView","forwardRef","_default","props","undefined"],"sources":["@wordpress/block-editor/src/components/list-view/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseInstanceId,\n\tuseMergeRefs,\n\t__experimentalUseFixedWindowList as useFixedWindowList,\n} from '@wordpress/compose';\nimport { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';\nimport { AsyncModeProvider, useSelect } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseReducer,\n\tforwardRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ListViewBranch from './branch';\nimport { ListViewContext } from './context';\nimport ListViewDropIndicator from './drop-indicator';\nimport useBlockSelection from './use-block-selection';\nimport useListViewClientIds from './use-list-view-client-ids';\nimport useListViewDropZone from './use-list-view-drop-zone';\nimport useListViewExpandSelectedItem from './use-list-view-expand-selected-item';\nimport { store as blockEditorStore } from '../../store';\nimport { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';\nimport { focusListItem } from './utils';\n\nconst expanded = ( state, action ) => {\n\tif ( Array.isArray( action.clientIds ) ) {\n\t\treturn {\n\t\t\t...state,\n\t\t\t...action.clientIds.reduce(\n\t\t\t\t( newState, id ) => ( {\n\t\t\t\t\t...newState,\n\t\t\t\t\t[ id ]: action.type === 'expand',\n\t\t\t\t} ),\n\t\t\t\t{}\n\t\t\t),\n\t\t};\n\t}\n\treturn state;\n};\n\nexport const BLOCK_LIST_ITEM_HEIGHT = 36;\n\n/** @typedef {import('react').ComponentType} ComponentType */\n/** @typedef {import('react').Ref<HTMLElement>} Ref */\n\n/**\n * Show a hierarchical list of blocks.\n *\n * @param {Object}         props                        Components props.\n * @param {string}         props.id                     An HTML element id for the root element of ListView.\n * @param {Array}          props.blocks                 _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.\n * @param {?HTMLElement}   props.dropZoneElement        Optional element to be used as the drop zone.\n * @param {?boolean}       props.showBlockMovers        Flag to enable block movers. Defaults to `false`.\n * @param {?boolean}       props.isExpanded             Flag to determine whether nested levels are expanded by default. Defaults to `false`.\n * @param {?boolean}       props.showAppender           Flag to show or hide the block appender. Defaults to `false`.\n * @param {?ComponentType} props.blockSettingsMenu      Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.\n * @param {string}         props.rootClientId           The client id of the root block from which we determine the blocks to show in the list.\n * @param {string}         props.description            Optional accessible description for the tree grid component.\n * @param {?Function}      props.onSelect               Optional callback to be invoked when a block is selected. Receives the block object that was selected.\n * @param {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.\n * @param {Ref}            ref                          Forwarded ref\n */\nfunction ListViewComponent(\n\t{\n\t\tid,\n\t\tblocks,\n\t\tdropZoneElement,\n\t\tshowBlockMovers = false,\n\t\tisExpanded = false,\n\t\tshowAppender = false,\n\t\tblockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,\n\t\trootClientId,\n\t\tdescription,\n\t\tonSelect,\n\t\tadditionalBlockContent: AdditionalBlockContent,\n\t},\n\tref\n) {\n\t// This can be removed once we no longer need to support the blocks prop.\n\tif ( blocks ) {\n\t\tdeprecated(\n\t\t\t'`blocks` property in `wp.blockEditor.__experimentalListView`',\n\t\t\t{\n\t\t\t\tsince: '6.3',\n\t\t\t\talternative: '`rootClientId` property',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst instanceId = useInstanceId( ListViewComponent );\n\tconst { clientIdsTree, draggedClientIds, selectedClientIds } =\n\t\tuseListViewClientIds( { blocks, rootClientId } );\n\n\tconst { getBlock } = useSelect( blockEditorStore );\n\tconst { visibleBlockCount, shouldShowInnerBlocks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetGlobalBlockCount,\n\t\t\t\tgetClientIdsOfDescendants,\n\t\t\t\t__unstableGetEditorMode,\n\t\t\t} = select( blockEditorStore );\n\t\t\tconst draggedBlockCount =\n\t\t\t\tdraggedClientIds?.length > 0\n\t\t\t\t\t? getClientIdsOfDescendants( draggedClientIds ).length + 1\n\t\t\t\t\t: 0;\n\t\t\treturn {\n\t\t\t\tvisibleBlockCount: getGlobalBlockCount() - draggedBlockCount,\n\t\t\t\tshouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',\n\t\t\t};\n\t\t},\n\t\t[ draggedClientIds ]\n\t);\n\n\tconst { updateBlockSelection } = useBlockSelection();\n\n\tconst [ expandedState, setExpandedState ] = useReducer( expanded, {} );\n\n\tconst { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone( {\n\t\tdropZoneElement,\n\t} );\n\tconst elementRef = useRef();\n\tconst treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );\n\n\tconst [ insertedBlock, setInsertedBlock ] = useState( null );\n\n\tconst { setSelectedTreeId } = useListViewExpandSelectedItem( {\n\t\tfirstSelectedBlockClientId: selectedClientIds[ 0 ],\n\t\tsetExpandedState,\n\t} );\n\tconst selectEditorBlock = useCallback(\n\t\t/**\n\t\t * @param {MouseEvent | KeyboardEvent | undefined} event\n\t\t * @param {string}                                 blockClientId\n\t\t * @param {null | undefined | -1 | 1}              focusPosition\n\t\t */\n\t\t( event, blockClientId, focusPosition ) => {\n\t\t\tupdateBlockSelection( event, blockClientId, null, focusPosition );\n\t\t\tsetSelectedTreeId( blockClientId );\n\t\t\tif ( onSelect ) {\n\t\t\t\tonSelect( getBlock( blockClientId ) );\n\t\t\t}\n\t\t},\n\t\t[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]\n\t);\n\tuseEffect( () => {\n\t\t// If a blocks are already selected when the list view is initially\n\t\t// mounted, shift focus to the first selected block.\n\t\tif ( selectedClientIds?.length ) {\n\t\t\tfocusListItem( selectedClientIds[ 0 ], elementRef );\n\t\t}\n\t\t// Disable reason: Only focus on the selected item when the list view is mounted.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tconst expand = useCallback(\n\t\t( clientId ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetExpandedState( { type: 'expand', clientIds: [ clientId ] } );\n\t\t},\n\t\t[ setExpandedState ]\n\t);\n\tconst collapse = useCallback(\n\t\t( clientId ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetExpandedState( { type: 'collapse', clientIds: [ clientId ] } );\n\t\t},\n\t\t[ setExpandedState ]\n\t);\n\tconst expandRow = useCallback(\n\t\t( row ) => {\n\t\t\texpand( row?.dataset?.block );\n\t\t},\n\t\t[ expand ]\n\t);\n\tconst collapseRow = useCallback(\n\t\t( row ) => {\n\t\t\tcollapse( row?.dataset?.block );\n\t\t},\n\t\t[ collapse ]\n\t);\n\tconst focusRow = useCallback(\n\t\t( event, startRow, endRow ) => {\n\t\t\tif ( event.shiftKey ) {\n\t\t\t\tupdateBlockSelection(\n\t\t\t\t\tevent,\n\t\t\t\t\tstartRow?.dataset?.block,\n\t\t\t\t\tendRow?.dataset?.block\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ updateBlockSelection ]\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tdraggedClientIds,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tcollapse,\n\t\t\tBlockSettingsMenu,\n\t\t\tlistViewInstanceId: instanceId,\n\t\t\tAdditionalBlockContent,\n\t\t\tinsertedBlock,\n\t\t\tsetInsertedBlock,\n\t\t\ttreeGridElementRef: elementRef,\n\t\t} ),\n\t\t[\n\t\t\tdraggedClientIds,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tcollapse,\n\t\t\tBlockSettingsMenu,\n\t\t\tinstanceId,\n\t\t\tAdditionalBlockContent,\n\t\t\tinsertedBlock,\n\t\t\tsetInsertedBlock,\n\t\t]\n\t);\n\n\t// List View renders a fixed number of items and relies on each having a fixed item height of 36px.\n\t// If this value changes, we should also change the itemHeight value set in useFixedWindowList.\n\t// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.\n\tconst [ fixedListWindow ] = useFixedWindowList(\n\t\telementRef,\n\t\tBLOCK_LIST_ITEM_HEIGHT,\n\t\tvisibleBlockCount,\n\t\t{\n\t\t\t// Ensure that the windowing logic is recalculated when the expanded state changes.\n\t\t\t// This is necessary because expanding a collapsed block in a short list view can\n\t\t\t// switch the list view to a tall list view with a scrollbar, and vice versa.\n\t\t\t// When this happens, the windowing logic needs to be recalculated to ensure that\n\t\t\t// the correct number of blocks are rendered, by rechecking for a scroll container.\n\t\t\texpandedState,\n\t\t\tuseWindowing: true,\n\t\t\twindowOverscan: 40,\n\t\t}\n\t);\n\n\t// If there are no blocks to show and we're not showing the appender, do not render the list view.\n\tif ( ! clientIdsTree.length && ! showAppender ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<AsyncModeProvider value={ true }>\n\t\t\t<ListViewDropIndicator\n\t\t\t\tlistViewRef={ elementRef }\n\t\t\t\tblockDropTarget={ blockDropTarget }\n\t\t\t/>\n\t\t\t<TreeGrid\n\t\t\t\tid={ id }\n\t\t\t\tclassName=\"block-editor-list-view-tree\"\n\t\t\t\taria-label={ __( 'Block navigation structure' ) }\n\t\t\t\tref={ treeGridRef }\n\t\t\t\tonCollapseRow={ collapseRow }\n\t\t\t\tonExpandRow={ expandRow }\n\t\t\t\tonFocusRow={ focusRow }\n\t\t\t\tapplicationAriaLabel={ __( 'Block navigation structure' ) }\n\t\t\t\t// eslint-disable-next-line jsx-a11y/aria-props\n\t\t\t\taria-description={ description }\n\t\t\t>\n\t\t\t\t<ListViewContext.Provider value={ contextValue }>\n\t\t\t\t\t<ListViewBranch\n\t\t\t\t\t\tblocks={ clientIdsTree }\n\t\t\t\t\t\tparentId={ rootClientId }\n\t\t\t\t\t\tselectBlock={ selectEditorBlock }\n\t\t\t\t\t\tshowBlockMovers={ showBlockMovers }\n\t\t\t\t\t\tfixedListWindow={ fixedListWindow }\n\t\t\t\t\t\tselectedClientIds={ selectedClientIds }\n\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\tshouldShowInnerBlocks={ shouldShowInnerBlocks }\n\t\t\t\t\t\tshowAppender={ showAppender }\n\t\t\t\t\t/>\n\t\t\t\t</ListViewContext.Provider>\n\t\t\t</TreeGrid>\n\t\t</AsyncModeProvider>\n\t);\n}\n\n// This is the private API for the ListView component.\n// It allows access to all props, not just the public ones.\nexport const PrivateListView = forwardRef( ListViewComponent );\n\n// This is the public API for the ListView component.\n// We wrap the PrivateListView component to hide some props from the public API.\nexport default forwardRef( ( props, ref ) => {\n\treturn (\n\t\t<PrivateListView\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\tshowAppender={ false }\n\t\t\trootClientId={ null }\n\t\t\tonSelect={ null }\n\t\t\tadditionalBlockContent={ null }\n\t\t\tblockSettingsMenu={ undefined }\n\t\t/>\n\t);\n} );\n"],"mappings":"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"}

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

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _web = require("@react-spring/web");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _useMovingAnimation = _interopRequireDefault(require("../use-moving-animation"));
 /**
  * External dependencies
@@ -41,7 +42,7 @@ const ListViewLeaf = (0, _element.forwardRef)(({
     triggerAnimationOnChange: path
   });
   const mergedRef = (0, _compose.useMergeRefs)([ref, animationRef]);
-  return (0, _element.createElement)(AnimatedTreeGridRow, {
+  return (0, _react.createElement)(AnimatedTreeGridRow, {
     ref: mergedRef,
     className: (0, _classnames.default)('block-editor-list-view-leaf', className),
     level: level,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_web","_classnames","_interopRequireDefault","_components","_compose","_useMovingAnimation","AnimatedTreeGridRow","animated","TreeGridRow","ListViewLeaf","forwardRef","isSelected","position","level","rowCount","children","className","path","props","ref","animationRef","useMovingAnimation","adjustScrolling","enableAnimation","triggerAnimationOnChange","mergedRef","useMergeRefs","createElement","classnames","positionInSet","setSize","isExpanded","undefined","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/list-view/leaf.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { animated } from '@react-spring/web';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMovingAnimation from '../use-moving-animation';\n\nconst AnimatedTreeGridRow = animated( TreeGridRow );\n\nconst ListViewLeaf = forwardRef(\n\t(\n\t\t{\n\t\t\tisSelected,\n\t\t\tposition,\n\t\t\tlevel,\n\t\t\trowCount,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tpath,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tconst animationRef = useMovingAnimation( {\n\t\t\tisSelected,\n\t\t\tadjustScrolling: false,\n\t\t\tenableAnimation: true,\n\t\t\ttriggerAnimationOnChange: path,\n\t\t} );\n\n\t\tconst mergedRef = useMergeRefs( [ ref, animationRef ] );\n\n\t\treturn (\n\t\t\t<AnimatedTreeGridRow\n\t\t\t\tref={ mergedRef }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'block-editor-list-view-leaf',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tlevel={ level }\n\t\t\t\tpositionInSet={ position }\n\t\t\t\tsetSize={ rowCount }\n\t\t\t\tisExpanded={ undefined }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</AnimatedTreeGridRow>\n\t\t);\n\t}\n);\n\nexport default ListViewLeaf;\n"],"mappings":";;;;;;;AAWA,IAAAA,QAAA,GAAAC,OAAA;AARA,IAAAC,IAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAC,sBAAA,CAAAH,OAAA;AAKA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAMA,IAAAM,mBAAA,GAAAH,sBAAA,CAAAH,OAAA;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;;AAGA,MAAMO,mBAAmB,GAAG,IAAAC,aAAQ,EAAEC,qCAAY,CAAC;AAEnD,MAAMC,YAAY,GAAG,IAAAC,mBAAU,EAC9B,CACC;EACCC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJ,GAAGC;AACJ,CAAC,EACDC,GAAG,KACC;EACJ,MAAMC,YAAY,GAAG,IAAAC,2BAAkB,EAAE;IACxCV,UAAU;IACVW,eAAe,EAAE,KAAK;IACtBC,eAAe,EAAE,IAAI;IACrBC,wBAAwB,EAAEP;EAC3B,CAAE,CAAC;EAEH,MAAMQ,SAAS,GAAG,IAAAC,qBAAY,EAAE,CAAEP,GAAG,EAAEC,YAAY,CAAG,CAAC;EAEvD,OACC,IAAAtB,QAAA,CAAA6B,aAAA,EAACrB,mBAAmB;IACnBa,GAAG,EAAGM,SAAW;IACjBT,SAAS,EAAG,IAAAY,mBAAU,EACrB,6BAA6B,EAC7BZ,SACD,CAAG;IACHH,KAAK,EAAGA,KAAO;IACfgB,aAAa,EAAGjB,QAAU;IAC1BkB,OAAO,EAAGhB,QAAU;IACpBiB,UAAU,EAAGC,SAAW;IAAA,GACnBd;EAAK,GAERH,QACkB,CAAC;AAExB,CACD,CAAC;AAAC,IAAAkB,QAAA,GAEaxB,YAAY;AAAAyB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_web","require","_classnames","_interopRequireDefault","_components","_compose","_element","_useMovingAnimation","AnimatedTreeGridRow","animated","TreeGridRow","ListViewLeaf","forwardRef","isSelected","position","level","rowCount","children","className","path","props","ref","animationRef","useMovingAnimation","adjustScrolling","enableAnimation","triggerAnimationOnChange","mergedRef","useMergeRefs","_react","createElement","classnames","positionInSet","setSize","isExpanded","undefined","_default","exports","default"],"sources":["@wordpress/block-editor/src/components/list-view/leaf.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { animated } from '@react-spring/web';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMovingAnimation from '../use-moving-animation';\n\nconst AnimatedTreeGridRow = animated( TreeGridRow );\n\nconst ListViewLeaf = forwardRef(\n\t(\n\t\t{\n\t\t\tisSelected,\n\t\t\tposition,\n\t\t\tlevel,\n\t\t\trowCount,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tpath,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tconst animationRef = useMovingAnimation( {\n\t\t\tisSelected,\n\t\t\tadjustScrolling: false,\n\t\t\tenableAnimation: true,\n\t\t\ttriggerAnimationOnChange: path,\n\t\t} );\n\n\t\tconst mergedRef = useMergeRefs( [ ref, animationRef ] );\n\n\t\treturn (\n\t\t\t<AnimatedTreeGridRow\n\t\t\t\tref={ mergedRef }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'block-editor-list-view-leaf',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tlevel={ level }\n\t\t\t\tpositionInSet={ position }\n\t\t\t\tsetSize={ rowCount }\n\t\t\t\tisExpanded={ undefined }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</AnimatedTreeGridRow>\n\t\t);\n\t}\n);\n\nexport default ListViewLeaf;\n"],"mappings":";;;;;;;;AAGA,IAAAA,IAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAKA,IAAAM,mBAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;;AAGA,MAAMO,mBAAmB,GAAG,IAAAC,aAAQ,EAAEC,qCAAY,CAAC;AAEnD,MAAMC,YAAY,GAAG,IAAAC,mBAAU,EAC9B,CACC;EACCC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJ,GAAGC;AACJ,CAAC,EACDC,GAAG,KACC;EACJ,MAAMC,YAAY,GAAG,IAAAC,2BAAkB,EAAE;IACxCV,UAAU;IACVW,eAAe,EAAE,KAAK;IACtBC,eAAe,EAAE,IAAI;IACrBC,wBAAwB,EAAEP;EAC3B,CAAE,CAAC;EAEH,MAAMQ,SAAS,GAAG,IAAAC,qBAAY,EAAE,CAAEP,GAAG,EAAEC,YAAY,CAAG,CAAC;EAEvD,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACtB,mBAAmB;IACnBa,GAAG,EAAGM,SAAW;IACjBT,SAAS,EAAG,IAAAa,mBAAU,EACrB,6BAA6B,EAC7Bb,SACD,CAAG;IACHH,KAAK,EAAGA,KAAO;IACfiB,aAAa,EAAGlB,QAAU;IAC1BmB,OAAO,EAAGjB,QAAU;IACpBkB,UAAU,EAAGC,SAAW;IAAA,GACnBf;EAAK,GAERH,QACkB,CAAC;AAExB,CACD,CAAC;AAAC,IAAAmB,QAAA,GAEazB,YAAY;AAAA0B,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

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

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.focusListItem = focusListItem;
 exports.getBlockPositionDescription = void 0;
 exports.getCommonDepthClientIds = getCommonDepthClientIds;
 exports.isClientIdSelected = void 0;
 var _i18n = require("@wordpress/i18n");
+var _dom = require("@wordpress/dom");
 /**
  * WordPress dependencies
  */
@@ -51,4 +53,37 @@ function getCommonDepthClientIds(startId, endId, startParents, endParents) {
     end
   };
 }
+
+/**
+ * Shift focus to the list view item associated with a particular clientId.
+ *
+ * @typedef {import('@wordpress/element').RefObject} RefObject
+ *
+ * @param {string}                 focusClientId      The client ID of the block to focus.
+ * @param {RefObject<HTMLElement>} treeGridElementRef The container element to search within.
+ */
+function focusListItem(focusClientId, treeGridElementRef) {
+  const getFocusElement = () => {
+    const row = treeGridElementRef.current?.querySelector(`[role=row][data-block="${focusClientId}"]`);
+    if (!row) return null;
+    // Focus the first focusable in the row, which is the ListViewBlockSelectButton.
+    return _dom.focus.focusable.find(row)[0];
+  };
+  let focusElement = getFocusElement();
+  if (focusElement) {
+    focusElement.focus();
+  } else {
+    // The element hasn't been painted yet. Defer focusing on the next frame.
+    // This could happen when all blocks have been deleted and the default block
+    // hasn't been added to the editor yet.
+    window.requestAnimationFrame(() => {
+      focusElement = getFocusElement();
+
+      // Ignore if the element still doesn't exist.
+      if (focusElement) {
+        focusElement.focus();
+      }
+    });
+  }
+}
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","getBlockPositionDescription","position","siblingCount","level","sprintf","__","exports","isClientIdSelected","clientId","selectedBlockClientIds","Array","isArray","length","indexOf","getCommonDepthClientIds","startId","endId","startParents","endParents","startPath","endPath","depth","Math","min","start","end"],"sources":["@wordpress/block-editor/src/components/list-view/utils.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\n\nexport const getBlockPositionDescription = ( position, siblingCount, level ) =>\n\tsprintf(\n\t\t/* translators: 1: The numerical position of the block. 2: The total number of blocks. 3. The level of nesting for the block. */\n\t\t__( 'Block %1$d of %2$d, Level %3$d' ),\n\t\tposition,\n\t\tsiblingCount,\n\t\tlevel\n\t);\n\n/**\n * Returns true if the client ID occurs within the block selection or multi-selection,\n * or false otherwise.\n *\n * @param {string}          clientId               Block client ID.\n * @param {string|string[]} selectedBlockClientIds Selected block client ID, or an array of multi-selected blocks client IDs.\n *\n * @return {boolean} Whether the block is in multi-selection set.\n */\nexport const isClientIdSelected = ( clientId, selectedBlockClientIds ) =>\n\tArray.isArray( selectedBlockClientIds ) && selectedBlockClientIds.length\n\t\t? selectedBlockClientIds.indexOf( clientId ) !== -1\n\t\t: selectedBlockClientIds === clientId;\n\n/**\n * From a start and end clientId of potentially different nesting levels,\n * return the nearest-depth ids that have a common level of depth in the\n * nesting hierarchy. For multiple block selection, this ensure that the\n * selection is always at the same nesting level, and not split across\n * separate levels.\n *\n * @param {string}   startId      The first id of a selection.\n * @param {string}   endId        The end id of a selection, usually one that has been clicked on.\n * @param {string[]} startParents An array of ancestor ids for the start id, in descending order.\n * @param {string[]} endParents   An array of ancestor ids for the end id, in descending order.\n * @return {Object} An object containing the start and end ids.\n */\nexport function getCommonDepthClientIds(\n\tstartId,\n\tendId,\n\tstartParents,\n\tendParents\n) {\n\tconst startPath = [ ...startParents, startId ];\n\tconst endPath = [ ...endParents, endId ];\n\tconst depth = Math.min( startPath.length, endPath.length ) - 1;\n\tconst start = startPath[ depth ];\n\tconst end = endPath[ depth ];\n\n\treturn {\n\t\tstart,\n\t\tend,\n\t};\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGO,MAAMC,2BAA2B,GAAGA,CAAEC,QAAQ,EAAEC,YAAY,EAAEC,KAAK,KACzE,IAAAC,aAAO,GACN;AACA,IAAAC,QAAE,EAAE,gCAAiC,CAAC,EACtCJ,QAAQ,EACRC,YAAY,EACZC,KACD,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARAG,OAAA,CAAAN,2BAAA,GAAAA,2BAAA;AASO,MAAMO,kBAAkB,GAAGA,CAAEC,QAAQ,EAAEC,sBAAsB,KACnEC,KAAK,CAACC,OAAO,CAAEF,sBAAuB,CAAC,IAAIA,sBAAsB,CAACG,MAAM,GACrEH,sBAAsB,CAACI,OAAO,CAAEL,QAAS,CAAC,KAAK,CAAC,CAAC,GACjDC,sBAAsB,KAAKD,QAAQ;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAZAF,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAaO,SAASO,uBAAuBA,CACtCC,OAAO,EACPC,KAAK,EACLC,YAAY,EACZC,UAAU,EACT;EACD,MAAMC,SAAS,GAAG,CAAE,GAAGF,YAAY,EAAEF,OAAO,CAAE;EAC9C,MAAMK,OAAO,GAAG,CAAE,GAAGF,UAAU,EAAEF,KAAK,CAAE;EACxC,MAAMK,KAAK,GAAGC,IAAI,CAACC,GAAG,CAAEJ,SAAS,CAACP,MAAM,EAAEQ,OAAO,CAACR,MAAO,CAAC,GAAG,CAAC;EAC9D,MAAMY,KAAK,GAAGL,SAAS,CAAEE,KAAK,CAAE;EAChC,MAAMI,GAAG,GAAGL,OAAO,CAAEC,KAAK,CAAE;EAE5B,OAAO;IACNG,KAAK;IACLC;EACD,CAAC;AACF"}
+{"version":3,"names":["_i18n","require","_dom","getBlockPositionDescription","position","siblingCount","level","sprintf","__","exports","isClientIdSelected","clientId","selectedBlockClientIds","Array","isArray","length","indexOf","getCommonDepthClientIds","startId","endId","startParents","endParents","startPath","endPath","depth","Math","min","start","end","focusListItem","focusClientId","treeGridElementRef","getFocusElement","row","current","querySelector","focus","focusable","find","focusElement","window","requestAnimationFrame"],"sources":["@wordpress/block-editor/src/components/list-view/utils.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { focus } from '@wordpress/dom';\n\nexport const getBlockPositionDescription = ( position, siblingCount, level ) =>\n\tsprintf(\n\t\t/* translators: 1: The numerical position of the block. 2: The total number of blocks. 3. The level of nesting for the block. */\n\t\t__( 'Block %1$d of %2$d, Level %3$d' ),\n\t\tposition,\n\t\tsiblingCount,\n\t\tlevel\n\t);\n\n/**\n * Returns true if the client ID occurs within the block selection or multi-selection,\n * or false otherwise.\n *\n * @param {string}          clientId               Block client ID.\n * @param {string|string[]} selectedBlockClientIds Selected block client ID, or an array of multi-selected blocks client IDs.\n *\n * @return {boolean} Whether the block is in multi-selection set.\n */\nexport const isClientIdSelected = ( clientId, selectedBlockClientIds ) =>\n\tArray.isArray( selectedBlockClientIds ) && selectedBlockClientIds.length\n\t\t? selectedBlockClientIds.indexOf( clientId ) !== -1\n\t\t: selectedBlockClientIds === clientId;\n\n/**\n * From a start and end clientId of potentially different nesting levels,\n * return the nearest-depth ids that have a common level of depth in the\n * nesting hierarchy. For multiple block selection, this ensure that the\n * selection is always at the same nesting level, and not split across\n * separate levels.\n *\n * @param {string}   startId      The first id of a selection.\n * @param {string}   endId        The end id of a selection, usually one that has been clicked on.\n * @param {string[]} startParents An array of ancestor ids for the start id, in descending order.\n * @param {string[]} endParents   An array of ancestor ids for the end id, in descending order.\n * @return {Object} An object containing the start and end ids.\n */\nexport function getCommonDepthClientIds(\n\tstartId,\n\tendId,\n\tstartParents,\n\tendParents\n) {\n\tconst startPath = [ ...startParents, startId ];\n\tconst endPath = [ ...endParents, endId ];\n\tconst depth = Math.min( startPath.length, endPath.length ) - 1;\n\tconst start = startPath[ depth ];\n\tconst end = endPath[ depth ];\n\n\treturn {\n\t\tstart,\n\t\tend,\n\t};\n}\n\n/**\n * Shift focus to the list view item associated with a particular clientId.\n *\n * @typedef {import('@wordpress/element').RefObject} RefObject\n *\n * @param {string}                 focusClientId      The client ID of the block to focus.\n * @param {RefObject<HTMLElement>} treeGridElementRef The container element to search within.\n */\nexport function focusListItem( focusClientId, treeGridElementRef ) {\n\tconst getFocusElement = () => {\n\t\tconst row = treeGridElementRef.current?.querySelector(\n\t\t\t`[role=row][data-block=\"${ focusClientId }\"]`\n\t\t);\n\t\tif ( ! row ) return null;\n\t\t// Focus the first focusable in the row, which is the ListViewBlockSelectButton.\n\t\treturn focus.focusable.find( row )[ 0 ];\n\t};\n\n\tlet focusElement = getFocusElement();\n\tif ( focusElement ) {\n\t\tfocusElement.focus();\n\t} else {\n\t\t// The element hasn't been painted yet. Defer focusing on the next frame.\n\t\t// This could happen when all blocks have been deleted and the default block\n\t\t// hasn't been added to the editor yet.\n\t\twindow.requestAnimationFrame( () => {\n\t\t\tfocusElement = getFocusElement();\n\n\t\t\t// Ignore if the element still doesn't exist.\n\t\t\tif ( focusElement ) {\n\t\t\t\tfocusElement.focus();\n\t\t\t}\n\t\t} );\n\t}\n}\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIO,MAAME,2BAA2B,GAAGA,CAAEC,QAAQ,EAAEC,YAAY,EAAEC,KAAK,KACzE,IAAAC,aAAO,GACN;AACA,IAAAC,QAAE,EAAE,gCAAiC,CAAC,EACtCJ,QAAQ,EACRC,YAAY,EACZC,KACD,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AARAG,OAAA,CAAAN,2BAAA,GAAAA,2BAAA;AASO,MAAMO,kBAAkB,GAAGA,CAAEC,QAAQ,EAAEC,sBAAsB,KACnEC,KAAK,CAACC,OAAO,CAAEF,sBAAuB,CAAC,IAAIA,sBAAsB,CAACG,MAAM,GACrEH,sBAAsB,CAACI,OAAO,CAAEL,QAAS,CAAC,KAAK,CAAC,CAAC,GACjDC,sBAAsB,KAAKD,QAAQ;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAZAF,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAaO,SAASO,uBAAuBA,CACtCC,OAAO,EACPC,KAAK,EACLC,YAAY,EACZC,UAAU,EACT;EACD,MAAMC,SAAS,GAAG,CAAE,GAAGF,YAAY,EAAEF,OAAO,CAAE;EAC9C,MAAMK,OAAO,GAAG,CAAE,GAAGF,UAAU,EAAEF,KAAK,CAAE;EACxC,MAAMK,KAAK,GAAGC,IAAI,CAACC,GAAG,CAAEJ,SAAS,CAACP,MAAM,EAAEQ,OAAO,CAACR,MAAO,CAAC,GAAG,CAAC;EAC9D,MAAMY,KAAK,GAAGL,SAAS,CAAEE,KAAK,CAAE;EAChC,MAAMI,GAAG,GAAGL,OAAO,CAAEC,KAAK,CAAE;EAE5B,OAAO;IACNG,KAAK;IACLC;EACD,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,aAAaA,CAAEC,aAAa,EAAEC,kBAAkB,EAAG;EAClE,MAAMC,eAAe,GAAGA,CAAA,KAAM;IAC7B,MAAMC,GAAG,GAAGF,kBAAkB,CAACG,OAAO,EAAEC,aAAa,CACnD,0BAA0BL,aAAe,IAC3C,CAAC;IACD,IAAK,CAAEG,GAAG,EAAG,OAAO,IAAI;IACxB;IACA,OAAOG,UAAK,CAACC,SAAS,CAACC,IAAI,CAAEL,GAAI,CAAC,CAAE,CAAC,CAAE;EACxC,CAAC;EAED,IAAIM,YAAY,GAAGP,eAAe,CAAC,CAAC;EACpC,IAAKO,YAAY,EAAG;IACnBA,YAAY,CAACH,KAAK,CAAC,CAAC;EACrB,CAAC,MAAM;IACN;IACA;IACA;IACAI,MAAM,CAACC,qBAAqB,CAAE,MAAM;MACnCF,YAAY,GAAGP,eAAe,CAAC,CAAC;;MAEhC;MACA,IAAKO,YAAY,EAAG;QACnBA,YAAY,CAACH,KAAK,CAAC,CAAC;MACrB;IACD,CAAE,CAAC;EACJ;AACD"}

package/build/components/media-placeholder/index.js

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MediaPlaceholder = MediaPlaceholder;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
 var _data = require("@wordpress/data");
 var _icons = require("@wordpress/icons");
 var _blocks2 = require("@wordpress/blocks");
@@ -37,20 +38,20 @@ const InsertFromURLPopover = ({
   onSubmit,
   onClose,
   popoverAnchor
-}) => (0, _element.createElement)(_urlPopover.default, {
+}) => (0, _react.createElement)(_urlPopover.default, {
   anchor: popoverAnchor,
   onClose: onClose
-}, (0, _element.createElement)("form", {
+}, (0, _react.createElement)("form", {
   className: "block-editor-media-placeholder__url-input-form",
   onSubmit: onSubmit
-}, (0, _element.createElement)("input", {
+}, (0, _react.createElement)("input", {
   className: "block-editor-media-placeholder__url-input-field",
   type: "text",
   "aria-label": (0, _i18n.__)('URL'),
   placeholder: (0, _i18n.__)('Paste or type URL'),
   onChange: onChange,
   value: src
-}), (0, _element.createElement)(_components.Button, {
+}), (0, _react.createElement)(_components.Button, {
   className: "block-editor-media-placeholder__url-input-submit-button",
   icon: _icons.keyboardReturn,
   label: (0, _i18n.__)('Apply'),
@@ -67,15 +68,15 @@ const URLSelectionUI = ({
   // Use internal state instead of a ref to make sure that the component
   // re-renders when the popover's anchor updates.
   const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: "block-editor-media-placeholder__url-input-container",
     ref: setPopoverAnchor
-  }, (0, _element.createElement)(_components.Button, {
+  }, (0, _react.createElement)(_components.Button, {
     className: "block-editor-media-placeholder__button",
     onClick: openURLInput,
     isPressed: isURLInputVisible,
     variant: "tertiary"
-  }, (0, _i18n.__)('Insert from URL')), isURLInputVisible && (0, _element.createElement)(InsertFromURLPopover, {
+  }, (0, _i18n.__)('Insert from URL')), isURLInputVisible && (0, _react.createElement)(InsertFromURLPopover, {
     src: src,
     onChange: onChangeSrc,
     onSubmit: onSubmitSrc,
@@ -292,7 +293,7 @@ function MediaPlaceholder({
     const placeholderClassName = (0, _classnames.default)('block-editor-media-placeholder', className, {
       'is-appender': isAppender
     });
-    return (0, _element.createElement)(_components.Placeholder, {
+    return (0, _react.createElement)(_components.Placeholder, {
       icon: icon,
       label: title,
       instructions: instructions,
@@ -308,13 +309,13 @@ function MediaPlaceholder({
     if (disableDropZone) {
       return null;
     }
-    return (0, _element.createElement)(_components.DropZone, {
+    return (0, _react.createElement)(_components.DropZone, {
       onFilesDrop: onFilesUpload,
       onHTMLDrop: onHTMLDrop
     });
   };
   const renderCancelLink = () => {
-    return onCancel && (0, _element.createElement)(_components.Button, {
+    return onCancel && (0, _react.createElement)(_components.Button, {
       className: "block-editor-media-placeholder__cancel-button",
       title: (0, _i18n.__)('Cancel'),
       variant: "link",
@@ -322,7 +323,7 @@ function MediaPlaceholder({
     }, (0, _i18n.__)('Cancel'));
   };
   const renderUrlSelectionUI = () => {
-    return onSelectURL && (0, _element.createElement)(URLSelectionUI, {
+    return onSelectURL && (0, _react.createElement)(URLSelectionUI, {
       isURLInputVisible: isURLInputVisible,
       src: src,
       onChangeSrc: onChangeSrc,
@@ -332,9 +333,9 @@ function MediaPlaceholder({
     });
   };
   const renderFeaturedImageToggle = () => {
-    return onToggleFeaturedImage && (0, _element.createElement)("div", {
+    return onToggleFeaturedImage && (0, _react.createElement)("div", {
       className: "block-editor-media-placeholder__url-input-container"
-    }, (0, _element.createElement)(_components.Button, {
+    }, (0, _react.createElement)(_components.Button, {
       className: "block-editor-media-placeholder__button",
       onClick: onToggleFeaturedImage,
       variant: "tertiary"
@@ -344,7 +345,7 @@ function MediaPlaceholder({
     const defaultButton = ({
       open
     }) => {
-      return (0, _element.createElement)(_components.Button, {
+      return (0, _react.createElement)(_components.Button, {
         variant: "tertiary",
         onClick: () => {
           open();
@@ -352,7 +353,7 @@ function MediaPlaceholder({
       }, (0, _i18n.__)('Media Library'));
     };
     const libraryButton = mediaLibraryButton !== null && mediaLibraryButton !== void 0 ? mediaLibraryButton : defaultButton;
-    const uploadMediaLibraryButton = (0, _element.createElement)(_mediaUpload.default, {
+    const uploadMediaLibraryButton = (0, _react.createElement)(_mediaUpload.default, {
       addToGallery: addToGallery,
       gallery: multiple && onlyAllowsImages(),
       multiple: multiple,
@@ -365,14 +366,14 @@ function MediaPlaceholder({
       render: libraryButton
     });
     if (mediaUpload && isAppender) {
-      return (0, _element.createElement)(_element.Fragment, null, renderDropZone(), (0, _element.createElement)(_components.FormFileUpload, {
+      return (0, _react.createElement)(_react.Fragment, null, renderDropZone(), (0, _react.createElement)(_components.FormFileUpload, {
         onChange: onUpload,
         accept: accept,
         multiple: !!multiple,
         render: ({
           openFileDialog
         }) => {
-          const content = (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Button, {
+          const content = (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.Button, {
             variant: "primary",
             className: (0, _classnames.default)('block-editor-media-placeholder__button', 'block-editor-media-placeholder__upload-button'),
             onClick: openFileDialog
@@ -382,7 +383,7 @@ function MediaPlaceholder({
       }));
     }
     if (mediaUpload) {
-      const content = (0, _element.createElement)(_element.Fragment, null, renderDropZone(), (0, _element.createElement)(_components.FormFileUpload, {
+      const content = (0, _react.createElement)(_react.Fragment, null, renderDropZone(), (0, _react.createElement)(_components.FormFileUpload, {
         variant: "primary",
         className: (0, _classnames.default)('block-editor-media-placeholder__button', 'block-editor-media-placeholder__upload-button'),
         onChange: onUpload,
@@ -394,9 +395,9 @@ function MediaPlaceholder({
     return renderPlaceholder(uploadMediaLibraryButton);
   };
   if (disableMediaButtons) {
-    return (0, _element.createElement)(_check.default, null, renderDropZone());
+    return (0, _react.createElement)(_check.default, null, renderDropZone());
   }
-  return (0, _element.createElement)(_check.default, {
+  return (0, _react.createElement)(_check.default, {
     fallback: renderPlaceholder(renderUrlSelectionUI())
   }, renderMediaUploadChecked());
 }