x-ui-design 0.7.87 → 0.7.89

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

@@ -19,5 +19,7 @@ declare const Dropdown: React.ForwardRefExoticComponent<import("../..").DefaultP
     autoFocus?: boolean;
     autoAdjustOverflow?: boolean;
     popupRender?: (node: React.ReactNode) => React.ReactNode;
+    overlay?: React.ReactElement | (() => React.ReactElement);
+    onVisibleChange?: ((open: boolean) => void) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default Dropdown;

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

@@ -44,6 +44,8 @@ declare const Dropdown: import("react").ComponentType<import("@/types").DefaultP
     autoFocus?: boolean;
     autoAdjustOverflow?: boolean;
     popupRender?: (node: import("react").ReactNode) => import("react").ReactNode;
+    overlay?: import("react").ReactElement | (() => import("react").ReactElement);
+    onVisibleChange?: ((open: boolean) => void) | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
 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 };
 export { ClearIcon, ArrowIcon, LoadingIcon, CheckIcon, SearchIcon, CalendarIcon, SuccessIcon, ErrorIcon, DateDistanceIcon, TimeIcon, StampleIcon, TrashIcon, SpinerIcon, } from '@/components/Icons';

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

@@ -1,13 +1,14 @@
-import { CSSProperties, ReactNode } from "react";
+import { CSSProperties, MouseEvent, ReactElement, ReactNode, RefObject } from "react";
 import { DefaultProps, Placement } from ".";
 export type TriggerType = 'click' | 'hover' | 'contextMenu' | Array<TriggerType>;
 export interface DropdownItemType {
     key: string;
     label?: ReactNode;
     disabled?: boolean;
-    onClick?: (e: React.MouseEvent) => void;
+    onClick?: (e: MouseEvent) => void;
     danger?: boolean;
 }
+declare type OverlayFunc = () => ReactElement;
 export type DropdownProps = DefaultProps & {
     children: ReactNode;
     menu?: {
@@ -27,9 +28,12 @@ export type DropdownProps = DefaultProps & {
     autoFocus?: boolean;
     autoAdjustOverflow?: boolean;
     popupRender?: (node: ReactNode) => ReactNode;
+    overlay?: ReactElement | OverlayFunc;
+    onVisibleChange?: ((open: boolean) => void) | undefined;
 };
 export type DropdownMenuInnerProps = DefaultProps & {
     items: DropdownItemType[];
-    menuRef: React.RefObject<HTMLUListElement | null>;
+    menuRef: RefObject<HTMLUListElement | null>;
     onClose: () => void;
 };
+export {};

package/dist/index.d.ts

@@ -154,6 +154,8 @@ declare const Dropdown: react.ComponentType<__types.DefaultProps & {
     autoFocus?: boolean;
     autoAdjustOverflow?: boolean;
     popupRender?: (node: react.ReactNode) => react.ReactNode;
+    overlay?: react.ReactElement | (() => react.ReactElement);
+    onVisibleChange?: ((open: boolean) => void) | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
 export { Button, Checkbox, DatePicker, Dropdown, Empty, Form, FormItem, Input, Menu, MenuItem, MenuSubMenu, Option, Radio, RadioButton, RadioGroup, RangePicker, Select, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, Switch, Tag, Textarea, TimePicker, Upload };

package/dist/index.esm.js

@@ -4722,7 +4722,7 @@ var Menu$1 = /*#__PURE__*/Object.freeze({
 	default: Menu
 });
 
-var css_248z = ".xUi-dropdown-overlay{background:var(--xui-background-color);border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);min-width:160px;padding:4px 0;position:absolute}.xUi-dropdown-overlay .xUi-dropdown-menu{margin:0;padding:0 4px;position:relative;&:before{content:\"\";height:10px;position:absolute;top:-10px;width:100%;z-index:1}}.xUi-dropdown-overlay .xUi-dropdown-item{border-radius:8px;cursor:pointer;font-size:14px;list-style:none;padding:8px 12px;user-select:none}.xUi-dropdown-overlay .xUi-dropdown-item:focus,.xUi-dropdown-overlay .xUi-dropdown-item:hover{background:var(--xui-color-hover);outline:none}.xUi-dropdown-overlay .xUi-dropdown-item.disabled{cursor:not-allowed;opacity:.5}.xUi-dropdown-overlay .xUi-dropdown-item.danger{color:var(--xui-error-color-light);&:hover{background-color:var(--xui-error-color-light);color:var(--xui-background-color)}}.xUi-dropdown-arrow{background:var(--xui-background-color);border-left:1px solid #e5e7eb;border-top:1px solid #e5e7eb;height:10px;left:12px;position:absolute;top:-6px;transform:rotate(45deg);width:10px}.xUi-dropdown-arrow.bottom{border-bottom:1px solid #e5e7eb;border-left:unset;border-right:1px solid #e5e7eb;border-top:unset;bottom:-6px;top:unset}.xUi-dropdown-placement-bottom{margin-top:8px}.xUi-dropdown-placement-top{margin-bottom:8px}.xUi-dropdown-placement-left{margin-right:8px}.xUi-dropdown-placement-right{margin-left:8px}";
+var css_248z = ".xUi-dropdown-overlay{background:var(--xui-background-color);border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.08);min-width:160px;padding:4px 0;position:absolute}.xUi-dropdown-overlay>div,.xUi-dropdown-overlay>select,.xUi-dropdown-overlay>ul{box-shadow:unset}.xUi-dropdown-overlay .xUi-dropdown-menu{margin:0;padding:0 4px;position:relative;&:before{content:\"\";height:10px;position:absolute;top:-15px;width:100%;z-index:1}}.xUi-dropdown-overlay .xUi-dropdown-item{border-radius:8px;cursor:pointer;font-size:14px;list-style:none;padding:8px 12px;user-select:none}.xUi-dropdown-overlay .xUi-dropdown-item:focus,.xUi-dropdown-overlay .xUi-dropdown-item:hover{background:var(--xui-color-hover);outline:none}.xUi-dropdown-overlay .xUi-dropdown-item.disabled{cursor:not-allowed;opacity:.5}.xUi-dropdown-overlay .xUi-dropdown-item.danger{color:var(--xui-error-color-light);&:hover{background-color:var(--xui-error-color-light);color:var(--xui-background-color)}}.xUi-dropdown-arrow{background:var(--xui-background-color);border-left:1px solid #e5e7eb;border-top:1px solid #e5e7eb;height:10px;left:12px;position:absolute;top:-6px;transform:rotate(45deg);width:10px}.xUi-dropdown-arrow.bottom{border-bottom:1px solid #e5e7eb;border-left:unset;border-right:1px solid #e5e7eb;border-top:unset;bottom:-6px;top:unset}.xUi-dropdown-placement-bottom{margin-top:8px}.xUi-dropdown-placement-top{margin-bottom:8px}.xUi-dropdown-placement-left{margin-right:8px}.xUi-dropdown-placement-right{margin-left:8px}";
 styleInject(css_248z);
 
 const Dropdown = /*#__PURE__*/forwardRef(({
@@ -4742,7 +4742,9 @@ const Dropdown = /*#__PURE__*/forwardRef(({
   autoFocus = false,
   popupRender,
   className = '',
-  prefixCls = prefixClsDropdown
+  overlay,
+  prefixCls = prefixClsDropdown,
+  onVisibleChange
 }, ref) => {
   const [open, setOpen] = useState(controlledOpen ?? defaultOpen);
   const [_hover, setHover] = useState(controlledOpen ?? defaultOpen);
@@ -4764,6 +4766,7 @@ const Dropdown = /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (isControlled) {
       setOpen(Boolean(controlledOpen));
+      onVisibleChange?.(Boolean(controlledOpen));
     }
   }, [controlledOpen]);
   useEffect(() => {
@@ -4782,6 +4785,7 @@ const Dropdown = /*#__PURE__*/forwardRef(({
       setOpen(next);
     }
     onOpenChange?.(next);
+    onVisibleChange?.(next);
   };
   useEffect(() => {
     const handleClick = e => {
@@ -4828,7 +4832,7 @@ const Dropdown = /*#__PURE__*/forwardRef(({
     }
   }, arrow && /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-arrow ${shouldShowAbove ? 'bottom' : ''}`
-  }), popupRender ? popupRender(menu ? /*#__PURE__*/React.createElement(MenuInner, {
+  }), overlay ? typeof overlay === 'function' ? overlay() : overlay : popupRender ? popupRender(menu ? /*#__PURE__*/React.createElement(MenuInner, {
     prefixCls: prefixCls,
     items: menu.items,
     menuRef: menuRef,