@mittwald/flow-react-components 1.2.0-next.37 → 1.2.0-next.38
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.
- package/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/js/packages/components/src/components/Activity/Activity.mjs +16 -5
- package/dist/js/packages/components/src/components/Activity/Activity.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Activity/context.mjs +20 -0
- package/dist/js/packages/components/src/components/Activity/context.mjs.map +1 -0
- package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs +3 -0
- package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs +3 -0
- package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Tooltip/Tooltip.mjs +3 -0
- package/dist/js/packages/components/src/components/Tooltip/Tooltip.mjs.map +1 -1
- package/dist/types/components/Activity/Activity.d.ts.map +1 -1
- package/dist/types/components/Activity/context.d.ts +12 -0
- package/dist/types/components/Activity/context.d.ts.map +1 -0
- package/dist/types/components/Overlay/components/OverlayContent.d.ts.map +1 -1
- package/dist/types/components/Popover/components/PopoverContent/PopoverContent.d.ts.map +1 -1
- package/dist/types/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/package.json +9 -9
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { SuspenseTrigger } from "../SuspenseTrigger/SuspenseTrigger.mjs";
|
|
4
|
-
import
|
|
4
|
+
import { ActivityContextProvider, useIsActivityActive } from "./context.mjs";
|
|
5
|
+
import React, { Suspense, useEffect, useLayoutEffect, useState } from "react";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
import { useIsSSR } from "react-aria";
|
|
7
8
|
//#region src/components/Activity/Activity.tsx
|
|
@@ -17,6 +18,7 @@ var Activity = (props) => {
|
|
|
17
18
|
const { isActive: isActiveFromProps = true, inactiveDelay, forceCustomActivity = false, children } = props;
|
|
18
19
|
const [isActiveState, setIsActiveState] = useState(isActiveFromProps);
|
|
19
20
|
const isSsr = useIsSSR();
|
|
21
|
+
const isParentActive = useIsActivityActive();
|
|
20
22
|
useEffect(() => {
|
|
21
23
|
if (!inactiveDelay) return;
|
|
22
24
|
if (isActiveFromProps) setIsActiveState(true);
|
|
@@ -30,14 +32,23 @@ var Activity = (props) => {
|
|
|
30
32
|
}
|
|
31
33
|
}, [isActiveFromProps, inactiveDelay]);
|
|
32
34
|
const isActive = inactiveDelay ? isActiveState : isActiveFromProps;
|
|
35
|
+
const [isHiddenState, setIsHiddenState] = useState(!isActive);
|
|
36
|
+
useLayoutEffect(() => {
|
|
37
|
+
setIsHiddenState(!isActive);
|
|
38
|
+
}, [isActive]);
|
|
39
|
+
const isHidden = isHiddenState && !isActive;
|
|
33
40
|
if (isSsr) return isActive ? children : null;
|
|
34
|
-
|
|
35
|
-
|
|
41
|
+
const content = /* @__PURE__ */ jsx(ActivityContextProvider, {
|
|
42
|
+
value: isParentActive && isActive,
|
|
36
43
|
children
|
|
37
44
|
});
|
|
45
|
+
if (isActivitySupported && !forceCustomActivity) return /* @__PURE__ */ jsx(React.Activity, {
|
|
46
|
+
mode: isHidden ? "hidden" : "visible",
|
|
47
|
+
children: content
|
|
48
|
+
});
|
|
38
49
|
return /* @__PURE__ */ jsx(CustomActivity, {
|
|
39
|
-
isActive,
|
|
40
|
-
children
|
|
50
|
+
isActive: !isHidden,
|
|
51
|
+
children: content
|
|
41
52
|
});
|
|
42
53
|
};
|
|
43
54
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Activity.mjs","names":[],"sources":["../../../../../../../src/components/Activity/Activity.tsx"],"sourcesContent":["import SuspenseTrigger from \"@/components/SuspenseTrigger\";\nimport React, { useEffect, useState } from \"react\";\nimport { type FC, type PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport { useIsSSR } from \"react-aria\";\n\nexport interface ActivityProps extends PropsWithChildren {\n isActive?: boolean;\n inactiveDelay?: number;\n /** @internal */\n forceCustomActivity?: boolean;\n}\n\nconst isActivitySupported = React.version.startsWith(\"19.2\");\n\nconst CustomActivity: FC<ActivityProps> = (props) => {\n const { children, isActive: isActive = true } = props;\n\n return (\n <Suspense fallback={null}>\n <SuspenseTrigger show={!isActive} />\n {children}\n </Suspense>\n );\n};\n\nexport const Activity: FC<ActivityProps> = (props) => {\n const {\n isActive: isActiveFromProps = true,\n inactiveDelay,\n forceCustomActivity = false,\n children,\n } = props;\n\n const [isActiveState, setIsActiveState] = useState(isActiveFromProps);\n const isSsr = useIsSSR();\n\n useEffect(() => {\n if (!inactiveDelay) {\n return;\n }\n\n if (isActiveFromProps) {\n setIsActiveState(true);\n } else {\n const timeout = setTimeout(() => {\n setIsActiveState(false);\n }, inactiveDelay);\n\n return () => {\n clearTimeout(timeout);\n };\n }\n }, [isActiveFromProps, inactiveDelay]);\n\n const isActive = inactiveDelay ? isActiveState : isActiveFromProps;\n\n if (isSsr) {\n return isActive ? children : null;\n }\n\n if (isActivitySupported && !forceCustomActivity) {\n return (\n <React.Activity mode={
|
|
1
|
+
{"version":3,"file":"Activity.mjs","names":[],"sources":["../../../../../../../src/components/Activity/Activity.tsx"],"sourcesContent":["import SuspenseTrigger from \"@/components/SuspenseTrigger\";\nimport React, { useEffect, useLayoutEffect, useState } from \"react\";\nimport { type FC, type PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport { useIsSSR } from \"react-aria\";\nimport {\n ActivityContextProvider,\n useIsActivityActive,\n} from \"@/components/Activity/context\";\n\nexport interface ActivityProps extends PropsWithChildren {\n isActive?: boolean;\n inactiveDelay?: number;\n /** @internal */\n forceCustomActivity?: boolean;\n}\n\nconst isActivitySupported = React.version.startsWith(\"19.2\");\n\nconst CustomActivity: FC<ActivityProps> = (props) => {\n const { children, isActive: isActive = true } = props;\n\n return (\n <Suspense fallback={null}>\n <SuspenseTrigger show={!isActive} />\n {children}\n </Suspense>\n );\n};\n\nexport const Activity: FC<ActivityProps> = (props) => {\n const {\n isActive: isActiveFromProps = true,\n inactiveDelay,\n forceCustomActivity = false,\n children,\n } = props;\n\n const [isActiveState, setIsActiveState] = useState(isActiveFromProps);\n const isSsr = useIsSSR();\n const isParentActive = useIsActivityActive();\n\n useEffect(() => {\n if (!inactiveDelay) {\n return;\n }\n\n if (isActiveFromProps) {\n setIsActiveState(true);\n } else {\n const timeout = setTimeout(() => {\n setIsActiveState(false);\n }, inactiveDelay);\n\n return () => {\n clearTimeout(timeout);\n };\n }\n }, [isActiveFromProps, inactiveDelay]);\n\n const isActive = inactiveDelay ? isActiveState : isActiveFromProps;\n\n /*\n * A hidden subtree keeps rendering, but React commits none of those renders —\n * that holds for React's own `Activity` as much as for the suspended one. Its\n * inline DOM is hidden along with it, yet anything it portalled elsewhere\n * stays on screen, frozen at the last commit: the open Select popover of the\n * tab you just left. So hide one commit after deactivating, which is the\n * commit the subtree needs to unmount its overlays. Setting the state from a\n * layout effect keeps that intermediate commit off the screen.\n */\n const [isHiddenState, setIsHiddenState] = useState(!isActive);\n\n useLayoutEffect(() => {\n setIsHiddenState(!isActive);\n }, [isActive]);\n\n const isHidden = isHiddenState && !isActive;\n\n if (isSsr) {\n return isActive ? children : null;\n }\n\n const content = (\n <ActivityContextProvider value={isParentActive && isActive}>\n {children}\n </ActivityContextProvider>\n );\n\n if (isActivitySupported && !forceCustomActivity) {\n return (\n <React.Activity mode={isHidden ? \"hidden\" : \"visible\"}>\n {content}\n </React.Activity>\n );\n }\n\n return <CustomActivity isActive={!isHidden}>{content}</CustomActivity>;\n};\n\nexport default Activity;\n"],"mappings":";;;;;;;;AAiBA,IAAM,sBAAsB,MAAM,QAAQ,WAAW,MAAM;AAE3D,IAAM,kBAAqC,UAAU;CACnD,MAAM,EAAE,UAAoB,WAAW,SAAS;CAEhD,OACE,qBAAC,UAAD;EAAU,UAAU;EAApB,UAAA,CACE,oBAAC,iBAAD,EAAiB,MAAM,CAAC,SAAW,CAAA,GAClC,QACO;;AAEd;AAEA,IAAa,YAA+B,UAAU;CACpD,MAAM,EACJ,UAAU,oBAAoB,MAC9B,eACA,sBAAsB,OACtB,aACE;CAEJ,MAAM,CAAC,eAAe,oBAAoB,SAAS,iBAAiB;CACpE,MAAM,QAAQ,SAAS;CACvB,MAAM,iBAAiB,oBAAoB;CAE3C,gBAAgB;EACd,IAAI,CAAC,eACH;EAGF,IAAI,mBACF,iBAAiB,IAAI;OAChB;GACL,MAAM,UAAU,iBAAiB;IAC/B,iBAAiB,KAAK;GACxB,GAAG,aAAa;GAEhB,aAAa;IACX,aAAa,OAAO;GACtB;EACF;CACF,GAAG,CAAC,mBAAmB,aAAa,CAAC;CAErC,MAAM,WAAW,gBAAgB,gBAAgB;CAWjD,MAAM,CAAC,eAAe,oBAAoB,SAAS,CAAC,QAAQ;CAE5D,sBAAsB;EACpB,iBAAiB,CAAC,QAAQ;CAC5B,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,WAAW,iBAAiB,CAAC;CAEnC,IAAI,OACF,OAAO,WAAW,WAAW;CAG/B,MAAM,UACJ,oBAAC,yBAAD;EAAyB,OAAO,kBAAkB;EAC/C;CACsB,CAAA;CAG3B,IAAI,uBAAuB,CAAC,qBAC1B,OACE,oBAAC,MAAM,UAAP;EAAgB,MAAM,WAAW,WAAW;EACzC,UAAA;CACa,CAAA;CAIpB,OAAO,oBAAC,gBAAD;EAAgB,UAAU,CAAC;EAAW,UAAA;CAAwB,CAAA;AACvE"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import { createContext, useContext } from "react";
|
|
4
|
+
//#region src/components/Activity/context.ts
|
|
5
|
+
var activityContext = createContext(true);
|
|
6
|
+
/**
|
|
7
|
+
* Whether the surrounding `Activity` is active.
|
|
8
|
+
*
|
|
9
|
+
* A deactivated `Activity` hides its subtree by suspending it (or by React's
|
|
10
|
+
* own `Activity`). Either way React stops committing that subtree's renders, so
|
|
11
|
+
* everything it portalled out of its own DOM — an open popover, a modal — stays
|
|
12
|
+
* on screen, frozen. Content that renders outside the subtree must therefore
|
|
13
|
+
* unmount itself while this is `false`.
|
|
14
|
+
*/
|
|
15
|
+
var useIsActivityActive = () => useContext(activityContext);
|
|
16
|
+
var ActivityContextProvider = activityContext.Provider;
|
|
17
|
+
//#endregion
|
|
18
|
+
export { ActivityContextProvider, useIsActivityActive };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=context.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/Activity/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nconst activityContext = createContext(true);\n\n/**\n * Whether the surrounding `Activity` is active.\n *\n * A deactivated `Activity` hides its subtree by suspending it (or by React's\n * own `Activity`). Either way React stops committing that subtree's renders, so\n * everything it portalled out of its own DOM — an open popover, a modal — stays\n * on screen, frozen. Content that renders outside the subtree must therefore\n * unmount itself while this is `false`.\n */\nexport const useIsActivityActive = (): boolean => useContext(activityContext);\n\nexport const ActivityContextProvider = activityContext.Provider;\n"],"mappings":";;;;AAEA,IAAM,kBAAkB,cAAc,IAAI;;;;;;;;;;AAW1C,IAAa,4BAAqC,WAAW,eAAe;AAE5E,IAAa,0BAA0B,gBAAgB"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
+
import { useIsActivityActive } from "../../Activity/context.mjs";
|
|
3
4
|
import DivView from "../../../views/DivView.mjs";
|
|
4
5
|
import Overlay_module_default from "../Overlay.module.mjs";
|
|
5
6
|
import { OverlaySuspenseFallback } from "./OverlaySuspenseFallback.mjs";
|
|
@@ -43,6 +44,7 @@ var getOverlayContainer = () => {
|
|
|
43
44
|
/** @flr-generate all */
|
|
44
45
|
var OverlayContent = (props) => {
|
|
45
46
|
const { children, className, "aria-labelledby": ariaLabelledBy, ...restProps } = props;
|
|
47
|
+
const isActivityActive = useIsActivityActive();
|
|
46
48
|
useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);
|
|
47
49
|
const Fallback = () => {
|
|
48
50
|
return /* @__PURE__ */ jsx(DivView, {
|
|
@@ -50,6 +52,7 @@ var OverlayContent = (props) => {
|
|
|
50
52
|
children: /* @__PURE__ */ jsx(OverlaySuspenseFallback, { ...restProps })
|
|
51
53
|
});
|
|
52
54
|
};
|
|
55
|
+
if (!isActivityActive) return null;
|
|
53
56
|
return /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
|
|
54
57
|
getContainer: getOverlayContainer,
|
|
55
58
|
children: /* @__PURE__ */ jsx(Aria.ModalOverlay, {
|
package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayContent.mjs","names":[],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport { useKeepBrowserExtensionsInteractive } from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n if (typeof document === \"undefined\") {\n return null;\n }\n\n const existingContainer = document.querySelector<HTMLElement>(\n `body > [${overlayContainerAttribute}]`,\n );\n\n if (existingContainer) {\n if (existingContainer !== document.body.lastElementChild) {\n document.body.append(existingContainer);\n }\n return existingContainer;\n }\n\n const container = document.createElement(\"div\");\n container.setAttribute(overlayContainerAttribute, \"\");\n document.body.append(container);\n\n return container;\n};\n\nexport interface OverlayContentProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n onOpenChange: (isOpen: boolean) => void;\n isDismissable?: boolean;\n isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n const {\n children,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n ...restProps\n } = props;\n\n useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n const Fallback = () => {\n return (\n <DivView className={styles.suspense}>\n <OverlaySuspenseFallback {...restProps} />\n </DivView>\n );\n };\n\n return (\n <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n <Aria.ModalOverlay {...restProps} className={className}>\n <DivView>\n <Aria.Modal>\n <Suspense fallback={<Fallback />}>\n <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n {children}\n </Aria.Dialog>\n </Suspense>\n </Aria.Modal>\n </DivView>\n </Aria.ModalOverlay>\n </UNSAFE_PortalProvider>\n );\n};\n\nexport default OverlayContent;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"OverlayContent.mjs","names":[],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport { useKeepBrowserExtensionsInteractive } from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n if (typeof document === \"undefined\") {\n return null;\n }\n\n const existingContainer = document.querySelector<HTMLElement>(\n `body > [${overlayContainerAttribute}]`,\n );\n\n if (existingContainer) {\n if (existingContainer !== document.body.lastElementChild) {\n document.body.append(existingContainer);\n }\n return existingContainer;\n }\n\n const container = document.createElement(\"div\");\n container.setAttribute(overlayContainerAttribute, \"\");\n document.body.append(container);\n\n return container;\n};\n\nexport interface OverlayContentProps\n extends\n PropsWithChildren,\n PropsWithClassName,\n Pick<Aria.DialogProps, \"aria-labelledby\"> {\n ref?: Ref<HTMLDivElement>;\n onOpenChange: (isOpen: boolean) => void;\n isDismissable?: boolean;\n isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n const {\n children,\n className,\n \"aria-labelledby\": ariaLabelledBy,\n ...restProps\n } = props;\n\n const isActivityActive = useIsActivityActive();\n\n useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n const Fallback = () => {\n return (\n <DivView className={styles.suspense}>\n <OverlaySuspenseFallback {...restProps} />\n </DivView>\n );\n };\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n <Aria.ModalOverlay {...restProps} className={className}>\n <DivView>\n <Aria.Modal>\n <Suspense fallback={<Fallback />}>\n <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n {children}\n </Aria.Dialog>\n </Suspense>\n </Aria.Modal>\n </DivView>\n </Aria.ModalOverlay>\n </UNSAFE_PortalProvider>\n );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;AAUA,IAAM,4BAA4B;;;;;;;;;;;;;;;;;;;AAoBlC,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,sBAAsB,SAAS,KAAK,kBACtC,SAAS,KAAK,OAAO,iBAAiB;EAExC,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAW,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAC3C,UAAA,oBAAC,SAAD,EAAA,UACE,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;IAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;IAC7B,UAAA,oBAAC,KAAK,QAAN;KAAa,mBAAiB;KAC3B;IACU,CAAA;GACL,CAAA,EACA,CAAA,EACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
+
import { useIsActivityActive } from "../../../Activity/context.mjs";
|
|
3
4
|
import Popover_module_default from "../../Popover.module.mjs";
|
|
4
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
6
|
import * as Aria from "react-aria-components";
|
|
@@ -7,7 +8,9 @@ import * as Aria from "react-aria-components";
|
|
|
7
8
|
/** @flr-generate all */
|
|
8
9
|
var PopoverContent = (props) => {
|
|
9
10
|
const { children, className, isDialogContent = false, withTip, onOpenChange, ref, isOpen, width, ...rest } = props;
|
|
11
|
+
const isActivityActive = useIsActivityActive();
|
|
10
12
|
const ContentComponent = isDialogContent ? Aria.Dialog : "div";
|
|
13
|
+
if (!isActivityActive) return null;
|
|
11
14
|
return /* @__PURE__ */ jsxs(Aria.Popover, {
|
|
12
15
|
...rest,
|
|
13
16
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\nexport interface PopoverContentProps\n extends PropsWithChildren, PropsWithClassName {\n withTip?: boolean;\n isDialogContent?: boolean;\n isOpen?: boolean;\n width?: string | number;\n onOpenChange: (isOpen: boolean) => void;\n ref?: Ref<HTMLElement>;\n triggerRef?: RefObject<Element | null>;\n}\n\n/** @flr-generate all */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n const {\n children,\n className,\n isDialogContent = false,\n withTip,\n onOpenChange,\n ref,\n isOpen,\n width,\n ...rest\n } = props;\n\n const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n return (\n <Aria.Popover\n {...rest}\n className={className}\n containerPadding={16}\n ref={ref}\n isOpen={isOpen}\n onOpenChange={onOpenChange}\n style={{ width }}\n >\n {withTip && (\n <Aria.OverlayArrow className={styles.tip}>\n <svg width={16} height={16} viewBox=\"0 0 16 16\">\n <path d=\"M0 0 L8 8 L16 0\" />\n </svg>\n </Aria.OverlayArrow>\n )}\n <ContentComponent className={styles.content}>{children}</ContentComponent>\n </Aria.Popover>\n );\n};\n\nexport default PopoverContent;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nexport interface PopoverContentProps\n extends PropsWithChildren, PropsWithClassName {\n withTip?: boolean;\n isDialogContent?: boolean;\n isOpen?: boolean;\n width?: string | number;\n onOpenChange: (isOpen: boolean) => void;\n ref?: Ref<HTMLElement>;\n triggerRef?: RefObject<Element | null>;\n}\n\n/** @flr-generate all */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n const {\n children,\n className,\n isDialogContent = false,\n withTip,\n onOpenChange,\n ref,\n isOpen,\n width,\n ...rest\n } = props;\n\n const isActivityActive = useIsActivityActive();\n\n const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <Aria.Popover\n {...rest}\n className={className}\n containerPadding={16}\n ref={ref}\n isOpen={isOpen}\n onOpenChange={onOpenChange}\n style={{ width }}\n >\n {withTip && (\n <Aria.OverlayArrow className={styles.tip}>\n <svg width={16} height={16} viewBox=\"0 0 16 16\">\n <path d=\"M0 0 L8 8 L16 0\" />\n </svg>\n </Aria.OverlayArrow>\n )}\n <ContentComponent className={styles.content}>{children}</ContentComponent>\n </Aria.Popover>\n );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;AAkBA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,SACA,cACA,KACA,QACA,OACA,GAAG,SACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,mBAAmB,kBAAkB,KAAK,SAAS;CAEzD,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,qBAAC,KAAK,SAAN;EACE,GAAI;EACO;EACX,kBAAkB;EACb;EACG;EACM;EACd,OAAO,EAAE,MAAM;EAPjB,UAAA,CASG,WACC,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IAAK,OAAO;IAAI,QAAQ;IAAI,SAAQ;IAClC,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GACxB,CAAA;EACY,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAW,uBAAO;GAAU;EAA2B,CAAA,CAC7D;;AAElB"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { ClearPropsContext } from "../../lib/propsContext/components/ClearPropsContext.mjs";
|
|
4
|
+
import { useIsActivityActive } from "../Activity/context.mjs";
|
|
4
5
|
import Tooltip_module_default from "./Tooltip.module.mjs";
|
|
5
6
|
import clsx from "clsx";
|
|
6
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -9,7 +10,9 @@ import * as Aria from "react-aria-components";
|
|
|
9
10
|
/** @flr-generate all */
|
|
10
11
|
var Tooltip = (props) => {
|
|
11
12
|
const { children, className, ...rest } = props;
|
|
13
|
+
const isActivityActive = useIsActivityActive();
|
|
12
14
|
const rootClassName = clsx(Tooltip_module_default.tooltip, className);
|
|
15
|
+
if (!isActivityActive) return null;
|
|
13
16
|
return /* @__PURE__ */ jsx(ClearPropsContext, { children: /* @__PURE__ */ jsxs(Aria.Tooltip, {
|
|
14
17
|
...rest,
|
|
15
18
|
className: rootClassName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Tooltip.module.scss\";\nimport clsx from \"clsx\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext\";\n\nexport type TooltipProps = PropsWithChildren<\n Omit<Aria.TooltipProps, \"children\">\n>;\n\n/** @flr-generate all */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const rootClassName = clsx(styles.tooltip, className);\n\n return (\n <ClearPropsContext>\n <Aria.Tooltip {...rest} className={rootClassName}>\n <Aria.OverlayArrow className={styles.tip}>\n <svg viewBox=\"0 0 8 8\">\n <path d=\"M0 0 L4 4 L8 0\" />\n </svg>\n </Aria.OverlayArrow>\n {children}\n </Aria.Tooltip>\n </ClearPropsContext>\n );\n};\n\nexport default Tooltip;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tooltip.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC, PropsWithChildren } from \"react\";\nimport styles from \"./Tooltip.module.scss\";\nimport clsx from \"clsx\";\nimport { ClearPropsContext } from \"@/components/ClearPropsContext\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nexport type TooltipProps = PropsWithChildren<\n Omit<Aria.TooltipProps, \"children\">\n>;\n\n/** @flr-generate all */\nexport const Tooltip: FC<TooltipProps> = (props) => {\n const { children, className, ...rest } = props;\n\n const isActivityActive = useIsActivityActive();\n\n const rootClassName = clsx(styles.tooltip, className);\n\n if (!isActivityActive) {\n return null;\n }\n\n return (\n <ClearPropsContext>\n <Aria.Tooltip {...rest} className={rootClassName}>\n <Aria.OverlayArrow className={styles.tip}>\n <svg viewBox=\"0 0 8 8\">\n <path d=\"M0 0 L4 4 L8 0\" />\n </svg>\n </Aria.OverlayArrow>\n {children}\n </Aria.Tooltip>\n </ClearPropsContext>\n );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;AAYA,IAAa,WAA6B,UAAU;CAClD,MAAM,EAAE,UAAU,WAAW,GAAG,SAAS;CAEzC,MAAM,mBAAmB,oBAAoB;CAE7C,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,mBAAD,EAAA,UACE,qBAAC,KAAK,SAAN;EAAc,GAAI;EAAM,WAAW;EAAnC,UAAA,CACE,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IAAK,SAAQ;IACX,UAAA,oBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;GACvB,CAAA;EACY,CAAA,GAClB,QACW;CACG,CAAA,EAAA,CAAA;AAEvB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Activity.d.ts","sourceRoot":"","sources":["../../../../src/components/Activity/Activity.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Activity.d.ts","sourceRoot":"","sources":["../../../../src/components/Activity/Activity.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQxD,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAGxB;AAeD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAoEtC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Whether the surrounding `Activity` is active.
|
|
3
|
+
*
|
|
4
|
+
* A deactivated `Activity` hides its subtree by suspending it (or by React's
|
|
5
|
+
* own `Activity`). Either way React stops committing that subtree's renders, so
|
|
6
|
+
* everything it portalled out of its own DOM — an open popover, a modal — stays
|
|
7
|
+
* on screen, frozen. Content that renders outside the subtree must therefore
|
|
8
|
+
* unmount itself while this is `false`.
|
|
9
|
+
*/
|
|
10
|
+
export declare const useIsActivityActive: () => boolean;
|
|
11
|
+
export declare const ActivityContextProvider: import('react').Provider<boolean>;
|
|
12
|
+
//# sourceMappingURL=context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/components/Activity/context.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,QAAO,OAAsC,CAAC;AAE9E,eAAO,MAAM,uBAAuB,mCAA2B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Overlay/components/OverlayContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,GAAG,EAAY,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"OverlayContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/Overlay/components/OverlayContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,GAAG,EAAY,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAkD5D,MAAM,WAAW,mBACf,SACE,iBAAiB,EACjB,kBAAkB,EAClB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,iBAAiB,CAAC;IAC3C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAwB;AACxB,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAuClD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopoverContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"PopoverContent.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,MAAM,WAAW,mBACf,SAAQ,iBAAiB,EAAE,kBAAkB;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CACxC;AAED,wBAAwB;AACxB,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAyClD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,uBAAuB,CAAC;AAC9C,OAAO,KAAK,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMnD,MAAM,MAAM,YAAY,GAAG,iBAAiB,CAC1C,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CACpC,CAAC;AAEF,wBAAwB;AACxB,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAuBpC,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.2.0-next.
|
|
3
|
+
"version": "1.2.0-next.38",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -78,9 +78,9 @@
|
|
|
78
78
|
"@internationalized/string-compiler": "^3.4.1",
|
|
79
79
|
"@lezer/common": "^1.5.2",
|
|
80
80
|
"@lezer/highlight": "^1.2.3",
|
|
81
|
-
"@mittwald/flow-icons": "1.2.0-next.
|
|
81
|
+
"@mittwald/flow-icons": "1.2.0-next.38",
|
|
82
82
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
83
|
-
"@mittwald/react-tunnel": "1.2.0-next.
|
|
83
|
+
"@mittwald/react-tunnel": "1.2.0-next.38",
|
|
84
84
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
85
85
|
"@react-aria/form": "^3.2.1",
|
|
86
86
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -134,12 +134,12 @@
|
|
|
134
134
|
"@internationalized/date": "^3.12.3",
|
|
135
135
|
"@lezer/generator": "^1.8.0",
|
|
136
136
|
"@lezer/lr": "^1.4.10",
|
|
137
|
-
"@mittwald/flow-core": "1.2.0-next.
|
|
138
|
-
"@mittwald/flow-design-tokens": "1.2.0-next.
|
|
139
|
-
"@mittwald/flow-icons-base": "1.2.0-next.
|
|
137
|
+
"@mittwald/flow-core": "1.2.0-next.38",
|
|
138
|
+
"@mittwald/flow-design-tokens": "1.2.0-next.38",
|
|
139
|
+
"@mittwald/flow-icons-base": "1.2.0-next.38",
|
|
140
140
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
141
141
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
142
|
-
"@mittwald/typescript-config": "1.2.0-next.
|
|
142
|
+
"@mittwald/typescript-config": "1.2.0-next.38",
|
|
143
143
|
"@nx/storybook": "^22.7.6",
|
|
144
144
|
"@storybook/addon-a11y": "^10.5.10",
|
|
145
145
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -191,7 +191,7 @@
|
|
|
191
191
|
},
|
|
192
192
|
"peerDependencies": {
|
|
193
193
|
"@internationalized/date": "^3.12.2",
|
|
194
|
-
"@mittwald/flow-icons-pro": "1.2.0-next.
|
|
194
|
+
"@mittwald/flow-icons-pro": "1.2.0-next.38",
|
|
195
195
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
196
196
|
"next": "^16.2.3",
|
|
197
197
|
"react": "^19.2.0",
|
|
@@ -215,5 +215,5 @@
|
|
|
215
215
|
"browserslist": [
|
|
216
216
|
"baseline widely available"
|
|
217
217
|
],
|
|
218
|
-
"gitHead": "
|
|
218
|
+
"gitHead": "b5e5c034d9e7bc893d28308aa9089c7837c02eb9"
|
|
219
219
|
}
|