npm - @chayns-components/core - Versions diffs - 5.3.10 → 5.3.11-alpha.0 - Mend

@chayns-components/core 5.3.10 → 5.3.11-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 (451) hide show

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

@@ -9,6 +9,7 @@ import ContextMenuContent from './context-menu-content/ContextMenuContent';
 import { StyledContextMenu } from './ContextMenu.styles';
 import { ContextMenuAlignment } from './ContextMenu.types';
 import { getDefaultFocusedIndex } 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));
@@ -161,17 +169,87 @@ 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 isContextMenuShortcut = event.key === 'ContextMenu' || event.key === 'F10' && event.shiftKey;
+    const isActivationKey = event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar';
+    if (isContextMenuShortcut) {
+      event.preventDefault();
+      event.stopPropagation();
+      shouldSkipNextContextMenuOpenRef.current = true;
+      void handleShow();
+      return;
+    }
+    if (shouldUseFocusableWrapper && isActivationKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      void handleShow();
+    }
+  }, [handleShow, shouldDisableClick, shouldUseFocusableWrapper]);
+  const handleContextMenu = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (shouldDisableClick) {
       return;
     }
-    handleHide();
-  }, [handleHide, shouldCloseOnPopupClick]);
+    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 +263,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;
@@ -218,13 +296,29 @@ 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,
     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","getDefaultFocusedIndex","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","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","handleKeyDown","isContextMenuShortcut","shiftKey","isActivationKey","handleContextMenu","handleGlobalKeyDown","activeElement","HTMLElement","body","documentElement","shouldOpenFromFocusedParent","contains","handleNativeContextMenuCapture","hide","show","handleDocumentClick","target","window","initial","onKeySelect","onMouseEnter","onMouseLeave","focusableChildSelector","hasFocusableChild","Boolean","querySelector","Fragment","$isActive","$shouldAddHoverEffect","$shouldShowWrapperKeyboardHighlighting","$shouldUseDefaultTriggerStyles","onContextMenuCapture","onContextMenu","onKeyDown","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 { getDefaultFocusedIndex } 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 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 handleKeyDown = useCallback<KeyboardEventHandler<HTMLSpanElement>>(\n (event) => {\n if (shouldDisableClick) {\n return;\n }\n\n const isContextMenuShortcut =\n event.key === 'ContextMenu' \|\| (event.key === 'F10' && event.shiftKey);\n const isActivationKey =\n event.key === 'Enter' \|\| event.key === ' ' \|\| event.key === 'Spacebar';\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 [handleShow, shouldDisableClick, shouldUseFocusableWrapper],\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 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 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 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/file-input/FileInput.js CHANGED Viewed

@@ -19,7 +19,8 @@ const FileInput = /*#__PURE__*/forwardRef(({
   fileSelectionPlaceholder = 'Dateien hochladen',
   imageSelectPlaceholder,
   shouldPreventImageUpload = false,
-  shouldAllowDownload
+  shouldAllowDownload,
+  shouldEnableKeyboardHighlighting
 }, ref) => {
   const [internalFiles, setInternalFiles] = useState([]);
   const [internalImages, setInternalImages] = useState([]);
@@ -154,6 +155,7 @@ const FileInput = /*#__PURE__*/forwardRef(({
   }, [files, internalFiles, internalImages]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledFileInput, null, /*#__PURE__*/React.createElement(FileSelect, {
     shouldPreventImageUpload: shouldPreventImageUpload,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting,
     maxFiles: maxFiles,
     fileTypes: fileTypes,
     fileSelectionIcons: fileSelectionIcons,
@@ -167,7 +169,7 @@ const FileInput = /*#__PURE__*/forwardRef(({
     files: filesToDisplay,
     onRemove: handleDeleteFile,
     shouldAllowDownload: shouldAllowDownload
-  })), [shouldPreventImageUpload, maxFiles, fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile, shouldAllowDownload]);
+  })), [shouldPreventImageUpload, shouldEnableKeyboardHighlighting, maxFiles, fileTypes, fileSelectionIcons, fileSelectionPlaceholder, imageSelectIcons, imageSelectPlaceholder, maxFileSizeInMB, internalIsDisabled, handleAdd, filesToDisplay, handleDeleteFile, shouldAllowDownload]);
 });
 FileInput.displayName = 'FileInput';
 export default FileInput;

package/lib/esm/components/file-input/FileInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.js","names":["React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","StyledFileInput","FileList","FileSelect","TSIMG_FILE_TYPES","STREAMINGSERVICE_FILE_TYPES","FileInput","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldAllowDownload","ref","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleAdd","Array","isArray","handleDeleteFile","id","fileToDelete","filteredFiles","filter","name","filteredImages","internalIsDisabled","filesToDisplay","items","map","size","mimeType","type","source","url","createElement","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { StyledFileInput } from './FileInput.styles';\nimport FileList, { IFileItem } from '../file-list/FileList';\nimport FileSelect, { UploadedFile } from '../file-select/FileSelect';\n\nexport const TSIMG_FILE_TYPES =\n 'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';\n\nexport const STREAMINGSERVICE_FILE_TYPES =\n 'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';\n\nexport type FileInputProps = {\n /*\n Already uploaded files to display.\n /\n files?: IFileItem[];\n /\n An array of icons that should be displayed inside the FileInput\n /\n fileSelectionIcons?: string[];\n /\n The text that should be displayed inside the FileInput.\n /\n fileSelectionPlaceholder?: string;\n /\n The filetypes that could be selected. Example for multiple types: 'image/, video/'.\n /\n fileTypes?: string;\n /\n The icon of the image selection.\n /\n imageSelectIcons?: string[];\n /\n If set, pictures can be select via Pixabay.\n /\n imageSelectPlaceholder?: string;\n /\n Whether the FileInput is disabled.\n /\n isDisabled?: boolean;\n /\n The maximum amount of Files that can be uploaded.\n /\n maxFiles?: number;\n /\n The maximum size of a file in MB.\n /\n maxFileSizeInMB?: number;\n /\n A function to be executed when files are added.\n /\n onAdd?: (files: File[] \| UploadedFile[]) => void;\n /\n Function to be executed when the maximum amount of Files are reached.\n /\n onMaxFilesReached?: () => void;\n /\n A function to be executed when a file is removed.\n /\n onRemove?: (file: File \| IFileItem \| UploadedFile) => void;\n /\n Whether the image upload should be prevented.\n /\n shouldPreventImageUpload?: boolean;\n /\n Whether to show a download icon for files that have a `source` set.\n */\n shouldAllowDownload?: boolean;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n shouldPreventImageUpload = false,\n shouldAllowDownload,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<UploadedFile[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: UploadedFile[]) => {\n const newImages: UploadedFile[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles - (internalFiles.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, maxFiles, onAdd],\n );\n\n const handleAdd = useCallback(\n (newFiles: File[] \| UploadedFile[]) => {\n if (Array.isArray(newFiles) && newFiles.length > 0) {\n if (newFiles[0] && 'url' in newFiles[0]) {\n handleAddImages(newFiles as UploadedFile[]);\n } else {\n handleAddFiles(newFiles as File[]);\n }\n }\n },\n [handleAddFiles, handleAddImages],\n );\n\n const handleDeleteFile = useCallback(\n (id: string) => {\n let fileToDelete: File \| IFileItem \| UploadedFile \| undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === id) {\n fileToDelete = file;\n }\n\n return name !== id;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image.name === id) {\n fileToDelete = image;\n }\n\n return image.name !== id;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.id === id \|\| file.name === id) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete \|\| typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const internalIsDisabled = useMemo(() => {\n if (isDisabled) {\n return true;\n }\n\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n const filesToDisplay: IFileItem[] = useMemo(() => {\n const items: IFileItem[] = internalFiles.map((file) => ({\n id: file.name,\n name: file.name,\n size: file.size,\n mimeType: file.type,\n source: file,\n }));\n\n internalImages.forEach((image) => {\n items.push({\n id: image.name ?? image.url,\n name: image.name ?? image.url,\n size: image.size ?? 0,\n mimeType: 'image/png',\n source: image.url,\n });\n });\n\n files?.forEach((file) => {\n items.push(file);\n });\n\n return items;\n }, [files, internalFiles, internalImages]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <FileSelect\n shouldPreventImageUpload={shouldPreventImageUpload}\n maxFiles={maxFiles}\n fileTypes={fileTypes}\n fileSelectionIcons={fileSelectionIcons}\n fileSelectionPlaceholder={fileSelectionPlaceholder}\n imageSelectIcons={imageSelectIcons}\n imageSelectPlaceholder={imageSelectPlaceholder}\n maxFileSizeInMB={maxFileSizeInMB}\n isDisabled={internalIsDisabled}\n onAdd={handleAdd}\n />\n <FileList\n files={filesToDisplay}\n onRemove={handleDeleteFile}\n shouldAllowDownload={shouldAllowDownload}\n />\n </StyledFileInput>\n ),\n [\n shouldPreventImageUpload,\n maxFiles,\n fileTypes,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectIcons,\n imageSelectPlaceholder,\n maxFileSizeInMB,\n internalIsDisabled,\n handleAdd,\n filesToDisplay,\n handleDeleteFile,\n shouldAllowDownload,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"FileInput.js","names":["React","forwardRef","useCallback","useImperativeHandle","useMemo","useState","filterDuplicateFile","filterDuplicateFileUrls","isValidFileType","StyledFileInput","FileList","FileSelect","TSIMG_FILE_TYPES","STREAMINGSERVICE_FILE_TYPES","FileInput","fileSelectionIcons","imageSelectIcons","fileTypes","onMaxFilesReached","maxFiles","onRemove","files","isDisabled","maxFileSizeInMB","onAdd","fileSelectionPlaceholder","imageSelectPlaceholder","shouldPreventImageUpload","shouldAllowDownload","shouldEnableKeyboardHighlighting","ref","internalFiles","setInternalFiles","internalImages","setInternalImages","handleInputClear","clear","handleAddImages","images","newImages","forEach","image","newFile","push","tmp","slice","length","prevState","handleAddFiles","newFiles","newFileItems","file","types","handleAdd","Array","isArray","handleDeleteFile","id","fileToDelete","filteredFiles","filter","name","filteredImages","internalIsDisabled","filesToDisplay","items","map","size","mimeType","type","source","url","createElement","displayName"],"sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { filterDuplicateFile, filterDuplicateFileUrls, isValidFileType } from '../../utils/file';\nimport { StyledFileInput } from './FileInput.styles';\nimport FileList, { IFileItem } from '../file-list/FileList';\nimport FileSelect, { UploadedFile } from '../file-select/FileSelect';\n\nexport const TSIMG_FILE_TYPES =\n 'image/png, image/jpg, image/jpeg, image/gif, image/webp, image/svg+xml, image/avif';\n\nexport const STREAMINGSERVICE_FILE_TYPES =\n 'video/mp4, video/webm, video/avi, video/flv, video/wmv, video/mpg, video/quicktime';\n\nexport type FileInputProps = {\n /*\n Already uploaded files to display.\n /\n files?: IFileItem[];\n /\n An array of icons that should be displayed inside the FileInput\n /\n fileSelectionIcons?: string[];\n /\n The text that should be displayed inside the FileInput.\n /\n fileSelectionPlaceholder?: string;\n /\n The filetypes that could be selected. Example for multiple types: 'image/, video/'.\n /\n fileTypes?: string;\n /\n The icon of the image selection.\n /\n imageSelectIcons?: string[];\n /\n If set, pictures can be select via Pixabay.\n /\n imageSelectPlaceholder?: string;\n /\n Whether the FileInput is disabled.\n /\n isDisabled?: boolean;\n /\n The maximum amount of Files that can be uploaded.\n /\n maxFiles?: number;\n /\n The maximum size of a file in MB.\n /\n maxFileSizeInMB?: number;\n /\n A function to be executed when files are added.\n /\n onAdd?: (files: File[] \| UploadedFile[]) => void;\n /\n Function to be executed when the maximum amount of Files are reached.\n /\n onMaxFilesReached?: () => void;\n /\n A function to be executed when a file is removed.\n /\n onRemove?: (file: File \| IFileItem \| UploadedFile) => void;\n /\n Whether the image upload should be prevented.\n /\n shouldPreventImageUpload?: boolean;\n /\n Whether to show a download icon for files that have a `source` set.\n /\n shouldAllowDownload?: boolean;\n /\n Enables keyboard-only focus highlighting for the file selection trigger.\n */\n shouldEnableKeyboardHighlighting?: boolean;\n};\n\nexport type FileInputRef = {\n clear: () => void;\n};\n\nconst FileInput = forwardRef<FileInputRef, FileInputProps>(\n (\n {\n fileSelectionIcons = ['fa fa-upload'],\n imageSelectIcons = ['ts-image'],\n fileTypes,\n onMaxFilesReached,\n maxFiles,\n onRemove,\n files,\n isDisabled,\n maxFileSizeInMB,\n onAdd,\n fileSelectionPlaceholder = 'Dateien hochladen',\n imageSelectPlaceholder,\n shouldPreventImageUpload = false,\n shouldAllowDownload,\n shouldEnableKeyboardHighlighting,\n },\n ref,\n ) => {\n const [internalFiles, setInternalFiles] = useState<File[]>([]);\n const [internalImages, setInternalImages] = useState<UploadedFile[]>([]);\n\n const handleInputClear = () => {\n setInternalFiles([]);\n setInternalImages([]);\n };\n\n useImperativeHandle(\n ref,\n () => ({\n clear: handleInputClear,\n }),\n [],\n );\n\n const handleAddImages = useCallback(\n (images: UploadedFile[]) => {\n const newImages: UploadedFile[] = [];\n\n images.forEach((image) => {\n if (!filterDuplicateFileUrls({ files: internalImages, newFile: image })) {\n newImages.push(image);\n }\n });\n\n let tmp = newImages;\n\n if (maxFiles) {\n tmp = newImages.slice(\n 0,\n maxFiles -\n (internalFiles.length + internalImages.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalImages((prevState) => [...prevState, ...tmp]);\n },\n [files?.length, internalFiles.length, internalImages, maxFiles, onAdd],\n );\n\n const handleAddFiles = useCallback(\n (newFiles: File[]) => {\n const newFileItems: File[] = [];\n\n newFiles.forEach((file) => {\n if (fileTypes && !isValidFileType({ file, types: fileTypes })) {\n return;\n }\n\n if (file && !filterDuplicateFile({ files: internalFiles, newFile: file })) {\n newFileItems.push(file);\n }\n });\n\n let tmp = newFileItems;\n\n if (maxFiles) {\n tmp = newFileItems.slice(\n 0,\n maxFiles - (internalFiles.length + (files?.length ?? 0)),\n );\n }\n\n if (tmp.length > 0 && typeof onAdd === 'function') {\n onAdd(tmp);\n }\n\n setInternalFiles((prevState) => [...prevState, ...tmp]);\n },\n [fileTypes, files?.length, internalFiles, maxFiles, onAdd],\n );\n\n const handleAdd = useCallback(\n (newFiles: File[] \| UploadedFile[]) => {\n if (Array.isArray(newFiles) && newFiles.length > 0) {\n if (newFiles[0] && 'url' in newFiles[0]) {\n handleAddImages(newFiles as UploadedFile[]);\n } else {\n handleAddFiles(newFiles as File[]);\n }\n }\n },\n [handleAddFiles, handleAddImages],\n );\n\n const handleDeleteFile = useCallback(\n (id: string) => {\n let fileToDelete: File \| IFileItem \| UploadedFile \| undefined;\n\n const filteredFiles = internalFiles.filter((file) => {\n const { name } = file;\n\n if (name === id) {\n fileToDelete = file;\n }\n\n return name !== id;\n });\n\n setInternalFiles(filteredFiles);\n\n if (!fileToDelete) {\n const filteredImages = internalImages.filter((image) => {\n if (image.name === id) {\n fileToDelete = image;\n }\n\n return image.name !== id;\n });\n\n setInternalImages(filteredImages);\n }\n\n if (!fileToDelete) {\n files?.forEach((file) => {\n if (file.id === id \|\| file.name === id) {\n fileToDelete = file;\n }\n });\n }\n\n if (!fileToDelete \|\| typeof onRemove !== 'function') {\n return;\n }\n\n onRemove(fileToDelete);\n },\n [files, internalFiles, internalImages, onRemove],\n );\n\n const internalIsDisabled = useMemo(() => {\n if (isDisabled) {\n return true;\n }\n\n if (maxFiles) {\n if (internalFiles.length + internalImages.length >= maxFiles) {\n if (typeof onMaxFilesReached === 'function') {\n onMaxFilesReached();\n }\n\n return true;\n }\n }\n\n return false;\n }, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);\n\n const filesToDisplay: IFileItem[] = useMemo(() => {\n const items: IFileItem[] = internalFiles.map((file) => ({\n id: file.name,\n name: file.name,\n size: file.size,\n mimeType: file.type,\n source: file,\n }));\n\n internalImages.forEach((image) => {\n items.push({\n id: image.name ?? image.url,\n name: image.name ?? image.url,\n size: image.size ?? 0,\n mimeType: 'image/png',\n source: image.url,\n });\n });\n\n files?.forEach((file) => {\n items.push(file);\n });\n\n return items;\n }, [files, internalFiles, internalImages]);\n\n return useMemo(\n () => (\n <StyledFileInput>\n <FileSelect\n shouldPreventImageUpload={shouldPreventImageUpload}\n shouldEnableKeyboardHighlighting={shouldEnableKeyboardHighlighting}\n maxFiles={maxFiles}\n fileTypes={fileTypes}\n fileSelectionIcons={fileSelectionIcons}\n fileSelectionPlaceholder={fileSelectionPlaceholder}\n imageSelectIcons={imageSelectIcons}\n imageSelectPlaceholder={imageSelectPlaceholder}\n maxFileSizeInMB={maxFileSizeInMB}\n isDisabled={internalIsDisabled}\n onAdd={handleAdd}\n />\n <FileList\n files={filesToDisplay}\n onRemove={handleDeleteFile}\n shouldAllowDownload={shouldAllowDownload}\n />\n </StyledFileInput>\n ),\n [\n shouldPreventImageUpload,\n shouldEnableKeyboardHighlighting,\n maxFiles,\n fileTypes,\n fileSelectionIcons,\n fileSelectionPlaceholder,\n imageSelectIcons,\n imageSelectPlaceholder,\n maxFileSizeInMB,\n internalIsDisabled,\n handleAdd,\n filesToDisplay,\n handleDeleteFile,\n shouldAllowDownload,\n ],\n );\n },\n);\n\nFileInput.displayName = 'FileInput';\n\nexport default FileInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/file-list/file-item/FileItem.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { getHumanSize, getIconByMimeType } from '../../../utils/file';
 import Icon from '../../icon/Icon';
 import ContextMenu from '../../context-menu/ContextMenu';
 import ListItem from '../../list/list-item/ListItem';
-import { StyledFileItem, StyledFileItemIcon } from './FileItem.styles';
+import { StyledFileItem, StyledFileItemKeyboardWrapper, StyledFileItemIcon } from './FileItem.styles';
 import { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';
 import textStrings from '../../../constants/textStrings';
 const FileItem = ({
@@ -15,6 +15,24 @@ const FileItem = ({
   source,
   shouldAllowDownload
 }) => {
+  const handleRemove = useCallback(() => {
+    if (typeof onRemove === 'function') {
+      onRemove(id);
+    }
+  }, [id, onRemove]);
+  const handleItemKeyDown = useCallback(event => {
+    if (event.key === 'Delete') {
+      event.preventDefault();
+      handleRemove();
+    }
+  }, [handleRemove]);
+  const handleRemoveKeyDown = useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      handleRemove();
+    }
+  }, [handleRemove]);
   const humanFileSize = useMemo(() => {
     if (typeof size === 'number') {
       return getHumanSize(size);
@@ -107,12 +125,15 @@ const FileItem = ({
     }
     return undefined;
   }, [canDownload, canRemove, downloadText, handleDownload, id, onRemove, removeText]);
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileItem, null, /*#__PURE__*/React.createElement(ListItem, {
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFileItem, null, /*#__PURE__*/React.createElement(StyledFileItemKeyboardWrapper, {
+    onKeyDown: handleItemKeyDown,
+    tabIndex: typeof onRemove === 'function' ? 0 : -1
+  }, /*#__PURE__*/React.createElement(ListItem, {
     title: name,
     subtitle: humanFileSize,
     icons: [icon],
     rightElements: rightElement
-  })), [humanFileSize, icon, name, rightElement]);
+  }))), [handleItemKeyDown, humanFileSize, icon, name, rightElement]);
 };
 FileItem.displayName = 'FileList';
 export default FileItem;