x-ui-design 0.8.11 → 0.8.13

package/lib/components/DatePicker/RangePicker/RangePicker.tsx

@@ -26,7 +26,7 @@ const RangePicker = ({
   picker = 'date',
   locale,
   disabledDate,
-  onOpenChange,
+  onVisibleChange,
   onCalendarChange,
   style = {},
   className = '',
@@ -96,7 +96,7 @@ const RangePicker = ({
         !triggerRef.current.contains(event.target as Node)
       ) {
         setIsOpen(false);
-        onOpenChange?.(false);
+        onVisibleChange?.(false);
       }
     };
 
@@ -133,7 +133,7 @@ const RangePicker = ({
         [formatDate(begin), formatDate(end)], {}
       );
       setIsOpen(false);
-      onOpenChange?.(false);
+      onVisibleChange?.(false);
     }
   };
 
@@ -439,7 +439,7 @@ const RangePicker = ({
 
             if (!isOpen) {
               setIsOpen(!isOpen);
-              onOpenChange?.(!isOpen);
+              onVisibleChange?.(!isOpen);
             }
           }}
         >

package/lib/components/Dropdown/Dropdown.tsx

@@ -19,7 +19,7 @@ const Dropdown = ({
     menu,
     open: controlledOpen,
     defaultOpen = false,
-    onOpenChange,
+    onVisibleChange,
     trigger = 'hover',
     placement = 'bottomLeft',
     overlayClassName = '',
@@ -33,7 +33,6 @@ const Dropdown = ({
     className = '',
     overlay,
     prefixCls = prefixClsDropdown,
-    onVisibleChange
 }: DropdownProps) => {
     const [open, setOpen] = useState<boolean>(controlledOpen ?? defaultOpen);
     const [_hover, setHover] = useState<boolean>(controlledOpen ?? defaultOpen);
@@ -80,7 +79,7 @@ const Dropdown = ({
             setOpen(next);
         }
 
-        onOpenChange?.(next);
+        onVisibleChange?.(next);
         onVisibleChange?.(next)
     };
 

package/lib/components/Popover/Popover.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import { usePosition } from "../../hooks/usePosition";
 import { clsx } from '../../helpers';
 import { PopoverProps } from "../../types/popover";
@@ -14,8 +14,11 @@ const Popover = ({
     trigger = "click",
     placement = "bottom",
     open,
+    visible,
+    title,
+    overlayClassName = '',
     overlayStyle = {},
-    onOpenChange,
+    onVisibleChange,
     getPopupContainer
 }: PopoverProps) => {
     const triggerRef = useRef<HTMLDivElement>(null);
@@ -23,9 +26,8 @@ const Popover = ({
 
     const [innerOpen, setInnerOpen] = useState(false);
     
-    const isOpen = open !== undefined ? open : innerOpen;
-    
-    const [_hover, setHover] = useState<boolean>(isOpen);
+    const [hover, setHover] = useState(false);
+    const isOpen = visible !== undefined ? visible : open !== undefined ? open : innerOpen;
 
     const { dropdownPosition, shouldShowAbove } = usePosition({
         isOpen,
@@ -37,22 +39,21 @@ const Popover = ({
     });
 
     const toggle = () => {
-        onOpenChange ? onOpenChange(!isOpen) : setInnerOpen(!isOpen);
+        const newState = !isOpen;
+        onVisibleChange ? onVisibleChange(newState) : setInnerOpen(newState);
     };
 
     const show = () => {
         setHover(true);
-
         if (trigger === "hover") {
-            onOpenChange ? onOpenChange(true) : setInnerOpen(true);
+            onVisibleChange ? onVisibleChange(true) : setInnerOpen(true);
         }
     };
 
     const hide = () => {
         setHover(false);
-
         if (trigger === "hover") {
-            onOpenChange ? onOpenChange(false) : setInnerOpen(false);
+            onVisibleChange ? onVisibleChange(false) : setInnerOpen(false);
         }
     };
 
@@ -64,32 +65,38 @@ const Popover = ({
     return (
         <div className={`${prefixCls}-wrapper`}>
             <div ref={triggerRef}>
-                <div className={`${prefixCls}-wrapper-content`} {...childProps}>{children}</div>
+                <div className={`${prefixCls}-wrapper-content`} {...childProps}>
+                    {children}
+                </div>
 
                 {isOpen && (
                     <ConditionalWrapper
-                        condition={getPopupContainer !== undefined}
-                        wrapper={(element) => getPopupContainer ? createPortal(element, getPopupContainer(popupRef.current as HTMLElement)) : <>{element}</>}>
-
+                        condition={!!getPopupContainer}
+                        wrapper={(element) =>
+                            getPopupContainer
+                                ? createPortal(element, getPopupContainer(popupRef.current as HTMLElement))
+                                : <>{element}</>
+                        }
+                    >
                         <div
                             ref={popupRef}
-                            className={clsx(prefixCls, `${prefixCls}-${placement}`)}
+                            className={clsx(prefixCls, `${prefixCls}-${placement}`, overlayClassName)}
                             style={{
-                                zIndex: _hover ? 1000 : 1,
+                                zIndex: hover ? 1000 : 1,
                                 ...overlayStyle,
                                 position: "absolute",
                                 ...dropdownPosition
                             }}
                         >
+                            {title && <div className={`${prefixCls}-title`}>{title}</div>}
                             <div className={`${prefixCls}-inner`}>{content}</div>
                             <div className={`${prefixCls}-arrow ${shouldShowAbove ? 'bottom' : ''}`} />
                         </div>
                     </ConditionalWrapper>
                 )}
             </div>
-
         </div>
     );
 };
 
-export default Popover;
+export default Popover;

package/lib/components/Popover/style.css

@@ -28,6 +28,10 @@
     z-index: 1000;
 }
 
+.xUi-popover-title {
+    padding: 4px;
+}
+
 .xUi-popover-inner {
     font-size: 14px;
     color: var(--xui-text-color);

package/lib/types/datepicker.ts

@@ -58,7 +58,7 @@ export type TDatePickerProps = DefaultProps & {
     dateString: string | string[],
     info: BaseInfo
   ) => void;
-  onOpenChange?: (open: boolean) => void;
+  onVisibleChange?: ((open: boolean) => void) | undefined;
   getPopupContainer?: (node: HTMLElement) => HTMLElement;
   showToday?: boolean;
   inputReadOnly?: boolean;

package/lib/types/dropdown.ts

@@ -18,7 +18,7 @@ export type DropdownProps = DefaultProps & {
     menu?: { items: DropdownItemType[] };
     open?: boolean;
     defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
+    onVisibleChange?: ((open: boolean) => void) | undefined;
     trigger?: TriggerType;
     placement?: Placement;
     overlayClassName?: string;
@@ -31,7 +31,6 @@ export type DropdownProps = DefaultProps & {
     autoAdjustOverflow?: boolean;
     popupRender?: (node: ReactNode) => ReactNode;
     overlay?: ReactElement | OverlayFunc;
-    onVisibleChange?: ((open: boolean) => void) | undefined;
 }
 
 

package/lib/types/popover.ts

@@ -8,6 +8,9 @@ export interface PopoverProps {
     placement?: "top" | "bottom" | "left" | "right" | "topRight" | "bottomRight" | "topLeft" | "bottomLeft";
     open?: boolean;
     overlayStyle?: CSSProperties;
-    onOpenChange?: (open: boolean) => void;
+    overlayClassName?: string;
+    title?: string | ReactNode;
+    visible?: boolean;
+    onVisibleChange?: ((open: boolean) => void) | undefined;
     getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.8.11",
+  "version": "0.8.13",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",

package/src/app/page.tsx

@@ -9,7 +9,7 @@ export default function Home() {
             <div style={{ width: 700, overflow: 'auto' }}>
                 <div style={{ height: 200, border: '1px solid' }}>
                     <div style={{ height: 100 }}>
-                        <Popover content={<div>
+                        <Popover title="sdfdsfdsf" content={<div>
                             <button>Click Popover</button>
                             <br />
                             <button>Click Popover</button>