Dropdown Menus

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/releaseNotes/components.md

@@ -1,6 +1,19 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages.
 
+### version 3.11.0
+*Released*: 29 January 2024
+- Remove MultiMenuButton
+  - it was unused
+- Add DropdownButton
+- Add DropdownAnchor
+- Add SplitButton
+- Add MenuItem
+- Add MenuHeader
+- Add MenuDivider
+- Update usages of react-bootstrap DropdownButton, SplitButton, MenuItem to internal versions
+- ManageDropdownMenu: remove all props
+
 ### version 3.10.0
 *Released*: 26 January 2024
 - Add `AuditSettings` panel for configuring whether user comments are required for data changes

packages/components/src/index.ts

@@ -99,7 +99,6 @@ import { LockIcon } from './internal/components/base/LockIcon';
 import { ExpandableFilterToggle } from './internal/components/base/ExpandableFilterToggle';
 import { DragDropHandle } from './internal/components/base/DragDropHandle';
 import { FieldExpansionToggle } from './internal/components/base/FieldExpansionToggle';
-import { MultiMenuButton } from './internal/components/menus/MultiMenuButton';
 import { SubMenu } from './internal/components/menus/SubMenu';
 import { SubMenuItem } from './internal/components/menus/SubMenuItem';
 import { SelectionMenuItem } from './internal/components/menus/SelectionMenuItem';
@@ -165,7 +164,6 @@ import { RequiresPermission } from './internal/components/base/Permissions';
 import { PaginationButtons } from './internal/components/buttons/PaginationButtons';
 import { ManageDropdownButton } from './internal/components/buttons/ManageDropdownButton';
 import { WizardNavButtons } from './internal/components/buttons/WizardNavButtons';
-import { SplitButtonGroup } from './internal/components/buttons/SplitButtonGroup';
 import { ToggleButtons, ToggleIcon } from './internal/components/buttons/ToggleButtons';
 import { DisableableButton } from './internal/components/buttons/DisableableButton';
 import { ResponsiveMenuButton } from './internal/components/buttons/ResponsiveMenuButton';
@@ -838,6 +836,7 @@ import { getFolderTestAPIWrapper } from './internal/components/container/FolderA
 import { OverlayTrigger, useOverlayTriggerState } from './internal/OverlayTrigger';
 import { Tooltip } from './internal/Tooltip';
 import { Popover } from './internal/Popover';
+import { DropdownAnchor, DropdownButton, MenuDivider, MenuItem, MenuHeader, SplitButton } from './internal/dropdowns';
 
 // See Immer docs for why we do this: https://immerjs.github.io/immer/docs/installation#pick-your-immer-version
 enableMapSet();
@@ -1511,12 +1510,10 @@ export {
     parseCsvString,
     quoteValueWithDelimiters,
     // buttons and menus
-    MultiMenuButton,
     SubMenu,
     SubMenuItem,
     SelectionMenuItem,
     ManageDropdownButton,
-    SplitButtonGroup,
     PaginationButtons,
     ToggleButtons,
     ToggleIcon,
@@ -1681,6 +1678,12 @@ export {
     Popover,
     OverlayTrigger,
     useOverlayTriggerState,
+    DropdownAnchor,
+    DropdownButton,
+    MenuDivider,
+    MenuItem,
+    MenuHeader,
+    SplitButton,
 };
 
 //  Due to babel-loader & typescript babel plugins we need to export/import types separately. The babel plugins require

packages/components/src/internal/OverlayTrigger.tsx

@@ -16,7 +16,7 @@ import { usePortalRef } from './hooks';
 
 interface OverlayTriggerState<T extends Element = HTMLDivElement> {
     onMouseEnter: () => void;
-    onMouseLeave: () => void;
+    onMouseOut: () => void;
     onClick: () => void;
     portalEl: HTMLElement;
     show: boolean;
@@ -54,7 +54,7 @@ export function useOverlayTriggerState<T extends Element = HTMLDivElement>(
 
         setShow(true);
     }, [delay, hoverEventsEnabled]);
-    const onMouseLeave = useCallback(() => {
+    const onMouseOut = useCallback(() => {
         if (!hoverEventsEnabled) return;
 
         setTimeoutId(currentId => {
@@ -72,7 +72,7 @@ export function useOverlayTriggerState<T extends Element = HTMLDivElement>(
     return {
         onClick,
         onMouseEnter,
-        onMouseLeave,
+        onMouseOut,
         portalEl,
         show,
         targetRef,
@@ -117,7 +117,7 @@ export const OverlayTrigger: FC<Props> = ({
     overlay,
     triggerType = 'hover',
 }) => {
-    const { onMouseEnter, onMouseLeave, onClick, portalEl, show, targetRef } = useOverlayTriggerState(
+    const { onMouseEnter, onMouseOut, onClick, portalEl, show, targetRef } = useOverlayTriggerState(
         id,
         triggerType === 'hover',
         triggerType === 'click',
@@ -128,7 +128,7 @@ export const OverlayTrigger: FC<Props> = ({
     const clonedContent = cloneElement(overlay, { targetRef });
 
     return (
-        <div className={className_} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick}>
+        <div className={className_} onMouseEnter={onMouseEnter} onMouseLeave={onMouseOut} onClick={onClick}>
             {clonedChild}
 
             {show && createPortal(clonedContent, portalEl)}

packages/components/src/internal/announcements/ThreadBlock.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
-import { Dropdown, MenuItem, Modal } from 'react-bootstrap';
+import { Modal } from 'react-bootstrap';
 import moment from 'moment';
 import { User, UserWithPermissions } from '@labkey/api';
 
@@ -9,6 +9,8 @@ import { Alert } from '../components/base/Alert';
 
 import { UserLink } from '../components/user/UserLink';
 
+import { DropdownAnchor, MenuItem } from '../dropdowns';
+
 import { AnnouncementModel } from './model';
 import { ThreadEditor, ThreadEditorProps } from './ThreadEditor';
 import { ThreadAttachments } from './ThreadAttachments';
@@ -106,23 +108,22 @@ const ThreadBlockHeader: FC<ThreadBlockHeaderProps> = props => {
                     {isEdited ? ' (Edited)' : ''}
                 </span>
                 {(onDelete || onEdit) && (
-                    <Dropdown className="thread-block-header__menu" componentClass="span" id="thread-block-header-menu">
-                        <Dropdown.Toggle useAnchor={true}>
-                            <i className="fa fa-ellipsis-v" />
-                        </Dropdown.Toggle>
-                        <Dropdown.Menu className="pull-right">
-                            {onEdit !== undefined && (
-                                <MenuItem className="thread-block-header__menu-edit" onClick={onEdit}>
-                                    Edit Comment
-                                </MenuItem>
-                            )}
-                            {onDelete !== undefined && (
-                                <MenuItem className="thread-block-header__menu-delete" onClick={onShowDelete}>
-                                    Delete {isThread ? 'Thread' : 'Reply'}
-                                </MenuItem>
-                            )}
-                        </Dropdown.Menu>
-                    </Dropdown>
+                    <DropdownAnchor
+                        className="thread-block-header__menu"
+                        title={<i className="fa fa-ellipsis-v" />}
+                        pullRight
+                    >
+                        {onEdit !== undefined && (
+                            <MenuItem className="thread-block-header__menu-edit" onClick={onEdit}>
+                                Edit Comment
+                            </MenuItem>
+                        )}
+                        {onDelete !== undefined && (
+                            <MenuItem className="thread-block-header__menu-delete" onClick={onShowDelete}>
+                                Delete {isThread ? 'Thread' : 'Reply'}
+                            </MenuItem>
+                        )}
+                    </DropdownAnchor>
                 )}
             </div>
             {showDeleteModal && isThread && <DeleteThreadModal cancel={onCancelDelete} onDelete={onDelete} />}
@@ -229,7 +230,7 @@ export const ThreadBlock: FC<ThreadBlockProps> = props => {
                         {error !== undefined && <Alert>{error}</Alert>}
                         <div className="thread-block-body__content" dangerouslySetInnerHTML={threadBody} />
 
-                        <ThreadAttachments attachments={thread.attachments ?? []} containerPath={containerPath}/>
+                        <ThreadAttachments attachments={thread.attachments ?? []} containerPath={containerPath} />
 
                         {allowReply && (
                             <span className="clickable-text thread-block__reply" onClick={onReply}>
@@ -238,7 +239,9 @@ export const ThreadBlock: FC<ThreadBlockProps> = props => {
                         )}
                         {showReplyToggle && (
                             <span className="clickable-text thread-block__toggle-reply" onClick={onToggleResponses}>
-                                {showResponses ? 'Hide all replies' : `Show all replies (${thread.responses.length.toLocaleString()})`}
+                                {showResponses
+                                    ? 'Hide all replies'
+                                    : `Show all replies (${thread.responses.length.toLocaleString()})`}
                             </span>
                         )}
                         {showRecent && (

packages/components/src/internal/announcements/ThreadEditor.tsx

@@ -11,7 +11,6 @@ import React, {
     useState,
 } from 'react';
 import classNames from 'classnames';
-import { Dropdown, MenuItem } from 'react-bootstrap';
 
 import { generateId, handleFileInputChange } from '../util/utils';
 import { isLoading, LoadingState } from '../../public/LoadingState';
@@ -23,6 +22,7 @@ import { AnnouncementsAPIWrapper } from './APIWrapper';
 
 import { RemoveAttachmentModal, ThreadAttachments } from './ThreadAttachments';
 import { Attachment, AnnouncementModel } from './model';
+import { DropdownAnchor, MenuItem } from '../dropdowns';
 
 // Check if a line starts with any spaces, a number, followed by a period and a space.
 const orderedBulletRe = /^\s*\d+. /;
@@ -160,7 +160,6 @@ interface ThreadEditorToolbarProps {
 }
 
 const ThreadEditorToolbar: FC<ThreadEditorToolbarProps> = memo(({ inputRef, setBody, setView, view }) => {
-    const id = useMemo(() => generateId() + '-thread-editor-dropdown', []);
     const bold = useCallback(() => {
         const [body, selectionStart, selectionEnd] = applyTemplate(inputRef.current, '**', '**');
         setBody(body, selectionStart, selectionEnd);
@@ -188,14 +187,10 @@ const ThreadEditorToolbar: FC<ThreadEditorToolbarProps> = memo(({ inputRef, setB
     return (
         <div className="thread-editor-toolbar editor-toolbar">
             <div className="editor-toolbar__section insert-menu">
-                <Dropdown componentClass="div" id={id}>
-                    <Dropdown.Toggle useAnchor={true}>{view}</Dropdown.Toggle>
-
-                    <Dropdown.Menu>
-                        <MenuItem onClick={setEditMode}>{EditorView.edit}</MenuItem>
-                        <MenuItem onClick={setPreviewMode}>{EditorView.preview}</MenuItem>
-                    </Dropdown.Menu>
-                </Dropdown>
+                <DropdownAnchor title={view}>
+                    <MenuItem onClick={setEditMode}>{EditorView.edit}</MenuItem>
+                    <MenuItem onClick={setPreviewMode}>{EditorView.preview}</MenuItem>
+                </DropdownAnchor>
             </div>
 
             <div className="editor-toolbar__section">

packages/components/src/internal/components/administration/GroupManagementPage.tsx

@@ -1,5 +1,4 @@
 import React, { FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { MenuItem } from 'react-bootstrap';
 import { List } from 'immutable';
 
 import { BasePermissionsCheckPage } from '../permissions/BasePermissionsCheckPage';
@@ -32,6 +31,8 @@ import { AUDIT_KEY } from '../../app/constants';
 
 import { NotFound } from '../base/NotFound';
 
+import { MenuItem } from '../../dropdowns';
+
 import { useAdministrationSubNav } from './useAdministrationSubNav';
 
 import { GroupAssignments } from './GroupAssignments';
@@ -174,7 +175,7 @@ export const GroupManagementPageImpl: FC<GroupManagementPageProps> = memo(props
         return (
             <>
                 <CreatedModified row={row} useServerDate={false} />
-                <ManageDropdownButton collapsed id="admin-page-manage" pullRight>
+                <ManageDropdownButton>
                     <MenuItem
                         href={AppURL.create(AUDIT_KEY)
                             .addParam(AUDIT_EVENT_TYPE_PARAM, GROUP_AUDIT_QUERY.value)

packages/components/src/internal/components/administration/UserManagement.tsx

@@ -4,7 +4,6 @@
  */
 import React, { FC, PureComponent, ReactNode } from 'react';
 import { List } from 'immutable';
-import { MenuItem } from 'react-bootstrap';
 import { PermissionRoles, Project, Utils } from '@labkey/api';
 
 import { User } from '../base/models/User';
@@ -36,6 +35,8 @@ import { NotFound } from '../base/NotFound';
 
 import { isProductProjectsEnabled } from '../../app/utils';
 
+import { MenuItem } from '../../dropdowns';
+
 import { useAdministrationSubNav } from './useAdministrationSubNav';
 
 import { isLoginAutoRedirectEnabled, showPremiumFeatures } from './utils';
@@ -269,7 +270,7 @@ export class UserManagement extends PureComponent<UserManagementProps, State> {
 
     renderButtons = (): ReactNode => {
         return (
-            <ManageDropdownButton collapsed id="user-management-page-manage" pullRight>
+            <ManageDropdownButton>
                 <MenuItem
                     href={AppURL.create(AUDIT_KEY).addParam(AUDIT_EVENT_TYPE_PARAM, USER_AUDIT_QUERY.value).toHref()}
                 >

packages/components/src/internal/components/buttons/DisableableButton.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 export const DisableableButton: FC<Props> = memo(props => {
     const { bsStyle = 'default', children, className = '', disabledMsg, onClick, title } = props;
-    const { onMouseEnter, onMouseLeave, portalEl, show, targetRef } = useOverlayTriggerState<HTMLButtonElement>(
+    const { onMouseEnter, onMouseOut, portalEl, show, targetRef } = useOverlayTriggerState<HTMLButtonElement>(
         'disabled-button-overlay',
         disabledMsg !== undefined,
         false
@@ -36,7 +36,7 @@ export const DisableableButton: FC<Props> = memo(props => {
             disabled={disabledMsg !== undefined}
             onClick={onClick}
             onPointerEnter={onMouseEnter}
-            onPointerLeave={onMouseLeave}
+            onPointerLeave={onMouseOut}
             type="button"
             ref={targetRef}
         >