@chayns-components/core 5.0.0-beta.1289 → 5.0.0-beta.1291

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

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","names":["_chaynsApi","require","_react","_react2","_interopRequireWildcard","_reactDom","_uuid","_contextMenu","_environment","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ContextMenu","forwardRef","alignment","children","createElement","icons","size","container","coordinates","shouldHidePopupArrow","items","headline","onHide","onShow","shouldCloseOnPopupClick","shouldSeparateLastItem","shouldShowHoverEffect","zIndex","ref","internalCoordinates","setInternalCoordinates","useState","x","y","newContainer","setNewContainer","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","isTouch","getIsTouch","useEffect","current","el","element","closest","Element","handleHide","useCallback","handleShow","result","createDialog","type","DialogType","SELECT","buttons","list","map","text","isSelected","index","name","id","icon","open","_items$result$","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","_contextMenuContentRe","contains","target","useImperativeHandle","hide","show","document","addEventListener","window","removeEventListener","createPortal","AnimatePresence","initial","key","Fragment","StyledContextMenu","className","$isActive","$shouldAddHoverEffect","displayName","_default","exports"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    isSelected?: boolean;\n    text: string;\n    shouldShowSpacer?: boolean;\n};\n\nexport type ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The headline of the contextmenu.\n     */\n    headline?: string;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be closed if its clicked.\n     */\n    shouldCloseOnPopupClick?: boolean;\n    /**\n     * Whether the arrow of the popup should be hidden.\n     */\n    shouldHidePopupArrow?: boolean;\n    /**\n     * Whether the last item should be separated.\n     */\n    shouldSeparateLastItem?: boolean;\n    /**\n     * Whether the hover effect should be shown.\n     */\n    shouldShowHoverEffect?: boolean;\n    /**\n     * The z-index of the popup.\n     */\n    zIndex?: number;\n};\n\ninterface SelectDialogResult {\n    buttonType: number;\n    result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container,\n            coordinates,\n            shouldHidePopupArrow = false,\n            items,\n            headline,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n            shouldSeparateLastItem = false,\n            shouldShowHoverEffect = false,\n            zIndex = 20,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const uuid = useUuid();\n\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const isTouch = getIsTouch();\n\n        useEffect(() => {\n            if (contextMenuRef.current && !container) {\n                const el = contextMenuRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            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: icons[0],\n                    })),\n                }).open()) as SelectDialogResult;\n\n                if (result && typeof result[0] === 'number') {\n                    void items[result[0]]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                if (!newContainer) {\n                    return;\n                }\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n                const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n                const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n                const x =\n                    (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n                const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop;\n\n                setInternalCoordinates({ x, y });\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [isTouch, items, newContainer]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            },\n            [handleHide, shouldCloseOnPopupClick],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                shouldSeparateLastItem={shouldSeparateLastItem}\n                                zIndex={zIndex}\n                                headline={headline}\n                                shouldHidePopupArrow={shouldHidePopupArrow}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n            zIndex,\n            shouldHidePopupArrow,\n            headline,\n            shouldSeparateLastItem,\n        ]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    $isActive={isContentShown && shouldShowHoverEffect}\n                    $shouldAddHoverEffect={!isTouch && shouldShowHoverEffect}\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ContextMenu.js","names":["_chaynsApi","require","_react","_react2","_interopRequireWildcard","_reactDom","_uuid","_contextMenu","_environment","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ContextMenu","forwardRef","alignment","children","createElement","icons","size","container","coordinates","shouldHidePopupArrow","items","headline","onHide","onShow","shouldCloseOnPopupClick","shouldSeparateLastItem","shouldShowHoverEffect","zIndex","ref","internalCoordinates","setInternalCoordinates","useState","x","y","newContainer","setNewContainer","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","isTouch","getIsTouch","useEffect","current","el","element","closest","Element","handleHide","useCallback","handleShow","result","createDialog","type","DialogType","SELECT","buttons","list","map","text","isSelected","index","name","id","icon","open","_items$result$","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","_contextMenuContentRe","contains","target","useImperativeHandle","hide","show","document","addEventListener","window","removeEventListener","createPortal","AnimatePresence","initial","key","Fragment","StyledContextMenu","className","$isActive","$shouldAddHoverEffect","displayName","_default","exports"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    isSelected?: boolean;\n    text: string;\n    shouldShowSpacer?: boolean;\n};\n\nexport interface ContextMenuRef {\n    hide: VoidFunction;\n    show: VoidFunction;\n}\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The headline of the contextmenu.\n     */\n    headline?: string;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be closed if its clicked.\n     */\n    shouldCloseOnPopupClick?: boolean;\n    /**\n     * Whether the arrow of the popup should be hidden.\n     */\n    shouldHidePopupArrow?: boolean;\n    /**\n     * Whether the last item should be separated.\n     */\n    shouldSeparateLastItem?: boolean;\n    /**\n     * Whether the hover effect should be shown.\n     */\n    shouldShowHoverEffect?: boolean;\n    /**\n     * The z-index of the popup.\n     */\n    zIndex?: number;\n};\n\ninterface SelectDialogResult {\n    buttonType: number;\n    result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n            container,\n            coordinates,\n            shouldHidePopupArrow = false,\n            items,\n            headline,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n            shouldSeparateLastItem = false,\n            shouldShowHoverEffect = false,\n            zIndex = 20,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const uuid = useUuid();\n\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const isTouch = getIsTouch();\n\n        useEffect(() => {\n            if (contextMenuRef.current && !container) {\n                const el = contextMenuRef.current as HTMLElement;\n\n                const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n                setNewContainer(element);\n            }\n        }, [container]);\n\n        useEffect(() => {\n            if (container instanceof Element) {\n                setNewContainer(container);\n            }\n        }, [container]);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            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: icons[0],\n                    })),\n                }).open()) as SelectDialogResult;\n\n                if (result && typeof result[0] === 'number') {\n                    void items[result[0]]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                if (!newContainer) {\n                    return;\n                }\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n                const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n                const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n                const x =\n                    (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n                const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop;\n\n                setInternalCoordinates({ x, y });\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [isTouch, items, newContainer]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            },\n            [handleHide, shouldCloseOnPopupClick],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        useEffect(() => {\n            if (!newContainer) {\n                return;\n            }\n\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                shouldSeparateLastItem={shouldSeparateLastItem}\n                                zIndex={zIndex}\n                                headline={headline}\n                                shouldHidePopupArrow={shouldHidePopupArrow}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    newContainer,\n                ),\n            );\n        }, [\n            alignment,\n            newContainer,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n            zIndex,\n            shouldHidePopupArrow,\n            headline,\n            shouldSeparateLastItem,\n        ]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    $isActive={isContentShown && shouldShowHoverEffect}\n                    $shouldAddHoverEffect={!isTouch && shouldShowHoverEffect}\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}

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

@@ -11,6 +11,7 @@ var _Badge = _interopRequireDefault(require("../badge/Badge"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _TagInput = require("./TagInput.styles");
 var _AreaContextProvider = require("../area-provider/AreaContextProvider");
+var _resize = require("../../hooks/resize.ts");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const TagInput = /*#__PURE__*/(0, _react.forwardRef)(({
@@ -30,6 +31,7 @@ const TagInput = /*#__PURE__*/(0, _react.forwardRef)(({
   const [selectedId, setSelectedId] = (0, _react.useState)();
   const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
   const inputRef = (0, _react.useRef)(null);
+  (0, _resize.useCursorRepaint)(inputRef);
   const theme = (0, _styledComponents.useTheme)();
   (0, _react.useEffect)(() => {
     if (tags) {

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

@@ -1 +1 @@
-{"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","_AreaContextProvider","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TagInput","forwardRef","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldPreventEnter","tags","ref","internalTags","setInternalTags","useState","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","useContext","AreaContext","inputRef","useRef","theme","useTheme","useEffect","slice","handleResetValue","shouldChangeColor","useMemo","useImperativeHandle","blur","_inputRef$current","current","getUnsavedTagText","undefined","resetValue","handleKeyDown","useCallback","event","key","prevValue","prevTags","length","newTag","id","uuidv4","text","_internalTags","newSelectedId","prevState","_prevState","removedId","updatedTags","filter","tag","handleChange","target","value","handleIconClick","content","items","forEach","rightElement","push","createElement","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","preventDefault","stopPropagation","shouldShowInput","StyledTagInput","$shouldChangeColor","StyledTagInputIconWrapper","StyledTagInputTagInput","onKeyDown","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    useImperativeHandle,\n    useContext,\n    ChangeEventHandler,\n    ReactNode,\n    FocusEventHandler,\n    useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputIconWrapper,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type TagInputProps = {\n    /**\n     * An element that should be displayed on the left side of the input.\n     */\n    leftElement?: ReactNode;\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when the input is blurred.\n     */\n    onBlur?: FocusEventHandler;\n    /**\n     * Function to be executed when the value of the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is focused.\n     */\n    onFocus?: FocusEventHandler;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Whether multiple tags should be allowed.\n     */\n    shouldAllowMultiple?: boolean;\n    /**\n     * Whether the enter key should be prevented.\n     */\n    shouldPreventEnter?: boolean;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nexport type TagInputRef = {\n    blur: () => void;\n    getUnsavedTagText: Tag['text'] | undefined;\n    resetValue: () => void;\n};\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    (\n        {\n            leftElement,\n            onAdd,\n            onBlur,\n            onChange,\n            onFocus,\n            onRemove,\n            placeholder,\n            shouldAllowMultiple = true,\n            shouldPreventEnter,\n            tags,\n        },\n        ref,\n    ) => {\n        const [internalTags, setInternalTags] = useState<Tag[]>();\n        const [currentValue, setCurrentValue] = useState('');\n        const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n        const areaProvider = useContext(AreaContext);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const theme = useTheme() as Theme;\n\n        useEffect(() => {\n            if (tags) {\n                setInternalTags(shouldAllowMultiple ? tags : tags.slice(0, 1));\n            }\n        }, [shouldAllowMultiple, tags]);\n\n        const handleResetValue = () => {\n            setCurrentValue('');\n        };\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                blur: () => inputRef.current?.blur(),\n                getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n                resetValue: handleResetValue,\n            }),\n            [currentValue],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent) => {\n                if (event.key === 'Enter' && !shouldPreventEnter) {\n                    setCurrentValue((prevValue) => {\n                        if (!prevValue) {\n                            return '';\n                        }\n\n                        setInternalTags((prevTags) => {\n                            if (!shouldAllowMultiple && (prevTags?.length ?? 0) > 0)\n                                return prevTags;\n\n                            const newTag = { id: uuidv4(), text: prevValue };\n\n                            if (typeof onAdd === 'function') {\n                                onAdd(newTag);\n                            }\n\n                            return prevTags ? [...prevTags, newTag] : [newTag];\n                        });\n\n                        return '';\n                    });\n                }\n\n                if (event.key === 'Backspace' && currentValue === '') {\n                    if (!selectedId) {\n                        if (!internalTags) {\n                            return;\n                        }\n\n                        const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                        setSelectedId(newSelectedId);\n\n                        return;\n                    }\n\n                    setInternalTags((prevState) => {\n                        if (!prevState) {\n                            return prevState;\n                        }\n\n                        const removedId = prevState[prevState.length - 1]?.id;\n\n                        if (!removedId) {\n                            return prevState;\n                        }\n\n                        const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                        if (typeof onRemove === 'function') {\n                            onRemove(removedId);\n                        }\n\n                        setSelectedId(undefined);\n\n                        return updatedTags;\n                    });\n                }\n            },\n            [\n                currentValue,\n                internalTags,\n                onAdd,\n                onRemove,\n                selectedId,\n                shouldAllowMultiple,\n                shouldPreventEnter,\n            ],\n        );\n\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setCurrentValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n\n                if (event.target.value !== '') {\n                    setSelectedId(undefined);\n                }\n            },\n            [onChange],\n        );\n\n        const handleIconClick = useCallback(\n            (id: string) => {\n                setInternalTags((prevState) => {\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(id);\n                    }\n\n                    return updatedTags;\n                });\n            },\n            [onRemove],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            if (!internalTags) {\n                return items;\n            }\n\n            internalTags.forEach(({ text, id, rightElement }) => {\n                items.push(\n                    <Badge\n                        key={`tag-input-${id}`}\n                        backgroundColor={\n                            id === selectedId ? ((theme['206'] as string) ?? undefined) : undefined\n                        }\n                    >\n                        <StyledTagInputTagWrapper>\n                            <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                            {rightElement}\n                            <Icon\n                                icons={['ts-wrong']}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n\n                                    handleIconClick(id);\n                                }}\n                            />\n                        </StyledTagInputTagWrapper>\n                    </Badge>,\n                );\n            });\n\n            return items;\n        }, [handleIconClick, internalTags, selectedId, theme]);\n\n        const shouldShowInput = useMemo(\n            () => shouldAllowMultiple || (internalTags?.length ?? 0) < 1,\n            [internalTags?.length, shouldAllowMultiple],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTagInput $shouldChangeColor={shouldChangeColor}>\n                    {leftElement && (\n                        <StyledTagInputIconWrapper>{leftElement}</StyledTagInputIconWrapper>\n                    )}\n                    {content}\n                    {shouldShowInput && (\n                        <StyledTagInputTagInput\n                            onBlur={onBlur}\n                            onChange={handleChange}\n                            onFocus={onFocus}\n                            onKeyDown={handleKeyDown}\n                            placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                            ref={inputRef}\n                            value={currentValue}\n                        />\n                    )}\n                </StyledTagInput>\n            ),\n            [\n                content,\n                currentValue,\n                handleChange,\n                handleKeyDown,\n                leftElement,\n                onBlur,\n                onFocus,\n                placeholder,\n                shouldChangeColor,\n                shouldShowInput,\n                tags,\n            ],\n        );\n    },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TagInput.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_uuid","_Badge","_interopRequireDefault","_Icon","_TagInput","_AreaContextProvider","_resize","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","TagInput","forwardRef","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldPreventEnter","tags","ref","internalTags","setInternalTags","useState","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","useContext","AreaContext","inputRef","useRef","useCursorRepaint","theme","useTheme","useEffect","slice","handleResetValue","shouldChangeColor","useMemo","useImperativeHandle","blur","_inputRef$current","current","getUnsavedTagText","undefined","resetValue","handleKeyDown","useCallback","event","key","prevValue","prevTags","length","newTag","id","uuidv4","text","_internalTags","newSelectedId","prevState","_prevState","removedId","updatedTags","filter","tag","handleChange","target","value","handleIconClick","content","items","forEach","rightElement","push","createElement","backgroundColor","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","icons","onClick","preventDefault","stopPropagation","shouldShowInput","StyledTagInput","$shouldChangeColor","StyledTagInputIconWrapper","StyledTagInputTagInput","onKeyDown","_default","exports"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    useImperativeHandle,\n    useContext,\n    ChangeEventHandler,\n    ReactNode,\n    FocusEventHandler,\n    useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputIconWrapper,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useCursorRepaint } from '../../hooks/resize.ts';\n\nexport type TagInputProps = {\n    /**\n     * An element that should be displayed on the left side of the input.\n     */\n    leftElement?: ReactNode;\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when the input is blurred.\n     */\n    onBlur?: FocusEventHandler;\n    /**\n     * Function to be executed when the value of the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is focused.\n     */\n    onFocus?: FocusEventHandler;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Whether multiple tags should be allowed.\n     */\n    shouldAllowMultiple?: boolean;\n    /**\n     * Whether the enter key should be prevented.\n     */\n    shouldPreventEnter?: boolean;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nexport type TagInputRef = {\n    blur: () => void;\n    getUnsavedTagText: Tag['text'] | undefined;\n    resetValue: () => void;\n};\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    (\n        {\n            leftElement,\n            onAdd,\n            onBlur,\n            onChange,\n            onFocus,\n            onRemove,\n            placeholder,\n            shouldAllowMultiple = true,\n            shouldPreventEnter,\n            tags,\n        },\n        ref,\n    ) => {\n        const [internalTags, setInternalTags] = useState<Tag[]>();\n        const [currentValue, setCurrentValue] = useState('');\n        const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n        const areaProvider = useContext(AreaContext);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        useCursorRepaint(inputRef);\n\n        const theme = useTheme() as Theme;\n\n        useEffect(() => {\n            if (tags) {\n                setInternalTags(shouldAllowMultiple ? tags : tags.slice(0, 1));\n            }\n        }, [shouldAllowMultiple, tags]);\n\n        const handleResetValue = () => {\n            setCurrentValue('');\n        };\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                blur: () => inputRef.current?.blur(),\n                getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n                resetValue: handleResetValue,\n            }),\n            [currentValue],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent) => {\n                if (event.key === 'Enter' && !shouldPreventEnter) {\n                    setCurrentValue((prevValue) => {\n                        if (!prevValue) {\n                            return '';\n                        }\n\n                        setInternalTags((prevTags) => {\n                            if (!shouldAllowMultiple && (prevTags?.length ?? 0) > 0)\n                                return prevTags;\n\n                            const newTag = { id: uuidv4(), text: prevValue };\n\n                            if (typeof onAdd === 'function') {\n                                onAdd(newTag);\n                            }\n\n                            return prevTags ? [...prevTags, newTag] : [newTag];\n                        });\n\n                        return '';\n                    });\n                }\n\n                if (event.key === 'Backspace' && currentValue === '') {\n                    if (!selectedId) {\n                        if (!internalTags) {\n                            return;\n                        }\n\n                        const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                        setSelectedId(newSelectedId);\n\n                        return;\n                    }\n\n                    setInternalTags((prevState) => {\n                        if (!prevState) {\n                            return prevState;\n                        }\n\n                        const removedId = prevState[prevState.length - 1]?.id;\n\n                        if (!removedId) {\n                            return prevState;\n                        }\n\n                        const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                        if (typeof onRemove === 'function') {\n                            onRemove(removedId);\n                        }\n\n                        setSelectedId(undefined);\n\n                        return updatedTags;\n                    });\n                }\n            },\n            [\n                currentValue,\n                internalTags,\n                onAdd,\n                onRemove,\n                selectedId,\n                shouldAllowMultiple,\n                shouldPreventEnter,\n            ],\n        );\n\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setCurrentValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n\n                if (event.target.value !== '') {\n                    setSelectedId(undefined);\n                }\n            },\n            [onChange],\n        );\n\n        const handleIconClick = useCallback(\n            (id: string) => {\n                setInternalTags((prevState) => {\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(id);\n                    }\n\n                    return updatedTags;\n                });\n            },\n            [onRemove],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            if (!internalTags) {\n                return items;\n            }\n\n            internalTags.forEach(({ text, id, rightElement }) => {\n                items.push(\n                    <Badge\n                        key={`tag-input-${id}`}\n                        backgroundColor={\n                            id === selectedId ? ((theme['206'] as string) ?? undefined) : undefined\n                        }\n                    >\n                        <StyledTagInputTagWrapper>\n                            <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                            {rightElement}\n                            <Icon\n                                icons={['ts-wrong']}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n\n                                    handleIconClick(id);\n                                }}\n                            />\n                        </StyledTagInputTagWrapper>\n                    </Badge>,\n                );\n            });\n\n            return items;\n        }, [handleIconClick, internalTags, selectedId, theme]);\n\n        const shouldShowInput = useMemo(\n            () => shouldAllowMultiple || (internalTags?.length ?? 0) < 1,\n            [internalTags?.length, shouldAllowMultiple],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTagInput $shouldChangeColor={shouldChangeColor}>\n                    {leftElement && (\n                        <StyledTagInputIconWrapper>{leftElement}</StyledTagInputIconWrapper>\n                    )}\n                    {content}\n                    {shouldShowInput && (\n                        <StyledTagInputTagInput\n                            onBlur={onBlur}\n                            onChange={handleChange}\n                            onFocus={onFocus}\n                            onKeyDown={handleKeyDown}\n                            placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                            ref={inputRef}\n                            value={currentValue}\n                        />\n                    )}\n                </StyledTagInput>\n            ),\n            [\n                content,\n                currentValue,\n                handleChange,\n                handleKeyDown,\n                leftElement,\n                onBlur,\n                onFocus,\n                placeholder,\n                shouldChangeColor,\n                shouldShowInput,\n                tags,\n            ],\n        );\n    },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/hooks/resize.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCursorRepaint = useCursorRepaint;
+var _react = require("react");
+var _chaynsApi = require("chayns-api");
+/**
+ * Forces a repaint on the referenced element whenever the window resizes.
+ * Useful for Safari/iOS WebView cursor misalignment issues.
+ */
+function useCursorRepaint(ref) {
+  const {
+    app,
+    os
+  } = (0, _chaynsApi.useDevice)();
+  const {
+    personId
+  } = (0, _chaynsApi.useUser)();
+  (0, _react.useEffect)(() => {
+    console.debug('useCursorRepaint', {
+      app,
+      os,
+      personId
+    });
+
+    // only do if ist the ios chayns app
+    if ((app === null || app === void 0 ? void 0 : app.flavor) !== _chaynsApi.AppFlavor.Chayns || os !== 'iOS' || !['MICH-HAEL1', '516-61460'].includes(personId ?? '')) {
+      return () => {};
+    }
+    const handleResize = () => {
+      console.debug('useCursorRepaint - handleResize');
+      const el = ref.current;
+      console.debug('useCursorRepaint - handleResize', el);
+      if (!el) return;
+
+      // temporarily apply a non-visible transform to force layer repaint
+      el.style.transform = 'translateY(0.1px)';
+      console.debug('useCursorRepaint - handleResize', el.style);
+      requestAnimationFrame(() => {
+        el.style.transform = '';
+        console.debug('useCursorRepaint - handleResize, requestAnimationFrame', el.style);
+      });
+      window.setTimeout(() => {
+        el.style.transform = '';
+        console.debug('useCursorRepaint - handleResize, Timeout', el.style);
+      }, 200);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [app, os, personId, ref]);
+}
+//# sourceMappingURL=resize.js.map

package/lib/cjs/hooks/resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.js","names":["_react","require","_chaynsApi","useCursorRepaint","ref","app","os","useDevice","personId","useUser","useEffect","console","debug","flavor","AppFlavor","Chayns","includes","handleResize","el","current","style","transform","requestAnimationFrame","window","setTimeout","addEventListener","removeEventListener"],"sources":["../../../src/hooks/resize.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\nimport { AppFlavor, useDevice, useUser } from 'chayns-api';\n\n/**\n * Forces a repaint on the referenced element whenever the window resizes.\n * Useful for Safari/iOS WebView cursor misalignment issues.\n */\nexport function useCursorRepaint<T extends HTMLElement>(ref: RefObject<T>) {\n    const { app, os } = useDevice();\n    const { personId } = useUser();\n\n    useEffect(() => {\n        console.debug('useCursorRepaint', {\n            app,\n            os,\n            personId,\n        });\n\n        // only do if ist the ios chayns app\n        if (\n            app?.flavor !== AppFlavor.Chayns ||\n            os !== 'iOS' ||\n            !['MICH-HAEL1', '516-61460'].includes(personId ?? '')\n        ) {\n            return () => {};\n        }\n\n        const handleResize = () => {\n            console.debug('useCursorRepaint - handleResize');\n\n            const el = ref.current;\n\n            console.debug('useCursorRepaint - handleResize', el);\n\n            if (!el) return;\n\n            // temporarily apply a non-visible transform to force layer repaint\n            el.style.transform = 'translateY(0.1px)';\n\n            console.debug('useCursorRepaint - handleResize', el.style);\n\n            requestAnimationFrame(() => {\n                el.style.transform = '';\n\n                console.debug('useCursorRepaint - handleResize, requestAnimationFrame', el.style);\n            });\n\n            window.setTimeout(() => {\n                el.style.transform = '';\n\n                console.debug('useCursorRepaint - handleResize, Timeout', el.style);\n            }, 200);\n        };\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [app, os, personId, ref]);\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEA;AACA;AACA;AACA;AACO,SAASE,gBAAgBA,CAAwBC,GAAiB,EAAE;EACvE,MAAM;IAAEC,GAAG;IAAEC;EAAG,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAC/B,MAAM;IAAEC;EAAS,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAE9B,IAAAC,gBAAS,EAAC,MAAM;IACZC,OAAO,CAACC,KAAK,CAAC,kBAAkB,EAAE;MAC9BP,GAAG;MACHC,EAAE;MACFE;IACJ,CAAC,CAAC;;IAEF;IACA,IACI,CAAAH,GAAG,aAAHA,GAAG,uBAAHA,GAAG,CAAEQ,MAAM,MAAKC,oBAAS,CAACC,MAAM,IAChCT,EAAE,KAAK,KAAK,IACZ,CAAC,CAAC,YAAY,EAAE,WAAW,CAAC,CAACU,QAAQ,CAACR,QAAQ,IAAI,EAAE,CAAC,EACvD;MACE,OAAO,MAAM,CAAC,CAAC;IACnB;IAEA,MAAMS,YAAY,GAAGA,CAAA,KAAM;MACvBN,OAAO,CAACC,KAAK,CAAC,iCAAiC,CAAC;MAEhD,MAAMM,EAAE,GAAGd,GAAG,CAACe,OAAO;MAEtBR,OAAO,CAACC,KAAK,CAAC,iCAAiC,EAAEM,EAAE,CAAC;MAEpD,IAAI,CAACA,EAAE,EAAE;;MAET;MACAA,EAAE,CAACE,KAAK,CAACC,SAAS,GAAG,mBAAmB;MAExCV,OAAO,CAACC,KAAK,CAAC,iCAAiC,EAAEM,EAAE,CAACE,KAAK,CAAC;MAE1DE,qBAAqB,CAAC,MAAM;QACxBJ,EAAE,CAACE,KAAK,CAACC,SAAS,GAAG,EAAE;QAEvBV,OAAO,CAACC,KAAK,CAAC,wDAAwD,EAAEM,EAAE,CAACE,KAAK,CAAC;MACrF,CAAC,CAAC;MAEFG,MAAM,CAACC,UAAU,CAAC,MAAM;QACpBN,EAAE,CAACE,KAAK,CAACC,SAAS,GAAG,EAAE;QAEvBV,OAAO,CAACC,KAAK,CAAC,0CAA0C,EAAEM,EAAE,CAACE,KAAK,CAAC;MACvE,CAAC,EAAE,GAAG,CAAC;IACX,CAAC;IAEDG,MAAM,CAACE,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTM,MAAM,CAACG,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACZ,GAAG,EAAEC,EAAE,EAAEE,QAAQ,EAAEJ,GAAG,CAAC,CAAC;AAChC","ignoreList":[]}

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

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

package/lib/esm/components/tag-input/TagInput.js

@@ -5,6 +5,7 @@ import Badge from '../badge/Badge';
 import Icon from '../icon/Icon';
 import { StyledTagInput, StyledTagInputIconWrapper, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
 import { AreaContext } from '../area-provider/AreaContextProvider';
+import { useCursorRepaint } from '../../hooks/resize.ts';
 const TagInput = /*#__PURE__*/forwardRef(({
   leftElement,
   onAdd,
@@ -22,6 +23,7 @@ const TagInput = /*#__PURE__*/forwardRef(({
   const [selectedId, setSelectedId] = useState();
   const areaProvider = useContext(AreaContext);
   const inputRef = useRef(null);
+  useCursorRepaint(inputRef);
   const theme = useTheme();
   useEffect(() => {
     if (tags) {

package/lib/esm/components/tag-input/TagInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.js","names":["React","forwardRef","useCallback","useEffect","useMemo","useState","useImperativeHandle","useContext","useRef","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputIconWrapper","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","AreaContext","TagInput","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldPreventEnter","tags","ref","internalTags","setInternalTags","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","inputRef","theme","slice","handleResetValue","shouldChangeColor","blur","current","getUnsavedTagText","undefined","resetValue","handleKeyDown","event","key","prevValue","prevTags","length","newTag","id","text","newSelectedId","prevState","removedId","updatedTags","filter","tag","handleChange","target","value","handleIconClick","content","items","forEach","rightElement","push","createElement","backgroundColor","icons","onClick","preventDefault","stopPropagation","shouldShowInput","$shouldChangeColor","onKeyDown"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    useImperativeHandle,\n    useContext,\n    ChangeEventHandler,\n    ReactNode,\n    FocusEventHandler,\n    useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputIconWrapper,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport type TagInputProps = {\n    /**\n     * An element that should be displayed on the left side of the input.\n     */\n    leftElement?: ReactNode;\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when the input is blurred.\n     */\n    onBlur?: FocusEventHandler;\n    /**\n     * Function to be executed when the value of the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is focused.\n     */\n    onFocus?: FocusEventHandler;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Whether multiple tags should be allowed.\n     */\n    shouldAllowMultiple?: boolean;\n    /**\n     * Whether the enter key should be prevented.\n     */\n    shouldPreventEnter?: boolean;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nexport type TagInputRef = {\n    blur: () => void;\n    getUnsavedTagText: Tag['text'] | undefined;\n    resetValue: () => void;\n};\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    (\n        {\n            leftElement,\n            onAdd,\n            onBlur,\n            onChange,\n            onFocus,\n            onRemove,\n            placeholder,\n            shouldAllowMultiple = true,\n            shouldPreventEnter,\n            tags,\n        },\n        ref,\n    ) => {\n        const [internalTags, setInternalTags] = useState<Tag[]>();\n        const [currentValue, setCurrentValue] = useState('');\n        const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n        const areaProvider = useContext(AreaContext);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        const theme = useTheme() as Theme;\n\n        useEffect(() => {\n            if (tags) {\n                setInternalTags(shouldAllowMultiple ? tags : tags.slice(0, 1));\n            }\n        }, [shouldAllowMultiple, tags]);\n\n        const handleResetValue = () => {\n            setCurrentValue('');\n        };\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                blur: () => inputRef.current?.blur(),\n                getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n                resetValue: handleResetValue,\n            }),\n            [currentValue],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent) => {\n                if (event.key === 'Enter' && !shouldPreventEnter) {\n                    setCurrentValue((prevValue) => {\n                        if (!prevValue) {\n                            return '';\n                        }\n\n                        setInternalTags((prevTags) => {\n                            if (!shouldAllowMultiple && (prevTags?.length ?? 0) > 0)\n                                return prevTags;\n\n                            const newTag = { id: uuidv4(), text: prevValue };\n\n                            if (typeof onAdd === 'function') {\n                                onAdd(newTag);\n                            }\n\n                            return prevTags ? [...prevTags, newTag] : [newTag];\n                        });\n\n                        return '';\n                    });\n                }\n\n                if (event.key === 'Backspace' && currentValue === '') {\n                    if (!selectedId) {\n                        if (!internalTags) {\n                            return;\n                        }\n\n                        const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                        setSelectedId(newSelectedId);\n\n                        return;\n                    }\n\n                    setInternalTags((prevState) => {\n                        if (!prevState) {\n                            return prevState;\n                        }\n\n                        const removedId = prevState[prevState.length - 1]?.id;\n\n                        if (!removedId) {\n                            return prevState;\n                        }\n\n                        const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                        if (typeof onRemove === 'function') {\n                            onRemove(removedId);\n                        }\n\n                        setSelectedId(undefined);\n\n                        return updatedTags;\n                    });\n                }\n            },\n            [\n                currentValue,\n                internalTags,\n                onAdd,\n                onRemove,\n                selectedId,\n                shouldAllowMultiple,\n                shouldPreventEnter,\n            ],\n        );\n\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setCurrentValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n\n                if (event.target.value !== '') {\n                    setSelectedId(undefined);\n                }\n            },\n            [onChange],\n        );\n\n        const handleIconClick = useCallback(\n            (id: string) => {\n                setInternalTags((prevState) => {\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(id);\n                    }\n\n                    return updatedTags;\n                });\n            },\n            [onRemove],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            if (!internalTags) {\n                return items;\n            }\n\n            internalTags.forEach(({ text, id, rightElement }) => {\n                items.push(\n                    <Badge\n                        key={`tag-input-${id}`}\n                        backgroundColor={\n                            id === selectedId ? ((theme['206'] as string) ?? undefined) : undefined\n                        }\n                    >\n                        <StyledTagInputTagWrapper>\n                            <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                            {rightElement}\n                            <Icon\n                                icons={['ts-wrong']}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n\n                                    handleIconClick(id);\n                                }}\n                            />\n                        </StyledTagInputTagWrapper>\n                    </Badge>,\n                );\n            });\n\n            return items;\n        }, [handleIconClick, internalTags, selectedId, theme]);\n\n        const shouldShowInput = useMemo(\n            () => shouldAllowMultiple || (internalTags?.length ?? 0) < 1,\n            [internalTags?.length, shouldAllowMultiple],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTagInput $shouldChangeColor={shouldChangeColor}>\n                    {leftElement && (\n                        <StyledTagInputIconWrapper>{leftElement}</StyledTagInputIconWrapper>\n                    )}\n                    {content}\n                    {shouldShowInput && (\n                        <StyledTagInputTagInput\n                            onBlur={onBlur}\n                            onChange={handleChange}\n                            onFocus={onFocus}\n                            onKeyDown={handleKeyDown}\n                            placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                            ref={inputRef}\n                            value={currentValue}\n                        />\n                    )}\n                </StyledTagInput>\n            ),\n            [\n                content,\n                currentValue,\n                handleChange,\n                handleKeyDown,\n                leftElement,\n                onBlur,\n                onFocus,\n                placeholder,\n                shouldChangeColor,\n                shouldShowInput,\n                tags,\n            ],\n        );\n    },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TagInput.js","names":["React","forwardRef","useCallback","useEffect","useMemo","useState","useImperativeHandle","useContext","useRef","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputIconWrapper","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","AreaContext","useCursorRepaint","TagInput","leftElement","onAdd","onBlur","onChange","onFocus","onRemove","placeholder","shouldAllowMultiple","shouldPreventEnter","tags","ref","internalTags","setInternalTags","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","inputRef","theme","slice","handleResetValue","shouldChangeColor","blur","current","getUnsavedTagText","undefined","resetValue","handleKeyDown","event","key","prevValue","prevTags","length","newTag","id","text","newSelectedId","prevState","removedId","updatedTags","filter","tag","handleChange","target","value","handleIconClick","content","items","forEach","rightElement","push","createElement","backgroundColor","icons","onClick","preventDefault","stopPropagation","shouldShowInput","$shouldChangeColor","onKeyDown"],"sources":["../../../../src/components/tag-input/TagInput.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type ChangeEvent,\n    type KeyboardEvent,\n    type ReactElement,\n    useImperativeHandle,\n    useContext,\n    ChangeEventHandler,\n    ReactNode,\n    FocusEventHandler,\n    useRef,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport type { Tag } from '../../types/tagInput';\nimport Badge from '../badge/Badge';\nimport Icon from '../icon/Icon';\nimport {\n    StyledTagInput,\n    StyledTagInputIconWrapper,\n    StyledTagInputTagInput,\n    StyledTagInputTagWrapper,\n    StyledTagInputTagWrapperText,\n} from './TagInput.styles';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useCursorRepaint } from '../../hooks/resize.ts';\n\nexport type TagInputProps = {\n    /**\n     * An element that should be displayed on the left side of the input.\n     */\n    leftElement?: ReactNode;\n    /**\n     * Function to be executed when a tag is added.\n     */\n    onAdd?: (tag: Tag) => void;\n    /**\n     * Function to be executed when the input is blurred.\n     */\n    onBlur?: FocusEventHandler;\n    /**\n     * Function to be executed when the value of the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is focused.\n     */\n    onFocus?: FocusEventHandler;\n    /**\n     * Function to be executed when a tag is removed.\n     */\n    onRemove?: (id: string) => void;\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Whether multiple tags should be allowed.\n     */\n    shouldAllowMultiple?: boolean;\n    /**\n     * Whether the enter key should be prevented.\n     */\n    shouldPreventEnter?: boolean;\n    /**\n     * The tags that should be displayed.\n     */\n    tags?: Tag[];\n};\n\nexport type TagInputRef = {\n    blur: () => void;\n    getUnsavedTagText: Tag['text'] | undefined;\n    resetValue: () => void;\n};\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    (\n        {\n            leftElement,\n            onAdd,\n            onBlur,\n            onChange,\n            onFocus,\n            onRemove,\n            placeholder,\n            shouldAllowMultiple = true,\n            shouldPreventEnter,\n            tags,\n        },\n        ref,\n    ) => {\n        const [internalTags, setInternalTags] = useState<Tag[]>();\n        const [currentValue, setCurrentValue] = useState('');\n        const [selectedId, setSelectedId] = useState<Tag['id']>();\n\n        const areaProvider = useContext(AreaContext);\n\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        useCursorRepaint(inputRef);\n\n        const theme = useTheme() as Theme;\n\n        useEffect(() => {\n            if (tags) {\n                setInternalTags(shouldAllowMultiple ? tags : tags.slice(0, 1));\n            }\n        }, [shouldAllowMultiple, tags]);\n\n        const handleResetValue = () => {\n            setCurrentValue('');\n        };\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                blur: () => inputRef.current?.blur(),\n                getUnsavedTagText: currentValue !== '' ? currentValue : undefined,\n                resetValue: handleResetValue,\n            }),\n            [currentValue],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent) => {\n                if (event.key === 'Enter' && !shouldPreventEnter) {\n                    setCurrentValue((prevValue) => {\n                        if (!prevValue) {\n                            return '';\n                        }\n\n                        setInternalTags((prevTags) => {\n                            if (!shouldAllowMultiple && (prevTags?.length ?? 0) > 0)\n                                return prevTags;\n\n                            const newTag = { id: uuidv4(), text: prevValue };\n\n                            if (typeof onAdd === 'function') {\n                                onAdd(newTag);\n                            }\n\n                            return prevTags ? [...prevTags, newTag] : [newTag];\n                        });\n\n                        return '';\n                    });\n                }\n\n                if (event.key === 'Backspace' && currentValue === '') {\n                    if (!selectedId) {\n                        if (!internalTags) {\n                            return;\n                        }\n\n                        const newSelectedId = internalTags[internalTags.length - 1]?.id;\n\n                        setSelectedId(newSelectedId);\n\n                        return;\n                    }\n\n                    setInternalTags((prevState) => {\n                        if (!prevState) {\n                            return prevState;\n                        }\n\n                        const removedId = prevState[prevState.length - 1]?.id;\n\n                        if (!removedId) {\n                            return prevState;\n                        }\n\n                        const updatedTags = (prevState ?? []).filter((tag) => tag.id !== removedId);\n\n                        if (typeof onRemove === 'function') {\n                            onRemove(removedId);\n                        }\n\n                        setSelectedId(undefined);\n\n                        return updatedTags;\n                    });\n                }\n            },\n            [\n                currentValue,\n                internalTags,\n                onAdd,\n                onRemove,\n                selectedId,\n                shouldAllowMultiple,\n                shouldPreventEnter,\n            ],\n        );\n\n        const handleChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setCurrentValue(event.target.value);\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n\n                if (event.target.value !== '') {\n                    setSelectedId(undefined);\n                }\n            },\n            [onChange],\n        );\n\n        const handleIconClick = useCallback(\n            (id: string) => {\n                setInternalTags((prevState) => {\n                    const updatedTags = (prevState ?? []).filter((tag) => tag.id !== id);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove(id);\n                    }\n\n                    return updatedTags;\n                });\n            },\n            [onRemove],\n        );\n\n        const content = useMemo(() => {\n            const items: ReactElement[] = [];\n\n            if (!internalTags) {\n                return items;\n            }\n\n            internalTags.forEach(({ text, id, rightElement }) => {\n                items.push(\n                    <Badge\n                        key={`tag-input-${id}`}\n                        backgroundColor={\n                            id === selectedId ? ((theme['206'] as string) ?? undefined) : undefined\n                        }\n                    >\n                        <StyledTagInputTagWrapper>\n                            <StyledTagInputTagWrapperText>{text}</StyledTagInputTagWrapperText>\n                            {rightElement}\n                            <Icon\n                                icons={['ts-wrong']}\n                                onClick={(event) => {\n                                    event.preventDefault();\n                                    event.stopPropagation();\n\n                                    handleIconClick(id);\n                                }}\n                            />\n                        </StyledTagInputTagWrapper>\n                    </Badge>,\n                );\n            });\n\n            return items;\n        }, [handleIconClick, internalTags, selectedId, theme]);\n\n        const shouldShowInput = useMemo(\n            () => shouldAllowMultiple || (internalTags?.length ?? 0) < 1,\n            [internalTags?.length, shouldAllowMultiple],\n        );\n\n        return useMemo(\n            () => (\n                <StyledTagInput $shouldChangeColor={shouldChangeColor}>\n                    {leftElement && (\n                        <StyledTagInputIconWrapper>{leftElement}</StyledTagInputIconWrapper>\n                    )}\n                    {content}\n                    {shouldShowInput && (\n                        <StyledTagInputTagInput\n                            onBlur={onBlur}\n                            onChange={handleChange}\n                            onFocus={onFocus}\n                            onKeyDown={handleKeyDown}\n                            placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                            ref={inputRef}\n                            value={currentValue}\n                        />\n                    )}\n                </StyledTagInput>\n            ),\n            [\n                content,\n                currentValue,\n                handleChange,\n                handleKeyDown,\n                leftElement,\n                onBlur,\n                onFocus,\n                placeholder,\n                shouldChangeColor,\n                shouldShowInput,\n                tags,\n            ],\n        );\n    },\n);\n\nexport default TagInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/hooks/resize.js

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { AppFlavor, useDevice, useUser } from 'chayns-api';
+
+/**
+ * Forces a repaint on the referenced element whenever the window resizes.
+ * Useful for Safari/iOS WebView cursor misalignment issues.
+ */
+export function useCursorRepaint(ref) {
+  const {
+    app,
+    os
+  } = useDevice();
+  const {
+    personId
+  } = useUser();
+  useEffect(() => {
+    console.debug('useCursorRepaint', {
+      app,
+      os,
+      personId
+    });
+
+    // only do if ist the ios chayns app
+    if (app?.flavor !== AppFlavor.Chayns || os !== 'iOS' || !['MICH-HAEL1', '516-61460'].includes(personId ?? '')) {
+      return () => {};
+    }
+    const handleResize = () => {
+      console.debug('useCursorRepaint - handleResize');
+      const el = ref.current;
+      console.debug('useCursorRepaint - handleResize', el);
+      if (!el) return;
+
+      // temporarily apply a non-visible transform to force layer repaint
+      el.style.transform = 'translateY(0.1px)';
+      console.debug('useCursorRepaint - handleResize', el.style);
+      requestAnimationFrame(() => {
+        el.style.transform = '';
+        console.debug('useCursorRepaint - handleResize, requestAnimationFrame', el.style);
+      });
+      window.setTimeout(() => {
+        el.style.transform = '';
+        console.debug('useCursorRepaint - handleResize, Timeout', el.style);
+      }, 200);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [app, os, personId, ref]);
+}
+//# sourceMappingURL=resize.js.map

package/lib/esm/hooks/resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.js","names":["useEffect","AppFlavor","useDevice","useUser","useCursorRepaint","ref","app","os","personId","console","debug","flavor","Chayns","includes","handleResize","el","current","style","transform","requestAnimationFrame","window","setTimeout","addEventListener","removeEventListener"],"sources":["../../../src/hooks/resize.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\nimport { AppFlavor, useDevice, useUser } from 'chayns-api';\n\n/**\n * Forces a repaint on the referenced element whenever the window resizes.\n * Useful for Safari/iOS WebView cursor misalignment issues.\n */\nexport function useCursorRepaint<T extends HTMLElement>(ref: RefObject<T>) {\n    const { app, os } = useDevice();\n    const { personId } = useUser();\n\n    useEffect(() => {\n        console.debug('useCursorRepaint', {\n            app,\n            os,\n            personId,\n        });\n\n        // only do if ist the ios chayns app\n        if (\n            app?.flavor !== AppFlavor.Chayns ||\n            os !== 'iOS' ||\n            !['MICH-HAEL1', '516-61460'].includes(personId ?? '')\n        ) {\n            return () => {};\n        }\n\n        const handleResize = () => {\n            console.debug('useCursorRepaint - handleResize');\n\n            const el = ref.current;\n\n            console.debug('useCursorRepaint - handleResize', el);\n\n            if (!el) return;\n\n            // temporarily apply a non-visible transform to force layer repaint\n            el.style.transform = 'translateY(0.1px)';\n\n            console.debug('useCursorRepaint - handleResize', el.style);\n\n            requestAnimationFrame(() => {\n                el.style.transform = '';\n\n                console.debug('useCursorRepaint - handleResize, requestAnimationFrame', el.style);\n            });\n\n            window.setTimeout(() => {\n                el.style.transform = '';\n\n                console.debug('useCursorRepaint - handleResize, Timeout', el.style);\n            }, 200);\n        };\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [app, os, personId, ref]);\n}\n"],"mappings":"AAAA,SAAoBA,SAAS,QAAQ,OAAO;AAC5C,SAASC,SAAS,EAAEC,SAAS,EAAEC,OAAO,QAAQ,YAAY;;AAE1D;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAwBC,GAAiB,EAAE;EACvE,MAAM;IAAEC,GAAG;IAAEC;EAAG,CAAC,GAAGL,SAAS,CAAC,CAAC;EAC/B,MAAM;IAAEM;EAAS,CAAC,GAAGL,OAAO,CAAC,CAAC;EAE9BH,SAAS,CAAC,MAAM;IACZS,OAAO,CAACC,KAAK,CAAC,kBAAkB,EAAE;MAC9BJ,GAAG;MACHC,EAAE;MACFC;IACJ,CAAC,CAAC;;IAEF;IACA,IACIF,GAAG,EAAEK,MAAM,KAAKV,SAAS,CAACW,MAAM,IAChCL,EAAE,KAAK,KAAK,IACZ,CAAC,CAAC,YAAY,EAAE,WAAW,CAAC,CAACM,QAAQ,CAACL,QAAQ,IAAI,EAAE,CAAC,EACvD;MACE,OAAO,MAAM,CAAC,CAAC;IACnB;IAEA,MAAMM,YAAY,GAAGA,CAAA,KAAM;MACvBL,OAAO,CAACC,KAAK,CAAC,iCAAiC,CAAC;MAEhD,MAAMK,EAAE,GAAGV,GAAG,CAACW,OAAO;MAEtBP,OAAO,CAACC,KAAK,CAAC,iCAAiC,EAAEK,EAAE,CAAC;MAEpD,IAAI,CAACA,EAAE,EAAE;;MAET;MACAA,EAAE,CAACE,KAAK,CAACC,SAAS,GAAG,mBAAmB;MAExCT,OAAO,CAACC,KAAK,CAAC,iCAAiC,EAAEK,EAAE,CAACE,KAAK,CAAC;MAE1DE,qBAAqB,CAAC,MAAM;QACxBJ,EAAE,CAACE,KAAK,CAACC,SAAS,GAAG,EAAE;QAEvBT,OAAO,CAACC,KAAK,CAAC,wDAAwD,EAAEK,EAAE,CAACE,KAAK,CAAC;MACrF,CAAC,CAAC;MAEFG,MAAM,CAACC,UAAU,CAAC,MAAM;QACpBN,EAAE,CAACE,KAAK,CAACC,SAAS,GAAG,EAAE;QAEvBT,OAAO,CAACC,KAAK,CAAC,0CAA0C,EAAEK,EAAE,CAACE,KAAK,CAAC;MACvE,CAAC,EAAE,GAAG,CAAC;IACX,CAAC;IAEDG,MAAM,CAACE,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTM,MAAM,CAACG,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACR,GAAG,EAAEC,EAAE,EAAEC,QAAQ,EAAEH,GAAG,CAAC,CAAC;AAChC","ignoreList":[]}

package/lib/types/components/context-menu/ContextMenu.d.ts

@@ -12,10 +12,10 @@ export type ContextMenuItem = {
     text: string;
     shouldShowSpacer?: boolean;
 };
-export type ContextMenuRef = {
+export interface ContextMenuRef {
     hide: VoidFunction;
     show: VoidFunction;
-};
+}
 type ContextMenuProps = {
     /**
      * Optional custom alignment used instead of calculating it using the

package/lib/types/hooks/resize.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+/**
+ * Forces a repaint on the referenced element whenever the window resizes.
+ * Useful for Safari/iOS WebView cursor misalignment issues.
+ */
+export declare function useCursorRepaint<T extends HTMLElement>(ref: RefObject<T>): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1289",
+    "version": "5.0.0-beta.1291",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c9af4a7d2ec37bb9525276eb608aee012f63fdf9"
+    "gitHead": "769a228187b8a7ed67ac04ef186e55f292d6567c"
 }