x-ui-design 0.3.37 → 0.3.39

package/dist/index.esm.js

@@ -2920,7 +2920,7 @@ var Tag$1 = /*#__PURE__*/Object.freeze({
 	default: Tag
 });
 
-var css_248z$5 = "@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-select{background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);box-sizing:border-box;color:var(--xui-text-color);display:inline-flex;flex-direction:row-reverse;min-height:24px;padding:2px 8px;position:relative;width:100%}.xUi-select-disabled{background:rgba(0,0,0,.04)}.xUi-select-arrow{align-items:center;color:var(--xui-text-color-light);display:flex;gap:6px;margin:0 4px}.xUi-select-arrow svg{align-items:center;display:flex;justify-content:center}.xUi-select-loading{animation:spin 1s linear infinite;color:var(--xui-text-color-light);display:inline-block;margin:0 8px}.xUi-select .xUi-select-trigger{align-items:center;background:transparent;border-radius:var(--xui-border-radius-sm);cursor:pointer;display:flex;justify-content:space-between;width:100%}.xUi-select .xUi-select-clear-btn{background:none;border:none;color:#999;cursor:pointer;font-size:var(--xui-font-size-lg);line-height:1;margin:0 8px;padding:0}.xUi-select .xUi-select-clear-btn:hover{color:var(--xui-primary-color)}.xUi-select-dropdown{background-color:var(--xui-select-background-color);border-radius:var(--xui-border-radius-sm);box-shadow:0 4px 12px rgba(0,0,0,.15);left:0;margin-top:5px;max-height:350px;min-width:max-content;overflow-y:auto;position:absolute;right:unset;top:100%;width:inherit;z-index:10}.xUi-select-dropdown.bottomRight,.xUi-select-dropdown.topRight{left:unset;right:0}.xUi-select .xUi-select-loading-spinner{color:#999;padding:10px;text-align:center}.xUi-select:focus-within{border-color:var(--xui-primary-color-light);box-shadow:none}.xUi-select:hover:not(.xUi-select-disabled){border-color:var(--xui-primary-color)}.xUi-select-disabled,.xUi-select-disabled .xUi-select-input,.xUi-select-disabled .xUi-select-trigger{cursor:not-allowed!important;opacity:.6!important}.xUi-select-selected-icon{color:var(--xui-primary-color-light)}.xUi-select-error{border-color:var(--xui-error-color)}.xUi-select-arrow .error-svg-icon,.xUi-select-error .error-svg-icon{color:var(--xui-error-color)}.xUi-select .xUi-select-input{align-items:center;background:transparent;border:none;color:var(--xui-text-color);cursor:pointer;display:inline-flex;font-size:var(--xui-font-size-md);height:-webkit-fill-available;outline:none;padding:0;user-select:none;width:100%}.xUi-select .xUi-select-input:focus{border:none;box-shadow:none;outline:none}.xUi-select.middle{border-radius:var(--xui-border-radius-md);min-height:30px}.xUi-select.middle,.xUi-select.middle input{font-size:var(--xui-font-size-md)}.xUi-select.middle .xUi-select-trigger{border-radius:var(--xui-border-radius-md)}.xUi-select.large{font-size:var(--xui-font-size-lg);min-height:40px}.xUi-select.large,.xUi-select.large .xUi-select-trigger{border-radius:var(--xui-border-radius-lg)}.xUi-select input{font-size:var(--xui-font-size-lg)}";
+var css_248z$5 = "@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-select{background-color:transparent;border:1px solid var(--xui-border-color);border-radius:var(--xui-border-radius-sm);box-sizing:border-box;color:var(--xui-text-color);display:inline-flex;flex-direction:row-reverse;min-height:24px;padding:2px 8px;position:relative;width:100%}.xUi-select-disabled{background:rgba(0,0,0,.04)}.xUi-select-arrow{align-items:center;color:var(--xui-text-color-light);display:flex;gap:6px;margin:0 4px}.xUi-select-arrow svg{align-items:center;display:flex;justify-content:center}.xUi-select-loading{animation:spin 1s linear infinite;color:var(--xui-text-color-light);display:inline-block;margin:0 8px}.xUi-select .xUi-select-trigger{align-items:center;background:transparent;border-radius:var(--xui-border-radius-sm);cursor:pointer;display:flex;justify-content:space-between;width:100%}.xUi-select .xUi-select-clear-btn{background:none;border:none;color:#999;cursor:pointer;font-size:var(--xui-font-size-lg);line-height:1;margin:0 8px;padding:0}.xUi-select .xUi-select-clear-btn:hover{color:var(--xui-primary-color)}.xUi-select-dropdown{background-color:var(--xui-select-background-color);border-radius:var(--xui-border-radius-sm);box-shadow:0 4px 12px rgba(0,0,0,.15);left:0;margin-top:5px;max-height:350px;overflow-y:auto;position:absolute;right:unset;top:100%;width:inherit;z-index:10}.xUi-select-dropdown.bottomRight,.xUi-select-dropdown.topRight{left:unset;right:0}.xUi-select .xUi-select-loading-spinner{color:#999;padding:10px;text-align:center}.xUi-select:focus-within{border-color:var(--xui-primary-color-light);box-shadow:none}.xUi-select:hover:not(.xUi-select-disabled){border-color:var(--xui-primary-color)}.xUi-select-disabled,.xUi-select-disabled .xUi-select-input,.xUi-select-disabled .xUi-select-trigger{cursor:not-allowed!important;opacity:.6!important}.xUi-select-selected-icon{color:var(--xui-primary-color-light)}.xUi-select-error{border-color:var(--xui-error-color)}.xUi-select-arrow .error-svg-icon,.xUi-select-error .error-svg-icon{color:var(--xui-error-color)}.xUi-select .xUi-select-input{align-items:center;background:transparent;border:none;color:var(--xui-text-color);cursor:pointer;display:inline-flex;font-size:var(--xui-font-size-md);height:-webkit-fill-available;outline:none;padding:0;user-select:none;width:100%}.xUi-select .xUi-select-input:focus{border:none;box-shadow:none;outline:none}.xUi-select.middle{border-radius:var(--xui-border-radius-md);min-height:30px}.xUi-select.middle,.xUi-select.middle input{font-size:var(--xui-font-size-md)}.xUi-select.middle .xUi-select-trigger{border-radius:var(--xui-border-radius-md)}.xUi-select.large{font-size:var(--xui-font-size-lg);min-height:40px}.xUi-select.large,.xUi-select.large .xUi-select-trigger{border-radius:var(--xui-border-radius-lg)}.xUi-select input{font-size:var(--xui-font-size-lg)}";
 styleInject(css_248z$5);
 
 const LIST_HEIGHT = 200;
@@ -3037,34 +3037,39 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [handleClearInputValue, open, hasMode, prefixCls]);
-  const updateDropdownPosition = useCallback(() => {
-    if (!selectRef.current) return;
+  const updateDropdownPosition = useCallback(searchQueryUpdated => {
+    if (!selectRef.current) {
+      return;
+    }
     const triggerNode = selectRef.current?.querySelector(`.${prefixCls}-trigger`);
     const selectBox = triggerNode.getBoundingClientRect();
     const dropdownHeight = (getPopupContainer ? getPopupContainer(triggerNode) : selectRef.current)?.querySelector(`.${prefixCls}-dropdown`)?.clientHeight || listHeight;
-    const windowHeight = triggerNode.scrollHeight;
+    const windowHeight = window.innerHeight;
     const spaceBelow = windowHeight - selectBox.bottom;
     const spaceAbove = selectBox.top;
     let positionStyle = {
       width: `${triggerNode.offsetWidth + PADDING_PLACEMENT}px`,
       position: 'absolute'
     };
-    const shouldShowAbove = spaceBelow > dropdownHeight && spaceAbove < dropdownHeight;
+    const shouldShowAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
+    const shouldShowBelow = spaceAbove < dropdownHeight && spaceBelow > dropdownHeight;
     const inForm = !!triggerNode.closest(`.${prefixClsForm}`) ? FORM_MARGIN_BOTTOM : 0;
-    if (getPopupContainer) {
-      positionStyle = {
-        ...positionStyle,
-        top: shouldShowAbove ? `${selectBox.top + document.documentElement.scrollTop - dropdownHeight + PADDING_PLACEMENT / 2 - inForm}px` : `${selectBox.top + document.documentElement.scrollTop + triggerNode.offsetHeight}px`,
-        left: `${selectBox.left - PADDING_PLACEMENT / 2}px`
-      };
-    } else {
-      positionStyle = {
-        ...positionStyle,
-        top: shouldShowAbove ? `${triggerNode.offsetTop - dropdownHeight + PADDING_PLACEMENT / 2 - inForm}px` : `${triggerNode.offsetTop + triggerNode.offsetHeight}px`,
-        left: `${triggerNode.offsetLeft - PADDING_PLACEMENT / 2}px`
-      };
+    if (shouldShowAbove || shouldShowBelow || searchQueryUpdated) {
+      if (getPopupContainer) {
+        positionStyle = {
+          ...positionStyle,
+          top: shouldShowAbove ? `${selectBox.top + document.documentElement.scrollTop - dropdownHeight + PADDING_PLACEMENT / 2 - inForm}px` : `${selectBox.top + document.documentElement.scrollTop + triggerNode.offsetHeight}px`,
+          left: `${selectBox.left - PADDING_PLACEMENT / 2}px`
+        };
+      } else {
+        positionStyle = {
+          ...positionStyle,
+          top: shouldShowAbove ? `${triggerNode.offsetTop - dropdownHeight + PADDING_PLACEMENT / 2 - inForm}px` : `${triggerNode.offsetTop + triggerNode.offsetHeight}px`,
+          left: `${triggerNode.offsetLeft - PADDING_PLACEMENT / 2}px`
+        };
+      }
+      setDropdownPosition(positionStyle);
     }
-    setDropdownPosition(positionStyle);
   }, [prefixCls, listHeight, getPopupContainer]);
   useEffect(() => {
     if (!isOpen) {
@@ -3073,20 +3078,21 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
   }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
-    updateDropdownPosition();
+    const _updateDropdownPosition = () => updateDropdownPosition();
+    _updateDropdownPosition();
     const controller = new AbortController();
     const scrollableParents = getScrollParents(selectRef.current);
     scrollableParents.forEach(el => {
-      el.addEventListener('scroll', updateDropdownPosition, {
+      el.addEventListener('scroll', _updateDropdownPosition, {
         passive: true,
         signal: controller.signal
       });
     });
-    window.addEventListener('scroll', updateDropdownPosition, {
+    window.addEventListener('scroll', _updateDropdownPosition, {
       passive: true,
       signal: controller.signal
     });
-    window.addEventListener('resize', updateDropdownPosition, {
+    window.addEventListener('resize', _updateDropdownPosition, {
       signal: controller.signal
     });
     return () => {
@@ -3094,7 +3100,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     };
   }, [isOpen, getPopupContainer, updateDropdownPosition]);
   useEffect(() => {
-    updateDropdownPosition();
+    updateDropdownPosition(true);
   }, [searchQuery.length]);
   const getScrollParents = element => {
     const parents = [];
@@ -3298,8 +3304,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     }]),
     style: {
       ...dropdownPosition,
-      maxHeight: listHeight,
-      opacity: Object.keys(dropdownPosition).length ? 1 : 0
+      maxHeight: listHeight
     }
   }, filterable && /*#__PURE__*/React$1.createElement("input", {
     type: "text",
@@ -3374,14 +3379,14 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     },
     onKeyDown: handleOnKeyDown,
     style: {
-      width: 'auto',
+      width: showSearch && !searchQuery.length ? 0 : 'auto',
       display: 'ruby',
       textAlign: 'center'
     },
     contentEditable: "plaintext-only",
     id: `${prefixCls}-search-tag-input`,
     className: `${prefixCls}-tag-input`
-  })) : !hasMode ? /*#__PURE__*/React$1.createElement("div", {
+  }), !searchQuery.length ? selected === '' ? placeholder : extractedOptions.find(e => e.value === selected)?.children || selected : null) : !hasMode ? /*#__PURE__*/React$1.createElement("div", {
     className: `${prefixCls}-input globalEllipsis`,
     style: {
       opacity: isOpen || selected === '' ? '0.6' : '1'