From 4e0253921b3a1e3f61c30faca325756625d8e6e9 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sat, 7 Nov 2026 00:15:45 +0000 Subject: [PATCH 1/3] Update dependency @neinteractiveliterature/litform to v0.36.1 --- package.json | 2 +- yarn.lock | 119 +++++++++++++++++++++++++++++---------------------- 2 files changed, 68 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index 61dcac97f4..49811a6671 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "@lezer/highlight": "^1.2.1", "@lezer/lr": "^1.4.2", "@marsidev/react-turnstile": "^1.6.1", - "@neinteractiveliterature/litform": "0.35.2", + "@neinteractiveliterature/litform": "0.36.1", "@popperjs/core": "^2.11.8", "@rails/activestorage": "8.1.401", "@react-router/node": "7.18.5", diff --git a/yarn.lock b/yarn.lock index babf06c4b2..95eff4fe12 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3653,29 +3653,41 @@ __metadata: languageName: node linkType: hard -"@floating-ui/core@npm:^1.7.5": - version: 1.7.5 - resolution: "@floating-ui/core@npm:1.7.5" +"@floating-ui/core@npm:^1.8.0": + version: 1.8.0 + resolution: "@floating-ui/core@npm:1.8.0" dependencies: - "@floating-ui/utils": "npm:^0.2.11" - checksum: 10c0/f9c52205e198b231d63a387b09c659aab08c46a1899e0b0bbe147b8b4f048b546f15ba17cb5d2a471da9534f1883d979425e13e5c4ceee67be63e4b0abd4db5d + "@floating-ui/utils": "npm:^0.2.12" + checksum: 10c0/cece958f6fab0f8cd7740cd57988c4f8bc5356dca39dd4c093433d44c91952c3a02c7a54d93d7ed6c078b6544d531a29f66621d2839c8bfbb4467dca6aed7df0 languageName: node linkType: hard -"@floating-ui/dom@npm:^1.0.1": - version: 1.7.6 - resolution: "@floating-ui/dom@npm:1.7.6" +"@floating-ui/dom@npm:^1.0.1, @floating-ui/dom@npm:^1.8.0": + version: 1.8.0 + resolution: "@floating-ui/dom@npm:1.8.0" dependencies: - "@floating-ui/core": "npm:^1.7.5" - "@floating-ui/utils": "npm:^0.2.11" - checksum: 10c0/5c098e0d7b58c9bc769f276cca1766994c2c9c70c92d091a61bba8b3e9be53c011e0a79a8457fc2fb2f3d91697a26eb52e0a4962ef936dc963b45f58613c212f + "@floating-ui/core": "npm:^1.8.0" + "@floating-ui/utils": "npm:^0.2.12" + checksum: 10c0/c32b2de7a596b69cfffa909c7028825e14f6319be1b45da529f8943c89fe16b75a49c214e800c87ded3f172353d3b99163d50072f11410488e756961b7b629cc + languageName: node + linkType: hard + +"@floating-ui/react-dom@npm:^2.1.9": + version: 2.1.9 + resolution: "@floating-ui/react-dom@npm:2.1.9" + dependencies: + "@floating-ui/dom": "npm:^1.8.0" + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + checksum: 10c0/9fa9851069738cb9591a1ab2da16e257f193eae5fd2d6d48ad0b1e73f3c049929b6805c5ad43d4af3c1da63c60b215b0ee4651a1fe5caeb80e66d9d423744348 languageName: node linkType: hard -"@floating-ui/utils@npm:^0.2.11": - version: 0.2.11 - resolution: "@floating-ui/utils@npm:0.2.11" - checksum: 10c0/f4bcea1559bdbb721ecc8e8ead423ac58d6a5b6e70b602cf0810ba6ad4ed1c77211b207faa88b278a9042f0c743133de08a203ed6741c1b6443423332884d5b3 +"@floating-ui/utils@npm:^0.2.12": + version: 0.2.12 + resolution: "@floating-ui/utils@npm:0.2.12" + checksum: 10c0/bb910b90d56991a62011afaf5f8e0c4b7fb6dab69403f4dd17fbd6eb25560b28d533dff9791f270b4f459852e9006a1077b5d73cbedb5e34d9424afc6a828314 languageName: node linkType: hard @@ -5606,9 +5618,9 @@ __metadata: languageName: node linkType: hard -"@neinteractiveliterature/litform-codemirror@npm:^0.35.2": - version: 0.35.2 - resolution: "@neinteractiveliterature/litform-codemirror@npm:0.35.2" +"@neinteractiveliterature/litform-codemirror@npm:^0.36.1": + version: 0.36.1 + resolution: "@neinteractiveliterature/litform-codemirror@npm:0.36.1" dependencies: "@codemirror/commands": "npm:^6.8.0" "@codemirror/lang-html": "npm:^6.4.9" @@ -5618,20 +5630,20 @@ __metadata: "@lezer/common": "npm:^1.2.3" "@lezer/highlight": "npm:^1.2.1" "@lezer/lr": "npm:^1.4.2" - "@neinteractiveliterature/litform-core": "npm:^0.35.2" + "@neinteractiveliterature/litform-core": "npm:^0.36.1" classnames: "npm:^2.5.1" codemirror: "npm:^6.0.1" peerDependencies: react: ">= 18" - checksum: 10c0/afc3869e3a4e96d19ac790ba9e5b4082d2cccc9e17bfaacd8748765af43a34ac55bef5c4e7c82a32f861f5d311e58d1c4f4c08e8ca8ef073d3b9cd37bab44180 + checksum: 10c0/804660442c56c0abb7caeaab4e1e584658df8e98fbca7f8f0beb24ebe7705a15a9673585059e7fd23d402fb77c8e895c375faf38edc66b00f931e9f302d008a6 languageName: node linkType: hard -"@neinteractiveliterature/litform-controls@npm:^0.35.2": - version: 0.35.2 - resolution: "@neinteractiveliterature/litform-controls@npm:0.35.2" +"@neinteractiveliterature/litform-controls@npm:^0.36.1": + version: 0.36.1 + resolution: "@neinteractiveliterature/litform-controls@npm:0.36.1" dependencies: - "@neinteractiveliterature/litform-core": "npm:^0.35.2" + "@neinteractiveliterature/litform-core": "npm:^0.36.1" classnames: "npm:^2.5.1" copy-to-clipboard: "npm:^3.3.3" graphql: "npm:^16.10.0" @@ -5639,13 +5651,13 @@ __metadata: temporal-polyfill: "npm:^0.3.0" peerDependencies: react: ">= 18" - checksum: 10c0/91a06e16742d1626df4ad2adbe65c6458569c944f0ee248e0f8883342f0e1eae1a6bd2b082d36bbb798f259185da12750daaf00ce96be595ed1bf4a3b5bf2647 + checksum: 10c0/8802f423af5eeca458bb7c5a4ccc60fcccd647036535446c1dfc47defc6d92b93ff3f765a46ac70e4b72ff806d9005b7127b329a58158ae9ac15f7903d7f7d70 languageName: node linkType: hard -"@neinteractiveliterature/litform-core@npm:^0.35.2": - version: 0.35.2 - resolution: "@neinteractiveliterature/litform-core@npm:0.35.2" +"@neinteractiveliterature/litform-core@npm:^0.36.1": + version: 0.36.1 + resolution: "@neinteractiveliterature/litform-core@npm:0.36.1" dependencies: classnames: "npm:^2.5.1" graphql: "npm:^16.10.0" @@ -5654,48 +5666,51 @@ __metadata: uuid: "npm:^11.1.0" peerDependencies: react: ">= 18" - checksum: 10c0/90957b3462ceff19c395c18890683a27b01f9039eef0677b7c38584b946ef0486380c11d538861de9b55ca0442a41e1f5c9505faec9cf8e71300362ee7a0bf44 + checksum: 10c0/29bb61734ca72864b19a067ed72db855bea207789797ea3643d16a835370c80c9d671c484921902385ee680cccc3d1aac7faab79c2397ce2b4a7ae3c21116fc9 languageName: node linkType: hard -"@neinteractiveliterature/litform-modals@npm:^0.35.2": - version: 0.35.2 - resolution: "@neinteractiveliterature/litform-modals@npm:0.35.2" +"@neinteractiveliterature/litform-modals@npm:^0.36.1": + version: 0.36.1 + resolution: "@neinteractiveliterature/litform-modals@npm:0.36.1" dependencies: - "@neinteractiveliterature/litform-core": "npm:^0.35.2" + "@neinteractiveliterature/litform-core": "npm:^0.36.1" react-bootstrap4-modal: "npm:^3.0.10" peerDependencies: react: ">= 18" - checksum: 10c0/4b6982d9f52b1e3ebe9b817d378d7c378b0b51dd2d8602f7d3b71ef1dc100ca3b18c14b435b1813527b80055f2ebb736265ddb6c040a2a07463b8e521c63e024 + react-dom: ">= 18" + checksum: 10c0/b8b8c9db8cff7d67a2f77df38045631dc02acf94ffba633c9fafcd4819577174e2d9328477a782567478be60554019cf53bdf93e7bd9d09c738dc31d03c16323 languageName: node linkType: hard -"@neinteractiveliterature/litform-popovers@npm:^0.35.2": - version: 0.35.2 - resolution: "@neinteractiveliterature/litform-popovers@npm:0.35.2" +"@neinteractiveliterature/litform-popovers@npm:^0.36.1": + version: 0.36.1 + resolution: "@neinteractiveliterature/litform-popovers@npm:0.36.1" dependencies: - "@neinteractiveliterature/litform-core": "npm:^0.35.2" - "@popperjs/core": "npm:^2.11.8" + "@floating-ui/react-dom": "npm:^2.1.9" + "@neinteractiveliterature/litform-core": "npm:^0.36.1" classnames: "npm:^2.5.1" react-cool-onclickoutside: "npm:^1.7.0" - react-popper: "npm:^2.3.0" peerDependencies: react: ">= 18" react-dom: ">= 18" - checksum: 10c0/6e60ae96228e67ac6683cd388c32e86489107928e45942acab10168e6885613b9982505ab4e160d2ff9583ec7b0230508b249d9ebd3b71d2b6805ec28ee63688 + checksum: 10c0/5ec7f44d2e8038bd4671948b0fcab7d9d2e49c720d78f398185b838092d6df770c3a512a8851eadada1ad54f8a5660fe4f33c2a686f32728e5000f1c529e5871 languageName: node linkType: hard -"@neinteractiveliterature/litform@npm:0.35.2": - version: 0.35.2 - resolution: "@neinteractiveliterature/litform@npm:0.35.2" +"@neinteractiveliterature/litform@npm:0.36.1": + version: 0.36.1 + resolution: "@neinteractiveliterature/litform@npm:0.36.1" dependencies: - "@neinteractiveliterature/litform-codemirror": "npm:^0.35.2" - "@neinteractiveliterature/litform-controls": "npm:^0.35.2" - "@neinteractiveliterature/litform-core": "npm:^0.35.2" - "@neinteractiveliterature/litform-modals": "npm:^0.35.2" - "@neinteractiveliterature/litform-popovers": "npm:^0.35.2" - checksum: 10c0/32fbdd6ffeccfc8f4ee5fd8c6f40eb7d1fe64e77a87cbcbb7d5f90ba8baa9226a9487ec1d9ad55280968678a5ce6946851a71b0730c9f52cee60f9da17d04f56 + "@neinteractiveliterature/litform-codemirror": "npm:^0.36.1" + "@neinteractiveliterature/litform-controls": "npm:^0.36.1" + "@neinteractiveliterature/litform-core": "npm:^0.36.1" + "@neinteractiveliterature/litform-modals": "npm:^0.36.1" + "@neinteractiveliterature/litform-popovers": "npm:^0.36.1" + peerDependencies: + react: ">= 18" + react-dom: ">= 18" + checksum: 10c0/89ef986b8db8f83e2f305fa103c95f346b9bccb2076896d1c032de038fb52aee47019f66486bf9dbbccb382c94afacf3bd529b0c39645723f14a5330c7d747c6 languageName: node linkType: hard @@ -18919,7 +18934,7 @@ __metadata: languageName: node linkType: hard -"react-popper@npm:2.3.0, react-popper@npm:^2.3.0": +"react-popper@npm:2.3.0": version: 2.3.0 resolution: "react-popper@npm:2.3.0" dependencies: @@ -19814,7 +19829,7 @@ __metadata: "@lezer/highlight": "npm:^1.2.1" "@lezer/lr": "npm:^1.4.2" "@marsidev/react-turnstile": "npm:^1.6.1" - "@neinteractiveliterature/litform": "npm:0.35.2" + "@neinteractiveliterature/litform": "npm:0.36.1" "@playwright/test": "npm:^1.58.1" "@popperjs/core": "npm:^2.11.8" "@prettier/plugin-ruby": "npm:4.0.4" From dc238133c6074287d891ae8f5c2a1a3f909be4b2 Mon Sep 17 00:00:00 2001 From: Nat Budin Date: Fri, 6 Nov 2026 16:21:13 -0800 Subject: [PATCH 2/3] Migrate from Popper to Floating UI for litform 0.36 Rename useLitformPopper* hooks and styles/attributes/ref props, convert offset and sameWidth modifiers to Floating UI options/middleware, and replace react-popper with a direct @floating-ui/react-dom dependency. Fixes #12343 Co-Authored-By: Claude Sonnet 5.5 --- .../PasswordInputWithStrengthCheck.tsx | 8 ++-- app/javascript/EventAdmin/index.tsx | 10 ++-- .../EventCategoryAdmin/EventCategoryForm.tsx | 8 ++-- .../MySignupQueue/UserSignupQueueItem.tsx | 1 - .../EventsApp/RunList/RunListEventRun.tsx | 4 +- .../EventsApp/ScheduleGrid/RunDetails.tsx | 11 ++--- .../ScheduleGrid/ScheduleGridEventRun.tsx | 4 +- .../NavigationBar/NavigationSection.tsx | 10 ++-- .../NavigationBar/UserNavigationSection.tsx | 14 +++--- app/javascript/Tables/ChoiceSetFilter.tsx | 48 ++++++------------- app/javascript/UIComponents/DropdownMenu.tsx | 12 ++--- .../UIComponents/ScheduledValuePreview.tsx | 6 +-- package.json | 2 +- yarn.lock | 27 +---------- 14 files changed, 61 insertions(+), 104 deletions(-) diff --git a/app/javascript/Authentication/PasswordInputWithStrengthCheck.tsx b/app/javascript/Authentication/PasswordInputWithStrengthCheck.tsx index 066cc02671..f137a75690 100644 --- 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(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} >
diff --git a/app/javascript/EventAdmin/index.tsx b/app/javascript/EventAdmin/index.tsx index d1bd7564fd..e5a6b1b874 100644 --- 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(null); const [menuDropdown, setMenuDropdown] = useState(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() {
{eventCategories.map((eventCategory) => ( (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} >
diff --git a/app/javascript/EventsApp/MySignupQueue/UserSignupQueueItem.tsx b/app/javascript/EventsApp/MySignupQueue/UserSignupQueueItem.tsx index 819b17058f..27b4869a17 100644 --- 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: [], }} >
diff --git a/app/javascript/EventsApp/RunList/RunListEventRun.tsx b/app/javascript/EventsApp/RunList/RunListEventRun.tsx index 1773a7646e..de9a9d11ba 100644 --- 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(null); const [arrow, setArrow] = useState(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 index 7180283d1c..5bd78304ca 100644 --- 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['styles']; - attributes: ReturnType['attributes']; + styles: LitformFloatingResult['styles']; + attributes: LitformFloatingResult['attributes']; toggle: () => void; event: ScheduleEvent; run: ScheduleRun; @@ -92,9 +91,9 @@ const RunDetails = React.forwardRef(function Ru
diff --git a/app/javascript/EventsApp/ScheduleGrid/ScheduleGridEventRun.tsx b/app/javascript/EventsApp/ScheduleGrid/ScheduleGridEventRun.tsx index 04a27480c8..8f5632e654 100644 --- 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(null); const [arrow, setArrow] = useState(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 index d52b587428..549af7b2dc 100644 --- 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(null); const [dropdownOpen, setDropdownOpen] = useState(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}
diff --git a/app/javascript/NavigationBar/UserNavigationSection.tsx b/app/javascript/NavigationBar/UserNavigationSection.tsx index a4435f4479..553a73f2e2 100644 --- 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(null); const [dropdownOpen, setDropdownOpen] = useState(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 && ( @@ -245,9 +245,9 @@ function UserNavigationSection(): React.JSX.Element { ref={setDropdownMenu} style={{ zIndex: 1100, - ...styles.popper, + ...styles.floating, }} - {...attributes.popper} + {...attributes.floating} >
  • , }; export type ChoiceSetFilterProps, TValue> = - | ChoiceSetFilterSingleProps - | ChoiceSetFilterMultipleProps; + ChoiceSetFilterSingleProps | ChoiceSetFilterMultipleProps; function ChoiceSetFilter, TValue>( props: ChoiceSetFilterProps, @@ -72,40 +70,24 @@ function ChoiceSetFilter, TValue>( const [dropdownMenu, setDropdownMenu] = useState(null); const [dropdownOpen, setDropdownOpen] = useState(false); - const modifiers: Modifier[] = 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, TValue>( className={classNames('card align-items-stretch', { invisible: !dropdownOpen })} ref={setDropdownMenu} style={{ - ...styles.popper, + ...styles.floating, borderTop: 'none', zIndex: 1100, }} - {...attributes.popper} + {...attributes.floating} >
    {props.multiple ? ( diff --git a/app/javascript/UIComponents/DropdownMenu.tsx b/app/javascript/UIComponents/DropdownMenu.tsx index b6c6b74c59..a62dd51eb6 100644 --- 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[4]; + popperOptions?: Parameters[4]; shouldAutoCloseOnNavigate?: Parameters[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(
    {children}
    diff --git a/app/javascript/UIComponents/ScheduledValuePreview.tsx b/app/javascript/UIComponents/ScheduledValuePreview.tsx index 8a77c5e9f5..584969c83a 100644 --- a/app/javascript/UIComponents/ScheduledValuePreview.tsx +++ b/app/javascript/UIComponents/ScheduledValuePreview.tsx @@ -2,7 +2,7 @@ import { memo, ReactNode, RefObject, useCallback, useMemo, useRef, useState } fr import minBy from 'lodash/minBy'; import maxBy from 'lodash/maxBy'; import { DateTime, WeekdayNumbers } from 'luxon'; -import { notEmpty, Tooltip, useLitformPopper } from '@neinteractiveliterature/litform'; +import { notEmpty, Tooltip, useLitformFloating } from '@neinteractiveliterature/litform'; import { EditingScheduledValue } from '../BuiltInFormControls/ScheduledValueEditor'; import { findTimespanAt, findValueAt } from '../ScheduledValueUtils'; @@ -267,7 +267,7 @@ function ScheduledValuePreview({ // eslint-disable-next-line react-hooks/refs const focusedDateElement = focusedDate ? (dateElementMapRef.current.get(focusedDate.valueOf()) ?? null) : null; - const { styles, attributes, state } = useLitformPopper(tooltip, focusedDateElement, arrow); + const { styles, attributes, state } = useLitformFloating(tooltip, focusedDateElement, arrow); const focusDate = useCallback((value: DateTime) => setFocusedDate(value), []); @@ -297,7 +297,7 @@ function ScheduledValuePreview({ dateElementMapRef={dateElementMapRef} /> Date: Fri, 6 Nov 2026 16:23:48 -0800 Subject: [PATCH 3/3] Fix yarn.lock for exact @floating-ui/react-dom version Co-Authored-By: Claude Sonnet 5.5 --- yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/yarn.lock b/yarn.lock index 42909f7abb..8fc9176029 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3672,7 +3672,7 @@ __metadata: languageName: node linkType: hard -"@floating-ui/react-dom@npm:^2.1.9": +"@floating-ui/react-dom@npm:2.1.9, @floating-ui/react-dom@npm:^2.1.9": version: 2.1.9 resolution: "@floating-ui/react-dom@npm:2.1.9" dependencies: @@ -19799,7 +19799,7 @@ __metadata: "@dnd-kit/sortable": "npm:10.0.0" "@dnd-kit/utilities": "npm:3.2.2" "@emotion/serialize": "npm:1.3.3" - "@floating-ui/react-dom": "npm:^2.1.9" + "@floating-ui/react-dom": "npm:2.1.9" "@graphql-codegen/add": "npm:7.1.1" "@graphql-codegen/cli": "npm:7.4.6" "@graphql-codegen/fragment-matcher": "npm:7.1.0"