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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (961) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_contextMenu","_environment","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContextMenu","forwardRef","alignment","children","createElement","icons","size","container","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","ref","internalCoordinates","setInternalCoordinates","useState","x","y","newContainer","setNewContainer","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","useEffect","current","el","element","closest","Element","handleHide","useCallback","handleShow","isTouch","getIsTouch","result","createDialog","type","DialogType","SELECT","buttons","list","map","text","index","name","id","icon","open","_items$result$","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","_contextMenuContentRe","contains","target","useImperativeHandle","hide","show","document","addEventListener","window","removeEventListener","createPortal","AnimatePresence","initial","key","Fragment","StyledContextMenu","className","displayName","_default","exports"],"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":[]}
1	+ {"version":3,"file":"ContextMenu.js","names":["_chaynsApi","require","_react","_react2","_interopRequireWildcard","_reactDom","_uuid","_environment","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","_ContextMenu2","_ContextMenu3","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ContextMenu","forwardRef","alignment","children","createElement","icons","size","container","coordinates","headline","items","onHide","onShow","shouldCloseOnPopupClick","shouldDisableClick","shouldHidePopupArrow","shouldShowHoverEffect","zIndex","ref","internalCoordinates","setInternalCoordinates","useState","x","y","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","newContainer","setNewContainer","focusedIndex","setFocusedIndex","getDefaultFocusedIndex","isContentShown","setIsContentShown","portal","setPortal","isHovered","setIsHovered","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","isTouch","useIsTouch","useEffect","current","el","element","closest","Element","handleHide","useCallback","handleKey","length","key","preventDefault","prev","item","onClick","document","addEventListener","removeEventListener","handleShow","result","createDialog","type","DialogType","SELECT","buttons","list","map","text","isSelected","index","name","id","icon","isValidElement","undefined","open","_items$result$","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","event","stopPropagation","handleDocumentClick","_contextMenuContentRe","contains","target","useImperativeHandle","hide","show","window","createPortal","AnimatePresence","initial","onKeySelect","onMouseEnter","onMouseLeave","Fragment","StyledContextMenu","className","$isActive","$shouldAddHoverEffect","displayName","_default","exports"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n forwardRef,\n isValidElement,\n MouseEventHandler,\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 { useIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\nimport {\n ContextMenuAlignment,\n type ContextMenuCoordinates,\n type ContextMenuProps,\n type ContextMenuRef,\n} from './ContextMenu.types';\nimport { SelectDialogResult } from '../../types/general';\nimport { getDefaultFocusedIndex } from './ContextMenu.utils';\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container,\n coordinates,\n headline,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n shouldDisableClick = false,\n shouldHidePopupArrow = false,\n shouldShowHoverEffect = false,\n zIndex = 20,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [newContainer, setNewContainer] = useState(container ?? null);\n const [focusedIndex, setFocusedIndex] = useState(getDefaultFocusedIndex(items));\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n const [isHovered, setIsHovered] = useState(false);\n\n const uuid = useUuid();\n\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n const isTouch = useIsTouch();\n\n useEffect(() => {\n if (isContentShown) {\n setFocusedIndex(getDefaultFocusedIndex(items));\n }\n }, [isContentShown, items]);\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 useEffect(() => {\n if (!isContentShown) return () => {};\n\n const handleKey = (e: KeyboardEvent) => {\n if (items.length === 0 \|\| isHovered) return;\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n setFocusedIndex((prev) => (prev >= items.length - 1 ? 0 : prev + 1));\n }\n\n if (e.key === 'ArrowUp') {\n e.preventDefault();\n setFocusedIndex((prev) => (prev <= 0 ? items.length - 1 : prev - 1));\n }\n\n if (e.key === 'Enter') {\n e.preventDefault();\n const item = items[focusedIndex];\n if (item) {\n void item.onClick();\n\n if (shouldCloseOnPopupClick) {\n handleHide();\n }\n }\n }\n\n if (e.key === 'Escape') {\n handleHide();\n }\n };\n\n document.addEventListener('keydown', handleKey);\n\n return () => document.removeEventListener('keydown', handleKey);\n }, [isContentShown, items, focusedIndex, handleHide, shouldCloseOnPopupClick, isHovered]);\n\n const handleShow = useCallback(async () => {\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text, isSelected }, index) => ({\n name: text,\n id: index,\n isSelected,\n icon: isValidElement(icons)\n ? undefined\n : (icons as string[] \| undefined)?.[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 }, [isTouch, items, newContainer]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n if (shouldDisableClick) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow, shouldDisableClick],\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 zIndex={zIndex}\n headline={headline}\n shouldHidePopupArrow={shouldHidePopupArrow}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n focusedIndex={focusedIndex}\n onKeySelect={(index) => {\n const item = items[index];\n if (item) {\n void item.onClick();\n handleHide();\n }\n }}\n onMouseEnter={() => {\n setIsHovered(true);\n setFocusedIndex(-1);\n }}\n onMouseLeave={() => {\n setIsHovered(false);\n }}\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 zIndex,\n shouldHidePopupArrow,\n headline,\n focusedIndex,\n handleHide,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n $isActive={isContentShown && shouldShowHoverEffect}\n $shouldAddHoverEffect={!isTouch && shouldShowHoverEffect}\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/cjs/components/context-menu/ContextMenu.styles.js CHANGED Viewed

@@ -4,12 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledContextMenu = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledContextMenu = exports.StyledContextMenu = _styledComponents.default.span`
     align-items: center;
+    background-color: ${({
+  $isActive,
+  theme
+}) => $isActive ? theme['201'] : 'transparent'};
+    border-radius: 3px;
     cursor: pointer;
     display: flex;
     padding: 6px;
+    transition: background-color 0.3s ease;
+    ${({
+  $shouldAddHoverEffect,
+  theme
+}) => $shouldAddHoverEffect && (0, _styledComponents.css)`
+            &:hover {
+                background-color: ${theme['201']};
+            }
+        `}
 `;
 //# sourceMappingURL=ContextMenu.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.styles.js","names":["_styledComponents","~~_interopRequireDefault~~","require","e","__esModule","default","StyledContextMenu","exports","styled","span"],"sources":["../../../../src/components/context-menu/ContextMenu.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledContextMenu = styled.span`\n align-items: center;\n cursor: pointer;\n display: flex;\n padding: 6px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,~~sBAAA~~,CAAAC,OAAA;~~AAAuC~~,SAAAD,~~uBAAAE~~,CAAA,~~WAAAA~~,CAAA,IAAAA,CAAA,~~CAAAC~~,UAAA,~~GAAAD~~,CAAA,~~KAAAE~~,OAAA,~~EAAAF~~,CAAA;~~AAEhC~~,~~MAAMG~~,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,~~IAAI~~;~~AAC5C~~;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ContextMenu.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledContextMenu","exports","styled","span","$isActive","theme","$shouldAddHoverEffect","css"],"sources":["../../../../src/components/context-menu/ContextMenu.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContextMenuProps = WithTheme<{\n $isActive: boolean;\n $shouldAddHoverEffect: boolean;\n}>;\n\nexport const StyledContextMenu = styled.span<StyledContextMenuProps>`\n align-items: center;\n background-color: ${({ $isActive, theme }: StyledContextMenuProps) =>\n $isActive ? theme['201'] : 'transparent'};\n border-radius: 3px;\n cursor: pointer;\n display: flex;\n padding: 6px;\n transition: background-color 0.3s ease;\n\n ${({ $shouldAddHoverEffect, theme }: StyledContextMenuProps) =>\n $shouldAddHoverEffect &&\n css`\n &:hover {\n background-color: ${theme['201']};\n }\n `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAQzC,MAAMkB,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,IAA4B;AACpE;AACA,wBAAwB,CAAC;EAAEC,SAAS;EAAEC;AAA8B,CAAC,KAC7DD,SAAS,GAAGC,KAAK,CAAC,KAAK,CAAC,GAAG,aAAa;AAChD;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,qBAAqB;EAAED;AAA8B,CAAC,KACvDC,qBAAqB,IACrB,IAAAC,qBAAG;AACX;AACA,oCAAoCF,KAAK,CAAC,KAAK,CAAC;AAChD;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/cjs/components/context-menu/ContextMenu.types.js ADDED Viewed

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContextMenuAlignment = void 0;
+/**
+ * Enum representing the possible alignments for the context menu.
+ */
+let ContextMenuAlignment = exports.ContextMenuAlignment = /*#__PURE__*/function (ContextMenuAlignment) {
+  ContextMenuAlignment[ContextMenuAlignment["TopLeft"] = 0] = "TopLeft";
+  ContextMenuAlignment[ContextMenuAlignment["BottomLeft"] = 1] = "BottomLeft";
+  ContextMenuAlignment[ContextMenuAlignment["TopRight"] = 2] = "TopRight";
+  ContextMenuAlignment[ContextMenuAlignment["BottomRight"] = 3] = "BottomRight";
+  ContextMenuAlignment[ContextMenuAlignment["TopCenter"] = 4] = "TopCenter";
+  ContextMenuAlignment[ContextMenuAlignment["BottomCenter"] = 5] = "BottomCenter";
+  return ContextMenuAlignment;
+}({});
+/**
+ * Type representing the coordinates for positioning the context menu.
+ */
+/**
+ * Type representing an item in the context menu.
+ */
+/**
+ * Props for the ContextMenu component.
+ */
+/**
+ * Ref interface for the ContextMenu component.
+ */
+//# sourceMappingURL=ContextMenu.types.js.map

package/lib/cjs/components/context-menu/ContextMenu.types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ContextMenu.types.js","names":["ContextMenuAlignment","exports"],"sources":["../../../../src/components/context-menu/ContextMenu.types.ts"],"sourcesContent":["import type { MouseEvent, ReactNode } from 'react';\n\n/**\n * Enum representing the possible alignments for the context menu.\n */\nexport enum ContextMenuAlignment {\n TopLeft,\n BottomLeft,\n TopRight,\n BottomRight,\n TopCenter,\n BottomCenter,\n}\n\n/**\n * Type representing the coordinates for positioning the context menu.\n */\nexport type ContextMenuCoordinates = {\n /** The x-coordinate. */\n x: number;\n /** The y-coordinate. */\n y: number;\n};\n\n/**\n * Type representing an item in the context menu.\n */\nexport type ContextMenuItem = {\n /** Optional icons for the item. Can be strings or React nodes. */\n icons?: string[] | ReactNode;\n /** Whether the item is selected. */\n isSelected?: boolean;\n /** Unique key for the item. */\n key: string;\n /** Function called when the item is clicked. */\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n /** Whether to show a spacer after the item. */\n shouldShowSpacer?: boolean;\n /** The text displayed for the item. */\n text: string;\n};\n\n/**\n * Props for the ContextMenu component.\n */\nexport type ContextMenuProps = {\n /**\n * Context menu alignment\n * @description Optional custom alignment used instead of calculating it using the alignment\n * within the page. The available alignments can be taken from the ContextMenuAlignment enum.\n * @example alignment={ContextMenuAlignment.TopLeft}\n * @optional\n */\n alignment?: ContextMenuAlignment;\n /**\n * Children element\n * @description The element over which the content of the ContextMenu should be displayed.\n * @example children={<Icon icons={['fa fa-paper-clip']} />\n * @default <Icon icons={['ts-ellipsis_v']} size={18} />\n * @optional\n */\n children?: ReactNode;\n /**\n * Container element\n * @description The element where the content of the ContextMenu should be rendered via React Portal.\n * @example container={document.body}\n * @optional\n */\n container?: Element;\n /**\n * Custom coordinates\n * @description Optional own coordinates to be used instead of calculating the alignment based\n * on the alignment of the children.\n * @example coordinates={{ x: 100, y: 200 }}\n * @optional\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * Context menu headline\n * @description The headline of the context menu. If not provided, no headline will be displayed.\n * @example headline=\"Options\"\n * @optional\n */\n headline?: string;\n /**\n * Menu items\n * @description The items that will be displayed in the content of the ContextMenu. Custom icon\n * elements only will be displayed on desktop devices.\n * @example items={[{ key: '1', text: 'Option 1', onClick: () => {} }]}\n */\n items: ContextMenuItem[];\n /**\n * Hide callback function\n * @description Function to be executed when the content of the Context menu has been hidden.\n * @example onHide={() => console.log('Menu hidden')}\n * @optional\n */\n onHide?: VoidFunction;\n /**\n * Show callback function\n * @description Function to be executed when the content of the Context menu has been shown.\n * @example onShow={() => console.log('Menu shown')}\n * @optional\n */\n onShow?: VoidFunction;\n /**\n * Close on popup click flag\n * @description Whether the popup should be closed if it is clicked.\n * @default true\n * @optional\n */\n shouldCloseOnPopupClick?: boolean;\n /**\n * Disable click flag\n * @description Whether the click should be disabled.\n * @default false\n * @optional\n */\n shouldDisableClick?: boolean;\n /**\n * Hide popup arrow flag\n * @description Whether the arrow of the popup should be hidden.\n * @default false\n * @optional\n */\n shouldHidePopupArrow?: boolean;\n /**\n * Show hover effect flag\n * @description Whether the hover effect should be shown.\n * @default false\n * @optional\n */\n shouldShowHoverEffect?: boolean;\n /**\n * Z-index value\n * @description The z-index of the popup.\n * @example zIndex={100}\n * @default 20\n * @optional\n */\n zIndex?: number;\n};\n\n/**\n * Ref interface for the ContextMenu component.\n */\nexport interface ContextMenuRef {\n /** Hides the context menu. */\n hide: VoidFunction;\n /** Shows the context menu. */\n show: VoidFunction;\n}\n"],"mappings":";;;;;;AAEA;AACA;AACA;AAFA,IAGYA,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,0BAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA;AAShC;AACA;AACA;AAQA;AACA;AACA;AAgBA;AACA;AACA;AAmGA;AACA;AACA","ignoreList":[]}

package/lib/cjs/components/context-menu/ContextMenu.utils.js ADDED Viewed

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultFocusedIndex = void 0;
+const getDefaultFocusedIndex = items => items.findIndex(item => item.isSelected);
+exports.getDefaultFocusedIndex = getDefaultFocusedIndex;
+//# sourceMappingURL=ContextMenu.utils.js.map

package/lib/cjs/components/context-menu/ContextMenu.utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ContextMenu.utils.js","names":["getDefaultFocusedIndex","items","findIndex","item","isSelected","exports"],"sources":["../../../../src/components/context-menu/ContextMenu.utils.ts"],"sourcesContent":["import type { ContextMenuItem } from './ContextMenu.types';\n\nexport const getDefaultFocusedIndex = (items: ContextMenuItem[]): number =>\n items.findIndex((item) => item.isSelected);\n"],"mappings":";;;;;;AAEO,MAAMA,sBAAsB,GAAIC,KAAwB,IAC3DA,KAAK,CAACC,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACC,UAAU,CAAC;AAACC,OAAA,CAAAL,sBAAA,GAAAA,sBAAA","ignoreList":[]}

package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js CHANGED Viewed

@@ -5,22 +5,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _contextMenu = require("../../../types/contextMenu");
 var _Icon = _interopRequireDefault(require("../../icon/Icon"));
 var _ContextMenuContent = require("./ContextMenuContent.styles");
+var _ContextMenu = require("../ContextMenu.types");
 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; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef(({
   alignment,
   coordinates,
-  items
+  items,
+  zIndex,
+  shouldHidePopupArrow,
+  headline,
+  onKeySelect,
+  focusedIndex,
+  onMouseEnter,
+  onMouseLeave
 }, ref) => {
-  const isBottomLeftAlignment = alignment === _contextMenu.ContextMenuAlignment.BottomLeft;
-  const isTopLeftAlignment = alignment === _contextMenu.ContextMenuAlignment.TopLeft;
-  const isTopRightAlignment = alignment === _contextMenu.ContextMenuAlignment.TopRight;
-  const isTopCenterAlignment = alignment === _contextMenu.ContextMenuAlignment.TopCenter;
-  const isBottomCenterAlignment = alignment === _contextMenu.ContextMenuAlignment.BottomCenter;
+  const isBottomLeftAlignment = alignment === _ContextMenu.ContextMenuAlignment.BottomLeft;
+  const isTopLeftAlignment = alignment === _ContextMenu.ContextMenuAlignment.TopLeft;
+  const isTopRightAlignment = alignment === _ContextMenu.ContextMenuAlignment.TopRight;
+  const isTopCenterAlignment = alignment === _ContextMenu.ContextMenuAlignment.TopCenter;
+  const isBottomCenterAlignment = alignment === _ContextMenu.ContextMenuAlignment.BottomCenter;
   const percentageOffsetX = (0, _react.useMemo)(() => {
     if (isBottomLeftAlignment || isTopLeftAlignment) {
       return -100;
@@ -42,6 +48,43 @@ const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef(({
   const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -100 : 0;
   const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -21 : 21;
   const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;
+  const content = (0, _react.useMemo)(() => items.map(({
+    onClick,
+    key,
+    text,
+    icons,
+    shouldShowSpacer
+  }, index) => {
+    const isFocused = index === focusedIndex;
+    let iconElement = null;
+    if (/*#__PURE__*/(0, _react.isValidElement)(icons)) {
+      iconElement = icons;
+    } else if (Array.isArray(icons) && icons.length > 0) {
+      iconElement = /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        icons: icons
+      }));
+    }
+    return /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItem, {
+      key: `context-menu-item-${key}`,
+      "data-index": index
+    }, /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemWrapper, {
+      key: key,
+      onClick: event => {
+        event.preventDefault();
+        event.stopPropagation();
+        void onClick(event);
+      },
+      tabIndex: 0,
+      $shouldHidePopupArrow: shouldHidePopupArrow,
+      $isFocused: isFocused,
+      onKeyDown: e => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onKeySelect(index);
+        }
+      }
+    }, iconElement, /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemText, null, text)), shouldShowSpacer && /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemSpacer, null));
+  }), [items, focusedIndex, shouldHidePopupArrow, onKeySelect]);
   return /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledMotionContextMenuContent, {
     animate: {
       opacity: 1,
@@ -56,6 +99,8 @@ const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef(({
       y: exitAndInitialY
     },
     $position: alignment,
+    $shouldHidePopupArrow: shouldHidePopupArrow,
+    $zIndex: zIndex,
     ref: ref,
     style: {
       left: coordinates.x,
@@ -72,22 +117,10 @@ const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef(({
                     translateX(${anchorOffsetX}px)
                     translateY(${anchorOffsetY}px)
                     translateY(${y})
-                `
-  }, items.map(({
-    icons,
-    key,
-    onClick,
-    text
-  }) => /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItem, {
-    key: key,
-    onClick: event => {
-      event.preventDefault();
-      event.stopPropagation();
-      void onClick(event);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    icons: icons
-  })), /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemText, null, text))));
+                `,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, headline && /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentHeadline, null, headline), content);
 });
 ContextMenuContent.displayName = 'ContextMenuContent';
 var _default = exports.default = ContextMenuContent;

package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuContent.js","names":["_react","_interopRequireWildcard","require","_contextMenu","_Icon","_interopRequireDefault","_ContextMenuContent","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContextMenuContent","React","forwardRef","alignment","coordinates","items","ref","isBottomLeftAlignment","ContextMenuAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","isTopCenterAlignment","TopCenter","isBottomCenterAlignment","BottomCenter","percentageOffsetX","useMemo","anchorOffsetX","percentageOffsetY","anchorOffsetY","exitAndInitialY","createElement","StyledMotionContextMenuContent","animate","opacity","y","exit","initial","$position","style","left","x","top","transition","ease","transformTemplate","map","icons","key","onClick","text","StyledContextMenuContentItem","event","preventDefault","stopPropagation","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText","displayName","_default","exports"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport Icon from '../../icon/Icon';\nimport type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';\nimport {\n StyledContextMenuContentItem,\n StyledContextMenuContentItemIconWrapper,\n StyledContextMenuContentItemText,\n StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\n\ntype ContextMenuContentProps = {\n alignment: ContextMenuAlignment;\n coordinates: ContextMenuCoordinates;\n items: ContextMenuItem[];\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n ({ alignment, coordinates, items }, ref) => {\n const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n const isTopCenterAlignment = alignment === ContextMenuAlignment.TopCenter;\n const isBottomCenterAlignment = alignment === ContextMenuAlignment.BottomCenter;\n\n const percentageOffsetX = useMemo(() => {\n if (isBottomLeftAlignment \|\| isTopLeftAlignment) {\n return -100;\n }\n\n if (isBottomCenterAlignment \|\| isTopCenterAlignment) {\n return -50;\n }\n\n return 0;\n }, [\n isBottomCenterAlignment,\n isBottomLeftAlignment,\n isTopCenterAlignment,\n isTopLeftAlignment,\n ]);\n\n const anchorOffsetX = useMemo(() => {\n if (isBottomLeftAlignment \|\| isTopLeftAlignment) {\n return 15;\n }\n\n if (isBottomCenterAlignment \|\| isTopCenterAlignment) {\n return 0;\n }\n\n return -15;\n }, [\n isBottomCenterAlignment,\n isBottomLeftAlignment,\n isTopCenterAlignment,\n isTopLeftAlignment,\n ]);\n\n const percentageOffsetY =\n isTopRightAlignment \|\| isTopLeftAlignment \|\| isTopCenterAlignment ? -100 : 0;\n\n const anchorOffsetY =\n isTopRightAlignment \|\| isTopLeftAlignment \|\| isTopCenterAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopLeftAlignment \|\| isTopRightAlignment ? -16 : 16;\n\n return (\n <StyledMotionContextMenuContent\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n ref={ref}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ ease: 'anticipate' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n {items.map(({ icons, key, onClick, text }) => (\n <StyledContextMenuContentItem\n key={key}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void onClick(event);\n }}\n >\n <StyledContextMenuContentItemIconWrapper>\n <Icon icons={icons} />\n </StyledContextMenuContentItemIconWrapper>\n <StyledContextMenuContentItemText>{text}</StyledContextMenuContentItemText>\n </StyledContextMenuContentItem>\n ))}\n </StyledMotionContextMenuContent>\n );\n },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ContextMenuContent.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ContextMenuContent","React","forwardRef","alignment","coordinates","items","zIndex","shouldHidePopupArrow","headline","onKeySelect","focusedIndex","onMouseEnter","onMouseLeave","ref","isBottomLeftAlignment","ContextMenuAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","isTopCenterAlignment","TopCenter","isBottomCenterAlignment","BottomCenter","percentageOffsetX","useMemo","anchorOffsetX","percentageOffsetY","anchorOffsetY","exitAndInitialY","content","map","onClick","key","text","icons","shouldShowSpacer","index","isFocused","iconElement","isValidElement","Array","isArray","length","createElement","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItem","StyledContextMenuContentItemWrapper","event","preventDefault","stopPropagation","tabIndex","$shouldHidePopupArrow","$isFocused","onKeyDown","StyledContextMenuContentItemText","StyledContextMenuContentItemSpacer","StyledMotionContextMenuContent","animate","opacity","y","exit","initial","$position","$zIndex","style","left","x","top","transition","ease","transformTemplate","StyledContextMenuContentHeadline","displayName","_default","exports"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React, { isValidElement, useMemo } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n StyledContextMenuContentHeadline,\n StyledContextMenuContentItem,\n StyledContextMenuContentItemIconWrapper,\n StyledContextMenuContentItemSpacer,\n StyledContextMenuContentItemText,\n StyledContextMenuContentItemWrapper,\n StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\nimport {\n ContextMenuAlignment,\n type ContextMenuCoordinates,\n type ContextMenuItem,\n} from '../ContextMenu.types';\n\ntype ContextMenuContentProps = {\n alignment: ContextMenuAlignment;\n coordinates: ContextMenuCoordinates;\n items: ContextMenuItem[];\n shouldHidePopupArrow: boolean;\n headline?: string;\n zIndex: number;\n focusedIndex: number;\n onKeySelect: (index: number) => void;\n onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n (\n {\n alignment,\n coordinates,\n items,\n zIndex,\n shouldHidePopupArrow,\n headline,\n onKeySelect,\n focusedIndex,\n onMouseEnter,\n onMouseLeave,\n },\n ref,\n ) => {\n const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n const isTopCenterAlignment = alignment === ContextMenuAlignment.TopCenter;\n const isBottomCenterAlignment = alignment === ContextMenuAlignment.BottomCenter;\n\n const percentageOffsetX = useMemo(() => {\n if (isBottomLeftAlignment \|\| isTopLeftAlignment) {\n return -100;\n }\n\n if (isBottomCenterAlignment \|\| isTopCenterAlignment) {\n return -50;\n }\n\n return 0;\n }, [\n isBottomCenterAlignment,\n isBottomLeftAlignment,\n isTopCenterAlignment,\n isTopLeftAlignment,\n ]);\n\n const anchorOffsetX = useMemo(() => {\n if (isBottomLeftAlignment \|\| isTopLeftAlignment) {\n return 15;\n }\n\n if (isBottomCenterAlignment \|\| isTopCenterAlignment) {\n return 0;\n }\n\n return -15;\n }, [\n isBottomCenterAlignment,\n isBottomLeftAlignment,\n isTopCenterAlignment,\n isTopLeftAlignment,\n ]);\n\n const percentageOffsetY =\n isTopRightAlignment \|\| isTopLeftAlignment \|\| isTopCenterAlignment ? -100 : 0;\n\n const anchorOffsetY =\n isTopRightAlignment \|\| isTopLeftAlignment \|\| isTopCenterAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopLeftAlignment \|\| isTopRightAlignment ? -16 : 16;\n\n const content = useMemo(\n () =>\n items.map(({ onClick, key, text, icons, shouldShowSpacer }, index) => {\n const isFocused = index === focusedIndex;\n\n let iconElement = null;\n\n if (isValidElement(icons)) {\n iconElement = icons;\n } else if (Array.isArray(icons) && icons.length > 0) {\n iconElement = (\n <StyledContextMenuContentItemIconWrapper>\n <Icon icons={icons} />\n </StyledContextMenuContentItemIconWrapper>\n );\n }\n\n return (\n <StyledContextMenuContentItem\n key={`context-menu-item-${key}`}\n data-index={index}\n >\n <StyledContextMenuContentItemWrapper\n key={key}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n void onClick(event);\n }}\n tabIndex={0}\n $shouldHidePopupArrow={shouldHidePopupArrow}\n $isFocused={isFocused}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n onKeySelect(index);\n }\n }}\n >\n {iconElement}\n <StyledContextMenuContentItemText>\n {text}\n </StyledContextMenuContentItemText>\n </StyledContextMenuContentItemWrapper>\n {shouldShowSpacer && <StyledContextMenuContentItemSpacer />}\n </StyledContextMenuContentItem>\n );\n }),\n [items, focusedIndex, shouldHidePopupArrow, onKeySelect],\n );\n\n return (\n <StyledMotionContextMenuContent\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n $shouldHidePopupArrow={shouldHidePopupArrow}\n $zIndex={zIndex}\n ref={ref}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ ease: 'anticipate' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n {headline && (\n <StyledContextMenuContentHeadline>{headline}</StyledContextMenuContentHeadline>\n )}\n {content}\n </StyledMotionContextMenuContent>\n );\n },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js CHANGED Viewed

@@ -3,25 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMotionContextMenuContent = exports.StyledContextMenuContentItemText = exports.StyledContextMenuContentItemIconWrapper = exports.StyledContextMenuContentItem = void 0;
-var _framerMotion = require("framer-motion");
+exports.StyledMotionContextMenuContent = exports.StyledContextMenuContentItemWrapper = exports.StyledContextMenuContentItemText = exports.StyledContextMenuContentItemSpacer = exports.StyledContextMenuContentItemIconWrapper = exports.StyledContextMenuContentItem = exports.StyledContextMenuContentHeadline = void 0;
+var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _contextMenu = require("../../../types/contextMenu");
-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; }
-const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
+var _ContextMenu = require("../ContextMenu.types");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent = (0, _styledComponents.default)(_react.motion.div)`
     background-color: ${({
   theme
 }) => theme['001']};
     border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: 3px;
+    border-radius: ${({
+  $shouldHidePopupArrow
+}) => $shouldHidePopupArrow ? '6px' : '3px'};
     box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
     color: ${({
   theme
 }) => theme.text};
+    max-width: 500px;
     pointer-events: all;
     position: absolute;
-    z-index: 10;
+    z-index: ${({
+  $zIndex
+}) => $zIndex};
     &::after {
         background-color: inherit;
@@ -34,41 +38,47 @@ const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent =
         width: 14px;
         z-index: -2;
+        ${({
+  $shouldHidePopupArrow
+}) => $shouldHidePopupArrow && (0, _styledComponents.css)`
+                display: none;
+            `}
         ${({
   $position
 }) => {
   switch ($position) {
-    case _contextMenu.ContextMenuAlignment.TopLeft:
+    case _ContextMenu.ContextMenuAlignment.TopLeft:
       return (0, _styledComponents.css)`
                         bottom: -7px;
                         right: 7px;
                         transform: rotate(45deg);
                     `;
-    case _contextMenu.ContextMenuAlignment.BottomLeft:
+    case _ContextMenu.ContextMenuAlignment.BottomLeft:
       return (0, _styledComponents.css)`
                         top: -7px;
                         right: 7px;
                         transform: rotate(225deg);
                     `;
-    case _contextMenu.ContextMenuAlignment.TopRight:
+    case _ContextMenu.ContextMenuAlignment.TopRight:
       return (0, _styledComponents.css)`
                         transform: rotate(45deg);
                         bottom: -7px;
                         left: 7px;
                     `;
-    case _contextMenu.ContextMenuAlignment.BottomRight:
+    case _ContextMenu.ContextMenuAlignment.BottomRight:
       return (0, _styledComponents.css)`
                         transform: rotate(225deg);
                         top: -7px;
                         left: 7px;
                     `;
-    case _contextMenu.ContextMenuAlignment.TopCenter:
+    case _ContextMenu.ContextMenuAlignment.TopCenter:
       return (0, _styledComponents.css)`
                         bottom: -7px;
                         right: 45%;
                         transform: rotate(45deg);
                     `;
-    case _contextMenu.ContextMenuAlignment.BottomCenter:
+    case _ContextMenu.ContextMenuAlignment.BottomCenter:
       return (0, _styledComponents.css)`
                         transform: rotate(225deg);
                         top: -7px;
@@ -88,15 +98,42 @@ const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent =
         position: absolute;
         right: 0;
         top: 0;
+        border-radius: ${({
+  $shouldHidePopupArrow
+}) => $shouldHidePopupArrow ? '6px' : '3px'};
         z-index: -1;
     }
 `;
-const StyledContextMenuContentItem = exports.StyledContextMenuContentItem = _styledComponents.default.div`
+const StyledContextMenuContentItem = exports.StyledContextMenuContentItem = _styledComponents.default.div``;
+const StyledContextMenuContentItemSpacer = exports.StyledContextMenuContentItemSpacer = _styledComponents.default.div`
+    background-color: ${({
+  theme
+}) => theme['003']};
+    height: 1px;
+    width: 100%;
+`;
+const StyledContextMenuContentItemWrapper = exports.StyledContextMenuContentItemWrapper = _styledComponents.default.div`
+    align-items: center;
+    border-radius: ${({
+  $shouldHidePopupArrow
+}) => $shouldHidePopupArrow ? '3px' : 0};
     cursor: pointer;
     display: flex;
-    padding: 5px 8px 5px 5px;
+    gap: 6px;
+    margin: ${({
+  $shouldHidePopupArrow
+}) => $shouldHidePopupArrow ? '3px' : 0};
+    overflow: hidden;
+    padding: 5px 8px;
     transition: background-color 0.3s ease;
+    ${({
+  $isFocused,
+  theme
+}) => $isFocused && (0, _styledComponents.css)`
+            background-color: ${theme['secondary-103']};
+        `}
     &:hover {
         background-color: ${({
   theme
@@ -104,12 +141,21 @@ const StyledContextMenuContentItem = exports.StyledContextMenuContentItem = _sty
     }
 `;
 const StyledContextMenuContentItemIconWrapper = exports.StyledContextMenuContentItemIconWrapper = _styledComponents.default.div`
+    display: flex;
     flex: 0 0 auto;
-    margin: 0 8px 0 3px;
+    justify-content: center;
     width: 20px;
 `;
+const StyledContextMenuContentHeadline = exports.StyledContextMenuContentHeadline = _styledComponents.default.div`
+    width: 100%;
+    margin: 3px 6px;
+    opacity: 50%;
+    font-weight: bold;
+`;
 const StyledContextMenuContentItemText = exports.StyledContextMenuContentItemText = _styledComponents.default.div`
-    flex: 0 0 auto;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
 `;
 //# sourceMappingURL=ContextMenuContent.styles.js.map

package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenuContent.styles.js","names":["~~_framerMotion~~","require","_styledComponents","_interopRequireWildcard","~~_contextMenu~~","~~_getRequireWildcardCache~~","e","WeakMap","r","t","__esModule","~~default~~","~~has~~","~~get~~","~~n","~~__proto__","a","~~Object~~","~~defineProperty~~","~~getOwnPropertyDescriptor~~","u","~~hasOwnProperty~~","~~call~~","i","~~set~~","StyledMotionContextMenuContent","exports","styled","motion","div","theme","text","$position","ContextMenuAlignment","TopLeft","~~css","~~BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","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 { ~~ContextMenuAlignment~~ } from '~~../../../types~~/~~contextMenu~~';\nimport ~~type~~ { ~~WithTheme~~ } from '~~../../color-scheme-provider/ColorSchemeProvider~~';\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 pointer-events: all;\n position: absolute;\n z-index: 10;\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: 7px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 7px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.TopCenter:\n return css`\n bottom: -7px;\n right: 45%;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomCenter:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 45%;\n `;\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":";;;;;;AAAA,IAAAA,~~aAAA~~,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;~~AACA~~,IAAAG,YAAA,GAAAH,OAAA;~~AAAkE~~,~~SAAAI~~,~~yBAAAC~~,CAAA,6BAAAC,OAAA,~~mBAAAC~~,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,~~YAAAF~~,~~wBAAA~~,YAAAA,~~CAAAC~~,CAAA,~~WAAAA~~,CAAA,~~GAAAG~~,CAAA,~~GAAAD~~,CAAA,~~KAAAF~~,CAAA~~;AAAA~~,~~SAAAH~~,~~wBAAAG~~,CAAA,~~EAAAE~~,CAAA,~~SAAAA~~,CAAA,~~IAAAF~~,CAAA,~~IAAAA~~,~~CAAA~~,~~CAAAI~~,~~UAAA~~,~~SAAAJ~~,CAAA,~~eAAAA~~,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,~~WAAAK~~,~~OAAA~~,~~EAAAL~~,CAAA,~~QAAAG~~,CAAA,~~GAAAJ~~,~~wBAAA,CAAAG,~~CAAA,~~OAAAC~~,CAAA,~~IAAAA~~,CAAA,~~CAAAG~~,GAAA,~~CAAAN~~,CAAA,~~UAAAG~~,CAAA,~~CAAAI~~,GAAA,~~CAAAP~~,CAAA,~~OAAAQ~~,CAAA,~~KAAAC~~,~~SAAA~~,~~UAAAC~~,CAAA,~~GAAAC~~,~~MAAA~~,~~CAAAC~~,~~cAAA~~,IAAAD,~~MAAA,CAAAE,wBAAA,WAAAC,~~CAAA,~~IAAAd~~,CAAA,~~oBAAAc~~,~~CAAA,OAAAC,~~cAAA,CAAAC,IAAA,~~CAAAhB~~,CAAA,~~EAAAc~~,CAAA,~~SAAAG~~,CAAA,~~GAAAP~~,CAAA,~~GAAAC~~,MAAA,CAAAE,wBAAA,~~CAAAb~~,CAAA,~~EAAAc~~,CAAA,~~UAAAG~~,CAAA,~~KAAAA~~,~~CAAA,CAAAV,~~GAAA,~~IAAAU~~,CAAA,~~CAAAC~~,GAAA,IAAAP,~~MAAA,CAAAC,cAAA,CAAAJ,~~CAAA,~~EAAAM~~,CAAA,~~EAAAG~~,CAAA,~~IAAAT~~,CAAA,~~CAAAM~~,CAAA,~~IAAAd~~,CAAA,~~CAAAc~~,CAAA,~~YAAAN~~,CAAA,~~CAAAH~~,~~OAAA,GAAAL,~~CAAA,~~EAAAG~~,CAAA,~~IAAAA~~,CAAA~~,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA~~;~~AAO3D~~,~~MAAMW~~,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAG,IAAAE,yBAAM,EAChDC,~~oBAAM~~,CAACC,GACX,CAAsC;AACtC,wBAAwB,CAAC;EAAEC;AAA2C,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACxF;AACA;~~AACA~~;AACA,aAAa,CAAC;~~EAAEA~~;AAA2C,CAAC,KAAKA,KAAK,~~CAACC~~,IAAI;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKC,iCAAoB,CAACC,OAAO;MAC7B,OAAO,~~IAAAC~~,qBAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,~~KAAKF~~,iCAAoB,~~CAACG~~,UAAU;MAChC,OAAO,~~IAAAD~~,qBAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,~~KAAKF~~,iCAAoB,~~CAACI~~,QAAQ;MAC9B,OAAO,~~IAAAF~~,qBAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,~~KAAKF~~,iCAAoB,~~CAACK~~,WAAW;MACjC,OAAO,~~IAAAH~~,qBAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,~~KAAKF~~,iCAAoB,~~CAACM~~,SAAS;MAC/B,OAAO,~~IAAAJ~~,qBAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IACL,~~KAAKF~~,iCAAoB,~~CAACO~~,YAAY;MAClC,OAAO,~~IAAAL~~,qBAAG;AAC9B;AACA;AACA;AACA,qBAAqB;IAEL;MACI,~~OAAOM~~,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;~~AAIM~~,~~MAAMC~~,4BAA4B,~~GAAAhB~~,OAAA,~~CAAAgB~~,4BAAA,~~GAAGf~~,yBAAM,CAACE,~~GAAsC~~;~~AACzF~~;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;~~EAAEC~~;~~AAAyC~~,CAAC,~~KAC7DA~~,KAAK,CAAC,eAAe,CAAC;AAClC;AACA,CAAC;AAEM,~~MAAMa~~,uCAAuC,~~GAAAjB~~,OAAA,~~CAAAiB~~,uCAAA,~~GAAGhB~~,yBAAM,CAACE,GAAG;AACjE;AACA;AACA;AACA,CAAC;AAEM,~~MAAMe~~,gCAAgC,~~GAAAlB~~,OAAA,~~CAAAkB~~,gCAAA,~~GAAGjB~~,yBAAM,CAACE,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ContextMenuContent.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_ContextMenu","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionContextMenuContent","exports","styled","motion","div","theme","$shouldHidePopupArrow","text","$zIndex","css","$position","ContextMenuAlignment","TopLeft","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","StyledContextMenuContentItemSpacer","StyledContextMenuContentItemWrapper","$isFocused","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentHeadline","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport { ContextMenuAlignment } from '../ContextMenu.types';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n $zIndex: number;\n $shouldHidePopupArrow: boolean;\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: ${({ $shouldHidePopupArrow }) => ($shouldHidePopupArrow ? '6px' : '3px')};\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n max-width: 500px;\n pointer-events: all;\n position: absolute;\n z-index: ${({ $zIndex }) => $zIndex};\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 ${({ $shouldHidePopupArrow }) =>\n $shouldHidePopupArrow &&\n css`\n display: none;\n `}\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 7px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 7px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.TopCenter:\n return css`\n bottom: -7px;\n right: 45%;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomCenter:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 45%;\n `;\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 border-radius: ${({ $shouldHidePopupArrow }) => ($shouldHidePopupArrow ? '6px' : '3px')};\n z-index: -1;\n }\n`;\n\nexport const StyledContextMenuContentItem = styled.div``;\n\ntype StyledContextMenuContentItemSpacerProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItemSpacer = styled.div<StyledContextMenuContentItemSpacerProps>`\n background-color: ${({ theme }) => theme['003']};\n height: 1px;\n width: 100%;\n`;\n\ntype StyledContextMenuContentItemWrapperProps = WithTheme<{\n $shouldHidePopupArrow: boolean;\n $isFocused: boolean;\n}>;\n\nexport const StyledContextMenuContentItemWrapper = styled.div<StyledContextMenuContentItemWrapperProps>`\n align-items: center;\n border-radius: ${({ $shouldHidePopupArrow }) => ($shouldHidePopupArrow ? '3px' : 0)};\n cursor: pointer;\n display: flex;\n gap: 6px;\n margin: ${({ $shouldHidePopupArrow }) => ($shouldHidePopupArrow ? '3px' : 0)};\n overflow: hidden;\n padding: 5px 8px;\n transition: background-color 0.3s ease;\n\n ${({ $isFocused, theme }) =>\n $isFocused &&\n css`\n background-color: ${theme['secondary-103']};\n `}\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemWrapperProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentHeadline = styled.div`\n width: 100%;\n margin: 3px 6px;\n opacity: 50%;\n font-weight: bold;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 1 auto;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}