@frontify/fondue 12.0.0-beta.328 → 12.0.0-beta.329
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/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/utilities/dialogs/Content.es.js +3 -4
- package/dist/utilities/dialogs/Content.es.js.map +1 -1
- package/dist/utilities/dialogs/Overlay.es.js +22 -22
- package/dist/utilities/dialogs/Overlay.es.js.map +1 -1
- package/dist/utilities/dialogs/Trigger.es.js +3 -3
- package/dist/utilities/dialogs/Trigger.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
e.displayName = "FondueDialogContent";
|
|
1
|
+
const o = ({ children: n }) => n;
|
|
2
|
+
o.displayName = "FondueDialogContent";
|
|
4
3
|
export {
|
|
5
|
-
|
|
4
|
+
o as Content
|
|
6
5
|
};
|
|
7
6
|
//# sourceMappingURL=Content.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.es.js","sources":["../../../src/utilities/dialogs/Content.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {
|
|
1
|
+
{"version":3,"file":"Content.es.js","sources":["../../../src/utilities/dialogs/Content.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactNode } from 'react';\n\nexport const Content = ({ children }: { children?: ReactNode }) => children;\n\nContent.displayName = 'FondueDialogContent';\n"],"names":["Content","children"],"mappings":"AAIO,MAAMA,IAAU,CAAC,EAAE,UAAAC,EAAA,MAAyCA;AAEnED,EAAQ,cAAc;"}
|
|
@@ -18,27 +18,27 @@ const ft = ({
|
|
|
18
18
|
offset: d = [0, 8],
|
|
19
19
|
flip: p = !0,
|
|
20
20
|
enablePortal: g,
|
|
21
|
-
children:
|
|
22
|
-
role:
|
|
21
|
+
children: y,
|
|
22
|
+
role: w = "region",
|
|
23
23
|
"data-test-id": n = "fondue-overlay",
|
|
24
|
-
maxWidth:
|
|
25
|
-
maxHeight:
|
|
26
|
-
minWidth:
|
|
27
|
-
minHeight:
|
|
28
|
-
handleClose:
|
|
24
|
+
maxWidth: N = "auto",
|
|
25
|
+
maxHeight: x = "auto",
|
|
26
|
+
minWidth: h = 0,
|
|
27
|
+
minHeight: E = 0,
|
|
28
|
+
handleClose: a,
|
|
29
29
|
modality: r = i.NonModal,
|
|
30
|
-
darkUnderlay:
|
|
30
|
+
darkUnderlay: b,
|
|
31
31
|
autoHeight: v,
|
|
32
32
|
zIndex: C,
|
|
33
33
|
isDetached: M,
|
|
34
34
|
verticalAlignment: R
|
|
35
35
|
}) => {
|
|
36
|
-
const
|
|
36
|
+
const m = z(), s = L(null), [A, O] = P(null), { maxHeight: H } = Y(
|
|
37
37
|
{ current: A },
|
|
38
38
|
{ isOpen: t, autoResize: !0 }
|
|
39
|
-
), _ = v ? H :
|
|
40
|
-
t && r !== i.BlockingModal &&
|
|
41
|
-
}, [
|
|
39
|
+
), _ = v ? H : x, k = $(() => {
|
|
40
|
+
t && r !== i.BlockingModal && a && a();
|
|
41
|
+
}, [a, r, t]);
|
|
42
42
|
return T(s.current, t, r === i.NonModal), X(s.current, k), j(() => {
|
|
43
43
|
t && r !== i.NonModal && (document.body.style.pointerEvents = "none"), t || (document.body.style.pointerEvents = "auto");
|
|
44
44
|
}, [t, r]), /* @__PURE__ */ D(S, { children: [
|
|
@@ -54,12 +54,12 @@ const ft = ({
|
|
|
54
54
|
zIndex: C,
|
|
55
55
|
isDetached: M,
|
|
56
56
|
verticalAlignment: R,
|
|
57
|
-
children: B.map(
|
|
57
|
+
children: B.map(y, (o) => {
|
|
58
58
|
if (F(o) && typeof o.type == "function") {
|
|
59
|
-
const {
|
|
60
|
-
if (l === I.
|
|
61
|
-
return /* @__PURE__ */ e(f.Reference, { children: /* @__PURE__ */ e("div", { id:
|
|
62
|
-
if (l === V.
|
|
59
|
+
const { displayName: l } = o.type;
|
|
60
|
+
if (l === I.displayName)
|
|
61
|
+
return /* @__PURE__ */ e(f.Reference, { children: /* @__PURE__ */ e("div", { id: m, ref: O, "data-test-id": `${n}-trigger`, children: o }) });
|
|
62
|
+
if (l === V.displayName)
|
|
63
63
|
return /* @__PURE__ */ e(f.Content, { children: /* @__PURE__ */ e(
|
|
64
64
|
"div",
|
|
65
65
|
{
|
|
@@ -69,11 +69,11 @@ const ft = ({
|
|
|
69
69
|
"tw-flex tw-flex-col tw-pointer-events-auto",
|
|
70
70
|
K
|
|
71
71
|
]),
|
|
72
|
-
role:
|
|
73
|
-
id:
|
|
72
|
+
role: w,
|
|
73
|
+
id: m,
|
|
74
74
|
"aria-hidden": !t,
|
|
75
|
-
"aria-labelledby":
|
|
76
|
-
style: { minWidth:
|
|
75
|
+
"aria-labelledby": m,
|
|
76
|
+
style: { minWidth: h, minHeight: E, maxWidth: N, maxHeight: _ },
|
|
77
77
|
children: o
|
|
78
78
|
}
|
|
79
79
|
) });
|
|
@@ -87,7 +87,7 @@ const ft = ({
|
|
|
87
87
|
"data-test-id": `${n}-underlay`,
|
|
88
88
|
className: u([
|
|
89
89
|
"tw-fixed tw-top-0 tw-left-0 tw-bottom-0 tw-right-0",
|
|
90
|
-
|
|
90
|
+
b && "tw-transition-opacity tw-bg-black tw-opacity-50"
|
|
91
91
|
]),
|
|
92
92
|
style: { zIndex: Z }
|
|
93
93
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.es.js","sources":["../../../src/utilities/dialogs/Overlay.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { Popper } from '@components/Popper';\nimport { Children, isValidElement, useCallback, useEffect, useRef, useState } from 'react';\nimport { Trigger } from '@utilities/dialogs/Trigger';\nimport { Content } from '@utilities/dialogs/Content';\nimport { OVERLAY_CONTAINER_CLASSES } from '@utilities/overlayStyle';\nimport { BaseDialogProps, Modality, OverlayProps } from '../../types/dialog';\nimport { merge } from '@utilities/merge';\nimport { useFocusTrap } from '@hooks/useFocusTrap';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { Portal } from '@components/Portal';\nimport { useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { Z_INDEX_MODAL_BACKDROP } from '@utilities/dialogs/constants';\n\nexport const Overlay = ({\n open,\n placement = 'bottom-start',\n offset = [0, 8],\n flip = true,\n enablePortal,\n children,\n role = 'region',\n 'data-test-id': dataTestId = 'fondue-overlay',\n maxWidth = 'auto',\n maxHeight = 'auto',\n minWidth = 0,\n minHeight = 0,\n handleClose,\n modality = Modality.NonModal,\n darkUnderlay,\n autoHeight,\n zIndex,\n isDetached,\n verticalAlignment,\n}: OverlayProps & BaseDialogProps) => {\n const id = useMemoizedId();\n const ref = useRef<HTMLDivElement | null>(null);\n const [triggerElementRef, setTriggerElementRef] = useState<HTMLDivElement | null>(null);\n const { maxHeight: maxAutoHeight } = useDropdownAutoHeight(\n { current: triggerElementRef },\n { isOpen: open, autoResize: true },\n );\n\n const maxContentHeight = autoHeight ? maxAutoHeight : maxHeight;\n const handleClosingInteraction = useCallback(() => {\n if (open && modality !== Modality.BlockingModal) {\n if (handleClose) {\n handleClose();\n }\n }\n }, [handleClose, modality, open]);\n\n useFocusTrap(ref.current, open, modality === Modality.NonModal);\n useClickOutside(ref.current, handleClosingInteraction);\n\n useEffect(() => {\n if (open && modality !== Modality.NonModal) {\n document.body.style.pointerEvents = 'none';\n }\n if (!open) {\n document.body.style.pointerEvents = 'auto';\n }\n }, [open, modality]);\n\n return (\n <>\n <Popper\n data-test-id={dataTestId}\n open={open}\n placement={placement}\n offset={offset}\n flip={flip}\n enablePortal={enablePortal}\n zIndex={zIndex}\n isDetached={isDetached}\n verticalAlignment={verticalAlignment}\n >\n {Children.map(children, (child) => {\n if (isValidElement(child) && typeof child.type === 'function') {\n const {
|
|
1
|
+
{"version":3,"file":"Overlay.es.js","sources":["../../../src/utilities/dialogs/Overlay.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { Popper } from '@components/Popper';\nimport { Children, isValidElement, useCallback, useEffect, useRef, useState } from 'react';\nimport { Trigger } from '@utilities/dialogs/Trigger';\nimport { Content } from '@utilities/dialogs/Content';\nimport { OVERLAY_CONTAINER_CLASSES } from '@utilities/overlayStyle';\nimport { BaseDialogProps, Modality, OverlayProps } from '../../types/dialog';\nimport { merge } from '@utilities/merge';\nimport { useFocusTrap } from '@hooks/useFocusTrap';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { Portal } from '@components/Portal';\nimport { useDropdownAutoHeight } from '@hooks/useDropdownAutoHeight';\nimport { Z_INDEX_MODAL_BACKDROP } from '@utilities/dialogs/constants';\n\nexport const Overlay = ({\n open,\n placement = 'bottom-start',\n offset = [0, 8],\n flip = true,\n enablePortal,\n children,\n role = 'region',\n 'data-test-id': dataTestId = 'fondue-overlay',\n maxWidth = 'auto',\n maxHeight = 'auto',\n minWidth = 0,\n minHeight = 0,\n handleClose,\n modality = Modality.NonModal,\n darkUnderlay,\n autoHeight,\n zIndex,\n isDetached,\n verticalAlignment,\n}: OverlayProps & BaseDialogProps) => {\n const id = useMemoizedId();\n const ref = useRef<HTMLDivElement | null>(null);\n const [triggerElementRef, setTriggerElementRef] = useState<HTMLDivElement | null>(null);\n const { maxHeight: maxAutoHeight } = useDropdownAutoHeight(\n { current: triggerElementRef },\n { isOpen: open, autoResize: true },\n );\n\n const maxContentHeight = autoHeight ? maxAutoHeight : maxHeight;\n const handleClosingInteraction = useCallback(() => {\n if (open && modality !== Modality.BlockingModal) {\n if (handleClose) {\n handleClose();\n }\n }\n }, [handleClose, modality, open]);\n\n useFocusTrap(ref.current, open, modality === Modality.NonModal);\n useClickOutside(ref.current, handleClosingInteraction);\n\n useEffect(() => {\n if (open && modality !== Modality.NonModal) {\n document.body.style.pointerEvents = 'none';\n }\n if (!open) {\n document.body.style.pointerEvents = 'auto';\n }\n }, [open, modality]);\n\n return (\n <>\n <Popper\n data-test-id={dataTestId}\n open={open}\n placement={placement}\n offset={offset}\n flip={flip}\n enablePortal={enablePortal}\n zIndex={zIndex}\n isDetached={isDetached}\n verticalAlignment={verticalAlignment}\n >\n {Children.map(children, (child) => {\n if (isValidElement(child) && typeof child.type === 'function') {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore Property 'displayName' does not exist on type 'JSXElementConstructor<any>'.ts(2339)\n const { displayName } = child.type;\n\n if (displayName === Trigger.displayName) {\n return (\n <Popper.Reference>\n <div id={id} ref={setTriggerElementRef} data-test-id={`${dataTestId}-trigger`}>\n {child}\n </div>\n </Popper.Reference>\n );\n }\n\n if (displayName === Content.displayName) {\n return (\n <Popper.Content>\n <div\n ref={ref}\n data-test-id={`${dataTestId}-content`}\n className={merge([\n 'tw-flex tw-flex-col tw-pointer-events-auto',\n OVERLAY_CONTAINER_CLASSES,\n ])}\n role={role}\n id={id}\n aria-hidden={!open}\n aria-labelledby={id}\n style={{ minWidth, minHeight, maxWidth, maxHeight: maxContentHeight }}\n >\n {child}\n </div>\n </Popper.Content>\n );\n }\n }\n })}\n </Popper>\n\n {modality !== Modality.NonModal && open && (\n <Portal>\n <div\n data-test-id={`${dataTestId}-underlay`}\n className={merge([\n 'tw-fixed tw-top-0 tw-left-0 tw-bottom-0 tw-right-0',\n darkUnderlay && 'tw-transition-opacity tw-bg-black tw-opacity-50',\n ])}\n style={{ zIndex: Z_INDEX_MODAL_BACKDROP }}\n />\n </Portal>\n )}\n </>\n );\n};\n"],"names":["Overlay","open","placement","offset","flip","enablePortal","children","role","dataTestId","maxWidth","maxHeight","minWidth","minHeight","handleClose","modality","Modality","darkUnderlay","autoHeight","zIndex","isDetached","verticalAlignment","id","useMemoizedId","ref","useRef","triggerElementRef","setTriggerElementRef","useState","maxAutoHeight","useDropdownAutoHeight","maxContentHeight","handleClosingInteraction","useCallback","useFocusTrap","useClickOutside","useEffect","jsxs","Fragment","jsx","Popper","Children","child","isValidElement","displayName","Trigger","Content","merge","OVERLAY_CONTAINER_CLASSES","Portal","Z_INDEX_MODAL_BACKDROP"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Trigger.es.js","sources":["../../../src/utilities/dialogs/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactElement } from 'react';\n\nexport const Trigger = ({ children }: { children: ReactElement }) =>
|
|
1
|
+
{"version":3,"file":"Trigger.es.js","sources":["../../../src/utilities/dialogs/Trigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactElement } from 'react';\n\nexport const Trigger = ({ children }: { children: ReactElement }) => children;\n\nTrigger.displayName = 'FondueDialogTrigger';\n"],"names":["Trigger","children"],"mappings":"AAIO,MAAMA,IAAU,CAAC,EAAE,UAAAC,EAAA,MAA2CA;AAErED,EAAQ,cAAc;"}
|