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

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

@@ -1,41 +1,51 @@
 import { createDialog, DialogType } from 'chayns-api';
-import { AnimatePresence } from 'framer-motion';
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { AnimatePresence } from 'motion/react';
+import React, { forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useUuid } from '../../hooks/uuid';
-import { ContextMenuAlignment } from '../../types/contextMenu';
-import { getIsTouch } from '../../utils/environment';
+import { useIsTouch } from '../../utils/environment';
 import Icon from '../icon/Icon';
 import ContextMenuContent from './context-menu-content/ContextMenuContent';
 import { StyledContextMenu } from './ContextMenu.styles';
-const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    alignment,
-    children = /*#__PURE__*/React.createElement(Icon, {
-      icons: ['ts-ellipsis_v'],
-      size: 18
-    }),
-    container,
-    coordinates,
-    isInDialog = false,
-    items,
-    onHide,
-    onShow,
-    shouldCloseOnPopupClick = true
-  } = _ref;
+import { ContextMenuAlignment } from './ContextMenu.types';
+import { getDefaultFocusedIndex } from './ContextMenu.utils';
+const ContextMenu = /*#__PURE__*/forwardRef(({
+  alignment,
+  children = /*#__PURE__*/React.createElement(Icon, {
+    icons: ['ts-ellipsis_v'],
+    size: 18
+  }),
+  container,
+  coordinates,
+  headline,
+  items,
+  onHide,
+  onShow,
+  shouldCloseOnPopupClick = true,
+  shouldDisableClick = false,
+  shouldHidePopupArrow = false,
+  shouldShowHoverEffect = false,
+  zIndex = 20
+}, ref) => {
   const [internalCoordinates, setInternalCoordinates] = useState({
     x: 0,
     y: 0
   });
-  const [newContainer, setNewContainer] = useState(container ?? null);
   const [internalAlignment, setInternalAlignment] = useState(ContextMenuAlignment.TopLeft);
+  const [newContainer, setNewContainer] = useState(container ?? null);
+  const [focusedIndex, setFocusedIndex] = useState(getDefaultFocusedIndex(items));
   const [isContentShown, setIsContentShown] = useState(false);
   const [portal, setPortal] = useState();
+  const [isHovered, setIsHovered] = useState(false);
   const uuid = useUuid();
-
-  // ToDo: Replace with hook if new chayns api is ready
   const contextMenuContentRef = useRef(null);
   const contextMenuRef = useRef(null);
+  const isTouch = useIsTouch();
+  useEffect(() => {
+    if (isContentShown) {
+      setFocusedIndex(getDefaultFocusedIndex(items));
+    }
+  }, [isContentShown, items]);
   useEffect(() => {
     if (contextMenuRef.current && !container) {
       const el = contextMenuRef.current;
@@ -51,25 +61,52 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
   const handleHide = useCallback(() => {
     setIsContentShown(false);
   }, []);
+  useEffect(() => {
+    if (!isContentShown) return () => {};
+    const handleKey = e => {
+      if (items.length === 0 || isHovered) return;
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setFocusedIndex(prev => prev >= items.length - 1 ? 0 : prev + 1);
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setFocusedIndex(prev => prev <= 0 ? items.length - 1 : prev - 1);
+      }
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        const item = items[focusedIndex];
+        if (item) {
+          void item.onClick();
+          if (shouldCloseOnPopupClick) {
+            handleHide();
+          }
+        }
+      }
+      if (e.key === 'Escape') {
+        handleHide();
+      }
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [isContentShown, items, focusedIndex, handleHide, shouldCloseOnPopupClick, isHovered]);
   const handleShow = useCallback(async () => {
-    const isTouch = getIsTouch();
     if (isTouch) {
       const {
         result
       } = await createDialog({
         type: DialogType.SELECT,
         buttons: [],
-        list: items.map((_ref2, index) => {
-          let {
-            icons,
-            text
-          } = _ref2;
-          return {
-            name: text,
-            id: index,
-            icon: icons[0]
-          };
-        })
+        list: items.map(({
+          icons,
+          text,
+          isSelected
+        }, index) => ({
+          name: text,
+          id: index,
+          isSelected,
+          icon: /*#__PURE__*/isValidElement(icons) ? undefined : icons?.[0]
+        }))
       }).open();
       if (result && typeof result[0] === 'number') {
         void items[result[0]]?.onClick();
@@ -111,12 +148,15 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
       }
       setIsContentShown(true);
     }
-  }, [items, newContainer]);
+  }, [isTouch, items, newContainer]);
   const handleClick = useCallback(event => {
+    if (shouldDisableClick) {
+      return;
+    }
     event.preventDefault();
     event.stopPropagation();
     void handleShow();
-  }, [handleShow]);
+  }, [handleShow, shouldDisableClick]);
   const handleDocumentClick = useCallback(event => {
     if (!shouldCloseOnPopupClick && contextMenuContentRef.current?.contains(event.target)) {
       return;
@@ -151,13 +191,33 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
     }, isContentShown && /*#__PURE__*/React.createElement(ContextMenuContent, {
       coordinates: coordinates ?? internalCoordinates,
       items: items,
+      zIndex: zIndex,
+      headline: headline,
+      shouldHidePopupArrow: shouldHidePopupArrow,
       key: `contextMenu_${uuid}`,
       alignment: alignment ?? internalAlignment,
-      ref: contextMenuContentRef
+      ref: contextMenuContentRef,
+      focusedIndex: focusedIndex,
+      onKeySelect: index => {
+        const item = items[index];
+        if (item) {
+          void item.onClick();
+          handleHide();
+        }
+      },
+      onMouseEnter: () => {
+        setIsHovered(true);
+        setFocusedIndex(-1);
+      },
+      onMouseLeave: () => {
+        setIsHovered(false);
+      }
     })), newContainer));
-  }, [alignment, newContainer, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid]);
+  }, [alignment, newContainer, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid, zIndex, shouldHidePopupArrow, headline, focusedIndex, handleHide]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledContextMenu, {
     className: "beta-chayns-context-menu",
+    $isActive: isContentShown && shouldShowHoverEffect,
+    $shouldAddHoverEffect: !isTouch && shouldShowHoverEffect,
     onClick: handleClick,
     ref: contextMenuRef
   }, children), portal);

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

@@ -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","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":[]}
+{"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","useIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenuAlignment","getDefaultFocusedIndex","ContextMenu","alignment","children","createElement","icons","size","container","coordinates","headline","items","onHide","onShow","shouldCloseOnPopupClick","shouldDisableClick","shouldHidePopupArrow","shouldShowHoverEffect","zIndex","ref","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","newContainer","setNewContainer","focusedIndex","setFocusedIndex","isContentShown","setIsContentShown","portal","setPortal","isHovered","setIsHovered","uuid","contextMenuContentRef","contextMenuRef","isTouch","current","el","element","closest","Element","handleHide","handleKey","e","length","key","preventDefault","prev","item","onClick","document","addEventListener","removeEventListener","handleShow","result","type","SELECT","buttons","list","map","text","isSelected","index","name","id","icon","undefined","open","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","event","stopPropagation","handleDocumentClick","contains","target","hide","show","window","initial","onKeySelect","onMouseEnter","onMouseLeave","Fragment","className","$isActive","$shouldAddHoverEffect","displayName"],"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/esm/components/context-menu/ContextMenu.styles.js

@@ -1,8 +1,23 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 export const StyledContextMenu = styled.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 && css`
+            &:hover {
+                background-color: ${theme['201']};
+            }
+        `}
 `;
 //# sourceMappingURL=ContextMenu.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.styles.js","names":["styled","StyledContextMenu","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,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,IAAI;AAC5C;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ContextMenu.styles.js","names":["styled","css","StyledContextMenu","span","$isActive","theme","$shouldAddHoverEffect"],"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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,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,IACrBL,GAAG;AACX;AACA,oCAAoCI,KAAK,CAAC,KAAK,CAAC;AAChD;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/context-menu/ContextMenu.types.js

@@ -0,0 +1,29 @@
+/**
+ * Enum representing the possible alignments for the context menu.
+ */
+export let 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/esm/components/context-menu/ContextMenu.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.types.js","names":["ContextMenuAlignment"],"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;AACA,WAAYA,oBAAoB,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/esm/components/context-menu/ContextMenu.utils.js

@@ -0,0 +1,2 @@
+export const getDefaultFocusedIndex = items => items.findIndex(item => item.isSelected);
+//# sourceMappingURL=ContextMenu.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.utils.js","names":["getDefaultFocusedIndex","items","findIndex","item","isSelected"],"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":"AAEA,OAAO,MAAMA,sBAAsB,GAAIC,KAAwB,IAC3DA,KAAK,CAACC,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACC,UAAU,CAAC","ignoreList":[]}

package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js

@@ -1,13 +1,19 @@
-import React, { useMemo } from 'react';
-import { ContextMenuAlignment } from '../../../types/contextMenu';
+import React, { isValidElement, useMemo } from 'react';
 import Icon from '../../icon/Icon';
-import { StyledContextMenuContentItem, StyledContextMenuContentItemIconWrapper, StyledContextMenuContentItemText, StyledMotionContextMenuContent } from './ContextMenuContent.styles';
-const ContextMenuContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    alignment,
-    coordinates,
-    items
-  } = _ref;
+import { StyledContextMenuContentHeadline, StyledContextMenuContentItem, StyledContextMenuContentItemIconWrapper, StyledContextMenuContentItemSpacer, StyledContextMenuContentItemText, StyledContextMenuContentItemWrapper, StyledMotionContextMenuContent } from './ContextMenuContent.styles';
+import { ContextMenuAlignment } from '../ContextMenu.types';
+const ContextMenuContent = /*#__PURE__*/React.forwardRef(({
+  alignment,
+  coordinates,
+  items,
+  zIndex,
+  shouldHidePopupArrow,
+  headline,
+  onKeySelect,
+  focusedIndex,
+  onMouseEnter,
+  onMouseLeave
+}, ref) => {
   const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;
   const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;
   const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;
@@ -34,6 +40,43 @@ const ContextMenuContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -100 : 0;
   const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment || isTopCenterAlignment ? -21 : 21;
   const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;
+  const content = useMemo(() => items.map(({
+    onClick,
+    key,
+    text,
+    icons,
+    shouldShowSpacer
+  }, index) => {
+    const isFocused = index === focusedIndex;
+    let iconElement = null;
+    if (/*#__PURE__*/isValidElement(icons)) {
+      iconElement = icons;
+    } else if (Array.isArray(icons) && icons.length > 0) {
+      iconElement = /*#__PURE__*/React.createElement(StyledContextMenuContentItemIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+        icons: icons
+      }));
+    }
+    return /*#__PURE__*/React.createElement(StyledContextMenuContentItem, {
+      key: `context-menu-item-${key}`,
+      "data-index": index
+    }, /*#__PURE__*/React.createElement(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.createElement(StyledContextMenuContentItemText, null, text)), shouldShowSpacer && /*#__PURE__*/React.createElement(StyledContextMenuContentItemSpacer, null));
+  }), [items, focusedIndex, shouldHidePopupArrow, onKeySelect]);
   return /*#__PURE__*/React.createElement(StyledMotionContextMenuContent, {
     animate: {
       opacity: 1,
@@ -48,6 +91,8 @@ const ContextMenuContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       y: exitAndInitialY
     },
     $position: alignment,
+    $shouldHidePopupArrow: shouldHidePopupArrow,
+    $zIndex: zIndex,
     ref: ref,
     style: {
       left: coordinates.x,
@@ -56,36 +101,18 @@ const ContextMenuContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     transition: {
       ease: 'anticipate'
     },
-    transformTemplate: _ref2 => {
-      let {
-        y = '0px'
-      } = _ref2;
-      return `
+    transformTemplate: ({
+      y = '0px'
+    }) => `
                     translateX(${percentageOffsetX}%)
                     translateY(${percentageOffsetY}%)
                     translateX(${anchorOffsetX}px)
                     translateY(${anchorOffsetY}px)
                     translateY(${y})
-                `;
-    }
-  }, items.map(_ref3 => {
-    let {
-      icons,
-      key,
-      onClick,
-      text
-    } = _ref3;
-    return /*#__PURE__*/React.createElement(StyledContextMenuContentItem, {
-      key: key,
-      onClick: event => {
-        event.preventDefault();
-        event.stopPropagation();
-        void onClick(event);
-      }
-    }, /*#__PURE__*/React.createElement(StyledContextMenuContentItemIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-      icons: icons
-    })), /*#__PURE__*/React.createElement(StyledContextMenuContentItemText, null, text));
-  }));
+                `,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, headline && /*#__PURE__*/React.createElement(StyledContextMenuContentHeadline, null, headline), content);
 });
 ContextMenuContent.displayName = 'ContextMenuContent';
 export default ContextMenuContent;

package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuContent.js","names":["React","useMemo","ContextMenuAlignment","Icon","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText","StyledMotionContextMenuContent","ContextMenuContent","forwardRef","_ref","ref","alignment","coordinates","items","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","isTopCenterAlignment","TopCenter","isBottomCenterAlignment","BottomCenter","percentageOffsetX","anchorOffsetX","percentageOffsetY","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","exit","initial","$position","style","left","x","top","transition","ease","transformTemplate","_ref2","map","_ref3","icons","key","onClick","text","event","preventDefault","stopPropagation","displayName"],"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":[]}
+{"version":3,"file":"ContextMenuContent.js","names":["React","isValidElement","useMemo","Icon","StyledContextMenuContentHeadline","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemSpacer","StyledContextMenuContentItemText","StyledContextMenuContentItemWrapper","StyledMotionContextMenuContent","ContextMenuAlignment","ContextMenuContent","forwardRef","alignment","coordinates","items","zIndex","shouldHidePopupArrow","headline","onKeySelect","focusedIndex","onMouseEnter","onMouseLeave","ref","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","isTopCenterAlignment","TopCenter","isBottomCenterAlignment","BottomCenter","percentageOffsetX","anchorOffsetX","percentageOffsetY","anchorOffsetY","exitAndInitialY","content","map","onClick","key","text","icons","shouldShowSpacer","index","isFocused","iconElement","Array","isArray","length","createElement","event","preventDefault","stopPropagation","tabIndex","$shouldHidePopupArrow","$isFocused","onKeyDown","e","animate","opacity","y","exit","initial","$position","$zIndex","style","left","x","top","transition","ease","transformTemplate","displayName"],"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":"AAAA,OAAOA,KAAK,IAAIC,cAAc,EAAEC,OAAO,QAAQ,OAAO;AACtD,OAAOC,IAAI,MAAM,iBAAiB;AAClC,SACIC,gCAAgC,EAChCC,4BAA4B,EAC5BC,uCAAuC,EACvCC,kCAAkC,EAClCC,gCAAgC,EAChCC,mCAAmC,EACnCC,8BAA8B,QAC3B,6BAA6B;AACpC,SACIC,oBAAoB,QAGjB,sBAAsB;AAe7B,MAAMC,kBAAkB,gBAAGZ,KAAK,CAACa,UAAU,CACvC,CACI;EACIC,SAAS;EACTC,WAAW;EACXC,KAAK;EACLC,MAAM;EACNC,oBAAoB;EACpBC,QAAQ;EACRC,WAAW;EACXC,YAAY;EACZC,YAAY;EACZC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAMC,qBAAqB,GAAGX,SAAS,KAAKH,oBAAoB,CAACe,UAAU;EAC3E,MAAMC,kBAAkB,GAAGb,SAAS,KAAKH,oBAAoB,CAACiB,OAAO;EACrE,MAAMC,mBAAmB,GAAGf,SAAS,KAAKH,oBAAoB,CAACmB,QAAQ;EACvE,MAAMC,oBAAoB,GAAGjB,SAAS,KAAKH,oBAAoB,CAACqB,SAAS;EACzE,MAAMC,uBAAuB,GAAGnB,SAAS,KAAKH,oBAAoB,CAACuB,YAAY;EAE/E,MAAMC,iBAAiB,GAAGjC,OAAO,CAAC,MAAM;IACpC,IAAIuB,qBAAqB,IAAIE,kBAAkB,EAAE;MAC7C,OAAO,CAAC,GAAG;IACf;IAEA,IAAIM,uBAAuB,IAAIF,oBAAoB,EAAE;MACjD,OAAO,CAAC,EAAE;IACd;IAEA,OAAO,CAAC;EACZ,CAAC,EAAE,CACCE,uBAAuB,EACvBR,qBAAqB,EACrBM,oBAAoB,EACpBJ,kBAAkB,CACrB,CAAC;EAEF,MAAMS,aAAa,GAAGlC,OAAO,CAAC,MAAM;IAChC,IAAIuB,qBAAqB,IAAIE,kBAAkB,EAAE;MAC7C,OAAO,EAAE;IACb;IAEA,IAAIM,uBAAuB,IAAIF,oBAAoB,EAAE;MACjD,OAAO,CAAC;IACZ;IAEA,OAAO,CAAC,EAAE;EACd,CAAC,EAAE,CACCE,uBAAuB,EACvBR,qBAAqB,EACrBM,oBAAoB,EACpBJ,kBAAkB,CACrB,CAAC;EAEF,MAAMU,iBAAiB,GACnBR,mBAAmB,IAAIF,kBAAkB,IAAII,oBAAoB,GAAG,CAAC,GAAG,GAAG,CAAC;EAEhF,MAAMO,aAAa,GACfT,mBAAmB,IAAIF,kBAAkB,IAAII,oBAAoB,GAAG,CAAC,EAAE,GAAG,EAAE;EAEhF,MAAMQ,eAAe,GAAGZ,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,MAAMW,OAAO,GAAGtC,OAAO,CACnB,MACIc,KAAK,CAACyB,GAAG,CAAC,CAAC;IAAEC,OAAO;IAAEC,GAAG;IAAEC,IAAI;IAAEC,KAAK;IAAEC;EAAiB,CAAC,EAAEC,KAAK,KAAK;IAClE,MAAMC,SAAS,GAAGD,KAAK,KAAK1B,YAAY;IAExC,IAAI4B,WAAW,GAAG,IAAI;IAEtB,iBAAIhD,cAAc,CAAC4C,KAAK,CAAC,EAAE;MACvBI,WAAW,GAAGJ,KAAK;IACvB,CAAC,MAAM,IAAIK,KAAK,CAACC,OAAO,CAACN,KAAK,CAAC,IAAIA,KAAK,CAACO,MAAM,GAAG,CAAC,EAAE;MACjDH,WAAW,gBACPjD,KAAA,CAAAqD,aAAA,CAAC/C,uCAAuC,qBACpCN,KAAA,CAAAqD,aAAA,CAAClD,IAAI;QAAC0C,KAAK,EAAEA;MAAM,CAAE,CACgB,CAC5C;IACL;IAEA,oBACI7C,KAAA,CAAAqD,aAAA,CAAChD,4BAA4B;MACzBsC,GAAG,EAAE,qBAAqBA,GAAG,EAAG;MAChC,cAAYI;IAAM,gBAElB/C,KAAA,CAAAqD,aAAA,CAAC5C,mCAAmC;MAChCkC,GAAG,EAAEA,GAAI;MACTD,OAAO,EAAGY,KAAK,IAAK;QAChBA,KAAK,CAACC,cAAc,CAAC,CAAC;QACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;QACvB,KAAKd,OAAO,CAACY,KAAK,CAAC;MACvB,CAAE;MACFG,QAAQ,EAAE,CAAE;MACZC,qBAAqB,EAAExC,oBAAqB;MAC5CyC,UAAU,EAAEX,SAAU;MACtBY,SAAS,EAAGC,CAAC,IAAK;QACd,IAAIA,CAAC,CAAClB,GAAG,KAAK,OAAO,EAAE;UACnBkB,CAAC,CAACN,cAAc,CAAC,CAAC;UAClBnC,WAAW,CAAC2B,KAAK,CAAC;QACtB;MACJ;IAAE,GAEDE,WAAW,eACZjD,KAAA,CAAAqD,aAAA,CAAC7C,gCAAgC,QAC5BoC,IAC6B,CACD,CAAC,EACrCE,gBAAgB,iBAAI9C,KAAA,CAAAqD,aAAA,CAAC9C,kCAAkC,MAAE,CAChC,CAAC;EAEvC,CAAC,CAAC,EACN,CAACS,KAAK,EAAEK,YAAY,EAAEH,oBAAoB,EAAEE,WAAW,CAC3D,CAAC;EAED,oBACIpB,KAAA,CAAAqD,aAAA,CAAC3C,8BAA8B;IAC3BoD,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEzB;IAAgB,CAAE;IACzC2B,OAAO,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEzB;IAAgB,CAAE;IAC5C4B,SAAS,EAAErD,SAAU;IACrB4C,qBAAqB,EAAExC,oBAAqB;IAC5CkD,OAAO,EAAEnD,MAAO;IAChBO,GAAG,EAAEA,GAAI;IACT6C,KAAK,EAAE;MAAEC,IAAI,EAAEvD,WAAW,CAACwD,CAAC;MAAEC,GAAG,EAAEzD,WAAW,CAACiD;IAAE,CAAE;IACnDS,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAa,CAAE;IACnCC,iBAAiB,EAAEA,CAAC;MAAEX,CAAC,GAAG;IAAM,CAAC,KAAK;AACtD,iCAAiC7B,iBAAiB;AAClD,iCAAiCE,iBAAiB;AAClD,iCAAiCD,aAAa;AAC9C,iCAAiCE,aAAa;AAC9C,iCAAiC0B,CAAC;AAClC,iBAAkB;IACF1C,YAAY,EAAEA,YAAa;IAC3BC,YAAY,EAAEA;EAAa,GAE1BJ,QAAQ,iBACLnB,KAAA,CAAAqD,aAAA,CAACjD,gCAAgC,QAAEe,QAA2C,CACjF,EACAqB,OAC2B,CAAC;AAEzC,CACJ,CAAC;AAED5B,kBAAkB,CAACgE,WAAW,GAAG,oBAAoB;AAErD,eAAehE,kBAAkB","ignoreList":[]}