@chayns-components/core 5.0.0-beta.1195 → 5.0.0-beta.1196

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js

@@ -14,17 +14,18 @@ var _container = require("../../hooks/container");
 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 DropdownBodyWrapper = ({
-  direction = _dropdown.DropdownDirection.BOTTOM_RIGHT,
+  anchorElement,
+  bodyWidth,
   children,
   container: containerProp,
-  shouldShowDropdown,
-  anchorElement,
   contentHeight = 0,
+  direction = _dropdown.DropdownDirection.BOTTOM_RIGHT,
   maxHeight = 300,
+  minBodyWidth = 0,
   onClose,
+  onOutsideClick,
   onMeasure,
-  minBodyWidth = 0,
-  bodyWidth
+  shouldShowDropdown
 }) => {
   const isInChaynsWalletRef = (0, _react.useRef)(false);
   const [measuredContentHeight, setMeasuredContentHeight] = (0, _react.useState)(0);
@@ -58,11 +59,16 @@ const DropdownBodyWrapper = ({
    * This function closes the body
    */
   const handleClick = (0, _react.useCallback)(event => {
-    if (!shouldPreventClickRef.current && !anchorElement.contains(event.target) && ref.current && !ref.current.contains(event.target)) {
-      handleClose();
+    if (ref.current && shouldShowDropdown && !anchorElement.contains(event.target) && !ref.current.contains(event.target)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const shouldPreventCloseOnClick = (onOutsideClick === null || onOutsideClick === void 0 ? void 0 : onOutsideClick()) ?? false;
+      if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {
+        handleClose();
+      }
     }
     shouldPreventClickRef.current = false;
-  }, [anchorElement, handleClose]);
+  }, [anchorElement, handleClose, onOutsideClick, shouldShowDropdown]);
   const handleContentMeasure = (0, _react.useCallback)(measurements => {
     // Measurements are only needed if the content is shown in the chayns wallet. To prevent
     // unnecessary renders, we only set the height if the content is shown in the wallet.

package/lib/cjs/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBodyWrapper.js","names":["_react","_interopRequireWildcard","require","_DropdownBodyWrapper","_reactDom","_dropdown","_DelayedDropdownContent","_interopRequireDefault","_dropdown2","_container","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DropdownBodyWrapper","direction","DropdownDirection","BOTTOM_RIGHT","children","container","containerProp","shouldShowDropdown","anchorElement","contentHeight","maxHeight","onClose","onMeasure","minBodyWidth","bodyWidth","isInChaynsWalletRef","useRef","measuredContentHeight","setMeasuredContentHeight","useState","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","useContainer","transform","width","coordinates","useDropdown","handleClose","useCallback","handleClick","event","current","contains","target","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","useDropdownListener","onClick","onTouchEnd","onTouchStart","useEffect","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","ContainerAnchor","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createPortal","createElement","shouldShowContent","StyledDropdownBodyWrapperContent","$width","$minWidth","$maxHeight","$direction","StyledDropdownBodyWrapper","displayName","_default","exports"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, { FC, ReactNode, ReactPortal, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n}\n\nconst DropdownBodyWrapper: FC<DropdownBodyWrapperProps> = ({\n    direction = DropdownDirection.BOTTOM_RIGHT,\n    children,\n    container: containerProp,\n    shouldShowDropdown,\n    anchorElement,\n    contentHeight = 0,\n    maxHeight = 300,\n    onClose,\n    onMeasure,\n    minBodyWidth = 0,\n    bodyWidth,\n}) => {\n    const isInChaynsWalletRef = useRef(false);\n\n    const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n    const [portal, setPortal] = useState<ReactPortal>();\n\n    const ref = useRef<HTMLDivElement>(null);\n    const shouldPreventClickRef = useRef<boolean>(false);\n    const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n    const container = useContainer({ anchorElement, container: containerProp });\n\n    const { transform, width, coordinates } = useDropdown({\n        direction,\n        bodyWidth,\n        contentHeight,\n        container,\n        anchorElement,\n        shouldShowDropdown,\n    });\n\n    const handleClose = useCallback(() => {\n        if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose]);\n\n    /**\n     * This function closes the body\n     */\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                !shouldPreventClickRef.current &&\n                !anchorElement.contains(event.target as Node) &&\n                ref.current &&\n                !ref.current.contains(event.target as Node)\n            ) {\n                handleClose();\n            }\n\n            shouldPreventClickRef.current = false;\n        },\n        [anchorElement, handleClose],\n    );\n\n    const handleContentMeasure = useCallback(\n        (measurements: DropdownMeasurements) => {\n            // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n            // unnecessary renders, we only set the height if the content is shown in the wallet.\n            if (isInChaynsWalletRef.current) {\n                setMeasuredContentHeight(measurements.height);\n            }\n\n            if (typeof onMeasure === 'function') {\n                onMeasure(measurements);\n            }\n        },\n        [onMeasure],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(touchTimeoutRef.current);\n    }, []);\n\n    const handleTouchStart = useCallback(() => {\n        touchTimeoutRef.current = window.setTimeout(() => {\n            shouldPreventClickRef.current = true;\n        }, 500);\n    }, []);\n\n    /**\n     * This hook listens for clicks\n     */\n    useDropdownListener({\n        onClick: handleClick,\n        onClose: handleClose,\n        onTouchEnd: handleTouchEnd,\n        onTouchStart: handleTouchStart,\n    });\n\n    useEffect(() => {\n        const isBottomDirection = [\n            DropdownDirection.BOTTOM,\n            DropdownDirection.BOTTOM_LEFT,\n            DropdownDirection.BOTTOM_RIGHT,\n        ].includes(direction);\n\n        const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n            ContainerAnchor.RESERVATION_WRAPPER,\n        );\n\n        isInChaynsWalletRef.current =\n            !!(reservationWrapperElement && reservationWrapperElement.contains(anchorElement)) ||\n            true;\n\n        // This effect checks if additional space is needed to show dropdown content in chayns cards.\n        if (\n            isBottomDirection &&\n            isInChaynsWalletRef.current &&\n            measuredContentHeight > 0 &&\n            reservationWrapperElement &&\n            shouldShowDropdown\n        ) {\n            const availableHeight =\n                window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n            // If the content height is greater than the available height, we need to add additional space.\n            // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n            const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n            if (additionalNeededSpace > 0) {\n                // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n            } else {\n                // Reset the margin bottom if no additional space is needed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        }\n\n        if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n            // Reset the margin bottom when the dropdown is closed.\n            reservationWrapperElement.style.marginBottom = '0px';\n        }\n\n        return () => {\n            if (reservationWrapperElement) {\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        };\n    }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n    useEffect(() => {\n        if (!container) return;\n\n        setPortal(() =>\n            createPortal(\n                <DelayedDropdownContent\n                    coordinates={coordinates}\n                    onMeasure={handleContentMeasure}\n                    shouldShowContent={shouldShowDropdown}\n                    transform={transform}\n                >\n                    <StyledDropdownBodyWrapperContent\n                        $width={width}\n                        $minWidth={minBodyWidth}\n                        $maxHeight={maxHeight}\n                        $direction={direction}\n                        ref={ref}\n                    >\n                        {children}\n                    </StyledDropdownBodyWrapperContent>\n                </DelayedDropdownContent>,\n                container,\n            ),\n        );\n    }, [\n        children,\n        container,\n        coordinates,\n        direction,\n        handleContentMeasure,\n        maxHeight,\n        minBodyWidth,\n        shouldShowDropdown,\n        transform,\n        width,\n    ]);\n\n    return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n};\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DropdownBodyWrapper.js","names":["_react","_interopRequireWildcard","require","_DropdownBodyWrapper","_reactDom","_dropdown","_DelayedDropdownContent","_interopRequireDefault","_dropdown2","_container","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","DropdownDirection","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldShowDropdown","isInChaynsWalletRef","useRef","measuredContentHeight","setMeasuredContentHeight","useState","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","useContainer","transform","width","coordinates","useDropdown","handleClose","useCallback","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","useDropdownListener","onClick","onTouchEnd","onTouchStart","useEffect","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","ContainerAnchor","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createPortal","createElement","shouldShowContent","StyledDropdownBodyWrapperContent","$width","$minWidth","$maxHeight","$direction","StyledDropdownBodyWrapper","displayName","_default","exports"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, { FC, ReactNode, ReactPortal, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the user clicks outside the dropdown.\n     * If the function returns `true`, the dropdown will not be closed.\n     */\n    onOutsideClick?: () => boolean | void;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n}\n\nconst DropdownBodyWrapper: FC<DropdownBodyWrapperProps> = ({\n    anchorElement,\n    bodyWidth,\n    children,\n    container: containerProp,\n    contentHeight = 0,\n    direction = DropdownDirection.BOTTOM_RIGHT,\n    maxHeight = 300,\n    minBodyWidth = 0,\n    onClose,\n    onOutsideClick,\n    onMeasure,\n    shouldShowDropdown,\n}) => {\n    const isInChaynsWalletRef = useRef(false);\n\n    const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n    const [portal, setPortal] = useState<ReactPortal>();\n\n    const ref = useRef<HTMLDivElement>(null);\n    const shouldPreventClickRef = useRef<boolean>(false);\n    const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n    const container = useContainer({ anchorElement, container: containerProp });\n\n    const { transform, width, coordinates } = useDropdown({\n        direction,\n        bodyWidth,\n        contentHeight,\n        container,\n        anchorElement,\n        shouldShowDropdown,\n    });\n\n    const handleClose = useCallback(() => {\n        if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose]);\n\n    /**\n     * This function closes the body\n     */\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                ref.current &&\n                shouldShowDropdown &&\n                !anchorElement.contains(event.target as Node) &&\n                !ref.current.contains(event.target as Node)\n            ) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n                if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n                    handleClose();\n                }\n            }\n\n            shouldPreventClickRef.current = false;\n        },\n        [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n    );\n\n    const handleContentMeasure = useCallback(\n        (measurements: DropdownMeasurements) => {\n            // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n            // unnecessary renders, we only set the height if the content is shown in the wallet.\n            if (isInChaynsWalletRef.current) {\n                setMeasuredContentHeight(measurements.height);\n            }\n\n            if (typeof onMeasure === 'function') {\n                onMeasure(measurements);\n            }\n        },\n        [onMeasure],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(touchTimeoutRef.current);\n    }, []);\n\n    const handleTouchStart = useCallback(() => {\n        touchTimeoutRef.current = window.setTimeout(() => {\n            shouldPreventClickRef.current = true;\n        }, 500);\n    }, []);\n\n    /**\n     * This hook listens for clicks\n     */\n    useDropdownListener({\n        onClick: handleClick,\n        onClose: handleClose,\n        onTouchEnd: handleTouchEnd,\n        onTouchStart: handleTouchStart,\n    });\n\n    useEffect(() => {\n        const isBottomDirection = [\n            DropdownDirection.BOTTOM,\n            DropdownDirection.BOTTOM_LEFT,\n            DropdownDirection.BOTTOM_RIGHT,\n        ].includes(direction);\n\n        const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n            ContainerAnchor.RESERVATION_WRAPPER,\n        );\n\n        isInChaynsWalletRef.current =\n            !!(reservationWrapperElement && reservationWrapperElement.contains(anchorElement)) ||\n            true;\n\n        // This effect checks if additional space is needed to show dropdown content in chayns cards.\n        if (\n            isBottomDirection &&\n            isInChaynsWalletRef.current &&\n            measuredContentHeight > 0 &&\n            reservationWrapperElement &&\n            shouldShowDropdown\n        ) {\n            const availableHeight =\n                window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n            // If the content height is greater than the available height, we need to add additional space.\n            // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n            const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n            if (additionalNeededSpace > 0) {\n                // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n            } else {\n                // Reset the margin bottom if no additional space is needed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        }\n\n        if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n            // Reset the margin bottom when the dropdown is closed.\n            reservationWrapperElement.style.marginBottom = '0px';\n        }\n\n        return () => {\n            if (reservationWrapperElement) {\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        };\n    }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n    useEffect(() => {\n        if (!container) return;\n\n        setPortal(() =>\n            createPortal(\n                <DelayedDropdownContent\n                    coordinates={coordinates}\n                    onMeasure={handleContentMeasure}\n                    shouldShowContent={shouldShowDropdown}\n                    transform={transform}\n                >\n                    <StyledDropdownBodyWrapperContent\n                        $width={width}\n                        $minWidth={minBodyWidth}\n                        $maxHeight={maxHeight}\n                        $direction={direction}\n                        ref={ref}\n                    >\n                        {children}\n                    </StyledDropdownBodyWrapperContent>\n                </DelayedDropdownContent>,\n                container,\n            ),\n        );\n    }, [\n        children,\n        container,\n        coordinates,\n        direction,\n        handleContentMeasure,\n        maxHeight,\n        minBodyWidth,\n        shouldShowDropdown,\n        transform,\n        width,\n    ]);\n\n    return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n};\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}

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

@@ -14,19 +14,22 @@ var _AreaContextProvider = require("../area-provider/AreaContextProvider");
 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)(({
-  placeholder,
-  tags,
-  onRemove,
-  onChange,
-  onAdd,
   leftElement,
+  onAdd,
+  onBlur,
+  onChange,
+  onFocus,
+  onRemove,
+  placeholder,
   shouldAllowMultiple = true,
-  shouldPreventEnter
+  shouldPreventEnter,
+  tags
 }, ref) => {
   const [internalTags, setInternalTags] = (0, _react.useState)();
   const [currentValue, setCurrentValue] = (0, _react.useState)('');
   const [selectedId, setSelectedId] = (0, _react.useState)();
   const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
+  const inputRef = (0, _react.useRef)(null);
   const theme = (0, _styledComponents.useTheme)();
   (0, _react.useEffect)(() => {
     if (tags) {
@@ -38,6 +41,10 @@ const TagInput = /*#__PURE__*/(0, _react.forwardRef)(({
   };
   const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   (0, _react.useImperativeHandle)(ref, () => ({
+    blur: () => {
+      var _inputRef$current;
+      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+    },
     getUnsavedTagText: currentValue !== '' ? currentValue : undefined,
     resetValue: handleResetValue
   }), [currentValue]);
@@ -135,11 +142,14 @@ const TagInput = /*#__PURE__*/(0, _react.forwardRef)(({
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInput, {
     $shouldChangeColor: shouldChangeColor
   }, leftElement && /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInputIconWrapper, null, leftElement), content, shouldShowInput && /*#__PURE__*/_react.default.createElement(_TagInput.StyledTagInputTagInput, {
-    placeholder: tags && tags.length > 0 ? undefined : placeholder,
-    onKeyDown: handleKeyDown,
+    onBlur: onBlur,
     onChange: handleChange,
+    onFocus: onFocus,
+    onKeyDown: handleKeyDown,
+    placeholder: tags && tags.length > 0 ? undefined : placeholder,
+    ref: inputRef,
     value: currentValue
-  })), [content, currentValue, handleChange, handleKeyDown, leftElement, placeholder, shouldChangeColor, shouldShowInput, tags]);
+  })), [content, currentValue, handleChange, handleKeyDown, leftElement, onBlur, onFocus, placeholder, shouldChangeColor, shouldShowInput, tags]);
 });
 var _default = exports.default = TagInput;
 //# sourceMappingURL=TagInput.js.map

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","placeholder","tags","onRemove","onChange","onAdd","leftElement","shouldAllowMultiple","shouldPreventEnter","ref","internalTags","setInternalTags","useState","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","useContext","AreaContext","theme","useTheme","useEffect","slice","handleResetValue","shouldChangeColor","useMemo","useImperativeHandle","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} 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 value of the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\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     * The tags that should be displayed.\n     */\n    tags?: Tag[];\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\nexport type TagInputRef = {\n    getUnsavedTagText: Tag['text'] | undefined;\n    resetValue: () => void;\n};\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    (\n        {\n            placeholder,\n            tags,\n            onRemove,\n            onChange,\n            onAdd,\n            leftElement,\n            shouldAllowMultiple = true,\n            shouldPreventEnter,\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 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                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                            placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                            onKeyDown={handleKeyDown}\n                            onChange={handleChange}\n                            value={currentValue}\n                        />\n                    )}\n                </StyledTagInput>\n            ),\n            [\n                content,\n                currentValue,\n                handleChange,\n                handleKeyDown,\n                leftElement,\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","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":[]}

package/lib/cjs/hooks/dropdown.js

@@ -14,15 +14,15 @@ const useDropdownListener = ({
   onTouchStart
 }) => {
   (0, _react.useEffect)(() => {
-    document.addEventListener('click', onClick);
-    document.addEventListener('touchend', onTouchEnd);
-    document.addEventListener('touchstart', onTouchStart);
-    window.addEventListener('blur', () => onClose());
+    document.addEventListener('click', onClick, true);
+    document.addEventListener('touchend', onTouchEnd, true);
+    document.addEventListener('touchstart', onTouchStart, true);
+    window.addEventListener('blur', () => onClose(), true);
     return () => {
-      document.removeEventListener('click', onClick);
-      document.removeEventListener('touchend', onTouchEnd);
-      document.removeEventListener('touchstart', onTouchStart);
-      window.addEventListener('blur', () => onClose());
+      document.removeEventListener('click', onClick, true);
+      document.removeEventListener('touchend', onTouchEnd, true);
+      document.removeEventListener('touchstart', onTouchStart, true);
+      window.addEventListener('blur', () => onClose(), true);
     };
   }, [onClick, onClose, onTouchEnd, onTouchStart]);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":["_react","require","_dropdown","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","document","addEventListener","removeEventListener","exports","useDropdownAlignment","direction","shouldUseTopAlignment","anchorElement","bodyWidth","translateX","setTranslateX","useState","translateY","setTranslateY","DropdownDirection","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","useMemo","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","useCallback","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n    onClick: (event: MouseEvent) => void;\n    onClose: () => void;\n    onTouchEnd: (event: TouchEvent) => void;\n    onTouchStart: (event: TouchEvent) => void;\n}\n\nexport const useDropdownListener = ({\n    onClick,\n    onClose,\n    onTouchEnd,\n    onTouchStart,\n}: UseDropdownListenerOptions) => {\n    useEffect(() => {\n        document.addEventListener('click', onClick);\n        document.addEventListener('touchend', onTouchEnd);\n        document.addEventListener('touchstart', onTouchStart);\n\n        window.addEventListener('blur', () => onClose());\n\n        return () => {\n            document.removeEventListener('click', onClick);\n            document.removeEventListener('touchend', onTouchEnd);\n            document.removeEventListener('touchstart', onTouchStart);\n\n            window.addEventListener('blur', () => onClose());\n        };\n    }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n    direction: DropdownDirection;\n    shouldUseTopAlignment: boolean;\n    bodyWidth?: number;\n    anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n    direction,\n    shouldUseTopAlignment,\n    anchorElement,\n    bodyWidth,\n}: UseDropdownAlignmentOptions) => {\n    const [translateX, setTranslateX] = useState<string>('0px');\n    const [translateY, setTranslateY] = useState<string>('0px');\n\n    useEffect(() => {\n        if (\n            [\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.LEFT,\n            ].includes(direction) &&\n            typeof bodyWidth === 'number'\n        ) {\n            const difference = anchorElement.clientWidth - bodyWidth;\n\n            setTranslateX(`${difference}px`);\n        } else {\n            setTranslateX('0px');\n        }\n    }, [anchorElement.clientWidth, bodyWidth, direction]);\n\n    useEffect(() => {\n        const useTopAlignment =\n            shouldUseTopAlignment ||\n            [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n        if (useTopAlignment) {\n            setTranslateY('-100%');\n        } else {\n            setTranslateY('0px');\n        }\n    }, [direction, shouldUseTopAlignment]);\n\n    return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n    anchorElement,\n    container,\n    contentHeight = 0,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n    const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n    const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n    const calculateCoordinates = useCallback(() => {\n        if (container) {\n            const {\n                left: anchorLeft,\n                top: anchorTop,\n                height: anchorHeight,\n            } = anchorElement.getBoundingClientRect();\n\n            const { left, top, height } = container.getBoundingClientRect();\n\n            const x = anchorLeft - left + container.scrollLeft;\n            const y = anchorTop - top + container.scrollTop;\n\n            let useTopAlignment = [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n            const hasBottomAlignment = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n                useTopAlignment = true;\n\n                setShouldUseTopAlignment(true);\n            } else {\n                setShouldUseTopAlignment(false);\n            }\n\n            setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n        }\n    }, [anchorElement, container, contentHeight, direction]);\n\n    useIsomorphicLayoutEffect(() => {\n        const handleResize = () => {\n            calculateCoordinates();\n\n            setTimeout(calculateCoordinates, 300);\n        };\n\n        handleResize();\n\n        if (shouldShowDropdown) {\n            window.addEventListener('resize', handleResize);\n        }\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [calculateCoordinates, shouldShowDropdown]);\n\n    return useMemo(\n        () => ({ shouldUseTopAlignment, coordinates }),\n        [coordinates, shouldUseTopAlignment],\n    );\n};\n\ninterface UseDropdownOptions {\n    anchorElement: Element;\n    bodyWidth?: number;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n    anchorElement,\n    bodyWidth,\n    container,\n    contentHeight,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownOptions) => {\n    const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n        anchorElement,\n        container,\n        contentHeight,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const transform = useDropdownAlignment({\n        shouldUseTopAlignment,\n        bodyWidth,\n        anchorElement,\n        direction,\n    });\n\n    const width = anchorElement.clientWidth;\n\n    return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"dropdown.js","names":["_react","require","_dropdown","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","document","addEventListener","removeEventListener","exports","useDropdownAlignment","direction","shouldUseTopAlignment","anchorElement","bodyWidth","translateX","setTranslateX","useState","translateY","setTranslateY","DropdownDirection","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","useMemo","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","useCallback","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n    onClick: (event: MouseEvent) => void;\n    onClose: () => void;\n    onTouchEnd: (event: TouchEvent) => void;\n    onTouchStart: (event: TouchEvent) => void;\n}\n\nexport const useDropdownListener = ({\n    onClick,\n    onClose,\n    onTouchEnd,\n    onTouchStart,\n}: UseDropdownListenerOptions) => {\n    useEffect(() => {\n        document.addEventListener('click', onClick, true);\n        document.addEventListener('touchend', onTouchEnd, true);\n        document.addEventListener('touchstart', onTouchStart, true);\n\n        window.addEventListener('blur', () => onClose(), true);\n\n        return () => {\n            document.removeEventListener('click', onClick, true);\n            document.removeEventListener('touchend', onTouchEnd, true);\n            document.removeEventListener('touchstart', onTouchStart, true);\n\n            window.addEventListener('blur', () => onClose(), true);\n        };\n    }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n    direction: DropdownDirection;\n    shouldUseTopAlignment: boolean;\n    bodyWidth?: number;\n    anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n    direction,\n    shouldUseTopAlignment,\n    anchorElement,\n    bodyWidth,\n}: UseDropdownAlignmentOptions) => {\n    const [translateX, setTranslateX] = useState<string>('0px');\n    const [translateY, setTranslateY] = useState<string>('0px');\n\n    useEffect(() => {\n        if (\n            [\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.LEFT,\n            ].includes(direction) &&\n            typeof bodyWidth === 'number'\n        ) {\n            const difference = anchorElement.clientWidth - bodyWidth;\n\n            setTranslateX(`${difference}px`);\n        } else {\n            setTranslateX('0px');\n        }\n    }, [anchorElement.clientWidth, bodyWidth, direction]);\n\n    useEffect(() => {\n        const useTopAlignment =\n            shouldUseTopAlignment ||\n            [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n        if (useTopAlignment) {\n            setTranslateY('-100%');\n        } else {\n            setTranslateY('0px');\n        }\n    }, [direction, shouldUseTopAlignment]);\n\n    return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n    anchorElement,\n    container,\n    contentHeight = 0,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n    const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n    const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n    const calculateCoordinates = useCallback(() => {\n        if (container) {\n            const {\n                left: anchorLeft,\n                top: anchorTop,\n                height: anchorHeight,\n            } = anchorElement.getBoundingClientRect();\n\n            const { left, top, height } = container.getBoundingClientRect();\n\n            const x = anchorLeft - left + container.scrollLeft;\n            const y = anchorTop - top + container.scrollTop;\n\n            let useTopAlignment = [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n            const hasBottomAlignment = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n                useTopAlignment = true;\n\n                setShouldUseTopAlignment(true);\n            } else {\n                setShouldUseTopAlignment(false);\n            }\n\n            setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n        }\n    }, [anchorElement, container, contentHeight, direction]);\n\n    useIsomorphicLayoutEffect(() => {\n        const handleResize = () => {\n            calculateCoordinates();\n\n            setTimeout(calculateCoordinates, 300);\n        };\n\n        handleResize();\n\n        if (shouldShowDropdown) {\n            window.addEventListener('resize', handleResize);\n        }\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [calculateCoordinates, shouldShowDropdown]);\n\n    return useMemo(\n        () => ({ shouldUseTopAlignment, coordinates }),\n        [coordinates, shouldUseTopAlignment],\n    );\n};\n\ninterface UseDropdownOptions {\n    anchorElement: Element;\n    bodyWidth?: number;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n    anchorElement,\n    bodyWidth,\n    container,\n    contentHeight,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownOptions) => {\n    const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n        anchorElement,\n        container,\n        contentHeight,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const transform = useDropdownAlignment({\n        shouldUseTopAlignment,\n        bodyWidth,\n        anchorElement,\n        direction,\n    });\n\n    const width = anchorElement.clientWidth;\n\n    return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Accordion","_interopRequireDefault","require","_AccordionContent","_AccordionGroup","_AccordionIntro","_AccordionItem","_AmountControl","_VerificationBadge","_AreaContextProvider","_interopRequireWildcard","_Badge","_Button","_Checkbox","_ColorSchemeProvider","_badge","_container","_dropdown","_element","_ref","_FileList","_FileSelect","_DropdownBodyWrapper","_ComboBox","_ContentCard","_HighlightSlider","_ContextMenu","_ExpandableContent","_FileInput","_FilterButton","_FilterButtons","_GridImage","_GroupedImage","_Icon","_Input","_List","_ListItemContent","_ListItem","_MentionFinder","_NumberInput","_PageProvider","_Popup","_PopupContent","_ProgressBar","_popup","_RadioButtonGroup","_RadioButton","_ScrollView","_SearchBox","_SearchInput","_SelectButton","_SetupWizardItem","_SetupWizard","_SharingBar","_Signature","_SliderButton","_Slider","_SmallWaitCursor","_TagInput","_TextArea","_Tooltip","_Truncation","_mentionFinder","_contentCard","_contextMenu","_file","_filterButtons","_truncation","_environment","_fileDialog","_isTobitEmployee","_pageProvider","_uploadFile","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Accordion } from './components/accordion/Accordion';\nexport { default as AccordionContent } from './components/accordion/accordion-content/AccordionContent';\nexport { default as AccordionGroup } from './components/accordion/accordion-group/AccordionGroup';\nexport { default as AccordionIntro } from './components/accordion/accordion-intro/AccordionIntro';\nexport { default as AccordionItem } from './components/accordion/accordion-item/AccordionItem';\nexport { default as AmountControl } from './components/amount-control/AmountControl';\nexport { default as VerificationBadge } from './components/verification-badge/VerificationBadge';\nexport {\n    AreaContext,\n    default as AreaProvider,\n} from './components/area-provider/AreaContextProvider';\nexport { default as Badge } from './components/badge/Badge';\nexport { default as Button } from './components/button/Button';\nexport { default as Checkbox } from './components/checkbox/Checkbox';\nexport {\n    default as ColorSchemeProvider,\n    useColorScheme,\n} from './components/color-scheme-provider/ColorSchemeProvider';\nexport { BadgeSize, BadgeDesign } from './types/badge';\nexport type {\n    ColorSchemeContextProps,\n    WithTheme,\n} from './components/color-scheme-provider/ColorSchemeProvider';\nexport { useContainer, ContainerAnchor } from './hooks/container';\nexport { DropdownDirection, type DropdownCoordinates } from './types/dropdown';\nexport { useIsMeasuredClone } from './hooks/element';\nexport { useCombinedRefs } from './hooks/ref';\nexport {\n    default as FileList,\n    type IFileItem as FileListItem,\n} from './components/file-list/FileList';\nexport { default as FileSelect } from './components/file-select/FileSelect';\nexport { default as DropdownBodyWrapper } from './components/dropdown-body-wrapper/DropdownBodyWrapper';\nexport {\n    default as ComboBox,\n    type ComboBoxTextStyles,\n    type IComboBoxItem as ComboBoxItem,\n    type IComboBoxItems as ComboBoxItems,\n} from './components/combobox/ComboBox';\nexport { default as ContentCard } from './components/content-card/ContentCard';\nexport { default as HighlightSLider } from './components/highlight-slider/HighlightSlider';\nexport type { HighlightSliderItemColors as HighlightSliderColors } from './components/highlight-slider/highlight-slider-item/HighlightSliderItem';\nexport {\n    default as ContextMenu,\n    type ContextMenuCoordinates,\n    type ContextMenuItem,\n    type ContextMenuRef,\n} from './components/context-menu/ContextMenu';\nexport { default as ExpandableContent } from './components/expandable-content/ExpandableContent';\nexport { default as FileInput, type FileInputRef } from './components/file-input/FileInput';\nexport { default as FilterButton } from './components/filter-buttons/filter-button/FilterButton';\nexport { default as FilterButtons } from './components/filter-buttons/FilterButtons';\nexport { default as GridImage } from './components/grid-image/GridImage';\nexport { default as GroupedImage } from './components/grouped-image/GroupedImage';\nexport { default as Icon } from './components/icon/Icon';\nexport { default as Input, InputSize } from './components/input/Input';\nexport { default as List } from './components/list/List';\nexport { default as ListItemContent } from './components/list/list-item/list-item-content/ListItemContent';\nexport {\n    default as ListItem,\n    type ListItemElements,\n    type ListItemProps,\n} from './components/list/list-item/ListItem';\nexport { default as MentionFinder } from './components/mention-finder/MentionFinder';\nexport type { MentionMember } from './components/mention-finder/MentionFinder';\nexport { default as NumberInput } from './components/number-input/NumberInput';\nexport { default as PageProvider } from './components/page-provider/PageProvider';\nexport { default as Popup } from './components/popup/Popup';\nexport { default as PopupContent } from './components/popup/popup-content/PopupContent';\nexport { default as ProgressBar } from './components/progress-bar/ProgressBar';\nexport { PopupAlignment } from './types/popup';\nexport {\n    default as RadioButtonGroup,\n    type RadioButtonGroupRef,\n} from './components/radio-button/radio-button-group/RadioButtonGroup';\nexport { default as RadioButton } from './components/radio-button/RadioButton';\nexport { default as ScrollView } from './components/scroll-view/ScrollView';\nexport { default as SearchBox } from './components/search-box/SearchBox';\nexport { default as SearchInput } from './components/search-input/SearchInput';\nexport { default as SelectButton } from './components/select-button/SelectButton';\nexport { default as SetupWizardItem } from './components/setup-wizard/setup-wizard-item/SetupWizardItem';\nexport { default as SetupWizard } from './components/setup-wizard/SetupWizard';\nexport type { SetupWizardRef } from './components/setup-wizard/SetupWizard';\nexport { default as SharingBar } from './components/sharing-bar/SharingBar';\nexport { default as Signature } from './components/signature/Signature';\nexport type { SignatureRef } from './components/signature/Signature';\nexport { default as SliderButton } from './components/slider-button/SliderButton';\nexport { default as Slider } from './components/slider/Slider';\nexport {\n    default as SmallWaitCursor,\n    SmallWaitCursorSize,\n    SmallWaitCursorSpeed,\n} from './components/small-wait-cursor/SmallWaitCursor';\nexport { default as TagInput } from './components/tag-input/TagInput';\nexport { default as TextArea } from './components/text-area/TextArea';\nexport { default as Tooltip } from './components/tooltip/Tooltip';\nexport { default as Truncation } from './components/truncation/Truncation';\nexport { MentionFinderPopupAlignment } from './constants/mentionFinder';\nexport { useElementSize } from './hooks/element';\nexport type { BrowserName } from './types/chayns';\nexport { ContentCardType } from './types/contentCard';\nexport { ContextMenuAlignment } from './types/contextMenu';\nexport type { FileItem, Image, InternalFileItem, Meta, Video } from './types/file';\nexport { isValidFileType } from './utils/file';\nexport type { FileInputFileItem } from './types/fileInput';\nexport { FilterButtonItemShape, FilterButtonSize } from './types/filterButtons';\nexport type { IFilterButtonItem as FilterButtonItem } from './types/filterButtons';\nexport type { IListItemRightElements } from './types/list';\nexport type { PopupRef } from './types/popup';\nexport type { RadioButtonItem } from './types/radioButton';\nexport type {\n    ISearchBoxItem as SearchBoxItem,\n    ISearchBoxItems as SearchBoxItems,\n} from './types/searchBox';\nexport type { SelectButtonItem } from './types/selectButton';\nexport type { SliderButtonItem } from './types/slider-button';\nexport { ClampPosition } from './types/truncation';\nexport { getIsTouch } from './utils/environment';\nexport { filterFilesByMimeType, getFileAsArrayBuffer, selectFiles } from './utils/fileDialog';\nexport { isTobitEmployee } from './utils/isTobitEmployee';\nexport { getUsableHeight } from './utils/pageProvider';\nexport { uploadFile } from './utils/uploadFile';\nexport type { Theme } from './components/color-scheme-provider/ColorSchemeProvider';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_Accordion","_interopRequireDefault","require","_AccordionContent","_AccordionGroup","_AccordionIntro","_AccordionItem","_AmountControl","_VerificationBadge","_AreaContextProvider","_interopRequireWildcard","_Badge","_Button","_Checkbox","_ColorSchemeProvider","_badge","_container","_dropdown","_element","_ref","_FileList","_FileSelect","_DropdownBodyWrapper","_ComboBox","_ContentCard","_HighlightSlider","_ContextMenu","_ExpandableContent","_FileInput","_FilterButton","_FilterButtons","_GridImage","_GroupedImage","_Icon","_Input","_List","_ListItemContent","_ListItem","_MentionFinder","_NumberInput","_PageProvider","_Popup","_PopupContent","_ProgressBar","_popup","_RadioButtonGroup","_RadioButton","_ScrollView","_SearchBox","_SearchInput","_SelectButton","_SetupWizardItem","_SetupWizard","_SharingBar","_Signature","_SliderButton","_Slider","_SmallWaitCursor","_TagInput","_TextArea","_Tooltip","_Truncation","_mentionFinder","_contentCard","_contextMenu","_file","_filterButtons","_truncation","_environment","_fileDialog","_isTobitEmployee","_pageProvider","_uploadFile","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Accordion } from './components/accordion/Accordion';\nexport { default as AccordionContent } from './components/accordion/accordion-content/AccordionContent';\nexport { default as AccordionGroup } from './components/accordion/accordion-group/AccordionGroup';\nexport { default as AccordionIntro } from './components/accordion/accordion-intro/AccordionIntro';\nexport { default as AccordionItem } from './components/accordion/accordion-item/AccordionItem';\nexport { default as AmountControl } from './components/amount-control/AmountControl';\nexport { default as VerificationBadge } from './components/verification-badge/VerificationBadge';\nexport {\n    AreaContext,\n    default as AreaProvider,\n} from './components/area-provider/AreaContextProvider';\nexport { default as Badge } from './components/badge/Badge';\nexport { default as Button } from './components/button/Button';\nexport { default as Checkbox } from './components/checkbox/Checkbox';\nexport {\n    default as ColorSchemeProvider,\n    useColorScheme,\n} from './components/color-scheme-provider/ColorSchemeProvider';\nexport { BadgeSize, BadgeDesign } from './types/badge';\nexport type {\n    ColorSchemeContextProps,\n    WithTheme,\n} from './components/color-scheme-provider/ColorSchemeProvider';\nexport { useContainer, ContainerAnchor } from './hooks/container';\nexport { DropdownDirection, type DropdownCoordinates } from './types/dropdown';\nexport { useIsMeasuredClone } from './hooks/element';\nexport { useCombinedRefs } from './hooks/ref';\nexport {\n    default as FileList,\n    type IFileItem as FileListItem,\n} from './components/file-list/FileList';\nexport { default as FileSelect } from './components/file-select/FileSelect';\nexport { default as DropdownBodyWrapper } from './components/dropdown-body-wrapper/DropdownBodyWrapper';\nexport {\n    default as ComboBox,\n    type ComboBoxTextStyles,\n    type IComboBoxItem as ComboBoxItem,\n    type IComboBoxItems as ComboBoxItems,\n} from './components/combobox/ComboBox';\nexport { default as ContentCard } from './components/content-card/ContentCard';\nexport { default as HighlightSLider } from './components/highlight-slider/HighlightSlider';\nexport type { HighlightSliderItemColors as HighlightSliderColors } from './components/highlight-slider/highlight-slider-item/HighlightSliderItem';\nexport {\n    default as ContextMenu,\n    type ContextMenuCoordinates,\n    type ContextMenuItem,\n    type ContextMenuRef,\n} from './components/context-menu/ContextMenu';\nexport { default as ExpandableContent } from './components/expandable-content/ExpandableContent';\nexport { default as FileInput, type FileInputRef } from './components/file-input/FileInput';\nexport { default as FilterButton } from './components/filter-buttons/filter-button/FilterButton';\nexport { default as FilterButtons } from './components/filter-buttons/FilterButtons';\nexport { default as GridImage } from './components/grid-image/GridImage';\nexport { default as GroupedImage } from './components/grouped-image/GroupedImage';\nexport { default as Icon } from './components/icon/Icon';\nexport { default as Input, InputSize } from './components/input/Input';\nexport { default as List } from './components/list/List';\nexport { default as ListItemContent } from './components/list/list-item/list-item-content/ListItemContent';\nexport {\n    default as ListItem,\n    type ListItemElements,\n    type ListItemProps,\n} from './components/list/list-item/ListItem';\nexport { default as MentionFinder } from './components/mention-finder/MentionFinder';\nexport type { MentionMember } from './components/mention-finder/MentionFinder';\nexport { default as NumberInput } from './components/number-input/NumberInput';\nexport { default as PageProvider } from './components/page-provider/PageProvider';\nexport { default as Popup } from './components/popup/Popup';\nexport { default as PopupContent } from './components/popup/popup-content/PopupContent';\nexport { default as ProgressBar } from './components/progress-bar/ProgressBar';\nexport { PopupAlignment } from './types/popup';\nexport {\n    default as RadioButtonGroup,\n    type RadioButtonGroupRef,\n} from './components/radio-button/radio-button-group/RadioButtonGroup';\nexport { default as RadioButton } from './components/radio-button/RadioButton';\nexport { default as ScrollView } from './components/scroll-view/ScrollView';\nexport { default as SearchBox } from './components/search-box/SearchBox';\nexport { default as SearchInput } from './components/search-input/SearchInput';\nexport { default as SelectButton } from './components/select-button/SelectButton';\nexport { default as SetupWizardItem } from './components/setup-wizard/setup-wizard-item/SetupWizardItem';\nexport { default as SetupWizard } from './components/setup-wizard/SetupWizard';\nexport type { SetupWizardRef } from './components/setup-wizard/SetupWizard';\nexport { default as SharingBar } from './components/sharing-bar/SharingBar';\nexport { default as Signature } from './components/signature/Signature';\nexport type { SignatureRef } from './components/signature/Signature';\nexport { default as SliderButton } from './components/slider-button/SliderButton';\nexport { default as Slider } from './components/slider/Slider';\nexport {\n    default as SmallWaitCursor,\n    SmallWaitCursorSize,\n    SmallWaitCursorSpeed,\n} from './components/small-wait-cursor/SmallWaitCursor';\nexport type { Tag } from './types/tagInput';\nexport { default as TagInput } from './components/tag-input/TagInput';\nexport type { TagInputRef } from './components/tag-input/TagInput';\nexport { default as TextArea } from './components/text-area/TextArea';\nexport { default as Tooltip } from './components/tooltip/Tooltip';\nexport { default as Truncation } from './components/truncation/Truncation';\nexport { MentionFinderPopupAlignment } from './constants/mentionFinder';\nexport { useElementSize } from './hooks/element';\nexport type { BrowserName } from './types/chayns';\nexport { ContentCardType } from './types/contentCard';\nexport { ContextMenuAlignment } from './types/contextMenu';\nexport type { FileItem, Image, InternalFileItem, Meta, Video } from './types/file';\nexport { isValidFileType } from './utils/file';\nexport type { FileInputFileItem } from './types/fileInput';\nexport { FilterButtonItemShape, FilterButtonSize } from './types/filterButtons';\nexport type { IFilterButtonItem as FilterButtonItem } from './types/filterButtons';\nexport type { IListItemRightElements } from './types/list';\nexport type { PopupRef } from './types/popup';\nexport type { RadioButtonItem } from './types/radioButton';\nexport type {\n    ISearchBoxItem as SearchBoxItem,\n    ISearchBoxItems as SearchBoxItems,\n} from './types/searchBox';\nexport type { SelectButtonItem } from './types/selectButton';\nexport type { SliderButtonItem } from './types/slider-button';\nexport { ClampPosition } from './types/truncation';\nexport { getIsTouch } from './utils/environment';\nexport { filterFilesByMimeType, getFileAsArrayBuffer, selectFiles } from './utils/fileDialog';\nexport { isTobitEmployee } from './utils/isTobitEmployee';\nexport { getUsableHeight } from './utils/pageProvider';\nexport { uploadFile } from './utils/uploadFile';\nexport type { Theme } from './components/color-scheme-provider/ColorSchemeProvider';\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.js

@@ -6,17 +6,18 @@ import DelayedDropdownContent from './delayed-dropdown-content/DelayedDropdownCo
 import { useDropdown, useDropdownListener } from '../../hooks/dropdown';
 import { ContainerAnchor, useContainer } from '../../hooks/container';
 const DropdownBodyWrapper = ({
-  direction = DropdownDirection.BOTTOM_RIGHT,
+  anchorElement,
+  bodyWidth,
   children,
   container: containerProp,
-  shouldShowDropdown,
-  anchorElement,
   contentHeight = 0,
+  direction = DropdownDirection.BOTTOM_RIGHT,
   maxHeight = 300,
+  minBodyWidth = 0,
   onClose,
+  onOutsideClick,
   onMeasure,
-  minBodyWidth = 0,
-  bodyWidth
+  shouldShowDropdown
 }) => {
   const isInChaynsWalletRef = useRef(false);
   const [measuredContentHeight, setMeasuredContentHeight] = useState(0);
@@ -50,11 +51,16 @@ const DropdownBodyWrapper = ({
    * This function closes the body
    */
   const handleClick = useCallback(event => {
-    if (!shouldPreventClickRef.current && !anchorElement.contains(event.target) && ref.current && !ref.current.contains(event.target)) {
-      handleClose();
+    if (ref.current && shouldShowDropdown && !anchorElement.contains(event.target) && !ref.current.contains(event.target)) {
+      event.preventDefault();
+      event.stopPropagation();
+      const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;
+      if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {
+        handleClose();
+      }
     }
     shouldPreventClickRef.current = false;
-  }, [anchorElement, handleClose]);
+  }, [anchorElement, handleClose, onOutsideClick, shouldShowDropdown]);
   const handleContentMeasure = useCallback(measurements => {
     // Measurements are only needed if the content is shown in the chayns wallet. To prevent
     // unnecessary renders, we only set the height if the content is shown in the wallet.

package/lib/esm/components/dropdown-body-wrapper/DropdownBodyWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBodyWrapper.js","names":["React","useCallback","useEffect","useRef","useState","StyledDropdownBodyWrapper","StyledDropdownBodyWrapperContent","createPortal","DropdownDirection","DelayedDropdownContent","useDropdown","useDropdownListener","ContainerAnchor","useContainer","DropdownBodyWrapper","direction","BOTTOM_RIGHT","children","container","containerProp","shouldShowDropdown","anchorElement","contentHeight","maxHeight","onClose","onMeasure","minBodyWidth","bodyWidth","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","handleClose","handleClick","event","current","contains","target","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createElement","shouldShowContent","$width","$minWidth","$maxHeight","$direction","displayName"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, { FC, ReactNode, ReactPortal, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n}\n\nconst DropdownBodyWrapper: FC<DropdownBodyWrapperProps> = ({\n    direction = DropdownDirection.BOTTOM_RIGHT,\n    children,\n    container: containerProp,\n    shouldShowDropdown,\n    anchorElement,\n    contentHeight = 0,\n    maxHeight = 300,\n    onClose,\n    onMeasure,\n    minBodyWidth = 0,\n    bodyWidth,\n}) => {\n    const isInChaynsWalletRef = useRef(false);\n\n    const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n    const [portal, setPortal] = useState<ReactPortal>();\n\n    const ref = useRef<HTMLDivElement>(null);\n    const shouldPreventClickRef = useRef<boolean>(false);\n    const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n    const container = useContainer({ anchorElement, container: containerProp });\n\n    const { transform, width, coordinates } = useDropdown({\n        direction,\n        bodyWidth,\n        contentHeight,\n        container,\n        anchorElement,\n        shouldShowDropdown,\n    });\n\n    const handleClose = useCallback(() => {\n        if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose]);\n\n    /**\n     * This function closes the body\n     */\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                !shouldPreventClickRef.current &&\n                !anchorElement.contains(event.target as Node) &&\n                ref.current &&\n                !ref.current.contains(event.target as Node)\n            ) {\n                handleClose();\n            }\n\n            shouldPreventClickRef.current = false;\n        },\n        [anchorElement, handleClose],\n    );\n\n    const handleContentMeasure = useCallback(\n        (measurements: DropdownMeasurements) => {\n            // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n            // unnecessary renders, we only set the height if the content is shown in the wallet.\n            if (isInChaynsWalletRef.current) {\n                setMeasuredContentHeight(measurements.height);\n            }\n\n            if (typeof onMeasure === 'function') {\n                onMeasure(measurements);\n            }\n        },\n        [onMeasure],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(touchTimeoutRef.current);\n    }, []);\n\n    const handleTouchStart = useCallback(() => {\n        touchTimeoutRef.current = window.setTimeout(() => {\n            shouldPreventClickRef.current = true;\n        }, 500);\n    }, []);\n\n    /**\n     * This hook listens for clicks\n     */\n    useDropdownListener({\n        onClick: handleClick,\n        onClose: handleClose,\n        onTouchEnd: handleTouchEnd,\n        onTouchStart: handleTouchStart,\n    });\n\n    useEffect(() => {\n        const isBottomDirection = [\n            DropdownDirection.BOTTOM,\n            DropdownDirection.BOTTOM_LEFT,\n            DropdownDirection.BOTTOM_RIGHT,\n        ].includes(direction);\n\n        const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n            ContainerAnchor.RESERVATION_WRAPPER,\n        );\n\n        isInChaynsWalletRef.current =\n            !!(reservationWrapperElement && reservationWrapperElement.contains(anchorElement)) ||\n            true;\n\n        // This effect checks if additional space is needed to show dropdown content in chayns cards.\n        if (\n            isBottomDirection &&\n            isInChaynsWalletRef.current &&\n            measuredContentHeight > 0 &&\n            reservationWrapperElement &&\n            shouldShowDropdown\n        ) {\n            const availableHeight =\n                window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n            // If the content height is greater than the available height, we need to add additional space.\n            // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n            const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n            if (additionalNeededSpace > 0) {\n                // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n            } else {\n                // Reset the margin bottom if no additional space is needed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        }\n\n        if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n            // Reset the margin bottom when the dropdown is closed.\n            reservationWrapperElement.style.marginBottom = '0px';\n        }\n\n        return () => {\n            if (reservationWrapperElement) {\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        };\n    }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n    useEffect(() => {\n        if (!container) return;\n\n        setPortal(() =>\n            createPortal(\n                <DelayedDropdownContent\n                    coordinates={coordinates}\n                    onMeasure={handleContentMeasure}\n                    shouldShowContent={shouldShowDropdown}\n                    transform={transform}\n                >\n                    <StyledDropdownBodyWrapperContent\n                        $width={width}\n                        $minWidth={minBodyWidth}\n                        $maxHeight={maxHeight}\n                        $direction={direction}\n                        ref={ref}\n                    >\n                        {children}\n                    </StyledDropdownBodyWrapperContent>\n                </DelayedDropdownContent>,\n                container,\n            ),\n        );\n    }, [\n        children,\n        container,\n        coordinates,\n        direction,\n        handleContentMeasure,\n        maxHeight,\n        minBodyWidth,\n        shouldShowDropdown,\n        transform,\n        width,\n    ]);\n\n    return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n};\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DropdownBodyWrapper.js","names":["React","useCallback","useEffect","useRef","useState","StyledDropdownBodyWrapper","StyledDropdownBodyWrapperContent","createPortal","DropdownDirection","DelayedDropdownContent","useDropdown","useDropdownListener","ContainerAnchor","useContainer","DropdownBodyWrapper","anchorElement","bodyWidth","children","container","containerProp","contentHeight","direction","BOTTOM_RIGHT","maxHeight","minBodyWidth","onClose","onOutsideClick","onMeasure","shouldShowDropdown","isInChaynsWalletRef","measuredContentHeight","setMeasuredContentHeight","portal","setPortal","ref","shouldPreventClickRef","touchTimeoutRef","undefined","transform","width","coordinates","handleClose","handleClick","event","current","contains","target","preventDefault","stopPropagation","shouldPreventCloseOnClick","handleContentMeasure","measurements","height","handleTouchEnd","clearTimeout","handleTouchStart","window","setTimeout","onClick","onTouchEnd","onTouchStart","isBottomDirection","BOTTOM","BOTTOM_LEFT","includes","reservationWrapperElement","closest","RESERVATION_WRAPPER","availableHeight","innerHeight","getBoundingClientRect","bottom","additionalNeededSpace","style","marginBottom","createElement","shouldShowContent","$width","$minWidth","$maxHeight","$direction","displayName"],"sources":["../../../../src/components/dropdown-body-wrapper/DropdownBodyWrapper.tsx"],"sourcesContent":["import React, { FC, ReactNode, ReactPortal, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n    StyledDropdownBodyWrapper,\n    StyledDropdownBodyWrapperContent,\n} from './DropdownBodyWrapper.styles';\nimport { createPortal } from 'react-dom';\nimport { DropdownDirection, DropdownMeasurements } from '../../types/dropdown';\nimport DelayedDropdownContent, {\n    DelayedDropdownContentProps,\n} from './delayed-dropdown-content/DelayedDropdownContent';\nimport { useDropdown, useDropdownListener } from '../../hooks/dropdown';\nimport { ContainerAnchor, useContainer } from '../../hooks/container';\n\ninterface DropdownBodyWrapperProps {\n    /**\n     * The anchor element of the dropdown.\n     */\n    anchorElement: Element;\n    /**\n     * The width of the Body.\n     */\n    bodyWidth?: number;\n    /**\n     * The content of the dropdown body.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The height of the content\n     */\n    contentHeight?: number;\n    /**\n     * The direction of the dropdown.\n     */\n    direction?: DropdownDirection;\n    /**\n     * The max height of the dropdown.\n     */\n    maxHeight?: number;\n    /**\n     * The minimum width of the body.\n     */\n    minBodyWidth?: number;\n    /**\n     * Function to be executed when the body is closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the user clicks outside the dropdown.\n     * If the function returns `true`, the dropdown will not be closed.\n     */\n    onOutsideClick?: () => boolean | void;\n    /**\n     * Function to be executed when the content is measured.\n     */\n    onMeasure?: DelayedDropdownContentProps['onMeasure'];\n    /**\n     * Whether the dropdown should be visible.\n     */\n    shouldShowDropdown: boolean;\n}\n\nconst DropdownBodyWrapper: FC<DropdownBodyWrapperProps> = ({\n    anchorElement,\n    bodyWidth,\n    children,\n    container: containerProp,\n    contentHeight = 0,\n    direction = DropdownDirection.BOTTOM_RIGHT,\n    maxHeight = 300,\n    minBodyWidth = 0,\n    onClose,\n    onOutsideClick,\n    onMeasure,\n    shouldShowDropdown,\n}) => {\n    const isInChaynsWalletRef = useRef(false);\n\n    const [measuredContentHeight, setMeasuredContentHeight] = useState<number>(0);\n    const [portal, setPortal] = useState<ReactPortal>();\n\n    const ref = useRef<HTMLDivElement>(null);\n    const shouldPreventClickRef = useRef<boolean>(false);\n    const touchTimeoutRef = useRef<number | undefined>(undefined);\n\n    const container = useContainer({ anchorElement, container: containerProp });\n\n    const { transform, width, coordinates } = useDropdown({\n        direction,\n        bodyWidth,\n        contentHeight,\n        container,\n        anchorElement,\n        shouldShowDropdown,\n    });\n\n    const handleClose = useCallback(() => {\n        if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose]);\n\n    /**\n     * This function closes the body\n     */\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                ref.current &&\n                shouldShowDropdown &&\n                !anchorElement.contains(event.target as Node) &&\n                !ref.current.contains(event.target as Node)\n            ) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const shouldPreventCloseOnClick = onOutsideClick?.() ?? false;\n\n                if (!shouldPreventClickRef.current && !shouldPreventCloseOnClick) {\n                    handleClose();\n                }\n            }\n\n            shouldPreventClickRef.current = false;\n        },\n        [anchorElement, handleClose, onOutsideClick, shouldShowDropdown],\n    );\n\n    const handleContentMeasure = useCallback(\n        (measurements: DropdownMeasurements) => {\n            // Measurements are only needed if the content is shown in the chayns wallet. To prevent\n            // unnecessary renders, we only set the height if the content is shown in the wallet.\n            if (isInChaynsWalletRef.current) {\n                setMeasuredContentHeight(measurements.height);\n            }\n\n            if (typeof onMeasure === 'function') {\n                onMeasure(measurements);\n            }\n        },\n        [onMeasure],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(touchTimeoutRef.current);\n    }, []);\n\n    const handleTouchStart = useCallback(() => {\n        touchTimeoutRef.current = window.setTimeout(() => {\n            shouldPreventClickRef.current = true;\n        }, 500);\n    }, []);\n\n    /**\n     * This hook listens for clicks\n     */\n    useDropdownListener({\n        onClick: handleClick,\n        onClose: handleClose,\n        onTouchEnd: handleTouchEnd,\n        onTouchStart: handleTouchStart,\n    });\n\n    useEffect(() => {\n        const isBottomDirection = [\n            DropdownDirection.BOTTOM,\n            DropdownDirection.BOTTOM_LEFT,\n            DropdownDirection.BOTTOM_RIGHT,\n        ].includes(direction);\n\n        const reservationWrapperElement = anchorElement.closest<HTMLDivElement>(\n            ContainerAnchor.RESERVATION_WRAPPER,\n        );\n\n        isInChaynsWalletRef.current =\n            !!(reservationWrapperElement && reservationWrapperElement.contains(anchorElement)) ||\n            true;\n\n        // This effect checks if additional space is needed to show dropdown content in chayns cards.\n        if (\n            isBottomDirection &&\n            isInChaynsWalletRef.current &&\n            measuredContentHeight > 0 &&\n            reservationWrapperElement &&\n            shouldShowDropdown\n        ) {\n            const availableHeight =\n                window.innerHeight - anchorElement.getBoundingClientRect().bottom;\n\n            // If the content height is greater than the available height, we need to add additional space.\n            // This is to ensure that the dropdown content is fully visible. The 16 pixels are a buffer for shadows.\n            const additionalNeededSpace = measuredContentHeight + 16 - availableHeight;\n\n            if (additionalNeededSpace > 0) {\n                // Add margin bottom to the reservation wrapper to ensure the dropdown content is fully visible.\n                reservationWrapperElement.style.marginBottom = `${additionalNeededSpace}px`;\n            } else {\n                // Reset the margin bottom if no additional space is needed.\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        }\n\n        if (isInChaynsWalletRef.current && reservationWrapperElement && !shouldShowDropdown) {\n            // Reset the margin bottom when the dropdown is closed.\n            reservationWrapperElement.style.marginBottom = '0px';\n        }\n\n        return () => {\n            if (reservationWrapperElement) {\n                reservationWrapperElement.style.marginBottom = '0px';\n            }\n        };\n    }, [anchorElement, direction, measuredContentHeight, shouldShowDropdown]);\n\n    useEffect(() => {\n        if (!container) return;\n\n        setPortal(() =>\n            createPortal(\n                <DelayedDropdownContent\n                    coordinates={coordinates}\n                    onMeasure={handleContentMeasure}\n                    shouldShowContent={shouldShowDropdown}\n                    transform={transform}\n                >\n                    <StyledDropdownBodyWrapperContent\n                        $width={width}\n                        $minWidth={minBodyWidth}\n                        $maxHeight={maxHeight}\n                        $direction={direction}\n                        ref={ref}\n                    >\n                        {children}\n                    </StyledDropdownBodyWrapperContent>\n                </DelayedDropdownContent>,\n                container,\n            ),\n        );\n    }, [\n        children,\n        container,\n        coordinates,\n        direction,\n        handleContentMeasure,\n        maxHeight,\n        minBodyWidth,\n        shouldShowDropdown,\n        transform,\n        width,\n    ]);\n\n    return <StyledDropdownBodyWrapper>{portal}</StyledDropdownBodyWrapper>;\n};\n\nDropdownBodyWrapper.displayName = 'DropdownBodyWrapper';\n\nexport default DropdownBodyWrapper;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAgCC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACnG,SACIC,yBAAyB,EACzBC,gCAAgC,QAC7B,8BAA8B;AACrC,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,iBAAiB,QAA8B,sBAAsB;AAC9E,OAAOC,sBAAsB,MAEtB,mDAAmD;AAC1D,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,sBAAsB;AACvE,SAASC,eAAe,EAAEC,YAAY,QAAQ,uBAAuB;AAsDrE,MAAMC,mBAAiD,GAAGA,CAAC;EACvDC,aAAa;EACbC,SAAS;EACTC,QAAQ;EACRC,SAAS,EAAEC,aAAa;EACxBC,aAAa,GAAG,CAAC;EACjBC,SAAS,GAAGb,iBAAiB,CAACc,YAAY;EAC1CC,SAAS,GAAG,GAAG;EACfC,YAAY,GAAG,CAAC;EAChBC,OAAO;EACPC,cAAc;EACdC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,mBAAmB,GAAG1B,MAAM,CAAC,KAAK,CAAC;EAEzC,MAAM,CAAC2B,qBAAqB,EAAEC,wBAAwB,CAAC,GAAG3B,QAAQ,CAAS,CAAC,CAAC;EAC7E,MAAM,CAAC4B,MAAM,EAAEC,SAAS,CAAC,GAAG7B,QAAQ,CAAc,CAAC;EAEnD,MAAM8B,GAAG,GAAG/B,MAAM,CAAiB,IAAI,CAAC;EACxC,MAAMgC,qBAAqB,GAAGhC,MAAM,CAAU,KAAK,CAAC;EACpD,MAAMiC,eAAe,GAAGjC,MAAM,CAAqBkC,SAAS,CAAC;EAE7D,MAAMnB,SAAS,GAAGL,YAAY,CAAC;IAAEE,aAAa;IAAEG,SAAS,EAAEC;EAAc,CAAC,CAAC;EAE3E,MAAM;IAAEmB,SAAS;IAAEC,KAAK;IAAEC;EAAY,CAAC,GAAG9B,WAAW,CAAC;IAClDW,SAAS;IACTL,SAAS;IACTI,aAAa;IACbF,SAAS;IACTH,aAAa;IACba;EACJ,CAAC,CAAC;EAEF,MAAMa,WAAW,GAAGxC,WAAW,CAAC,MAAM;IAClC,IAAI,OAAOwB,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAAC,CAAC;IACb;EACJ,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;;EAEb;AACJ;AACA;EACI,MAAMiB,WAAW,GAAGzC,WAAW,CAC1B0C,KAAiB,IAAK;IACnB,IACIT,GAAG,CAACU,OAAO,IACXhB,kBAAkB,IAClB,CAACb,aAAa,CAAC8B,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,IAC7C,CAACZ,GAAG,CAACU,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,EAC7C;MACEH,KAAK,CAACI,cAAc,CAAC,CAAC;MACtBJ,KAAK,CAACK,eAAe,CAAC,CAAC;MAEvB,MAAMC,yBAAyB,GAAGvB,cAAc,GAAG,CAAC,IAAI,KAAK;MAE7D,IAAI,CAACS,qBAAqB,CAACS,OAAO,IAAI,CAACK,yBAAyB,EAAE;QAC9DR,WAAW,CAAC,CAAC;MACjB;IACJ;IAEAN,qBAAqB,CAACS,OAAO,GAAG,KAAK;EACzC,CAAC,EACD,CAAC7B,aAAa,EAAE0B,WAAW,EAAEf,cAAc,EAAEE,kBAAkB,CACnE,CAAC;EAED,MAAMsB,oBAAoB,GAAGjD,WAAW,CACnCkD,YAAkC,IAAK;IACpC;IACA;IACA,IAAItB,mBAAmB,CAACe,OAAO,EAAE;MAC7Bb,wBAAwB,CAACoB,YAAY,CAACC,MAAM,CAAC;IACjD;IAEA,IAAI,OAAOzB,SAAS,KAAK,UAAU,EAAE;MACjCA,SAAS,CAACwB,YAAY,CAAC;IAC3B;EACJ,CAAC,EACD,CAACxB,SAAS,CACd,CAAC;EAED,MAAM0B,cAAc,GAAGpD,WAAW,CAAC,MAAM;IACrCqD,YAAY,CAAClB,eAAe,CAACQ,OAAO,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMW,gBAAgB,GAAGtD,WAAW,CAAC,MAAM;IACvCmC,eAAe,CAACQ,OAAO,GAAGY,MAAM,CAACC,UAAU,CAAC,MAAM;MAC9CtB,qBAAqB,CAACS,OAAO,GAAG,IAAI;IACxC,CAAC,EAAE,GAAG,CAAC;EACX,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;EACIjC,mBAAmB,CAAC;IAChB+C,OAAO,EAAEhB,WAAW;IACpBjB,OAAO,EAAEgB,WAAW;IACpBkB,UAAU,EAAEN,cAAc;IAC1BO,YAAY,EAAEL;EAClB,CAAC,CAAC;EAEFrD,SAAS,CAAC,MAAM;IACZ,MAAM2D,iBAAiB,GAAG,CACtBrD,iBAAiB,CAACsD,MAAM,EACxBtD,iBAAiB,CAACuD,WAAW,EAC7BvD,iBAAiB,CAACc,YAAY,CACjC,CAAC0C,QAAQ,CAAC3C,SAAS,CAAC;IAErB,MAAM4C,yBAAyB,GAAGlD,aAAa,CAACmD,OAAO,CACnDtD,eAAe,CAACuD,mBACpB,CAAC;IAEDtC,mBAAmB,CAACe,OAAO,GACvB,CAAC,EAAEqB,yBAAyB,IAAIA,yBAAyB,CAACpB,QAAQ,CAAC9B,aAAa,CAAC,CAAC,IAClF,IAAI;;IAER;IACA,IACI8C,iBAAiB,IACjBhC,mBAAmB,CAACe,OAAO,IAC3Bd,qBAAqB,GAAG,CAAC,IACzBmC,yBAAyB,IACzBrC,kBAAkB,EACpB;MACE,MAAMwC,eAAe,GACjBZ,MAAM,CAACa,WAAW,GAAGtD,aAAa,CAACuD,qBAAqB,CAAC,CAAC,CAACC,MAAM;;MAErE;MACA;MACA,MAAMC,qBAAqB,GAAG1C,qBAAqB,GAAG,EAAE,GAAGsC,eAAe;MAE1E,IAAII,qBAAqB,GAAG,CAAC,EAAE;QAC3B;QACAP,yBAAyB,CAACQ,KAAK,CAACC,YAAY,GAAG,GAAGF,qBAAqB,IAAI;MAC/E,CAAC,MAAM;QACH;QACAP,yBAAyB,CAACQ,KAAK,CAACC,YAAY,GAAG,KAAK;MACxD;IACJ;IAEA,IAAI7C,mBAAmB,CAACe,OAAO,IAAIqB,yBAAyB,IAAI,CAACrC,kBAAkB,EAAE;MACjF;MACAqC,yBAAyB,CAACQ,KAAK,CAACC,YAAY,GAAG,KAAK;IACxD;IAEA,OAAO,MAAM;MACT,IAAIT,yBAAyB,EAAE;QAC3BA,yBAAyB,CAACQ,KAAK,CAACC,YAAY,GAAG,KAAK;MACxD;IACJ,CAAC;EACL,CAAC,EAAE,CAAC3D,aAAa,EAAEM,SAAS,EAAES,qBAAqB,EAAEF,kBAAkB,CAAC,CAAC;EAEzE1B,SAAS,CAAC,MAAM;IACZ,IAAI,CAACgB,SAAS,EAAE;IAEhBe,SAAS,CAAC,mBACN1B,YAAY,cACRP,KAAA,CAAA2E,aAAA,CAAClE,sBAAsB;MACnB+B,WAAW,EAAEA,WAAY;MACzBb,SAAS,EAAEuB,oBAAqB;MAChC0B,iBAAiB,EAAEhD,kBAAmB;MACtCU,SAAS,EAAEA;IAAU,gBAErBtC,KAAA,CAAA2E,aAAA,CAACrE,gCAAgC;MAC7BuE,MAAM,EAAEtC,KAAM;MACduC,SAAS,EAAEtD,YAAa;MACxBuD,UAAU,EAAExD,SAAU;MACtByD,UAAU,EAAE3D,SAAU;MACtBa,GAAG,EAAEA;IAAI,GAERjB,QAC6B,CACd,CAAC,EACzBC,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CACCD,QAAQ,EACRC,SAAS,EACTsB,WAAW,EACXnB,SAAS,EACT6B,oBAAoB,EACpB3B,SAAS,EACTC,YAAY,EACZI,kBAAkB,EAClBU,SAAS,EACTC,KAAK,CACR,CAAC;EAEF,oBAAOvC,KAAA,CAAA2E,aAAA,CAACtE,yBAAyB,QAAE2B,MAAkC,CAAC;AAC1E,CAAC;AAEDlB,mBAAmB,CAACmE,WAAW,GAAG,qBAAqB;AAEvD,eAAenE,mBAAmB","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useEffect, useMemo, useState, useImperativeHandle, useContext } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useState, useImperativeHandle, useContext, useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import Badge from '../badge/Badge';
@@ -6,19 +6,22 @@ import Icon from '../icon/Icon';
 import { StyledTagInput, StyledTagInputIconWrapper, StyledTagInputTagInput, StyledTagInputTagWrapper, StyledTagInputTagWrapperText } from './TagInput.styles';
 import { AreaContext } from '../area-provider/AreaContextProvider';
 const TagInput = /*#__PURE__*/forwardRef(({
-  placeholder,
-  tags,
-  onRemove,
-  onChange,
-  onAdd,
   leftElement,
+  onAdd,
+  onBlur,
+  onChange,
+  onFocus,
+  onRemove,
+  placeholder,
   shouldAllowMultiple = true,
-  shouldPreventEnter
+  shouldPreventEnter,
+  tags
 }, ref) => {
   const [internalTags, setInternalTags] = useState();
   const [currentValue, setCurrentValue] = useState('');
   const [selectedId, setSelectedId] = useState();
   const areaProvider = useContext(AreaContext);
+  const inputRef = useRef(null);
   const theme = useTheme();
   useEffect(() => {
     if (tags) {
@@ -30,6 +33,7 @@ const TagInput = /*#__PURE__*/forwardRef(({
   };
   const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   useImperativeHandle(ref, () => ({
+    blur: () => inputRef.current?.blur(),
     getUnsavedTagText: currentValue !== '' ? currentValue : undefined,
     resetValue: handleResetValue
   }), [currentValue]);
@@ -125,11 +129,14 @@ const TagInput = /*#__PURE__*/forwardRef(({
   return useMemo(() => /*#__PURE__*/React.createElement(StyledTagInput, {
     $shouldChangeColor: shouldChangeColor
   }, leftElement && /*#__PURE__*/React.createElement(StyledTagInputIconWrapper, null, leftElement), content, shouldShowInput && /*#__PURE__*/React.createElement(StyledTagInputTagInput, {
-    placeholder: tags && tags.length > 0 ? undefined : placeholder,
-    onKeyDown: handleKeyDown,
+    onBlur: onBlur,
     onChange: handleChange,
+    onFocus: onFocus,
+    onKeyDown: handleKeyDown,
+    placeholder: tags && tags.length > 0 ? undefined : placeholder,
+    ref: inputRef,
     value: currentValue
-  })), [content, currentValue, handleChange, handleKeyDown, leftElement, placeholder, shouldChangeColor, shouldShowInput, tags]);
+  })), [content, currentValue, handleChange, handleKeyDown, leftElement, onBlur, onFocus, placeholder, shouldChangeColor, shouldShowInput, tags]);
 });
 export default TagInput;
 //# sourceMappingURL=TagInput.js.map

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","useTheme","v4","uuidv4","Badge","Icon","StyledTagInput","StyledTagInputIconWrapper","StyledTagInputTagInput","StyledTagInputTagWrapper","StyledTagInputTagWrapperText","AreaContext","TagInput","placeholder","tags","onRemove","onChange","onAdd","leftElement","shouldAllowMultiple","shouldPreventEnter","ref","internalTags","setInternalTags","currentValue","setCurrentValue","selectedId","setSelectedId","areaProvider","theme","slice","handleResetValue","shouldChangeColor","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} 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 value of the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\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     * The tags that should be displayed.\n     */\n    tags?: Tag[];\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\nexport type TagInputRef = {\n    getUnsavedTagText: Tag['text'] | undefined;\n    resetValue: () => void;\n};\n\nconst TagInput = forwardRef<TagInputRef, TagInputProps>(\n    (\n        {\n            placeholder,\n            tags,\n            onRemove,\n            onChange,\n            onAdd,\n            leftElement,\n            shouldAllowMultiple = true,\n            shouldPreventEnter,\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 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                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                            placeholder={tags && tags.length > 0 ? undefined : placeholder}\n                            onKeyDown={handleKeyDown}\n                            onChange={handleChange}\n                            value={currentValue}\n                        />\n                    )}\n                </StyledTagInput>\n            ),\n            [\n                content,\n                currentValue,\n                handleChange,\n                handleKeyDown,\n                leftElement,\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","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":[]}

package/lib/esm/hooks/dropdown.js

@@ -8,15 +8,15 @@ export const useDropdownListener = ({
   onTouchStart
 }) => {
   useEffect(() => {
-    document.addEventListener('click', onClick);
-    document.addEventListener('touchend', onTouchEnd);
-    document.addEventListener('touchstart', onTouchStart);
-    window.addEventListener('blur', () => onClose());
+    document.addEventListener('click', onClick, true);
+    document.addEventListener('touchend', onTouchEnd, true);
+    document.addEventListener('touchstart', onTouchStart, true);
+    window.addEventListener('blur', () => onClose(), true);
     return () => {
-      document.removeEventListener('click', onClick);
-      document.removeEventListener('touchend', onTouchEnd);
-      document.removeEventListener('touchstart', onTouchStart);
-      window.addEventListener('blur', () => onClose());
+      document.removeEventListener('click', onClick, true);
+      document.removeEventListener('touchend', onTouchEnd, true);
+      document.removeEventListener('touchstart', onTouchStart, true);
+      window.addEventListener('blur', () => onClose(), true);
     };
   }, [onClick, onClose, onTouchEnd, onTouchStart]);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":["useCallback","useEffect","useLayoutEffect","useMemo","useState","DropdownDirection","useIsomorphicLayoutEffect","window","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","document","addEventListener","removeEventListener","useDropdownAlignment","direction","shouldUseTopAlignment","anchorElement","bodyWidth","translateX","setTranslateX","translateY","setTranslateY","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n    onClick: (event: MouseEvent) => void;\n    onClose: () => void;\n    onTouchEnd: (event: TouchEvent) => void;\n    onTouchStart: (event: TouchEvent) => void;\n}\n\nexport const useDropdownListener = ({\n    onClick,\n    onClose,\n    onTouchEnd,\n    onTouchStart,\n}: UseDropdownListenerOptions) => {\n    useEffect(() => {\n        document.addEventListener('click', onClick);\n        document.addEventListener('touchend', onTouchEnd);\n        document.addEventListener('touchstart', onTouchStart);\n\n        window.addEventListener('blur', () => onClose());\n\n        return () => {\n            document.removeEventListener('click', onClick);\n            document.removeEventListener('touchend', onTouchEnd);\n            document.removeEventListener('touchstart', onTouchStart);\n\n            window.addEventListener('blur', () => onClose());\n        };\n    }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n    direction: DropdownDirection;\n    shouldUseTopAlignment: boolean;\n    bodyWidth?: number;\n    anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n    direction,\n    shouldUseTopAlignment,\n    anchorElement,\n    bodyWidth,\n}: UseDropdownAlignmentOptions) => {\n    const [translateX, setTranslateX] = useState<string>('0px');\n    const [translateY, setTranslateY] = useState<string>('0px');\n\n    useEffect(() => {\n        if (\n            [\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.LEFT,\n            ].includes(direction) &&\n            typeof bodyWidth === 'number'\n        ) {\n            const difference = anchorElement.clientWidth - bodyWidth;\n\n            setTranslateX(`${difference}px`);\n        } else {\n            setTranslateX('0px');\n        }\n    }, [anchorElement.clientWidth, bodyWidth, direction]);\n\n    useEffect(() => {\n        const useTopAlignment =\n            shouldUseTopAlignment ||\n            [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n        if (useTopAlignment) {\n            setTranslateY('-100%');\n        } else {\n            setTranslateY('0px');\n        }\n    }, [direction, shouldUseTopAlignment]);\n\n    return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n    anchorElement,\n    container,\n    contentHeight = 0,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n    const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n    const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n    const calculateCoordinates = useCallback(() => {\n        if (container) {\n            const {\n                left: anchorLeft,\n                top: anchorTop,\n                height: anchorHeight,\n            } = anchorElement.getBoundingClientRect();\n\n            const { left, top, height } = container.getBoundingClientRect();\n\n            const x = anchorLeft - left + container.scrollLeft;\n            const y = anchorTop - top + container.scrollTop;\n\n            let useTopAlignment = [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n            const hasBottomAlignment = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n                useTopAlignment = true;\n\n                setShouldUseTopAlignment(true);\n            } else {\n                setShouldUseTopAlignment(false);\n            }\n\n            setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n        }\n    }, [anchorElement, container, contentHeight, direction]);\n\n    useIsomorphicLayoutEffect(() => {\n        const handleResize = () => {\n            calculateCoordinates();\n\n            setTimeout(calculateCoordinates, 300);\n        };\n\n        handleResize();\n\n        if (shouldShowDropdown) {\n            window.addEventListener('resize', handleResize);\n        }\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [calculateCoordinates, shouldShowDropdown]);\n\n    return useMemo(\n        () => ({ shouldUseTopAlignment, coordinates }),\n        [coordinates, shouldUseTopAlignment],\n    );\n};\n\ninterface UseDropdownOptions {\n    anchorElement: Element;\n    bodyWidth?: number;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n    anchorElement,\n    bodyWidth,\n    container,\n    contentHeight,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownOptions) => {\n    const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n        anchorElement,\n        container,\n        contentHeight,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const transform = useDropdownAlignment({\n        shouldUseTopAlignment,\n        bodyWidth,\n        anchorElement,\n        direction,\n    });\n\n    const width = anchorElement.clientWidth;\n\n    return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,eAAe,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAClF,SAA8BC,iBAAiB,QAAQ,mBAAmB;AAE1E,MAAMC,yBAAyB,GAAG,OAAOC,MAAM,KAAK,WAAW,GAAGL,eAAe,GAAGD,SAAS;AAS7F,OAAO,MAAMO,mBAAmB,GAAGA,CAAC;EAChCC,OAAO;EACPC,OAAO;EACPC,UAAU;EACVC;AACwB,CAAC,KAAK;EAC9BX,SAAS,CAAC,MAAM;IACZY,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEL,OAAO,CAAC;IAC3CI,QAAQ,CAACC,gBAAgB,CAAC,UAAU,EAAEH,UAAU,CAAC;IACjDE,QAAQ,CAACC,gBAAgB,CAAC,YAAY,EAAEF,YAAY,CAAC;IAErDL,MAAM,CAACO,gBAAgB,CAAC,MAAM,EAAE,MAAMJ,OAAO,CAAC,CAAC,CAAC;IAEhD,OAAO,MAAM;MACTG,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEN,OAAO,CAAC;MAC9CI,QAAQ,CAACE,mBAAmB,CAAC,UAAU,EAAEJ,UAAU,CAAC;MACpDE,QAAQ,CAACE,mBAAmB,CAAC,YAAY,EAAEH,YAAY,CAAC;MAExDL,MAAM,CAACO,gBAAgB,CAAC,MAAM,EAAE,MAAMJ,OAAO,CAAC,CAAC,CAAC;IACpD,CAAC;EACL,CAAC,EAAE,CAACD,OAAO,EAAEC,OAAO,EAAEC,UAAU,EAAEC,YAAY,CAAC,CAAC;AACpD,CAAC;AASD,OAAO,MAAMI,oBAAoB,GAAGA,CAAC;EACjCC,SAAS;EACTC,qBAAqB;EACrBC,aAAa;EACbC;AACyB,CAAC,KAAK;EAC/B,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGlB,QAAQ,CAAS,KAAK,CAAC;EAC3D,MAAM,CAACmB,UAAU,EAAEC,aAAa,CAAC,GAAGpB,QAAQ,CAAS,KAAK,CAAC;EAE3DH,SAAS,CAAC,MAAM;IACZ,IACI,CACII,iBAAiB,CAACoB,WAAW,EAC7BpB,iBAAiB,CAACqB,QAAQ,EAC1BrB,iBAAiB,CAACsB,IAAI,CACzB,CAACC,QAAQ,CAACX,SAAS,CAAC,IACrB,OAAOG,SAAS,KAAK,QAAQ,EAC/B;MACE,MAAMS,UAAU,GAAGV,aAAa,CAACW,WAAW,GAAGV,SAAS;MAExDE,aAAa,CAAC,GAAGO,UAAU,IAAI,CAAC;IACpC,CAAC,MAAM;MACHP,aAAa,CAAC,KAAK,CAAC;IACxB;EACJ,CAAC,EAAE,CAACH,aAAa,CAACW,WAAW,EAAEV,SAAS,EAAEH,SAAS,CAAC,CAAC;EAErDhB,SAAS,CAAC,MAAM;IACZ,MAAM8B,eAAe,GACjBb,qBAAqB,IACrB,CACIb,iBAAiB,CAAC2B,GAAG,EACrB3B,iBAAiB,CAACqB,QAAQ,EAC1BrB,iBAAiB,CAAC4B,SAAS,CAC9B,CAACL,QAAQ,CAACX,SAAS,CAAC;IAEzB,IAAIc,eAAe,EAAE;MACjBP,aAAa,CAAC,OAAO,CAAC;IAC1B,CAAC,MAAM;MACHA,aAAa,CAAC,KAAK,CAAC;IACxB;EACJ,CAAC,EAAE,CAACP,SAAS,EAAEC,qBAAqB,CAAC,CAAC;EAEtC,OAAOf,OAAO,CAAC,OAAO;IAAE+B,CAAC,EAAEb,UAAU;IAAEc,CAAC,EAAEZ;EAAW,CAAC,CAAC,EAAE,CAACF,UAAU,EAAEE,UAAU,CAAC,CAAC;AACtF,CAAC;AAUD,OAAO,MAAMa,mBAAmB,GAAGA,CAAC;EAChCjB,aAAa;EACbkB,SAAS;EACTC,aAAa,GAAG,CAAC;EACjBrB,SAAS;EACTsB;AACwB,CAAC,KAAK;EAC9B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGrC,QAAQ,CAAsB;IAAE8B,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC,CAAC;EACnF,MAAM,CAACjB,qBAAqB,EAAEwB,wBAAwB,CAAC,GAAGtC,QAAQ,CAAC,KAAK,CAAC;EAEzE,MAAMuC,oBAAoB,GAAG3C,WAAW,CAAC,MAAM;IAC3C,IAAIqC,SAAS,EAAE;MACX,MAAM;QACFO,IAAI,EAAEC,UAAU;QAChBC,GAAG,EAAEC,SAAS;QACdC,MAAM,EAAEC;MACZ,CAAC,GAAG9B,aAAa,CAAC+B,qBAAqB,CAAC,CAAC;MAEzC,MAAM;QAAEN,IAAI;QAAEE,GAAG;QAAEE;MAAO,CAAC,GAAGX,SAAS,CAACa,qBAAqB,CAAC,CAAC;MAE/D,MAAMhB,CAAC,GAAGW,UAAU,GAAGD,IAAI,GAAGP,SAAS,CAACc,UAAU;MAClD,MAAMhB,CAAC,GAAGY,SAAS,GAAGD,GAAG,GAAGT,SAAS,CAACe,SAAS;MAE/C,IAAIrB,eAAe,GAAG,CAClB1B,iBAAiB,CAAC2B,GAAG,EACrB3B,iBAAiB,CAACqB,QAAQ,EAC1BrB,iBAAiB,CAAC4B,SAAS,CAC9B,CAACL,QAAQ,CAACX,SAAS,CAAC;MAErB,MAAMoC,kBAAkB,GAAG,CACvBhD,iBAAiB,CAACiD,MAAM,EACxBjD,iBAAiB,CAACoB,WAAW,EAC7BpB,iBAAiB,CAACkD,YAAY,CACjC,CAAC3B,QAAQ,CAACX,SAAS,CAAC;MAErB,IAAI,CAACoC,kBAAkB,IAAIlB,CAAC,GAAGc,YAAY,GAAGX,aAAa,GAAGU,MAAM,EAAE;QAClEjB,eAAe,GAAG,IAAI;QAEtBW,wBAAwB,CAAC,IAAI,CAAC;MAClC,CAAC,MAAM;QACHA,wBAAwB,CAAC,KAAK,CAAC;MACnC;MAEAD,cAAc,CAAC;QAAEP,CAAC;QAAEC,CAAC,EAAEJ,eAAe,GAAGI,CAAC,GAAGA,CAAC,GAAGc;MAAa,CAAC,CAAC;IACpE;EACJ,CAAC,EAAE,CAAC9B,aAAa,EAAEkB,SAAS,EAAEC,aAAa,EAAErB,SAAS,CAAC,CAAC;EAExDX,yBAAyB,CAAC,MAAM;IAC5B,MAAMkD,YAAY,GAAGA,CAAA,KAAM;MACvBb,oBAAoB,CAAC,CAAC;MAEtBc,UAAU,CAACd,oBAAoB,EAAE,GAAG,CAAC;IACzC,CAAC;IAEDa,YAAY,CAAC,CAAC;IAEd,IAAIjB,kBAAkB,EAAE;MACpBhC,MAAM,CAACO,gBAAgB,CAAC,QAAQ,EAAE0C,YAAY,CAAC;IACnD;IAEA,OAAO,MAAM;MACTjD,MAAM,CAACQ,mBAAmB,CAAC,QAAQ,EAAEyC,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACb,oBAAoB,EAAEJ,kBAAkB,CAAC,CAAC;EAE9C,OAAOpC,OAAO,CACV,OAAO;IAAEe,qBAAqB;IAAEsB;EAAY,CAAC,CAAC,EAC9C,CAACA,WAAW,EAAEtB,qBAAqB,CACvC,CAAC;AACL,CAAC;AAWD,OAAO,MAAMwC,WAAW,GAAGA,CAAC;EACxBvC,aAAa;EACbC,SAAS;EACTiB,SAAS;EACTC,aAAa;EACbrB,SAAS;EACTsB;AACgB,CAAC,KAAK;EACtB,MAAM;IAAErB,qBAAqB;IAAEsB;EAAY,CAAC,GAAGJ,mBAAmB,CAAC;IAC/DjB,aAAa;IACbkB,SAAS;IACTC,aAAa;IACbrB,SAAS;IACTsB;EACJ,CAAC,CAAC;EAEF,MAAMoB,SAAS,GAAG3C,oBAAoB,CAAC;IACnCE,qBAAqB;IACrBE,SAAS;IACTD,aAAa;IACbF;EACJ,CAAC,CAAC;EAEF,MAAM2C,KAAK,GAAGzC,aAAa,CAACW,WAAW;EAEvC,OAAO3B,OAAO,CAAC,OAAO;IAAEqC,WAAW;IAAEmB,SAAS;IAAEC;EAAM,CAAC,CAAC,EAAE,CAACpB,WAAW,EAAEmB,SAAS,EAAEC,KAAK,CAAC,CAAC;AAC9F,CAAC","ignoreList":[]}
+{"version":3,"file":"dropdown.js","names":["useCallback","useEffect","useLayoutEffect","useMemo","useState","DropdownDirection","useIsomorphicLayoutEffect","window","useDropdownListener","onClick","onClose","onTouchEnd","onTouchStart","document","addEventListener","removeEventListener","useDropdownAlignment","direction","shouldUseTopAlignment","anchorElement","bodyWidth","translateX","setTranslateX","translateY","setTranslateY","BOTTOM_LEFT","TOP_LEFT","LEFT","includes","difference","clientWidth","useTopAlignment","TOP","TOP_RIGHT","x","y","useDropdownPosition","container","contentHeight","shouldShowDropdown","coordinates","setCoordinates","setShouldUseTopAlignment","calculateCoordinates","left","anchorLeft","top","anchorTop","height","anchorHeight","getBoundingClientRect","scrollLeft","scrollTop","hasBottomAlignment","BOTTOM","BOTTOM_RIGHT","handleResize","setTimeout","useDropdown","transform","width"],"sources":["../../../src/hooks/dropdown.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport { DropdownCoordinates, DropdownDirection } from '../types/dropdown';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\ninterface UseDropdownListenerOptions {\n    onClick: (event: MouseEvent) => void;\n    onClose: () => void;\n    onTouchEnd: (event: TouchEvent) => void;\n    onTouchStart: (event: TouchEvent) => void;\n}\n\nexport const useDropdownListener = ({\n    onClick,\n    onClose,\n    onTouchEnd,\n    onTouchStart,\n}: UseDropdownListenerOptions) => {\n    useEffect(() => {\n        document.addEventListener('click', onClick, true);\n        document.addEventListener('touchend', onTouchEnd, true);\n        document.addEventListener('touchstart', onTouchStart, true);\n\n        window.addEventListener('blur', () => onClose(), true);\n\n        return () => {\n            document.removeEventListener('click', onClick, true);\n            document.removeEventListener('touchend', onTouchEnd, true);\n            document.removeEventListener('touchstart', onTouchStart, true);\n\n            window.addEventListener('blur', () => onClose(), true);\n        };\n    }, [onClick, onClose, onTouchEnd, onTouchStart]);\n};\n\ninterface UseDropdownAlignmentOptions {\n    direction: DropdownDirection;\n    shouldUseTopAlignment: boolean;\n    bodyWidth?: number;\n    anchorElement: Element;\n}\n\nexport const useDropdownAlignment = ({\n    direction,\n    shouldUseTopAlignment,\n    anchorElement,\n    bodyWidth,\n}: UseDropdownAlignmentOptions) => {\n    const [translateX, setTranslateX] = useState<string>('0px');\n    const [translateY, setTranslateY] = useState<string>('0px');\n\n    useEffect(() => {\n        if (\n            [\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.LEFT,\n            ].includes(direction) &&\n            typeof bodyWidth === 'number'\n        ) {\n            const difference = anchorElement.clientWidth - bodyWidth;\n\n            setTranslateX(`${difference}px`);\n        } else {\n            setTranslateX('0px');\n        }\n    }, [anchorElement.clientWidth, bodyWidth, direction]);\n\n    useEffect(() => {\n        const useTopAlignment =\n            shouldUseTopAlignment ||\n            [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n        if (useTopAlignment) {\n            setTranslateY('-100%');\n        } else {\n            setTranslateY('0px');\n        }\n    }, [direction, shouldUseTopAlignment]);\n\n    return useMemo(() => ({ x: translateX, y: translateY }), [translateX, translateY]);\n};\n\ninterface UseDropdownPositionOptions {\n    anchorElement: Element;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdownPosition = ({\n    anchorElement,\n    container,\n    contentHeight = 0,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownPositionOptions) => {\n    const [coordinates, setCoordinates] = useState<DropdownCoordinates>({ x: 0, y: 0 });\n    const [shouldUseTopAlignment, setShouldUseTopAlignment] = useState(false);\n\n    const calculateCoordinates = useCallback(() => {\n        if (container) {\n            const {\n                left: anchorLeft,\n                top: anchorTop,\n                height: anchorHeight,\n            } = anchorElement.getBoundingClientRect();\n\n            const { left, top, height } = container.getBoundingClientRect();\n\n            const x = anchorLeft - left + container.scrollLeft;\n            const y = anchorTop - top + container.scrollTop;\n\n            let useTopAlignment = [\n                DropdownDirection.TOP,\n                DropdownDirection.TOP_LEFT,\n                DropdownDirection.TOP_RIGHT,\n            ].includes(direction);\n\n            const hasBottomAlignment = [\n                DropdownDirection.BOTTOM,\n                DropdownDirection.BOTTOM_LEFT,\n                DropdownDirection.BOTTOM_RIGHT,\n            ].includes(direction);\n\n            if (!hasBottomAlignment && y + anchorHeight + contentHeight > height) {\n                useTopAlignment = true;\n\n                setShouldUseTopAlignment(true);\n            } else {\n                setShouldUseTopAlignment(false);\n            }\n\n            setCoordinates({ x, y: useTopAlignment ? y : y + anchorHeight });\n        }\n    }, [anchorElement, container, contentHeight, direction]);\n\n    useIsomorphicLayoutEffect(() => {\n        const handleResize = () => {\n            calculateCoordinates();\n\n            setTimeout(calculateCoordinates, 300);\n        };\n\n        handleResize();\n\n        if (shouldShowDropdown) {\n            window.addEventListener('resize', handleResize);\n        }\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [calculateCoordinates, shouldShowDropdown]);\n\n    return useMemo(\n        () => ({ shouldUseTopAlignment, coordinates }),\n        [coordinates, shouldUseTopAlignment],\n    );\n};\n\ninterface UseDropdownOptions {\n    anchorElement: Element;\n    bodyWidth?: number;\n    container?: Element;\n    contentHeight?: number;\n    direction: DropdownDirection;\n    shouldShowDropdown: boolean;\n}\n\nexport const useDropdown = ({\n    anchorElement,\n    bodyWidth,\n    container,\n    contentHeight,\n    direction,\n    shouldShowDropdown,\n}: UseDropdownOptions) => {\n    const { shouldUseTopAlignment, coordinates } = useDropdownPosition({\n        anchorElement,\n        container,\n        contentHeight,\n        direction,\n        shouldShowDropdown,\n    });\n\n    const transform = useDropdownAlignment({\n        shouldUseTopAlignment,\n        bodyWidth,\n        anchorElement,\n        direction,\n    });\n\n    const width = anchorElement.clientWidth;\n\n    return useMemo(() => ({ coordinates, transform, width }), [coordinates, transform, width]);\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Accordion","AccordionContent","AccordionGroup","AccordionIntro","AccordionItem","AmountControl","VerificationBadge","AreaContext","AreaProvider","Badge","Button","Checkbox","ColorSchemeProvider","useColorScheme","BadgeSize","BadgeDesign","useContainer","ContainerAnchor","DropdownDirection","useIsMeasuredClone","useCombinedRefs","FileList","FileSelect","DropdownBodyWrapper","ComboBox","ContentCard","HighlightSLider","ContextMenu","ExpandableContent","FileInput","FilterButton","FilterButtons","GridImage","GroupedImage","Icon","Input","InputSize","List","ListItemContent","ListItem","MentionFinder","NumberInput","PageProvider","Popup","PopupContent","ProgressBar","PopupAlignment","RadioButtonGroup","RadioButton","ScrollView","SearchBox","SearchInput","SelectButton","SetupWizardItem","SetupWizard","SharingBar","Signature","SliderButton","Slider","SmallWaitCursor","SmallWaitCursorSize","SmallWaitCursorSpeed","TagInput","TextArea","Tooltip","Truncation","MentionFinderPopupAlignment","useElementSize","ContentCardType","ContextMenuAlignment","isValidFileType","FilterButtonItemShape","FilterButtonSize","ClampPosition","getIsTouch","filterFilesByMimeType","getFileAsArrayBuffer","selectFiles","isTobitEmployee","getUsableHeight","uploadFile"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Accordion } from './components/accordion/Accordion';\nexport { default as AccordionContent } from './components/accordion/accordion-content/AccordionContent';\nexport { default as AccordionGroup } from './components/accordion/accordion-group/AccordionGroup';\nexport { default as AccordionIntro } from './components/accordion/accordion-intro/AccordionIntro';\nexport { default as AccordionItem } from './components/accordion/accordion-item/AccordionItem';\nexport { default as AmountControl } from './components/amount-control/AmountControl';\nexport { default as VerificationBadge } from './components/verification-badge/VerificationBadge';\nexport {\n    AreaContext,\n    default as AreaProvider,\n} from './components/area-provider/AreaContextProvider';\nexport { default as Badge } from './components/badge/Badge';\nexport { default as Button } from './components/button/Button';\nexport { default as Checkbox } from './components/checkbox/Checkbox';\nexport {\n    default as ColorSchemeProvider,\n    useColorScheme,\n} from './components/color-scheme-provider/ColorSchemeProvider';\nexport { BadgeSize, BadgeDesign } from './types/badge';\nexport type {\n    ColorSchemeContextProps,\n    WithTheme,\n} from './components/color-scheme-provider/ColorSchemeProvider';\nexport { useContainer, ContainerAnchor } from './hooks/container';\nexport { DropdownDirection, type DropdownCoordinates } from './types/dropdown';\nexport { useIsMeasuredClone } from './hooks/element';\nexport { useCombinedRefs } from './hooks/ref';\nexport {\n    default as FileList,\n    type IFileItem as FileListItem,\n} from './components/file-list/FileList';\nexport { default as FileSelect } from './components/file-select/FileSelect';\nexport { default as DropdownBodyWrapper } from './components/dropdown-body-wrapper/DropdownBodyWrapper';\nexport {\n    default as ComboBox,\n    type ComboBoxTextStyles,\n    type IComboBoxItem as ComboBoxItem,\n    type IComboBoxItems as ComboBoxItems,\n} from './components/combobox/ComboBox';\nexport { default as ContentCard } from './components/content-card/ContentCard';\nexport { default as HighlightSLider } from './components/highlight-slider/HighlightSlider';\nexport type { HighlightSliderItemColors as HighlightSliderColors } from './components/highlight-slider/highlight-slider-item/HighlightSliderItem';\nexport {\n    default as ContextMenu,\n    type ContextMenuCoordinates,\n    type ContextMenuItem,\n    type ContextMenuRef,\n} from './components/context-menu/ContextMenu';\nexport { default as ExpandableContent } from './components/expandable-content/ExpandableContent';\nexport { default as FileInput, type FileInputRef } from './components/file-input/FileInput';\nexport { default as FilterButton } from './components/filter-buttons/filter-button/FilterButton';\nexport { default as FilterButtons } from './components/filter-buttons/FilterButtons';\nexport { default as GridImage } from './components/grid-image/GridImage';\nexport { default as GroupedImage } from './components/grouped-image/GroupedImage';\nexport { default as Icon } from './components/icon/Icon';\nexport { default as Input, InputSize } from './components/input/Input';\nexport { default as List } from './components/list/List';\nexport { default as ListItemContent } from './components/list/list-item/list-item-content/ListItemContent';\nexport {\n    default as ListItem,\n    type ListItemElements,\n    type ListItemProps,\n} from './components/list/list-item/ListItem';\nexport { default as MentionFinder } from './components/mention-finder/MentionFinder';\nexport type { MentionMember } from './components/mention-finder/MentionFinder';\nexport { default as NumberInput } from './components/number-input/NumberInput';\nexport { default as PageProvider } from './components/page-provider/PageProvider';\nexport { default as Popup } from './components/popup/Popup';\nexport { default as PopupContent } from './components/popup/popup-content/PopupContent';\nexport { default as ProgressBar } from './components/progress-bar/ProgressBar';\nexport { PopupAlignment } from './types/popup';\nexport {\n    default as RadioButtonGroup,\n    type RadioButtonGroupRef,\n} from './components/radio-button/radio-button-group/RadioButtonGroup';\nexport { default as RadioButton } from './components/radio-button/RadioButton';\nexport { default as ScrollView } from './components/scroll-view/ScrollView';\nexport { default as SearchBox } from './components/search-box/SearchBox';\nexport { default as SearchInput } from './components/search-input/SearchInput';\nexport { default as SelectButton } from './components/select-button/SelectButton';\nexport { default as SetupWizardItem } from './components/setup-wizard/setup-wizard-item/SetupWizardItem';\nexport { default as SetupWizard } from './components/setup-wizard/SetupWizard';\nexport type { SetupWizardRef } from './components/setup-wizard/SetupWizard';\nexport { default as SharingBar } from './components/sharing-bar/SharingBar';\nexport { default as Signature } from './components/signature/Signature';\nexport type { SignatureRef } from './components/signature/Signature';\nexport { default as SliderButton } from './components/slider-button/SliderButton';\nexport { default as Slider } from './components/slider/Slider';\nexport {\n    default as SmallWaitCursor,\n    SmallWaitCursorSize,\n    SmallWaitCursorSpeed,\n} from './components/small-wait-cursor/SmallWaitCursor';\nexport { default as TagInput } from './components/tag-input/TagInput';\nexport { default as TextArea } from './components/text-area/TextArea';\nexport { default as Tooltip } from './components/tooltip/Tooltip';\nexport { default as Truncation } from './components/truncation/Truncation';\nexport { MentionFinderPopupAlignment } from './constants/mentionFinder';\nexport { useElementSize } from './hooks/element';\nexport type { BrowserName } from './types/chayns';\nexport { ContentCardType } from './types/contentCard';\nexport { ContextMenuAlignment } from './types/contextMenu';\nexport type { FileItem, Image, InternalFileItem, Meta, Video } from './types/file';\nexport { isValidFileType } from './utils/file';\nexport type { FileInputFileItem } from './types/fileInput';\nexport { FilterButtonItemShape, FilterButtonSize } from './types/filterButtons';\nexport type { IFilterButtonItem as FilterButtonItem } from './types/filterButtons';\nexport type { IListItemRightElements } from './types/list';\nexport type { PopupRef } from './types/popup';\nexport type { RadioButtonItem } from './types/radioButton';\nexport type {\n    ISearchBoxItem as SearchBoxItem,\n    ISearchBoxItems as SearchBoxItems,\n} from './types/searchBox';\nexport type { SelectButtonItem } from './types/selectButton';\nexport type { SliderButtonItem } from './types/slider-button';\nexport { ClampPosition } from './types/truncation';\nexport { getIsTouch } from './utils/environment';\nexport { filterFilesByMimeType, getFileAsArrayBuffer, selectFiles } from './utils/fileDialog';\nexport { isTobitEmployee } from './utils/isTobitEmployee';\nexport { getUsableHeight } from './utils/pageProvider';\nexport { uploadFile } from './utils/uploadFile';\nexport type { Theme } from './components/color-scheme-provider/ColorSchemeProvider';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","Accordion","AccordionContent","AccordionGroup","AccordionIntro","AccordionItem","AmountControl","VerificationBadge","AreaContext","AreaProvider","Badge","Button","Checkbox","ColorSchemeProvider","useColorScheme","BadgeSize","BadgeDesign","useContainer","ContainerAnchor","DropdownDirection","useIsMeasuredClone","useCombinedRefs","FileList","FileSelect","DropdownBodyWrapper","ComboBox","ContentCard","HighlightSLider","ContextMenu","ExpandableContent","FileInput","FilterButton","FilterButtons","GridImage","GroupedImage","Icon","Input","InputSize","List","ListItemContent","ListItem","MentionFinder","NumberInput","PageProvider","Popup","PopupContent","ProgressBar","PopupAlignment","RadioButtonGroup","RadioButton","ScrollView","SearchBox","SearchInput","SelectButton","SetupWizardItem","SetupWizard","SharingBar","Signature","SliderButton","Slider","SmallWaitCursor","SmallWaitCursorSize","SmallWaitCursorSpeed","TagInput","TextArea","Tooltip","Truncation","MentionFinderPopupAlignment","useElementSize","ContentCardType","ContextMenuAlignment","isValidFileType","FilterButtonItemShape","FilterButtonSize","ClampPosition","getIsTouch","filterFilesByMimeType","getFileAsArrayBuffer","selectFiles","isTobitEmployee","getUsableHeight","uploadFile"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Accordion } from './components/accordion/Accordion';\nexport { default as AccordionContent } from './components/accordion/accordion-content/AccordionContent';\nexport { default as AccordionGroup } from './components/accordion/accordion-group/AccordionGroup';\nexport { default as AccordionIntro } from './components/accordion/accordion-intro/AccordionIntro';\nexport { default as AccordionItem } from './components/accordion/accordion-item/AccordionItem';\nexport { default as AmountControl } from './components/amount-control/AmountControl';\nexport { default as VerificationBadge } from './components/verification-badge/VerificationBadge';\nexport {\n    AreaContext,\n    default as AreaProvider,\n} from './components/area-provider/AreaContextProvider';\nexport { default as Badge } from './components/badge/Badge';\nexport { default as Button } from './components/button/Button';\nexport { default as Checkbox } from './components/checkbox/Checkbox';\nexport {\n    default as ColorSchemeProvider,\n    useColorScheme,\n} from './components/color-scheme-provider/ColorSchemeProvider';\nexport { BadgeSize, BadgeDesign } from './types/badge';\nexport type {\n    ColorSchemeContextProps,\n    WithTheme,\n} from './components/color-scheme-provider/ColorSchemeProvider';\nexport { useContainer, ContainerAnchor } from './hooks/container';\nexport { DropdownDirection, type DropdownCoordinates } from './types/dropdown';\nexport { useIsMeasuredClone } from './hooks/element';\nexport { useCombinedRefs } from './hooks/ref';\nexport {\n    default as FileList,\n    type IFileItem as FileListItem,\n} from './components/file-list/FileList';\nexport { default as FileSelect } from './components/file-select/FileSelect';\nexport { default as DropdownBodyWrapper } from './components/dropdown-body-wrapper/DropdownBodyWrapper';\nexport {\n    default as ComboBox,\n    type ComboBoxTextStyles,\n    type IComboBoxItem as ComboBoxItem,\n    type IComboBoxItems as ComboBoxItems,\n} from './components/combobox/ComboBox';\nexport { default as ContentCard } from './components/content-card/ContentCard';\nexport { default as HighlightSLider } from './components/highlight-slider/HighlightSlider';\nexport type { HighlightSliderItemColors as HighlightSliderColors } from './components/highlight-slider/highlight-slider-item/HighlightSliderItem';\nexport {\n    default as ContextMenu,\n    type ContextMenuCoordinates,\n    type ContextMenuItem,\n    type ContextMenuRef,\n} from './components/context-menu/ContextMenu';\nexport { default as ExpandableContent } from './components/expandable-content/ExpandableContent';\nexport { default as FileInput, type FileInputRef } from './components/file-input/FileInput';\nexport { default as FilterButton } from './components/filter-buttons/filter-button/FilterButton';\nexport { default as FilterButtons } from './components/filter-buttons/FilterButtons';\nexport { default as GridImage } from './components/grid-image/GridImage';\nexport { default as GroupedImage } from './components/grouped-image/GroupedImage';\nexport { default as Icon } from './components/icon/Icon';\nexport { default as Input, InputSize } from './components/input/Input';\nexport { default as List } from './components/list/List';\nexport { default as ListItemContent } from './components/list/list-item/list-item-content/ListItemContent';\nexport {\n    default as ListItem,\n    type ListItemElements,\n    type ListItemProps,\n} from './components/list/list-item/ListItem';\nexport { default as MentionFinder } from './components/mention-finder/MentionFinder';\nexport type { MentionMember } from './components/mention-finder/MentionFinder';\nexport { default as NumberInput } from './components/number-input/NumberInput';\nexport { default as PageProvider } from './components/page-provider/PageProvider';\nexport { default as Popup } from './components/popup/Popup';\nexport { default as PopupContent } from './components/popup/popup-content/PopupContent';\nexport { default as ProgressBar } from './components/progress-bar/ProgressBar';\nexport { PopupAlignment } from './types/popup';\nexport {\n    default as RadioButtonGroup,\n    type RadioButtonGroupRef,\n} from './components/radio-button/radio-button-group/RadioButtonGroup';\nexport { default as RadioButton } from './components/radio-button/RadioButton';\nexport { default as ScrollView } from './components/scroll-view/ScrollView';\nexport { default as SearchBox } from './components/search-box/SearchBox';\nexport { default as SearchInput } from './components/search-input/SearchInput';\nexport { default as SelectButton } from './components/select-button/SelectButton';\nexport { default as SetupWizardItem } from './components/setup-wizard/setup-wizard-item/SetupWizardItem';\nexport { default as SetupWizard } from './components/setup-wizard/SetupWizard';\nexport type { SetupWizardRef } from './components/setup-wizard/SetupWizard';\nexport { default as SharingBar } from './components/sharing-bar/SharingBar';\nexport { default as Signature } from './components/signature/Signature';\nexport type { SignatureRef } from './components/signature/Signature';\nexport { default as SliderButton } from './components/slider-button/SliderButton';\nexport { default as Slider } from './components/slider/Slider';\nexport {\n    default as SmallWaitCursor,\n    SmallWaitCursorSize,\n    SmallWaitCursorSpeed,\n} from './components/small-wait-cursor/SmallWaitCursor';\nexport type { Tag } from './types/tagInput';\nexport { default as TagInput } from './components/tag-input/TagInput';\nexport type { TagInputRef } from './components/tag-input/TagInput';\nexport { default as TextArea } from './components/text-area/TextArea';\nexport { default as Tooltip } from './components/tooltip/Tooltip';\nexport { default as Truncation } from './components/truncation/Truncation';\nexport { MentionFinderPopupAlignment } from './constants/mentionFinder';\nexport { useElementSize } from './hooks/element';\nexport type { BrowserName } from './types/chayns';\nexport { ContentCardType } from './types/contentCard';\nexport { ContextMenuAlignment } from './types/contextMenu';\nexport type { FileItem, Image, InternalFileItem, Meta, Video } from './types/file';\nexport { isValidFileType } from './utils/file';\nexport type { FileInputFileItem } from './types/fileInput';\nexport { FilterButtonItemShape, FilterButtonSize } from './types/filterButtons';\nexport type { IFilterButtonItem as FilterButtonItem } from './types/filterButtons';\nexport type { IListItemRightElements } from './types/list';\nexport type { PopupRef } from './types/popup';\nexport type { RadioButtonItem } from './types/radioButton';\nexport type {\n    ISearchBoxItem as SearchBoxItem,\n    ISearchBoxItems as SearchBoxItems,\n} from './types/searchBox';\nexport type { SelectButtonItem } from './types/selectButton';\nexport type { SliderButtonItem } from './types/slider-button';\nexport { ClampPosition } from './types/truncation';\nexport { getIsTouch } from './utils/environment';\nexport { filterFilesByMimeType, getFileAsArrayBuffer, selectFiles } from './utils/fileDialog';\nexport { isTobitEmployee } from './utils/isTobitEmployee';\nexport { getUsableHeight } from './utils/pageProvider';\nexport { uploadFile } from './utils/uploadFile';\nexport type { Theme } from './components/color-scheme-provider/ColorSchemeProvider';\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/dropdown-body-wrapper/DropdownBodyWrapper.d.ts

@@ -38,6 +38,11 @@ interface DropdownBodyWrapperProps {
      * Function to be executed when the body is closed.
      */
     onClose?: VoidFunction;
+    /**
+     * Function to be executed when the user clicks outside the dropdown.
+     * If the function returns `true`, the dropdown will not be closed.
+     */
+    onOutsideClick?: () => boolean | void;
     /**
      * Function to be executed when the content is measured.
      */

package/lib/types/components/tag-input/TagInput.d.ts

@@ -1,4 +1,4 @@
-import React, { ChangeEventHandler, ReactNode } from 'react';
+import React, { ChangeEventHandler, ReactNode, FocusEventHandler } from 'react';
 import type { Tag } from '../../types/tagInput';
 export type TagInputProps = {
     /**
@@ -9,10 +9,18 @@ export type TagInputProps = {
      * Function to be executed when a tag is added.
      */
     onAdd?: (tag: Tag) => void;
+    /**
+     * Function to be executed when the input is blurred.
+     */
+    onBlur?: FocusEventHandler;
     /**
      * Function to be executed when the value of the input is changed.
      */
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Function to be executed when the input is focused.
+     */
+    onFocus?: FocusEventHandler;
     /**
      * Function to be executed when a tag is removed.
      */
@@ -21,10 +29,6 @@ export type TagInputProps = {
      * The placeholder that should be displayed.
      */
     placeholder?: string;
-    /**
-     * The tags that should be displayed.
-     */
-    tags?: Tag[];
     /**
      * Whether multiple tags should be allowed.
      */
@@ -33,8 +37,13 @@ export type TagInputProps = {
      * Whether the enter key should be prevented.
      */
     shouldPreventEnter?: boolean;
+    /**
+     * The tags that should be displayed.
+     */
+    tags?: Tag[];
 };
 export type TagInputRef = {
+    blur: () => void;
     getUnsavedTagText: Tag['text'] | undefined;
     resetValue: () => void;
 };

package/lib/types/index.d.ts

@@ -58,7 +58,9 @@ export type { SignatureRef } from './components/signature/Signature';
 export { default as SliderButton } from './components/slider-button/SliderButton';
 export { default as Slider } from './components/slider/Slider';
 export { default as SmallWaitCursor, SmallWaitCursorSize, SmallWaitCursorSpeed, } from './components/small-wait-cursor/SmallWaitCursor';
+export type { Tag } from './types/tagInput';
 export { default as TagInput } from './components/tag-input/TagInput';
+export type { TagInputRef } from './components/tag-input/TagInput';
 export { default as TextArea } from './components/text-area/TextArea';
 export { default as Tooltip } from './components/tooltip/Tooltip';
 export { default as Truncation } from './components/truncation/Truncation';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1195",
+    "version": "5.0.0-beta.1196",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c62c6834ff9c8086205486d255fa16c22e19ccbf"
+    "gitHead": "26edacf32936f754675f4cea418ed994a54a6551"
 }