@flipdish/ui-library 0.15.1 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,40 +10,58 @@ var reactRouter = require('react-router');
|
|
|
10
10
|
|
|
11
11
|
const UIProviderInner = ({ children, baseUrl, errorBoundary, portalContainer }) => {
|
|
12
12
|
const { themeRoot, resolvedMode } = ThemeProvider.useTheme();
|
|
13
|
-
const
|
|
14
|
-
const
|
|
13
|
+
const [portalAnchor, setPortalAnchor] = React.useState(null);
|
|
14
|
+
const portalAnchorNode = React.useRef(null);
|
|
15
|
+
const lastExplicitContainer = React.useRef(null);
|
|
15
16
|
// Create a themed, layout-invisible anchor inside the portalContainer so
|
|
16
17
|
// React Aria overlays inherit scoped CSS and the active data-theme.
|
|
17
18
|
// Compares resolved DOM nodes (not callback identity) to avoid tearing
|
|
18
19
|
// down the anchor when an inline callback like `() => getElementById(...)` is passed.
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
// useLayoutEffect + useState so the anchor exists before paint and its
|
|
21
|
+
// creation re-renders PortalContainer with a real container — a ref-only
|
|
22
|
+
// write left the first commit portalling to document.body.
|
|
23
|
+
React.useLayoutEffect(() => {
|
|
24
|
+
const explicit = portalContainer?.() ?? null;
|
|
25
|
+
if (explicit === lastExplicitContainer.current) {
|
|
22
26
|
return;
|
|
23
27
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
if (!
|
|
28
|
+
lastExplicitContainer.current = explicit;
|
|
29
|
+
portalAnchorNode.current?.remove();
|
|
30
|
+
portalAnchorNode.current = null;
|
|
31
|
+
if (!explicit) {
|
|
32
|
+
setPortalAnchor(null);
|
|
28
33
|
return;
|
|
29
34
|
}
|
|
30
35
|
const anchor = document.createElement('div');
|
|
31
36
|
anchor.style.display = 'contents';
|
|
32
37
|
anchor.setAttribute('data-theme', resolvedMode);
|
|
33
|
-
|
|
34
|
-
|
|
38
|
+
explicit.appendChild(anchor);
|
|
39
|
+
portalAnchorNode.current = anchor;
|
|
40
|
+
setPortalAnchor(anchor);
|
|
35
41
|
});
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
portalAnchorRef.current = null;
|
|
42
|
+
React.useLayoutEffect(() => () => {
|
|
43
|
+
portalAnchorNode.current?.remove();
|
|
44
|
+
portalAnchorNode.current = null;
|
|
40
45
|
}, []);
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
portalAnchorRef.current?.setAttribute('data-theme', resolvedMode);
|
|
46
|
+
React.useLayoutEffect(() => {
|
|
47
|
+
portalAnchorNode.current?.setAttribute('data-theme', resolvedMode);
|
|
44
48
|
}, [resolvedMode]);
|
|
45
|
-
//
|
|
46
|
-
|
|
49
|
+
// While the explicit container's anchor (or ThemeProvider's themed root) is
|
|
50
|
+
// unresolved, return null so overlays render nothing for that commit instead
|
|
51
|
+
// of landing on document.body and then relocating. Re-resolving `portalContainer`
|
|
52
|
+
// here (rather than trusting `portalAnchor` alone) also covers a host swap: if the
|
|
53
|
+
// host changes from A to B, this render's anchor still belongs to host A until the
|
|
54
|
+
// layout effect rebuilds it, so we must not hand out the stale host-A anchor.
|
|
55
|
+
const getContainer = React.useCallback(() => {
|
|
56
|
+
const explicit = portalContainer?.() ?? null;
|
|
57
|
+
if (explicit) {
|
|
58
|
+
return explicit === lastExplicitContainer.current ? portalAnchor : null;
|
|
59
|
+
}
|
|
60
|
+
if (portalContainer) {
|
|
61
|
+
return null;
|
|
62
|
+
}
|
|
63
|
+
return themeRoot;
|
|
64
|
+
}, [portalAnchor, portalContainer, themeRoot]);
|
|
47
65
|
return (jsxRuntime.jsx(reactRouter.BrowserRouter, { basename: baseUrl, children: jsxRuntime.jsx(RouteProvider.RouteProvider, { children: jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, { ...errorBoundary, children: jsxRuntime.jsx(PortalContainer.PortalContainer, { getContainer: getContainer, children: children }) }) }) }));
|
|
48
66
|
};
|
|
49
67
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["useTheme","useRef","
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["useTheme","useState","useRef","useLayoutEffect","useCallback","_jsx","BrowserRouter","RouteProvider","ErrorBoundary","PortalContainer","ThemeProvider"],"mappings":";;;;;;;;;;AA2CA,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAiE,KAAI;IAC/I,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAGA,sBAAQ,EAAE;IAC9C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGC,cAAQ,CAAqB,IAAI,CAAC;AAC1E,IAAA,MAAM,gBAAgB,GAAGC,YAAM,CAAqB,IAAI,CAAC;AACzD,IAAA,MAAM,qBAAqB,GAAGA,YAAM,CAAqB,IAAI,CAAC;;;;;;;;IAS9DC,qBAAe,CAAC,MAAK;AACnB,QAAA,MAAM,QAAQ,GAAG,eAAe,IAAI,IAAI,IAAI;AAC5C,QAAA,IAAI,QAAQ,KAAK,qBAAqB,CAAC,OAAO,EAAE;YAC9C;QACF;AAEA,QAAA,qBAAqB,CAAC,OAAO,GAAG,QAAQ;AACxC,QAAA,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE;AAClC,QAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI;QAE/B,IAAI,CAAC,QAAQ,EAAE;YACb,eAAe,CAAC,IAAI,CAAC;YACrB;QACF;QAEA,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,QAAA,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU;AACjC,QAAA,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;AAC/C,QAAA,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;AAC5B,QAAA,gBAAgB,CAAC,OAAO,GAAG,MAAM;QACjC,eAAe,CAAC,MAAM,CAAC;AACzB,IAAA,CAAC,CAAC;AAEF,IAAAA,qBAAe,CACb,MAAM,MAAK;AACT,QAAA,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE;AAClC,QAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI;IACjC,CAAC,EACD,EAAE,CACH;IAEDA,qBAAe,CAAC,MAAK;QACnB,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;AACpE,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;;;;;;;AAQlB,IAAA,MAAM,YAAY,GAAGC,iBAAW,CAAC,MAAK;AACpC,QAAA,MAAM,QAAQ,GAAG,eAAe,IAAI,IAAI,IAAI;QAC5C,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,QAAQ,KAAK,qBAAqB,CAAC,OAAO,GAAG,YAAY,GAAG,IAAI;QACzE;QACA,IAAI,eAAe,EAAE;AACnB,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAO,SAAS;IAClB,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC;AAE9C,IAAA,QACEC,cAAA,CAACC,yBAAa,EAAA,EAAC,QAAQ,EAAE,OAAO,EAAA,QAAA,EAC9BD,cAAA,CAACE,2BAAa,EAAA,EAAA,QAAA,EACZF,cAAA,CAACG,2BAAa,EAAA,EAAA,GAAK,aAAa,EAAA,QAAA,EAC9BH,cAAA,CAACI,+BAAe,EAAA,EAAC,YAAY,EAAE,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CAC3D,EAAA,CACF,EAAA,CACF;AAEpB,CAAC;AAED;;AAEG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,GAAG,IAAI,EAAsC,KAAI;;;;;AAKzG,IAAA,QACEJ,cAAA,CAACK,2BAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EACjDL,cAAA,CAAC,eAAe,OAAK,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CACzC;AAEpB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/UIProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAItG,OAAO,EAAE,KAAK,iBAAiB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/providers/UIProvider/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAItG,OAAO,EAAE,KAAK,iBAAiB,EAAkD,MAAM,OAAO,CAAC;AAG/F,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;OAOG;IACH,aAAa,EAAE,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;IACpD;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;CACrD;AA8ED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,0CAA0C,iBAAiB,CAAC,eAAe,CAAC,gCAUtG,CAAC"}
|
|
@@ -3,45 +3,63 @@ import { ErrorBoundary } from '@flipdish/ui-library/providers/ErrorBoundary';
|
|
|
3
3
|
import { PortalContainer } from '@flipdish/ui-library/providers/PortalContainer';
|
|
4
4
|
import { RouteProvider } from '@flipdish/ui-library/providers/RouteProvider';
|
|
5
5
|
import { ThemeProvider, useTheme } from '@flipdish/ui-library/providers/ThemeProvider';
|
|
6
|
-
import { useRef,
|
|
6
|
+
import { useState, useRef, useLayoutEffect, useCallback } from 'react';
|
|
7
7
|
import { BrowserRouter } from 'react-router';
|
|
8
8
|
|
|
9
9
|
const UIProviderInner = ({ children, baseUrl, errorBoundary, portalContainer }) => {
|
|
10
10
|
const { themeRoot, resolvedMode } = useTheme();
|
|
11
|
-
const
|
|
12
|
-
const
|
|
11
|
+
const [portalAnchor, setPortalAnchor] = useState(null);
|
|
12
|
+
const portalAnchorNode = useRef(null);
|
|
13
|
+
const lastExplicitContainer = useRef(null);
|
|
13
14
|
// Create a themed, layout-invisible anchor inside the portalContainer so
|
|
14
15
|
// React Aria overlays inherit scoped CSS and the active data-theme.
|
|
15
16
|
// Compares resolved DOM nodes (not callback identity) to avoid tearing
|
|
16
17
|
// down the anchor when an inline callback like `() => getElementById(...)` is passed.
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
// useLayoutEffect + useState so the anchor exists before paint and its
|
|
19
|
+
// creation re-renders PortalContainer with a real container — a ref-only
|
|
20
|
+
// write left the first commit portalling to document.body.
|
|
21
|
+
useLayoutEffect(() => {
|
|
22
|
+
const explicit = portalContainer?.() ?? null;
|
|
23
|
+
if (explicit === lastExplicitContainer.current) {
|
|
20
24
|
return;
|
|
21
25
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
if (!
|
|
26
|
+
lastExplicitContainer.current = explicit;
|
|
27
|
+
portalAnchorNode.current?.remove();
|
|
28
|
+
portalAnchorNode.current = null;
|
|
29
|
+
if (!explicit) {
|
|
30
|
+
setPortalAnchor(null);
|
|
26
31
|
return;
|
|
27
32
|
}
|
|
28
33
|
const anchor = document.createElement('div');
|
|
29
34
|
anchor.style.display = 'contents';
|
|
30
35
|
anchor.setAttribute('data-theme', resolvedMode);
|
|
31
|
-
|
|
32
|
-
|
|
36
|
+
explicit.appendChild(anchor);
|
|
37
|
+
portalAnchorNode.current = anchor;
|
|
38
|
+
setPortalAnchor(anchor);
|
|
33
39
|
});
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
portalAnchorRef.current = null;
|
|
40
|
+
useLayoutEffect(() => () => {
|
|
41
|
+
portalAnchorNode.current?.remove();
|
|
42
|
+
portalAnchorNode.current = null;
|
|
38
43
|
}, []);
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
portalAnchorRef.current?.setAttribute('data-theme', resolvedMode);
|
|
44
|
+
useLayoutEffect(() => {
|
|
45
|
+
portalAnchorNode.current?.setAttribute('data-theme', resolvedMode);
|
|
42
46
|
}, [resolvedMode]);
|
|
43
|
-
//
|
|
44
|
-
|
|
47
|
+
// While the explicit container's anchor (or ThemeProvider's themed root) is
|
|
48
|
+
// unresolved, return null so overlays render nothing for that commit instead
|
|
49
|
+
// of landing on document.body and then relocating. Re-resolving `portalContainer`
|
|
50
|
+
// here (rather than trusting `portalAnchor` alone) also covers a host swap: if the
|
|
51
|
+
// host changes from A to B, this render's anchor still belongs to host A until the
|
|
52
|
+
// layout effect rebuilds it, so we must not hand out the stale host-A anchor.
|
|
53
|
+
const getContainer = useCallback(() => {
|
|
54
|
+
const explicit = portalContainer?.() ?? null;
|
|
55
|
+
if (explicit) {
|
|
56
|
+
return explicit === lastExplicitContainer.current ? portalAnchor : null;
|
|
57
|
+
}
|
|
58
|
+
if (portalContainer) {
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
return themeRoot;
|
|
62
|
+
}, [portalAnchor, portalContainer, themeRoot]);
|
|
45
63
|
return (jsx(BrowserRouter, { basename: baseUrl, children: jsx(RouteProvider, { children: jsx(ErrorBoundary, { ...errorBoundary, children: jsx(PortalContainer, { getContainer: getContainer, children: children }) }) }) }));
|
|
46
64
|
};
|
|
47
65
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;AA2CA,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAiE,KAAI;IAC/I,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE;
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/providers/UIProvider/index.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;;AA2CA,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,eAAe,EAAiE,KAAI;IAC/I,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE;IAC9C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC;AAC1E,IAAA,MAAM,gBAAgB,GAAG,MAAM,CAAqB,IAAI,CAAC;AACzD,IAAA,MAAM,qBAAqB,GAAG,MAAM,CAAqB,IAAI,CAAC;;;;;;;;IAS9D,eAAe,CAAC,MAAK;AACnB,QAAA,MAAM,QAAQ,GAAG,eAAe,IAAI,IAAI,IAAI;AAC5C,QAAA,IAAI,QAAQ,KAAK,qBAAqB,CAAC,OAAO,EAAE;YAC9C;QACF;AAEA,QAAA,qBAAqB,CAAC,OAAO,GAAG,QAAQ;AACxC,QAAA,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE;AAClC,QAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI;QAE/B,IAAI,CAAC,QAAQ,EAAE;YACb,eAAe,CAAC,IAAI,CAAC;YACrB;QACF;QAEA,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC5C,QAAA,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,UAAU;AACjC,QAAA,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;AAC/C,QAAA,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC;AAC5B,QAAA,gBAAgB,CAAC,OAAO,GAAG,MAAM;QACjC,eAAe,CAAC,MAAM,CAAC;AACzB,IAAA,CAAC,CAAC;AAEF,IAAA,eAAe,CACb,MAAM,MAAK;AACT,QAAA,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE;AAClC,QAAA,gBAAgB,CAAC,OAAO,GAAG,IAAI;IACjC,CAAC,EACD,EAAE,CACH;IAED,eAAe,CAAC,MAAK;QACnB,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC;AACpE,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;;;;;;;AAQlB,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;AACpC,QAAA,MAAM,QAAQ,GAAG,eAAe,IAAI,IAAI,IAAI;QAC5C,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,QAAQ,KAAK,qBAAqB,CAAC,OAAO,GAAG,YAAY,GAAG,IAAI;QACzE;QACA,IAAI,eAAe,EAAE;AACnB,YAAA,OAAO,IAAI;QACb;AACA,QAAA,OAAO,SAAS;IAClB,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC;AAE9C,IAAA,QACEA,GAAA,CAAC,aAAa,EAAA,EAAC,QAAQ,EAAE,OAAO,EAAA,QAAA,EAC9BA,GAAA,CAAC,aAAa,EAAA,EAAA,QAAA,EACZA,GAAA,CAAC,aAAa,EAAA,EAAA,GAAK,aAAa,EAAA,QAAA,EAC9BA,GAAA,CAAC,eAAe,EAAA,EAAC,YAAY,EAAE,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CAC3D,EAAA,CACF,EAAA,CACF;AAEpB,CAAC;AAED;;AAEG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,GAAG,IAAI,EAAsC,KAAI;;;;;AAKzG,IAAA,QACEA,GAAA,CAAC,aAAa,EAAA,EAAC,iBAAiB,EAAE,iBAAiB,EAAA,QAAA,EACjDA,GAAA,CAAC,eAAe,OAAK,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CACzC;AAEpB;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flipdish/ui-library",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -119,8 +119,8 @@
|
|
|
119
119
|
"postcss-prefix-selector": "^2.1.1",
|
|
120
120
|
"qr-code-styling": "^1.9.2",
|
|
121
121
|
"react": "^19.0.0",
|
|
122
|
-
"react-aria": "
|
|
123
|
-
"react-aria-components": "
|
|
122
|
+
"react-aria": "3.50.0",
|
|
123
|
+
"react-aria-components": "1.19.0",
|
|
124
124
|
"react-dom": "^19.0.0",
|
|
125
125
|
"react-hotkeys-hook": "^5.3.2",
|
|
126
126
|
"react-native": ">=0.81.0",
|
|
@@ -253,8 +253,8 @@
|
|
|
253
253
|
"playwright": "^1.61.1",
|
|
254
254
|
"qr-code-styling": "^1.9.2",
|
|
255
255
|
"react": "^19.0.0",
|
|
256
|
-
"react-aria": "
|
|
257
|
-
"react-aria-components": "
|
|
256
|
+
"react-aria": "3.50.0",
|
|
257
|
+
"react-aria-components": "1.19.0",
|
|
258
258
|
"react-dom": "^19.0.0",
|
|
259
259
|
"react-hotkeys-hook": "^5.3.2",
|
|
260
260
|
"react-native-css": "^3.0.7",
|