x-ui-design 0.6.25 → 0.6.27

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

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

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

@@ -1,9 +1,57 @@
-import React, { ReactElement } from 'react';
-import { SelectProps } from '../../types/select';
+import React, { ReactElement, ReactNode } from 'react';
+import { OptionType, SelectProps } from '../../types/select';
 import './style.css';
-declare const Select: {
-    ({ prefixCls, id, searchValue, autoClearSearchValue, filterOption, optionFilterProp, children, options, listHeight, menuItemSelectedIcon, mode, value, defaultValue, maxCount, disabled, loading, placeholder, allowClear, filterable, defaultOpen, size, error, dropdownClassName, className, suffixIcon, searchIcon, style, showSearch, open, closeFromParent, showArrow, notFoundContent, noStyle, feedbackIcons, placement, removeIcon, maxTagCount, onSearch, onSelect, onDeselect, onClear, onChange, onClose, tagRender, getPopupContainer, dropdownRender, onDropdownVisibleChange, ref }: SelectProps): ReactElement;
-    displayName: string;
+declare const Select: React.NamedExoticComponent<import("../../types").DefaultProps & {
+    id?: string;
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    autoClearSearchValue?: boolean;
+    onSelect?: (value: import("../../types").RuleTypes, option?: OptionType) => void;
+    onDeselect?: (value: string, option?: OptionType) => void;
+    filterOption?: boolean | ((input: string, option: OptionType) => boolean);
+    optionFilterProp?: string;
+    options?: OptionType[];
+    children?: ReactNode;
+    defaultActiveFirstOption?: boolean;
+    listHeight?: number;
+    menuItemSelectedIcon?: ReactNode;
+    mode?: "default" | "multiple" | "tags";
+    value?: import("../../types").RuleTypes;
+    defaultValue?: import("../../types").RuleTypes;
+    maxCount?: number;
+    onChange?: (e: import("../../types").RuleTypes, option?: OptionType) => void;
+    onClose?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    placeholder?: string;
+    allowClear?: boolean;
+    filterable?: boolean;
+    defaultOpen?: boolean;
+    size?: "small" | "middle" | "large";
+    onClear?: () => void;
+    error?: boolean;
+    showSearch?: boolean;
+    tagRender?: ((props: import("../../types/select").CustomTagProps) => ReactElement) | undefined;
+    maxTagPlaceholder?: ReactNode | ((omittedValues: import("../../types/select").DisplayValueType[]) => ReactNode);
+    dropdownClassName?: string;
+    showArrow?: boolean;
+    onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
+    onDropdownVisibleChange?: ((open: boolean, selected: import("../../types").RuleType) => void) | undefined;
+    showAction?: ("click" | "focus")[] | undefined;
+    suffixIcon?: ReactNode;
+    searchIcon?: ReactNode;
+    open?: boolean;
+    notFoundContent?: ReactNode;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    dropdownRender?: (menu: ReactNode) => ReactNode;
+    feedbackIcons?: boolean;
+    placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+    removeIcon?: ReactNode;
+    maxTagCount?: number | "responsive";
+    ref?: React.ForwardedRef<HTMLDivElement>;
+    closeFromParent?: boolean;
+}> & {
+    readonly type: ({ prefixCls, id, searchValue, autoClearSearchValue, filterOption, optionFilterProp, children, options, listHeight, menuItemSelectedIcon, mode, value, defaultValue, maxCount, disabled, loading, placeholder, allowClear, filterable, defaultOpen, size, error, dropdownClassName, className, suffixIcon, searchIcon, style, showSearch, open, closeFromParent, showArrow, notFoundContent, noStyle, feedbackIcons, placement, removeIcon, maxTagCount, onSearch, onSelect, onDeselect, onClear, onChange, onClose, tagRender, getPopupContainer, dropdownRender, onDropdownVisibleChange, ref }: SelectProps) => ReactElement;
 } & {
     Option: React.FC<import("../../types/select").OptionProps>;
 };

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

@@ -35,7 +35,56 @@ declare const Textarea: import("react").ComponentType<import("@/types/input").Te
 declare const Radio: import("react").ComponentType<import("@/types/radio").RadioProps>;
 declare const RadioButton: import("react").ComponentType<import("@/types/radio").RadioButtonProps>;
 declare const RadioGroup: import("react").ComponentType<import("@/types/radio").RadioGroupProps>;
-declare const Select: import("react").ComponentType<import("@/types/select").SelectProps>;
+declare const Select: import("react").ComponentType<import("@/types").DefaultProps & {
+    id?: string;
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    autoClearSearchValue?: boolean;
+    onSelect?: (value: import("@/types").RuleTypes, option?: import("@/types/select").OptionType) => void;
+    onDeselect?: (value: string, option?: import("@/types/select").OptionType) => void;
+    filterOption?: boolean | ((input: string, option: import("@/types/select").OptionType) => boolean);
+    optionFilterProp?: string;
+    options?: import("@/types/select").OptionType[];
+    children?: import("react").ReactNode;
+    defaultActiveFirstOption?: boolean;
+    listHeight?: number;
+    menuItemSelectedIcon?: import("react").ReactNode;
+    mode?: "default" | "multiple" | "tags";
+    value?: import("@/types").RuleTypes;
+    defaultValue?: import("@/types").RuleTypes;
+    maxCount?: number;
+    onChange?: (e: import("@/types").RuleTypes, option?: import("@/types/select").OptionType) => void;
+    onClose?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    placeholder?: string;
+    allowClear?: boolean;
+    filterable?: boolean;
+    defaultOpen?: boolean;
+    size?: "small" | "middle" | "large";
+    onClear?: () => void;
+    error?: boolean;
+    showSearch?: boolean;
+    tagRender?: ((props: import("@/types/select").CustomTagProps) => import("react").ReactElement) | undefined;
+    maxTagPlaceholder?: import("react").ReactNode | ((omittedValues: import("@/types/select").DisplayValueType[]) => import("react").ReactNode);
+    dropdownClassName?: string;
+    showArrow?: boolean;
+    onBlur?: import("react").FocusEventHandler<HTMLElement> | undefined;
+    onDropdownVisibleChange?: ((open: boolean, selected: import("@/types").RuleType) => void) | undefined;
+    showAction?: ("click" | "focus")[] | undefined;
+    suffixIcon?: import("react").ReactNode;
+    searchIcon?: import("react").ReactNode;
+    open?: boolean;
+    notFoundContent?: import("react").ReactNode;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    dropdownRender?: (menu: import("react").ReactNode) => import("react").ReactNode;
+    feedbackIcons?: boolean;
+    placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+    removeIcon?: import("react").ReactNode;
+    maxTagCount?: number | "responsive";
+    ref?: import("react").ForwardedRef<HTMLDivElement>;
+    closeFromParent?: boolean;
+}>;
 declare const Option: import("react").ComponentType<import("@/types/select").OptionProps>;
 declare const Tag: import("react").ComponentType<import("@/types/select").CustomTagProps>;
 declare const Skeleton: import("react").ComponentType<import("./types/skeleton").SkeletonProps>;

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

@@ -101,6 +101,7 @@ export interface 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;
@@ -108,6 +109,7 @@ export interface FormInstance {
     setFieldInstance: (fieldName: string, fieldRef: FieldInstancesRef | null) => void;
     setScrollToFirstError: (value: boolean) => void;
     scrollToFirstError?: boolean;
+    isReseting: boolean;
     setOnFieldsChange?: (onFieldsChange?: (changedFields: FieldData[]) => void) => void;
     setOnFinish?: (onFinish?: ((values: Record<string, RuleTypes>) => void) | undefined) => void;
     setOnValuesChange?: (onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void) => void;

package/dist/index.d.ts

@@ -139,7 +139,56 @@ declare const Textarea: react.ComponentType<__types_input.TextareaProps>;
 declare const Radio: react.ComponentType<__types_radio.RadioProps>;
 declare const RadioButton: react.ComponentType<__types_radio.RadioButtonProps>;
 declare const RadioGroup: react.ComponentType<__types_radio.RadioGroupProps>;
-declare const Select: react.ComponentType<__types_select.SelectProps>;
+declare const Select: react.ComponentType<__types.DefaultProps & {
+    id?: string;
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    autoClearSearchValue?: boolean;
+    onSelect?: (value: __types.RuleTypes, option?: __types_select.OptionType) => void;
+    onDeselect?: (value: string, option?: __types_select.OptionType) => void;
+    filterOption?: boolean | ((input: string, option: __types_select.OptionType) => boolean);
+    optionFilterProp?: string;
+    options?: __types_select.OptionType[];
+    children?: react.ReactNode;
+    defaultActiveFirstOption?: boolean;
+    listHeight?: number;
+    menuItemSelectedIcon?: react.ReactNode;
+    mode?: "default" | "multiple" | "tags";
+    value?: __types.RuleTypes;
+    defaultValue?: __types.RuleTypes;
+    maxCount?: number;
+    onChange?: (e: __types.RuleTypes, option?: __types_select.OptionType) => void;
+    onClose?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    placeholder?: string;
+    allowClear?: boolean;
+    filterable?: boolean;
+    defaultOpen?: boolean;
+    size?: "small" | "middle" | "large";
+    onClear?: () => void;
+    error?: boolean;
+    showSearch?: boolean;
+    tagRender?: ((props: __types_select.CustomTagProps) => react.ReactElement) | undefined;
+    maxTagPlaceholder?: react.ReactNode | ((omittedValues: __types_select.DisplayValueType[]) => react.ReactNode);
+    dropdownClassName?: string;
+    showArrow?: boolean;
+    onBlur?: react.FocusEventHandler<HTMLElement> | undefined;
+    onDropdownVisibleChange?: ((open: boolean, selected: __types.RuleType) => void) | undefined;
+    showAction?: ("click" | "focus")[] | undefined;
+    suffixIcon?: react.ReactNode;
+    searchIcon?: react.ReactNode;
+    open?: boolean;
+    notFoundContent?: react.ReactNode;
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    dropdownRender?: (menu: react.ReactNode) => react.ReactNode;
+    feedbackIcons?: boolean;
+    placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+    removeIcon?: react.ReactNode;
+    maxTagCount?: number | "responsive";
+    ref?: react.ForwardedRef<HTMLDivElement>;
+    closeFromParent?: boolean;
+}>;
 declare const Option: react.ComponentType<__types_select.OptionProps>;
 declare const Tag: react.ComponentType<__types_select.CustomTagProps>;
 declare const Skeleton: react.ComponentType<SkeletonProps>;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import require$$1 from 'react/jsx-runtime';
-import React, { useRef, Children, isValidElement, Fragment, Suspense, memo, useContext, useState, useMemo, useEffect, createContext, useCallback, useImperativeHandle, useLayoutEffect } from 'react';
+import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, memo, useContext, useMemo, useEffect, useCallback, createContext, useImperativeHandle, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -618,10 +618,11 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     ...initialValues
   });
   const fieldInstancesRef = useRef({});
-  // const [isReseting, setIsReseting] = useState(false);
+  const [isReseting, setIsReseting] = useState(false);
   const errorsRef = useRef({});
   const fieldSubscribers = useRef({});
   const formSubscribers = useRef([]);
+  const errorSubscribers = useRef({});
   function getFormFields() {
     return Object.assign({}, ...Object.values(formRef.current));
   }
@@ -765,6 +766,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
       [name]: fieldErrors
     };
     warningsRef.current[name] = fieldWarnings;
+    errorSubscribers.current[name]?.forEach(callback => callback(fieldErrors));
     return fieldErrors.length === 0;
   }
   async function validateFields(nameList) {
@@ -793,6 +795,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
           [name]: []
         };
         setFieldValue(name, initialValues[name], undefined, showError);
+        errorSubscribers.current[name]?.forEach(callback => callback([]));
       });
     } else {
       touchedFieldsRef.current.clear();
@@ -801,10 +804,11 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
         ...formData
       }).forEach(name => {
         setFieldValue(name, initialValues[name], undefined, showError);
+        errorSubscribers.current[name]?.forEach(callback => callback([]));
       });
     }
     formSubscribers.current.forEach(callback => callback(getFieldsValue()));
-    // setIsReseting(prev => !prev);
+    setIsReseting(prev => !prev);
   }
   async function submit() {
     const formData = getFormFields();
@@ -836,6 +840,16 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
       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;
   }
@@ -872,6 +886,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     isFieldValidating,
     subscribeToField,
     subscribeToForm,
+    subscribeToFieldError,
     onFieldsChange,
     onValuesChange,
     getFieldInstance,
@@ -879,7 +894,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     subscribeToFields,
     setScrollToFirstError,
     scrollToFirstError,
-    // isReseting,
+    isReseting,
     setOnFinish,
     setOnFieldsChange,
     setOnValuesChange,
@@ -986,17 +1001,19 @@ const FormItem$1 = /*#__PURE__*/memo(({
 }) => {
   const formContext = useContext(FormContext);
   const errorRef = useRef(null);
-  const [errorMessage, setErrorMessage] = useState('');
   const fieldRef = useRef(null);
   if (!formContext) {
     throw new Error('FormItem must be used within a Form');
   }
   const {
-    // isReseting,
+    isReseting,
     registerField,
     getFieldInstance,
-    setFieldInstance
+    setFieldInstance,
+    getFieldError,
+    subscribeToFieldError
   } = formContext;
+  const [errors, setErrors] = useState(getFieldError(name)?.[0]);
   const childrenList = useMemo(() => flattenChildren(children), [children]);
   useEffect(() => {
     if (name && !getFieldInstance(name)) {
@@ -1007,6 +1024,14 @@ const FormItem$1 = /*#__PURE__*/memo(({
     setFieldInstance(name, fieldRef.current);
   }, [name, fieldRef.current]);
   useEffect(() => () => registerField(name, undefined, true), [name]);
+  useEffect(() => {
+    const unsubscribe = subscribeToFieldError(name, errors => {
+      setErrors(errors?.[0]);
+    });
+    return () => {
+      unsubscribe?.();
+    };
+  }, [name]);
   const isRequired = useMemo(() => rules.some(rule => rule.required), [rules]);
   return /*#__PURE__*/React.createElement("div", {
     style: style,
@@ -1024,19 +1049,20 @@ const FormItem$1 = /*#__PURE__*/memo(({
   }, "*")), Children.map(childrenList, (child, key) => {
     if (/*#__PURE__*/isValidElement(child)) {
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormItemChildComponent, _extends({}, props, {
-        // key={`${key}_${isReseting}`}
+        key: `${key}_${name}_${isReseting}`
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
+        ,
         ref: fieldRef,
         name: name,
         child: child,
-        error: !!errorMessage
+        error: !!errors
       })), 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`]: errorMessage?.length
+          [`${prefixCls}-has-error`]: errors?.length
         }]),
         style: {
           ...(removeErrorMessageHeight ? {
@@ -1046,7 +1072,7 @@ const FormItem$1 = /*#__PURE__*/memo(({
             marginBottom: 0
           } : {})
         }
-      }, errorMessage || ''));
+      }, errors || ''));
     }
     return child;
   }));
@@ -1063,12 +1089,13 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
   ...props
 }) => {
   const formContext = useContext(FormContext);
+  const _formFieldValue = useWatch({
+    name
+  });
   const [wasNormalize, setWasNormalize] = useState(false);
   const {
     getFieldsValue,
-    getFieldValue,
     setFieldValue,
-    subscribeToField,
     subscribeToFields,
     validateFields
   } = formContext || {};
@@ -1078,18 +1105,12 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
     onChange,
     value
   } = child.props;
-  const [fieldValue, _setFieldValue] = useState(value ?? getFieldValue?.(name) ?? initialValue);
+  const fieldValue = useMemo(() => value ?? _formFieldValue ?? initialValue, [value, _formFieldValue, initialValue]);
   useEffect(() => {
     if (initialValue) {
       setFieldValue?.(name, initialValue);
     }
-    const unsubscribe = subscribeToField?.(name, value => {
-      _setFieldValue(value);
-    });
-    return () => {
-      unsubscribe?.();
-    };
-  }, []);
+  }, [name]);
   useEffect(() => {
     if (name && dependencies.length > 0) {
       const unsubscribe = subscribeToFields?.(dependencies, () => {
@@ -1119,7 +1140,7 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
     setFieldValue?.(name, rawValue, undefined, undefined, true);
     onChange?.(e, option);
   };
-  const injectPropsIntoFinalLeaf = child => {
+  const injectPropsIntoFinalLeaf = useCallback(child => {
     if (! /*#__PURE__*/isValidElement(child)) {
       return child;
     }
@@ -1150,7 +1171,7 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
         error
       } : {})
     }));
-  };
+  }, [name, fieldValue, wasNormalize, error, handleChange, props, ref]);
   return injectPropsIntoFinalLeaf(child);
 });
 FormItem$1.displayName = 'FormItem';
@@ -1179,7 +1200,7 @@ const Form$1 = ({
   const internalForm = useForm(initialValues, onFieldsChange, onValuesChange);
   const formRef = useRef(null);
   const formInstance = useMemo(() => form || internalForm, [form, internalForm]);
-  const handleSubmit = async e => {
+  const handleSubmit = useCallback(async e => {
     e.preventDefault();
     if (await formInstance.validateFields()) {
       onFinish?.(formInstance.getFieldsValue());
@@ -1190,7 +1211,7 @@ const Form$1 = ({
         errorFields
       });
     }
-  };
+  }, [formInstance, onFinish, onFinishFailed]);
   const childrenList = useMemo(() => flattenChildren(children), [children]);
   const formClassName = useMemo(() => `${prefixCls} ${className}`.trim(), [prefixCls, className]);
   useEffect(() => {
@@ -1225,17 +1246,7 @@ const Form$1 = ({
       layout: childProps.layout || layout
     }));
   }, [rest.size, layout]);
-  console.info({
-    children,
-    form,
-    style,
-    prefixCls,
-    className,
-    initialValues,
-    layout,
-    scrollToFirstError,
-    ...rest
-  });
+  const injectedChildren = useMemo(() => Children.map(childrenList, child => injectPropsIntoFinalLeaf(child)), [childrenList, injectPropsIntoFinalLeaf]);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: formInstance
   }, /*#__PURE__*/React.createElement("form", {
@@ -1243,14 +1254,15 @@ const Form$1 = ({
     ref: formRef,
     onSubmit: handleSubmit,
     className: formClassName
-  }, Children.map(childrenList, child => injectPropsIntoFinalLeaf(child))));
+  }, injectedChildren));
 };
-Form$1.Item = FormItem$1;
+Form$1.Item = /*#__PURE__*/memo(FormItem$1);
+var Form$2 = /*#__PURE__*/memo(Form$1);
 
-var Form$2 = /*#__PURE__*/Object.freeze({
+var Form$3 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
 	FormContext: FormContext,
-	default: Form$1
+	default: Form$2
 });
 
 const useWatch = ({
@@ -1302,7 +1314,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$2; }), {
+const Form = dynamic$1(() => Promise.resolve().then(function () { return Form$3; }), {
   ssr: false
 });
 const FormItem = dynamic$1(() => Promise.resolve().then(function () { return Item; }), {
@@ -1348,7 +1360,7 @@ const SkeletonInput$1 = dynamic$1(() => Promise.resolve().then(function () { ret
   ssr: false
 });
 
-var css_248z$k = ".xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}.xUi-button,.xUi-button-content,.xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}.xUi-button-icon{line-height:0;margin-right:.5em}.xUi-button-icon:last-child{margin-left:.5em;margin-right:0}.xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}.xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}.xUi-button-size-large{font-size:16px;height:44px;padding:8px 20px}.xUi-button-circle{border-radius:50%;justify-content:center;padding:0}.xUi-button-circle.xUi-button-size-small{height:24px;width:24px}.xUi-button-circle.xUi-button-size-large{height:44px;width:44px}.xUi-button-round{border-radius:9999px}.xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}.xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}.xUi-button-primary:hover{background-color:var(--xui-color-hover);border-color:var(--xui-color-hover);color:#fff}.xUi-button-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}.xUi-button-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}.xUi-button-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}.xUi-button-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}.xUi-button-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}.xUi-button-outlined{color:#fff}.xUi-button-filled,.xUi-button-outlined{background-color:transparent;border-color:var(--xui-border-color)}.xUi-button-filled{color:var(--xui-text-color)}.xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}.xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}.xUi-button-ghost{opacity:0}.xUi-button-ghost:hover{opacity:1}.xUi-button-block{display:flex;width:100%}.xUi-button-disabled,.xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}.xUi-button-loading{background-color:transparent}";
+var css_248z$k = ".xUi-button{border:1px solid transparent;border-radius:6px;cursor:pointer;font-weight:400;line-height:1.5715;transition:all .3s ease;user-select:none;vertical-align:middle;white-space:nowrap}.xUi-button,.xUi-button-content,.xUi-button-icon{align-items:center;display:inline-flex;justify-content:center}.xUi-button-icon{line-height:0;margin-right:.5em}.xUi-button-icon:last-child{margin-left:.5em;margin-right:0}.xUi-button-spinner{animation:xUi-spin 1s linear infinite;border:1px solid transparent;border-radius:50%;border-top:1px solid var(--xui-text-color);height:1em;width:1em}@keyframes xUi-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.xUi-button-size-small{font-size:12px;height:24px;padding:4px 12px}.xUi-button-size-middle{font-size:14px;height:32px;padding:0 16px}.xUi-button-size-large{font-size:16px;height:44px;padding:8px 20px}.xUi-button-shape-circle{border-radius:50%;justify-content:center;padding:0}.xUi-button-shape-circle.xUi-button-size-small{height:24px;width:24px}.xUi-button-shape-circle.xUi-button-size-large{height:44px;width:44px}.xUi-button-shape-round{border-radius:9999px}.xUi-button-default{background-color:#fff;border-color:var(--xui-border-color);color:rgba(0,0,0,.85)}.xUi-button-default:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-primary{background-color:var(--xui-primary-color);border-color:var(--xui-primary-color);color:#fff}.xUi-button-primary:hover{background-color:var(--xui-primary-color-hover);border-color:var(--xui-primary-color-hover);color:#fff}.xUi-button-variant-dashed{background-color:#fff;border-color:var(--xui-border-color);border-style:dashed;color:rgba(0,0,0,.85)}.xUi-button-variant-dashed:hover{border-color:var(--xui-primary-color);color:var(--xui-primary-color)}.xUi-button-variant-text{background-color:transparent;border-color:transparent!important;color:rgba(0,0,0,.88)}.xUi-button-variant-text:hover{background-color:rgba(0,0,0,.04);border-color:transparent;color:rgba(0,0,0,.88)}.xUi-button-variant-link{background-color:transparent;border-color:transparent!important;color:var(--xui-primary-color)}.xUi-button-variant-link:hover{border-color:transparent;color:var(--xui-primary-color-light)}.xUi-button-variant-outlined{color:#fff}.xUi-button-variant-filled,.xUi-button-variant-outlined{background-color:transparent;border-color:var(--xui-border-color)}.xUi-button-variant-filled{color:var(--xui-text-color)}.xUi-button-danger{background-color:transparent;border-color:var(--xui-error-color);color:var(--xui-error-color)}.xUi-button-danger:hover{border-color:var(--xui-error-color-light);color:var(--xui-error-color-light)}.xUi-button-ghost{opacity:0}.xUi-button-ghost:hover{opacity:1}.xUi-button-block{display:flex;width:100%}.xUi-button-disabled,.xUi-button-loading{background-color:var(--xui-color-disabled);border-color:var(--xui-border-color);color:var(--xui-text-color);cursor:not-allowed;opacity:.5;pointer-events:none}.xUi-button-loading{background-color:transparent}";
 styleInject(css_248z$k);
 
 const ButtonComponent = ({
@@ -1392,7 +1404,7 @@ const ButtonComponent = ({
     }
   }, [loading]);
   const classes = useMemo(() => {
-    return clsx([...new Set([prefixCls, rootClassName, `${prefixCls}-${type}`, `${prefixCls}-${variant}`, `${prefixCls}-${color}`, `${prefixCls}-${shape}`, `${prefixCls}-size-${size}`, {
+    return clsx([...new Set([prefixCls, rootClassName, `${prefixCls}-${type}`, `${prefixCls}-variant-${variant}`, `${prefixCls}-color-${color}`, `${prefixCls}-shape-${shape}`, `${prefixCls}-size-${size}`, {
       [`${prefixCls}-block`]: block,
       [`${prefixCls}-ghost`]: ghost,
       [`${prefixCls}-danger`]: danger,
@@ -3326,7 +3338,7 @@ function getTextFromNode(node) {
   }
   return '';
 }
-const SelectComponent = ({
+const SelectComponent = /*#__PURE__*/memo(({
   prefixCls = prefixClsSelect,
   id,
   searchValue = '',
@@ -3628,11 +3640,7 @@ const SelectComponent = ({
       isOpen: isOpen
     }));
   }, [showArrow, showSearch, isOpen, suffixIcon, searchIcon]);
-  const extractedOptions = children ? extractOptions(children) : Array.isArray(options) ? options : [];
-  const triggerNode = useMemo(() => {
-    return selectRef.current?.querySelector(`.${prefixCls}-trigger`);
-  }, [prefixCls]);
-  function extractOptions(children, options) {
+  const extractOptions = useCallback((children, options) => {
     const result = [];
     const flatten = nodes => {
       try {
@@ -3656,7 +3664,13 @@ const SelectComponent = ({
       return result;
     }
     return options || [];
-  }
+  }, []);
+  const extractedOptions = useMemo(() => {
+    return children ? extractOptions(children) : Array.isArray(options) ? options : [];
+  }, [children, options]);
+  const triggerNode = useMemo(() => {
+    return selectRef.current?.querySelector(`.${prefixCls}-trigger`);
+  }, [prefixCls]);
   const filteredOptions = extractedOptions.filter(option => {
     if (typeof filterOption === 'function') {
       return filterOption(searchQuery, option);
@@ -3891,7 +3905,7 @@ const SelectComponent = ({
   }, ArrowContainer, error && feedbackIcons ? /*#__PURE__*/React.createElement(ErrorIcon, null) : null), loading && /*#__PURE__*/React.createElement("span", {
     className: `${prefixCls}-loading`
   }, /*#__PURE__*/React.createElement(LoadingIcon, null)))), getPopupContainer?.(triggerNode) ? /*#__PURE__*/createPortal(dropdownContent, getPopupContainer(triggerNode)) : dropdownContent);
-};
+});
 SelectComponent.displayName = 'Select';
 const Select = Object.assign(SelectComponent, {
   Option