Merge pull request #7972 from weseek/support/128463-128469-version-up

support: reactstrap 9.2.0

apps/app/package.json

@@ -174,7 +174,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^9.1.1",
     "react-use-ripple": "^1.5.2",
-    "reactstrap": "^8.10.1",
+    "reactstrap": "^9.2.0",
     "reconnecting-websocket": "^4.4.0",
     "redis": "^3.0.2",
     "rehype-katex": "^6.0.2",

apps/app/src/components/BookmarkButtons.tsx

@@ -3,10 +3,10 @@ import React, {
 } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import DropdownToggle from 'reactstrap/es/DropdownToggle';
-import Popover from 'reactstrap/es/Popover';
-import PopoverBody from 'reactstrap/es/PopoverBody';
-import UncontrolledTooltip from 'reactstrap/es/UncontrolledTooltip';
+import DropdownToggle from 'reactstrap/esm/DropdownToggle';
+import Popover from 'reactstrap/esm/Popover';
+import PopoverBody from 'reactstrap/esm/PopoverBody';
+import UncontrolledTooltip from 'reactstrap/esm/UncontrolledTooltip';
 
 import { useSWRxBookmarkedUsers } from '~/stores/bookmark';
 import { useIsGuestUser } from '~/stores/context';

apps/app/src/components/Bookmarks/BookmarkFolderItemControl.tsx

@@ -27,7 +27,6 @@ export const BookmarkFolderItemControl: React.FC<{
         </DropdownToggle>
       ) }
       <DropdownMenu
-        modifiers={{ preventOverflow: { boundariesElement: 'viewport' } }}
         container="body"
         style={{ zIndex: 1055 }} /* make it larger than $zindex-modal of bootstrap */
       >

apps/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -195,8 +195,6 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
         persist
         positionFixed
         className='grw-bookmark-folder-menu'
-        // TODO: activate (https://redmine.weseek.co.jp/issues/128468)
-        // modifiers={getCustomModifiers(true)}
       >
         { renderBookmarkMenuItem() }
       </DropdownMenu>

apps/app/src/components/Bookmarks/BookmarkItem.tsx

@@ -186,7 +186,6 @@ export const BookmarkItem = (props: Props): JSX.Element => {
         </div>
 
         <UncontrolledTooltip
-          modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
           autohide={false}
           placement="right"
           target={bookmarkItemId}

apps/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -51,7 +51,7 @@ type CommonProps = {
   additionalMenuItemOnTopRenderer?: React.FunctionComponent<AdditionalMenuItemsRendererProps>,
   additionalMenuItemRenderer?: React.FunctionComponent<AdditionalMenuItemsRendererProps>,
   isInstantRename?: boolean,
-  alignRight?: boolean,
+  alignEnd?: boolean,
 }
 
 
@@ -70,7 +70,7 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
     onClickRevertMenuItem, onClickPathRecoveryMenuItem,
     additionalMenuItemOnTopRenderer: AdditionalMenuItemsOnTop,
     additionalMenuItemRenderer: AdditionalMenuItems,
-    isInstantRename, alignRight,
+    isInstantRename, alignEnd,
   } = props;
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -252,11 +252,9 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
   return (
     <DropdownMenu
       data-testid="page-item-control-menu"
-      right={alignRight}
-      // TODO: activate (https://redmine.weseek.co.jp/issues/128468)
-      // modifiers={getCustomModifiers(alignRight)}
+      end={alignEnd}
       container="body"
-      persist={!!alignRight}
+      persist={!!alignEnd}
       style={{ zIndex: 1055 }} /* make it larger than $zindex-modal of bootstrap */
     >
       {contents}

apps/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -82,11 +82,11 @@ export const InAppNotificationDropdown = (): JSX.Element => {
   }
 
   return (
-    <Dropdown className="notification-wrapper grw-notification-dropdown" isOpen={isOpen} toggle={toggleDropdownHandler} direction="right">
+    <Dropdown className="notification-wrapper grw-notification-dropdown" isOpen={isOpen} toggle={toggleDropdownHandler} direction="end">
       <DropdownToggle className="px-3 nav-link border-0 bg-transparent" innerRef={buttonRef}>
         <i className="icon-bell" /> {badge}
       </DropdownToggle>
-      <DropdownMenu right>
+      <DropdownMenu end>
         { inAppNotificationData != null && inAppNotificationData.docs.length === 0
           // no items
           ? <DropdownItem disabled>{t('in_app_notification.mark_all_as_read')}</DropdownItem>

apps/app/src/components/Navbar/SubNavButtons.tsx

@@ -245,7 +245,7 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
       ) }
       { showPageControlDropdown && (
         <PageItemControl
-          alignRight
+          alignEnd
           pageId={pageId}
           pageInfo={pageInfo}
           isEnableActions={!isGuestUser}

apps/app/src/components/Page/CopyDropdown.jsx

@@ -120,7 +120,6 @@ const CopyDropdown = (props) => {
 
         <DropdownMenu
           positionFixed
-          modifiers={{ preventOverflow: { boundariesElement: 'viewport' } }}
           style={{ zIndex: 1016 }} /* zIndex: 1016 // larger than z-index value of grw-subnav-fixed-container in GrowiSubNavigationSwitcher.module.scss */
         >
           <div className="d-flex align-items-center justify-content-between">

apps/app/src/components/PageList/PageListItemL.tsx

@@ -16,7 +16,7 @@ import { format } from 'date-fns';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import Clamp from 'react-multiline-clamp';
-import { CustomInput } from 'reactstrap';
+// import { CustomInput } from 'reactstrap';
 
 import { ISelectable } from '~/client/interfaces/selectable-all';
 import { unlink, bookmark, unbookmark } from '~/client/services/page-operation';
@@ -198,13 +198,14 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
           {/* checkbox */}
           {onCheckboxChanged != null && (
             <div className="d-flex align-items-center justify-content-center">
-              <CustomInput
+              {/* // TODO: replace CustomInput https://redmine.weseek.co.jp/issues/128494 */}
+              {/* <CustomInput
                 type="checkbox"
                 id={`cbSelect-${pageData._id}`}
                 data-testid="cb-select"
                 innerRef={inputRef}
                 onChange={(e) => { onCheckboxChanged(e.target.checked, pageData._id) }}
-              />
+              /> */}
             </div>
           )}
 
@@ -258,7 +259,7 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
               {hasBrowsingRights
                 && <div className="ml-auto">
                   <PageItemControl
-                    alignRight
+                    alignEnd
                     pageId={pageData._id}
                     pageInfo={isIPageInfoForListing(pageMeta) ? pageMeta : undefined}
                     isEnableActions={isEnableActions}

apps/app/src/components/RevisionComparer/RevisionComparer.tsx

@@ -77,7 +77,7 @@ export const RevisionComparer = (props: RevisionComparerProps): JSX.Element => {
           >
             <i className="ti ti-clipboard"></i>
           </DropdownToggle>
-          <DropdownMenu positionFixed right modifiers={{ preventOverflow: { boundariesElement: undefined } }}>
+          <DropdownMenu positionFixed end >
             {/* Page path URL */}
             <CopyToClipboard text={generateURL(currentPagePath)}>
               <DropdownItem className="px-3">

apps/app/src/components/SavePageControls.tsx

@@ -104,7 +104,7 @@ export const SavePageControls = (props: SavePageControlsProps): JSX.Element | nu
           {labelSubmitButton}
         </Button>
         <DropdownToggle caret color="primary" disabled={isWaitingSaveProcessing} />
-        <DropdownMenu right>
+        <DropdownMenu end>
           <DropdownItem onClick={saveAndOverwriteScopesOfDescendants}>
             {labelOverwriteScopes}
           </DropdownItem>

apps/app/src/components/SearchPage/OperateAllControl.tsx

@@ -1,7 +1,8 @@
 import React, {
   ChangeEvent, forwardRef, ForwardRefRenderFunction, useImperativeHandle, useRef,
 } from 'react';
-import { CustomInput } from 'reactstrap';
+
+// import { CustomInput } from 'reactstrap';
 import { ISelectableAndIndeterminatable } from '~/client/interfaces/selectable-all';
 import { IndeterminateInputElement } from '~/interfaces/indeterminate-input-elm';
 
@@ -55,14 +56,15 @@ const OperateAllControlSubstance: ForwardRefRenderFunction<ISelectableAndIndeter
   return (
 
     <div className="d-flex align-items-center">
-      <CustomInput
+      {/* // TODO: replace CustomInput https://redmine.weseek.co.jp/issues/128494 */}
+      {/* <CustomInput
         type="checkbox"
         id="cb-check-all"
         data-testid="cb-select-all"
         innerRef={selectAllCheckboxElm}
         disabled={isCheckboxDisabled}
         onChange={checkboxChangedHandler}
-      />
+      /> */}
       {children}
     </div>
   );

apps/app/src/components/Sidebar/Skeleton/RecentChangesContentSkeleton.tsx

@@ -4,34 +4,35 @@ import { Skeleton } from '~/components/Skeleton';
 
 import styles from '../RecentChanges.module.scss';
 
-const SkeletonItem = () => {
-
-  const isSmall = window.localStorage.isRecentChangesSidebarSmall === 'true';
-
-  return (
-    <li className={`list-group-item ${styles['list-group-item']} ${isSmall ? 'py-2' : 'py-3'} px-0`}>
-      <div className="d-flex w-100">
-        <Skeleton additionalClass='rounded-circle picture' roundedPill />
-        <div className="flex-grow-1 ml-2">
-          <Skeleton additionalClass={`grw-recent-changes-skeleton-small ${styles['grw-recent-changes-skeleton-small']}`} />
-          <Skeleton additionalClass={`grw-recent-changes-skeleton-h5 ${styles['grw-recent-changes-skeleton-h5']} ${isSmall ? 'my-0' : 'my-2'}`} />
-          <div className="d-flex justify-content-end grw-recent-changes-item-lower pt-1">
-            <Skeleton additionalClass={`grw-recent-changes-skeleton-date ${styles['grw-recent-changes-skeleton-date']}`} />
-          </div>
-        </div>
-      </div>
-    </li>
-  );
-};
+// TODO: enable skeltonItem https://redmine.weseek.co.jp/issues/128495
+// const SkeletonItem = () => {
+
+//   const isSmall = window.localStorage.isRecentChangesSidebarSmall === 'true';
+
+//   return (
+//     <li className={`list-group-item ${styles['list-group-item']} ${isSmall ? 'py-2' : 'py-3'} px-0`}>
+//       <div className="d-flex w-100">
+//         <Skeleton additionalClass='rounded-circle picture' roundedPill />
+//         <div className="flex-grow-1 ml-2">
+//           <Skeleton additionalClass={`grw-recent-changes-skeleton-small ${styles['grw-recent-changes-skeleton-small']}`} />
+//           <Skeleton additionalClass={`grw-recent-changes-skeleton-h5 ${styles['grw-recent-changes-skeleton-h5']} ${isSmall ? 'my-0' : 'my-2'}`} />
+//           <div className="d-flex justify-content-end grw-recent-changes-item-lower pt-1">
+//             <Skeleton additionalClass={`grw-recent-changes-skeleton-date ${styles['grw-recent-changes-skeleton-date']}`} />
+//           </div>
+//         </div>
+//       </div>
+//     </li>
+//   );
+// };
 
 const RecentChangesContentSkeleton = (): JSX.Element => {
 
   return (
     <div className="grw-recent-changes py-3">
       <ul className="list-group list-group-flush">
+        {/* <SkeletonItem />
         <SkeletonItem />
-        <SkeletonItem />
-        <SkeletonItem />
+        <SkeletonItem /> */}
         <li className={'list-group-item p-0'}></li>
       </ul>
     </div>);

packages/ui/package.json

@@ -24,7 +24,7 @@
     "@growi/core": "link:../core"
   },
   "devDependencies": {
-    "reactstrap": "8.10.1"
+    "reactstrap": "^9.2.0"
   },
   "peerDependencies": {
     "next": "^13",

packages/ui/src/interfaces/popper-data.ts

@@ -13,16 +13,3 @@ export interface PopperData {
     arrow: { top: number; left: number };
   };
 }
-
-export interface CustomModifiers {
-  applyStyle?: {
-    enabled: boolean
-  }
-  computeStyle?: {
-    enabled: boolean,
-    fn: (data: PopperData) => PopperData
-  }
-  preventOverflow: {
-    boundariesElement: string
-  }
-}

packages/ui/src/utils/index.ts

@@ -1,3 +1,2 @@
 export * from './browser-utils';
 export * from './use-fullscreen';
-export * from './reactstrap-modifiers';

packages/ui/src/utils/reactstrap-modifiers.ts

@@ -1,34 +0,0 @@
-import { PopperData, CustomModifiers } from '~/interfaces/popper-data';
-
-// Conditional modifiers
-// To prevent flickering. only happened when `right` is true and persist props should be enabled
-const modifiersForRightAlign: CustomModifiers = {
-  applyStyle: {
-    enabled: true,
-  },
-  computeStyle: {
-    enabled: true,
-    fn: (data: PopperData): PopperData => {
-      const popperRect = data.offsets.popper;
-      // Calculate transform styles
-      const newTransform = `translate3d(${popperRect.left - window.innerWidth + popperRect.width}px, ${popperRect.top}px, 0px)`;
-      const styles = {
-        top: '0px',
-        right: '0px',
-        willChange: 'transform',
-        transform: newTransform,
-      };
-      data.styles = { ...data.styles, ...styles };
-      return data;
-    },
-  },
-  preventOverflow: { boundariesElement: 'viewport' },
-};
-
-export const getCustomModifiers = (alignRight?: boolean): CustomModifiers => {
-  return (
-    alignRight
-      ? modifiersForRightAlign
-      : { preventOverflow: { boundariesElement: 'viewport' } }
-  );
-};

yarn.lock

@@ -2116,6 +2116,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.5.5":
+  version "7.22.10"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682"
+  integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8"
@@ -3832,7 +3839,7 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.11.8":
+"@popperjs/core@^2.11.8", "@popperjs/core@^2.6.0":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@@ -7745,14 +7752,7 @@ dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz#caa6d08f60388d0bb4539dd75fe458a9a1d0014c"
   integrity sha512-Xu9mD0UjrJisTmv7lmVSDMagQcU9R5hwAbxsaAE/35XPnPLJobbuREfV/rraiSaEj/UOvgrzQs66zyTWTlyd+g==
 
-dom-helpers@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-
-dom-helpers@^5.2.0:
+dom-helpers@^5.0.1, dom-helpers@^5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
@@ -14422,7 +14422,7 @@ react-overlays@^5.1.0:
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
-react-popper@^1.0.0, react-popper@^1.3.6:
+react-popper@^1.0.0:
   version "1.3.11"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
   integrity sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==
@@ -14435,7 +14435,7 @@ react-popper@^1.0.0, react-popper@^1.3.6:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-react-popper@^2.2.5:
+react-popper@^2.2.4, react-popper@^2.2.5:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
   integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
@@ -14474,15 +14474,15 @@ react-toastify@^9.1.1:
   dependencies:
     clsx "^1.1.1"
 
-react-transition-group@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-3.0.0.tgz#36efa4db970d5eec5e3028e0c458931163fa3b9b"
-  integrity sha512-A9ojB/LWECbFj58SNfjK1X9aaAU+1olLS0DFSikvrr2KfMaiBELemHDa5dKNvcTk2t3gUtDL/PJpFrBKDfMpLg==
+react-transition-group@^4.4.2:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
   dependencies:
-    dom-helpers "^3.4.0"
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
 
 react-use-ripple@^1.5.2:
   version "1.5.2"
@@ -14496,16 +14496,17 @@ react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
-reactstrap@8.10.1, reactstrap@^8.10.1:
-  version "8.10.1"
-  resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.10.1.tgz#43ea596c7f82f88997a9c8aae203417910262d3f"
-  integrity sha512-StjLADa/12yMNjafrSs+UD7sZAGtKpLO9fZp++2Dj0IzJinqY7eQhXlM3nFf0q40YsIcLvQdFc9pKF8PF4f0Qg==
+reactstrap@^9.2.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-9.2.0.tgz#3bde2b2e39e91962676167ac60edea89f8584382"
+  integrity sha512-WWLTEG00qYav0E55PorWHReYTkz5IqkVmQNy0h6U81yqjSp9fOLFGV5pYSVeAUz+yRhU/RTE0oAWy22zr6sOIw==
   dependencies:
     "@babel/runtime" "^7.12.5"
+    "@popperjs/core" "^2.6.0"
     classnames "^2.2.3"
     prop-types "^15.5.8"
-    react-popper "^1.3.6"
-    react-transition-group "^3.0.0"
+    react-popper "^2.2.4"
+    react-transition-group "^4.4.2"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -14804,6 +14805,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"
+  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
+
 regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.3.0, regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"