npm - @chayns-components/core - Versions diffs - 5.4.13 → 5.4.14-alpha.0 - Mend

@chayns-components/core 5.4.13 → 5.4.14-alpha.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 (462) hide show

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

@@ -8,7 +8,8 @@ import Icon from '../icon/Icon';
 import ContextMenuContent from './context-menu-content/ContextMenuContent';
 import { StyledContextMenu } from './ContextMenu.styles';
 import { ContextMenuAlignment } from './ContextMenu.types';
-import { getDefaultFocusedIndex } from './ContextMenu.utils';
+import { getActiveItemIndex, getDefaultFocusedIndex, selectItem } from './ContextMenu.utils';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 const ContextMenu = /*#__PURE__*/forwardRef(({
   alignment,
   className,
@@ -26,6 +27,7 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
   shouldDisableClick = false,
   shouldHidePopupArrow = false,
   shouldShowHoverEffect = false,
+  shouldEnableKeyboardHighlighting,
   shouldUseDefaultTriggerStyles = true,
   style,
   yOffset = 0,
@@ -41,10 +43,16 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
   const [isContentShown, setIsContentShown] = useState(false);
   const [portal, setPortal] = useState();
   const [isHovered, setIsHovered] = useState(false);
+  const [shouldUseFocusableWrapper, setShouldUseFocusableWrapper] = useState(false);
   const uuid = useUuid();
   const contextMenuContentRef = useRef(null);
   const contextMenuRef = useRef(null);
+  const shouldSkipNextContextMenuOpenRef = useRef(false);
+  const shouldPreventNextNativeContextMenuRef = useRef(false);
   const isTouch = useIsTouch();
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !shouldDisableClick);
+  const shouldShowWrapperKeyboardHighlighting = shouldShowKeyboardHighlighting && shouldUseFocusableWrapper;
+  const shouldUseKeyboardFocusableWrapper = shouldUseFocusableWrapper && !shouldDisableClick;
   useEffect(() => {
     if (isContentShown) {
       setFocusedIndex(getDefaultFocusedIndex(items));
@@ -65,35 +73,13 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
   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 handleContainerBlur = useCallback(event => {
+    const nextFocusedElement = event.relatedTarget;
+    const currentContainer = event.currentTarget;
+    if (!nextFocusedElement || !currentContainer.contains(nextFocusedElement) && !contextMenuContentRef.current?.contains(nextFocusedElement)) {
+      handleHide();
+    }
+  }, [handleHide]);
   const handleShow = useCallback(async () => {
     if (isTouch) {
       const {
@@ -161,17 +147,123 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
     event.stopPropagation();
     void handleShow();
   }, [handleShow, shouldDisableClick]);
-  const handleDocumentClick = useCallback(event => {
-    if (!shouldCloseOnPopupClick && contextMenuContentRef.current?.contains(event.target)) {
+  const handleKeyDown = useCallback(event => {
+    if (shouldDisableClick) {
+      return;
+    }
+    const isActivationKey = event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar';
+    if (isContentShown && event.key === 'Escape') {
+      event.preventDefault();
+      event.stopPropagation();
+      handleHide();
+      return;
+    }
+    if (isContentShown && !isHovered && event.key === 'ArrowDown') {
+      event.preventDefault();
+      event.stopPropagation();
+      setFocusedIndex(prev => prev >= items.length - 1 ? 0 : prev + 1);
+      return;
+    }
+    if (isContentShown && !isHovered && event.key === 'ArrowUp') {
+      event.preventDefault();
+      event.stopPropagation();
+      setFocusedIndex(prev => prev <= 0 ? items.length - 1 : prev - 1);
       return;
     }
-    handleHide();
-  }, [handleHide, shouldCloseOnPopupClick]);
+    if (isContentShown && isActivationKey) {
+      if (selectItem({
+        index: getActiveItemIndex({
+          contextMenuContentElement: contextMenuContentRef.current,
+          focusedIndex
+        }),
+        items,
+        onClose: handleHide,
+        shouldCloseOnPopupClick
+      })) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      return;
+    }
+    if (event.currentTarget !== event.target) {
+      return;
+    }
+    const isContextMenuShortcut = event.key === 'ContextMenu' || event.key === 'F10' && event.shiftKey;
+    if (isContextMenuShortcut) {
+      event.preventDefault();
+      event.stopPropagation();
+      shouldSkipNextContextMenuOpenRef.current = true;
+      void handleShow();
+      return;
+    }
+    if (shouldUseFocusableWrapper && isActivationKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      void handleShow();
+    }
+  }, [focusedIndex, handleHide, handleShow, isHovered, isContentShown, items, items.length, shouldCloseOnPopupClick, shouldDisableClick, shouldUseFocusableWrapper]);
+  const handleContextMenu = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (shouldDisableClick) {
+      return;
+    }
+    if (shouldSkipNextContextMenuOpenRef.current) {
+      shouldSkipNextContextMenuOpenRef.current = false;
+      return;
+    }
+    void handleShow();
+  }, [handleShow, shouldDisableClick]);
+  useEffect(() => {
+    const handleGlobalKeyDown = event => {
+      if (shouldDisableClick || !contextMenuRef.current) {
+        return;
+      }
+      const isContextMenuShortcut = event.key === 'ContextMenu' || event.key === 'F10' && event.shiftKey;
+      if (!isContextMenuShortcut) {
+        return;
+      }
+      const {
+        activeElement
+      } = document;
+      if (!(activeElement instanceof HTMLElement) || activeElement === document.body || activeElement === document.documentElement) {
+        return;
+      }
+      const shouldOpenFromFocusedParent = activeElement.contains(contextMenuRef.current) && !contextMenuRef.current.contains(activeElement);
+      if (!shouldOpenFromFocusedParent) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      shouldPreventNextNativeContextMenuRef.current = true;
+      void handleShow();
+    };
+    const handleNativeContextMenuCapture = event => {
+      if (!shouldPreventNextNativeContextMenuRef.current) {
+        return;
+      }
+      shouldPreventNextNativeContextMenuRef.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    document.addEventListener('keydown', handleGlobalKeyDown, true);
+    document.addEventListener('contextmenu', handleNativeContextMenuCapture, true);
+    return () => {
+      document.removeEventListener('keydown', handleGlobalKeyDown, true);
+      document.removeEventListener('contextmenu', handleNativeContextMenuCapture, true);
+    };
+  }, [handleShow, shouldDisableClick]);
   useImperativeHandle(ref, () => ({
     hide: handleHide,
     show: handleShow
   }), [handleHide, handleShow]);
   useEffect(() => {
+    const handleDocumentClick = event => {
+      if (!shouldCloseOnPopupClick && contextMenuContentRef.current?.contains(event.target)) {
+        return;
+      }
+      handleHide();
+    };
     if (isContentShown) {
       document.addEventListener('click', handleDocumentClick, true);
       window.addEventListener('blur', handleHide);
@@ -185,7 +277,7 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
       document.removeEventListener('click', handleDocumentClick, true);
       window.removeEventListener('blur', handleHide);
     };
-  }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);
+  }, [handleHide, isContentShown, onHide, onShow, shouldCloseOnPopupClick]);
   useEffect(() => {
     if (!newContainer) {
       return;
@@ -202,13 +294,7 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
       alignment: alignment ?? internalAlignment,
       ref: contextMenuContentRef,
       focusedIndex: focusedIndex,
-      onKeySelect: index => {
-        const item = items[index];
-        if (item) {
-          void item.onClick();
-          handleHide();
-        }
-      },
+      onItemFocus: setFocusedIndex,
       onMouseEnter: () => {
         setIsHovered(true);
         setFocusedIndex(-1);
@@ -218,13 +304,30 @@ const ContextMenu = /*#__PURE__*/forwardRef(({
       }
     })), newContainer));
   }, [alignment, newContainer, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid, zIndex, shouldHidePopupArrow, headline, focusedIndex, handleHide]);
+  useEffect(() => {
+    if (!contextMenuRef.current) {
+      return;
+    }
+    const focusableChildSelector = 'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+    const hasFocusableChild = Boolean(contextMenuRef.current.querySelector(focusableChildSelector));
+    setShouldUseFocusableWrapper(!hasFocusableChild);
+  }, [children]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledContextMenu, {
     className: className ? `beta-chayns-context-menu ${className}` : 'beta-chayns-context-menu',
     $isActive: isContentShown && shouldShowHoverEffect,
     $shouldAddHoverEffect: !isTouch && shouldShowHoverEffect,
+    $shouldShowWrapperKeyboardHighlighting: shouldShowWrapperKeyboardHighlighting,
     $shouldUseDefaultTriggerStyles: shouldUseDefaultTriggerStyles,
     onClick: handleClick,
+    onContextMenuCapture: handleContextMenu,
+    onContextMenu: handleContextMenu,
+    onKeyDown: handleKeyDown,
+    onBlur: handleContainerBlur,
     ref: contextMenuRef,
+    tabIndex: shouldUseKeyboardFocusableWrapper ? 0 : undefined,
+    role: shouldUseKeyboardFocusableWrapper ? 'button' : undefined,
+    "aria-haspopup": shouldUseKeyboardFocusableWrapper ? 'menu' : undefined,
+    "aria-expanded": shouldUseKeyboardFocusableWrapper ? isContentShown : undefined,
     style: style
   }, children), portal);
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","useIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenuAlignment","getDefaultFocusedIndex","ContextMenu","alignment","className","children","createElement","icons","size","container","coordinates","headline","items","onHide","onShow","shouldCloseOnPopupClick","shouldDisableClick","shouldHidePopupArrow","shouldShowHoverEffect","shouldUseDefaultTriggerStyles","style","yOffset","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","$isActive","$shouldAddHoverEffect","$shouldUseDefaultTriggerStyles","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 className,\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 shouldUseDefaultTriggerStyles = true,\n style,\n yOffset = 0,\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 =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n newContainer.scrollTop -\n yOffset;\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, yOffset]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLSpanElement>>(\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={\n className\n ? `beta-chayns-context-menu ${className}`\n : 'beta-chayns-context-menu'\n }\n $isActive={isContentShown && shouldShowHoverEffect}\n $shouldAddHoverEffect={!isTouch && shouldShowHoverEffect}\n $shouldUseDefaultTriggerStyles={shouldUseDefaultTriggerStyles}\n onClick={handleClick}\n ref={contextMenuRef}\n style={style}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ContextMenu.js","names":["createDialog","DialogType","AnimatePresence","React","forwardRef","isValidElement","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","useIsTouch","Icon","ContextMenuContent","StyledContextMenu","ContextMenuAlignment","getActiveItemIndex","getDefaultFocusedIndex","selectItem","useKeyboardFocusHighlighting","ContextMenu","alignment","className","children","createElement","icons","size","container","coordinates","headline","items","onHide","onShow","shouldCloseOnPopupClick","shouldDisableClick","shouldHidePopupArrow","shouldShowHoverEffect","shouldEnableKeyboardHighlighting","shouldUseDefaultTriggerStyles","style","yOffset","zIndex","ref","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","newContainer","setNewContainer","focusedIndex","setFocusedIndex","isContentShown","setIsContentShown","portal","setPortal","isHovered","setIsHovered","shouldUseFocusableWrapper","setShouldUseFocusableWrapper","uuid","contextMenuContentRef","contextMenuRef","shouldSkipNextContextMenuOpenRef","shouldPreventNextNativeContextMenuRef","isTouch","shouldShowKeyboardHighlighting","shouldShowWrapperKeyboardHighlighting","shouldUseKeyboardFocusableWrapper","current","el","element","closest","Element","handleHide","handleContainerBlur","event","nextFocusedElement","relatedTarget","currentContainer","currentTarget","contains","handleShow","result","type","SELECT","buttons","list","map","text","isSelected","index","name","id","icon","undefined","open","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","preventDefault","stopPropagation","handleKeyDown","isActivationKey","key","prev","length","contextMenuContentElement","onClose","target","isContextMenuShortcut","shiftKey","handleContextMenu","handleGlobalKeyDown","activeElement","document","HTMLElement","body","documentElement","shouldOpenFromFocusedParent","handleNativeContextMenuCapture","addEventListener","removeEventListener","hide","show","handleDocumentClick","window","initial","onItemFocus","onMouseEnter","onMouseLeave","focusableChildSelector","hasFocusableChild","Boolean","querySelector","Fragment","$isActive","$shouldAddHoverEffect","$shouldShowWrapperKeyboardHighlighting","$shouldUseDefaultTriggerStyles","onContextMenuCapture","onContextMenu","onKeyDown","onBlur","tabIndex","role","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 KeyboardEventHandler,\n MouseEvent,\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 { getActiveItemIndex, getDefaultFocusedIndex, selectItem } from './ContextMenu.utils';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n className,\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 shouldEnableKeyboardHighlighting,\n shouldUseDefaultTriggerStyles = true,\n style,\n yOffset = 0,\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 const [shouldUseFocusableWrapper, setShouldUseFocusableWrapper] = useState(false);\n\n const uuid = useUuid();\n\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n const shouldSkipNextContextMenuOpenRef = useRef(false);\n const shouldPreventNextNativeContextMenuRef = useRef(false);\n\n const isTouch = useIsTouch();\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n shouldEnableKeyboardHighlighting && !shouldDisableClick,\n );\n const shouldShowWrapperKeyboardHighlighting =\n shouldShowKeyboardHighlighting && shouldUseFocusableWrapper;\n const shouldUseKeyboardFocusableWrapper = shouldUseFocusableWrapper && !shouldDisableClick;\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 const handleContainerBlur = useCallback(\n (event: React.FocusEvent<HTMLSpanElement>) => {\n const nextFocusedElement = event.relatedTarget as Node \| null;\n const currentContainer = event.currentTarget as HTMLElement;\n\n if (\n !nextFocusedElement \|\|\n (!currentContainer.contains(nextFocusedElement) &&\n !contextMenuContentRef.current?.contains(nextFocusedElement))\n ) {\n handleHide();\n }\n },\n [handleHide],\n );\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 =\n (childrenTop + childrenHeight / 2 - top) / zoomY +\n newContainer.scrollTop -\n yOffset;\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, yOffset]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLSpanElement>>(\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 handleKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n (event) => {\n if (shouldDisableClick) {\n return;\n }\n\n const isActivationKey =\n event.key === 'Enter' \|\| event.key === ' ' \|\| event.key === 'Spacebar';\n\n if (isContentShown && event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n handleHide();\n return;\n }\n\n if (isContentShown && !isHovered && event.key === 'ArrowDown') {\n event.preventDefault();\n event.stopPropagation();\n setFocusedIndex((prev) => (prev >= items.length - 1 ? 0 : prev + 1));\n return;\n }\n\n if (isContentShown && !isHovered && event.key === 'ArrowUp') {\n event.preventDefault();\n event.stopPropagation();\n setFocusedIndex((prev) => (prev <= 0 ? items.length - 1 : prev - 1));\n return;\n }\n\n if (isContentShown && isActivationKey) {\n if (\n selectItem({\n index: getActiveItemIndex({\n contextMenuContentElement: contextMenuContentRef.current,\n focusedIndex,\n }),\n items,\n onClose: handleHide,\n shouldCloseOnPopupClick,\n })\n ) {\n event.preventDefault();\n event.stopPropagation();\n }\n\n return;\n }\n\n if (event.currentTarget !== event.target) {\n return;\n }\n\n const isContextMenuShortcut =\n event.key === 'ContextMenu' \|\| (event.key === 'F10' && event.shiftKey);\n\n if (isContextMenuShortcut) {\n event.preventDefault();\n event.stopPropagation();\n shouldSkipNextContextMenuOpenRef.current = true;\n void handleShow();\n return;\n }\n\n if (shouldUseFocusableWrapper && isActivationKey) {\n event.preventDefault();\n event.stopPropagation();\n void handleShow();\n }\n },\n [\n focusedIndex,\n handleHide,\n handleShow,\n isHovered,\n isContentShown,\n items,\n items.length,\n shouldCloseOnPopupClick,\n shouldDisableClick,\n shouldUseFocusableWrapper,\n ],\n );\n\n const handleContextMenu = useCallback(\n (event: MouseEvent<HTMLSpanElement>) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (shouldDisableClick) {\n return;\n }\n\n if (shouldSkipNextContextMenuOpenRef.current) {\n shouldSkipNextContextMenuOpenRef.current = false;\n return;\n }\n\n void handleShow();\n },\n [handleShow, shouldDisableClick],\n );\n\n useEffect(() => {\n const handleGlobalKeyDown = (event: KeyboardEvent) => {\n if (shouldDisableClick \|\| !contextMenuRef.current) {\n return;\n }\n\n const isContextMenuShortcut =\n event.key === 'ContextMenu' \|\| (event.key === 'F10' && event.shiftKey);\n\n if (!isContextMenuShortcut) {\n return;\n }\n\n const { activeElement } = document;\n\n if (\n !(activeElement instanceof HTMLElement) \|\|\n activeElement === document.body \|\|\n activeElement === document.documentElement\n ) {\n return;\n }\n\n const shouldOpenFromFocusedParent =\n activeElement.contains(contextMenuRef.current) &&\n !contextMenuRef.current.contains(activeElement);\n\n if (!shouldOpenFromFocusedParent) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n shouldPreventNextNativeContextMenuRef.current = true;\n void handleShow();\n };\n\n const handleNativeContextMenuCapture = (event: Event) => {\n if (!shouldPreventNextNativeContextMenuRef.current) {\n return;\n }\n\n shouldPreventNextNativeContextMenuRef.current = false;\n event.preventDefault();\n event.stopPropagation();\n };\n\n document.addEventListener('keydown', handleGlobalKeyDown, true);\n document.addEventListener('contextmenu', handleNativeContextMenuCapture, true);\n\n return () => {\n document.removeEventListener('keydown', handleGlobalKeyDown, true);\n document.removeEventListener('contextmenu', handleNativeContextMenuCapture, true);\n };\n }, [handleShow, shouldDisableClick]);\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n const handleDocumentClick = (event: PointerEvent) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n };\n\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 }, [handleHide, isContentShown, onHide, onShow, shouldCloseOnPopupClick]);\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 onItemFocus={setFocusedIndex}\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 useEffect(() => {\n if (!contextMenuRef.current) {\n return;\n }\n\n const focusableChildSelector =\n 'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]), [contenteditable=\"true\"]';\n\n const hasFocusableChild = Boolean(\n contextMenuRef.current.querySelector(focusableChildSelector),\n );\n\n setShouldUseFocusableWrapper(!hasFocusableChild);\n }, [children]);\n\n return (\n <>\n <StyledContextMenu\n className={\n className\n ? `beta-chayns-context-menu ${className}`\n : 'beta-chayns-context-menu'\n }\n $isActive={isContentShown && shouldShowHoverEffect}\n $shouldAddHoverEffect={!isTouch && shouldShowHoverEffect}\n $shouldShowWrapperKeyboardHighlighting={shouldShowWrapperKeyboardHighlighting}\n $shouldUseDefaultTriggerStyles={shouldUseDefaultTriggerStyles}\n onClick={handleClick}\n onContextMenuCapture={handleContextMenu}\n onContextMenu={handleContextMenu}\n onKeyDown={handleKeyDown}\n onBlur={handleContainerBlur}\n ref={contextMenuRef}\n tabIndex={shouldUseKeyboardFocusableWrapper ? 0 : undefined}\n role={shouldUseKeyboardFocusableWrapper ? 'button' : undefined}\n aria-haspopup={shouldUseKeyboardFocusableWrapper ? 'menu' : undefined}\n aria-expanded={shouldUseKeyboardFocusableWrapper ? isContentShown : undefined}\n style={style}\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 CHANGED Viewed

@@ -1,8 +1,10 @@
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingCircleRingCss, keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledContextMenu = styled.span`
     align-items: center;
     cursor: pointer;
     display: flex;
+    position: relative;
     ${({
   $isActive,
@@ -31,5 +33,41 @@ export const StyledContextMenu = styled.span`
                 background-color: ${theme['201']};
             }
         `}
+    ${({
+  $shouldShowWrapperKeyboardHighlighting,
+  $shouldUseDefaultTriggerStyles
+}) => $shouldShowWrapperKeyboardHighlighting && ($shouldUseDefaultTriggerStyles ? css`
+                  &:focus-visible {
+                      outline: none;
+                      box-shadow: none;
+                  }
+                  &:focus-visible > .beta-chayns-icon {
+                      position: relative;
+                      color: inherit;
+                  }
+                  &:focus-visible > .beta-chayns-icon::after {
+                      ${keyboardFocusHighlightingCircleRingCss};
+                      content: '';
+                      position: absolute;
+                      top: 50%;
+                      left: 50%;
+                      width: calc(100% + 8px);
+                      height: calc(100% + 8px);
+                      transform: translate(-50%, -50%);
+                      pointer-events: none;
+                  }
+              ` : css`
+                  &:focus-visible {
+                      outline: none;
+                      box-shadow: none;
+                  }
+                  &:focus-visible > * {
+                      ${keyboardFocusHighlightingRingCss}
+                  }
+              `)}
 `;
 //# sourceMappingURL=ContextMenu.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.styles.js","names":["styled","css","StyledContextMenu","span","$isActive","$shouldUseDefaultTriggerStyles","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 $shouldUseDefaultTriggerStyles: boolean;\n}>;\n\nexport const StyledContextMenu = styled.span<StyledContextMenuProps>`\n align-items: center;\n cursor: pointer;\n display: flex;\n\n ${({ $isActive, $shouldUseDefaultTriggerStyles, theme }: StyledContextMenuProps) =>\n $shouldUseDefaultTriggerStyles\n ? css`\n background-color: ${$isActive ? theme['201'] : 'transparent'};\n border-radius: 3px;\n padding: 6px;\n transition: background-color 0.3s ease;\n `\n : css`\n background-color: transparent;\n border-radius: inherit;\n padding: 0;\n\n > * {\n width: 100%;\n }\n `}\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;~~AAS~~/C,OAAO,MAAMC,iBAAiB,~~GAAGF~~,MAAM,~~CAACG~~,IAA4B;AACpE;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAEC,8BAA8B;EAAEC;AAA8B,CAAC,KAC3ED,8BAA8B,~~GACxBJ~~,GAAG;AACjB,~~sCAAsCG~~,SAAS,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAG,aAAa;AAC9E;AACA;AACA;AACA,eAAe,~~GACDL~~,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;~~EAAEM~~,qBAAqB;EAAED;AAA8B,CAAC,KACvDC,qBAAqB,~~IACrBN~~,GAAG;AACX;AACA,~~oCAAoCK~~,KAAK,CAAC,KAAK,CAAC;AAChD;AACA,SAAS;AACT,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ContextMenu.styles.js","names":["styled","css","keyboardFocusHighlightingCircleRingCss","keyboardFocusHighlightingRingCss","StyledContextMenu","span","$isActive","$shouldUseDefaultTriggerStyles","theme","$shouldAddHoverEffect","$shouldShowWrapperKeyboardHighlighting"],"sources":["../../../../src/components/context-menu/ContextMenu.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport {\n keyboardFocusHighlightingCircleRingCss,\n keyboardFocusHighlightingRingCss,\n} from '../../utils/keyboardFocusHighlighting.styles';\n\ntype StyledContextMenuProps = WithTheme<{\n $isActive: boolean;\n $shouldAddHoverEffect: boolean;\n $shouldShowWrapperKeyboardHighlighting: boolean;\n $shouldUseDefaultTriggerStyles: boolean;\n}>;\n\nexport const StyledContextMenu = styled.span<StyledContextMenuProps>`\n align-items: center;\n cursor: pointer;\n display: flex;\n position: relative;\n\n ${({ $isActive, $shouldUseDefaultTriggerStyles, theme }: StyledContextMenuProps) =>\n $shouldUseDefaultTriggerStyles\n ? css`\n background-color: ${$isActive ? theme['201'] : 'transparent'};\n border-radius: 3px;\n padding: 6px;\n transition: background-color 0.3s ease;\n `\n : css`\n background-color: transparent;\n border-radius: inherit;\n padding: 0;\n\n > * {\n width: 100%;\n }\n `}\n\n ${({ $shouldAddHoverEffect, theme }: StyledContextMenuProps) =>\n $shouldAddHoverEffect &&\n css`\n &:hover {\n background-color: ${theme['201']};\n }\n `}\n\n ${({\n $shouldShowWrapperKeyboardHighlighting,\n $shouldUseDefaultTriggerStyles,\n }: StyledContextMenuProps) =>\n $shouldShowWrapperKeyboardHighlighting &&\n ($shouldUseDefaultTriggerStyles\n ? css`\n &:focus-visible {\n outline: none;\n box-shadow: none;\n }\n\n &:focus-visible > .beta-chayns-icon {\n position: relative;\n color: inherit;\n }\n\n &:focus-visible > .beta-chayns-icon::after {\n ${keyboardFocusHighlightingCircleRingCss};\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(100% + 8px);\n height: calc(100% + 8px);\n transform: translate(-50%, -50%);\n pointer-events: none;\n }\n `\n : css`\n &:focus-visible {\n outline: none;\n box-shadow: none;\n }\n\n &:focus-visible > * {\n ${keyboardFocusHighlightingRingCss}\n }\n `)}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SACIC,sCAAsC,EACtCC,gCAAgC,QAC7B,8CAA8C;AASrD,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,IAA4B;AACpE;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAEC,8BAA8B;EAAEC;AAA8B,CAAC,KAC3ED,8BAA8B,GACxBN,GAAG;AACjB,sCAAsCK,SAAS,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAG,aAAa;AAC9E;AACA;AACA;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA,MAAM,CAAC;EAAEQ,qBAAqB;EAAED;AAA8B,CAAC,KACvDC,qBAAqB,IACrBR,GAAG;AACX;AACA,oCAAoCO,KAAK,CAAC,KAAK,CAAC;AAChD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EACCE,sCAAsC;EACtCH;AACoB,CAAC,KACrBG,sCAAsC,KACrCH,8BAA8B,GACzBN,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBC,sCAAsC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,GACDD,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBE,gCAAgC;AACxD;AACA,eAAe,CAAC;AAChB,CAAC","ignoreList":[]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContextMenu.types.js","names":["ContextMenuAlignment"],"sources":["../../../../src/components/context-menu/ContextMenu.types.ts"],"sourcesContent":["import type { CSSProperties, 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 Additional class name applied to the trigger wrapper.\n * @optional\n /\n className?: string;\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 Whether the default trigger padding/background styles should be applied.\n * @description Disable this when the trigger child already provides its own full visual styling.\n * @default true\n * @optional\n /\n shouldUseDefaultTriggerStyles?: 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 Inline styles applied to the trigger wrapper.\n * @optional\n /\n style?: CSSProperties;\n /\n Vertical offset between the trigger element and the context menu.\n * @description Use this prop to fine-tune the context menu position on the Y axis. Positive and\n * negative values can be used depending on the desired spacing.\n * @default 0\n * @example yOffset={8}\n * @optional\n /\n yOffset?: number;\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;;~~AA6HA~~;AACA;AACA","ignoreList":[]}
1	+ {"version":3,"file":"ContextMenu.types.js","names":["ContextMenuAlignment"],"sources":["../../../../src/components/context-menu/ContextMenu.types.ts"],"sourcesContent":["import type { CSSProperties, 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 Additional class name applied to the trigger wrapper.\n * @optional\n /\n className?: string;\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 Whether the default trigger padding/background styles should be applied.\n * @description Disable this when the trigger child already provides its own full visual styling.\n * @default true\n * @optional\n /\n shouldUseDefaultTriggerStyles?: 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 Enables keyboard-only focus highlighting for the trigger.\n * @default false\n * @optional\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Inline styles applied to the trigger wrapper.\n * @optional\n /\n style?: CSSProperties;\n /\n Vertical offset between the trigger element and the context menu.\n * @description Use this prop to fine-tune the context menu position on the Y axis. Positive and\n * negative values can be used depending on the desired spacing.\n * @default 0\n * @example yOffset={8}\n * @optional\n /\n yOffset?: number;\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;;AAmIA;AACA;AACA","ignoreList":[]}

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

@@ -1,2 +1,26 @@
 export const getDefaultFocusedIndex = items => items.findIndex(item => item.isSelected);
+export const getActiveItemIndex = ({
+  contextMenuContentElement,
+  focusedIndex
+}) => {
+  const activeElement = document.activeElement;
+  const activeItemElement = contextMenuContentElement?.contains(activeElement) ? activeElement?.closest('[data-index]') : undefined;
+  return activeItemElement ? Number(activeItemElement.dataset.index) : focusedIndex;
+};
+export const selectItem = ({
+  index,
+  items,
+  onClose,
+  shouldCloseOnPopupClick
+}) => {
+  const item = items[index];
+  if (!item) {
+    return false;
+  }
+  void item.onClick();
+  if (shouldCloseOnPopupClick) {
+    onClose();
+  }
+  return true;
+};
 //# sourceMappingURL=ContextMenu.utils.js.map

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

	@@ -1 +1 @@
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":[]}
1	+ {"version":3,"file":"ContextMenu.utils.js","names":["getDefaultFocusedIndex","items","findIndex","item","isSelected","getActiveItemIndex","contextMenuContentElement","focusedIndex","activeElement","document","activeItemElement","contains","closest","undefined","Number","dataset","index","selectItem","onClose","shouldCloseOnPopupClick","onClick"],"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\nexport const getActiveItemIndex = ({\n contextMenuContentElement,\n focusedIndex,\n}: {\n contextMenuContentElement: HTMLDivElement \| null;\n focusedIndex: number;\n}) => {\n const activeElement = document.activeElement as HTMLElement \| null;\n const activeItemElement = contextMenuContentElement?.contains(activeElement)\n ? activeElement?.closest<HTMLElement>('[data-index]')\n : undefined;\n\n return activeItemElement ? Number(activeItemElement.dataset.index) : focusedIndex;\n};\n\nexport const selectItem = ({\n index,\n items,\n onClose,\n shouldCloseOnPopupClick,\n}: {\n index: number;\n items: ContextMenuItem[];\n onClose: VoidFunction;\n shouldCloseOnPopupClick: boolean;\n}) => {\n const item = items[index];\n\n if (!item) {\n return false;\n }\n\n void item.onClick();\n\n if (shouldCloseOnPopupClick) {\n onClose();\n }\n\n return true;\n};\n"],"mappings":"AAEA,OAAO,MAAMA,sBAAsB,GAAIC,KAAwB,IAC3DA,KAAK,CAACC,SAAS,CAAEC,IAAI,IAAKA,IAAI,CAACC,UAAU,CAAC;AAE9C,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAC/BC,yBAAyB;EACzBC;AAIJ,CAAC,KAAK;EACF,MAAMC,aAAa,GAAGC,QAAQ,CAACD,aAAmC;EAClE,MAAME,iBAAiB,GAAGJ,yBAAyB,EAAEK,QAAQ,CAACH,aAAa,CAAC,GACtEA,aAAa,EAAEI,OAAO,CAAc,cAAc,CAAC,GACnDC,SAAS;EAEf,OAAOH,iBAAiB,GAAGI,MAAM,CAACJ,iBAAiB,CAACK,OAAO,CAACC,KAAK,CAAC,GAAGT,YAAY;AACrF,CAAC;AAED,OAAO,MAAMU,UAAU,GAAGA,CAAC;EACvBD,KAAK;EACLf,KAAK;EACLiB,OAAO;EACPC;AAMJ,CAAC,KAAK;EACF,MAAMhB,IAAI,GAAGF,KAAK,CAACe,KAAK,CAAC;EAEzB,IAAI,CAACb,IAAI,EAAE;IACP,OAAO,KAAK;EAChB;EAEA,KAAKA,IAAI,CAACiB,OAAO,CAAC,CAAC;EAEnB,IAAID,uBAAuB,EAAE;IACzBD,OAAO,CAAC,CAAC;EACb;EAEA,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

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

@@ -9,7 +9,7 @@ const ContextMenuContent = /*#__PURE__*/React.forwardRef(({
   zIndex,
   shouldHidePopupArrow,
   headline,
-  onKeySelect,
+  onItemFocus,
   focusedIndex,
   onMouseEnter,
   onMouseLeave
@@ -69,14 +69,9 @@ const ContextMenuContent = /*#__PURE__*/React.forwardRef(({
       tabIndex: 0,
       $shouldHidePopupArrow: shouldHidePopupArrow,
       $isFocused: isFocused,
-      onKeyDown: e => {
-        if (e.key === 'Enter') {
-          e.preventDefault();
-          onKeySelect(index);
-        }
-      }
+      onFocus: () => onItemFocus(index)
     }, iconElement, /*#__PURE__*/React.createElement(StyledContextMenuContentItemText, null, text)), shouldShowSpacer && /*#__PURE__*/React.createElement(StyledContextMenuContentItemSpacer, null));
-  }), [items, focusedIndex, shouldHidePopupArrow, onKeySelect]);
+  }), [items, focusedIndex, shouldHidePopupArrow, onItemFocus]);
   return /*#__PURE__*/React.createElement(StyledMotionContextMenuContent, {
     animate: {
       opacity: 1,

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

	@@ -1 +1 @@
1	- {"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":"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","ignoreList":[]}
1	+ {"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","onItemFocus","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","onFocus","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 onItemFocus: (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 onItemFocus,\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 onFocus={() => onItemFocus(index)}\n >\n {iconElement}\n <StyledContextMenuContentItemText>\n {text}\n </StyledContextMenuContentItemText>\n </StyledContextMenuContentItemWrapper>\n {shouldShowSpacer && <StyledContextMenuContentItemSpacer />}\n </StyledContextMenuContentItem>\n );\n }),\n [items, focusedIndex, shouldHidePopupArrow, onItemFocus],\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":[]}