funda-ui 4.7.625 → 4.7.711

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;
+

package/lib/esm/Popover/PopoverContent.tsx

@@ -0,0 +1,72 @@
+import React, { forwardRef } from 'react';
+import RootPortal from 'funda-root-portal';
+import { combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import { usePopoverContext } from './Popover';
+
+// PopoverContent component
+export type PopoverContentProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+
+const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((props, ref) => {
+    const { children, className } = props;
+    const {
+        isOpen,
+        contentRef,
+        id,
+        direction,
+        size,
+        popupArrowStyle,
+        popupContentStyle,
+        wrapperClassName,
+        position
+    } = usePopoverContext();
+
+    const wrapperRef = (node: HTMLDivElement | null) => {
+        if (node) {
+            (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref && node) {
+            (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }
+    };
+
+    return (
+        <RootPortal show={isOpen} containerClassName="Popover">
+            <div
+                ref={wrapperRef}
+                id={`cus-popover__wrapper-${id}`}
+                className={combinedCls(
+                    'cus-popover__wrapper',
+                    wrapperClassName,
+                    'active'
+                )}
+                role="popover"
+                data-microtip-position={direction || 'top'}
+                data-microtip-size={size || 'auto'}
+                style={{
+                    left: position.x,
+                    top: position.y,
+                    display: 'none',
+                    ...popupArrowStyle
+                }}
+            >
+                <div 
+                    className={combinedCls('cus-popover__content', className)} 
+                    style={popupContentStyle}
+                >
+                    {children}
+                </div>
+            </div>
+        </RootPortal>
+    );
+});
+
+PopoverContent.displayName = 'PopoverContent';
+
+export default PopoverContent;

package/lib/esm/Popover/PopoverTrigger.tsx

@@ -0,0 +1,62 @@
+import React, { forwardRef } from 'react';
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+import { usePopoverContext } from './Popover';
+
+// PopoverTrigger component
+export type PopoverTriggerProps = {
+    asChild?: boolean;
+    className?: string;
+    children: React.ReactNode;
+};
+
+const PopoverTrigger = forwardRef<HTMLElement, PopoverTriggerProps>((props, ref) => {
+    const { asChild, className, children } = props;
+    const { triggerRef, setIsOpen, isOpen, id, direction, size } = usePopoverContext();
+
+    const handleClick = (e: React.MouseEvent) => {
+        e.preventDefault();
+        setIsOpen(!isOpen);
+    };
+
+    const setRefs = (node: HTMLElement | null) => {
+        if (node) {
+            (triggerRef as React.MutableRefObject<HTMLElement | null>).current = node;
+        }
+        if (typeof ref === 'function') {
+            ref(node);
+        } else if (ref && node) {
+            (ref as React.MutableRefObject<HTMLElement | null>).current = node;
+        }
+    };
+
+    const triggerProps: any = {
+        ref: setRefs,
+        'data-overlay-id': `cus-popover__wrapper-${id}`,
+        className: combinedCls(
+            'cus-popover__trigger',
+            clsWrite(className, 'd-inline-block')
+        ),
+        'data-microtip-position': direction || 'top',
+        'data-microtip-size': size || 'auto',
+        onClick: handleClick
+    };
+
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children as React.ReactElement<any>, {
+            ...triggerProps,
+            ...(children.props || {})
+        });
+    }
+
+    return (
+        <div {...triggerProps}>
+            {children}
+        </div>
+    );
+});
+
+PopoverTrigger.displayName = 'PopoverTrigger';
+
+export default PopoverTrigger;