fix

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.tsx

@@ -4,76 +4,31 @@ import React, {
 
 import nodePath from 'path';
 
-
-import { pathUtils, pagePathUtils } from '@growi/core';
+import { pagePathUtils } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 import { useDrag, useDrop } from 'react-dnd';
-import { DropdownToggle } from 'reactstrap';
-
-import { bookmark, unbookmark, resumeRenameOperation } from '~/client/services/page-operation';
-import { apiv3Post, apiv3Put } from '~/client/util/apiv3-client';
-import { ValidationTarget } from '~/client/util/input-validator';
-import { toastWarning, toastError, toastSuccess } from '~/client/util/toastr';
-import { NotAvailableForGuest } from '~/components/NotAvailableForGuest';
-import { NotAvailableForReadOnlyUser } from '~/components/NotAvailableForReadOnlyUser';
+
+import { apiv3Put } from '~/client/util/apiv3-client';
+import { toastWarning, toastError } from '~/client/util/toastr';
 import {
-  IPageHasId, IPageInfoAll, IPageToDeleteWithMeta, IPageForItem,
+  IPageHasId,
 } from '~/interfaces/page';
-import { useSWRMUTxCurrentUserBookmarks } from '~/stores/bookmark';
-import { useSWRMUTxPageInfo } from '~/stores/page';
 import { mutatePageTree, useSWRxPageChildren } from '~/stores/page-listing';
-import { usePageTreeDescCountMap } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
-import ClosableTextInput from '../../Common/ClosableTextInput';
-import { PageItemControl } from '../../Common/Dropdown/PageItemControl';
-import { NewPageCreateButton } from '../../TreeItem/NewPageCreateButton';
-import { NewPageInput } from '../../TreeItem/NewPageInput';
 import SimpleItem, {
-  SimpleItemProps, SimpleItemToolProps, NotDraggableForClosableTextInput, SimpleItemTool,
+  SimpleItemProps,
 } from '../../TreeItem/SimpleItem';
+import { useNewPageInput } from '../../TreeItem/UseNewPageInput';
 import { ItemNode } from '../PageTree/ItemNode';
 
+import { Ellipsis } from './Ellipsis';
+
 const logger = loggerFactory('growi:cli:Item');
 
 type PageTreeItemPropsOptional = 'itemRef' | 'itemClass' | 'mainClassName';
 type PageTreeItemProps = Omit<SimpleItemProps, PageTreeItemPropsOptional> & {key};
 
-export const useNewPageInput = () => {
-
-  const [isNewPageInputShown, setNewPageInputShown] = useState(false);
-
-  const NewPageCreateButtonWrapper = (props) => {
-    return (
-      <NewPageCreateButton
-        page={props.page}
-        children={props.children}
-        stateHandlers={props.stateHandlers}
-        setNewPageInputShown={setNewPageInputShown}
-      />
-    );
-  };
-
-  const NewPageInputWrapper = (props) => {
-    return (
-      <NewPageInput
-        page={props.page}
-        isEnableActions={props.isEnableActions}
-        children={props.chilren}
-        stateHandlers={props.stateHandlers}
-        isNewPageInputShown={isNewPageInputShown}
-        setNewPageInputShown={setNewPageInputShown}
-      />
-    );
-  };
-
-
-  return {
-    NewPageInputWrapper,
-    NewPageCreateButtonWrapper,
-  };
-};
-
 export const PageTreeItem: FC<PageTreeItemProps> = (props) => {
   const getNewPathAfterMoved = (droppedPagePath: string, newParentPagePath: string): string => {
     const pageTitle = nodePath.basename(droppedPagePath);

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItemForModal.tsx

@@ -1,15 +1,14 @@
 import React, { FC } from 'react';
 
 import SimpleItem, { SimpleItemProps, SimpleItemTool } from '../../TreeItem/SimpleItem';
-
-import { useNewPageInput } from './PageTreeItem';
+import { useNewPageInput } from '../../TreeItem/UseNewPageInput';
 
 type Optional = 'itemRef' | 'itemClass' | 'mainClassName';
 type PageTreeItemProps = Omit<SimpleItemProps, Optional> & {key};
 
 export const PageTreeItemForModal: FC<PageTreeItemProps> = (props) => {
 
-  const { NewPageInput, NewPageCreateButton } = useNewPageInput();
+  const { NewPageInputWrapper, NewPageCreateButtonWrapper } = useNewPageInput();
 
   return (
     <SimpleItem
@@ -22,9 +21,9 @@ export const PageTreeItemForModal: FC<PageTreeItemProps> = (props) => {
       onRenamed={props.onRenamed}
       onClickDuplicateMenuItem={props.onClickDuplicateMenuItem}
       onClickDeleteMenuItem={props.onClickDeleteMenuItem}
-      customNextComponents={[NewPageInput]}
+      customNextComponents={[NewPageInputWrapper]}
       itemClass={PageTreeItemForModal}
-      customEndComponents={[SimpleItemTool, NewPageCreateButton]}
+      customEndComponents={[SimpleItemTool, NewPageCreateButtonWrapper]}
     />
   );
 };

apps/app/src/components/TreeItem/NewPageInput.tsx

@@ -75,16 +75,14 @@ export const NewPageInput = (props) => {
   return (
     <>
       {isEnableActions && isNewPageInputShown && (
-        <div className="flex-fill">
-          <NotDraggableForClosableTextInput>
-            <ClosableTextInput
-              placeholder={t('Input page name')}
-              onClickOutside={() => { setNewPageInputShown(false) }}
-              onPressEnter={onPressEnterForCreateHandler}
-              validationTarget={ValidationTarget.PAGE}
-            />
-          </NotDraggableForClosableTextInput>
-        </div>
+        <NotDraggableForClosableTextInput>
+          <ClosableTextInput
+            placeholder={t('Input page name')}
+            onClickOutside={() => { setNewPageInputShown(false) }}
+            onPressEnter={onPressEnterForCreateHandler}
+            validationTarget={ValidationTarget.PAGE}
+          />
+        </NotDraggableForClosableTextInput>
       )}
     </>
   );

apps/app/src/components/TreeItem/SimpleItem.tsx

@@ -258,9 +258,11 @@ const SimpleItem: FC<SimpleItemProps> = (props) => {
         ))}
       </li>
 
-      {CustomNextComponents?.map((UnderItemContent, index) => (
-        <UnderItemContent key={index} {...SimpleItemContentProps}/>
-      ))}
+      <div className="flex-fill">
+        {CustomNextComponents?.map((UnderItemContent, index) => (
+          <UnderItemContent key={index} {...SimpleItemContentProps}/>
+        ))}
+      </div>
 
       {
         isOpen && hasChildren() && currentChildren.map((node, index) => (

apps/app/src/components/TreeItem/UseNewPageInput.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+import { NewPageCreateButton } from './NewPageCreateButton';
+import { NewPageInput } from './NewPageInput';
+
+export const useNewPageInput = () => {
+
+  const [isNewPageInputShown, setNewPageInputShown] = useState(false);
+
+  const NewPageCreateButtonWrapper = (props) => {
+    return (
+      <NewPageCreateButton
+        page={props.page}
+        children={props.children}
+        stateHandlers={props.stateHandlers}
+        setNewPageInputShown={setNewPageInputShown}
+      />
+    );
+  };
+
+  const NewPageInputWrapper = (props) => {
+    return (
+      <NewPageInput
+        page={props.page}
+        isEnableActions={props.isEnableActions}
+        children={props.chilren}
+        stateHandlers={props.stateHandlers}
+        isNewPageInputShown={isNewPageInputShown}
+        setNewPageInputShown={setNewPageInputShown}
+      />
+    );
+  };
+
+
+  return {
+    NewPageInputWrapper,
+    NewPageCreateButtonWrapper,
+  };
+};