x-ui-design 0.9.60 → 0.9.62

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/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);
@@ -5291,7 +5299,7 @@ var SubMenu$1 = /*#__PURE__*/Object.freeze({
 	default: SubMenu
 });
 
-var css_248z$3 = ".xUi-menu{box-shadow:0 0 4px rgba(0,0,0,.15);font-size:14px;user-select:none}.xUi-menu,.xUi-menu-sub-list{border-radius:4px;display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;padding:4px}.xUi-menu-sub-list{background:var(--xui-background-color);height:max-content}.xUi-menu-item-group{padding:0 24px!important}.xUi-menu-vertical .xUi-menu-sub-list{background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.15);left:100%;position:absolute;right:-100%;top:0;width:-webkit-fill-available;z-index:1}.xUi-menu-horizontal{display:flex;flex-direction:row}.xUi-menu-item{align-items:center;border-radius:4px;color:var(--xui-text-color);cursor:pointer;display:flex;height:40px;min-height:40px;padding:0 12px;transition:background .3s}.xUi-menu-item:hover{background:rgba(0,0,0,.04)}.xUi-menu-item-icon{margin-right:8px}.xUi-menu-sub{border-radius:6px;position:relative}.xUi-menu-sub-title{align-items:center;cursor:pointer;display:flex;height:40px;padding:0 12px;&:hover{background-color:var(--xui-color-hover);border-radius:6px}}.xUi-menu-sub-label{flex:1}.xUi-menu-sub-arrow{margin-left:8px;transition:transform .2s}.xUi-menu-vertical .xUi-menu-sub-arrow{transform:rotate(-90deg)}.xUi-menu-group{list-style:none;margin:0;padding:0}.xUi-menu-group-title{color:rgba(0,0,0,.45);font-size:12px;padding:8px 12px}.xUi-menu-group-list{list-style:none;margin:0;padding:0}.xUi-menu-divider{border-bottom:1px solid var(--xui-color-disabled);display:block;margin:0 auto;width:calc(100% - 16px)}.xUi-menu-item.xUi-menu-item-disabled{cursor:auto;opacity:.6;&:hover{background-color:unset}}.xUi-menu-inline .xUi-menu-sub-list{background-color:var(--xui-background-color)}.xUi-menu-inline .xUi-menu-item{padding:0 24px}.xUi-menu-inline .xUi-menu-sub-title{padding:0 20px}.xUi-menu-inline .xUi-menu-sub-list-sub .xUi-menu-item{padding:0 30px}";
+var css_248z$3 = ".xUi-menu{box-shadow:0 0 4px rgba(0,0,0,.15);font-size:14px;user-select:none}.xUi-menu,.xUi-menu-sub-list{border-radius:4px;display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;padding:4px}.xUi-menu-sub-list{background:var(--xui-background-color);height:max-content}.xUi-menu-item-group{padding:0 24px!important}.xUi-menu-vertical .xUi-menu-sub-list{background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.15);left:100%;position:absolute;right:-100%;top:0;width:-webkit-fill-available;z-index:1}.xUi-menu-horizontal{display:flex;flex-direction:row}.xUi-menu-item{align-items:center;border-radius:4px;color:var(--xui-text-color);cursor:pointer;display:flex;height:40px;min-height:40px;padding:0 12px;transition:background .3s}.xUi-menu-item-selected,.xUi-menu-item:hover{background:rgba(0,0,0,.04)}.xUi-menu-item-icon{margin-right:8px}.xUi-menu-sub{border-radius:6px;position:relative}.xUi-menu-sub-title{align-items:center;cursor:pointer;display:flex;height:40px;padding:0 12px;&:hover{background-color:var(--xui-color-hover);border-radius:6px}}.xUi-menu-sub-label{flex:1}.xUi-menu-sub-arrow{margin-left:8px;transition:transform .2s}.xUi-menu-vertical .xUi-menu-sub-arrow{transform:rotate(-90deg)}.xUi-menu-group{list-style:none;margin:0;padding:0}.xUi-menu-group-title{color:rgba(0,0,0,.45);font-size:12px;padding:8px 12px}.xUi-menu-group-list{list-style:none;margin:0;padding:0}.xUi-menu-divider{border-bottom:1px solid var(--xui-color-disabled);display:block;margin:0 auto;width:calc(100% - 16px)}.xUi-menu-item.xUi-menu-item-disabled{cursor:auto;opacity:.6;&:hover{background-color:unset}}.xUi-menu-inline .xUi-menu-sub-list{background-color:var(--xui-background-color)}.xUi-menu-inline .xUi-menu-item{padding:0 24px}.xUi-menu-inline .xUi-menu-sub-title{padding:0 20px}.xUi-menu-inline .xUi-menu-sub-list-sub .xUi-menu-item{padding:0 30px}";
 styleInject(css_248z$3);
 
 const MenuContext = /*#__PURE__*/createContext(null);
@@ -5399,14 +5407,18 @@ const Menu = ({
         itemKey: it.key,
         label: it.label,
         icon: it.icon,
+        selected: selectedKeys.includes(it.key),
         className: `${prefixCls}-item-disabled`
-      }), (it.children || []).map((c, i) => /*#__PURE__*/React.createElement(MenuItem, {
-        key: `${c.key}_${i}_menu-item`,
-        itemKey: c.key,
-        label: c.label,
-        icon: c.icon,
-        className: `${prefixCls}-item-group`
-      })));
+      }), (it.children || []).map((c, i) => {
+        return /*#__PURE__*/React.createElement(MenuItem, {
+          key: `${c.key}_${i}_menu-item`,
+          itemKey: c.key,
+          label: c.label,
+          icon: c.icon,
+          selected: selectedKeys.includes(c.key),
+          className: `${prefixCls}-item-group`
+        });
+      }));
     }
     return it.children ? /*#__PURE__*/React.createElement(SubMenu, {
       key: `${it.key}_${it.label}_${index}_sub_menu`,
@@ -5423,12 +5435,14 @@ const Menu = ({
           itemKey: c.key,
           label: c.label,
           icon: c.icon,
+          selected: selectedKeys.includes(c.key),
           className: `${prefixCls}-item-disabled`
         }), (c.children || []).map((c, _i) => /*#__PURE__*/React.createElement(MenuItem, {
           key: `${c.key}_${_i}_menu-item`,
           itemKey: c.key,
           label: c.label,
           icon: c.icon,
+          selected: selectedKeys.includes(c.key),
           className: `${prefixCls}-item-group`
         })));
       }
@@ -5443,18 +5457,21 @@ const Menu = ({
         key: `${c.key}_${_idx}_${c.label}_menu-item`,
         itemKey: c.key,
         label: c.label,
-        icon: c.icon
+        icon: c.icon,
+        selected: selectedKeys.includes(c.key)
       }))) : /*#__PURE__*/React.createElement(MenuItem, {
         key: `${index}_${c.key}_${c.label}_menu-item`,
         itemKey: c.key,
         label: c.label,
-        icon: c.icon
+        icon: c.icon,
+        selected: selectedKeys.includes(c.key)
       });
     })) : /*#__PURE__*/React.createElement(MenuItem, {
       key: `${index}_${it.key}_menu-item`,
       itemKey: it.key,
       label: it.label,
-      icon: it.icon
+      icon: it.icon,
+      selected: selectedKeys.includes(it.key)
     });
   }) : children));
 };
@@ -5504,6 +5521,7 @@ const Dropdown = ({
     popupRef,
     targetRef,
     placement,
+    useTargetWidth: true,
     popupContainer: getPopupContainer?.(targetRef.current)
   });
   useEffect(() => {