@frontify/guideline-blocks-settings 0.37.6 → 0.38.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.
- package/dist/components/DownloadButton/DownloadButton.es.js +14 -20
- package/dist/components/DownloadButton/DownloadButton.es.js.map +1 -1
- package/dist/components/RichTextEditor/RichTextEditor.es.js +39 -40
- package/dist/components/RichTextEditor/RichTextEditor.es.js.map +1 -1
- package/dist/index.cjs.js +2 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.umd.js +2 -2
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,34 +1,28 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { FOCUS_STYLE as
|
|
3
|
-
import { useFocusRing as
|
|
1
|
+
import { jsxs as l, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { FOCUS_STYLE as a, IconArrowCircleDown16 as w } from "@frontify/fondue";
|
|
3
|
+
import { useFocusRing as d } from "@react-aria/focus";
|
|
4
4
|
import { Tooltip as o } from "../../node_modules/.pnpm/@frontify_fondue-components@16.0.4_@frontify_fondue-icons@0.15.2_react@18.3.1__@frontify_fond_op7623tx44xrzjacx6eyu4zgva/node_modules/@frontify/fondue-components/dist/fondue-components29.es.js";
|
|
5
|
-
import { joinClassNames as
|
|
6
|
-
const
|
|
7
|
-
const { isFocused:
|
|
8
|
-
return /* @__PURE__ */
|
|
5
|
+
import { joinClassNames as u } from "../../utilities/react/joinClassNames.es.js";
|
|
6
|
+
const x = ({ onDownload: e, ariaLabel: n }) => {
|
|
7
|
+
const { isFocused: r, focusProps: s } = d();
|
|
8
|
+
return /* @__PURE__ */ l(o.Root, { enterDelay: 500, children: [
|
|
9
9
|
/* @__PURE__ */ t(o.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
|
|
10
10
|
"button",
|
|
11
11
|
{
|
|
12
12
|
tabIndex: 0,
|
|
13
|
-
"aria-label": "Download",
|
|
14
|
-
...
|
|
15
|
-
className:
|
|
13
|
+
"aria-label": n ?? "Download",
|
|
14
|
+
...s,
|
|
15
|
+
className: u(["tw-outline-none tw-rounded", r && a]),
|
|
16
16
|
onClick: e,
|
|
17
|
-
onPointerDown: (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
{
|
|
21
|
-
"data-test-id": "download-button",
|
|
22
|
-
className: "tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line",
|
|
23
|
-
children: /* @__PURE__ */ t(a, {})
|
|
24
|
-
}
|
|
25
|
-
)
|
|
17
|
+
onPointerDown: (i) => i.preventDefault(),
|
|
18
|
+
"data-test-id": "download-button",
|
|
19
|
+
children: /* @__PURE__ */ t("span", { className: "tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line", children: /* @__PURE__ */ t(w, {}) })
|
|
26
20
|
}
|
|
27
21
|
) }),
|
|
28
22
|
/* @__PURE__ */ t(o.Content, { side: "top", children: "Download" })
|
|
29
23
|
] });
|
|
30
24
|
};
|
|
31
25
|
export {
|
|
32
|
-
|
|
26
|
+
x as DownloadButton
|
|
33
27
|
};
|
|
34
28
|
//# sourceMappingURL=DownloadButton.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DownloadButton.es.js","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_STYLE, IconArrowCircleDown16 } from '@frontify/fondue';\nimport { Tooltip } from '@frontify/fondue/components';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type DownloadButtonProps } from './types';\n\nexport const DownloadButton = ({ onDownload }: DownloadButtonProps) => {\n const { isFocused, focusProps } = useFocusRing();\n\n return (\n <Tooltip.Root enterDelay={500}>\n <Tooltip.Trigger asChild>\n <button\n tabIndex={0}\n aria-label
|
|
1
|
+
{"version":3,"file":"DownloadButton.es.js","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_STYLE, IconArrowCircleDown16 } from '@frontify/fondue';\nimport { Tooltip } from '@frontify/fondue/components';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type DownloadButtonProps } from './types';\n\nexport const DownloadButton = ({ onDownload, ariaLabel }: DownloadButtonProps) => {\n const { isFocused, focusProps } = useFocusRing();\n\n return (\n <Tooltip.Root enterDelay={500}>\n <Tooltip.Trigger asChild>\n <button\n tabIndex={0}\n aria-label={ariaLabel ?? 'Download'}\n {...focusProps}\n className={joinClassNames(['tw-outline-none tw-rounded', isFocused && FOCUS_STYLE])}\n onClick={onDownload}\n onPointerDown={(e) => e.preventDefault()}\n data-test-id=\"download-button\"\n >\n <span className=\"tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line\">\n <IconArrowCircleDown16 />\n </span>\n </button>\n </Tooltip.Trigger>\n <Tooltip.Content side=\"top\">Download</Tooltip.Content>\n </Tooltip.Root>\n );\n};\n"],"names":["DownloadButton","onDownload","ariaLabel","isFocused","focusProps","useFocusRing","jsxs","Tooltip","jsx","joinClassNames","FOCUS_STYLE","e","IconArrowCircleDown16"],"mappings":";;;;;AAUO,MAAMA,IAAiB,CAAC,EAAE,YAAAC,GAAY,WAAAC,QAAqC;AAC9E,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAW,IAAIC,EAAa;AAE/C,SACK,gBAAAC,EAAAC,EAAQ,MAAR,EAAa,YAAY,KACtB,UAAA;AAAA,IAAA,gBAAAC,EAACD,EAAQ,SAAR,EAAgB,SAAO,IACpB,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,UAAU;AAAA,QACV,cAAYN,KAAa;AAAA,QACxB,GAAGE;AAAA,QACJ,WAAWK,EAAe,CAAC,8BAA8BN,KAAaO,CAAW,CAAC;AAAA,QAClF,SAAST;AAAA,QACT,eAAe,CAACU,MAAMA,EAAE,eAAe;AAAA,QACvC,gBAAa;AAAA,QAEb,4BAAC,QAAK,EAAA,WAAU,0SACZ,UAAA,gBAAAH,EAACI,IAAsB,CAAA,GAC3B;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,sBACCL,EAAQ,SAAR,EAAgB,MAAK,OAAM,UAAQ,YAAA;AAAA,EACxC,EAAA,CAAA;AAER;"}
|
|
@@ -1,70 +1,69 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { RichTextEditor as V } from "@frontify/fondue";
|
|
3
|
-
import { memo as v, useState as h, useCallback as
|
|
3
|
+
import { memo as v, useState as h, useId as I, useCallback as s, useEffect as p, useRef as P } from "react";
|
|
4
4
|
import { useIsInViewport as C } from "../../hooks/useIsInViewport.es.js";
|
|
5
|
-
import { SerializedText as
|
|
6
|
-
import { getResponsiveColumnClasses as
|
|
7
|
-
import { floatingButtonSelectors as
|
|
5
|
+
import { SerializedText as L } from "./SerializedText.es.js";
|
|
6
|
+
import { getResponsiveColumnClasses as S } from "./plugins/ColumnBreakPlugin/helpers.es.js";
|
|
7
|
+
import { floatingButtonSelectors as y, floatingButtonActions as H } from "./plugins/ButtonPlugin/components/FloatingButton/floatingButtonStore.es.js";
|
|
8
8
|
const E = v(
|
|
9
9
|
({
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
plugins: s,
|
|
10
|
+
isEnabled: l,
|
|
11
|
+
value: e,
|
|
12
|
+
columns: d,
|
|
13
|
+
gap: i,
|
|
14
|
+
placeholder: o,
|
|
15
|
+
plugins: n,
|
|
17
16
|
onTextChange: r,
|
|
18
|
-
showSerializedText:
|
|
17
|
+
showSerializedText: c
|
|
19
18
|
}) => {
|
|
20
|
-
const
|
|
21
|
-
(
|
|
22
|
-
|
|
19
|
+
const w = S(d), [f, u] = h(!1), g = I(), b = s(
|
|
20
|
+
(t) => {
|
|
21
|
+
t !== e && (r == null || r(t)), u(!1);
|
|
23
22
|
},
|
|
24
|
-
[r,
|
|
25
|
-
), x =
|
|
26
|
-
|
|
23
|
+
[r, e]
|
|
24
|
+
), x = s(() => u(!0), []), R = s((t) => {
|
|
25
|
+
y.isOpen(t) && H.reset();
|
|
27
26
|
}, []);
|
|
28
27
|
return p(() => {
|
|
29
|
-
const
|
|
28
|
+
const t = (m) => {
|
|
30
29
|
m.preventDefault(), m.returnValue = "Unprocessed changes";
|
|
31
30
|
};
|
|
32
|
-
return f && window.addEventListener("beforeunload",
|
|
33
|
-
}, [f]),
|
|
31
|
+
return f && window.addEventListener("beforeunload", t), () => window.removeEventListener("beforeunload", t);
|
|
32
|
+
}, [f]), l ? /* @__PURE__ */ a(
|
|
34
33
|
V,
|
|
35
34
|
{
|
|
36
|
-
id:
|
|
37
|
-
value:
|
|
35
|
+
id: g,
|
|
36
|
+
value: e,
|
|
38
37
|
border: !1,
|
|
39
|
-
placeholder:
|
|
40
|
-
plugins:
|
|
38
|
+
placeholder: o,
|
|
39
|
+
plugins: n,
|
|
41
40
|
onValueChanged: x,
|
|
42
41
|
onTextChange: b,
|
|
43
42
|
hideExternalFloatingModals: R,
|
|
44
43
|
placeholderOpacity: "high"
|
|
45
44
|
}
|
|
46
|
-
) : /* @__PURE__ */
|
|
47
|
-
|
|
45
|
+
) : /* @__PURE__ */ a(
|
|
46
|
+
L,
|
|
48
47
|
{
|
|
49
|
-
value:
|
|
50
|
-
gap:
|
|
51
|
-
customClass:
|
|
52
|
-
show:
|
|
53
|
-
plugins:
|
|
48
|
+
value: e,
|
|
49
|
+
gap: i,
|
|
50
|
+
customClass: w,
|
|
51
|
+
show: c,
|
|
52
|
+
plugins: n
|
|
54
53
|
}
|
|
55
54
|
);
|
|
56
55
|
}
|
|
57
56
|
);
|
|
58
57
|
E.displayName = "InternalRichTextEditor";
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
|
|
58
|
+
const j = (l) => {
|
|
59
|
+
const e = P(null), [d, i] = h(!1), { isEditing: o, ...n } = l, r = s((c) => {
|
|
60
|
+
c && i(!0);
|
|
62
61
|
}, []);
|
|
63
|
-
return C({ ref:
|
|
64
|
-
o ||
|
|
65
|
-
}, [o]), /* @__PURE__ */
|
|
62
|
+
return C({ ref: e, disabled: !o, onChange: r }), p(() => {
|
|
63
|
+
o || i(!1);
|
|
64
|
+
}, [o]), /* @__PURE__ */ a("div", { "data-test-id": "rich-text-editor-container", className: "tw-block tw-w-full tw-@container", ref: e, children: /* @__PURE__ */ a(E, { ...n, isEnabled: o && d }) });
|
|
66
65
|
};
|
|
67
66
|
export {
|
|
68
|
-
|
|
67
|
+
j as RichTextEditor
|
|
69
68
|
};
|
|
70
69
|
//# sourceMappingURL=RichTextEditor.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { RichTextEditor as FondueRichTextEditor } from '@frontify/fondue';\nimport { memo, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useIsInViewport } from '../../hooks/useIsInViewport';\n\nimport { SerializedText } from './SerializedText';\nimport { floatingButtonActions, floatingButtonSelectors } from './plugins/ButtonPlugin/components';\nimport { getResponsiveColumnClasses } from './plugins/ColumnBreakPlugin/helpers';\nimport { type RichTextEditorProps } from './types';\n\nconst InternalRichTextEditor = memo(\n ({\n
|
|
1
|
+
{"version":3,"file":"RichTextEditor.es.js","sources":["../../../src/components/RichTextEditor/RichTextEditor.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { RichTextEditor as FondueRichTextEditor } from '@frontify/fondue';\nimport { memo, useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { useIsInViewport } from '../../hooks/useIsInViewport';\n\nimport { SerializedText } from './SerializedText';\nimport { floatingButtonActions, floatingButtonSelectors } from './plugins/ButtonPlugin/components';\nimport { getResponsiveColumnClasses } from './plugins/ColumnBreakPlugin/helpers';\nimport { type RichTextEditorProps } from './types';\n\nconst InternalRichTextEditor = memo(\n ({\n isEnabled,\n value,\n columns,\n gap,\n placeholder,\n plugins,\n onTextChange,\n showSerializedText,\n }: Omit<RichTextEditorProps, 'isEditing'> & { isEnabled: boolean }) => {\n const customClass = getResponsiveColumnClasses(columns);\n const [shouldPreventPageLeave, setShouldPreventPageLeave] = useState(false);\n const editorId = useId();\n\n const handleTextChange = useCallback(\n (newContent: string) => {\n if (newContent !== value) {\n onTextChange?.(newContent);\n }\n setShouldPreventPageLeave(false);\n },\n [onTextChange, value],\n );\n\n const handleValueChange = useCallback(() => setShouldPreventPageLeave(true), []);\n\n const handleHideExternalFloatingModals = useCallback((editorId: string) => {\n if (floatingButtonSelectors.isOpen(editorId)) {\n floatingButtonActions.reset();\n }\n }, []);\n\n useEffect(() => {\n const unloadHandler = (event: BeforeUnloadEvent) => {\n event.preventDefault();\n event.returnValue = 'Unprocessed changes';\n };\n\n if (shouldPreventPageLeave) {\n window.addEventListener('beforeunload', unloadHandler);\n }\n\n return () => window.removeEventListener('beforeunload', unloadHandler);\n }, [shouldPreventPageLeave]);\n\n if (isEnabled) {\n return (\n <FondueRichTextEditor\n id={editorId}\n value={value}\n border={false}\n placeholder={placeholder}\n plugins={plugins}\n onValueChanged={handleValueChange}\n onTextChange={handleTextChange}\n hideExternalFloatingModals={handleHideExternalFloatingModals}\n placeholderOpacity=\"high\"\n />\n );\n }\n return (\n <SerializedText\n value={value}\n gap={gap}\n customClass={customClass}\n show={showSerializedText}\n plugins={plugins}\n />\n );\n },\n);\nInternalRichTextEditor.displayName = 'InternalRichTextEditor';\n\nexport const RichTextEditor = (props: RichTextEditorProps) => {\n const ref = useRef<HTMLDivElement>(null);\n const [hasEnteredViewport, setHasEnteredViewport] = useState(false);\n\n const { isEditing, ...internalRteProps } = props;\n\n const onViewportVisibilityChange = useCallback((isInViewport: boolean) => {\n if (isInViewport) {\n setHasEnteredViewport(true);\n }\n }, []);\n\n useIsInViewport({ ref, disabled: !isEditing, onChange: onViewportVisibilityChange });\n\n useEffect(() => {\n if (!isEditing) {\n setHasEnteredViewport(false);\n }\n }, [isEditing]);\n\n return (\n <div data-test-id=\"rich-text-editor-container\" className=\"tw-block tw-w-full tw-@container\" ref={ref}>\n <InternalRichTextEditor {...internalRteProps} isEnabled={isEditing && hasEnteredViewport} />\n </div>\n );\n};\n"],"names":["InternalRichTextEditor","memo","isEnabled","value","columns","gap","placeholder","plugins","onTextChange","showSerializedText","customClass","getResponsiveColumnClasses","shouldPreventPageLeave","setShouldPreventPageLeave","useState","editorId","useId","handleTextChange","useCallback","newContent","handleValueChange","handleHideExternalFloatingModals","floatingButtonSelectors","floatingButtonActions","useEffect","unloadHandler","event","jsx","FondueRichTextEditor","SerializedText","RichTextEditor","props","ref","useRef","hasEnteredViewport","setHasEnteredViewport","isEditing","internalRteProps","onViewportVisibilityChange","isInViewport","useIsInViewport"],"mappings":";;;;;;;AAYA,MAAMA,IAAyBC;AAAA,EAC3B,CAAC;AAAA,IACG,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,KAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA,MACmE;AAC7D,UAAAC,IAAcC,EAA2BP,CAAO,GAChD,CAACQ,GAAwBC,CAAyB,IAAIC,EAAS,EAAK,GACpEC,IAAWC,KAEXC,IAAmBC;AAAA,MACrB,CAACC,MAAuB;AACpB,QAAIA,MAAehB,MACfK,KAAA,QAAAA,EAAeW,KAEnBN,EAA0B,EAAK;AAAA,MACnC;AAAA,MACA,CAACL,GAAcL,CAAK;AAAA,IAAA,GAGlBiB,IAAoBF,EAAY,MAAML,EAA0B,EAAI,GAAG,CAAA,CAAE,GAEzEQ,IAAmCH,EAAY,CAACH,MAAqB;AACnE,MAAAO,EAAwB,OAAOP,CAAQ,KACvCQ,EAAsB,MAAM;AAAA,IAEpC,GAAG,CAAE,CAAA;AAeL,WAbAC,EAAU,MAAM;AACN,YAAAC,IAAgB,CAACC,MAA6B;AAChD,QAAAA,EAAM,eAAe,GACrBA,EAAM,cAAc;AAAA,MAAA;AAGxB,aAAId,KACO,OAAA,iBAAiB,gBAAgBa,CAAa,GAGlD,MAAM,OAAO,oBAAoB,gBAAgBA,CAAa;AAAA,IAAA,GACtE,CAACb,CAAsB,CAAC,GAEvBV,IAEI,gBAAAyB;AAAA,MAACC;AAAAA,MAAA;AAAA,QACG,IAAIb;AAAA,QACJ,OAAAZ;AAAA,QACA,QAAQ;AAAA,QACR,aAAAG;AAAA,QACA,SAAAC;AAAA,QACA,gBAAgBa;AAAA,QAChB,cAAcH;AAAA,QACd,4BAA4BI;AAAA,QAC5B,oBAAmB;AAAA,MAAA;AAAA,IAAA,IAK3B,gBAAAM;AAAA,MAACE;AAAA,MAAA;AAAA,QACG,OAAA1B;AAAA,QACA,KAAAE;AAAA,QACA,aAAAK;AAAA,QACA,MAAMD;AAAA,QACN,SAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AACAP,EAAuB,cAAc;AAExB,MAAA8B,IAAiB,CAACC,MAA+B;AACpD,QAAAC,IAAMC,EAAuB,IAAI,GACjC,CAACC,GAAoBC,CAAqB,IAAIrB,EAAS,EAAK,GAE5D,EAAE,WAAAsB,GAAW,GAAGC,EAAA,IAAqBN,GAErCO,IAA6BpB,EAAY,CAACqB,MAA0B;AACtE,IAAIA,KACAJ,EAAsB,EAAI;AAAA,EAElC,GAAG,CAAE,CAAA;AAEL,SAAAK,EAAgB,EAAE,KAAAR,GAAK,UAAU,CAACI,GAAW,UAAUE,GAA4B,GAEnFd,EAAU,MAAM;AACZ,IAAKY,KACDD,EAAsB,EAAK;AAAA,EAC/B,GACD,CAACC,CAAS,CAAC,GAGT,gBAAAT,EAAA,OAAA,EAAI,gBAAa,8BAA6B,WAAU,oCAAmC,KAAAK,GACxF,UAAC,gBAAAL,EAAA3B,GAAA,EAAwB,GAAGqC,GAAkB,WAAWD,KAAaF,GAAoB,EAC9F,CAAA;AAER;"}
|