@chayns-components/core 5.0.0-beta.476 → 5.0.0-beta.478
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/lib/components/accordion/accordion-head/AccordionHead.styles.d.ts +1 -1
- package/lib/components/color-scheme-provider/ColorSchemeProvider.js +16 -32
- package/lib/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
- package/lib/components/popup/Popup.js +2 -4
- package/lib/components/popup/Popup.js.map +1 -1
- package/lib/components/popup/popup-content/PopupContent.js +4 -2
- package/lib/components/popup/popup-content/PopupContent.js.map +1 -1
- package/package.json +3 -3
- package/lib/hooks/colorMode.d.ts +0 -2
- package/lib/hooks/colorMode.js +0 -13
- package/lib/hooks/colorMode.js.map +0 -1
|
@@ -2141,7 +2141,7 @@ export declare const StyledMotionRightInput: import("styled-components").IStyled
|
|
|
2141
2141
|
width?: string | number | undefined;
|
|
2142
2142
|
accept?: string | undefined;
|
|
2143
2143
|
alt?: string | undefined;
|
|
2144
|
-
autoComplete?:
|
|
2144
|
+
autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
|
|
2145
2145
|
capture?: boolean | "user" | "environment" | undefined;
|
|
2146
2146
|
checked?: boolean | undefined;
|
|
2147
2147
|
enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';
|
|
2
|
-
import {
|
|
3
|
-
import React, { useEffect,
|
|
2
|
+
import { useSite } from 'chayns-api';
|
|
3
|
+
import React, { useEffect, useState } from 'react';
|
|
4
4
|
import { createGlobalStyle, ThemeProvider } from 'styled-components';
|
|
5
5
|
import { getDesignSettings } from '../../api/theme/get';
|
|
6
6
|
import { convertIconStyle, generateFontFaces } from '../../utils/font';
|
|
@@ -11,13 +11,12 @@ var ColorMode = /*#__PURE__*/function (ColorMode) {
|
|
|
11
11
|
return ColorMode;
|
|
12
12
|
}(ColorMode || {}); // ToDo remove type after the framer-motion bug is Fixed
|
|
13
13
|
const GlobalStyle = createGlobalStyle`
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
14
|
+
${generateFontFaces}
|
|
15
|
+
.ellipsis {
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
text-overflow: ellipsis;
|
|
18
|
+
white-space: nowrap;
|
|
19
|
+
}
|
|
21
20
|
`;
|
|
22
21
|
const ColorSchemeProvider = _ref => {
|
|
23
22
|
let {
|
|
@@ -32,6 +31,10 @@ const ColorSchemeProvider = _ref => {
|
|
|
32
31
|
const [colors, setColors] = useState({});
|
|
33
32
|
const [theme, setTheme] = useState({});
|
|
34
33
|
const [internalDesignSettings, setInternalDesignSettings] = useState();
|
|
34
|
+
const {
|
|
35
|
+
color: internalColor,
|
|
36
|
+
colorMode: internalColorMode
|
|
37
|
+
} = useSite();
|
|
35
38
|
useEffect(() => {
|
|
36
39
|
if (designSettings) {
|
|
37
40
|
setInternalDesignSettings(designSettings);
|
|
@@ -41,33 +44,14 @@ const ColorSchemeProvider = _ref => {
|
|
|
41
44
|
setInternalDesignSettings(result);
|
|
42
45
|
});
|
|
43
46
|
}, [designSettings]);
|
|
44
|
-
const site = getSite();
|
|
45
|
-
const internalColorMode = useMemo(() => {
|
|
46
|
-
if (colorMode) {
|
|
47
|
-
return colorMode;
|
|
48
|
-
}
|
|
49
|
-
if (!site || !site.colorMode) {
|
|
50
|
-
return ColorMode.Classic;
|
|
51
|
-
}
|
|
52
|
-
return site.colorMode;
|
|
53
|
-
}, [colorMode, site]);
|
|
54
|
-
const internalColor = useMemo(() => {
|
|
55
|
-
if (color) {
|
|
56
|
-
return color;
|
|
57
|
-
}
|
|
58
|
-
if (!site || !site.color) {
|
|
59
|
-
return '#005EB8';
|
|
60
|
-
}
|
|
61
|
-
return site.color;
|
|
62
|
-
}, [color, site]);
|
|
63
47
|
useEffect(() => {
|
|
64
48
|
const availableColors = getAvailableColorList();
|
|
65
49
|
const newColors = {};
|
|
66
50
|
const newTheme = {};
|
|
67
51
|
availableColors.forEach(colorName => {
|
|
68
52
|
const hexColor = getColorFromPalette(colorName, {
|
|
69
|
-
color: internalColor,
|
|
70
|
-
colorMode: internalColorMode,
|
|
53
|
+
color: color ?? internalColor,
|
|
54
|
+
colorMode: colorMode ?? internalColorMode,
|
|
71
55
|
secondaryColor
|
|
72
56
|
});
|
|
73
57
|
if (hexColor) {
|
|
@@ -80,7 +64,7 @@ const ColorSchemeProvider = _ref => {
|
|
|
80
64
|
}
|
|
81
65
|
}
|
|
82
66
|
});
|
|
83
|
-
switch (colorMode) {
|
|
67
|
+
switch (colorMode ?? internalColorMode) {
|
|
84
68
|
case ColorMode.Light:
|
|
85
69
|
newTheme.colorMode = 'light';
|
|
86
70
|
break;
|
|
@@ -107,7 +91,7 @@ const ColorSchemeProvider = _ref => {
|
|
|
107
91
|
}
|
|
108
92
|
setTheme(newTheme);
|
|
109
93
|
setColors(newColors);
|
|
110
|
-
}, [colorMode, internalColor, internalColorMode, internalDesignSettings, secondaryColor]);
|
|
94
|
+
}, [color, colorMode, internalColor, internalColorMode, internalDesignSettings, secondaryColor]);
|
|
111
95
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
112
96
|
theme: theme
|
|
113
97
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","
|
|
1
|
+
{"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","useSite","React","useEffect","useState","createGlobalStyle","ThemeProvider","getDesignSettings","convertIconStyle","generateFontFaces","ColorMode","GlobalStyle","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","theme","setTheme","internalDesignSettings","setInternalDesignSettings","internalColor","internalColorMode","then","result","availableColors","newColors","newTheme","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","createElement","displayName"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { useSite } from 'chayns-api';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings } from '../../api/theme/get';\nimport type { DesignSettings } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, generateFontFaces } from '../../utils/font';\n\nenum ColorMode {\n Classic,\n Dark,\n Light,\n}\n\ntype ColorSchemeProviderProps = {\n /**\n * The content of the application or the components for which the styles should be set\n */\n children: ReactNode;\n /**\n * The hex color to be used for the children\n */\n color?: string;\n /**\n * The color mode to be used for the children\n */\n colorMode?: ColorMode;\n /**\n * Css variables to be added in addition to the chayns variables\n */\n cssVariables?: { [key: string]: string | number };\n /**\n * The design settings of a page.\n */\n designSettings?: DesignSettings;\n /**\n * The secondary hex color to be used for the children\n */\n secondaryColor?: string;\n /**\n * Additional styles set on the root element\n */\n style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n ${generateFontFaces}\n .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n style = {},\n designSettings,\n}) => {\n const [colors, setColors] = useState<Theme>({});\n const [theme, setTheme] = useState<Theme>({});\n const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n\n const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n useEffect(() => {\n if (designSettings) {\n setInternalDesignSettings(designSettings);\n\n return;\n }\n\n void getDesignSettings().then((result) => {\n setInternalDesignSettings(result);\n });\n }, [designSettings]);\n\n useEffect(() => {\n const availableColors = getAvailableColorList();\n\n const newColors: Theme = {};\n const newTheme: Theme = {};\n\n availableColors.forEach((colorName: string) => {\n const hexColor = getColorFromPalette(colorName, {\n color: color ?? internalColor,\n colorMode: colorMode ?? internalColorMode,\n secondaryColor,\n });\n\n if (hexColor) {\n const rgbColor = hexToRgb255(hexColor);\n\n newColors[`--chayns-color--${colorName}`] = hexColor;\n newTheme[colorName] = hexColor;\n\n if (rgbColor) {\n newColors[`--chayns-color-rgb--${colorName}`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n });\n\n switch (colorMode ?? internalColorMode) {\n case ColorMode.Light:\n newTheme.colorMode = 'light';\n break;\n case ColorMode.Dark:\n newTheme.colorMode = 'dark';\n break;\n default:\n newTheme.colorMode = 'classic';\n break;\n }\n\n if (internalDesignSettings) {\n Object.keys(internalDesignSettings).forEach((key) => {\n if (key === 'iconStyle') {\n newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n return;\n }\n\n // ToDo: Find better solution\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n newTheme[key] = internalDesignSettings[key];\n });\n }\n\n setTheme(newTheme);\n setColors(newColors);\n }, [\n color,\n colorMode,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n secondaryColor,\n ]);\n\n return (\n <ThemeProvider theme={theme}>\n <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n <GlobalStyle />\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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"}
|
|
@@ -91,12 +91,10 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
91
91
|
}
|
|
92
92
|
}, [handleHide, shouldShowOnHover]);
|
|
93
93
|
const handleDocumentClick = useCallback(event => {
|
|
94
|
-
if (!popupContentRef.current?.contains(event.target)) {
|
|
94
|
+
if (!popupContentRef.current?.contains(event.target) && !shouldShowOnHover) {
|
|
95
95
|
event.preventDefault();
|
|
96
96
|
event.stopPropagation();
|
|
97
|
-
|
|
98
|
-
handleHide();
|
|
99
|
-
}
|
|
97
|
+
handleHide();
|
|
100
98
|
}
|
|
101
99
|
}, [handleHide, shouldShowOnHover]);
|
|
102
100
|
useImperativeHandle(ref, () => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","PopupContent","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","container","document","querySelector","body","alignment","setAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","event","currentTarget","dataset","ispopup","relatedTarget","contains","handleDocumentClick","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","window","removeEventListener","createElement","initial","key","onMouseLeave","Fragment","$menuHeight","onClick","onMouseEnter","displayName"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n const container = document.querySelector('.tapp') || document.body;\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && popupPseudoContentRef.current) {\n const { height: pseudoHeight, width: pseudoWidth } =\n popupPseudoContentRef.current.getBoundingClientRect();\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop + childrenHeight + yOffset,\n });\n } else {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [yOffset]);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = () => {\n if (shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n if (shouldShowOnHover) {\n if ((event.currentTarget as HTMLElement).dataset.ispopup === 'true') {\n handleHide();\n }\n\n if (\n event.relatedTarget &&\n (event.relatedTarget === popupContentRef.current ||\n popupContentRef.current?.contains(event.relatedTarget as Node))\n ) {\n return;\n }\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (!popupContentRef.current?.contains(event.target as Node)) {\n event.preventDefault();\n event.stopPropagation();\n\n if (!shouldShowOnHover) {\n handleHide();\n }\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContent\n coordinates={coordinates}\n content={content}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [alignment, container, content, coordinates, handleMouseLeave, isOpen, uuid]);\n\n return (\n <>\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","PopupContent","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","container","document","querySelector","body","alignment","setAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","event","currentTarget","dataset","ispopup","relatedTarget","contains","handleDocumentClick","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","window","removeEventListener","createElement","initial","key","onMouseLeave","Fragment","$menuHeight","onClick","onMouseEnter","displayName"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n /**\n * The element over which the content of the `ContextMenu` should be displayed.\n */\n children?: ReactNode;\n /**\n * The content that should be displayed inside the popup.\n */\n content: ReactNode;\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n */\n shouldShowOnHover?: boolean;\n /**\n * The Y offset of the popup to the children.\n */\n yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n x: 0,\n y: 0,\n });\n const container = document.querySelector('.tapp') || document.body;\n\n const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n const [isOpen, setIsOpen] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [menuHeight, setMenuHeight] = useState(0);\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const popupContentRef = useRef<HTMLDivElement>(null);\n const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n const popupRef = useRef<HTMLDivElement>(null);\n\n const handleShow = useCallback(() => {\n if (popupRef.current && popupPseudoContentRef.current) {\n const { height: pseudoHeight, width: pseudoWidth } =\n popupPseudoContentRef.current.getBoundingClientRect();\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = popupRef.current.getBoundingClientRect();\n\n if (pseudoHeight > childrenTop - 25) {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.BottomRight);\n } else {\n setAlignment(PopupAlignment.BottomLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop + childrenHeight + yOffset,\n });\n } else {\n if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n setAlignment(PopupAlignment.TopRight);\n } else {\n setAlignment(PopupAlignment.TopLeft);\n }\n\n setCoordinates({\n x: childrenLeft + childrenWidth / 2,\n y: childrenTop - yOffset,\n });\n }\n\n setIsOpen(true);\n }\n }, [yOffset]);\n\n const handleChildrenClick = () => {\n if (!shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleHide = useCallback(() => {\n setIsOpen(false);\n }, []);\n\n const handleMouseEnter = () => {\n if (shouldShowOnHover) {\n handleShow();\n }\n };\n\n const handleMouseLeave = useCallback(\n (event: MouseEvent) => {\n if (shouldShowOnHover) {\n if ((event.currentTarget as HTMLElement).dataset.ispopup === 'true') {\n handleHide();\n }\n\n if (\n event.relatedTarget &&\n (event.relatedTarget === popupContentRef.current ||\n popupContentRef.current?.contains(event.relatedTarget as Node))\n ) {\n return;\n }\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !popupContentRef.current?.contains(event.target as Node) &&\n !shouldShowOnHover\n ) {\n event.preventDefault();\n event.stopPropagation();\n\n handleHide();\n }\n },\n [handleHide, shouldShowOnHover],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n void getWindowMetrics().then((result) => {\n if (result.topBarHeight) {\n setMenuHeight(result.topBarHeight);\n }\n });\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n useEffect(() => {\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isOpen && (\n <PopupContent\n coordinates={coordinates}\n content={content}\n key={`tooltip_${uuid}`}\n alignment={alignment}\n ref={popupContentRef}\n onMouseLeave={handleMouseLeave}\n />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [alignment, container, content, coordinates, handleMouseLeave, isOpen, uuid]);\n\n return (\n <>\n <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n {content}\n </StyledPopupPseudo>\n <StyledPopup\n ref={popupRef}\n onClick={handleChildrenClick}\n onMouseLeave={handleMouseLeave}\n onMouseEnter={handleMouseEnter}\n >\n {children}\n </StyledPopup>\n {portal}\n </>\n );\n },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { useSite } from 'chayns-api';
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import { useColorMode } from '../../../hooks/colorMode';
|
|
3
3
|
import { PopupAlignment } from '../../../types/popup';
|
|
4
4
|
import { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';
|
|
5
5
|
const PopupContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
@@ -9,7 +9,9 @@ const PopupContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
9
9
|
content,
|
|
10
10
|
onMouseLeave
|
|
11
11
|
} = _ref;
|
|
12
|
-
const
|
|
12
|
+
const {
|
|
13
|
+
colorMode
|
|
14
|
+
} = useSite();
|
|
13
15
|
const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;
|
|
14
16
|
const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;
|
|
15
17
|
const isTopRightAlignment = alignment === PopupAlignment.TopRight;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupContent.js","names":["
|
|
1
|
+
{"version":3,"file":"PopupContent.js","names":["useSite","React","PopupAlignment","StyledMotionPopupContent","StyledPopupContentInner","PopupContent","forwardRef","_ref","ref","alignment","coordinates","content","onMouseLeave","colorMode","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","_ref2","displayName"],"sources":["../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';\n\ntype PopupContentProps = {\n alignment: PopupAlignment;\n coordinates: PopupCoordinates;\n content: ReactNode;\n onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(\n ({ alignment, coordinates, content, onMouseLeave }, ref) => {\n const { colorMode } = useSite();\n\n const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n return (\n <StyledMotionPopupContent\n animate={{ opacity: 1, y: 0 }}\n $colorMode={colorMode}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n ref={ref}\n data-ispopup=\"true\"\n onMouseLeave={onMouseLeave}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ type: 'tween' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n <StyledPopupContentInner>{content}</StyledPopupContentInner>\n </StyledMotionPopupContent>\n );\n },\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SAASC,wBAAwB,EAAEC,uBAAuB,QAAQ,uBAAuB;AASzF,MAAMC,YAAY,gBAAGJ,KAAK,CAACK,UAAU,CACjC,CAAAC,IAAA,EAAoDC,GAAG,KAAK;EAAA,IAA3D;IAAEC,SAAS;IAAEC,WAAW;IAAEC,OAAO;IAAEC;EAAa,CAAC,GAAAL,IAAA;EAC9C,MAAM;IAAEM;EAAU,CAAC,GAAGb,OAAO,CAAC,CAAC;EAE/B,MAAMc,qBAAqB,GAAGL,SAAS,KAAKP,cAAc,CAACa,UAAU;EACrE,MAAMC,kBAAkB,GAAGP,SAAS,KAAKP,cAAc,CAACe,OAAO;EAC/D,MAAMC,mBAAmB,GAAGT,SAAS,KAAKP,cAAc,CAACiB,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIjB,KAAA,CAAAwB,aAAA,CAACtB,wBAAwB;IACrBuB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEhB,SAAU;IACtBiB,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CQ,SAAS,EAAEvB,SAAU;IACrBD,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBI,YAAY,EAAEA,YAAa;IAC3BqB,KAAK,EAAE;MAAEC,IAAI,EAAExB,WAAW,CAACyB,CAAC;MAAEC,GAAG,EAAE1B,WAAW,CAACkB;IAAE,CAAE;IACnDS,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEZ,CAAC,GAAG;MAAM,CAAC,GAAAY,KAAA;MAAA,OAAM;AACvD,iCAAiCpB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCK,CAAE;AACnC,iBAAiB;IAAA;EAAC,gBAEF3B,KAAA,CAAAwB,aAAA,CAACrB,uBAAuB,QAAEO,OAAiC,CACrC,CAAC;AAEnC,CACJ,CAAC;AAEDN,YAAY,CAACoC,WAAW,GAAG,cAAc;AAEzC,eAAepC,YAAY"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.478",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"@babel/preset-env": "^7.23.9",
|
|
46
46
|
"@babel/preset-react": "^7.23.3",
|
|
47
47
|
"@babel/preset-typescript": "^7.23.3",
|
|
48
|
-
"@types/react": "^18.2.
|
|
48
|
+
"@types/react": "^18.2.57",
|
|
49
49
|
"@types/react-dom": "^18.2.19",
|
|
50
50
|
"@types/styled-components": "^5.1.34",
|
|
51
51
|
"@types/uuid": "^9.0.8",
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "ecafd609d009758bebc00342b3513680208eb6e7"
|
|
77
77
|
}
|
package/lib/hooks/colorMode.d.ts
DELETED
package/lib/hooks/colorMode.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { useSite } from 'chayns-api';
|
|
2
|
-
import { useEffect, useState } from 'react';
|
|
3
|
-
export const useColorMode = () => {
|
|
4
|
-
const [colorMode, setColorMode] = useState(0);
|
|
5
|
-
const site = useSite();
|
|
6
|
-
useEffect(() => {
|
|
7
|
-
if (site.colorMode) {
|
|
8
|
-
setColorMode(site.colorMode);
|
|
9
|
-
}
|
|
10
|
-
}, [site.colorMode]);
|
|
11
|
-
return colorMode;
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=colorMode.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"colorMode.js","names":["useSite","useEffect","useState","useColorMode","colorMode","setColorMode","site"],"sources":["../../src/hooks/colorMode.ts"],"sourcesContent":["import { useSite, type ColorMode } from 'chayns-api';\nimport { useEffect, useState } from 'react';\n\nexport const useColorMode = (): ColorMode => {\n const [colorMode, setColorMode] = useState<ColorMode>(0);\n\n const site = useSite();\n\n useEffect(() => {\n if (site.colorMode) {\n setColorMode(site.colorMode);\n }\n }, [site.colorMode]);\n\n return colorMode;\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAwB,YAAY;AACpD,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAiB;EACzC,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGH,QAAQ,CAAY,CAAC,CAAC;EAExD,MAAMI,IAAI,GAAGN,OAAO,CAAC,CAAC;EAEtBC,SAAS,CAAC,MAAM;IACZ,IAAIK,IAAI,CAACF,SAAS,EAAE;MAChBC,YAAY,CAACC,IAAI,CAACF,SAAS,CAAC;IAChC;EACJ,CAAC,EAAE,CAACE,IAAI,CAACF,SAAS,CAAC,CAAC;EAEpB,OAAOA,SAAS;AACpB,CAAC"}
|