x-ui-design 0.6.33 → 0.6.41

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

@@ -1,5 +1,7 @@
-import React from 'react';
-import { FormInstance, FormProps } from '../../types/form';
+import React, { FC } from 'react';
+import { FormInstance, FormItemProps, FormProps } from '../../types/form';
 export declare const FormContext: React.Context<FormInstance | null>;
-declare const _default: React.NamedExoticComponent<FormProps>;
-export default _default;
+declare const Form: FC<FormProps> & {
+    Item: FC<FormItemProps>;
+};
+export default Form;

package/dist/esm/types/components/Form/Item/Item.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import { FormItemProps } from '../../../types/form';
 import './style.css';
-declare const FormItem: React.MemoExoticComponent<({ prefixCls, name, label, rules, children, className, layout, style, extra, hideLabel, removeErrorMessageHeight, ...props }: FormItemProps) => React.JSX.Element>;
+declare const FormItem: {
+    ({ prefixCls, name, label, rules, children, className, layout, style, dependencies, initialValue, feedbackIcons, extra, hideLabel, removeErrorMessageHeight, ...props }: FormItemProps): React.JSX.Element;
+    displayName: string;
+};
 export default FormItem;

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

@@ -8,28 +8,7 @@ declare const DatePicker: import("react").ComponentType<import("@/types/datepick
 declare const RangePicker: import("react").ComponentType<import("@/types/datepicker").TRangePickerProps>;
 declare const TimePicker: import("react").ComponentType<import("@/types/datepicker").TimePickerProps>;
 declare const Form: import("react").ComponentType<import("@/types/form").FormProps>;
-declare const FormItem: import("react").ComponentType<import("@/types").DefaultProps & {
-    name: string;
-    label?: string | import("react").ReactNode;
-    rules?: import("@/types/form").RuleObject[];
-    initialValue?: import("@/types").RuleType;
-    children: (import("react").ReactElement & {
-        props: {
-            value: import("@/types").RuleTypes;
-        };
-    }) | (import("react").ReactElement & {
-        props: {
-            value: import("@/types").RuleTypes;
-        };
-    })[];
-    layout?: import("@/types/form").FormLayoutTypes;
-    dependencies?: string[];
-    normalize?: (value: import("@/types").RuleType, prevValue: import("@/types").RuleType, allValues: import("@/types").RuleType) => import("@/types").RuleType;
-    feedbackIcons?: boolean;
-    extra?: import("react").ReactNode;
-    hideLabel?: boolean;
-    removeErrorMessageHeight?: boolean;
-}>;
+declare const FormItem: import("react").ComponentType<import("@/types/form").FormItemProps>;
 declare const Input: import("react").ComponentType<import("@/types/input").InputProps>;
 declare const Textarea: import("react").ComponentType<import("@/types/input").TextareaProps>;
 declare const Radio: import("react").ComponentType<import("@/types/radio").RadioProps>;

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

@@ -74,16 +74,17 @@ export interface FormItemChildComponentProps {
     child: ReactElement;
     name: string;
     error: boolean;
-    initialValue: RuleTypes;
+    fieldValue: RuleTypes;
+    value: RuleType;
+    setFieldValue: (name: string, value: RuleType, errors?: string[], reset?: boolean | null | undefined, touch?: boolean) => void;
     onChange?: (e: SyntheticBaseEvent, option?: OptionProps) => void;
     size?: SizeType;
     normalize?: (value: RuleType, prevValue: RuleType, allValues: RuleType) => RuleType;
     noStyle?: boolean;
     feedbackIcons?: boolean;
     ref?: FieldInstancesRef | null;
-    dependencies?: string[];
 }
-export type FormInstance = {
+export interface FormInstance {
     submit: () => Promise<Record<string, RuleTypes> | undefined>;
     setFields: (fields: FieldData[]) => void;
     resetFields: (nameList?: string[], showError?: boolean | null) => void;
@@ -101,7 +102,6 @@ export type FormInstance = {
     subscribeToField: (name: string, callback: (value: RuleTypes) => void) => () => void;
     subscribeToForm: (callback: (values: Record<string, RuleTypes>) => void) => () => void;
     subscribeToFields: (names: string[], callback: (values: Record<string, RuleTypes>) => void) => () => void;
-    subscribeToFieldError: (name: string, callback: (errors: string[]) => void) => () => void;
     isFieldValidating: (name: string) => boolean;
     onFieldsChange?: (changedFields: FieldData[]) => void;
     onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void;
@@ -118,4 +118,4 @@ export type FormInstance = {
         errorFields: Pick<FieldError, 'errors' | 'name'>[];
     }) => void) => void;
     changeStep: (step: number) => void;
-};
+}

package/dist/index.d.ts

@@ -6,8 +6,6 @@ import * as __types_radio from '@/types/radio';
 export { RadioButtonProps, RadioGroupProps, RadioProps } from '@/types/radio';
 import * as __types_input from '@/types/input';
 export { InputProps, TextareaProps } from '@/types/input';
-import * as __types from '@/types';
-export { DefaultProps, MouseEventHandlerSelect, RuleType, RuleTypes, SyntheticBaseEvent, TargetProps } from '@/types';
 import * as __types_form from '@/types/form';
 export { FieldData, FieldError, FieldInstancesInputRef, FormInstance, FormItemChildComponentProps, FormProps, RuleObject, RuleRender } from '@/types/form';
 import * as __types_datepicker from '@/types/datepicker';
@@ -21,6 +19,7 @@ export { BaseButtonProps, ButtonProps, ButtonType } from '@/types/button';
 export { ArrowIcon, CalendarIcon, CheckIcon, ClearIcon, DateDistanceIcon, ErrorIcon, LoadingIcon, SearchIcon, SpinerIcon, StampleIcon, SuccessIcon, TimeIcon, TrashIcon } from '@/components/Icons';
 export { useForm } from '@/hooks/useForm';
 export { useWatch } from '@/hooks/useWatch';
+export { DefaultProps, MouseEventHandlerSelect, RuleType, RuleTypes, SyntheticBaseEvent, TargetProps } from '@/types';
 export { FormContext } from '@/components/Form/Form';
 export { clsx, createArray, parseValue } from '@/helpers';
 export { flattenChildren } from '@/helpers/flatten';
@@ -112,28 +111,7 @@ declare const DatePicker: react.ComponentType<__types_datepicker.TDatePickerProp
 declare const RangePicker: react.ComponentType<__types_datepicker.TRangePickerProps>;
 declare const TimePicker: react.ComponentType<__types_datepicker.TimePickerProps>;
 declare const Form: react.ComponentType<__types_form.FormProps>;
-declare const FormItem: react.ComponentType<__types.DefaultProps & {
-    name: string;
-    label?: string | react.ReactNode;
-    rules?: __types_form.RuleObject[];
-    initialValue?: __types.RuleType;
-    children: (react.ReactElement & {
-        props: {
-            value: __types.RuleTypes;
-        };
-    }) | (react.ReactElement & {
-        props: {
-            value: __types.RuleTypes;
-        };
-    })[];
-    layout?: __types_form.FormLayoutTypes;
-    dependencies?: string[];
-    normalize?: (value: __types.RuleType, prevValue: __types.RuleType, allValues: __types.RuleType) => __types.RuleType;
-    feedbackIcons?: boolean;
-    extra?: react.ReactNode;
-    hideLabel?: boolean;
-    removeErrorMessageHeight?: boolean;
-}>;
+declare const FormItem: react.ComponentType<__types_form.FormItemProps>;
 declare const Input: react.ComponentType<__types_input.InputProps>;
 declare const Textarea: react.ComponentType<__types_input.TextareaProps>;
 declare const Radio: react.ComponentType<__types_radio.RadioProps>;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import require$$1 from 'react/jsx-runtime';
-import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, memo, useContext, useMemo, useEffect, useCallback, createContext, useImperativeHandle, useLayoutEffect } from 'react';
+import React, { useRef, useState, useEffect, Children, isValidElement, Fragment, Suspense, useContext, useMemo, createContext, useImperativeHandle, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -627,10 +627,13 @@ const useForm = ({
   });
   const fieldInstancesRef = useRef({});
   const [isReseting, setIsReseting] = useState(false);
-  const errorsRef = useRef({});
+  const [errors, setErrors] = useState({});
+  const errorsRef = useRef(errors);
   const fieldSubscribers = useRef({});
   const formSubscribers = useRef([]);
-  const errorSubscribers = useRef({});
+  useEffect(() => {
+    errorsRef.current = errors;
+  }, [errors]);
   function getFormFields() {
     return Object.assign({}, ...Object.values(formRef.current));
   }
@@ -672,10 +675,12 @@ const useForm = ({
       touchedFieldsRef.current.add(name);
     }
     if (reset === null) {
-      errorsRef.current[name] = [];
+      setErrors({
+        [name]: []
+      });
       return;
     }
-    if (!errorsRef.current?.length) {
+    if (!errors?.length) {
       validateField(name).then(() => {
         const allValues = getFieldsValue();
         fieldSubscribers.current[name]?.forEach(callback => callback(value));
@@ -693,7 +698,9 @@ const useForm = ({
         }
       });
     } else {
-      errorsRef.current[name] = errors || [];
+      setErrors({
+        [name]: errors
+      });
     }
   }
   function setFieldsValue(values, reset) {
@@ -769,12 +776,11 @@ const useForm = ({
         }
       }
     }));
-    errorsRef.current = {
-      ...errorsRef.current,
+    setErrors(prev => ({
+      ...prev,
       [name]: fieldErrors
-    };
+    }));
     warningsRef.current[name] = fieldWarnings;
-    errorSubscribers.current[name]?.forEach(callback => callback(fieldErrors));
     return fieldErrors.length === 0;
   }
   async function validateFields(nameList) {
@@ -805,12 +811,11 @@ const useForm = ({
         formData[name] = initialValues[name];
         touchedFieldsRef.current.delete(name);
         delete warningsRef.current[name];
-        errorsRef.current = {
-          ...errorsRef.current,
+        setErrors(prev => ({
+          ...prev,
           [name]: []
-        };
+        }));
         setFieldValue(name, initialValues[name], undefined, showError);
-        errorSubscribers.current[name]?.forEach(callback => callback([]));
       });
     } else {
       touchedFieldsRef.current.clear();
@@ -819,7 +824,6 @@ const useForm = ({
         ...formData
       }).forEach(name => {
         setFieldValue(name, initialValues[name], undefined, showError);
-        errorSubscribers.current[name]?.forEach(callback => callback([]));
       });
     }
     formSubscribers.current.forEach(callback => callback(getFieldsValue()));
@@ -849,22 +853,13 @@ const useForm = ({
   }
   function subscribeToFields(names, callback) {
     const fieldCallbacks = names.map(name => subscribeToField(name, () => {
-      callback(getFieldsValue(names));
+      const updatedValues = getFieldsValue(names);
+      callback(updatedValues);
     }));
     return () => {
       fieldCallbacks.forEach(unsubscribe => unsubscribe());
     };
   }
-  function subscribeToFieldError(name, callback) {
-    if (!errorSubscribers.current[name]) {
-      errorSubscribers.current[name] = [];
-    }
-    errorSubscribers.current[name].push(callback);
-    callback(errorsRef.current[name] || []);
-    return () => {
-      errorSubscribers.current[name] = errorSubscribers.current[name].filter(cb => cb !== callback);
-    };
-  }
   function setScrollToFirstError(value) {
     _scrollToFirstError.current = value;
   }
@@ -874,12 +869,12 @@ const useForm = ({
   function setOnValuesChange(onValuesChange) {
     formHandlersRef.current.onValuesChange = onValuesChange;
   }
-  function setOnFinishFailed(onFinishFailed) {
-    formHandlersRef.current.onFinishFailed = onFinishFailed;
-  }
   function setOnFinish(onFinish) {
     formHandlersRef.current.onFinish = onFinish;
   }
+  function setOnFinishFailed(onFinishFailed) {
+    formHandlersRef.current.onFinishFailed = onFinishFailed;
+  }
   function changeStep(step) {
     stepRef.current = step ?? 0;
     if (!formRef.current[stepRef.current]) {
@@ -899,12 +894,12 @@ const useForm = ({
     getFieldsValue,
     isFieldTouched,
     getFieldsError,
+    setOnFinishFailed,
     isFieldsTouched,
     getFieldWarning,
     isFieldValidating,
     subscribeToField,
     subscribeToForm,
-    subscribeToFieldError,
     onFieldsChange,
     onValuesChange,
     getFieldInstance,
@@ -916,7 +911,6 @@ const useForm = ({
     setOnFinish,
     setOnFieldsChange,
     setOnValuesChange,
-    setOnFinishFailed,
     changeStep
   };
   return formInstance;
@@ -1004,7 +998,7 @@ function flattenChildren(children) {
 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{color:var(--xui-error-color);display:block;font-size:var(--xui-font-size-xs);line-height:16px;margin-bottom:8px;margin-top:4px;min-height:16px;position:relative;right:0;text-align:end;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{width:-webkit-fill-available}";
 styleInject(css_248z$l);
 
-const FormItem$1 = /*#__PURE__*/memo(({
+const FormItem$1 = ({
   prefixCls = prefixClsFormItem,
   name,
   label,
@@ -1013,6 +1007,9 @@ const FormItem$1 = /*#__PURE__*/memo(({
   className = '',
   layout = 'vertical',
   style = {},
+  dependencies = [],
+  initialValue,
+  feedbackIcons,
   extra,
   hideLabel = false,
   removeErrorMessageHeight = false,
@@ -1027,12 +1024,14 @@ const FormItem$1 = /*#__PURE__*/memo(({
   const {
     isReseting,
     registerField,
+    getFieldError,
+    getFieldValue,
+    setFieldValue,
     getFieldInstance,
     setFieldInstance,
-    getFieldError,
-    subscribeToFieldError
+    subscribeToFields,
+    validateFields
   } = formContext;
-  const [errors, setErrors] = useState(getFieldError(name)?.[0]);
   const childrenList = useMemo(() => flattenChildren(children), [children]);
   useEffect(() => {
     if (name && !getFieldInstance(name)) {
@@ -1044,14 +1043,22 @@ const FormItem$1 = /*#__PURE__*/memo(({
   }, [name, fieldRef.current]);
   useEffect(() => () => registerField(name, undefined, true), [name]);
   useEffect(() => {
-    const unsubscribe = subscribeToFieldError(name, errors => {
-      setErrors(errors?.[0]);
-    });
-    return () => {
-      unsubscribe?.();
-    };
-  }, [name]);
+    if (initialValue) {
+      setFieldValue(name, initialValue);
+    }
+  }, []);
+  useEffect(() => {
+    if (name && dependencies.length > 0) {
+      const unsubscribe = subscribeToFields(dependencies, () => {
+        validateFields([name]);
+      });
+      return () => {
+        unsubscribe();
+      };
+    }
+  }, [dependencies, name]);
   const isRequired = useMemo(() => rules.some(rule => rule.required), [rules]);
+  const errorMessage = getFieldError(name)?.[0];
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     "data-instance": name,
@@ -1067,21 +1074,40 @@ const FormItem$1 = /*#__PURE__*/memo(({
     className: `${prefixCls}-required`
   }, "*")), Children.map(childrenList, (child, key) => {
     if (/*#__PURE__*/isValidElement(child)) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      const {
+        onChange,
+        value,
+        ...childProps
+      } = child.props;
+      const fieldValue = value ?? getFieldValue(name) ?? initialValue;
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormItemChildComponent, _extends({}, props, {
-        key: `${key}_${name}_${isReseting}`
+        key: `${key}_${isReseting}`
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
         ,
         ref: fieldRef,
         name: name,
         child: child,
-        error: !!errors
+        value: value,
+        error: !!errorMessage,
+        fieldValue: fieldValue,
+        setFieldValue: setFieldValue,
+        feedbackIcons: feedbackIcons,
+        onChange: onChange,
+        noStyle: props.noStyle,
+        normalize: props.normalize
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        ,
+        size: childProps.size || props.size
       })), extra ? /*#__PURE__*/React.createElement("div", {
         className: `${prefixCls}-extra`
       }, extra || '') : null, !props.noStyle && /*#__PURE__*/React.createElement("span", {
         ref: errorRef,
         className: clsx([`${prefixCls}-error`, {
-          [`${prefixCls}-has-error`]: errors?.length
+          [`${prefixCls}-has-error`]: errorMessage?.length
         }]),
         style: {
           ...(removeErrorMessageHeight ? {
@@ -1091,59 +1117,33 @@ const FormItem$1 = /*#__PURE__*/memo(({
             marginBottom: 0
           } : {})
         }
-      }, errors || ''));
+      }, errorMessage || ''));
     }
     return child;
   }));
-});
-const FormItemChildComponent = /*#__PURE__*/memo(({
+};
+const FormItemChildComponent = ({
   child,
   name,
   error,
-  initialValue,
+  fieldValue,
+  setFieldValue,
+  onChange,
   normalize,
   noStyle,
+  feedbackIcons,
   ref,
-  dependencies = [],
   ...props
 }) => {
   const formContext = useContext(FormContext);
-  const _formFieldValue = useWatch({
-    name
-  });
   const [wasNormalize, setWasNormalize] = useState(false);
   const {
-    getFieldsValue,
-    setFieldValue,
-    subscribeToFields,
-    validateFields
+    getFieldsValue
   } = formContext || {};
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  const {
-    onChange,
-    value
-  } = child.props;
-  const fieldValue = useMemo(() => value ?? _formFieldValue ?? initialValue, [value, _formFieldValue, initialValue]);
-  useEffect(() => {
-    if (initialValue) {
-      setFieldValue?.(name, initialValue);
-    }
-  }, [name]);
-  useEffect(() => {
-    if (name && dependencies.length > 0) {
-      const unsubscribe = subscribeToFields?.(dependencies, () => {
-        validateFields?.([name]);
-      });
-      return () => {
-        unsubscribe?.();
-      };
-    }
-  }, [dependencies, name]);
   const handleChange = (e, option) => {
     let rawValue = e?.target ? e.target.value : e;
     if (normalize) {
-      const prevValue = fieldValue;
+      const prevValue = fieldValue ?? props.value;
       const allValues = getFieldsValue?.();
       rawValue = normalize(rawValue, prevValue, allValues);
       if (rawValue === prevValue) {
@@ -1156,10 +1156,10 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
         return;
       }
     }
-    setFieldValue?.(name, rawValue, undefined, undefined, true);
+    setFieldValue(name, rawValue, undefined, undefined, true);
     onChange?.(e, option);
   };
-  const injectPropsIntoFinalLeaf = useCallback(child => {
+  const injectPropsIntoFinalLeaf = child => {
     if (! /*#__PURE__*/isValidElement(child)) {
       return child;
     }
@@ -1172,27 +1172,24 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
       return child;
     }
     return /*#__PURE__*/React.createElement(child.type, _extends({}, props, {
-      ref: ref,
-      name: name
+      ref: ref
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
     }, child.props, {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      size: childProps.size || props.size,
+      name: name,
       child: child,
-      value: fieldValue,
       onChange: handleChange,
-      key: `${name}_${wasNormalize}`
+      key: `${name}_${wasNormalize}`,
+      value: fieldValue ?? props.value
     }, 'dangerouslySetInnerHTML' in childProps ? {} : {
       __injected: true,
       ...(error ? {
         error
       } : {})
     }));
-  }, [name, fieldValue, wasNormalize, error, handleChange, props, ref]);
+  };
   return injectPropsIntoFinalLeaf(child);
-});
+};
 FormItem$1.displayName = 'FormItem';
 
 var Item = /*#__PURE__*/Object.freeze({
@@ -1224,7 +1221,7 @@ const Form$1 = ({
   });
   const formRef = useRef(null);
   const formInstance = useMemo(() => form || internalForm, [form, internalForm]);
-  const handleSubmit = useCallback(async e => {
+  const handleSubmit = async e => {
     e.preventDefault();
     if (await formInstance.validateFields()) {
       onFinish?.(formInstance.getFieldsValue());
@@ -1235,9 +1232,8 @@ const Form$1 = ({
         errorFields
       });
     }
-  }, [formInstance, onFinish, onFinishFailed]);
+  };
   const childrenList = useMemo(() => flattenChildren(children), [children]);
-  const formClassName = useMemo(() => `${prefixCls} ${className}`.trim(), [prefixCls, className]);
   useEffect(() => {
     if (onFinish) {
       formInstance.setOnFinish?.(onFinish);
@@ -1255,7 +1251,7 @@ const Form$1 = ({
       formInstance.setScrollToFirstError(scrollToFirstError);
     }
   }, [formInstance, onFieldsChange, onValuesChange, onFinishFailed, onFinish, scrollToFirstError]);
-  const injectPropsIntoFinalLeaf = useCallback(child => {
+  const injectPropsIntoFinalLeaf = child => {
     if (! /*#__PURE__*/isValidElement(child)) {
       return child;
     }
@@ -1272,24 +1268,22 @@ const Form$1 = ({
       size: childProps.size || rest.size,
       layout: childProps.layout || layout
     }));
-  }, [rest.size, layout]);
-  const injectedChildren = useMemo(() => Children.map(childrenList, child => injectPropsIntoFinalLeaf(child)), [childrenList, injectPropsIntoFinalLeaf]);
+  };
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: formInstance
   }, /*#__PURE__*/React.createElement("form", {
     style: style,
     ref: formRef,
     onSubmit: handleSubmit,
-    className: formClassName
-  }, injectedChildren));
+    className: `${prefixCls} ${className}`
+  }, Children.map(childrenList, child => injectPropsIntoFinalLeaf(child))));
 };
-Form$1.Item = /*#__PURE__*/memo(FormItem$1);
-var Form$2 = /*#__PURE__*/memo(Form$1);
+Form$1.Item = FormItem$1;
 
-var Form$3 = /*#__PURE__*/Object.freeze({
+var Form$2 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	FormContext: FormContext,
-	default: Form$2
+	default: Form$1
 });
 
 const useWatch = ({
@@ -1341,7 +1335,7 @@ const RangePicker$2 = dynamic$1(() => Promise.resolve().then(function () { retur
 const TimePicker$2 = dynamic$1(() => Promise.resolve().then(function () { return TimePicker$1; }), {
   ssr: false
 });
-const Form = dynamic$1(() => Promise.resolve().then(function () { return Form$3; }), {
+const Form = dynamic$1(() => Promise.resolve().then(function () { return Form$2; }), {
   ssr: false
 });
 const FormItem = dynamic$1(() => Promise.resolve().then(function () { return Item; }), {
@@ -3071,8 +3065,8 @@ const InputComponent = ({
   }, prefix && /*#__PURE__*/React.createElement("span", {
     className: `${prefixCls}-prefix`
   }, prefix), /*#__PURE__*/React.createElement("input", _extends({}, props, {
-    suppressHydrationWarning: true,
-    ref: inputRef
+    ref: inputRef,
+    suppressHydrationWarning: true
   }, props.type === 'password' && iconRender ? {
     type: iconRenderVisible ? 'text' : 'password'
   } : {}, {
@@ -3613,7 +3607,7 @@ const SelectComponent = ({
       setSelected(optionValue);
       onChange?.(optionValue, option);
       onSelect?.(optionValue, option);
-      onDropdownVisibleChange?.(defaultOpen, optionValue);
+      onDropdownVisibleChange?.(defaultOpen, option);
     }
     handleClearInputValue();
   };
@@ -3669,7 +3663,11 @@ const SelectComponent = ({
       isOpen: isOpen
     }));
   }, [showArrow, showSearch, isOpen, suffixIcon, searchIcon]);
-  const extractOptions = useCallback((children, options) => {
+  const extractedOptions = children ? extractOptions(children) : Array.isArray(options) ? options : [];
+  const triggerNode = useMemo(() => {
+    return selectRef.current?.querySelector(`.${prefixCls}-trigger`);
+  }, [prefixCls]);
+  function extractOptions(children, options) {
     const result = [];
     const flatten = nodes => {
       try {
@@ -3693,11 +3691,7 @@ const SelectComponent = ({
       return result;
     }
     return options || [];
-  }, []);
-  const extractedOptions = children ? extractOptions(children) : Array.isArray(options) ? options : [];
-  const triggerNode = useMemo(() => {
-    return selectRef.current?.querySelector(`.${prefixCls}-trigger`);
-  }, [prefixCls]);
+  }
   const filteredOptions = extractedOptions.filter(option => {
     if (typeof filterOption === 'function') {
       return filterOption(searchQuery, option);