@frontify/fondue 12.0.0-beta.412 → 12.0.0-beta.414
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/fondue/components/Flex/Flex.es.js +1 -1
- package/dist/fondue/components/Flex/Flex.es.js.map +1 -1
- package/dist/fondue/components/Grid/Grid.es.js +2 -2
- package/dist/fondue/components/Grid/Grid.es.js.map +1 -1
- package/dist/fondue/components/RichTextEditor/BlurObserver.es.js +6 -6
- package/dist/fondue/components/RichTextEditor/BlurObserver.es.js.map +1 -1
- package/dist/fondue/components/Stack/Stack.es.js +1 -1
- package/dist/fondue/components/Stack/Stack.es.js.map +1 -1
- package/dist/fondue/index.cjs.js +4 -4
- package/dist/fondue/index.cjs.js.map +1 -1
- package/dist/fondue/index.umd.js +4 -4
- package/dist/fondue/index.umd.js.map +1 -1
- package/dist/fondue/utilities/dimensions.es.js +7 -7
- package/dist/fondue/utilities/dimensions.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.es.js","sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactNode } from 'react';\nimport { merge } from '@utilities/merge';\nimport { ContainerHTMLElement } from '../../types/elements';\nimport { Box } from '@components/Box';\nimport { DimensionUnity, GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\n\nexport type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\nexport type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';\nexport type FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\nexport type FlexAlignItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch';\nexport type FlexAlignContent =\n | 'start'\n | 'end'\n | 'center'\n | 'between'\n | 'around'\n | 'evenly'\n | 'baseline'\n | 'stretch'\n | 'normal';\n\nexport type FlexProps = {\n direction?: FlexDirection;\n wrap?: FlexWrap;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n justify?: FlexJustify;\n alignItems?: FlexAlignItems;\n alignContent?: FlexAlignContent;\n 'data-test-id'?: string;\n children?: ReactNode | ReactNode[];\n bg?: string;\n color?: string;\n as?: ContainerHTMLElement;\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n minWidth?: `${number}${DimensionUnity}`;\n maxWidth?: `${number}${DimensionUnity}`;\n minHeight?: `${number}${DimensionUnity}`;\n maxHeight?: `${number}${DimensionUnity}`;\n};\n\nconst directionMapping = {\n row: 'tw-flex-row',\n column: 'tw-flex-col',\n 'row-reverse': 'tw-flex-row-reverse',\n 'column-reverse': 'tw-flex-col-reverse',\n};\n\nconst wrapMapping = {\n nowrap: 'tw-flex-nowrap',\n wrap: 'tw-flex-wrap',\n 'wrap-reverse': 'tw-flex-wrap-reverse',\n};\n\nconst justifyMapping = {\n start: 'tw-justify-start',\n end: 'tw-justify-end',\n center: 'tw-justify-center',\n between: 'tw-justify-between',\n around: 'tw-justify-around',\n evenly: 'tw-justify-evenly',\n};\n\nconst alignItemsMapping = {\n start: 'tw-items-start',\n end: 'tw-items-end',\n center: 'tw-items-center',\n baseline: 'tw-items-baseline',\n stretch: 'tw-items-stretch',\n};\n\nconst alignContentMapping = {\n start: 'tw-content-start',\n end: 'tw-content-end',\n center: 'tw-content-center',\n normal: 'tw-content-normal',\n between: 'tw-content-between',\n around: 'tw-content-around',\n evenly: 'tw-content-evenly',\n baseline: 'tw-content-baseline',\n stretch: 'tw-content-stretch',\n};\n\nexport const Flex = ({\n direction = 'row',\n wrap = 'nowrap',\n justify = 'center',\n alignItems = 'center',\n alignContent = 'center',\n 'data-test-id': dataTestId = 'fondue-flex',\n children,\n bg,\n color,\n as: ContainerElement = 'div',\n margin,\n marginX,\n marginY,\n padding,\n paddingX,\n paddingY,\n minWidth,\n maxWidth,\n maxHeight,\n minHeight,\n spacing = 4,\n spacingX,\n spacingY,\n}: FlexProps) => {\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-flex',\n GetGapClassName(GAP_DIRECTIONS.
|
|
1
|
+
{"version":3,"file":"Flex.es.js","sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactNode } from 'react';\nimport { merge } from '@utilities/merge';\nimport { ContainerHTMLElement } from '../../types/elements';\nimport { Box } from '@components/Box';\nimport { DimensionUnity, GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\n\nexport type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';\nexport type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';\nexport type FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\nexport type FlexAlignItems = 'start' | 'end' | 'center' | 'baseline' | 'stretch';\nexport type FlexAlignContent =\n | 'start'\n | 'end'\n | 'center'\n | 'between'\n | 'around'\n | 'evenly'\n | 'baseline'\n | 'stretch'\n | 'normal';\n\nexport type FlexProps = {\n direction?: FlexDirection;\n wrap?: FlexWrap;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n justify?: FlexJustify;\n alignItems?: FlexAlignItems;\n alignContent?: FlexAlignContent;\n 'data-test-id'?: string;\n children?: ReactNode | ReactNode[];\n bg?: string;\n color?: string;\n as?: ContainerHTMLElement;\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n minWidth?: `${number}${DimensionUnity}`;\n maxWidth?: `${number}${DimensionUnity}`;\n minHeight?: `${number}${DimensionUnity}`;\n maxHeight?: `${number}${DimensionUnity}`;\n};\n\nconst directionMapping = {\n row: 'tw-flex-row',\n column: 'tw-flex-col',\n 'row-reverse': 'tw-flex-row-reverse',\n 'column-reverse': 'tw-flex-col-reverse',\n};\n\nconst wrapMapping = {\n nowrap: 'tw-flex-nowrap',\n wrap: 'tw-flex-wrap',\n 'wrap-reverse': 'tw-flex-wrap-reverse',\n};\n\nconst justifyMapping = {\n start: 'tw-justify-start',\n end: 'tw-justify-end',\n center: 'tw-justify-center',\n between: 'tw-justify-between',\n around: 'tw-justify-around',\n evenly: 'tw-justify-evenly',\n};\n\nconst alignItemsMapping = {\n start: 'tw-items-start',\n end: 'tw-items-end',\n center: 'tw-items-center',\n baseline: 'tw-items-baseline',\n stretch: 'tw-items-stretch',\n};\n\nconst alignContentMapping = {\n start: 'tw-content-start',\n end: 'tw-content-end',\n center: 'tw-content-center',\n normal: 'tw-content-normal',\n between: 'tw-content-between',\n around: 'tw-content-around',\n evenly: 'tw-content-evenly',\n baseline: 'tw-content-baseline',\n stretch: 'tw-content-stretch',\n};\n\nexport const Flex = ({\n direction = 'row',\n wrap = 'nowrap',\n justify = 'center',\n alignItems = 'center',\n alignContent = 'center',\n 'data-test-id': dataTestId = 'fondue-flex',\n children,\n bg,\n color,\n as: ContainerElement = 'div',\n margin,\n marginX,\n marginY,\n padding,\n paddingX,\n paddingY,\n minWidth,\n maxWidth,\n maxHeight,\n minHeight,\n spacing = 4,\n spacingX,\n spacingY,\n}: FlexProps) => {\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-flex',\n GetGapClassName(GAP_DIRECTIONS.GAP, spacing),\n GetGapClassName(GAP_DIRECTIONS.GAP_X, spacingX),\n GetGapClassName(GAP_DIRECTIONS.GAP_Y, spacingY),\n directionMapping[direction],\n wrapMapping[wrap],\n justifyMapping[justify],\n alignItemsMapping[alignItems],\n alignContentMapping[alignContent],\n bg,\n color,\n ])}\n style={{\n maxWidth,\n minWidth,\n maxHeight,\n minHeight,\n }}\n margin={margin}\n marginX={marginX}\n marginY={marginY}\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n as={ContainerElement}\n >\n {children}\n </Box>\n );\n};\nFlex.displayName = 'FondueFlex';\n"],"names":["directionMapping","wrapMapping","justifyMapping","alignItemsMapping","alignContentMapping","Flex","direction","wrap","justify","alignItems","alignContent","dataTestId","children","bg","color","ContainerElement","margin","marginX","marginY","padding","paddingX","paddingY","minWidth","maxWidth","maxHeight","minHeight","spacing","spacingX","spacingY","jsx","Box","merge","GetGapClassName","GAP_DIRECTIONS"],"mappings":";;;;AAiDA,MAAMA,IAAmB;AAAA,EACrB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,kBAAkB;AACtB,GAEMC,IAAc;AAAA,EAChB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,gBAAgB;AACpB,GAEMC,IAAiB;AAAA,EACnB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACZ,GAEMC,IAAoB;AAAA,EACtB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACb,GAEMC,IAAsB;AAAA,EACxB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACb,GAEaC,IAAO,CAAC;AAAA,EACjB,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAIC,IAAmB;AAAA,EACvB,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AACJ,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,gBAAcnB;AAAA,IACd,WAAWoB,EAAM;AAAA,MACb;AAAA,MACAC,EAAgBC,EAAe,KAAKP,CAAO;AAAA,MAC3CM,EAAgBC,EAAe,OAAON,CAAQ;AAAA,MAC9CK,EAAgBC,EAAe,OAAOL,CAAQ;AAAA,MAC9C5B,EAAiBM,CAAS;AAAA,MAC1BL,EAAYM,CAAI;AAAA,MAChBL,EAAeM,CAAO;AAAA,MACtBL,EAAkBM,CAAU;AAAA,MAC5BL,EAAoBM,CAAY;AAAA,MAChCG;AAAA,MACAC;AAAA,IAAA,CACH;AAAA,IACD,OAAO;AAAA,MACH,UAAAS;AAAA,MACA,UAAAD;AAAA,MACA,WAAAE;AAAA,MACA,WAAAC;AAAA,IACJ;AAAA,IACA,QAAAT;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,IAAIN;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA;AAIbP,EAAK,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.es.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, ReactNode } from 'react';\nimport { DimensionUnity, GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\nimport { ContainerHTMLElement } from '../../types/elements';\nimport { merge } from '@utilities/merge';\nimport { Box } from '@components/Box';\n\nexport type GridProps = {\n column?: number;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n children?: ReactNode;\n width?: `${number}${DimensionUnity}`;\n rowHeight?: `${number}${DimensionUnity}` | 'auto';\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n bg?: string;\n color?: string;\n 'data-test-id'?: string;\n as?: ContainerHTMLElement;\n};\n\nexport const GRID_TEST_ID = 'fondue-grid';\n\nexport const Grid = ({\n column = 2,\n spacing = 4,\n spacingX,\n spacingY,\n children,\n 'data-test-id': dataTestId = GRID_TEST_ID,\n width = '100%',\n rowHeight = 'auto',\n bg,\n color,\n margin,\n marginX,\n marginY,\n padding,\n paddingX,\n paddingY,\n as: ContainerElement = 'div',\n}: GridProps) => {\n let childrenLength = 0;\n\n Children.map(children, (child) => {\n childrenLength++;\n return child;\n });\n\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-grid',\n bg,\n color,\n GetGapClassName(GAP_DIRECTIONS.
|
|
1
|
+
{"version":3,"file":"Grid.es.js","sources":["../../../../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, ReactNode } from 'react';\nimport { DimensionUnity, GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\nimport { ContainerHTMLElement } from '../../types/elements';\nimport { merge } from '@utilities/merge';\nimport { Box } from '@components/Box';\n\nexport type GridProps = {\n column?: number;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n children?: ReactNode;\n width?: `${number}${DimensionUnity}`;\n rowHeight?: `${number}${DimensionUnity}` | 'auto';\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n bg?: string;\n color?: string;\n 'data-test-id'?: string;\n as?: ContainerHTMLElement;\n};\n\nexport const GRID_TEST_ID = 'fondue-grid';\n\nexport const Grid = ({\n column = 2,\n spacing = 4,\n spacingX,\n spacingY,\n children,\n 'data-test-id': dataTestId = GRID_TEST_ID,\n width = '100%',\n rowHeight = 'auto',\n bg,\n color,\n margin,\n marginX,\n marginY,\n padding,\n paddingX,\n paddingY,\n as: ContainerElement = 'div',\n}: GridProps) => {\n let childrenLength = 0;\n\n Children.map(children, (child) => {\n childrenLength++;\n return child;\n });\n\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-grid',\n bg,\n color,\n GetGapClassName(GAP_DIRECTIONS.GAP, spacing),\n GetGapClassName(GAP_DIRECTIONS.GAP_X, spacingX),\n GetGapClassName(GAP_DIRECTIONS.GAP_Y, spacingY),\n ])}\n style={{\n width,\n gridTemplateColumns: `repeat(${column}, 1fr)`,\n gridTemplateRows: `repeat(${Math.ceil(childrenLength / column)}, ${rowHeight})`,\n }}\n margin={margin}\n marginX={marginX}\n marginY={marginY}\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n as={ContainerElement}\n >\n {children}\n </Box>\n );\n};\n\nGrid.displayName = 'FondueGrid';\n"],"names":["GRID_TEST_ID","Grid","column","spacing","spacingX","spacingY","children","dataTestId","width","rowHeight","bg","color","margin","marginX","marginY","padding","paddingX","paddingY","ContainerElement","childrenLength","Children","child","jsx","Box","merge","GetGapClassName","GAP_DIRECTIONS"],"mappings":";;;;;AA4BO,MAAMA,IAAe,eAEfC,IAAO,CAAC;AAAA,EACjB,QAAAC,IAAS;AAAA,EACT,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAaP;AAAA,EAC7B,OAAAQ,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAIC,IAAmB;AAC3B,MAAiB;AACb,MAAIC,IAAiB;AAEZ,SAAAC,EAAA,IAAId,GAAU,CAACe,OACpBF,KACOE,EACV,GAGG,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,gBAAchB;AAAA,MACd,WAAWiB,EAAM;AAAA,QACb;AAAA,QACAd;AAAA,QACAC;AAAA,QACAc,EAAgBC,EAAe,KAAKvB,CAAO;AAAA,QAC3CsB,EAAgBC,EAAe,OAAOtB,CAAQ;AAAA,QAC9CqB,EAAgBC,EAAe,OAAOrB,CAAQ;AAAA,MAAA,CACjD;AAAA,MACD,OAAO;AAAA,QACH,OAAAG;AAAA,QACA,qBAAqB,UAAUN,CAAM;AAAA,QACrC,kBAAkB,UAAU,KAAK,KAAKiB,IAAiBjB,CAAM,CAAC,KAAKO,CAAS;AAAA,MAChF;AAAA,MACA,QAAAG;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,IAAIC;AAAA,MAEH,UAAAZ;AAAA,IAAA;AAAA,EAAA;AAGb;AAEAL,EAAK,cAAc;"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { useEditorRef as b } from "@udecode/plate-core";
|
|
2
2
|
import { useFloatingLinkSelectors as I, floatingLinkActions as S } from "@udecode/plate-link";
|
|
3
3
|
import { useState as T, useCallback as f, useEffect as m } from "react";
|
|
4
|
-
import { FLOATING_MODAL_SELECTOR as
|
|
4
|
+
import { FLOATING_MODAL_SELECTOR as h } from "./components/FloatingModal/FloatingModal.es.js";
|
|
5
5
|
const B = ({
|
|
6
|
-
hideExternalFloatingModals:
|
|
6
|
+
hideExternalFloatingModals: i
|
|
7
7
|
}) => {
|
|
8
|
-
const e = b(),
|
|
9
|
-
|
|
10
|
-
}, [
|
|
8
|
+
const e = b(), n = I().isOpen(e.id), [c, d] = T(!1), o = f(() => {
|
|
9
|
+
n && S.hide(), i && i(e.id);
|
|
10
|
+
}, [n, i, e]), l = f(() => {
|
|
11
11
|
e.collapse(), o();
|
|
12
12
|
}, [e, o]);
|
|
13
13
|
return m(() => {
|
|
14
14
|
if (!c)
|
|
15
15
|
return;
|
|
16
16
|
const t = (r) => {
|
|
17
|
-
const v = `[data-editor-id='${e.id}']`, E = "[role='toolbar']", p = "[data-is-underlay]", s = r.target, L = s.closest(p), O = s.closest(
|
|
17
|
+
const v = `[data-editor-id='${e.id}']`, E = "[role='toolbar']", p = "[data-is-underlay]", s = r.target, L = s.closest(p), O = s.closest(h), a = s.closest(v), u = s.closest(E);
|
|
18
18
|
a && !O || u ? o() : !a && !u && !L && (l(), d(!1));
|
|
19
19
|
};
|
|
20
20
|
return document.addEventListener("pointerdown", t), document.addEventListener("focusin", t), () => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlurObserver.es.js","sources":["../../../../src/components/RichTextEditor/BlurObserver.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEditorRef } from '@udecode/plate-core';\nimport { floatingLinkActions, useFloatingLinkSelectors } from '@udecode/plate-link';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { FLOATING_MODAL_SELECTOR } from './components';\n\nexport const BlurObserver = ({\n hideExternalFloatingModals,\n}: {\n hideExternalFloatingModals?: (editorId: string) => void;\n}) => {\n const editorRef = useEditorRef();\n const isFloatingLinkModalOpen = useFloatingLinkSelectors().isOpen(editorRef.id);\n const [isBlurObserverActive, setIsBlurObserverActive] = useState(false);\n\n const collapseFloatingModals = useCallback(() => {\n if (isFloatingLinkModalOpen) {\n floatingLinkActions.
|
|
1
|
+
{"version":3,"file":"BlurObserver.es.js","sources":["../../../../src/components/RichTextEditor/BlurObserver.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEditorRef } from '@udecode/plate-core';\nimport { floatingLinkActions, useFloatingLinkSelectors } from '@udecode/plate-link';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { FLOATING_MODAL_SELECTOR } from './components';\n\nexport const BlurObserver = ({\n hideExternalFloatingModals,\n}: {\n hideExternalFloatingModals?: (editorId: string) => void;\n}) => {\n const editorRef = useEditorRef();\n const isFloatingLinkModalOpen = useFloatingLinkSelectors().isOpen(editorRef.id);\n const [isBlurObserverActive, setIsBlurObserverActive] = useState(false);\n\n const collapseFloatingModals = useCallback(() => {\n if (isFloatingLinkModalOpen) {\n floatingLinkActions.hide();\n }\n if (hideExternalFloatingModals) {\n hideExternalFloatingModals(editorRef.id);\n }\n }, [isFloatingLinkModalOpen, hideExternalFloatingModals, editorRef]);\n\n const collapseEverything = useCallback(() => {\n editorRef.collapse();\n collapseFloatingModals();\n }, [editorRef, collapseFloatingModals]);\n\n useEffect(() => {\n if (!isBlurObserverActive) {\n return;\n }\n\n const handleInteractWithOutside = (event: FocusEvent | MouseEvent) => {\n const richTextEditorSelector = `[data-editor-id='${editorRef.id}']`;\n const toolbarSelector = \"[role='toolbar']\";\n const modalSelector = '[data-is-underlay]';\n\n const targetElement = event.target as HTMLElement;\n\n const isInsidePortalledModal = targetElement.closest(modalSelector);\n const isInsideNonPortalledModal = targetElement.closest(FLOATING_MODAL_SELECTOR);\n const isInsideRichTextEditor = targetElement.closest(richTextEditorSelector);\n const isInsideRichTextEditorToolbar = targetElement.closest(toolbarSelector);\n\n if ((isInsideRichTextEditor && !isInsideNonPortalledModal) || isInsideRichTextEditorToolbar) {\n collapseFloatingModals();\n } else if (!isInsideRichTextEditor && !isInsideRichTextEditorToolbar && !isInsidePortalledModal) {\n collapseEverything();\n setIsBlurObserverActive(false);\n }\n };\n\n document.addEventListener('pointerdown', handleInteractWithOutside);\n document.addEventListener('focusin', handleInteractWithOutside);\n\n return () => {\n document.removeEventListener('focusin', handleInteractWithOutside);\n document.removeEventListener('pointerdown', handleInteractWithOutside);\n };\n }, [collapseEverything, collapseFloatingModals, editorRef.id, isBlurObserverActive]);\n\n /* Only activate blur observer when the user has focused the editor\n to limit the number of active document event listeners */\n useEffect(() => {\n const richTextEditor = document.querySelector(`[data-editor-id='${editorRef.id}']`);\n\n if (!richTextEditor) {\n return;\n }\n\n const setupBlurObserver = () => {\n setIsBlurObserverActive(true);\n };\n\n richTextEditor.addEventListener('focusin', setupBlurObserver);\n\n return () => {\n richTextEditor.removeEventListener('focusin', setupBlurObserver);\n };\n }, [editorRef.id]);\n\n return null;\n};\n"],"names":["BlurObserver","hideExternalFloatingModals","editorRef","useEditorRef","isFloatingLinkModalOpen","useFloatingLinkSelectors","isBlurObserverActive","setIsBlurObserverActive","useState","collapseFloatingModals","useCallback","floatingLinkActions","collapseEverything","useEffect","handleInteractWithOutside","event","richTextEditorSelector","toolbarSelector","modalSelector","targetElement","isInsidePortalledModal","isInsideNonPortalledModal","FLOATING_MODAL_SELECTOR","isInsideRichTextEditor","isInsideRichTextEditorToolbar","richTextEditor","setupBlurObserver"],"mappings":";;;;AAQO,MAAMA,IAAe,CAAC;AAAA,EACzB,4BAAAC;AACJ,MAEM;AACF,QAAMC,IAAYC,KACZC,IAA0BC,EAA2B,EAAA,OAAOH,EAAU,EAAE,GACxE,CAACI,GAAsBC,CAAuB,IAAIC,EAAS,EAAK,GAEhEC,IAAyBC,EAAY,MAAM;AAC7C,IAAIN,KACAO,EAAoB,KAAK,GAEzBV,KACAA,EAA2BC,EAAU,EAAE;AAAA,EAE5C,GAAA,CAACE,GAAyBH,GAA4BC,CAAS,CAAC,GAE7DU,IAAqBF,EAAY,MAAM;AACzC,IAAAR,EAAU,SAAS,GACIO;EAAA,GACxB,CAACP,GAAWO,CAAsB,CAAC;AAEtC,SAAAI,EAAU,MAAM;AACZ,QAAI,CAACP;AACD;AAGE,UAAAQ,IAA4B,CAACC,MAAmC;AAC5D,YAAAC,IAAyB,oBAAoBd,EAAU,EAAE,MACzDe,IAAkB,oBAClBC,IAAgB,sBAEhBC,IAAgBJ,EAAM,QAEtBK,IAAyBD,EAAc,QAAQD,CAAa,GAC5DG,IAA4BF,EAAc,QAAQG,CAAuB,GACzEC,IAAyBJ,EAAc,QAAQH,CAAsB,GACrEQ,IAAgCL,EAAc,QAAQF,CAAe;AAEtE,MAAAM,KAA0B,CAACF,KAA8BG,IACnCf,MAChB,CAACc,KAA0B,CAACC,KAAiC,CAACJ,MAClDR,KACnBL,EAAwB,EAAK;AAAA,IACjC;AAGK,oBAAA,iBAAiB,eAAeO,CAAyB,GACzD,SAAA,iBAAiB,WAAWA,CAAyB,GAEvD,MAAM;AACA,eAAA,oBAAoB,WAAWA,CAAyB,GACxD,SAAA,oBAAoB,eAAeA,CAAyB;AAAA,IAAA;AAAA,EACzE,GACD,CAACF,GAAoBH,GAAwBP,EAAU,IAAII,CAAoB,CAAC,GAInFO,EAAU,MAAM;AACZ,UAAMY,IAAiB,SAAS,cAAc,oBAAoBvB,EAAU,EAAE,IAAI;AAElF,QAAI,CAACuB;AACD;AAGJ,UAAMC,IAAoB,MAAM;AAC5B,MAAAnB,EAAwB,EAAI;AAAA,IAAA;AAGjB,WAAAkB,EAAA,iBAAiB,WAAWC,CAAiB,GAErD,MAAM;AACM,MAAAD,EAAA,oBAAoB,WAAWC,CAAiB;AAAA,IAAA;AAAA,EACnE,GACD,CAACxB,EAAU,EAAE,CAAC,GAEV;AACX;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.es.js","sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, ReactElement, ReactNode } from 'react';\nimport { Box } from '@components/Box';\nimport { GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\nimport { merge } from '@utilities/merge';\nimport { ContainerHTMLElement } from '../../types/elements';\n\nexport type STACK_DIRECTION = 'row' | 'column' | 'row-reverse' | 'column-reverse';\n\nexport type STACK_JUSTIFY = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\nexport type STACK_ALIGN_ITEMS = 'start' | 'end' | 'center' | 'baseline' | 'stretch';\nexport type STACK_ALIGN_CONTENT =\n | 'start'\n | 'end'\n | 'center'\n | 'between'\n | 'around'\n | 'evenly'\n | 'baseline'\n | 'stretch'\n | 'normal';\n\nexport type STACK_PROPS = {\n children?: ReactNode | ReactNode[] | JSX.Element;\n direction?: STACK_DIRECTION;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n divider?: ReactElement;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n bg?: string;\n color?: string;\n 'data-test-id'?: string;\n justify?: STACK_JUSTIFY;\n alignItems?: STACK_ALIGN_ITEMS;\n alignContent?: STACK_ALIGN_CONTENT;\n as?: ContainerHTMLElement;\n};\n\nexport const STACK_DIRECTION_MAPPING = {\n row: 'tw-flex-row',\n column: 'tw-flex-col',\n 'row-reverse': 'tw-flex-row-reverse',\n 'column-reverse': 'tw-flex-col-reverse',\n};\n\nconst STACK_JUSTIFY_MAPPING = {\n start: 'tw-justify-start',\n end: 'tw-justify-end',\n center: 'tw-justify-center',\n between: 'tw-justify-between',\n around: 'tw-justify-around',\n evenly: 'tw-justify-evenly',\n};\n\nconst STACK_ALIGN_ITEMS_MAPPING = {\n start: 'tw-items-start',\n end: 'tw-items-end',\n center: 'tw-items-center',\n baseline: 'tw-items-baseline',\n stretch: 'tw-items-stretch',\n};\n\nexport const STACK_TEST_ID = 'fondue-stack';\n\nexport const Stack = ({\n children,\n 'data-test-id': dataTestId = STACK_TEST_ID,\n direction = 'column',\n spacing,\n spacingX,\n spacingY,\n divider,\n padding,\n paddingX,\n paddingY,\n margin,\n marginX,\n marginY,\n justify = 'start',\n alignItems = 'start',\n bg,\n color,\n as: ContainerElement = 'div',\n}: STACK_PROPS) => {\n const renderedChildren = Children.map(children, (child) => {\n return (\n <>\n {child}\n {divider}\n </>\n );\n });\n\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-flex',\n STACK_JUSTIFY_MAPPING[justify],\n STACK_ALIGN_ITEMS_MAPPING[alignItems],\n STACK_DIRECTION_MAPPING[direction],\n GetGapClassName(GAP_DIRECTIONS.
|
|
1
|
+
{"version":3,"file":"Stack.es.js","sources":["../../../../src/components/Stack/Stack.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, ReactElement, ReactNode } from 'react';\nimport { Box } from '@components/Box';\nimport { GAP_DIRECTIONS, GetGapClassName, SpacingValue } from '@utilities/dimensions';\nimport { merge } from '@utilities/merge';\nimport { ContainerHTMLElement } from '../../types/elements';\n\nexport type STACK_DIRECTION = 'row' | 'column' | 'row-reverse' | 'column-reverse';\n\nexport type STACK_JUSTIFY = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';\nexport type STACK_ALIGN_ITEMS = 'start' | 'end' | 'center' | 'baseline' | 'stretch';\nexport type STACK_ALIGN_CONTENT =\n | 'start'\n | 'end'\n | 'center'\n | 'between'\n | 'around'\n | 'evenly'\n | 'baseline'\n | 'stretch'\n | 'normal';\n\nexport type STACK_PROPS = {\n children?: ReactNode | ReactNode[] | JSX.Element;\n direction?: STACK_DIRECTION;\n spacing?: SpacingValue;\n spacingX?: SpacingValue;\n spacingY?: SpacingValue;\n divider?: ReactElement;\n margin?: SpacingValue;\n marginX?: SpacingValue;\n marginY?: SpacingValue;\n padding?: SpacingValue;\n paddingX?: SpacingValue;\n paddingY?: SpacingValue;\n bg?: string;\n color?: string;\n 'data-test-id'?: string;\n justify?: STACK_JUSTIFY;\n alignItems?: STACK_ALIGN_ITEMS;\n alignContent?: STACK_ALIGN_CONTENT;\n as?: ContainerHTMLElement;\n};\n\nexport const STACK_DIRECTION_MAPPING = {\n row: 'tw-flex-row',\n column: 'tw-flex-col',\n 'row-reverse': 'tw-flex-row-reverse',\n 'column-reverse': 'tw-flex-col-reverse',\n};\n\nconst STACK_JUSTIFY_MAPPING = {\n start: 'tw-justify-start',\n end: 'tw-justify-end',\n center: 'tw-justify-center',\n between: 'tw-justify-between',\n around: 'tw-justify-around',\n evenly: 'tw-justify-evenly',\n};\n\nconst STACK_ALIGN_ITEMS_MAPPING = {\n start: 'tw-items-start',\n end: 'tw-items-end',\n center: 'tw-items-center',\n baseline: 'tw-items-baseline',\n stretch: 'tw-items-stretch',\n};\n\nexport const STACK_TEST_ID = 'fondue-stack';\n\nexport const Stack = ({\n children,\n 'data-test-id': dataTestId = STACK_TEST_ID,\n direction = 'column',\n spacing,\n spacingX,\n spacingY,\n divider,\n padding,\n paddingX,\n paddingY,\n margin,\n marginX,\n marginY,\n justify = 'start',\n alignItems = 'start',\n bg,\n color,\n as: ContainerElement = 'div',\n}: STACK_PROPS) => {\n const renderedChildren = Children.map(children, (child) => {\n return (\n <>\n {child}\n {divider}\n </>\n );\n });\n\n return (\n <Box\n data-test-id={dataTestId}\n className={merge([\n 'tw-flex',\n STACK_JUSTIFY_MAPPING[justify],\n STACK_ALIGN_ITEMS_MAPPING[alignItems],\n STACK_DIRECTION_MAPPING[direction],\n GetGapClassName(GAP_DIRECTIONS.GAP, spacing),\n GetGapClassName(GAP_DIRECTIONS.GAP_X, spacingX),\n GetGapClassName(GAP_DIRECTIONS.GAP_Y, spacingY),\n bg,\n color,\n ])}\n margin={margin}\n marginX={marginX}\n marginY={marginY}\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n as={ContainerElement}\n >\n {renderedChildren}\n </Box>\n );\n};\nStack.displayName = 'FondueStack';\n"],"names":["STACK_DIRECTION_MAPPING","STACK_JUSTIFY_MAPPING","STACK_ALIGN_ITEMS_MAPPING","STACK_TEST_ID","Stack","children","dataTestId","direction","spacing","spacingX","spacingY","divider","padding","paddingX","paddingY","margin","marginX","marginY","justify","alignItems","bg","color","ContainerElement","renderedChildren","Children","child","jsxs","Fragment","jsx","Box","merge","GetGapClassName","GAP_DIRECTIONS"],"mappings":";;;;;AA6CO,MAAMA,IAA0B;AAAA,EACnC,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,kBAAkB;AACtB,GAEMC,IAAwB;AAAA,EAC1B,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACZ,GAEMC,IAA4B;AAAA,EAC9B,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACb,GAEaC,IAAgB,gBAEhBC,IAAQ,CAAC;AAAA,EAClB,UAAAC;AAAA,EACA,gBAAgBC,IAAaH;AAAA,EAC7B,WAAAI,IAAY;AAAA,EACZ,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,YAAAC,IAAa;AAAA,EACb,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAIC,IAAmB;AAC3B,MAAmB;AACf,QAAMC,IAAmBC,EAAS,IAAInB,GAAU,CAACoB,MAGpC,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAAF;AAAA,IACAd;AAAA,EACL,EAAA,CAAA,CAEP;AAGG,SAAA,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,gBAAcvB;AAAA,MACd,WAAWwB,EAAM;AAAA,QACb;AAAA,QACA7B,EAAsBiB,CAAO;AAAA,QAC7BhB,EAA0BiB,CAAU;AAAA,QACpCnB,EAAwBO,CAAS;AAAA,QACjCwB,EAAgBC,EAAe,KAAKxB,CAAO;AAAA,QAC3CuB,EAAgBC,EAAe,OAAOvB,CAAQ;AAAA,QAC9CsB,EAAgBC,EAAe,OAAOtB,CAAQ;AAAA,QAC9CU;AAAA,QACAC;AAAA,MAAA,CACH;AAAA,MACD,QAAAN;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC;AAAA,MACA,SAAAL;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,IAAIQ;AAAA,MAEH,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGb;AACAnB,EAAM,cAAc;"}
|