@wordpress/block-library 8.35.0 → 9.0.0

package/build/navigation/edit/index.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _blockEditor = require("@wordpress/block-editor");
@@ -37,6 +36,7 @@ var _deletedNavigationWarning = _interopRequireDefault(require("./deleted-naviga
 var _accessibleDescription = _interopRequireDefault(require("./accessible-description"));
 var _accessibleMenuDescription = _interopRequireDefault(require("./accessible-menu-description"));
 var _lockUnlock = require("../../lock-unlock");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -90,40 +90,44 @@ function ColorTools({
   if (!colorGradientSettings.hasColorsOrGradients) {
     return null;
   }
-  return (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_blockEditor.__experimentalColorGradientSettingsDropdown, {
-    __experimentalIsRenderedInSidebar: true,
-    settings: [{
-      colorValue: textColor.color,
-      label: (0, _i18n.__)('Text'),
-      onColorChange: setTextColor,
-      resetAllFilter: () => setTextColor()
-    }, {
-      colorValue: backgroundColor.color,
-      label: (0, _i18n.__)('Background'),
-      onColorChange: setBackgroundColor,
-      resetAllFilter: () => setBackgroundColor()
-    }, {
-      colorValue: overlayTextColor.color,
-      label: (0, _i18n.__)('Submenu & overlay text'),
-      onColorChange: setOverlayTextColor,
-      resetAllFilter: () => setOverlayTextColor()
-    }, {
-      colorValue: overlayBackgroundColor.color,
-      label: (0, _i18n.__)('Submenu & overlay background'),
-      onColorChange: setOverlayBackgroundColor,
-      resetAllFilter: () => setOverlayBackgroundColor()
-    }],
-    panelId: clientId,
-    ...colorGradientSettings,
-    gradients: [],
-    disableCustomGradients: true
-  }), enableContrastChecking && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_blockEditor.ContrastChecker, {
-    backgroundColor: detectedBackgroundColor,
-    textColor: detectedColor
-  }), (0, _react.createElement)(_blockEditor.ContrastChecker, {
-    backgroundColor: detectedOverlayBackgroundColor,
-    textColor: detectedOverlayColor
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalColorGradientSettingsDropdown, {
+      __experimentalIsRenderedInSidebar: true,
+      settings: [{
+        colorValue: textColor.color,
+        label: (0, _i18n.__)('Text'),
+        onColorChange: setTextColor,
+        resetAllFilter: () => setTextColor()
+      }, {
+        colorValue: backgroundColor.color,
+        label: (0, _i18n.__)('Background'),
+        onColorChange: setBackgroundColor,
+        resetAllFilter: () => setBackgroundColor()
+      }, {
+        colorValue: overlayTextColor.color,
+        label: (0, _i18n.__)('Submenu & overlay text'),
+        onColorChange: setOverlayTextColor,
+        resetAllFilter: () => setOverlayTextColor()
+      }, {
+        colorValue: overlayBackgroundColor.color,
+        label: (0, _i18n.__)('Submenu & overlay background'),
+        onColorChange: setOverlayBackgroundColor,
+        resetAllFilter: () => setOverlayBackgroundColor()
+      }],
+      panelId: clientId,
+      ...colorGradientSettings,
+      gradients: [],
+      disableCustomGradients: true
+    }), enableContrastChecking && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.ContrastChecker, {
+        backgroundColor: detectedBackgroundColor,
+        textColor: detectedColor
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.ContrastChecker, {
+        backgroundColor: detectedOverlayBackgroundColor,
+        textColor: detectedOverlayColor
+      })]
+    })]
+  });
 }
 function Navigation({
   attributes,
@@ -375,148 +379,183 @@ function Navigation({
     isFirstRender.current = false;
   }, [submenuAccessibilityNotice]);
   const overlayMenuPreviewId = (0, _compose.useInstanceId)(_overlayMenuPreview.default, `overlay-menu-preview`);
-  const stylingInspectorControls = (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_blockEditor.InspectorControls, null, hasSubmenuIndicatorSetting && (0, _react.createElement)(_components.PanelBody, {
-    title: (0, _i18n.__)('Display')
-  }, isResponsive && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_components.Button, {
-    className: overlayMenuPreviewClasses,
-    onClick: () => {
-      setOverlayMenuPreview(!overlayMenuPreview);
-    },
-    "aria-label": (0, _i18n.__)('Overlay menu controls'),
-    "aria-controls": overlayMenuPreviewId,
-    "aria-expanded": overlayMenuPreview
-  }, hasIcon && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_overlayMenuIcon.default, {
-    icon: icon
-  }), (0, _react.createElement)(_icons.Icon, {
-    icon: _icons.close
-  })), !hasIcon && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("span", null, (0, _i18n.__)('Menu')), (0, _react.createElement)("span", null, (0, _i18n.__)('Close')))), (0, _react.createElement)("div", {
-    id: overlayMenuPreviewId
-  }, overlayMenuPreview && (0, _react.createElement)(_overlayMenuPreview.default, {
-    setAttributes: setAttributes,
-    hasIcon: hasIcon,
-    icon: icon,
-    hidden: !overlayMenuPreview
-  }))), (0, _react.createElement)("h3", null, (0, _i18n.__)('Overlay Menu')), (0, _react.createElement)(_components.__experimentalToggleGroupControl, {
-    __nextHasNoMarginBottom: true,
-    label: (0, _i18n.__)('Configure overlay menu'),
-    value: overlayMenu,
-    help: (0, _i18n.__)('Collapses the navigation options in a menu icon opening an overlay.'),
-    onChange: value => setAttributes({
-      overlayMenu: value
-    }),
-    isBlock: true,
-    hideLabelFromVision: true
-  }, (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "never",
-    label: (0, _i18n.__)('Off')
-  }), (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "mobile",
-    label: (0, _i18n.__)('Mobile')
-  }), (0, _react.createElement)(_components.__experimentalToggleGroupControlOption, {
-    value: "always",
-    label: (0, _i18n.__)('Always')
-  })), hasSubmenus && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)("h3", null, (0, _i18n.__)('Submenus')), (0, _react.createElement)(_components.ToggleControl, {
-    __nextHasNoMarginBottom: true,
-    checked: openSubmenusOnClick,
-    onChange: value => {
-      setAttributes({
-        openSubmenusOnClick: value,
-        ...(value && {
-          showSubmenuIcon: true
-        }) // Make sure arrows are shown when we toggle this on.
-      });
-    },
-    label: (0, _i18n.__)('Open on click')
-  }), (0, _react.createElement)(_components.ToggleControl, {
-    __nextHasNoMarginBottom: true,
-    checked: showSubmenuIcon,
-    onChange: value => {
-      setAttributes({
-        showSubmenuIcon: value
-      });
-    },
-    disabled: attributes.openSubmenusOnClick,
-    label: (0, _i18n.__)('Show arrow')
-  }), submenuAccessibilityNotice && (0, _react.createElement)("div", null, (0, _react.createElement)(_components.Notice, {
-    spokenMessage: null,
-    status: "warning",
-    isDismissible: false
-  }, submenuAccessibilityNotice))))), (0, _react.createElement)(_blockEditor.InspectorControls, {
-    group: "color"
-  }, (0, _react.createElement)(ColorTools, {
-    textColor: textColor,
-    setTextColor: setTextColor,
-    backgroundColor: backgroundColor,
-    setBackgroundColor: setBackgroundColor,
-    overlayTextColor: overlayTextColor,
-    setOverlayTextColor: setOverlayTextColor,
-    overlayBackgroundColor: overlayBackgroundColor,
-    setOverlayBackgroundColor: setOverlayBackgroundColor,
-    clientId: clientId,
-    navRef: navRef
-  })));
+  const stylingInspectorControls = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
+      children: hasSubmenuIndicatorSetting && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
+        title: (0, _i18n.__)('Display'),
+        children: [isResponsive && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, {
+            className: overlayMenuPreviewClasses,
+            onClick: () => {
+              setOverlayMenuPreview(!overlayMenuPreview);
+            },
+            "aria-label": (0, _i18n.__)('Overlay menu controls'),
+            "aria-controls": overlayMenuPreviewId,
+            "aria-expanded": overlayMenuPreview,
+            children: [hasIcon && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_overlayMenuIcon.default, {
+                icon: icon
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+                icon: _icons.close
+              })]
+            }), !hasIcon && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: (0, _i18n.__)('Menu')
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: (0, _i18n.__)('Close')
+              })]
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            id: overlayMenuPreviewId,
+            children: overlayMenuPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_overlayMenuPreview.default, {
+              setAttributes: setAttributes,
+              hasIcon: hasIcon,
+              icon: icon,
+              hidden: !overlayMenuPreview
+            })
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+          children: (0, _i18n.__)('Overlay Menu')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
+          __nextHasNoMarginBottom: true,
+          label: (0, _i18n.__)('Configure overlay menu'),
+          value: overlayMenu,
+          help: (0, _i18n.__)('Collapses the navigation options in a menu icon opening an overlay.'),
+          onChange: value => setAttributes({
+            overlayMenu: value
+          }),
+          isBlock: true,
+          hideLabelFromVision: true,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+            value: "never",
+            label: (0, _i18n.__)('Off')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+            value: "mobile",
+            label: (0, _i18n.__)('Mobile')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+            value: "always",
+            label: (0, _i18n.__)('Always')
+          })]
+        }), hasSubmenus && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+            children: (0, _i18n.__)('Submenus')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+            __nextHasNoMarginBottom: true,
+            checked: openSubmenusOnClick,
+            onChange: value => {
+              setAttributes({
+                openSubmenusOnClick: value,
+                ...(value && {
+                  showSubmenuIcon: true
+                }) // Make sure arrows are shown when we toggle this on.
+              });
+            },
+            label: (0, _i18n.__)('Open on click')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
+            __nextHasNoMarginBottom: true,
+            checked: showSubmenuIcon,
+            onChange: value => {
+              setAttributes({
+                showSubmenuIcon: value
+              });
+            },
+            disabled: attributes.openSubmenusOnClick,
+            label: (0, _i18n.__)('Show arrow')
+          }), submenuAccessibilityNotice && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
+              spokenMessage: null,
+              status: "warning",
+              isDismissible: false,
+              children: submenuAccessibilityNotice
+            })
+          })]
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
+      group: "color",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorTools, {
+        textColor: textColor,
+        setTextColor: setTextColor,
+        backgroundColor: backgroundColor,
+        setBackgroundColor: setBackgroundColor,
+        overlayTextColor: overlayTextColor,
+        setOverlayTextColor: setOverlayTextColor,
+        overlayBackgroundColor: overlayBackgroundColor,
+        setOverlayBackgroundColor: setOverlayBackgroundColor,
+        clientId: clientId,
+        navRef: navRef
+      })
+    })]
+  });
   const accessibleDescriptionId = `${clientId}-desc`;
   const isManageMenusButtonDisabled = !hasManagePermissions || !hasResolvedNavigationMenus;
   if (hasUnsavedBlocks && !isCreatingNavigationMenu) {
-    return (0, _react.createElement)(TagName, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagName, {
       ...blockProps,
-      "aria-describedby": !isPlaceholder ? accessibleDescriptionId : undefined
-    }, (0, _react.createElement)(_accessibleDescription.default, {
-      id: accessibleDescriptionId
-    }, (0, _i18n.__)('Unsaved Navigation Menu.')), (0, _react.createElement)(_menuInspectorControls.default, {
-      clientId: clientId,
-      createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
-      createNavigationMenuIsError: createNavigationMenuIsError,
-      currentMenuId: ref,
-      isNavigationMenuMissing: isNavigationMenuMissing,
-      isManageMenusButtonDisabled: isManageMenusButtonDisabled,
-      onCreateNew: createUntitledEmptyNavigationMenu,
-      onSelectClassicMenu: onSelectClassicMenu,
-      onSelectNavigationMenu: onSelectNavigationMenu,
-      isLoading: isLoading,
-      blockEditingMode: blockEditingMode
-    }), blockEditingMode === 'default' && stylingInspectorControls, (0, _react.createElement)(_responsiveWrapper.default, {
-      id: clientId,
-      onToggle: setResponsiveMenuVisibility,
-      isOpen: isResponsiveMenuOpen,
-      hasIcon: hasIcon,
-      icon: icon,
-      isResponsive: isResponsive,
-      isHiddenByDefault: 'always' === overlayMenu,
-      overlayBackgroundColor: overlayBackgroundColor,
-      overlayTextColor: overlayTextColor
-    }, (0, _react.createElement)(_unsavedInnerBlocks.default, {
-      createNavigationMenu: createNavigationMenu,
-      blocks: uncontrolledInnerBlocks,
-      hasSelection: isSelected || isInnerBlockSelected
-    })));
+      "aria-describedby": !isPlaceholder ? accessibleDescriptionId : undefined,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_accessibleDescription.default, {
+        id: accessibleDescriptionId,
+        children: (0, _i18n.__)('Unsaved Navigation Menu.')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuInspectorControls.default, {
+        clientId: clientId,
+        createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
+        createNavigationMenuIsError: createNavigationMenuIsError,
+        currentMenuId: ref,
+        isNavigationMenuMissing: isNavigationMenuMissing,
+        isManageMenusButtonDisabled: isManageMenusButtonDisabled,
+        onCreateNew: createUntitledEmptyNavigationMenu,
+        onSelectClassicMenu: onSelectClassicMenu,
+        onSelectNavigationMenu: onSelectNavigationMenu,
+        isLoading: isLoading,
+        blockEditingMode: blockEditingMode
+      }), blockEditingMode === 'default' && stylingInspectorControls, /*#__PURE__*/(0, _jsxRuntime.jsx)(_responsiveWrapper.default, {
+        id: clientId,
+        onToggle: setResponsiveMenuVisibility,
+        isOpen: isResponsiveMenuOpen,
+        hasIcon: hasIcon,
+        icon: icon,
+        isResponsive: isResponsive,
+        isHiddenByDefault: 'always' === overlayMenu,
+        overlayBackgroundColor: overlayBackgroundColor,
+        overlayTextColor: overlayTextColor,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_unsavedInnerBlocks.default, {
+          createNavigationMenu: createNavigationMenu,
+          blocks: uncontrolledInnerBlocks,
+          hasSelection: isSelected || isInnerBlockSelected
+        })
+      })]
+    });
   }
 
   // Show a warning if the selected menu is no longer available.
   // TODO - the user should be able to select a new one?
   if (ref && isNavigationMenuMissing) {
-    return (0, _react.createElement)(TagName, {
-      ...blockProps
-    }, (0, _react.createElement)(_menuInspectorControls.default, {
-      clientId: clientId,
-      createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
-      createNavigationMenuIsError: createNavigationMenuIsError,
-      currentMenuId: ref,
-      isNavigationMenuMissing: isNavigationMenuMissing,
-      isManageMenusButtonDisabled: isManageMenusButtonDisabled,
-      onCreateNew: createUntitledEmptyNavigationMenu,
-      onSelectClassicMenu: onSelectClassicMenu,
-      onSelectNavigationMenu: onSelectNavigationMenu,
-      isLoading: isLoading,
-      blockEditingMode: blockEditingMode
-    }), (0, _react.createElement)(_deletedNavigationWarning.default, {
-      onCreateNew: createUntitledEmptyNavigationMenu
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagName, {
+      ...blockProps,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_menuInspectorControls.default, {
+        clientId: clientId,
+        createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
+        createNavigationMenuIsError: createNavigationMenuIsError,
+        currentMenuId: ref,
+        isNavigationMenuMissing: isNavigationMenuMissing,
+        isManageMenusButtonDisabled: isManageMenusButtonDisabled,
+        onCreateNew: createUntitledEmptyNavigationMenu,
+        onSelectClassicMenu: onSelectClassicMenu,
+        onSelectNavigationMenu: onSelectNavigationMenu,
+        isLoading: isLoading,
+        blockEditingMode: blockEditingMode
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_deletedNavigationWarning.default, {
+        onCreateNew: createUntitledEmptyNavigationMenu
+      })]
+    });
   }
   if (isEntityAvailable && hasAlreadyRendered) {
-    return (0, _react.createElement)("div", {
-      ...blockProps
-    }, (0, _react.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Block cannot be rendered inside itself.')));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ...blockProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.Warning, {
+        children: (0, _i18n.__)('Block cannot be rendered inside itself.')
+      })
+    });
   }
   const PlaceholderComponent = CustomPlaceholder ? CustomPlaceholder : _placeholder.default;
 
@@ -531,72 +570,81 @@ function Navigation({
    */
 
   if (isPlaceholder && CustomPlaceholder) {
-    return (0, _react.createElement)(TagName, {
-      ...blockProps
-    }, (0, _react.createElement)(PlaceholderComponent, {
-      isSelected: isSelected,
-      currentMenuId: ref,
-      clientId: clientId,
-      canUserCreateNavigationMenus: canUserCreateNavigationMenus,
-      isResolvingCanUserCreateNavigationMenus: isResolvingCanUserCreateNavigationMenus,
-      onSelectNavigationMenu: onSelectNavigationMenu,
-      onSelectClassicMenu: onSelectClassicMenu,
-      onCreateEmpty: createUntitledEmptyNavigationMenu
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
+      ...blockProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PlaceholderComponent, {
+        isSelected: isSelected,
+        currentMenuId: ref,
+        clientId: clientId,
+        canUserCreateNavigationMenus: canUserCreateNavigationMenus,
+        isResolvingCanUserCreateNavigationMenus: isResolvingCanUserCreateNavigationMenus,
+        onSelectNavigationMenu: onSelectNavigationMenu,
+        onSelectClassicMenu: onSelectClassicMenu,
+        onCreateEmpty: createUntitledEmptyNavigationMenu
+      })
+    });
   }
-  return (0, _react.createElement)(_coreData.EntityProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_coreData.EntityProvider, {
     kind: "postType",
     type: "wp_navigation",
-    id: ref
-  }, (0, _react.createElement)(_blockEditor.RecursionProvider, {
-    uniqueId: recursionId
-  }, (0, _react.createElement)(_menuInspectorControls.default, {
-    clientId: clientId,
-    createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
-    createNavigationMenuIsError: createNavigationMenuIsError,
-    currentMenuId: ref,
-    isNavigationMenuMissing: isNavigationMenuMissing,
-    isManageMenusButtonDisabled: isManageMenusButtonDisabled,
-    onCreateNew: createUntitledEmptyNavigationMenu,
-    onSelectClassicMenu: onSelectClassicMenu,
-    onSelectNavigationMenu: onSelectNavigationMenu,
-    isLoading: isLoading,
-    blockEditingMode: blockEditingMode
-  }), blockEditingMode === 'default' && stylingInspectorControls, blockEditingMode === 'default' && isEntityAvailable && (0, _react.createElement)(_blockEditor.InspectorControls, {
-    group: "advanced"
-  }, hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && (0, _react.createElement)(_navigationMenuNameControl.default, null), hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && (0, _react.createElement)(_navigationMenuDeleteControl.default, {
-    onDelete: () => {
-      replaceInnerBlocks(clientId, []);
-      showNavigationMenuStatusNotice((0, _i18n.__)('Navigation Menu successfully deleted.'));
-    }
-  }), (0, _react.createElement)(_manageMenusButton.default, {
-    disabled: isManageMenusButtonDisabled,
-    className: "wp-block-navigation-manage-menus-button"
-  })), (0, _react.createElement)(TagName, {
-    ...blockProps,
-    "aria-describedby": !isPlaceholder && !isLoading ? accessibleDescriptionId : undefined
-  }, isLoading && (0, _react.createElement)("div", {
-    className: "wp-block-navigation__loading-indicator-container"
-  }, (0, _react.createElement)(_components.Spinner, {
-    className: "wp-block-navigation__loading-indicator"
-  })), !isLoading && (0, _react.createElement)(_react.Fragment, null, (0, _react.createElement)(_accessibleMenuDescription.default, {
-    id: accessibleDescriptionId
-  }), (0, _react.createElement)(_responsiveWrapper.default, {
-    id: clientId,
-    onToggle: setResponsiveMenuVisibility,
-    hasIcon: hasIcon,
-    icon: icon,
-    isOpen: isResponsiveMenuOpen,
-    isResponsive: isResponsive,
-    isHiddenByDefault: 'always' === overlayMenu,
-    overlayBackgroundColor: overlayBackgroundColor,
-    overlayTextColor: overlayTextColor
-  }, isEntityAvailable && (0, _react.createElement)(_innerBlocks.default, {
-    clientId: clientId,
-    hasCustomPlaceholder: !!CustomPlaceholder,
-    templateLock: templateLock,
-    orientation: orientation
-  }))))));
+    id: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.RecursionProvider, {
+      uniqueId: recursionId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_menuInspectorControls.default, {
+        clientId: clientId,
+        createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
+        createNavigationMenuIsError: createNavigationMenuIsError,
+        currentMenuId: ref,
+        isNavigationMenuMissing: isNavigationMenuMissing,
+        isManageMenusButtonDisabled: isManageMenusButtonDisabled,
+        onCreateNew: createUntitledEmptyNavigationMenu,
+        onSelectClassicMenu: onSelectClassicMenu,
+        onSelectNavigationMenu: onSelectNavigationMenu,
+        isLoading: isLoading,
+        blockEditingMode: blockEditingMode
+      }), blockEditingMode === 'default' && stylingInspectorControls, blockEditingMode === 'default' && isEntityAvailable && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.InspectorControls, {
+        group: "advanced",
+        children: [hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationMenuNameControl.default, {}), hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationMenuDeleteControl.default, {
+          onDelete: () => {
+            replaceInnerBlocks(clientId, []);
+            showNavigationMenuStatusNotice((0, _i18n.__)('Navigation Menu successfully deleted.'));
+          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_manageMenusButton.default, {
+          disabled: isManageMenusButtonDisabled,
+          className: "wp-block-navigation-manage-menus-button"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagName, {
+        ...blockProps,
+        "aria-describedby": !isPlaceholder && !isLoading ? accessibleDescriptionId : undefined,
+        children: [isLoading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "wp-block-navigation__loading-indicator-container",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {
+            className: "wp-block-navigation__loading-indicator"
+          })
+        }), !isLoading && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_accessibleMenuDescription.default, {
+            id: accessibleDescriptionId
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_responsiveWrapper.default, {
+            id: clientId,
+            onToggle: setResponsiveMenuVisibility,
+            hasIcon: hasIcon,
+            icon: icon,
+            isOpen: isResponsiveMenuOpen,
+            isResponsive: isResponsive,
+            isHiddenByDefault: 'always' === overlayMenu,
+            overlayBackgroundColor: overlayBackgroundColor,
+            overlayTextColor: overlayTextColor,
+            children: isEntityAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_innerBlocks.default, {
+              clientId: clientId,
+              hasCustomPlaceholder: !!CustomPlaceholder,
+              templateLock: templateLock,
+              orientation: orientation
+            })
+          })]
+        })]
+      })]
+    })
+  });
 }
 var _default = exports.default = (0, _blockEditor.withColors)({
   textColor: 'color'