npm - @chayns-components/core - Versions diffs - 5.0.0-beta.992 → 5.0.0-beta.997 - Mend

@chayns-components/core 5.0.0-beta.992 → 5.0.0-beta.997

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.

Files changed (36) hide show

package/lib/cjs/components/search-input/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_Icon","_interopRequireDefault","_Input","_SearchInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","InputSize","Medium","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","$size","StyledMotionSearchInputIconWrapper","AnimatePresence","initial","StyledMotionSearchInputIconWrapperContent","animate","opacity","exit","position","key","transition","duration","id","color","icons","onClick","StyledMotionSearchInputContentWrapper","width","leftElement","text","ref","shouldShowClearIcon","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n /*\n Color of the icon\n /\n iconColor?: CSSProperties['color'];\n /\n Force the active state of the input and override the internal state\n /\n isActive?: boolean;\n /\n Function that is executed when the active state of the input changes\n /\n onActiveChange?: (isActive: boolean) => void;\n /\n Function that is executed when the text of the input changes\n /\n onChange: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a key is pressed\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n size = InputSize.Medium,\n value,\n}) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n\n const theme = useTheme() as Theme;\n\n const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n return (\n <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n <StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n id={\n isSearchInputActive\n ? 'search-input-backIcon'\n : 'search-input-searchIcon'\n }\n >\n <Icon\n color={iconColor}\n icons={isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search']}\n onClick={\n isSearchInputActive ? handleBackIconClick : handleSearchIconClick\n }\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledMotionSearchInputIconWrapper>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n leftElement={<Icon color={theme.text} icons={['far fa-search']} />}\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n </AnimatePresence>\n </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"SearchInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","size","InputSize","Medium","value","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","createElement","StyledSearchInput","className","$size","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","width","exit","key","transition","duration","ref","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","color","icons","onClick","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n StyledMotionSearchInputContentWrapper,\n StyledMotionSearchInputIconWrapperContent,\n StyledSearchInput,\n} from './SearchInput.styles';\n\nexport type SearchInputProps = {\n /*\n Color of the icon\n /\n iconColor?: CSSProperties['color'];\n /\n Force the active state of the input and override the internal state\n /\n isActive?: boolean;\n /\n Function that is executed when the active state of the input changes\n /\n onActiveChange?: (isActive: boolean) => void;\n /\n Function that is executed when the text of the input changes\n /\n onChange: ChangeEventHandler<HTMLInputElement>;\n /\n Function that is executed when a key is pressed\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n /\n Placeholder for the input field\n /\n placeholder?: string;\n /\n The size of the input field\n /\n size?: InputSize;\n /\n Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n iconColor,\n isActive,\n onActiveChange,\n onChange,\n onKeyDown,\n placeholder,\n size = InputSize.Medium,\n value,\n}) => {\n const [isSearchInputActive, setIsSearchInputActive] = useState(\n isActive ?? (typeof value === 'string' && value.trim() !== ''),\n );\n\n const inputRef = useRef<InputRef>(null);\n\n const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n useEffect(() => {\n if (typeof onActiveChange === 'function') {\n onActiveChange(isSearchInputActive);\n }\n\n if (isSearchInputActive) {\n inputRef.current?.focus();\n }\n }, [isSearchInputActive, onActiveChange]);\n\n useEffect(() => {\n if (typeof isActive === 'boolean') {\n setIsSearchInputActive(isActive);\n }\n }, [isActive]);\n\n return (\n <StyledSearchInput className=\"beta-chayns-search-input\" $size={size}>\n <AnimatePresence initial={false}>\n {isSearchInputActive && (\n <StyledMotionSearchInputContentWrapper\n animate={{ opacity: 1, width: '100%' }}\n exit={{ opacity: 0, width: 0 }}\n initial={{ opacity: 0, width: 0 }}\n key=\"searchInputContentWrapper\"\n transition={{ duration: 0.3 }}\n >\n <Input\n onChange={onChange}\n onKeyDown={onKeyDown}\n placeholder={placeholder}\n ref={inputRef}\n shouldShowClearIcon\n size={size}\n value={value}\n />\n </StyledMotionSearchInputContentWrapper>\n )}\n <StyledMotionSearchInputIconWrapperContent\n animate={{ opacity: 1 }}\n exit={{ opacity: 0, position: 'absolute' }}\n initial={{ opacity: 0 }}\n key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n transition={{ duration: 0.3 }}\n id={isSearchInputActive ? 'search-input-backIcon' : 'search-input-searchIcon'}\n >\n <Icon\n color={iconColor}\n icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n onClick={isSearchInputActive ? handleBackIconClick : handleSearchIconClick}\n size={18}\n />\n </StyledMotionSearchInputIconWrapperContent>\n </AnimatePresence>\n </StyledSearchInput>\n );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/search-input/SearchInput.styles.js CHANGED Viewed

@@ -3,26 +3,33 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputContentWrapper = void 0;
+exports.StyledSearchInput = exports.StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputContentWrapper = void 0;
 var _framerMotion = require("framer-motion");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledSearchInput = exports.StyledSearchInput = _styledComponents.default.div`
-    align-items: center;
     display: flex;
-    gap: 8px;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    border-radius: 3px;
     height: ${({
   $size
 }) => $size === 'medium' ? '42px' : '32px'};
-    justify-content: flex-end;
-    width: 100%;
+    &:hover {
+        background-color: ${({
+  theme
+}) => theme[103]};
+    }
 `;
 const StyledMotionSearchInputContentWrapper = exports.StyledMotionSearchInputContentWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    position: absolute;
+    top: 0;
+    right: 0;
     overflow: hidden;
 `;
-const StyledMotionSearchInputIconWrapper = exports.StyledMotionSearchInputIconWrapper = _styledComponents.default.div`
-    width: 18px;
-`;
 const StyledMotionSearchInputIconWrapperContent = exports.StyledMotionSearchInputIconWrapperContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
     display: flex;
 `;

package/lib/cjs/components/search-input/SearchInput.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSearchInput","exports","styled","div","$size","~~StyledMotionSearchInputContentWrapper~~","~~motion~~","~~StyledMotionSearchInputIconWrapper~~","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = {\n $size: InputSize;\n};\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n align-items: center;\n ~~display~~: ~~flex~~;\n ~~gap~~: ~~8px~~;\n height: ${({ $size }) => ($size === 'medium' ? '42px' : '32px')};\n ~~justify~~-~~content~~: ~~flex-end~~;\n ~~width: 100%;\~~n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n ~~overflow~~: ~~hidden~~;\n~~`;\~~n~~\nexport~~ ~~const StyledMotionSearchInputIconWrapper = styled.div`\~~n ~~width~~: ~~18px~~;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA,cAAc,CAAC;EAAEC;~~AAAM~~,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;~~AACnE~~;AACA;AACA,CAAC;AAEM,MAAMC,qCAAqC,~~GAAAJ~~,OAAA,~~CAAAI~~,qCAAA,GAAG,~~IAAAH~~,yBAAM,~~EAACI~~,oBAAM,~~CAACH~~,GAAG,CAAqB;AAC3F;AACA~~,CAAC~~;~~AAEM,MAAMI,kCAAkC,GAAAN,OAAA,CAAAM,kCAAA,GAAGL,yBAAM,CAACC,GAAG~~;~~AAC5D~~;AACA,CAAC;AAEM,MAAMK,yCAAyC,GAAAP,OAAA,CAAAO,yCAAA,GAAG,IAAAN,yBAAM,~~EAACI~~,oBAAM,~~CAACH~~,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SearchInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSearchInput","exports","styled","div","$size","theme","StyledMotionSearchInputContentWrapper","motion","StyledMotionSearchInputIconWrapperContent"],"sources":["../../../../src/components/search-input/SearchInput.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from '../input/Input';\n\ntype StyledSearchInputProps = WithTheme<{\n $size: InputSize;\n}>;\n\nexport const StyledSearchInput = styled.div<StyledSearchInputProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n aspect-ratio: 1;\n border-radius: 3px;\n\n height: ${({ $size }: StyledSearchInputProps) => ($size === 'medium' ? '42px' : '32px')};\n\n &:hover {\n background-color: ${({ theme }: StyledSearchInputProps) => theme[103]};\n }\n`;\n\nexport const StyledMotionSearchInputContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n position: absolute;\n top: 0;\n right: 0;\n overflow: hidden;\n`;\n\nexport const StyledMotionSearchInputIconWrapperContent = styled(motion.div)<FramerMotionBugFix>`\n display: flex;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAA2B;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAA8B,CAAC,KAAMA,KAAK,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAO;AAC3F;AACA;AACA,4BAA4B,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAAC,GAAG,CAAC;AAC7E;AACA,CAAC;AAEM,MAAMC,qCAAqC,GAAAL,OAAA,CAAAK,qCAAA,GAAG,IAAAJ,yBAAM,EAACK,oBAAM,CAACJ,GAAG,CAAqB;AAC3F;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMK,yCAAyC,GAAAP,OAAA,CAAAO,yCAAA,GAAG,IAAAN,yBAAM,EAACK,oBAAM,CAACJ,GAAG,CAAqB;AAC/F;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/tag-input/TagInput.js CHANGED Viewed

@@ -13,6 +13,8 @@ var _TagInput = require("./TagInput.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// ToDo: Add reference with "save" function to return unsaved tags
 const TagInput = ({
   placeholder,
   tags,

package/lib/cjs/components/tag-input/TagInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TagInput","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","useState","currentValue","setCurrentValue","selectedId","setSelectedId","theme","useTheme","useEffect","handleKeyDown","useCallback","event","key","prevValue","prevTags","newTag","id","uuidv4","text","_internalTags","newSelectedId","length","prevState","_prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","useMemo","items","forEach","push","createElement","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","StyledTagInput","StyledTagInputTagInput","onKeyDown","onChange","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useState,\n type ChangeEvent,\n type KeyboardEvent,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n StyledTagInput,\n StyledTagInputTagInput,\n StyledTagInputTagWrapper,\n StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n /*\n Function to be executed when a tag is added.\n /\n onAdd?: (tag: Tag) => void;\n /\n Function to be executed when a tag is removed.\n /\n onRemove?: (id: string) => void;\n /\n The placeholder that should be displayed.\n /\n placeholder?: string;\n /\n The tags that should be displayed.\n */\n tags?: Tag[];\n};\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n const [internalTags, setInternalTags] = useState<Tag[]>();\n const [currentValue, setCurrentValue] = useState('');\n const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n const theme = useTheme();\n\n useEffect(() => {\n if (tags) {\n setInternalTags(tags);\n }\n }, [tags]);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n setCurrentValue((prevValue) => {\n if (!prevValue) {\n return '';\n }\n\n setInternalTags((prevTags) => {\n const newTag = { id: uuidv4(), text: prevValue };\n\n if (typeof onAdd === 'function') {\n onAdd(newTag);\n }\n\n return prevTags ? [...prevTags, newTag] : [newTag];\n });\n\n return '';\n });\n }\n\n if (event.key === 'Backspace' && currentValue === '') {\n if (!selectedId) {\n if (!internalTags) {\n return;\n }\n\n const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n setSelectedId(newSelectedId);\n\n return;\n }\n\n setInternalTags((prevState) => {\n if (!prevState) {\n return prevState;\n }\n\n const removedId = prevState[prevState.length - 1]?.id;\n\n if (!removedId) {\n return prevState;\n }\n\n const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n if (typeof onRemove === 'function') {\n onRemove(removedId);\n }\n\n setSelectedId(undefined);\n\n return updatedTags;\n });\n }\n },\n [currentValue, internalTags, onAdd, onRemove, selectedId],\n );\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value);\n\n if (event.target.value !== '') {\n setSelectedId(undefined);\n }\n };\n\n const handleIconClick = useCallback(\n (id: string) => {\n setInternalTags((prevState) => {\n const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n\n return updatedTags;\n });\n },\n [onRemove],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n if (!internalTags) {\n return items;\n }\n\n internalTags.forEach(({ text, id }) => {\n items.push(\n <Badge\n key={`tag-input-${id}`}\n backgroundColor={\n id === selectedId ? (theme['206'] as string) ?? undefined : undefined\n }\n >\n <StyledTagInputTagWrapper>\n <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n </StyledTagInputTagWrapper>\n </Badge>,\n );\n });\n\n return items;\n }, [handleIconClick, internalTags, selectedId, theme]);\n\n return useMemo(\n () => (\n <StyledTagInput>\n {content}\n <StyledTagInputTagInput\n placeholder={tags && tags.length > 0 ? undefined : placeholder}\n onKeyDown={handleKeyDown}\n onChange={handleChange}\n value={currentValue}\n />\n </StyledTagInput>\n ),\n [content, currentValue, handleKeyDown, placeholder, tags],\n );\n};\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TagInput","placeholder","tags","onRemove","onAdd","internalTags","setInternalTags","useState","currentValue","setCurrentValue","selectedId","setSelectedId","theme","useTheme","useEffect","handleKeyDown","useCallback","event","key","prevValue","prevTags","newTag","id","uuidv4","text","_internalTags","newSelectedId","length","prevState","_prevState","removedId","updatedTags","filter","tag","undefined","handleChange","target","value","handleIconClick","content","useMemo","items","forEach","push","createElement","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","StyledTagInput","StyledTagInputTagInput","onKeyDown","onChange","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n FC,\n useCallback,\n useEffect,\n useMemo,\n useState,\n type ChangeEvent,\n type KeyboardEvent,\n type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n StyledTagInput,\n StyledTagInputTagInput,\n StyledTagInputTagWrapper,\n StyledTagInputTagWrapperText,\n} from './TagInput.styles';\n\nexport type TagInputProps = {\n /*\n Function to be executed when a tag is added.\n /\n onAdd?: (tag: Tag) => void;\n /\n Function to be executed when a tag is removed.\n /\n onRemove?: (id: string) => void;\n /\n The placeholder that should be displayed.\n /\n placeholder?: string;\n /\n The tags that should be displayed.\n */\n tags?: Tag[];\n};\n\n// ToDo: Add reference with \"save\" function to return unsaved tags\n\nconst TagInput: FC<TagInputProps> = ({ placeholder, tags, onRemove, onAdd }) => {\n const [internalTags, setInternalTags] = useState<Tag[]>();\n const [currentValue, setCurrentValue] = useState('');\n const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n const theme = useTheme();\n\n useEffect(() => {\n if (tags) {\n setInternalTags(tags);\n }\n }, [tags]);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n setCurrentValue((prevValue) => {\n if (!prevValue) {\n return '';\n }\n\n setInternalTags((prevTags) => {\n const newTag = { id: uuidv4(), text: prevValue };\n\n if (typeof onAdd === 'function') {\n onAdd(newTag);\n }\n\n return prevTags ? [...prevTags, newTag] : [newTag];\n });\n\n return '';\n });\n }\n\n if (event.key === 'Backspace' && currentValue === '') {\n if (!selectedId) {\n if (!internalTags) {\n return;\n }\n\n const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n setSelectedId(newSelectedId);\n\n return;\n }\n\n setInternalTags((prevState) => {\n if (!prevState) {\n return prevState;\n }\n\n const removedId = prevState[prevState.length - 1]?.id;\n\n if (!removedId) {\n return prevState;\n }\n\n const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n if (typeof onRemove === 'function') {\n onRemove(removedId);\n }\n\n setSelectedId(undefined);\n\n return updatedTags;\n });\n }\n },\n [currentValue, internalTags, onAdd, onRemove, selectedId],\n );\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setCurrentValue(event.target.value);\n\n if (event.target.value !== '') {\n setSelectedId(undefined);\n }\n };\n\n const handleIconClick = useCallback(\n (id: string) => {\n setInternalTags((prevState) => {\n const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n if (typeof onRemove === 'function') {\n onRemove(id);\n }\n\n return updatedTags;\n });\n },\n [onRemove],\n );\n\n const content = useMemo(() => {\n const items: ReactElement[] = [];\n\n if (!internalTags) {\n return items;\n }\n\n internalTags.forEach(({ text, id }) => {\n items.push(\n <Badge\n key={`tag-input-${id}`}\n backgroundColor={\n id === selectedId ? ((theme['206'] as string) ?? undefined) : undefined\n }\n >\n <StyledTagInputTagWrapper>\n <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n <Icon icons={['ts-wrong']} onClick={() => handleIconClick(id)} />\n </StyledTagInputTagWrapper>\n </Badge>,\n );\n });\n\n return items;\n }, [handleIconClick, internalTags, selectedId, theme]);\n\n return useMemo(\n () => (\n <StyledTagInput>\n {content}\n <StyledTagInputTagInput\n placeholder={tags && tags.length > 0 ? undefined : placeholder}\n onKeyDown={handleKeyDown}\n onChange={handleChange}\n value={currentValue}\n />\n </StyledTagInput>\n ),\n [content, currentValue, handleKeyDown, placeholder, tags],\n );\n};\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/api/theme/get.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { getSite } from 'chayns-api';
+export const getDesignSettings = async siteId => {
+  let id = siteId;
+  if (!id) id = getSite().id;
+  const response = await fetch(`https://api.chayns.net/css/${id}/style/v2`, {
+    method: 'GET'
+  });
+  if (response.status === 200) {
+    return await response.json();
+  }
+  return undefined;
+};
+export const getParagraphFormat = async siteId => {
+  let id = siteId;
+  if (!id) id = getSite().id;
+  const response = await fetch(`https://api.chayns.net/css/${id}/paragraphFormat`, {
+    method: 'GET'
+  });
+  if (response.status === 200) {
+    return await response.json();
+  }
+  return undefined;
+};
+//# sourceMappingURL=get.js.map

package/lib/esm/api/theme/get.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"get.js","names":["getSite","getDesignSettings","siteId","id","response","fetch","method","status","json","undefined","getParagraphFormat"],"sources":["../../../../src/api/theme/get.ts"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\n\nexport const getDesignSettings = async (siteId?: string): Promise<DesignSettings | undefined> => {\n let id = siteId;\n\n if (!id) id = getSite().id;\n\n const response = await fetch(`https://api.chayns.net/css/${id}/style/v2`, {\n method: 'GET',\n });\n\n if (response.status === 200) {\n return (await response.json()) as DesignSettings;\n }\n\n return undefined;\n};\n\nexport const getParagraphFormat = async (\n siteId?: string,\n): Promise<ParagraphFormat[] | undefined> => {\n let id = siteId;\n\n if (!id) id = getSite().id;\n\n const response = await fetch(`https://api.chayns.net/css/${id}/paragraphFormat`, {\n method: 'GET',\n });\n\n if (response.status === 200) {\n return (await response.json()) as ParagraphFormat[];\n }\n\n return undefined;\n};\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAGpC,OAAO,MAAMC,iBAAiB,GAAG,MAAOC,MAAe,IAA0C;EAC7F,IAAIC,EAAE,GAAGD,MAAM;EAEf,IAAI,CAACC,EAAE,EAAEA,EAAE,GAAGH,OAAO,CAAC,CAAC,CAACG,EAAE;EAE1B,MAAMC,QAAQ,GAAG,MAAMC,KAAK,CAAC,8BAA8BF,EAAE,WAAW,EAAE;IACtEG,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIF,QAAQ,CAACG,MAAM,KAAK,GAAG,EAAE;IACzB,OAAQ,MAAMH,QAAQ,CAACI,IAAI,CAAC,CAAC;EACjC;EAEA,OAAOC,SAAS;AACpB,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAG,MAC9BR,MAAe,IAC0B;EACzC,IAAIC,EAAE,GAAGD,MAAM;EAEf,IAAI,CAACC,EAAE,EAAEA,EAAE,GAAGH,OAAO,CAAC,CAAC,CAACG,EAAE;EAE1B,MAAMC,QAAQ,GAAG,MAAMC,KAAK,CAAC,8BAA8BF,EAAE,kBAAkB,EAAE;IAC7EG,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIF,QAAQ,CAACG,MAAM,KAAK,GAAG,EAAE;IACzB,OAAQ,MAAMH,QAAQ,CAACI,IAAI,CAAC,CAAC;EACjC;EAEA,OAAOC,SAAS;AACpB,CAAC","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';
-import { ColorMode, useSite, useStyleSettings } from 'chayns-api';
+import { ColorMode, useSite } from 'chayns-api';
 import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
+import { getDesignSettings, getParagraphFormat } from '../../api/theme/get';
 import { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';
 import { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';
@@ -17,6 +18,14 @@ const GlobalStyle = createGlobalStyle`
 `;
 export const ColorSchemeContext = /*#__PURE__*/createContext(undefined);
 export const useColorScheme = () => useContext(ColorSchemeContext);
+let useStyleSettings = () => undefined;
+try {
+  useStyleSettings =
+  // eslint-disable-next-line global-require,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-var-requires
+  require('chayns-api').useStyleSettings ?? useStyleSettings;
+} catch {
+  // Do nothing
+}
 const ColorSchemeProvider = _ref => {
   let {
     children,
@@ -24,6 +33,7 @@ const ColorSchemeProvider = _ref => {
     colorMode,
     cssVariables = {},
     secondaryColor,
+    siteId,
     style = {},
     paragraphFormat,
     designSettings,
@@ -39,24 +49,31 @@ const ColorSchemeProvider = _ref => {
     color: internalColor,
     colorMode: internalColorMode
   } = useSite() ?? {};
-  const {
-    designSettings: designSettingsValue,
-    paragraphFormats: paragraphFormatValue
-  } = useStyleSettings() ?? {};
+  // ToDo remove if this hook is no beta anymore
+  const styleSettings = useStyleSettings();
   useEffect(() => {
     if (designSettings) {
       setInternalDesignSettings(designSettings);
-    } else if (designSettingsValue) {
-      setInternalDesignSettings(designSettingsValue);
+    } else if (styleSettings?.designSettings) {
+      setInternalDesignSettings(styleSettings.designSettings);
+    } else if (!internalDesignSettings) {
+      void getDesignSettings(siteId).then(result => {
+        setInternalDesignSettings(result);
+      });
     }
-  }, [designSettings, designSettingsValue]);
+  }, [designSettings, internalDesignSettings, siteId, styleSettings?.designSettings]);
   useEffect(() => {
     if (paragraphFormat) {
       setInternalParagraphFormat(paragraphFormat);
-    } else if (paragraphFormatValue) {
-      setInternalParagraphFormat(paragraphFormatValue);
+    } else if (styleSettings?.paragraphFormats) {
+      setInternalParagraphFormat(styleSettings.paragraphFormats);
+    } else if (!internalParagraphFormat) {
+      void getParagraphFormat(siteId).then(result => {
+        setInternalParagraphFormat(result);
+      });
     }
-  }, [paragraphFormat, paragraphFormatValue]);
+  }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings?.paragraphFormats]);
   useEffect(() => {
     let newTheme = {};
     const availableColors = getAvailableColorList();

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useSite","useStyleSettings","React","createContext","useContext","useEffect","useMemo","useState","Helmet","createGlobalStyle","ThemeProvider","convertIconStyle","getFontSize","getHeadlineColorSelector","StyledColorSchemeProvider","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","paragraphFormat","designSettings","theme","colors","internalTheme","setInternalTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","designSettingsValue","paragraphFormats","paragraphFormatValue","newTheme","availableColors","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","themeResult","fontSize","contextValue","createElement","Provider","value","rel","href","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ColorMode, useSite, useStyleSettings } from 'chayns-api';\nimport React, {\n createContext,\n FC,\n ReactNode,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\n\nexport type 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 colors of the components\n /\n colors?: Theme;\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 general format settings.\n /\n paragraphFormat?: ParagraphFormat[];\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 The theme for the components\n */\n theme?: Theme;\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 .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`;\n\nexport interface ColorSchemeContextProps {\n designSettings: DesignSettings;\n paragraphFormat: ParagraphFormat[];\n theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps \| undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n style = {},\n paragraphFormat,\n designSettings,\n theme,\n colors,\n}) => {\n const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n const { designSettings: designSettingsValue, paragraphFormats: paragraphFormatValue } =\n useStyleSettings() ?? {};\n\n useEffect(() => {\n if (designSettings) {\n setInternalDesignSettings(designSettings);\n } else if (designSettingsValue) {\n setInternalDesignSettings(designSettingsValue);\n }\n }, [designSettings, designSettingsValue]);\n\n useEffect(() => {\n if (paragraphFormat) {\n setInternalParagraphFormat(paragraphFormat);\n } else if (paragraphFormatValue) {\n setInternalParagraphFormat(paragraphFormatValue);\n }\n }, [paragraphFormat, paragraphFormatValue]);\n\n useEffect(() => {\n let newTheme: Theme = {};\n\n const availableColors = getAvailableColorList();\n\n if (!colors \|\| !theme) {\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 if (!theme) {\n newTheme[colorName] = hexColor;\n }\n\n if (rgbColor) {\n if (!theme) {\n newTheme[`${colorName}-rgb`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n }\n });\n }\n\n if (!theme) {\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 if (internalParagraphFormat) {\n const { themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\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] = themeResult[key];\n });\n }\n\n newTheme.fontSize = getFontSize();\n } else {\n newTheme = theme;\n }\n\n setInternalTheme(newTheme);\n }, [\n color,\n colorMode,\n colors,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n theme,\n ]);\n\n const contextValue: ColorSchemeContextProps \| undefined = useMemo(() => {\n if (internalDesignSettings && internalParagraphFormat) {\n return {\n paragraphFormat: internalParagraphFormat,\n designSettings: internalDesignSettings,\n theme: internalTheme,\n };\n }\n\n return undefined;\n }, [internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n return (\n <ThemeProvider theme={internalTheme}>\n <ColorSchemeContext.Provider value={contextValue}>\n <Helmet>\n <link\n rel=\"stylesheet\"\n href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n />\n </Helmet>\n <StyledColorSchemeProvider\n className=\"color-scheme-provider\"\n style={{\n ...cssVariables,\n ...style,\n }}\n >\n {children}\n </StyledColorSchemeProvider>\n <GlobalStyle />\n </ColorSchemeContext.Provider>\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","ColorMode","useSite","React","createContext","useContext","useEffect","useMemo","useState","Helmet","createGlobalStyle","ThemeProvider","getDesignSettings","getParagraphFormat","convertIconStyle","getFontSize","getHeadlineColorSelector","StyledColorSchemeProvider","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","useStyleSettings","require","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","paragraphFormat","designSettings","theme","colors","internalTheme","setInternalTheme","internalDesignSettings","setInternalDesignSettings","internalParagraphFormat","setInternalParagraphFormat","internalColor","internalColorMode","styleSettings","then","result","paragraphFormats","newTheme","availableColors","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","themeResult","fontSize","contextValue","createElement","Provider","value","rel","href","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { ColorMode, useSite } from 'chayns-api';\nimport React, {\n createContext,\n FC,\n ReactNode,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport { Helmet } from 'react-helmet';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings, getParagraphFormat } from '../../api/theme/get';\nimport type { DesignSettings, ParagraphFormat } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, getFontSize, getHeadlineColorSelector } from '../../utils/font';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\n\nexport type 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 colors of the components\n /\n colors?: Theme;\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 general format settings.\n /\n paragraphFormat?: ParagraphFormat[];\n /\n The secondary hex color to be used for the children\n /\n secondaryColor?: string;\n /\n The site id of the page for which the design settings should be fetched\n /\n siteId?: string;\n /\n Additional styles set on the root element\n /\n style?: { [key: string]: string \| number };\n /\n The theme for the components\n */\n theme?: Theme;\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 .ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n`;\n\nexport interface ColorSchemeContextProps {\n designSettings: DesignSettings;\n paragraphFormat: ParagraphFormat[];\n theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps \| undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nlet useStyleSettings: () =>\n \| {\n paragraphFormats: ParagraphFormat[];\n designSettings: DesignSettings;\n }\n \| undefined = () => undefined;\n\ntry {\n useStyleSettings =\n // eslint-disable-next-line global-require,@typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-var-requires\n (require('chayns-api').useStyleSettings as () => {\n paragraphFormats: ParagraphFormat[];\n designSettings: DesignSettings;\n }) ?? useStyleSettings;\n} catch {\n // Do nothing\n}\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n paragraphFormat,\n designSettings,\n theme,\n colors,\n}) => {\n const [internalTheme, setInternalTheme] = useState<Theme>(theme ?? {});\n const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n const [internalParagraphFormat, setInternalParagraphFormat] = useState<ParagraphFormat[]>();\n\n // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n // ToDo remove if this hook is no beta anymore\n const styleSettings = useStyleSettings();\n\n useEffect(() => {\n if (designSettings) {\n setInternalDesignSettings(designSettings);\n } else if (styleSettings?.designSettings) {\n setInternalDesignSettings(styleSettings.designSettings);\n } else if (!internalDesignSettings) {\n void getDesignSettings(siteId).then((result) => {\n setInternalDesignSettings(result);\n });\n }\n }, [designSettings, internalDesignSettings, siteId, styleSettings?.designSettings]);\n\n useEffect(() => {\n if (paragraphFormat) {\n setInternalParagraphFormat(paragraphFormat);\n } else if (styleSettings?.paragraphFormats) {\n setInternalParagraphFormat(styleSettings.paragraphFormats);\n } else if (!internalParagraphFormat) {\n void getParagraphFormat(siteId).then((result) => {\n setInternalParagraphFormat(result);\n });\n }\n }, [internalParagraphFormat, paragraphFormat, siteId, styleSettings?.paragraphFormats]);\n\n useEffect(() => {\n let newTheme: Theme = {};\n\n const availableColors = getAvailableColorList();\n\n if (!colors \|\| !theme) {\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 if (!theme) {\n newTheme[colorName] = hexColor;\n }\n\n if (rgbColor) {\n if (!theme) {\n newTheme[`${colorName}-rgb`] =\n `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n }\n }\n }\n });\n }\n\n if (!theme) {\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 if (internalParagraphFormat) {\n const { themeResult } = getHeadlineColorSelector(internalParagraphFormat);\n\n // Update Theme\n Object.keys(themeResult).forEach((key) => {\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] = themeResult[key];\n });\n }\n\n newTheme.fontSize = getFontSize();\n } else {\n newTheme = theme;\n }\n\n setInternalTheme(newTheme);\n }, [\n color,\n colorMode,\n colors,\n internalColor,\n internalColorMode,\n internalDesignSettings,\n internalParagraphFormat,\n secondaryColor,\n theme,\n ]);\n\n const contextValue: ColorSchemeContextProps \| undefined = useMemo(() => {\n if (internalDesignSettings && internalParagraphFormat) {\n return {\n paragraphFormat: internalParagraphFormat,\n designSettings: internalDesignSettings,\n theme: internalTheme,\n };\n }\n\n return undefined;\n }, [internalDesignSettings, internalParagraphFormat, internalTheme]);\n\n return (\n <ThemeProvider theme={internalTheme}>\n <ColorSchemeContext.Provider value={contextValue}>\n <Helmet>\n <link\n rel=\"stylesheet\"\n href=\"https://api.chayns-static.space/font/NotoColorEmoji/v1/font.css\"\n />\n </Helmet>\n <StyledColorSchemeProvider\n className=\"color-scheme-provider\"\n style={{\n ...cssVariables,\n ...style,\n }}\n >\n {children}\n </StyledColorSchemeProvider>\n <GlobalStyle />\n </ColorSchemeContext.Provider>\n </ThemeProvider>\n );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/context-menu/ContextMenu.js CHANGED Viewed

@@ -39,7 +39,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
   useEffect(() => {
     if (contextMenuRef.current && !container) {
       const el = contextMenuRef.current;
-      const element = el.closest('.dialog-inner') || el.closest('.page-provider') || el.closest('.tapp') || el.closest('body');
+      const element = el.closest('.dialog-inner, .page-provider, .tapp, body');
       setNewContainer(element);
     }
   }, [container]);
@@ -90,8 +90,10 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
         top,
         left
       } = newContainer.getBoundingClientRect();
-      const x = childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;
-      const y = childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;
+      const zoomX = width / newContainer.offsetWidth;
+      const zoomY = height / newContainer.offsetHeight;
+      const x = (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;
+      const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop;
       setInternalCoordinates({
         x,
         y
@@ -109,7 +111,7 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
       setIsContentShown(true);
     }
-  }, [isInDialog, items, newContainer]);
+  }, [items, newContainer]);
   const handleClick = useCallback(event => {
     event.preventDefault();
     event.stopPropagation();

package/lib/esm/components/context-menu/ContextMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","current","el","element","closest","Element","handleHide","handleShow","isTouch","result","type","SELECT","buttons","list","map","_ref2","index","text","name","id","icon","open","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","window","scrollX","scrollY","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","document","addEventListener","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\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 { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> \| void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /*\n Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n /\n alignment?: ContextMenuAlignment;\n /\n The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n /\n children?: ReactNode;\n /\n The element where the content of the `ContextMenu` should be rendered via React Portal.\n /\n container?: Element;\n /\n Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n /\n coordinates?: ContextMenuCoordinates;\n /\n Whether the ContextMenu is inside a dialog.\n /\n isInDialog?: boolean;\n /\n The items that will be displayed in the content of the `ContextMenu`.\n /\n items: ContextMenuItem[];\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 closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container,\n coordinates,\n isInDialog = false,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element \| null>(container ?? null);\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n useEffect(() => {\n if (contextMenuRef.current && !container) {\n const el = contextMenuRef.current as HTMLElement;\n\n const element =\n el.closest('.dialog-inner') \|\|\n el.closest('.page-provider') \|\|\n el.closest('.tapp') \|\|\n el.closest('body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if(container instanceof Element){\n setNewContainer(container)\n }\n }, [container]);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n if (!newContainer) {\n return;\n }\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n const x =\n childrenLeft + (isInDialog ? 0 : window.scrollX) + childrenWidth / 2 - left;\n const y =\n childrenTop + (isInDialog ? 0 : window.scrollY) + childrenHeight / 2 - top;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [isInDialog, items, newContainer]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\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, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","getIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","newContainer","setNewContainer","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","current","el","element","closest","Element","handleHide","handleShow","isTouch","result","type","SELECT","buttons","list","map","_ref2","index","text","name","id","icon","open","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","document","addEventListener","window","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\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 { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> \| void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /*\n Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n /\n alignment?: ContextMenuAlignment;\n /\n The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n /\n children?: ReactNode;\n /\n The element where the content of the `ContextMenu` should be rendered via React Portal.\n /\n container?: Element;\n /\n Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n /\n coordinates?: ContextMenuCoordinates;\n /\n Whether the ContextMenu is inside a dialog.\n /\n isInDialog?: boolean;\n /\n The items that will be displayed in the content of the `ContextMenu`.\n /\n items: ContextMenuItem[];\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 closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container,\n coordinates,\n isInDialog = false,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element \| null>(container ?? null);\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n useEffect(() => {\n if (contextMenuRef.current && !container) {\n const el = contextMenuRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n if (!newContainer) {\n return;\n }\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [items, newContainer]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\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, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/page-provider/PageProvider.js CHANGED Viewed

@@ -16,6 +16,7 @@ const PageProvider = _ref => {
     colorMode,
     cssVariables = {},
     secondaryColor,
+    siteId,
     style = {},
     designSettings,
     shouldRemovePadding,
@@ -34,6 +35,7 @@ const PageProvider = _ref => {
     color: color,
     secondaryColor: secondaryColor,
     colorMode: colorMode,
+    siteId: siteId,
     style: shouldUseUsableHeight ? {
       ...style,
       height: '100%'

package/lib/esm/components/page-provider/PageProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageProvider.js","names":["getEnvironment","RuntimeEnviroment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","runtimeEnvironment","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","usableHeight","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { getEnvironment, RuntimeEnviroment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /*\n Whether the padding should be removed.\n /\n shouldRemovePadding?: boolean;\n /\n Whether the usable height should be used.\n /\n shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n , ::before, ::after {\n box-sizing: border-box;\n }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n style = {},\n designSettings,\n shouldRemovePadding,\n shouldUseUsableHeight,\n}) => {\n const { runtimeEnvironment } = getEnvironment();\n const shouldUsePadding =\n !shouldRemovePadding &&\n ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n runtimeEnvironment as number,\n );\n\n const usableHeight = useUsableHeight();\n\n return (\n <StyledPageProvider\n className=\"page-provider\"\n $shouldUsePadding={shouldUsePadding}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n designSettings={designSettings}\n cssVariables={cssVariables}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,iBAAiB,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;AAa1D,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGC,IAAA,~~IAUtC~~;EAAA,~~IAVuC~~;IACzCC,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,KAAK,GAAG,CAAC,CAAC;IACVC,cAAc;IACdC,mBAAmB;IACnBC;EACJ,CAAC,~~GAAAT~~,IAAA;EACG,MAAM;~~IAAEU~~;EAAmB,CAAC,~~GAAGnB~~,cAAc,CAAC,CAAC;EAC/C,~~MAAMoB~~,gBAAgB,GAClB,CAACH,mBAAmB,IACpB,CAAC,~~CAAChB~~,iBAAiB,~~CAACoB~~,cAAc,~~EAAEpB~~,iBAAiB,~~CAACqB~~,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9EJ,kBACJ,CAAC;EAEL,MAAMK,YAAY,~~GAAGpB~~,eAAe,CAAC,CAAC;EAEtC,oBACIF,KAAA,~~CAAAuB~~,aAAA,~~CAACnB~~,kBAAkB;~~IACfoB~~,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEP,gBAAiB;IACpCQ,aAAa,EAAEV,qBAAqB,GAAGM,YAAY,GAAGK;EAAU,~~gBAEhE3B~~,KAAA,~~CAAAuB~~,aAAA,~~CAACpB~~,mBAAmB;IAChBM,KAAK,EAAEA,KAAM;IACbG,cAAc,EAAEA,cAAe;IAC/BF,SAAS,EAAEA,SAAU;IACrBG,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEe,MAAM,EAAE;IAAO,CAAC,GAAGf,KAAM;IACpEC,cAAc,EAAEA,cAAe;IAC/BH,YAAY,EAAEA;EAAa,GAE1BH,QACgB,CAAC,eACtBR,KAAA,~~CAAAuB~~,aAAA,~~CAAClB~~,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,~~CAACuB~~,WAAW,GAAG,cAAc;AAEzC,~~eAAevB~~,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"PageProvider.js","names":["getEnvironment","RuntimeEnviroment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","runtimeEnvironment","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","usableHeight","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { getEnvironment, RuntimeEnviroment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /*\n Whether the padding should be removed.\n /\n shouldRemovePadding?: boolean;\n /\n Whether the usable height should be used.\n /\n shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n , ::before, ::after {\n box-sizing: border-box;\n }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n children,\n color,\n colorMode,\n cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n designSettings,\n shouldRemovePadding,\n shouldUseUsableHeight,\n}) => {\n const { runtimeEnvironment } = getEnvironment();\n const shouldUsePadding =\n !shouldRemovePadding &&\n ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n runtimeEnvironment as number,\n );\n\n const usableHeight = useUsableHeight();\n\n return (\n <StyledPageProvider\n className=\"page-provider\"\n $shouldUsePadding={shouldUsePadding}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n siteId={siteId}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n designSettings={designSettings}\n cssVariables={cssVariables}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,iBAAiB,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;AAa1D,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGC,IAAA,IAWtC;EAAA,IAXuC;IACzCC,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,MAAM;IACNC,KAAK,GAAG,CAAC,CAAC;IACVC,cAAc;IACdC,mBAAmB;IACnBC;EACJ,CAAC,GAAAV,IAAA;EACG,MAAM;IAAEW;EAAmB,CAAC,GAAGpB,cAAc,CAAC,CAAC;EAC/C,MAAMqB,gBAAgB,GAClB,CAACH,mBAAmB,IACpB,CAAC,CAACjB,iBAAiB,CAACqB,cAAc,EAAErB,iBAAiB,CAACsB,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9EJ,kBACJ,CAAC;EAEL,MAAMK,YAAY,GAAGrB,eAAe,CAAC,CAAC;EAEtC,oBACIF,KAAA,CAAAwB,aAAA,CAACpB,kBAAkB;IACfqB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEP,gBAAiB;IACpCQ,aAAa,EAAEV,qBAAqB,GAAGM,YAAY,GAAGK;EAAU,gBAEhE5B,KAAA,CAAAwB,aAAA,CAACrB,mBAAmB;IAChBM,KAAK,EAAEA,KAAM;IACbG,cAAc,EAAEA,cAAe;IAC/BF,SAAS,EAAEA,SAAU;IACrBG,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEe,MAAM,EAAE;IAAO,CAAC,GAAGf,KAAM;IACpEC,cAAc,EAAEA,cAAe;IAC/BJ,YAAY,EAAEA;EAAa,GAE1BH,QACgB,CAAC,eACtBR,KAAA,CAAAwB,aAAA,CAACnB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAACwB,WAAW,GAAG,cAAc;AAEzC,eAAexB,YAAY","ignoreList":[]}

package/lib/esm/components/popup/Popup.js CHANGED Viewed

@@ -42,7 +42,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
   useEffect(() => {
     if (popupRef.current && !container) {
       const el = popupRef.current;
-      const element = el.closest('.dialog-inner') || el.closest('.page-provider') || el.closest('.tapp') || el.closest('body');
+      const element = el.closest('.dialog-inner, .page-provider, .tapp, body');
       setNewContainer(element);
     }
   }, [container]);