@chayns-components/core 5.0.0-beta.366 → 5.0.0-beta.368
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/context-menu/context-menu-content/ContextMenuContent.styles.js +4 -5
- package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
- package/lib/components/popup/Popup.js +2 -2
- package/lib/components/popup/Popup.js.map +1 -1
- package/lib/components/popup/popup-content/PopupContent.styles.js +5 -6
- package/lib/components/popup/popup-content/PopupContent.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -31,7 +31,6 @@ const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent =
|
|
|
31
31
|
&::after {
|
|
32
32
|
background-color: inherit;
|
|
33
33
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
34
|
-
border-bottom-right-radius: 3px;
|
|
35
34
|
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
36
35
|
box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
|
|
37
36
|
content: '';
|
|
@@ -47,26 +46,26 @@ const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent =
|
|
|
47
46
|
switch (position) {
|
|
48
47
|
case _alignment.ContextMenuAlignment.TopLeft:
|
|
49
48
|
return (0, _styledComponents.css)`
|
|
50
|
-
bottom: -
|
|
49
|
+
bottom: -7px;
|
|
51
50
|
right: 13px;
|
|
52
51
|
transform: rotate(45deg);
|
|
53
52
|
`;
|
|
54
53
|
case _alignment.ContextMenuAlignment.BottomLeft:
|
|
55
54
|
return (0, _styledComponents.css)`
|
|
56
|
-
top: -
|
|
55
|
+
top: -7px;
|
|
57
56
|
right: 13px;
|
|
58
57
|
transform: rotate(225deg);
|
|
59
58
|
`;
|
|
60
59
|
case _alignment.ContextMenuAlignment.TopRight:
|
|
61
60
|
return (0, _styledComponents.css)`
|
|
62
61
|
transform: rotate(45deg);
|
|
63
|
-
bottom: -
|
|
62
|
+
bottom: -7px;
|
|
64
63
|
left: 13px;
|
|
65
64
|
`;
|
|
66
65
|
case _alignment.ContextMenuAlignment.BottomRight:
|
|
67
66
|
return (0, _styledComponents.css)`
|
|
68
67
|
transform: rotate(225deg);
|
|
69
|
-
top: -
|
|
68
|
+
top: -7px;
|
|
70
69
|
left: 13px;
|
|
71
70
|
`;
|
|
72
71
|
default:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuContent.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMotionContextMenuContent","exports","styled","motion","div","_ref","theme","_ref2","text","_ref3","position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ContextMenuAlignment } from '../constants/alignment';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n position: absolute;\n z-index: 0;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-
|
|
1
|
+
{"version":3,"file":"ContextMenuContent.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMotionContextMenuContent","exports","styled","motion","div","_ref","theme","_ref2","text","_ref3","position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledContextMenuContentItem","_ref4","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ContextMenuAlignment } from '../constants/alignment';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n position: absolute;\n z-index: 0;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ position }) => {\n switch (position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 13px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 13px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 13px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 13px;\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n cursor: pointer;\n display: flex;\n padding: 5px 8px 5px 5px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n flex: 0 0 auto;\n margin: 0 8px 0 3px;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 0 auto;\n white-space: nowrap;\n`;\n"],"mappings":"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"}
|
|
@@ -58,7 +58,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
58
58
|
setAlignment(_types.PopupAlignment.BottomLeft);
|
|
59
59
|
}
|
|
60
60
|
setCoordinates({
|
|
61
|
-
x: childrenLeft + childrenWidth / 2,
|
|
61
|
+
x: 1 + childrenLeft + childrenWidth / 2,
|
|
62
62
|
y: childrenTop + childrenHeight + 4 - yOffset
|
|
63
63
|
});
|
|
64
64
|
} else {
|
|
@@ -68,7 +68,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
68
68
|
setAlignment(_types.PopupAlignment.TopLeft);
|
|
69
69
|
}
|
|
70
70
|
setCoordinates({
|
|
71
|
-
x: childrenLeft + childrenWidth / 2,
|
|
71
|
+
x: 1 + childrenLeft + childrenWidth / 2,
|
|
72
72
|
y: childrenTop - 4 + yOffset
|
|
73
73
|
});
|
|
74
74
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_PopupContent","_interopRequireDefault","_Popup","_types","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Popup","forwardRef","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","useState","x","y","container","document","querySelector","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","useUuid","popupContentRef","useRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","window","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","Fragment","StyledPopupPseudo","StyledPopup","onClick","onMouseLeave","onMouseEnter","displayName","_default","exports"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\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 PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from './types';\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 + 4 - 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 - 4 + 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 = () => {\n if (shouldShowOnHover) {\n handleHide();\n }\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 />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [alignment, container, content, coordinates, 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":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_PopupContent","_interopRequireDefault","_Popup","_types","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Popup","forwardRef","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","useState","x","y","container","document","querySelector","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","useUuid","popupContentRef","useRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","window","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","Fragment","StyledPopupPseudo","StyledPopup","onClick","onMouseLeave","onMouseEnter","displayName","_default","exports"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\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 PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from './types';\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: 1 + childrenLeft + childrenWidth / 2,\n y: childrenTop + childrenHeight + 4 - 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: 1 + childrenLeft + childrenWidth / 2,\n y: childrenTop - 4 + 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 = () => {\n if (shouldShowOnHover) {\n handleHide();\n }\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 />\n )}\n </AnimatePresence>,\n container,\n ),\n );\n }, [alignment, container, content, coordinates, 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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"}
|
|
@@ -26,13 +26,12 @@ const StyledMotionPopupContent = exports.StyledMotionPopupContent = (0, _styledC
|
|
|
26
26
|
} = _ref2;
|
|
27
27
|
return theme.text;
|
|
28
28
|
}};
|
|
29
|
-
z-index:
|
|
29
|
+
z-index: 100;
|
|
30
30
|
position: fixed;
|
|
31
31
|
|
|
32
32
|
&::after {
|
|
33
33
|
background-color: inherit;
|
|
34
34
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
35
|
-
border-bottom-right-radius: 3px;
|
|
36
35
|
border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
37
36
|
box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
|
|
38
37
|
content: '';
|
|
@@ -48,26 +47,26 @@ const StyledMotionPopupContent = exports.StyledMotionPopupContent = (0, _styledC
|
|
|
48
47
|
switch (position) {
|
|
49
48
|
case _types.PopupAlignment.TopLeft:
|
|
50
49
|
return (0, _styledComponents.css)`
|
|
51
|
-
bottom: -
|
|
50
|
+
bottom: -7px;
|
|
52
51
|
right: 13px;
|
|
53
52
|
transform: rotate(45deg);
|
|
54
53
|
`;
|
|
55
54
|
case _types.PopupAlignment.BottomLeft:
|
|
56
55
|
return (0, _styledComponents.css)`
|
|
57
|
-
top: -
|
|
56
|
+
top: -7px;
|
|
58
57
|
right: 13px;
|
|
59
58
|
transform: rotate(225deg);
|
|
60
59
|
`;
|
|
61
60
|
case _types.PopupAlignment.TopRight:
|
|
62
61
|
return (0, _styledComponents.css)`
|
|
63
62
|
transform: rotate(45deg);
|
|
64
|
-
bottom: -
|
|
63
|
+
bottom: -7px;
|
|
65
64
|
left: 13px;
|
|
66
65
|
`;
|
|
67
66
|
case _types.PopupAlignment.BottomRight:
|
|
68
67
|
return (0, _styledComponents.css)`
|
|
69
68
|
transform: rotate(225deg);
|
|
70
|
-
top: -
|
|
69
|
+
top: -7px;
|
|
71
70
|
left: 13px;
|
|
72
71
|
`;
|
|
73
72
|
default:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopupContent.styles.js","names":["_chaynsApi","require","_framerMotion","_styledComponents","_interopRequireWildcard","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMotionPopupContent","exports","styled","motion","div","_ref","theme","colorMode","ColorMode","Dark","_ref2","text","_ref3","position","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledPopupContentInner"],"sources":["../../../../src/components/popup/popup-content/PopupContent.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { PopupAlignment } from '../types';\n\ntype StyledMotionPopupContentProps = WithTheme<{\n position: PopupAlignment;\n colorMode: ColorMode;\n}>;\n\nexport const StyledMotionPopupContent = styled(motion.div)<StyledMotionPopupContentProps>`\n background-color: ${({ theme, colorMode }: StyledMotionPopupContentProps) =>\n colorMode === ColorMode.Dark ? theme['003'] : theme['001']};\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionPopupContentProps) => theme.text};\n z-index:
|
|
1
|
+
{"version":3,"file":"PopupContent.styles.js","names":["_chaynsApi","require","_framerMotion","_styledComponents","_interopRequireWildcard","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMotionPopupContent","exports","styled","motion","div","_ref","theme","colorMode","ColorMode","Dark","_ref2","text","_ref3","position","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined","StyledPopupContentInner"],"sources":["../../../../src/components/popup/popup-content/PopupContent.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { PopupAlignment } from '../types';\n\ntype StyledMotionPopupContentProps = WithTheme<{\n position: PopupAlignment;\n colorMode: ColorMode;\n}>;\n\nexport const StyledMotionPopupContent = styled(motion.div)<StyledMotionPopupContentProps>`\n background-color: ${({ theme, colorMode }: StyledMotionPopupContentProps) =>\n colorMode === ColorMode.Dark ? theme['003'] : theme['001']};\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionPopupContentProps) => theme.text};\n z-index: 100;\n position: fixed;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ position }) => {\n switch (position) {\n case PopupAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 13px;\n transform: rotate(45deg);\n `;\n case PopupAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 13px;\n transform: rotate(225deg);\n `;\n case PopupAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 13px;\n `;\n case PopupAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 13px;\n `;\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\nexport const StyledPopupContentInner = styled.div`\n border-radius: 3px;\n overflow: hidden;\n`;\n"],"mappings":"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"}
|
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.368",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"chayns",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "4f328b6a879c8afe1b87d3204e9240c2b2d1e78f"
|
|
74
74
|
}
|