Skip to content

Commit cd21b13

Browse files
DanielleHuismanDanielleHuisman
committed
feat(core): add alignment option to cross axis
1 parent f5761c4 commit cd21b13

4 files changed

Lines changed: 87 additions & 36 deletions

File tree

‎packages/core/src/middleware/flip.rs‎

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,17 @@ use crate::{
1616
/// Name of the [`Flip`] middleware.
1717
pub const FLIP_NAME: &str = "flip";
1818

19+
/// Cross axis option used by [`Flip`] middleware.
20+
#[derive(Copy, Clone, Debug, PartialEq)]
21+
pub enum CrossAxis {
22+
/// Whether to check cross axis overflow for both side and alignment flipping.
23+
True,
24+
/// Whether to disable all cross axis overflow checking.
25+
False,
26+
/// Whether to check cross axis overflow for alignment flipping only.
27+
Alignment,
28+
}
29+
1930
/// Fallback strategy used by [`Flip`] middleware.
2031
#[derive(Copy, Clone, Debug, Default, PartialEq)]
2132
pub enum FallbackStrategy {
@@ -38,9 +49,12 @@ pub struct FlipOptions<Element: Clone> {
3849
pub main_axis: Option<bool>,
3950

4051
/// The axis that runs along the alignment of the floating element. Determines whether overflow along this axis is checked to perform a flip.
52+
/// - [`CrossAxis::True`]: Whether to check cross axis overflow for both side and alignment flipping.
53+
/// - [`CrossAxis::False`]: Whether to disable all cross axis overflow checking.
54+
/// - [`CrossAxis::Alignment`]: Whether to check cross axis overflow for alignment flipping only.
4155
///
4256
/// Defaults to `true`.
43-
pub cross_axis: Option<bool>,
57+
pub cross_axis: Option<CrossAxis>,
4458

4559
/// Placements to try sequentially if the preferred `placement` does not fit.
4660
///
@@ -77,7 +91,7 @@ impl<Element: Clone> FlipOptions<Element> {
7791
}
7892

7993
/// Set `cross_axis` option.
80-
pub fn cross_axis(mut self, value: bool) -> Self {
94+
pub fn cross_axis(mut self, value: CrossAxis) -> Self {
8195
self.cross_axis = Some(value);
8296
self
8397
}
@@ -203,7 +217,7 @@ impl<Element: Clone + PartialEq, Window: Clone + PartialEq> Middleware<Element,
203217
});
204218

205219
let check_main_axis = options.main_axis.unwrap_or(true);
206-
let check_cross_axis = options.cross_axis.unwrap_or(true);
220+
let check_cross_axis = options.cross_axis.unwrap_or(CrossAxis::True);
207221
let specified_fallback_placements = options.fallback_placements.clone();
208222
let fallback_strategy = options.fallback_strategy.unwrap_or_default();
209223
let fallback_axis_side_direction = options.fallback_axis_side_direction;
@@ -264,7 +278,7 @@ impl<Element: Clone + PartialEq, Window: Clone + PartialEq> Middleware<Element,
264278
if check_main_axis {
265279
overflows.push(overflow.side(side));
266280
}
267-
if check_cross_axis {
281+
if check_cross_axis == CrossAxis::True || check_cross_axis == CrossAxis::Alignment {
268282
let sides = get_alignment_sides(placement, rects, rtl);
269283
overflows.push(overflow.side(sides.0));
270284
overflows.push(overflow.side(sides.1));
@@ -281,22 +295,34 @@ impl<Element: Clone + PartialEq, Window: Clone + PartialEq> Middleware<Element,
281295
let next_placement = placements.get(next_index);
282296

283297
if let Some(next_placement) = next_placement {
284-
// Try next placement and re-run the lifecycle.
285-
return MiddlewareReturn {
286-
x: None,
287-
y: None,
288-
data: Some(
289-
serde_json::to_value(FlipData {
290-
index: next_index,
291-
overflows: overflows_data,
292-
})
293-
.expect("Data should be valid JSON."),
294-
),
295-
reset: Some(Reset::Value(ResetValue {
296-
placement: Some(*next_placement),
297-
rects: None,
298-
})),
298+
let ignore_cross_axis_overflow = if check_cross_axis == CrossAxis::Alignment {
299+
initial_side_axis != get_side_axis(*next_placement)
300+
} else {
301+
false
299302
};
303+
let has_initial_main_axis_overflow = overflows_data
304+
.first()
305+
.and_then(|overflow| overflow.overflows.first())
306+
.is_some_and(|overflow| *overflow > 0.0);
307+
308+
if !ignore_cross_axis_overflow || has_initial_main_axis_overflow {
309+
// Try next placement and re-run the lifecycle.
310+
return MiddlewareReturn {
311+
x: None,
312+
y: None,
313+
data: Some(
314+
serde_json::to_value(FlipData {
315+
index: next_index,
316+
overflows: overflows_data,
317+
})
318+
.expect("Data should be valid JSON."),
319+
),
320+
reset: Some(Reset::Value(ResetValue {
321+
placement: Some(*next_placement),
322+
rects: None,
323+
})),
324+
};
325+
}
300326
}
301327

302328
// First, find the candidates that fit on the main axis side of overflow, then find the placement that fits the best on the main cross axis side.

‎packages/dom/src/middleware.rs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ use web_sys::{Element, Window};
66

77
pub use floating_ui_core::middleware::{
88
ARROW_NAME, AUTO_PLACEMENT_NAME, ApplyState, ArrowData, ArrowOptions, AutoPlacementData,
9-
AutoPlacementDataOverflow, AutoPlacementOptions, DefaultLimiter, FLIP_NAME, FallbackStrategy,
10-
FlipData, FlipDataOverflow, FlipOptions, HIDE_NAME, HideData, HideOptions, HideStrategy,
11-
INLINE_NAME, InlineOptions, LimitShift, LimitShiftOffset, LimitShiftOffsetValues,
9+
AutoPlacementDataOverflow, AutoPlacementOptions, CrossAxis, DefaultLimiter, FLIP_NAME,
10+
FallbackStrategy, FlipData, FlipDataOverflow, FlipOptions, HIDE_NAME, HideData, HideOptions,
11+
HideStrategy, INLINE_NAME, InlineOptions, LimitShift, LimitShiftOffset, LimitShiftOffsetValues,
1212
LimitShiftOptions, OFFSET_NAME, OffsetData, OffsetOptions, OffsetOptionsValues, SHIFT_NAME,
1313
SIZE_NAME, ShiftData, ShiftOptions, SizeOptions,
1414
};

‎packages/leptos/src/lib.rs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ pub use floating_ui_dom::{
1919
ARROW_NAME, AUTO_PLACEMENT_NAME, AlignedPlacement, Alignment, ApplyState, ArrowData,
2020
AutoPlacement, AutoPlacementData, AutoPlacementDataOverflow, AutoPlacementOptions,
2121
AutoUpdateOptions, Axis, Boundary, ClientRectObject, ComputePositionConfig,
22-
ComputePositionReturn, Coords, DefaultLimiter, DefaultVirtualElement, Derivable, DerivableFn,
23-
DetectOverflowOptions, Dimensions, ElementContext, ElementOrVirtual, ElementRects, FLIP_NAME,
24-
FallbackStrategy, Flip, FlipData, FlipDataOverflow, FlipOptions, HIDE_NAME, Hide, HideData,
25-
HideOptions, HideStrategy, INLINE_NAME, Inline, InlineOptions, Length, LimitShift,
22+
ComputePositionReturn, Coords, CrossAxis, DefaultLimiter, DefaultVirtualElement, Derivable,
23+
DerivableFn, DetectOverflowOptions, Dimensions, ElementContext, ElementOrVirtual, ElementRects,
24+
FLIP_NAME, FallbackStrategy, Flip, FlipData, FlipDataOverflow, FlipOptions, HIDE_NAME, Hide,
25+
HideData, HideOptions, HideStrategy, INLINE_NAME, Inline, InlineOptions, Length, LimitShift,
2626
LimitShiftOffset, LimitShiftOffsetValues, LimitShiftOptions, Middleware, MiddlewareData,
2727
MiddlewareReturn, MiddlewareState, MiddlewareVec, MiddlewareWithOptions, OFFSET_NAME, Offset,
2828
OffsetData, OffsetOptions, OffsetOptionsValues, Padding, PartialSideObject, Placement, Rect,

‎packages/leptos/tests/visual/src/spec/flip.rs‎

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
use convert_case::{Case, Casing};
22
use floating_ui_leptos::{
3-
FallbackStrategy, Flip, FlipOptions, MiddlewareVec, Placement, Shift, ShiftOptions,
4-
UseFloatingOptions, UseFloatingReturn, use_floating,
3+
Alignment, CrossAxis, FallbackStrategy, Flip, FlipOptions, MiddlewareVec, Placement, Shift,
4+
ShiftOptions, UseFloatingOptions, UseFloatingReturn, use_floating,
55
};
66
use leptos::prelude::*;
77
use leptos_node_ref::AnyNodeRef;
@@ -26,11 +26,13 @@ pub fn Flip() -> impl IntoView {
2626

2727
let (placement, set_placement) = signal(Placement::Bottom);
2828
let (main_axis, set_main_axis) = signal(true);
29-
let (cross_axis, set_cross_axis) = signal(true);
29+
let (cross_axis, set_cross_axis) = signal(CrossAxis::True);
3030
let (fallback_placements, set_fallback_placements) = signal(FallbackPlacements::None);
3131
let (fallback_strategy, set_fallback_strategy) = signal(FallbackStrategy::BestFit);
3232
let (flip_alignment, set_flip_alignment) = signal(true);
3333
let (add_shift, set_add_shift) = signal(false);
34+
let (fallback_axis_side_direction, set_fallback_axis_side_direction) =
35+
signal(None::<Alignment>);
3436

3537
let UseFloatingReturn {
3638
x,
@@ -49,9 +51,10 @@ pub fn Flip() -> impl IntoView {
4951
.main_axis(main_axis.get())
5052
.cross_axis(cross_axis.get())
5153
.fallback_strategy(fallback_strategy.get())
52-
.flip_alignment(flip_alignment.get());
54+
.flip_alignment(flip_alignment.get())
55+
.fallback_axis_side_direction(Alignment::End);
5356

54-
options = if add_shift.get() {
57+
options = if add_shift.get() && fallback_axis_side_direction.get().is_none() {
5558
options.fallback_placements(vec![Placement::Bottom])
5659
} else {
5760
match fallback_placements.get() {
@@ -100,7 +103,8 @@ pub fn Flip() -> impl IntoView {
100103
style:position=move || format!("{:?}", strategy.get()).to_lowercase()
101104
style:top=move || format!("{}px", y.get())
102105
style:left=move || format!("{}px", x.get())
103-
style:width=move || if add_shift.get() { "400px" } else { Default::default() }
106+
style:width=move || if add_shift.get() { if fallback_axis_side_direction.get().is_none() { "400px" } else { "200px" } } else { Default::default() }
107+
style:height=move || if add_shift.get() { if fallback_axis_side_direction.get().is_none() { Default::default() } else { "50px" } } else { Default::default() }
104108
>
105109
Floating
106110
</div>
@@ -152,19 +156,19 @@ pub fn Flip() -> impl IntoView {
152156
<h2>crossAxis</h2>
153157
<div class="controls">
154158
<For
155-
each=|| [true, false]
156-
key=|value| format!("{value}")
159+
each=|| [CrossAxis::True, CrossAxis::False, CrossAxis::Alignment]
160+
key=|value| format!("{value:?}")
157161
children=move |value| view! {
158162
<button
159-
data-testid=format!("crossAxis-{}", value)
163+
data-testid=format!("crossAxis-{}", format!("{value:?}").to_case(Case::Camel))
160164
style:background-color=move || if cross_axis.get() == value {
161165
"black"
162166
} else {
163167
""
164168
}
165169
on:click=move |_| set_cross_axis.set(value)
166170
>
167-
{format!("{value}")}
171+
{format!("{value:?}").to_case(Case::Camel)}
168172
</button>
169173
}
170174
/>
@@ -261,5 +265,26 @@ pub fn Flip() -> impl IntoView {
261265
}
262266
/>
263267
</div>
268+
269+
<h2>fallbackAxisSideDirection</h2>
270+
<div class="controls">
271+
<For
272+
each=|| [Some(Alignment::Start), Some(Alignment::End), None]
273+
key=|value| format!("{value:?}")
274+
children=move |value| view! {
275+
<button
276+
data-testid=format!("fallbackAxisSideDirection-{}", format!("{value:?}").to_case(Case::Camel))
277+
style:background-color=move || if fallback_axis_side_direction.get() == value {
278+
"black"
279+
} else {
280+
""
281+
}
282+
on:click=move |_| set_fallback_axis_side_direction.set(value)
283+
>
284+
{format!("{value:?}").to_case(Case::Camel)}
285+
</button>
286+
}
287+
/>
288+
</div>
264289
}
265290
}

0 commit comments

Comments
 (0)