funda-ui 4.7.624 → 4.7.701

package/lib/esm/File/index.tsx

@@ -8,6 +8,8 @@ import {
 } from 'funda-utils/dist/cjs/buffer';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
+
+
 export type FileProps = {
     contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
@@ -41,6 +43,15 @@ export type FileProps = {
     fetchFuncAsync?: any;
     fetchFuncMethod?: string;
     fetchFuncMethodParams?: any[];
+    formDataAppend?: (formData: FormData, files: FileList) => void;
+    /** Enable chunked upload for large files */
+    enableChunkedUpload?: boolean;
+    /** Chunk size in bytes (default: 2MB) */
+    chunkSize?: number;
+    /** Custom function to append chunk data to FormData. Receives (formData: FormData, chunk: Blob, chunkIndex: number, totalChunks: number, file: File) */
+    chunkDataAppend?: (formData: FormData, chunk: Blob, chunkIndex: number, totalChunks: number, file: File) => void;
+    /** Callback for chunk upload progress. Receives (uploadedBytes: number, totalBytes: number, file: File, chunkIndex: number, totalChunks: number) */
+    onChunkProgress?: (uploadedBytes: number, totalBytes: number, file: File, chunkIndex: number, totalChunks: number) => void;
     onChange?: (e: any, e2: any, value: any) => void;
     onComplete?: (e: any, e2: any, callback: any, incomingData: string | null | undefined) => void;
     onProgress?: (files: any, e: any, e2: any) => void;
@@ -79,9 +90,17 @@ const File = forwardRef((props: FileProps, externalRef: any) => {
         fetchFuncAsync,
         fetchFuncMethod,
         fetchFuncMethodParams,
+        formDataAppend,
         onChange,
         onComplete,
         onProgress,
+        
+        // Upload file in chunks
+        enableChunkedUpload,
+        chunkSize = 2 * 1024 * 1024, // Default 2MB
+        chunkDataAppend,
+        onChunkProgress,
+
         ...attributes
     } = props;
 
@@ -144,10 +163,9 @@ const File = forwardRef((props: FileProps, externalRef: any) => {
 
         let res = {};
         if (typeof window === 'undefined') return res;
-        
-   
+
         try {
-            const response = await fetch(url + '?' + new URLSearchParams(fetchParams as any), {
+            const response = await fetch(typeof fetchParams !== 'undefined' ? url + '?' + new URLSearchParams(fetchParams as any) : url, {
                 method: methord,
                 body: data,
                 ...rest
@@ -165,6 +183,75 @@ const File = forwardRef((props: FileProps, externalRef: any) => {
 
     }
 
+    /**
+     * Upload file in chunks
+     */
+    async function uploadFileInChunks(file: File, url: string, method: string = 'POST'): Promise<any> {
+        const totalChunks = Math.ceil(file.size / chunkSize);
+        const uploadId = `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+        let uploadedBytes = 0;
+
+        // Upload each chunk sequentially
+        for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
+            const start = chunkIndex * chunkSize;
+            const end = Math.min(start + chunkSize, file.size);
+            const chunk = file.slice(start, end);
+
+            const formData = new FormData();
+            
+            if (chunkDataAppend) {
+                // Use custom chunk data append function
+                chunkDataAppend(formData, chunk, chunkIndex, totalChunks, file);
+            } else {
+                // Default chunk upload format
+                formData.append('chunk', chunk);
+                formData.append('chunkIndex', chunkIndex.toString());
+                formData.append('totalChunks', totalChunks.toString());
+                formData.append('uploadId', uploadId);
+                formData.append('fileName', file.name);
+                formData.append('fileSize', file.size.toString());
+                formData.append('fileType', file.type);
+            }
+
+            // Update progress
+            uploadedBytes += (end - start);
+            onChunkProgress?.(uploadedBytes, file.size, file, chunkIndex, totalChunks);
+
+            // Upload chunk
+            const response: any = await fetchDataDefault(
+                url,
+                formData,
+                method,
+                {
+                    headers: { 'Content-Type': 'multipart/form-data' }
+                }
+            );
+
+            // Check if chunk upload failed
+            if (response.error) {
+                throw new Error(`Chunk ${chunkIndex + 1}/${totalChunks} upload failed: ${response.error}`);
+            }
+
+            // If server returns a specific response indicating chunk upload success/failure, handle it
+            if (response.code !== undefined && response.code !== 0 && response.code !== 200) {
+                throw new Error(`Chunk ${chunkIndex + 1}/${totalChunks} upload failed: ${response.message || 'Unknown error'}`);
+            }
+        }
+
+        // After all chunks are uploaded, return the final response
+        // The server should merge chunks and return the final result
+        return {
+            code: 0,
+            message: 'Upload completed',
+            data: {
+                uploadId,
+                fileName: file.name,
+                fileSize: file.size,
+                totalChunks
+            }
+        };
+    }
+
 
     function handleLabelEnter(event: any) {
         event.currentTarget.getElementsByTagName('button')[0].className = labelHoverClassName ? labelHoverClassName : 'btn btn-primary';
@@ -192,26 +279,70 @@ const File = forwardRef((props: FileProps, externalRef: any) => {
         setProgressing(true);
 
 
+        // Use the default "fetch()" method to handle file references
         if (fetchUrl) {
 
-            const formData = new FormData();
-            formData.append('action', 'upload_plug_action');
+            // Check if chunked upload is enabled
+            if (enableChunkedUpload) {
+                // Upload files in chunks
+                (async () => {
+                    try {
+                        const uploadPromises: Promise<any>[] = [];
+                        
+                        for (let i = 0; i < curFiles.length; i++) {
+                            const file = curFiles[i];
+                            uploadPromises.push(uploadFileInChunks(file, fetchUrl, fetchMethod ? fetchMethod : 'POST'));
+                        }
 
-            for (let i = 0; i < curFiles.length; i++) {
-                formData.append("clientFiles", curFiles[i]);
-            }
+                        const results = await Promise.all(uploadPromises);
+                        
+                        // Combine results from all files
+                        const jsonData = {
+                            code: 0,
+                            message: 'All files uploaded successfully',
+                            data: results
+                        };
+                        
+                        onComplete?.(fileInputRef.current, submitRef.current, jsonData, incomingData);
+                        setProgressing(false);
+                        resetDefaultVal();
+                    } catch (error: any) {
+                        const errorResponse = {
+                            code: -1,
+                            message: error.message || 'Upload failed',
+                            error: error
+                        };
+                        onComplete?.(fileInputRef.current, submitRef.current, errorResponse, incomingData);
+                        setProgressing(false);
+                    }
+                })();
+            } else {
+                // Original non-chunked upload
+                const formData = new FormData();
+                
+                if (formDataAppend) {
+                    // Use custom formData.append function
+                    formDataAppend(formData, curFiles);
+                } else {
+                    // Default behavior
+                    formData.append('action', 'upload_plug_action');
+                    for (let i = 0; i < curFiles.length; i++) {
+                        formData.append("clientFiles", curFiles[i]);
+                    }
+                }
 
-            fetchDataDefault(fetchUrl, formData, fetchMethod ? fetchMethod : 'POST', {
-                headers: { 'Content-Type': 'multipart/form-data' }
-            }).then(function (response: any) {
-                const jsonData = response.data;
-                onComplete?.(fileInputRef.current, submitRef.current, jsonData, incomingData);
-                setProgressing(false);
+                fetchDataDefault(fetchUrl, formData, fetchMethod ? fetchMethod : 'POST', {
+                    headers: { 'Content-Type': 'multipart/form-data' }
+                }).then(function (response: any) {
+                    const jsonData = response;
+                    onComplete?.(fileInputRef.current, submitRef.current, jsonData, incomingData);
+                    setProgressing(false);
 
-                // update default value
-                resetDefaultVal();
+                    // update default value
+                    resetDefaultVal();
 
-            });
+                });
+            }
         } else {
 
 
@@ -322,12 +453,6 @@ const File = forwardRef((props: FileProps, externalRef: any) => {
         setDefaultValue(null);
 
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onChange?.(fileInputRef.current, submitRef.current, fileInputRef.current.files);
 

package/lib/esm/Input/index.tsx

@@ -354,8 +354,6 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
 
 
     function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
-
         //
         if (valRef.current) {
             onFocus?.(event, onComposition, valRef.current);
@@ -365,13 +363,6 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
     function handleChange(event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLInputElement> | null, curVal: string) {
         setChangedVal(curVal);
 
-   
-        //----
-        //remove focus style
-        if (curVal === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         if (valRef.current) {
             onChange?.(event, onComposition, valRef.current, curVal);
@@ -390,13 +381,6 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
         const el = event.target;
         const val = event.target.value;
 
-
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         if (valRef.current) {
             onBlur?.(event, onComposition, valRef.current);
@@ -520,7 +504,12 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
     return (
         <>
 
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
+            <div className={combinedCls(
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': changedVal !== ''
+                }
+            )} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}
 
                 <div className={combinedCls(

package/lib/esm/NativeSelect/index.tsx

@@ -260,7 +260,7 @@ const NativeSelect = forwardRef((props: NativeSelectProps, externalRef: any) =>
 
     //
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         onFocus?.(event);    
@@ -283,7 +283,7 @@ const NativeSelect = forwardRef((props: NativeSelectProps, externalRef: any) =>
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
 		if ( typeof(onChange) === 'function' ) {
@@ -298,7 +298,7 @@ const NativeSelect = forwardRef((props: NativeSelectProps, externalRef: any) =>
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         onBlur?.(event);

package/lib/esm/NumberInput/index.tsx

@@ -183,7 +183,6 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
 
     
     function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
 
         //
         onFocus?.(event, valRef.current);    
@@ -220,12 +219,7 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
         setChangedVal(resToInput);
 
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-        
+
         //
         onChange?.(event, valRef.current, Number(!isNumeric(newVal) ? '0' : resToInput));
         
@@ -247,13 +241,6 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
             setChangedVal('0');
         }
 
-
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onBlur?.(event, valRef.current);
 
@@ -286,7 +273,12 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
     return (
         <>
 
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
+            <div className={combinedCls(
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': changedVal !== ''
+                }
+            )} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}
 
                 <div className="position-relative">

package/lib/esm/Popover/Popover.tsx

@@ -0,0 +1,251 @@
+import React, { useState, useRef, useEffect, useImperativeHandle, forwardRef, useMemo, createContext, useContext } from 'react';
+
+import useComId from 'funda-utils/dist/cjs/useComId';
+import useClickOutside from 'funda-utils/dist/cjs/useClickOutside';
+import {
+    getAbsolutePositionOfStage
+} from 'funda-utils/dist/cjs/getElementProperty';
+import { getElCSS } from 'funda-utils/dist/cjs/inputsCalculation';
+
+// Context for Popover state management
+export interface PopoverContextValue {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    triggerRef: React.RefObject<HTMLElement>;
+    contentRef: React.RefObject<HTMLDivElement>;
+    id: string;
+    direction?: string;
+    offset?: number;
+    exceededSidePosOffset?: number;
+    size?: string;
+    popupArrowColor?: number[];
+    popupContentStyle?: React.CSSProperties;
+    wrapperClassName?: string;
+    position: { x: string; y: string };
+    setPosition: (pos: { x: string; y: string }) => void;
+    popupArrowStyle?: React.CSSProperties;
+}
+
+export const PopoverContext = createContext<PopoverContextValue | null>(null);
+
+export const usePopoverContext = () => {
+    const context = useContext(PopoverContext);
+    if (!context) {
+        throw new Error('Popover components must be used within a Popover');
+    }
+    return context;
+};
+
+// Main Popover component (container)
+export type PopoverProps = {
+    /** The direction of the tip. Defaults to `top`. Possible values are: `top`, `top-right`, `top-left`, `bottom`, `bottom-right`, `bottom-left` */
+    direction?: string;
+    /** Position offset */
+    offset?: number;
+    /** Offset px that exceeds the far right or left side of the screen */
+    exceededSidePosOffset?: number;
+    /** The size of the content area. Defaults to `auto`. Possible values are: `auto`, `large`, `medium`, `small` */
+    size?: string;
+    /** Custom color for the popup arrow */
+    popupArrowColor?: number[];
+    /** Custom style for the popup content */
+    popupContentStyle?: React.CSSProperties;
+    /** The class name of the control wrapper. */
+    wrapperClassName?: string;
+    /** -- */
+    id?: string;
+    /** Controls whether the Popover is open (controlled mode) */
+    open?: boolean;
+    /** Callback fired when the open state changes (controlled mode) */
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+};
+
+const Popover = forwardRef<any, PopoverProps>((props, ref) => {
+    const {
+        direction,
+        offset,
+        exceededSidePosOffset,
+        size,
+        popupArrowColor,
+        popupContentStyle,
+        wrapperClassName,
+        id,
+        open,
+        onOpenChange,
+        children
+    } = props;
+
+    const POS_OFFSET = Number(offset) || 4;
+    const EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
+    const uniqueID = useComId();
+    const idRes = id || uniqueID;
+    const triggerRef = useRef<HTMLElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [uncontrolledOpen, setUncontrolledOpen] = useState<boolean>(false);
+    const isControlled = typeof open === 'boolean';
+    const isOpen = isControlled ? !!open : uncontrolledOpen;
+    const [position, setPosition] = useState<{ x: string; y: string }>({
+        x: '0',
+        y: '0'
+    });
+
+    const setIsOpen = (nextOpen: boolean) => {
+        if (!isControlled) {
+            setUncontrolledOpen(nextOpen);
+        }
+        if (typeof onOpenChange === 'function') {
+            onOpenChange(nextOpen);
+        }
+    };
+
+    const popupArrowStyle = useMemo(() => {
+        if (
+            typeof popupArrowColor !== 'undefined' &&
+            Array.isArray(popupArrowColor) &&
+            popupArrowColor.length === 4
+        ) {
+            return {
+                '--cus-popover-arrow-bg-top': `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28${popupArrowColor[0]},%20${popupArrowColor[1]},%20${popupArrowColor[2]},%20${popupArrowColor[3]}%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat`,
+                '--cus-popover-arrow-bg-bottom': `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%28${popupArrowColor[0]},%20${popupArrowColor[1]},%20${popupArrowColor[2]},%20${popupArrowColor[3]}%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat`,
+                '--cus-popover-arrow-bg-left': `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28${popupArrowColor[0]},%20${popupArrowColor[1]},%20${popupArrowColor[2]},%20${popupArrowColor[3]}%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat`,
+                '--cus-popover-arrow-bg-right': `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%28${popupArrowColor[0]},%20${popupArrowColor[1]},%20${popupArrowColor[2]},%20${popupArrowColor[3]}%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat`,
+            } as React.CSSProperties;
+        }
+        return undefined;
+    }, [popupArrowColor]);
+
+    // Calculate position based on trigger element
+    const calculatePosition = () => {
+        const triggerEl = triggerRef.current;
+        if (!triggerEl) return;
+
+        const { x, y, width, height } = getAbsolutePositionOfStage(triggerEl);
+        const pos = direction || 'top';
+
+        if (pos.indexOf('top') >= 0) {
+            setPosition({
+                x: x + (width / 2) + 'px',
+                y: y - height - POS_OFFSET + 'px'
+            });
+        } else if (pos.indexOf('bottom') >= 0) {
+            setPosition({
+                x: x + (width / 2) + 'px',
+                y: y + height + POS_OFFSET + 'px'
+            });
+        }
+    };
+
+    // Expose show/hide methods to parent via ref
+    useImperativeHandle(ref, () => ({
+        show: () => {
+            calculatePosition();
+            setIsOpen(true);
+        },
+        hide: () => {
+            setIsOpen(false);
+        }
+    }), [direction, POS_OFFSET]);
+
+    // Click outside to close
+    useClickOutside({
+        enabled: isOpen && triggerRef.current !== null,
+        isOutside: (event: any) => {
+            // Prevent closing when clicking inside the popover wrapper
+            if (contentRef.current && contentRef.current.contains(event.target)) {
+                return false;
+            }
+            return (
+                triggerRef.current !== event.target && 
+                !triggerRef.current?.contains(event.target as HTMLElement)
+            );
+        },
+        handle: () => {
+            setIsOpen(false);
+        }
+    }, [isOpen]);
+
+    const exceededOffsetInit = () => {
+        // Determine whether it exceeds the far right or left side of the screen
+        //------------------
+        const _modalRef: any = contentRef.current;
+        if (_modalRef === null) return;
+
+        
+        const _modalContent = _modalRef.querySelector('.cus-popover__content');
+        if (!_modalContent) return;
+        
+        const _modalBox = _modalContent.getBoundingClientRect();
+        if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
+
+            // Adjust the coordinates due to height
+            //------------------
+            const triggerEl: any = document.querySelector(`[data-overlay-id="${_modalRef.id}"]`);
+            if (triggerEl !== null) {
+                let pos = triggerEl.dataset.microtipPosition;
+                if (typeof pos === 'undefined') pos = 'top';
+
+                const _offsetY = _modalBox.height - getElCSS(_modalContent, 'font-size', true) - getElCSS(_modalContent, 'padding-top', true) - getElCSS(_modalContent, 'padding-bottom', true);
+
+                if (pos.indexOf('top') >= 0) {
+                    _modalRef.style.transform = `translateY(-${_offsetY}px)`;
+                }
+            }
+
+            // 10 pixels is used to account for some bias in mobile devices
+            if ((_modalBox.right + 10) > window.innerWidth) {
+                const _modalOffsetPosition = _modalBox.right - window.innerWidth + EXCEEDED_SIDE_POS_OFFSET;
+                _modalContent.dataset.offset = _modalOffsetPosition;
+                _modalContent.style.marginLeft = `-${_modalOffsetPosition}px`;
+            }
+
+            if ((_modalBox.left - 10) < 0) {
+                const _modalOffsetPosition = Math.abs(_modalBox.left) + EXCEEDED_SIDE_POS_OFFSET;
+                _modalContent.dataset.offset = _modalOffsetPosition;
+                _modalContent.style.marginLeft = `${_modalOffsetPosition}px`;
+            }
+        }
+    };
+
+    // Update position when opening
+    useEffect(() => {
+        if (isOpen) {
+            calculatePosition();
+        }
+    }, [isOpen, direction, POS_OFFSET]);
+
+    // Prevent element data from being unable to be obtained when ref is null
+    useEffect(() => {
+        exceededOffsetInit();
+    });
+
+
+
+    const contextValue: PopoverContextValue = {
+        isOpen,
+        setIsOpen,
+        triggerRef,
+        contentRef,
+        id: idRes,
+        direction,
+        offset,
+        exceededSidePosOffset,
+        size,
+        popupArrowColor,
+        popupContentStyle,
+        wrapperClassName,
+        position,
+        setPosition,
+        popupArrowStyle
+    };
+
+    return (
+        <PopoverContext.Provider value={contextValue}>
+            {children}
+        </PopoverContext.Provider>
+    );
+});
+
+Popover.displayName = 'Popover';
+
+export default Popover;

package/lib/esm/Popover/PopoverClose.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react';
+import { combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import { usePopoverContext } from './Popover';
+
+export type PopoverCloseProps = {
+    asChild?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLElement>;
+
+const PopoverClose = forwardRef<HTMLElement, PopoverCloseProps>((props, ref) => {
+    const { asChild, className, children, onClick, ...rest } = props;
+    const { setIsOpen } = usePopoverContext();
+
+    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+        if (typeof onClick === 'function') {
+            onClick(event);
+        }
+
+        if (!event.defaultPrevented) {
+            setIsOpen(false);
+        }
+    };
+
+    const closeProps: any = {
+        ref,
+        className: combinedCls('cus-popover__close', className),
+        onClick: handleClick,
+        ...rest
+    };
+
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children as React.ReactElement<any>, {
+            ...closeProps,
+            ...(children.props || {})
+        });
+    }
+
+    return (
+        <button type="button" {...closeProps}>
+            {children || 'Close'}
+        </button>
+    );
+});
+
+PopoverClose.displayName = 'PopoverClose';
+
+export default PopoverClose;
+