@wordpress/block-editor 12.2.0 → 12.3.1

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

@@ -11,14 +11,15 @@ var _components = require("@wordpress/components");
 
 var _dom = require("@wordpress/dom");
 
+var _i18n = require("@wordpress/i18n");
+
 /**
  * WordPress dependencies
  */
-function ListViewDropIndicator(_ref) {
-  let {
-    listViewRef,
-    blockDropTarget
-  } = _ref;
+function ListViewDropIndicator({
+  listViewRef,
+  blockDropTarget
+}) {
   const {
     rootClientId,
     clientId,
@@ -44,6 +45,7 @@ function ListViewDropIndicator(_ref) {
   // is undefined, so the indicator will appear after the rootBlockElement.
 
   const targetElement = blockElement || rootBlockElement;
+  const rtl = (0, _i18n.isRTL)();
   const getDropIndicatorIndent = (0, _element.useCallback)(targetElementRect => {
     if (!rootBlockElement) {
       return 0;
@@ -54,8 +56,8 @@ function ListViewDropIndicator(_ref) {
 
     const rootBlockIconElement = rootBlockElement.querySelector('.block-editor-block-icon');
     const rootBlockIconRect = rootBlockIconElement.getBoundingClientRect();
-    return rootBlockIconRect.right - targetElementRect.left;
-  }, [rootBlockElement]);
+    return rtl ? targetElementRect.right - rootBlockIconRect.left : rootBlockIconRect.right - targetElementRect.left;
+  }, [rootBlockElement, rtl]);
   const getDropIndicatorWidth = (0, _element.useCallback)((targetElementRect, indent) => {
     if (!targetElement) {
       return 0;
@@ -70,18 +72,36 @@ function ListViewDropIndicator(_ref) {
     // target element.
 
     const scrollContainer = (0, _dom.getScrollContainer)(targetElement, 'horizontal');
+    const ownerDocument = targetElement.ownerDocument;
+    const windowScroll = scrollContainer === ownerDocument.body || scrollContainer === ownerDocument.documentElement;
 
-    if (scrollContainer) {
+    if (scrollContainer && !windowScroll) {
       const scrollContainerRect = scrollContainer.getBoundingClientRect();
+      const distanceBetweenContainerAndTarget = (0, _i18n.isRTL)() ? scrollContainerRect.right - targetElementRect.right : targetElementRect.left - scrollContainerRect.left;
+      const scrollContainerWidth = scrollContainer.clientWidth;
+
+      if (scrollContainerWidth < width + distanceBetweenContainerAndTarget) {
+        width = scrollContainerWidth - distanceBetweenContainerAndTarget;
+      } // LTR logic for ensuring the drop indicator does not extend
+      // beyond the right edge of the scroll container.
+
 
-      if (scrollContainer.clientWidth < width) {
-        width = scrollContainer.clientWidth - (targetElementRect.left - scrollContainerRect.left);
+      if (!rtl && targetElementRect.left + indent < scrollContainerRect.left) {
+        width -= scrollContainerRect.left - targetElementRect.left;
+        return width;
+      } // RTL logic for ensuring the drop indicator does not extend
+      // beyond the right edge of the scroll container.
+
+
+      if (rtl && targetElementRect.right - indent > scrollContainerRect.right) {
+        width -= targetElementRect.right - scrollContainerRect.right;
+        return width;
       }
     } // Subtract the indent from the final width of the indicator.
 
 
     return width - indent;
-  }, [targetElement]);
+  }, [rtl, targetElement]);
   const style = (0, _element.useMemo)(() => {
     if (!targetElement) {
       return {};
@@ -100,15 +120,45 @@ function ListViewDropIndicator(_ref) {
       return undefined;
     }
 
+    const ownerDocument = targetElement.ownerDocument;
     return {
-      ownerDocument: targetElement.ownerDocument,
+      ownerDocument,
 
       getBoundingClientRect() {
         const rect = targetElement.getBoundingClientRect();
-        const indent = getDropIndicatorIndent(rect);
-        const left = rect.left + indent;
+        const indent = getDropIndicatorIndent(rect); // In RTL languages, the drop indicator should be positioned
+        // to the left of the target element, with the width of the
+        // indicator determining the indent at the right edge of the
+        // target element. In LTR languages, the drop indicator should
+        // end at the right edge of the target element, with the indent
+        // added to the position of the left edge of the target element.
+
+        let left = rtl ? rect.left : rect.left + indent;
         let top = 0;
-        let bottom = 0;
+        let bottom = 0; // In deeply nested lists, where a scrollbar is present,
+        // the width of the drop indicator should be the width of
+        // the visible area of the scroll container. Additionally,
+        // the left edge of the drop indicator line needs to be
+        // offset by the distance the left edge of the target element
+        // and the left edge of the scroll container. The ensures
+        // that the drop indicator position never breaks out of the
+        // visible area of the scroll container.
+
+        const scrollContainer = (0, _dom.getScrollContainer)(targetElement, 'horizontal');
+        const windowScroll = scrollContainer === ownerDocument.body || scrollContainer === ownerDocument.documentElement; // If the scroll container is not the window, offset the left position, if need be.
+
+        if (scrollContainer && !windowScroll) {
+          const scrollContainerRect = scrollContainer.getBoundingClientRect(); // In RTL languages, a vertical scrollbar is present on the
+          // left edge of the scroll container. The width of the
+          // scrollbar needs to be accounted for when positioning the
+          // drop indicator.
+
+          const scrollbarWidth = rtl ? scrollContainer.offsetWidth - scrollContainer.clientWidth : 0;
+
+          if (left < scrollContainerRect.left + scrollbarWidth) {
+            left = scrollContainerRect.left + scrollbarWidth;
+          }
+        }
 
         if (dropPosition === 'top') {
           top = rect.top;
@@ -125,7 +175,7 @@ function ListViewDropIndicator(_ref) {
       }
 
     };
-  }, [targetElement, dropPosition, getDropIndicatorIndent, getDropIndicatorWidth]);
+  }, [targetElement, dropPosition, getDropIndicatorIndent, getDropIndicatorWidth, rtl]);
 
   if (!targetElement) {
     return null;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/drop-indicator.js"],"names":["ListViewDropIndicator","listViewRef","blockDropTarget","rootClientId","clientId","dropPosition","rootBlockElement","blockElement","current","_rootBlockElement","querySelector","undefined","_blockElement","targetElement","getDropIndicatorIndent","targetElementRect","rootBlockIconElement","rootBlockIconRect","getBoundingClientRect","right","left","getDropIndicatorWidth","indent","width","offsetWidth","scrollContainer","scrollContainerRect","clientWidth","style","popoverAnchor","isValidDropPosition","ownerDocument","rect","top","bottom","height","window","DOMRect"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Popover } from '@wordpress/components';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { useCallback, useMemo } from '@wordpress/element';\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 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 rootBlockIconRect.right - targetElementRect.left;\n\t\t},\n\t\t[ rootBlockElement ]\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\tif ( scrollContainer ) {\n\t\t\t\tconst scrollContainerRect =\n\t\t\t\t\tscrollContainer.getBoundingClientRect();\n\n\t\t\t\tif ( scrollContainer.clientWidth < width ) {\n\t\t\t\t\twidth =\n\t\t\t\t\t\tscrollContainer.clientWidth -\n\t\t\t\t\t\t( targetElementRect.left - scrollContainerRect.left );\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[ 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\townerDocument: targetElement.ownerDocument,\n\t\t\tgetBoundingClientRect() {\n\t\t\t\tconst rect = targetElement.getBoundingClientRect();\n\t\t\t\tconst indent = getDropIndicatorIndent( rect );\n\t\t\t\tconst left = rect.left + indent;\n\t\t\t\tlet top = 0;\n\t\t\t\tlet bottom = 0;\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] );\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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/drop-indicator.js"],"names":["ListViewDropIndicator","listViewRef","blockDropTarget","rootClientId","clientId","dropPosition","rootBlockElement","blockElement","current","_rootBlockElement","querySelector","undefined","_blockElement","targetElement","rtl","getDropIndicatorIndent","targetElementRect","rootBlockIconElement","rootBlockIconRect","getBoundingClientRect","right","left","getDropIndicatorWidth","indent","width","offsetWidth","scrollContainer","ownerDocument","windowScroll","body","documentElement","scrollContainerRect","distanceBetweenContainerAndTarget","scrollContainerWidth","clientWidth","style","popoverAnchor","isValidDropPosition","rect","top","bottom","scrollbarWidth","height","window","DOMRect"],"mappings":"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","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\tconst ownerDocument = targetElement.ownerDocument;\n\n\t\treturn {\n\t\t\townerDocument,\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 windowScroll =\n\t\t\t\t\tscrollContainer === ownerDocument.body ||\n\t\t\t\t\tscrollContainer === ownerDocument.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"]}

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

@@ -14,10 +14,9 @@ var _i18n = require("@wordpress/i18n");
 /**
  * WordPress dependencies
  */
-function ListViewExpander(_ref) {
-  let {
-    onClick
-  } = _ref;
+function ListViewExpander({
+  onClick
+}) {
   return (// Keyboard events are handled by TreeGrid see: components/src/tree-grid/index.js
     //
     // The expander component is implemented as a pseudo element in the w3 example

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/expander.js"],"names":["ListViewExpander","onClick","event","forceToggle","chevronLeftSmall","chevronRightSmall"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIe,SAASA,gBAAT,OAAyC;AAAA,MAAd;AAAEC,IAAAA;AAAF,GAAc;AACvD,SACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACC,MAAA,SAAS,EAAC,kCADX;AAEC,MAAA,OAAO,EAAKC,KAAF,IAAaD,OAAO,CAAEC,KAAF,EAAS;AAAEC,QAAAA,WAAW,EAAE;AAAf,OAAT,CAF/B;AAGC,qBAAY,MAHb;AAIC,qBAAY;AAJb,OAMC,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAG,qBAAUC,uBAAV,GAA6BC;AAA1C,MAND;AAVD;AAmBA","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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/expander.js"],"names":["ListViewExpander","onClick","event","forceToggle","chevronLeftSmall","chevronRightSmall"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIe,SAASA,gBAAT,CAA2B;AAAEC,EAAAA;AAAF,CAA3B,EAAyC;AACvD,SACC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACC,MAAA,SAAS,EAAC,kCADX;AAEC,MAAA,OAAO,EAAKC,KAAF,IAAaD,OAAO,CAAEC,KAAF,EAAS;AAAEC,QAAAA,WAAW,EAAE;AAAf,OAAT,CAF/B;AAGC,qBAAY,MAHb;AAIC,qBAAY;AAJb,OAMC,4BAAC,WAAD;AAAM,MAAA,IAAI,EAAG,qBAAUC,uBAAV,GAA6BC;AAA1C,MAND;AAVD;AAmBA","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"]}

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

@@ -9,8 +9,6 @@ exports.default = exports.PrivateListView = exports.BLOCK_LIST_ITEM_HEIGHT = voi
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _compose = require("@wordpress/compose");
 
 var _components = require("@wordpress/components");
@@ -66,36 +64,36 @@ const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}         props                         Components props.
- * @param {string}         props.id                      An HTML element id for the root element of ListView.
- * @param {Array}          props.blocks                  _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {?boolean}       props.showBlockMovers         Flag to enable block movers. Defaults to `false`.
- * @param {?boolean}       props.isExpanded              Flag to determine whether nested levels are expanded by default. Defaults to `false`.
- * @param {?boolean}       props.showAppender            Flag to show or hide the block appender. Defaults to `false`.
- * @param {?ComponentType} props.blockSettingsMenu       Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
- * @param {string}         props.rootClientId            The client id of the root block from which we determine the blocks to show in the list.
- * @param {string}         props.description             Optional accessible description for the tree grid component.
- * @param {?Function}      props.onSelect                Optional callback to be invoked when a block is selected. Receives the block object that was selected.
- * @param {Function}       props.renderAdditionalBlockUI Function that renders additional block content UI.
- * @param {Ref}            ref                           Forwarded ref
+ * @param {Object}         props                        Components props.
+ * @param {string}         props.id                     An HTML element id for the root element of ListView.
+ * @param {Array}          props.blocks                 _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {?HTMLElement}   props.dropZoneElement        Optional element to be used as the drop zone.
+ * @param {?boolean}       props.showBlockMovers        Flag to enable block movers. Defaults to `false`.
+ * @param {?boolean}       props.isExpanded             Flag to determine whether nested levels are expanded by default. Defaults to `false`.
+ * @param {?boolean}       props.showAppender           Flag to show or hide the block appender. Defaults to `false`.
+ * @param {?ComponentType} props.blockSettingsMenu      Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
+ * @param {string}         props.rootClientId           The client id of the root block from which we determine the blocks to show in the list.
+ * @param {string}         props.description            Optional accessible description for the tree grid component.
+ * @param {?Function}      props.onSelect               Optional callback to be invoked when a block is selected. Receives the block object that was selected.
+ * @param {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.
+ * @param {Ref}            ref                          Forwarded ref
  */
 
 exports.BLOCK_LIST_ITEM_HEIGHT = BLOCK_LIST_ITEM_HEIGHT;
 
-function ListViewComponent(_ref, ref) {
-  let {
-    id,
-    blocks,
-    showBlockMovers = false,
-    isExpanded = false,
-    showAppender = false,
-    blockSettingsMenu: BlockSettingsMenu = _blockSettingsDropdown.BlockSettingsDropdown,
-    rootClientId,
-    description,
-    onSelect,
-    renderAdditionalBlockUI
-  } = _ref;
-
+function ListViewComponent({
+  id,
+  blocks,
+  dropZoneElement,
+  showBlockMovers = false,
+  isExpanded = false,
+  showAppender = false,
+  blockSettingsMenu: BlockSettingsMenu = _blockSettingsDropdown.BlockSettingsDropdown,
+  rootClientId,
+  description,
+  onSelect,
+  additionalBlockContent: AdditionalBlockContent
+}, ref) {
   // This can be removed once we no longer need to support the blocks prop.
   if (blocks) {
     (0, _deprecated.default)('`blocks` property in `wp.blockEditor.__experimentalListView`', {
@@ -125,7 +123,7 @@ function ListViewComponent(_ref, ref) {
       getClientIdsOfDescendants,
       __unstableGetEditorMode
     } = select(_store.store);
-    const draggedBlockCount = (draggedClientIds === null || draggedClientIds === void 0 ? void 0 : draggedClientIds.length) > 0 ? getClientIdsOfDescendants(draggedClientIds).length + 1 : 0;
+    const draggedBlockCount = draggedClientIds?.length > 0 ? getClientIdsOfDescendants(draggedClientIds).length + 1 : 0;
     return {
       visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
       shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out'
@@ -138,7 +136,9 @@ function ListViewComponent(_ref, ref) {
   const {
     ref: dropZoneRef,
     target: blockDropTarget
-  } = (0, _useListViewDropZone.default)();
+  } = (0, _useListViewDropZone.default)({
+    dropZoneElement
+  });
   const elementRef = (0, _element.useRef)();
   const treeGridRef = (0, _compose.useMergeRefs)([elementRef, dropZoneRef, ref]);
   const isMounted = (0, _element.useRef)(false);
@@ -149,8 +149,14 @@ function ListViewComponent(_ref, ref) {
     firstSelectedBlockClientId: selectedClientIds[0],
     setExpandedState
   });
-  const selectEditorBlock = (0, _element.useCallback)((event, blockClientId) => {
-    updateBlockSelection(event, blockClientId);
+  const selectEditorBlock = (0, _element.useCallback)(
+  /**
+   * @param {MouseEvent | KeyboardEvent | undefined} event
+   * @param {string}                                 blockClientId
+   * @param {null | undefined | -1 | 1}              focusPosition
+   */
+  (event, blockClientId, focusPosition) => {
+    updateBlockSelection(event, blockClientId, null, focusPosition);
     setSelectedTreeId(blockClientId);
 
     if (onSelect) {
@@ -188,20 +194,14 @@ function ListViewComponent(_ref, ref) {
     });
   }, [setExpandedState]);
   const expandRow = (0, _element.useCallback)(row => {
-    var _row$dataset;
-
-    expand(row === null || row === void 0 ? void 0 : (_row$dataset = row.dataset) === null || _row$dataset === void 0 ? void 0 : _row$dataset.block);
+    expand(row?.dataset?.block);
   }, [expand]);
   const collapseRow = (0, _element.useCallback)(row => {
-    var _row$dataset2;
-
-    collapse(row === null || row === void 0 ? void 0 : (_row$dataset2 = row.dataset) === null || _row$dataset2 === void 0 ? void 0 : _row$dataset2.block);
+    collapse(row?.dataset?.block);
   }, [collapse]);
   const focusRow = (0, _element.useCallback)((event, startRow, endRow) => {
     if (event.shiftKey) {
-      var _startRow$dataset, _endRow$dataset;
-
-      updateBlockSelection(event, startRow === null || startRow === void 0 ? void 0 : (_startRow$dataset = startRow.dataset) === null || _startRow$dataset === void 0 ? void 0 : _startRow$dataset.block, endRow === null || endRow === void 0 ? void 0 : (_endRow$dataset = endRow.dataset) === null || _endRow$dataset === void 0 ? void 0 : _endRow$dataset.block);
+      updateBlockSelection(event, startRow?.dataset?.block, endRow?.dataset?.block);
     }
   }, [updateBlockSelection]);
   const contextValue = (0, _element.useMemo)(() => ({
@@ -212,10 +212,11 @@ function ListViewComponent(_ref, ref) {
     collapse,
     BlockSettingsMenu,
     listViewInstanceId: instanceId,
-    renderAdditionalBlockUI,
+    AdditionalBlockContent,
     insertedBlock,
-    setInsertedBlock
-  }), [draggedClientIds, expandedState, expand, collapse, BlockSettingsMenu, instanceId, renderAdditionalBlockUI, insertedBlock, setInsertedBlock]); // If there are no blocks to show and we're not showing the appender, do not render the list view.
+    setInsertedBlock,
+    treeGridElementRef: elementRef
+  }), [draggedClientIds, expandedState, expand, collapse, BlockSettingsMenu, instanceId, AdditionalBlockContent, insertedBlock, setInsertedBlock]); // If there are no blocks to show and we're not showing the appender, do not render the list view.
 
   if (!clientIdsTree.length && !showAppender) {
     return null;
@@ -260,15 +261,15 @@ const PrivateListView = (0, _element.forwardRef)(ListViewComponent); // This is
 exports.PrivateListView = PrivateListView;
 
 var _default = (0, _element.forwardRef)((props, ref) => {
-  return (0, _element.createElement)(PrivateListView, (0, _extends2.default)({
-    ref: ref
-  }, props, {
+  return (0, _element.createElement)(PrivateListView, {
+    ref: ref,
+    ...props,
     showAppender: false,
     rootClientId: null,
     onSelect: null,
-    renderAdditionalBlockUI: null,
+    additionalBlockContent: null,
     blockSettingsMenu: undefined
-  }));
+  });
 });
 
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/index.js"],"names":["expanded","state","action","Array","isArray","clientIds","reduce","newState","id","type","BLOCK_LIST_ITEM_HEIGHT","ListViewComponent","ref","blocks","showBlockMovers","isExpanded","showAppender","blockSettingsMenu","BlockSettingsMenu","BlockSettingsDropdown","rootClientId","description","onSelect","renderAdditionalBlockUI","since","alternative","instanceId","clientIdsTree","draggedClientIds","selectedClientIds","getBlock","blockEditorStore","visibleBlockCount","shouldShowInnerBlocks","select","getGlobalBlockCount","getClientIdsOfDescendants","__unstableGetEditorMode","draggedBlockCount","length","updateBlockSelection","expandedState","setExpandedState","dropZoneRef","target","blockDropTarget","elementRef","treeGridRef","isMounted","insertedBlock","setInsertedBlock","setSelectedTreeId","firstSelectedBlockClientId","selectEditorBlock","event","blockClientId","current","fixedListWindow","useWindowing","windowOverscan","expand","clientId","collapse","expandRow","row","dataset","block","collapseRow","focusRow","startRow","endRow","shiftKey","contextValue","isTreeGridMounted","listViewInstanceId","PrivateListView","props","undefined"],"mappings":"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","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 {?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 {Function}       props.renderAdditionalBlockUI Function 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\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\trenderAdditionalBlockUI,\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\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( event, blockClientId ) => {\n\t\t\tupdateBlockSelection( event, blockClientId );\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\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\tuseWindowing: true,\n\t\t\twindowOverscan: 40,\n\t\t}\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\trenderAdditionalBlockUI,\n\t\t\tinsertedBlock,\n\t\t\tsetInsertedBlock,\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\trenderAdditionalBlockUI,\n\t\t\tinsertedBlock,\n\t\t\tsetInsertedBlock,\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\trenderAdditionalBlockUI={ null }\n\t\t\tblockSettingsMenu={ undefined }\n\t\t/>\n\t);\n} );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/index.js"],"names":["expanded","state","action","Array","isArray","clientIds","reduce","newState","id","type","BLOCK_LIST_ITEM_HEIGHT","ListViewComponent","blocks","dropZoneElement","showBlockMovers","isExpanded","showAppender","blockSettingsMenu","BlockSettingsMenu","BlockSettingsDropdown","rootClientId","description","onSelect","additionalBlockContent","AdditionalBlockContent","ref","since","alternative","instanceId","clientIdsTree","draggedClientIds","selectedClientIds","getBlock","blockEditorStore","visibleBlockCount","shouldShowInnerBlocks","select","getGlobalBlockCount","getClientIdsOfDescendants","__unstableGetEditorMode","draggedBlockCount","length","updateBlockSelection","expandedState","setExpandedState","dropZoneRef","target","blockDropTarget","elementRef","treeGridRef","isMounted","insertedBlock","setInsertedBlock","setSelectedTreeId","firstSelectedBlockClientId","selectEditorBlock","event","blockClientId","focusPosition","current","fixedListWindow","useWindowing","windowOverscan","expand","clientId","collapse","expandRow","row","dataset","block","collapseRow","focusRow","startRow","endRow","shiftKey","contextValue","isTreeGridMounted","listViewInstanceId","treeGridElementRef","PrivateListView","props","undefined"],"mappings":"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","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\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\tuseWindowing: true,\n\t\t\twindowOverscan: 40,\n\t\t}\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// 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"]}

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

@@ -9,8 +9,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _web = require("@react-spring/web");
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -33,17 +31,16 @@ var _useMovingAnimation = _interopRequireDefault(require("../use-moving-animatio
  * Internal dependencies
  */
 const AnimatedTreeGridRow = (0, _web.animated)(_components.__experimentalTreeGridRow);
-const ListViewLeaf = (0, _element.forwardRef)((_ref, ref) => {
-  let {
-    isSelected,
-    position,
-    level,
-    rowCount,
-    children,
-    className,
-    path,
-    ...props
-  } = _ref;
+const ListViewLeaf = (0, _element.forwardRef)(({
+  isSelected,
+  position,
+  level,
+  rowCount,
+  children,
+  className,
+  path,
+  ...props
+}, ref) => {
   const animationRef = (0, _useMovingAnimation.default)({
     isSelected,
     adjustScrolling: false,
@@ -51,14 +48,15 @@ const ListViewLeaf = (0, _element.forwardRef)((_ref, ref) => {
     triggerAnimationOnChange: path
   });
   const mergedRef = (0, _compose.useMergeRefs)([ref, animationRef]);
-  return (0, _element.createElement)(AnimatedTreeGridRow, (0, _extends2.default)({
+  return (0, _element.createElement)(AnimatedTreeGridRow, {
     ref: mergedRef,
     className: (0, _classnames.default)('block-editor-list-view-leaf', className),
     level: level,
     positionInSet: position,
     setSize: rowCount,
-    isExpanded: undefined
-  }, props), children);
+    isExpanded: undefined,
+    ...props
+  }, children);
 });
 var _default = ListViewLeaf;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/leaf.js"],"names":["AnimatedTreeGridRow","TreeGridRow","ListViewLeaf","ref","isSelected","position","level","rowCount","children","className","path","props","animationRef","adjustScrolling","enableAnimation","triggerAnimationOnChange","mergedRef","undefined"],"mappings":";;;;;;;;;AAWA;;;;AARA;;AACA;;AAKA;;AACA;;AAMA;;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAGA,MAAMA,mBAAmB,GAAG,mBAAUC,qCAAV,CAA5B;AAEA,MAAMC,YAAY,GAAG,yBACpB,OAWCC,GAXD,KAYK;AAAA,MAXJ;AACCC,IAAAA,UADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,KAHD;AAICC,IAAAA,QAJD;AAKCC,IAAAA,QALD;AAMCC,IAAAA,SAND;AAOCC,IAAAA,IAPD;AAQC,OAAGC;AARJ,GAWI;AACJ,QAAMC,YAAY,GAAG,iCAAoB;AACxCR,IAAAA,UADwC;AAExCS,IAAAA,eAAe,EAAE,KAFuB;AAGxCC,IAAAA,eAAe,EAAE,IAHuB;AAIxCC,IAAAA,wBAAwB,EAAEL;AAJc,GAApB,CAArB;AAOA,QAAMM,SAAS,GAAG,2BAAc,CAAEb,GAAF,EAAOS,YAAP,CAAd,CAAlB;AAEA,SACC,4BAAC,mBAAD;AACC,IAAA,GAAG,EAAGI,SADP;AAEC,IAAA,SAAS,EAAG,yBACX,6BADW,EAEXP,SAFW,CAFb;AAMC,IAAA,KAAK,EAAGH,KANT;AAOC,IAAA,aAAa,EAAGD,QAPjB;AAQC,IAAA,OAAO,EAAGE,QARX;AASC,IAAA,UAAU,EAAGU;AATd,KAUMN,KAVN,GAYGH,QAZH,CADD;AAgBA,CAvCmB,CAArB;eA0CeN,Y","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"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/leaf.js"],"names":["AnimatedTreeGridRow","TreeGridRow","ListViewLeaf","isSelected","position","level","rowCount","children","className","path","props","ref","animationRef","adjustScrolling","enableAnimation","triggerAnimationOnChange","mergedRef","undefined"],"mappings":";;;;;;;;;AAWA;;AARA;;AACA;;AAKA;;AACA;;AAMA;;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;AAGA,MAAMA,mBAAmB,GAAG,mBAAUC,qCAAV,CAA5B;AAEA,MAAMC,YAAY,GAAG,yBACpB,CACC;AACCC,EAAAA,UADD;AAECC,EAAAA,QAFD;AAGCC,EAAAA,KAHD;AAICC,EAAAA,QAJD;AAKCC,EAAAA,QALD;AAMCC,EAAAA,SAND;AAOCC,EAAAA,IAPD;AAQC,KAAGC;AARJ,CADD,EAWCC,GAXD,KAYK;AACJ,QAAMC,YAAY,GAAG,iCAAoB;AACxCT,IAAAA,UADwC;AAExCU,IAAAA,eAAe,EAAE,KAFuB;AAGxCC,IAAAA,eAAe,EAAE,IAHuB;AAIxCC,IAAAA,wBAAwB,EAAEN;AAJc,GAApB,CAArB;AAOA,QAAMO,SAAS,GAAG,2BAAc,CAAEL,GAAF,EAAOC,YAAP,CAAd,CAAlB;AAEA,SACC,4BAAC,mBAAD;AACC,IAAA,GAAG,EAAGI,SADP;AAEC,IAAA,SAAS,EAAG,yBACX,6BADW,EAEXR,SAFW,CAFb;AAMC,IAAA,KAAK,EAAGH,KANT;AAOC,IAAA,aAAa,EAAGD,QAPjB;AAQC,IAAA,OAAO,EAAGE,QARX;AASC,IAAA,UAAU,EAAGW,SATd;AAAA,OAUMP;AAVN,KAYGH,QAZH,CADD;AAgBA,CAvCmB,CAArB;eA0CeL,Y","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"]}

package/build/components/list-view/use-block-selection.js

@@ -45,9 +45,9 @@ function useBlockSelection() {
   const {
     getBlockType
   } = (0, _data.useSelect)(_blocks.store);
-  const updateBlockSelection = (0, _element.useCallback)(async (event, clientId, destinationClientId) => {
-    if (!(event !== null && event !== void 0 && event.shiftKey)) {
-      selectBlock(clientId);
+  const updateBlockSelection = (0, _element.useCallback)(async (event, clientId, destinationClientId, focusPosition) => {
+    if (!event?.shiftKey) {
+      selectBlock(clientId, focusPosition);
       return;
     } // To handle multiple block selection via the `SHIFT` key, prevent
     // the browser default behavior of opening the link in a new window.
@@ -112,9 +112,7 @@ function useBlockSelection() {
     let label;
 
     if (selectionDiff.length === 1) {
-      var _getBlockType;
-
-      const title = (_getBlockType = getBlockType(getBlockName(selectionDiff[0]))) === null || _getBlockType === void 0 ? void 0 : _getBlockType.title;
+      const title = getBlockType(getBlockName(selectionDiff[0]))?.title;
 
       if (title) {
         label = (0, _i18n.sprintf)(