x-ui-design 0.9.61 → 0.9.63

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

@@ -1,5 +1,5 @@
 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: ({ prefixCls, content, children, trigger, placement, open, visible, title, style, overlayClassName, overlayStyle, overlayPopupStyle, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
 export default Popover;

package/dist/esm/types/hooks/usePopupPosition.d.ts

@@ -7,8 +7,9 @@ type TPopupPosition = {
     popupRef: RefObject<HTMLDivElement | null>;
     placement?: Placement;
     popupContainer?: HTMLElement | null;
+    useTargetWidth?: boolean;
 };
-export declare const usePopupPosition: ({ open, setOpen, popupRef, targetRef, placement, popupContainer, }: TPopupPosition) => {
+export declare const usePopupPosition: ({ open, setOpen, popupRef, targetRef, placement, popupContainer, useTargetWidth }: TPopupPosition) => {
     _placement: Placement;
     popupStyle: CSSProperties;
 };

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

@@ -8,6 +8,7 @@ export type PopoverProps = DefaultProps & {
     open?: boolean;
     overlayStyle?: CSSProperties;
     overlayClassName?: string;
+    overlayPopupStyle?: CSSProperties;
     title?: string | ReactNode;
     visible?: boolean;
     listenPopoverPositions?: CSSProperties;

package/dist/index.esm.js

@@ -2626,7 +2626,8 @@ const usePopupPosition = ({
   popupRef,
   targetRef,
   placement,
-  popupContainer
+  popupContainer,
+  useTargetWidth
 }) => {
   const [_placement, _setPlacement] = useState(placement ?? "bottomLeft");
   const [popupPosition, setPopupPosition] = useState({});
@@ -2671,6 +2672,12 @@ const usePopupPosition = ({
           }, 10);
           return;
         }
+        if (targetRef.current && popupRef.current && useTargetWidth) {
+          if (popupRect.width < container.width) {
+            const targetWidth = targetRef.current.offsetWidth;
+            popupRef.current.style.width = `${targetWidth}px`;
+          }
+        }
         const availableSpace = {
           top: container.top - (popupRect.height + OFFSET),
           bottom: (inBody ? window.innerHeight : scrollableParents?.clientHeight || 0) - (container.bottom + popupRect.height + OFFSET),
@@ -2772,7 +2779,7 @@ const usePopupPosition = ({
       };
       _calculation();
     });
-  }, [targetRef, popupContainer, popupRef, inBody, _placement, setOpen]);
+  }, [targetRef, popupContainer, popupRef, useTargetWidth, inBody, _placement, setOpen]);
   useEffect(() => {
     if (!open) {
       return;
@@ -4808,7 +4815,8 @@ const Select = ({
       [`${prefixCls}-tag-container-fixHeight ${prefixClsV3}-tag-container-fixHeight`]: !tagtriggerRef.current
     }])
   }, hasMode ? /*#__PURE__*/React.createElement(React.Fragment, null, selectedTags.length ? /*#__PURE__*/React.createElement(React.Fragment, null, tagsToDisplay.map((tag, index) => tagRender ? /*#__PURE__*/React.createElement("div", {
-    key: `${index}_${tag}`
+    key: `${index}_${tag}`,
+    className: `${prefixCls}-tag-render-container`
   }, tagRender?.({
     label: (() => {
       const option = extractedOptions.find(e => e.value === tag || e.label === tag || e.children === tag);
@@ -5513,6 +5521,7 @@ const Dropdown = ({
     popupRef,
     targetRef,
     placement,
+    useTargetWidth: true,
     popupContainer: getPopupContainer?.(targetRef.current)
   });
   useEffect(() => {
@@ -5661,6 +5670,7 @@ const Popover = ({
   style = {},
   overlayClassName = '',
   overlayStyle = {},
+  overlayPopupStyle = {},
   onVisibleChange,
   getPopupContainer
 }) => {
@@ -5753,7 +5763,8 @@ const Popover = ({
     className: clsx(prefixCls, prefixClsPopupPosition, overlayClassName),
     style: {
       ...overlayStyle,
-      ...popupStyle
+      ...popupStyle,
+      ...overlayPopupStyle
     }
   }), title && /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-title`