nbudin · Nov 7, 2026 · Nov 7, 2026 · Nov 7, 2026 · Nov 7, 2026
diff --git a/app/javascript/Authentication/PasswordInputWithStrengthCheck.tsx b/app/javascript/Authentication/PasswordInputWithStrengthCheck.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import zxcvbn, { ZXCVBNResult } from 'zxcvbn';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { useLitformPopperWithAutoClosing, useToggleOpen } from '@neinteractiveliterature/litform';
+import { useLitformFloatingWithAutoClosing, useToggleOpen } from '@neinteractiveliterature/litform';
 
 type PasswordFeedbackProps = {
   result?: ZXCVBNResult | null;
@@ -101,7 +101,7 @@ function PasswordInputWithStrengthCheck({
   const [arrow, setArrow] = useState<HTMLSpanElement | null>(null);
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
-  const { styles, attributes, state, update } = useLitformPopperWithAutoClosing(
+  const { styles, attributes, state, update } = useLitformFloatingWithAutoClosing(
     dropdownMenu,
     dropdownButton,
     arrow,
@@ -157,8 +157,8 @@ function PasswordInputWithStrengthCheck({
               'd-none': !dropdownOpen || !hasFeedback,
             })}
             ref={setDropdownMenu}
-            style={styles.popper}
-            {...attributes.popper}
+            style={styles.floating}
+            {...attributes.floating}
           >
             <div className="card-body">
               <PasswordFeedback result={passwordStrengthResult} />

diff --git a/app/javascript/EventAdmin/index.tsx b/app/javascript/EventAdmin/index.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { NavLink, useLocation, Outlet } from 'react-router';
 import classNames from 'classnames';
-import { useLitformPopperWithAutoClosing } from '@neinteractiveliterature/litform';
+import { useLitformFloatingWithAutoClosing } from '@neinteractiveliterature/litform';
 
 import sortEventCategories from './sortEventCategories';
 import buildEventCategoryUrl from './buildEventCategoryUrl';
@@ -22,9 +22,9 @@ function EventAdmin() {
   const [menu, setMenu] = useState<HTMLDivElement | null>(null);
   const [menuDropdown, setMenuDropdown] = useState<HTMLLIElement | null>(null);
 
-  const { styles, attributes } = useLitformPopperWithAutoClosing(menu, menuDropdown, undefined, setMenuOpen, {
+  const { styles, attributes } = useLitformFloatingWithAutoClosing(menu, menuDropdown, undefined, setMenuOpen, {
     placement: 'bottom-start',
-    modifiers: [{ name: 'offset', options: { offset: [0, 2] } }],
+    offset: 2,
   });
 
   if (authorizationWarning) return authorizationWarning;
@@ -45,9 +45,9 @@ function EventAdmin() {
           </button>
           <div
             className={classNames('dropdown-menu m-0', { show: menuOpen })}
-            style={styles.popper}
+            style={styles.floating}
             ref={setMenu}
-            {...attributes.popper}
+            {...attributes.floating}
           >
             {eventCategories.map((eventCategory) => (
               <NavLink

diff --git a/app/javascript/EventCategoryAdmin/EventCategoryForm.tsx b/app/javascript/EventCategoryAdmin/EventCategoryForm.tsx
@@ -8,7 +8,7 @@ import {
   BooleanInput,
   BootstrapFormTextarea,
   useToggleOpen,
-  useLitformPopperWithAutoClosing,
+  useLitformFloatingWithAutoClosing,
   usePropertySetters,
 } from '@neinteractiveliterature/litform';
 
@@ -69,7 +69,7 @@ function EventColorPicker({ variant, eventRunProps, eventCategory, color, setCol
   const [arrow, setArrow] = useState<HTMLSpanElement | null>(null);
   const [visible, setVisible] = useState(false);
 
-  const { styles, attributes, state, update } = useLitformPopperWithAutoClosing(
+  const { styles, attributes, state, update } = useLitformFloatingWithAutoClosing(
     tooltip,
     dropdownButton,
     arrow,
@@ -96,8 +96,8 @@ function EventColorPicker({ variant, eventRunProps, eventCategory, color, setCol
           'd-none': !visible,
         })}
         ref={setTooltip}
-        style={styles.popper}
-        {...attributes.popper}
+        style={styles.floating}
+        {...attributes.floating}
       >
         <div className="card-body">
           <ColorPicker value={color} onChange={setColor} />

diff --git a/app/javascript/EventsApp/MySignupQueue/UserSignupQueueItem.tsx b/app/javascript/EventsApp/MySignupQueue/UserSignupQueueItem.tsx
@@ -200,7 +200,6 @@ export default function UserSignupQueueItem({
                 }
                 popperOptions={{
                   placement: 'bottom-end',
-                  modifiers: [],
                 }}
               >
                 <div className="px-2 py-1">

diff --git a/app/javascript/EventsApp/RunList/RunListEventRun.tsx b/app/javascript/EventsApp/RunList/RunListEventRun.tsx
@@ -1,4 +1,4 @@
-import { useLitformPopperWithAutoClosing } from '@neinteractiveliterature/litform';
+import { useLitformFloatingWithAutoClosing } from '@neinteractiveliterature/litform';
 import { useCallback, useMemo, useState } from 'react';
 
 import { FiniteTimespan } from '../../Timespan';
@@ -31,7 +31,7 @@ export default function RunListEventRun({
   const [runDetailsElement, setRunDetailsElement] = useState<HTMLDivElement | null>(null);
   const [arrow, setArrow] = useState<HTMLSpanElement | null>(null);
 
-  const { styles, attributes, state } = useLitformPopperWithAutoClosing(
+  const { styles, attributes, state } = useLitformFloatingWithAutoClosing(
     runDetailsElement,
     runDisplayElement,
     arrow,

diff --git a/app/javascript/EventsApp/ScheduleGrid/RunDetails.tsx b/app/javascript/EventsApp/ScheduleGrid/RunDetails.tsx
@@ -1,8 +1,7 @@
 import { useContext, useMemo } from 'react';
 import * as React from 'react';
 import { Link } from 'react-router';
-import { Placement } from '@popperjs/core';
-import { usePopper } from 'react-popper';
+import type { LitformFloatingResult, Placement } from '@neinteractiveliterature/litform';
 import { useTranslation } from 'react-i18next';
 
 import { describeAvailability, calculateAvailability, describeWaitlist } from './AvailabilityUtils';
@@ -23,8 +22,8 @@ import scheduleGridStyles from 'styles/schedule_grid.module.scss';
 
 export type RunDetailsProps = {
   placement?: Placement;
-  styles: ReturnType<typeof usePopper>['styles'];
-  attributes: ReturnType<typeof usePopper>['attributes'];
+  styles: LitformFloatingResult['styles'];
+  attributes: LitformFloatingResult['attributes'];
   toggle: () => void;
   event: ScheduleEvent;
   run: ScheduleRun;
@@ -92,9 +91,9 @@ const RunDetails = React.forwardRef<HTMLDivElement, RunDetailsProps>(function Ru
     <div
       className={`popover schedule-grid-run-details-popover ${scheduleGridStyles.scheduleGridRunDetailsPopover} bs-popover-${placement}`}
       ref={ref}
-      style={styles.popper}
+      style={styles.floating}
       role="tooltip"
-      {...attributes.popper}
+      {...attributes.floating}
     >
       <span ref={arrowRef} style={styles.arrow} className="popover-arrow" />
       <div className={`schedule-grid-run-details-content ${scheduleGridStyles.scheduleGridRunDetailsContent}`}>

diff --git a/app/javascript/EventsApp/ScheduleGrid/ScheduleGridEventRun.tsx b/app/javascript/EventsApp/ScheduleGrid/ScheduleGridEventRun.tsx
@@ -1,5 +1,5 @@
 import { useContext, useMemo, useCallback, Ref, useState } from 'react';
-import { useLitformPopper } from '@neinteractiveliterature/litform';
+import { useLitformFloating } from '@neinteractiveliterature/litform';
 
 import { ScheduleGridContext } from './ScheduleGridContext';
 import SignupCountData from '../SignupCountData';
@@ -29,7 +29,7 @@ function ScheduleGridEventRun({
   const [runDetailsElement, setRunDetailsElement] = useState<HTMLDivElement | null>(null);
   const [arrow, setArrow] = useState<HTMLSpanElement | null>(null);
 
-  const { styles, attributes, state, update } = useLitformPopper(runDetailsElement, runDisplayElement, arrow);
+  const { styles, attributes, state, update } = useLitformFloating(runDetailsElement, runDisplayElement, arrow);
 
   const run = useMemo(() => schedule.getRun(runDimensions.runId), [schedule, runDimensions.runId]);
   const event = useMemo(() => schedule.getEventForRun(runDimensions.runId), [schedule, runDimensions.runId]);

diff --git a/app/javascript/NavigationBar/NavigationSection.tsx b/app/javascript/NavigationBar/NavigationSection.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { ReactNode, useState } from 'react';
-import { useLitformPopperWithAutoClosing, useToggleOpen } from '@neinteractiveliterature/litform';
+import { useLitformFloatingWithAutoClosing, useToggleOpen } from '@neinteractiveliterature/litform';
 
 import useAutoCloseOnNavigate from './useAutoCloseOnNavigate';
 
@@ -14,13 +14,13 @@ function NavigationSection({ children, label }: NavigationSectionProps): React.J
   const [dropdownMenu, setDropdownMenu] = useState<HTMLDivElement | null>(null);
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
 
-  const { styles, attributes, update } = useLitformPopperWithAutoClosing(
+  const { styles, attributes, update } = useLitformFloatingWithAutoClosing(
     dropdownMenu,
     dropdownLi,
     undefined,
     setDropdownOpen,
     {
-      modifiers: [{ name: 'offset', options: { offset: [0, 2] } }],
+      offset: 2,
       placement: 'bottom-start',
     },
   );
@@ -40,9 +40,9 @@ function NavigationSection({ children, label }: NavigationSectionProps): React.J
         ref={setDropdownMenu}
         style={{
           zIndex: 1100,
-          ...styles.popper,
+          ...styles.floating,
         }}
-        {...attributes.popper}
+        {...attributes.floating}
       >
         {children}
       </div>

diff --git a/app/javascript/NavigationBar/UserNavigationSection.tsx b/app/javascript/NavigationBar/UserNavigationSection.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Link } from 'react-router';
 import { useTranslation, Trans } from 'react-i18next';
 import classNames from 'classnames';
-import { useLitformPopperWithAutoClosing, useToggleOpen } from '@neinteractiveliterature/litform';
+import { useLitformFloatingWithAutoClosing, useToggleOpen } from '@neinteractiveliterature/litform';
 
 import htmlFetch from './htmlFetch';
 import SignInButton from '../Authentication/SignInButton';
@@ -154,13 +154,13 @@ function UserNavigationSection(): React.JSX.Element {
   const [dropdownMenu, setDropdownMenu] = useState<HTMLDivElement | null>(null);
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
 
-  const { styles, attributes, update } = useLitformPopperWithAutoClosing(
+  const { styles, attributes, update } = useLitformFloatingWithAutoClosing(
     dropdownMenu,
     referenceElement,
     undefined,
     setDropdownOpen,
     {
-      modifiers: [{ name: 'offset', options: { offset: [0, 2] } }],
+      offset: 2,
       placement: 'bottom-end',
     },
   );
@@ -180,9 +180,9 @@ function UserNavigationSection(): React.JSX.Element {
               ref={setDropdownMenu}
               style={{
                 zIndex: 1100,
-                ...styles.popper,
+                ...styles.floating,
               }}
-              {...attributes.popper}
+              {...attributes.floating}
             >
               {currentUser && (
                 <a href={editAccountUrl} className="dropdown-item" target="_blank" rel="noreferrer">
@@ -245,9 +245,9 @@ function UserNavigationSection(): React.JSX.Element {
         ref={setDropdownMenu}
         style={{
           zIndex: 1100,
-          ...styles.popper,
+          ...styles.floating,
         }}
-        {...attributes.popper}
+        {...attributes.floating}
       >
         <li className="nav-item login my-auto">
           <SignInButton

diff --git a/app/javascript/Tables/ChoiceSetFilter.tsx b/app/javascript/Tables/ChoiceSetFilter.tsx
@@ -1,9 +1,8 @@
 import { useMemo, useState, ReactNode } from 'react';
 import classNames from 'classnames';
-import { Modifier } from 'react-popper';
+import { size, type SizeOptions } from '@floating-ui/react-dom';
 import { useTranslation } from 'react-i18next';
-import max from 'lodash/max';
-import { ChoiceSet, useLitformPopperWithAutoClosing, useToggleOpen } from '@neinteractiveliterature/litform';
+import { ChoiceSet, useLitformFloatingWithAutoClosing, useToggleOpen } from '@neinteractiveliterature/litform';
 
 import { FilterCodec } from './FilterUtils';
 import { Column } from '@tanstack/react-table';
@@ -55,8 +54,7 @@ export type ChoiceSetFilterMultipleProps<TData extends Record<string, unknown>,
 };
 
 export type ChoiceSetFilterProps<TData extends Record<string, unknown>, TValue> =
-  | ChoiceSetFilterSingleProps<TData, TValue>
-  | ChoiceSetFilterMultipleProps<TData, TValue>;
+  ChoiceSetFilterSingleProps<TData, TValue> | ChoiceSetFilterMultipleProps<TData, TValue>;
 
 function ChoiceSetFilter<TData extends Record<string, unknown>, TValue>(
   props: ChoiceSetFilterProps<TData, TValue>,
@@ -72,40 +70,24 @@ function ChoiceSetFilter<TData extends Record<string, unknown>, TValue>(
   const [dropdownMenu, setDropdownMenu] = useState<HTMLDivElement | null>(null);
   const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
 
-  const modifiers: Modifier<unknown>[] = useMemo(
-    () => [
-      {
-        name: 'sameWidth',
-        enabled: true,
-        fn: ({ state }) => ({
-          ...state,
-          styles: {
-            ...state.styles,
-            popper: {
-              ...state.styles.popper,
-              width: `${max([state.rects.reference.width, state.rects.popper.width])}px`,
-            },
-          },
-        }),
-        phase: 'beforeWrite',
-        requires: ['computeStyles'],
+  const middleware = useMemo(() => {
+    const sizeOptions: SizeOptions = {
+      apply({ rects, elements }) {
+        Object.assign(elements.floating.style, { minWidth: `${rects.reference.width}px` });
       },
-      {
-        name: 'offset',
-        options: { offset: [0, -3] },
-      },
-    ],
-    [],
-  );
+    };
+    return [size(sizeOptions)];
+  }, []);
 
-  const { styles, attributes, update } = useLitformPopperWithAutoClosing(
+  const { styles, attributes, update } = useLitformFloatingWithAutoClosing(
     dropdownMenu,
     dropdownButton,
     undefined,
     setDropdownOpen,
     {
       placement: 'bottom-start',
-      modifiers,
+      offset: -3,
+      middleware,
     },
   );
 
@@ -222,11 +204,11 @@ function ChoiceSetFilter<TData extends Record<string, unknown>, TValue>(
         className={classNames('card align-items-stretch', { invisible: !dropdownOpen })}
         ref={setDropdownMenu}
         style={{
-          ...styles.popper,
+          ...styles.floating,
           borderTop: 'none',
           zIndex: 1100,
         }}
-        {...attributes.popper}
+        {...attributes.floating}
       >
         <div className="card-body p-2">
           {props.multiple ? (

diff --git a/app/javascript/UIComponents/DropdownMenu.tsx b/app/javascript/UIComponents/DropdownMenu.tsx
@@ -1,6 +1,6 @@
 import React, { CSSProperties, forwardRef, ReactNode, useImperativeHandle, useState } from 'react';
 import classNames from 'classnames';
-import { useLitformPopperWithAutoClosing, useToggleOpen } from '@neinteractiveliterature/litform';
+import { useLitformFloatingWithAutoClosing, useToggleOpen } from '@neinteractiveliterature/litform';
 
 import useAutoCloseOnNavigate from '../NavigationBar/useAutoCloseOnNavigate';
 import { createPortal } from 'react-dom';
@@ -17,7 +17,7 @@ export type DropdownMenuProps = {
   children: ReactNode;
   dropdownClassName?: string;
   dropdownStyle?: CSSProperties;
-  popperOptions?: Parameters<typeof useLitformPopperWithAutoClosing>[4];
+  popperOptions?: Parameters<typeof useLitformFloatingWithAutoClosing>[4];
   shouldAutoCloseOnNavigate?: Parameters<typeof useAutoCloseOnNavigate>[1];
 };
 
@@ -40,14 +40,14 @@ export const DropdownMenu = forwardRef(function DropdownMenuInner(
 
   useImperativeHandle(ref, () => ({ dropdownOpen, setDropdownOpen }) satisfies DropdownMenuRef);
 
-  const { styles, attributes, update } = useLitformPopperWithAutoClosing(
+  const { styles, attributes, update } = useLitformFloatingWithAutoClosing(
     dropdownMenu,
     dropdownButton,
     undefined,
     setDropdownOpen,
     {
       placement: 'bottom-start',
-      modifiers: [{ name: 'offset', options: { offset: [0, 2] } }, ...(popperOptions?.modifiers ?? [])],
+      offset: 2,
       ...popperOptions,
     },
   );
@@ -59,8 +59,8 @@ export const DropdownMenu = forwardRef(function DropdownMenuInner(
     <div
       className={classNames('dropdown-menu m-0', dropdownClassName, { show: dropdownOpen })}
       ref={setDropdownMenu}
-      style={{ ...styles.popper, ...dropdownStyle }}
-      {...attributes.popper}
+      style={{ ...styles.floating, ...dropdownStyle }}
+      {...attributes.floating}
     >
       {children}
     </div>