x-ui-design 0.8.28 → 0.8.30

package/dist/esm/types/components/Popover/Popover.d.ts

@@ -1,5 +1,16 @@
 import React from "react";
-import { PopoverProps } from "../../types/popover";
 import './style.css';
-declare const Popover: ({ prefixCls, content, children, trigger, placement, open, visible, title, style, overlayClassName, overlayStyle, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
+declare const Popover: React.ForwardRefExoticComponent<import("../..").DefaultProps & {
+    content: React.ReactNode;
+    children: React.ReactNode;
+    trigger?: "click" | "hover";
+    placement?: "top" | "bottom" | "left" | "right" | "topRight" | "bottomRight" | "topLeft" | "bottomLeft";
+    open?: boolean;
+    overlayStyle?: React.CSSProperties;
+    overlayClassName?: string;
+    title?: string | React.ReactNode;
+    visible?: boolean;
+    onVisibleChange?: ((open: boolean) => void) | undefined;
+    getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Popover;

package/dist/esm/types/index.d.ts

@@ -26,7 +26,19 @@ declare const Menu: import("react").ComponentType<import("@/types/menu").MenuPro
 declare const MenuItem: import("react").ComponentType<import("@/types/menu").ItemType>;
 declare const MenuSubMenu: import("react").ComponentType<import("@/types/menu").SubMenuItem>;
 declare const Dropdown: import("react").ComponentType<import("@/types/dropdown").DropdownProps>;
-declare const Popover: import("react").ComponentType<import("@/types/popover").PopoverProps>;
+declare const Popover: import("react").ComponentType<import("@/types").DefaultProps & {
+    content: import("react").ReactNode;
+    children: import("react").ReactNode;
+    trigger?: "click" | "hover";
+    placement?: "top" | "bottom" | "left" | "right" | "topRight" | "bottomRight" | "topLeft" | "bottomLeft";
+    open?: boolean;
+    overlayStyle?: import("react").CSSProperties;
+    overlayClassName?: string;
+    title?: string | import("react").ReactNode;
+    visible?: boolean;
+    onVisibleChange?: ((open: boolean) => void) | undefined;
+    getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 declare const Result: import("react").ComponentType<import("@/types/result").ResultProps>;
 export { Button, Checkbox, Empty, DatePicker, RangePicker, TimePicker, Form, FormItem, Input, Textarea, Radio, RadioButton, RadioGroup, Select, Option, Tag, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, Upload, Switch, Menu, MenuItem, MenuSubMenu, Dropdown, Popover, Result };
 export { ClearIcon, ArrowIcon, LoadingIcon, CheckIcon, SearchIcon, CalendarIcon, SuccessIcon, ErrorIcon, DateDistanceIcon, TimeIcon, StampleIcon, TrashIcon, SpinerIcon, } from '@/components/Icons';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as __types_result from '@/types/result';
 export { ResultProps, ResultStatusType } from '@/types/result';
-import * as __types_popover from '@/types/popover';
-export { PopoverProps } from '@/types/popover';
+import * as __types from '@/types';
+export { DefaultProps, MouseEventHandlerSelect, Placement, RuleType, RuleTypes, SyntheticBaseEvent, TargetProps } from '@/types';
 import * as __types_dropdown from '@/types/dropdown';
 export { DropdownItemType, DropdownProps } from '@/types/dropdown';
 import * as __types_menu from '@/types/menu';
@@ -27,7 +27,7 @@ export { BaseButtonProps, ButtonProps, ButtonType } from '@/types/button';
 export { ArrowIcon, CalendarIcon, CheckIcon, ClearIcon, DateDistanceIcon, ErrorIcon, LoadingIcon, SearchIcon, SpinerIcon, StampleIcon, SuccessIcon, TimeIcon, TrashIcon } from '@/components/Icons';
 export { useForm } from '@/hooks/useForm';
 export { useWatch } from '@/hooks/useWatch';
-export { DefaultProps, MouseEventHandlerSelect, Placement, RuleType, RuleTypes, SyntheticBaseEvent, TargetProps } from '@/types';
+export { PopoverProps } from '@/types/popover';
 export { FormContext } from '@/components/Form/Form';
 export { clsx, createArray, parseValue } from '@/helpers';
 export { flattenChildren } from '@/helpers/flatten';
@@ -139,7 +139,19 @@ declare const Menu: react.ComponentType<__types_menu.MenuProps>;
 declare const MenuItem: react.ComponentType<__types_menu.ItemType>;
 declare const MenuSubMenu: react.ComponentType<__types_menu.SubMenuItem>;
 declare const Dropdown: react.ComponentType<__types_dropdown.DropdownProps>;
-declare const Popover: react.ComponentType<__types_popover.PopoverProps>;
+declare const Popover: react.ComponentType<__types.DefaultProps & {
+    content: react.ReactNode;
+    children: react.ReactNode;
+    trigger?: "click" | "hover";
+    placement?: "top" | "bottom" | "left" | "right" | "topRight" | "bottomRight" | "topLeft" | "bottomLeft";
+    open?: boolean;
+    overlayStyle?: react.CSSProperties;
+    overlayClassName?: string;
+    title?: string | react.ReactNode;
+    visible?: boolean;
+    onVisibleChange?: ((open: boolean) => void) | undefined;
+    getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
 declare const Result: react.ComponentType<__types_result.ResultProps>;
 
 export { Button, Checkbox, DatePicker, Dropdown, Empty, Form, FormItem, Input, Menu, MenuItem, MenuSubMenu, Option, Popover, Radio, RadioButton, RadioGroup, RangePicker, Result, Select, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, Switch, Tag, Textarea, TimePicker, Upload };

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import require$$1 from 'react/jsx-runtime';
-import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useEffect, useContext, useMemo, useCallback, createContext, useImperativeHandle, useLayoutEffect, cloneElement } from 'react';
+import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useEffect, useContext, useMemo, useCallback, createContext, useImperativeHandle, useLayoutEffect, forwardRef, cloneElement } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -2676,7 +2676,6 @@ const usePosition = ({
   useEffect(() => {
     if (!isOpen) return;
     const _dropdownPosition = () => dropdownPosition();
-    console.log(_dropdownPosition);
     _dropdownPosition();
     const controller = new AbortController();
     const scrollableParents = getScrollParent(triggerRef.current, true);
@@ -5533,7 +5532,15 @@ var Dropdown$1 = /*#__PURE__*/Object.freeze({
 var css_248z$1 = ".xUi-popover{&:before{content:\"\";height:10px;left:0;position:absolute;top:-10px;width:100%;z-index:10000}}.xUi-popover-wrapper-content{cursor:pointer;max-width:fit-content;width:-webkit-fill-available}.xUi-popover{background:var(--xui-background-color);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:8px 12px;width:max-content;z-index:1000}.xUi-popover-title{padding:4px}.xUi-popover-inner{color:var(--xui-text-color);font-size:14px}.xUi-popover-arrow{background:var(--xui-background-color);border-left:.5px solid var(--xui-border-color);border-top:.5px solid var(--xui-border-color);height:10px;left:12px;position:absolute;top:-6px;transform:rotate(45deg);width:10px}.xUi-popover-bottomRight .xUi-popover-arrow,.xUi-popover-right .xUi-popover-arrow,.xUi-popover-topRight .xUi-popover-arrow{left:unset;right:12px}.xUi-popover-arrow.bottom{border-bottom:.5px solid var(--xui-border-color);border-left:unset;border-right:.5px solid var(--xui-border-color);border-top:unset;bottom:-6px;top:unset}.xUi-popover-arrow.center{left:0;margin:0 auto;right:0}";
 styleInject(css_248z$1);
 
-const Popover = ({
+function mergeRefs(...refs) {
+  return node => {
+    refs.forEach(ref => {
+      if (!ref) return;
+      if (typeof ref === "function") ref(node);else ref.current = node;
+    });
+  };
+}
+const Popover = /*#__PURE__*/forwardRef(({
   prefixCls = prefixClsPopover,
   content,
   children,
@@ -5547,7 +5554,7 @@ const Popover = ({
   overlayStyle = {},
   onVisibleChange,
   getPopupContainer
-}) => {
+}, ref) => {
   const triggerRef = useRef(null);
   const popupRef = useRef(null);
   const [innerOpen, setInnerOpen] = useState(false);
@@ -5560,11 +5567,20 @@ const Popover = ({
     offset: 10,
     popupRef,
     placement,
-    triggerRef: triggerRef ?? {
-      current: document.getElementsByClassName(`${prefixCls}-wrapper-content`)[0]
-    },
+    triggerRef,
     getPopupContainer: getPopupContainer?.(triggerRef.current)
   });
+  useImperativeHandle(ref, () => ({
+    focus: () => triggerRef.current?.focus(),
+    blur: () => triggerRef.current?.blur(),
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    scrollTo: (...args) =>
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    selectRef.current?.scrollTo(...args),
+    nativeElement: triggerRef.current
+  }), []);
   useEffect(() => {
     const handleClickOutside = e => {
       if (popupRef.current && !popupRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
@@ -5604,12 +5620,15 @@ const Popover = ({
     if (! /*#__PURE__*/isValidElement(child)) {
       child = /*#__PURE__*/React.createElement("div", null, child);
     }
+    // Merge user's ref + internal triggerRef
+    const existingRef = child.ref;
+    const mergedRef = mergeRefs(existingRef, triggerRef);
     return /*#__PURE__*/cloneElement(child, {
       key: index,
       ...(index === 0 ? {
         style,
         ...childProps,
-        ref: triggerRef,
+        ref: mergedRef,
         className: `${prefixCls}-wrapper-content`
       } : {})
     });
@@ -5633,7 +5652,7 @@ const Popover = ({
   }, content), /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-arrow ${showPlacement}`
   }))));
-};
+});
 
 var Popover$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,