x-ui-design 0.3.47 → 0.3.49

package/dist/esm/types/helpers/flatten.d.ts

@@ -0,0 +1 @@
+export declare function flattenChildren(children: React.ReactNode): React.ReactElement[];

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import require$$1 from 'react/jsx-runtime';
-import React$1, { useRef, useState, useContext, useMemo, useEffect, Children, isValidElement, Fragment, createContext, forwardRef, useImperativeHandle, useCallback } from 'react';
+import React$1, { useRef, useState, Children, isValidElement, Fragment, Suspense, useContext, useMemo, useEffect, createContext, forwardRef, useImperativeHandle, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -883,6 +883,21 @@ function clsx(...args) {
   }).filter(Boolean).join(' ');
 }
 
+function flattenChildren(children) {
+  const result = [];
+  Children.forEach(children, child => {
+    if (! /*#__PURE__*/isValidElement(child)) return;
+    if (child.type === Fragment || child.type === Suspense) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      result.push(...flattenChildren(child.props.children));
+    } else {
+      result.push(child);
+    }
+  });
+  return result;
+}
+
 var css_248z$k = ".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}";
 styleInject(css_248z$k);
 
@@ -917,7 +932,7 @@ const FormItem$1 = ({
     subscribeToFields,
     validateFields
   } = formContext;
-  const childrenList = useMemo(() => (Array.isArray(children) ? children : [children]).filter(Boolean), [children]);
+  const childrenList = useMemo(() => flattenChildren(children), [children]);
   useEffect(() => {
     if (name && !getFieldInstance(name)) {
       registerField(name, rules);
@@ -960,7 +975,10 @@ const FormItem$1 = ({
     className: `${prefixCls}-required`
   }, "*")), Children.map(childrenList, (child, key) => {
     if (/*#__PURE__*/isValidElement(child) && child.type !== Fragment) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
       const {
+        onChange,
         value,
         ...childProps
       } = child.props;
@@ -980,8 +998,9 @@ const FormItem$1 = ({
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
         ,
-        size: childProps.size || props.size
-      }));
+        size: childProps.size || props.size,
+        onChange: onChange
+      }, childProps));
     }
     return child;
   }), !props.noStyle && errorMessage && /*#__PURE__*/React$1.createElement("span", {
@@ -1075,7 +1094,7 @@ const Form$1 = ({
       });
     }
   };
-  const childrenList = useMemo(() => (Array.isArray(children) ? children : [children]).filter(Boolean), [children]);
+  const childrenList = useMemo(() => flattenChildren(children), [children]);
   useEffect(() => {
     if (onFieldsChange) {
       formInstance.onFieldsChange = onFieldsChange;