x-ui-design 0.4.39 → 0.4.41

package/dist/index.esm.js

@@ -934,10 +934,10 @@ function flattenChildren(children) {
   return result;
 }
 
-var css_248z$l = ".xUi-form-item{display:flex;margin-bottom:10px;position:relative}.xUi-form-item.noStyle{display:inline-flex;margin-bottom:0}.xUi-form-item-label{align-items:center;color:var(--xui-text-color);display:flex;font-size:var(--xui-font-size-md);font-weight:500;line-height:20px;margin-bottom:4px}.xUi-form-item-error{bottom:-6px;color:var(--xui-error-color);font-size:var(--xui-font-size-xs);line-height:16px;position:absolute;right:0;user-select:none}.xUi-form-item-required{color:var(--xui-error-color);display:inline-block;font-size:var(--xui-font-size-md);line-height:1;margin-left:4px;margin-right:4px}.xUi-form-item.horizontal{align-items:center;flex-direction:row;gap:4px}.xUi-form-item.vertical{align-self:flex-start;flex-direction:column}.xUi-form-item .xUi-input-container{margin-bottom:12px!important;width:-webkit-fill-available}.xUi-form-item .xUi-datepicker-container{margin-bottom:10px}.xUi-form-item .xUi-select{margin-bottom:15px}.xUi-form-item-extra{left:0;margin-top:6px;position:absolute;right:0}";
+var css_248z$l = ".xUi-form-item{display:flex;position:relative}.xUi-form-item.noStyle{display:inline-flex;margin-bottom:0}.xUi-form-item-label{align-items:center;color:var(--xui-text-color);display:flex;font-size:var(--xui-font-size-md);font-weight:500;line-height:20px;margin-bottom:4px}.xUi-form-item-error{bottom:10px;color:var(--xui-error-color);display:block;font-size:var(--xui-font-size-xs);line-height:16px;min-height:16px;position:relative;right:0;user-select:none}.xUi-form-item-required{color:var(--xui-error-color);display:inline-block;font-size:var(--xui-font-size-md);line-height:1;margin-left:4px;margin-right:4px}.xUi-form-item.horizontal{align-items:center;flex-direction:row;gap:4px}.xUi-form-item.vertical{align-self:flex-start;flex-direction:column}.xUi-form-item .xUi-input-container{margin-bottom:12px!important;width:-webkit-fill-available}.xUi-form-item .xUi-datepicker-container{margin-bottom:10px}.xUi-form-item .xUi-select{margin-bottom:15px}.xUi-form-item-extra{left:0;margin-top:6px;position:absolute;right:0}";
 styleInject(css_248z$l);
 
-const REF_CLIENT_HEIGHT = 24;
+// const REF_CLIENT_HEIGHT = 24;
 const FormItem$1 = ({
   prefixCls = prefixClsFormItem,
   name,
@@ -992,13 +992,16 @@ const FormItem$1 = ({
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dependencies, name]);
-  useEffect(() => {
-    if (errorRef.current && errorRef.current?.clientHeight >= REF_CLIENT_HEIGHT) {
-      errorRef.current.style.position = 'relative';
-      errorRef.current.style.marginTop = '-16px';
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [errorRef.current]);
+  // useEffect(() => {
+  //   if (
+  //     errorRef.current &&
+  //     errorRef.current?.clientHeight >= REF_CLIENT_HEIGHT
+  //   ) {
+  //     errorRef.current.style.position = 'relative';
+  //     errorRef.current.style.marginTop = '-16px';
+  //   }
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [errorRef.current]);
   const isRequired = useMemo(() => rules.some(rule => rule.required), [rules]);
   const errorMessage = getFieldError(name)?.[0];
   return /*#__PURE__*/React.createElement("div", {
@@ -1041,13 +1044,13 @@ const FormItem$1 = ({
         size: childProps.size || props.size
       })), extra ? /*#__PURE__*/React.createElement("div", {
         className: `${prefixCls}-extra`
-      }, extra) : null);
+      }, extra) : null, !props.noStyle && /*#__PURE__*/React.createElement("span", {
+        ref: errorRef,
+        className: `${prefixCls}-error`
+      }, errorMessage || ''));
     }
     return child;
-  }), !props.noStyle && errorMessage && /*#__PURE__*/React.createElement("span", {
-    ref: errorRef,
-    className: `${prefixCls}-error`
-  }, errorMessage));
+  }));
 };
 const FormItemChildComponent = ({
   child,
@@ -3217,6 +3220,7 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
   const selectRef = useRef(null);
   const [searchInputWidth, setSearchInputWidth] = useState(0);
   const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [searchFocused, setSearchFocused] = useState(false);
   const [isOpenChecker, setIsOpenChecker] = useState(isOpen);
   const [searchQuery, setSearchQuery] = useState(searchValue || '');
   const [dropdownPosition, setDropdownPosition] = useState({});
@@ -3304,8 +3308,10 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     setIsOpenChecker(isOpen);
     if (!isOpen) {
       setDropdownPosition({});
+      setSearchFocused(false);
     }
   }, [isOpen]);
+  useEffect(() => {}, []);
   useEffect(() => {
     if (!isOpen) return;
     const _updateDropdownPosition = () => updateDropdownPosition();
@@ -3493,19 +3499,10 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
       setSearchInputWidth(searchContent.clientWidth - PADDING_TAG_INPUT);
     }
     const timeout = setTimeout(() => {
-      // if (!hasMode) {
-      //   const selectedOption = selectRef.current?.getElementsByClassName('selected')[0];
-      //   if (selectedOption) {
-      //     const selectedOptionTop: number = selectRef.current?.getElementsByClassName('selected')[0].getBoundingClientRect()?.top || 0;
-      //     selectRef.current?.getElementsByClassName(`${prefixCls}-options`)[0]?.scrollTo({
-      //       top: selectedOptionTop - selectedOption.clientHeight - PADDING_PLACEMENT - PADDING_TAG_INPUT,
-      //       behavior: 'smooth'
-      //     })
-      //   }
-      // }
       const searchInput = document.getElementById(`${prefixCls}-search-tag-input`);
       if (searchInput) {
         searchInput?.focus();
+        setSearchFocused(true);
       }
       clearTimeout(timeout);
     }, 0);
@@ -3637,9 +3634,9 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     style: {
       opacity: 0.5
     }
-  }, placeholder)) : null, isOpen ? /*#__PURE__*/React.createElement("div", {
+  }, searchFocused ? '' : placeholder)) : null, isOpen ? /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-tag`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", _extends({
     onClick: e => {
       if (disabled) {
         e.preventDefault();
@@ -3649,14 +3646,16 @@ const SelectComponent = /*#__PURE__*/forwardRef(({
     },
     onKeyDown: handleOnKeyDown,
     style: {
-      width: showSearch && !searchQuery.length ? 0 : 'auto',
+      width: showSearch && !searchQuery.length ? 1 : 'auto',
       display: 'ruby',
       textAlign: 'center'
-    },
-    contentEditable: "plaintext-only",
+    }
+  }, showSearch ? {
+    contentEditable: 'plaintext-only'
+  } : {}, {
     id: `${prefixCls}-search-tag-input`,
     className: `${prefixCls}-tag-input`
-  }), !hasMode && !searchQuery.length ? selected === '' ? placeholder : selectedOption : null) : !hasMode ? /*#__PURE__*/React.createElement("div", {
+  })), !hasMode && !searchQuery.length ? selected === '' ? placeholder : selectedOption : null) : !hasMode ? /*#__PURE__*/React.createElement("div", {
     className: `${prefixCls}-input globalEllipsis`,
     style: {
       opacity: isOpen ? '0.6' : '1'