refactor: offsetless middlewares

mary-ext · Dec 10, 2023 · ea993a4 · ea993a4
1 parent 415a123
commit ea993a4
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 63 deletions.
diff --git a/app/com/components/Flyout.tsx b/app/com/components/Flyout.tsx
@@ -1,6 +1,6 @@
 import { type JSX, Show, createSignal, untrack } from 'solid-js';
 
-import { type Middleware, autoUpdate, flip, shift } from '@floating-ui/dom';
+import { type Middleware, autoUpdate, flip, shift, size } from '@floating-ui/dom';
 import { type Placement, getSide } from '@floating-ui/utils';
 import { useFloating } from 'solid-floating-ui';
 
@@ -43,6 +43,26 @@ export const offset: Middleware = {
 	},
 };
 
+export const offsetlessMiddlewares = [
+	shift({
+		padding: 16,
+	}),
+	flip({
+		padding: 16,
+	}),
+	size({
+		padding: 16,
+		apply({ availableWidth, availableHeight, elements }) {
+			Object.assign(elements.floating.style, {
+				maxWidth: `${availableWidth}px`,
+				maxHeight: `${availableHeight}px`,
+			});
+		},
+	}),
+];
+
+const defaultMiddlewares: Middleware[] = [offset, ...offsetlessMiddlewares];
+
 export const Flyout = (props: FlyoutProps) => {
 	const [isOpen, setIsOpen] = createSignal(false);
 
@@ -76,7 +96,7 @@ export const Flyout = (props: FlyoutProps) => {
 				const position = useFloating(() => anchor, floating, {
 					placement: props.placement ?? 'bottom-end',
 					strategy: 'absolute',
-					middleware: props.middleware ?? [shift({ padding: 16 }), offset, flip()],
+					middleware: props.middleware ?? defaultMiddlewares,
 					whileElementsMounted: autoUpdate,
 				});
 

diff --git a/app/com/components/embeds/images/ImageAltAction.tsx b/app/com/components/embeds/images/ImageAltAction.tsx
@@ -1,10 +1,8 @@
 import type { JSX } from 'solid-js';
 
-import { flip, shift, size } from '@floating-ui/dom';
-
 import { Button } from '../../../primitives/button.ts';
 
-import { Flyout } from '../../Flyout.tsx';
+import { Flyout, offsetlessMiddlewares } from '../../Flyout.tsx';
 
 export interface ImageAltActionProps {
 	alt: string;
@@ -14,22 +12,7 @@ export interface ImageAltActionProps {
 const ImageAltAction = (props: ImageAltActionProps) => {
 	if (import.meta.env.VITE_MODE === 'desktop') {
 		return (
-			<Flyout
-				button={props.children}
-				placement="bottom"
-				middleware={[
-					flip(),
-					shift({ padding: 16 }),
-					size({
-						padding: 16,
-						apply({ availableHeight, elements }) {
-							Object.assign(elements.floating.style, {
-								maxHeight: `${availableHeight}px`,
-							});
-						},
-					}),
-				]}
-			>
+			<Flyout button={props.children} placement="bottom" middleware={offsetlessMiddlewares}>
 				{({ close, menuProps }) => (
 					<div
 						{...menuProps}

diff --git a/app/com/components/inputs/AddPhotoButton.tsx b/app/com/components/inputs/AddPhotoButton.tsx
@@ -1,6 +1,6 @@
 import { type JSX, createSignal } from 'solid-js';
 
-import { type Middleware, flip } from '@floating-ui/dom';
+import { type Middleware } from '@floating-ui/dom';
 import { getSide } from '@floating-ui/utils';
 
 import { compressProfileImage } from '~/utils/image.ts';
@@ -9,7 +9,7 @@ import { openModal } from '~/com/globals/modals.tsx';
 
 import { MenuItem, MenuRoot } from '../../primitives/menu.ts';
 
-import { Flyout } from '../Flyout.tsx';
+import { Flyout, offsetlessMiddlewares } from '../Flyout.tsx';
 import CircularProgress from '../CircularProgress.tsx';
 
 import AddPhotoAlternateIcon from '../../icons/baseline-add-photo-alternate.tsx';
@@ -119,7 +119,7 @@ const AddPhotoButton = (props: AddPhotoButtonProps) => {
 
 			if (shouldDisplayFlyout) {
 				return (
-					<Flyout button={button} placement="bottom" middleware={[flip(), buttonOffset]}>
+					<Flyout button={button} placement="bottom" middleware={[buttonOffset, ...offsetlessMiddlewares]}>
 						{({ close, menuProps }) => (
 							<div {...menuProps} class={/* @once */ MenuRoot()}>
 								<button

diff --git a/app/com/components/views/profiles/ProfileHandleAction.tsx b/app/com/components/views/profiles/ProfileHandleAction.tsx
@@ -1,12 +1,10 @@
 import { type JSX } from 'solid-js';
 
-import { flip, shift } from '@floating-ui/dom';
-
 import type { SignalizedProfile } from '~/api/stores/profiles.ts';
 
 import { MenuItem, MenuItemIcon, MenuRoot } from '../../../primitives/menu.ts';
 
-import { Flyout } from '../../Flyout.tsx';
+import { Flyout, offsetlessMiddlewares } from '../../Flyout.tsx';
 
 import ContentCopyIcon from '~/com/icons/baseline-content-copy.tsx';
 
@@ -21,11 +19,7 @@ const ProfileHandleAction = (props: ProfileHandleActionProps) => {
 
 		if (import.meta.env.VITE_MODE === 'desktop') {
 			return (
-				<Flyout
-					button={props.children}
-					placement="bottom-start"
-					middleware={[shift({ padding: 16 }), flip()]}
-				>
+				<Flyout button={props.children} placement="bottom-start" middleware={offsetlessMiddlewares}>
 					{({ close, menuProps }) => (
 						<div {...menuProps} class={/* @once */ MenuRoot()}>
 							<button

diff --git a/app/com/primitives/menu.ts b/app/com/primitives/menu.ts
@@ -1,7 +1,7 @@
 import { Interactive } from './interactive.ts';
 
 export const MenuRoot = () => {
-	return `flex max-w-sm flex-col overflow-hidden rounded-lg bg-background shadow-menu`;
+	return `flex max-w-sm flex-col overflow-hidden overflow-y-auto rounded-lg bg-background shadow-menu`;
 };
 
 export interface MenuItemProps {

diff --git a/app/desktop/components/composer/actions/ContentWarningAction.tsx b/app/desktop/components/composer/actions/ContentWarningAction.tsx
@@ -1,10 +1,8 @@
 import type { JSX } from 'solid-js';
 
-import { flip, shift } from '@floating-ui/dom';
-
 import { MenuItem, MenuRoot } from '~/com/primitives/menu.ts';
 
-import { Flyout } from '~/com/components/Flyout.tsx';
+import { Flyout, offsetlessMiddlewares } from '~/com/components/Flyout.tsx';
 
 import CheckIcon from '~/com/icons/baseline-check.tsx';
 
@@ -16,7 +14,7 @@ export interface ContentWarningActionProps {
 
 const ContentWarningAction = (props: ContentWarningActionProps) => {
 	return (
-		<Flyout button={props.children} placement="bottom" middleware={[shift({ padding: 16 }), flip()]}>
+		<Flyout button={props.children} placement="bottom" middleware={offsetlessMiddlewares}>
 			{({ close, menuProps }) => {
 				const renderItem = (value: string | undefined, label: string, description: string) => {
 					return (

diff --git a/app/desktop/components/composer/actions/PostLanguageAction.tsx b/app/desktop/components/composer/actions/PostLanguageAction.tsx
@@ -1,7 +1,5 @@
 import type { JSX } from 'solid-js';
 
-import { flip, shift, size } from '@floating-ui/dom';
-
 import { systemLanguages } from '~/api/globals/platform.ts';
 
 import { getNativeLanguageName, languageNames } from '~/utils/intl/display-names.ts';
@@ -12,7 +10,7 @@ import { preferences } from '~/desktop/globals/settings.ts';
 
 import { MenuItem, MenuRoot } from '~/com/primitives/menu.ts';
 
-import { Flyout } from '~/com/components/Flyout.tsx';
+import { Flyout, offsetlessMiddlewares } from '~/com/components/Flyout.tsx';
 
 import CheckIcon from '~/com/icons/baseline-check.tsx';
 
@@ -45,22 +43,7 @@ const getLanguageCodes = () => {
 
 const PostLanguageAction = (props: PostLanguageActionProps) => {
 	return (
-		<Flyout
-			button={props.children}
-			placement="bottom"
-			middleware={[
-				shift({ padding: 16 }),
-				flip(),
-				size({
-					padding: 16,
-					apply({ availableHeight, elements }) {
-						Object.assign(elements.floating.style, {
-							maxHeight: `${availableHeight}px`,
-						});
-					},
-				}),
-			]}
-		>
+		<Flyout button={props.children} placement="bottom" middleware={offsetlessMiddlewares}>
 			{({ close, menuProps }) => {
 				const languages = getLanguageCodes();
 

diff --git a/app/desktop/components/flyouts/SwitchAccountAction.tsx b/app/desktop/components/flyouts/SwitchAccountAction.tsx
@@ -1,13 +1,11 @@
 import type { JSX } from 'solid-js';
 
-import { flip, shift } from '@floating-ui/dom';
-
 import type { DID } from '~/api/atp-schema.ts';
 import { multiagent } from '~/api/globals/agent.ts';
 
 import { MenuItem, MenuRoot } from '~/com/primitives/menu.ts';
 
-import { Flyout } from '~/com/components/Flyout.tsx';
+import { Flyout, offsetlessMiddlewares } from '~/com/components/Flyout.tsx';
 
 import DefaultUserAvatar from '~/com/assets/default-user-avatar.svg?url';
 import CheckIcon from '~/com/icons/baseline-check.tsx';
@@ -20,7 +18,7 @@ export interface SwitchAccountActionProps {
 
 const SwitchAccountAction = (props: SwitchAccountActionProps) => {
 	return (
-		<Flyout button={props.children} middleware={[shift({ padding: 16 }), flip()]} placement="bottom">
+		<Flyout button={props.children} middleware={offsetlessMiddlewares} placement="bottom">
 			{({ close, menuProps }) => (
 				<div {...menuProps} class={/* @once */ MenuRoot()}>
 					{multiagent.accounts.map((account) => (

diff --git a/app/desktop/components/settings/settings-views/content-filters/LabelConfigView.tsx b/app/desktop/components/settings/settings-views/content-filters/LabelConfigView.tsx
@@ -1,6 +1,6 @@
 import { type JSX, batch } from 'solid-js';
 
-import { type Middleware, flip } from '@floating-ui/dom';
+import { type Middleware } from '@floating-ui/dom';
 
 import { renderLabelGroupName, renderLabelName } from '~/api/display.ts';
 import { getSide } from '@floating-ui/utils';
@@ -12,7 +12,7 @@ import { assert } from '~/utils/misc.ts';
 
 import { preferences } from '~/desktop/globals/settings.ts';
 
-import { Flyout } from '~/com/components/Flyout.tsx';
+import { Flyout, offsetlessMiddlewares } from '~/com/components/Flyout.tsx';
 
 import { IconButton } from '~/com/primitives/icon-button.ts';
 import { Interactive } from '~/com/primitives/interactive.ts';
@@ -359,7 +359,7 @@ const offsetMiddleware: Middleware = {
 
 const LabelConfigFlyout = (props: LabelConfigFlyoutProps) => {
 	return (
-		<Flyout button={props.children} middleware={[offsetMiddleware, flip()]}>
+		<Flyout button={props.children} middleware={[offsetMiddleware, ...offsetlessMiddlewares]}>
 			{({ close, menuProps }) => {
 				const renderItem = (value: number | undefined, title: string, subtitle?: string) => {
 					return (