34 | 35 | ## `
60 |
61 | [](https://stackblitz.com/~/github.com/arturmarc/fluid-flexbox?file=src/usage/examples/BasicUsageExample.tsx)
62 |
63 | ```jsx
64 | import { FluidFlexbox } from "fluid-flexbox";
65 |
66 | 
80 |
81 | Not just styling, but also content can be easily adapted using render prop:
82 |
83 | [](https://stackblitz.com/~/github.com/arturmarc/fluid-flexbox?file=src/usage/examples/AdaptingContentExample.tsx)
84 |
85 | ```jsx
86 | 
129 |
130 | [](https://stackblitz.com/~/github.com/arturmarc/fluid-flexbox?file=src/usage/examples/NestedExample.tsx)
131 |
132 | ```jsx
133 | 
165 |
166 | [](https://stackblitz.com/~/github.com/arturmarc/fluid-flexbox?file=src/usage/examples/ConditionallyNestedExample.tsx)
167 |
168 | ```jsx
169 | const contentWhenWidest = (
170 | <>
171 |
172 |
173 |
174 |
175 | );
176 | const contentWhenNarrower = (
177 | <>
178 |
179 |
180 |
181 |
182 | );
183 | const narrowestContent = (
184 | <>
185 |
188 |
191 |
194 |
195 | );
196 | return (
197 | 
217 |
218 | [](https://stackblitz.com/~/github.com/arturmarc/fluid-flexbox?file=src/usage/examples/DeepNestingExample.tsx)
219 |
220 | ```jsx
221 | 
252 |
253 | [](https://stackblitz.com/~/github.com/arturmarc/fluid-flexbox?file=src/usage/examples/SingleChildExample.tsx)
254 |
255 | ```jsx
256 |
51 |
52 |
53 |
54 |
55 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
93 |
94 |
99 |
100 |
101 |
141 |
142 |
143 |
144 |
145 |
148 |
149 |
14 |
15 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fluid-flexbox",
3 | "private": false,
4 | "version": "0.1.5",
5 | "type": "module",
6 | "repository": {
7 | "type": "git",
8 | "url": "git+ssh://git@github.com/arturmarc/fluid-flexbox.git"
9 | },
10 | "description": "A \"flex-wrap on steroids\" component and custom element that detects when it's flex children no longer fit in a single row.",
11 | "author": "Artur Marczyk Some content
16 | Some more content
17 |
95 |
97 |
98 |
100 |
101 |
103 |
104 |
106 | `;
107 |
108 | const slotElement = this.shadowRoot?.querySelector(
109 | "slot:not([name])",
110 | ) as HTMLSlotElement;
111 |
112 | if (!this.shadowRoot || !slotElement) {
113 | throw "[flex-wrap-detector] Failed to attach shadow root.";
114 | }
115 |
116 | this.slotElement = slotElement;
117 | }
118 |
119 | connectedCallback() {
120 | const slotChildren = this.slotElement.assignedElements();
121 | if (
122 | slotChildren.length !== 1 ||
123 | !(slotChildren[0] instanceof HTMLElement)
124 | ) {
125 | throw "[flex-wrap-detector] Expected a single child element.";
126 | }
127 | this.rawChildElement = slotChildren[0] as HTMLElement;
128 |
129 | this.copyChildToInvisibleElements();
130 | this.initMutationObserver();
131 | }
132 |
133 | disconnectedCallback() {
134 | const pendingMutations = this.mutationObserver?.takeRecords();
135 | if (pendingMutations && pendingMutations.length > 0) {
136 | // make sure to handle mutations before disconnecting
137 | this.handleMutations();
138 | }
139 | this.mutationObserver?.disconnect();
140 | this.resizeObserver?.disconnect();
141 | }
142 |
143 | copyChildToInvisibleElements() {
144 | const existingNonWrapping = this.querySelector(
145 | ":scope > [slot='invisible-non-wrapping']",
146 | ) as HTMLElement | null;
147 | const existingWrapping = this.querySelector(
148 | ":scope > [slot='invisible-wrapping']",
149 | ) as HTMLElement | null;
150 | if (
151 | existingNonWrapping &&
152 | existingWrapping &&
153 | !this.invisibleNonWrappingEl &&
154 | !this.invisibleWrappingEl
155 | ) {
156 | // re-use existing invisible elements
157 | // they might already be there if the element has been cloned
158 | // (likely when nesting flex-wrap-detectors)
159 | this.invisibleNonWrappingEl = existingNonWrapping;
160 | this.invisibleWrappingEl = existingWrapping;
161 | return;
162 | }
163 |
164 | // clear already existing invisible copies
165 | this.querySelector(":scope > [slot='invisible-non-wrapping']")?.remove();
166 | this.querySelector(":scope > [slot='invisible-wrapping']")?.remove();
167 |
168 | if (this.children.length > 2) {
169 | console.error(
170 | "[flex-wrap-detector] Something went wrong. Too many child elements.",
171 | );
172 | }
173 |
174 | this.invisibleNonWrappingEl = this.childElement.cloneNode(
175 | true,
176 | ) as HTMLElement;
177 | setStyleAndAttrDefaultsForInvisible(this.invisibleNonWrappingEl);
178 | // the following style is needed to make sure the children of the non-wrapping
179 | // hidden clone are not expanding the container horizontally
180 | // (without it the text inside might start wrapping to the next line)
181 | // (it can't be applied using cs because those are not direct children of the detector)
182 | [...this.invisibleNonWrappingEl.children].forEach((el) => {
183 | (el as HTMLElement).style.flexShrink = "0";
184 | });
185 | this.invisibleNonWrappingEl.dataset["flexWrapDetectorInvisible"] =
186 | "non-wrapping";
187 | this.invisibleNonWrappingEl.slot = "invisible-non-wrapping";
188 | this.childElement.parentElement?.insertBefore(
189 | this.invisibleNonWrappingEl,
190 | this.childElement,
191 | );
192 |
193 | this.invisibleWrappingEl = this.childElement.cloneNode(true) as HTMLElement;
194 | setStyleAndAttrDefaultsForInvisible(this.invisibleWrappingEl);
195 | this.invisibleWrappingEl.style.flexWrap = "wrap";
196 | this.invisibleWrappingEl.dataset["flexWrapDetectorInvisible"] = "wrapping";
197 | this.invisibleWrappingEl.slot = "invisible-wrapping";
198 | this.childElement.parentElement?.insertBefore(
199 | this.invisibleWrappingEl,
200 | this.childElement,
201 | );
202 |
203 | this.initResizeObserver();
204 | }
205 |
206 | initMutationObserver() {
207 | this.mutationObserver?.disconnect();
208 | this.mutationObserver = new MutationObserver(
209 | this.handleMutations.bind(this),
210 | );
211 |
212 | this.mutationObserver.observe(this.childElement, {
213 | childList: true,
214 | attributes: true,
215 | characterData: true,
216 | subtree: true,
217 | });
218 | }
219 |
220 | handleMutations() {
221 | if (this.mutatingInternally) {
222 | return;
223 | }
224 | console.log();
225 | const wrappedContent = this.querySelector(
226 | ":scope > [slot='wrapped-content']",
227 | );
228 |
229 | if (this.wrappedChangesApplied && !wrappedContent) {
230 | const suppressWarning = this.hasAttribute("suppress-warning");
231 | if (suppressWarning) {
232 | return;
233 | }
234 |
235 | console.warn(
236 | "[flex-wrap-detector] Changes to observed content detected while wrapped. " +
237 | "This will likely have undesired effects. See more at https://github.com/arturmarc/fluid-flexbox/tree/main/flex-wrap-detector#dynamic-content " +
238 | "You might see this warning because of nested
209 |
311 | );
312 | }
313 |
--------------------------------------------------------------------------------
/src/usage/ExampleSelector.tsx:
--------------------------------------------------------------------------------
1 | import { ChevronsUpDownIcon } from "lucide-react";
2 | import {
3 | ReactElement,
4 | useEffect,
5 | useLayoutEffect,
6 | useMemo,
7 | useState,
8 | } from "react";
9 | import {
10 | DropdownMenu,
11 | DropdownMenuContent,
12 | DropdownMenuRadioGroup,
13 | DropdownMenuRadioItem,
14 | DropdownMenuTrigger,
15 | } from "../components/ui/dropdown-menu";
16 | import { AdaptingContentExampleCE } from "./custom-element-react-examples/AdaptingContentExampleCE";
17 | import { BasicUsageExampleCE } from "./custom-element-react-examples/BasicUsageExampleCE";
18 | import { ConditionallyNestedExampleCE } from "./custom-element-react-examples/ConditionallyNestedExampleCE";
19 | import { DeepNestingExampleCE } from "./custom-element-react-examples/DeepNestingExampleCE";
20 | import { DynamicContentExampleCE } from "./custom-element-react-examples/DynamicContentExampleCE";
21 | import { InfiniteLoopCE } from "./custom-element-react-examples/InfiniteLoopCE";
22 | import { NestedExampleCE } from "./custom-element-react-examples/NestedExampleCE";
23 | import { OrderAndReverseCE } from "./custom-element-react-examples/OrderAndReverseCE";
24 | import { SingleChildExampleCE } from "./custom-element-react-examples/SingleChildExampleCE";
25 | import { AdaptingContentExample } from "./examples/AdaptingContentExample";
26 | import { AllPropsShowcaseExample } from "./examples/AllPropsShowcaseExample";
27 | import { BasicUsageExample } from "./examples/BasicUsageExample";
28 | import { ConditionallyNestedExample } from "./examples/ConditionallyNestedExample";
29 | import { DeepNestingExample } from "./examples/DeepNestingExample";
30 | import { HolyGrailToolbarExample } from "./examples/HolyGrailToolbarExample";
31 | import { InfiniteLoop } from "./examples/InfiniteLoop";
32 | import { NestedExample } from "./examples/NestedExample";
33 | import { OrderAndReverse } from "./examples/OrderAndReverse";
34 | import { SingleChildExample } from "./examples/SingleChildExample";
35 | import { SmallerHeight } from "./examples/SmallerHeight";
36 | import adaptingContentMutatingHtml from "./html-examples/adapting-content-mutating.html?raw";
37 | import adaptingContentHtml from "./html-examples/adapting-content.html?raw";
38 | import basicExampleHtml from "./html-examples/basic-usage.html?raw";
39 | import conditionallyNestedHtml from "./html-examples/conditionally-nested.html?raw";
40 | import deepNestingHtml from "./html-examples/deep-nesting.html?raw";
41 | import dynamicContentHtml from "./html-examples/dynamic-content.html?raw";
42 | import holyGrailHtml from "./html-examples/holy-grail.html?raw";
43 | import singleChildHtml from "./html-examples/single-child.html?raw";
44 | import twoLevelsNestingHtml from "./html-examples/two-levels-nesting.html?raw";
45 | import { Resizer } from "./Resizer";
46 |
47 | export function ExampleSelector() {
48 | const [reactExample, setReactExample] = useState("Basic Usage");
49 | const [htmlExample, setHtmlExample] = useState("Basic Usage");
50 |
51 | // show all examples / including internal ones that are more like
52 | // test and don't really showcase anything
53 | const [showAll, setShowAll] = useState(false);
54 | const [showCEReact, setShowCEReact] = useState(false);
55 |
56 | useEffect(() => {
57 | const searchParams = new URLSearchParams(window.location.search);
58 | setShowAll(searchParams.has("show-all"));
59 | setShowCEReact(searchParams.has("show-ce"));
60 | if (searchParams.has("show-ce")) {
61 | setReactExample("CE Basic Usage");
62 | }
63 | }, []);
64 |
65 | let reactDemoExamples: Map
221 |
240 | {
225 | notWrappingCopyRef.current = el;
226 | notWrappingCopyRefCb(el);
227 | }}
228 | style={{
229 | ...invisibleStyle,
230 | flexWrap: "nowrap",
231 | }}
232 | >
233 |
234 | {children && typeof children === "function"
235 | ? children(false)
236 | : children}
237 |
238 |
239 |
251 |
270 | {
255 | wrappingCopyRef.current = el;
256 | wrappingCopyRefCb(el);
257 | }}
258 | style={{
259 | ...invisibleStyle,
260 | flexWrap: "wrap",
261 | }}
262 | >
263 |
264 | {children && typeof children === "function"
265 | ? children(false)
266 | : children}
267 |
268 |
269 |
290 |
310 |
303 |
304 | {children && typeof children === "function"
305 | ? children(isWrapped)
306 | : children}
307 |
308 |
309 |
148 | {reactExamples.get(reactExample)}
172 |
173 |
197 |
203 |
204 |
205 | );
206 | }
207 |
--------------------------------------------------------------------------------
/src/usage/FlexWrapDetector.tsx:
--------------------------------------------------------------------------------
1 | import { useRef, useEffect } from "react";
2 | import { FlexWrapDetectorElement } from "../dom/FlexWrapDetectorElement";
3 |
4 | export function FlexWrapDetector(
5 | props: React.DetailedHTMLProps<
6 | React.HTMLAttributes
149 |
150 |
151 |
157 | e.preventDefault()}>
158 |
162 | {[...reactExamples.keys()].map((example) => (
163 |
164 | {example}
165 |
166 | ))}
167 |
168 |
169 |
170 |
171 |
152 | React Example:
153 | {reactExample}
154 |
156 |
174 |
175 |
176 |
182 | e.preventDefault()}>
183 |
187 | {[...htmlExamples.keys()].map((example) => (
188 |
189 | {example}
190 |
191 | ))}
192 |
193 |
194 |
195 |
196 |
177 | HTML Example:
178 | {htmlExample}
179 |
181 |
6 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/src/usage/custom-element-react-examples/AdaptingContentExampleCE.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "../../components/ui/button";
2 | import { FlexWrapDetector } from "../FlexWrapDetector";
3 |
4 | export function AdaptingContentExampleCE() {
5 | return (
6 |
7 |
9 | {children}
8 |
10 | Resize here
12 |
14 |
15 |
16 |
17 |
18 |
8 |
9 |
10 |
11 |
12 | {contentWhenWidest}
36 |
37 |
38 |
43 |
44 | {contentWhenNarrower}
39 |
40 | {narrowestContent}
41 |
42 |
26 |
30 |
35 |
51 |
52 |
36 |
40 |
41 |
49 |
50 |
42 |
46 |
47 |
48 |
11 |
14 |
15 |
16 |
7 | {
11 | const toChange = el.querySelector("#to_change");
12 | if (toChange) {
13 | toChange.innerHTML = "THIRD EXPANDED";
14 | }
15 | }}
16 | >
17 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/usage/custom-element-react-examples/NestedExampleCE.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "../../components/ui/button";
2 | import { FlexWrapDetector } from "../FlexWrapDetector";
3 |
4 | export function NestedExampleCE() {
5 | return (
6 | Inside a flex container
8 |
18 |
19 |
20 |
21 |
22 |
13 |
18 |
25 |
31 |
36 |
37 |
19 |
22 |
23 |
24 |
32 |
33 |
34 |
35 |
8 |
9 |
10 |
11 |
12 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
7 |
8 | {(isWrapped) => (
9 | <>
10 |
11 |
12 | {!isWrapped && }
13 |
14 | )}
15 |
16 |
18 | );
19 | }
20 |
21 | function Buttons() {
22 | const isWrapped = useFluidFlexboxWrapped();
23 | return (
24 | <>
25 |
26 |
27 | {!isWrapped && }
28 |
29 | );
30 | }
31 |
32 | function Toolbar() {
33 | return (
34 |
14 |
15 |
16 | )}
17 | {!isInnerWrapped && (
18 |
21 |
32 | )}
33 | {isOuterWrapped && }
34 |
35 | )}
36 |
22 | - Home
23 | - Gallery
24 | - Blog
25 |
26 |
27 | - FAQ
28 | - Contact
29 | - About
30 |
31 |
7 |
9 | {(isWrapped) => (
10 | <>
11 |
12 |
13 |
14 |
15 | )}
16 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/src/usage/examples/NestedExample.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "../../components/ui/button";
2 | import { FluidFlexbox } from "../../react/FluidFlexbox";
3 |
4 | export function NestedExample() {
5 | return (
6 | Inside a flex container
8 |
10 | {isWrapped ? (
11 |
20 |
21 |
22 | )}
23 | Multi line long text example
15 |Multi line
16 |Multi line
17 | 18 | )} 19 |
3 |
4 |
5 |
6 |
7 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
3 |
4 |
5 |
6 |
7 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
20 |
21 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
27 |
28 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
25 |
26 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
--------------------------------------------------------------------------------
/src/usage/html-examples/holy-grail.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
9 |
16 |
17 |
5 |
6 |
7 |
8 |
10 |
13 |
15 | Toggle when collapsed to see the wrapped class still applied even when one button fits
14 |
18 |
19 |
28 |
36 |
37 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
29 |
33 |
35 | Now when collapsed hiding the extra button works as expected
34 |
38 |
39 |
44 |
62 |
40 |
41 |
42 |
43 |
45 |
48 |
50 |
61 | Now when collapsed hiding the extra button works as expected
49 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
16 |
17 |
22 |
23 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
21 |