x-ui-design 0.6.33 → 0.6.34

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

@@ -1,10 +1,8 @@
 import React, { ReactElement } from 'react';
 import { SelectProps } from '../../types/select';
 import './style.css';
-declare const Select: {
+declare const _default: React.MemoExoticComponent<{
     ({ 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;
-} & {
-    Option: React.FC<import("../../types/select").OptionProps>;
-};
-export default Select;
+}>;
+export default _default;

package/dist/esm/types/hooks/useForm.d.ts

@@ -1,6 +1,6 @@
 import { RuleTypes } from '../types';
 import type { FieldData, FieldError, FormInstance } from '../types/form';
-declare const useForm: ({ initialValues, onFieldsChange, onValuesChange, scrollToFirstError, onFinish, onFinishFailed }: {
+type TUseForm = {
     initialValues?: Record<string, RuleTypes>;
     onFieldsChange?: (changedFields: FieldData[]) => void;
     onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void;
@@ -8,7 +8,8 @@ declare const useForm: ({ initialValues, onFieldsChange, onValuesChange, scrollT
     onFinish?: ((values: Record<string, RuleTypes>) => void) | undefined;
     onFinishFailed?: (errorInfo: {
         values: Record<string, RuleTypes>;
-        errorFields: Pick<FieldError, "errors" | "name">[];
+        errorFields: Pick<FieldError, 'errors' | 'name'>[];
     }) => void;
-}) => FormInstance;
+};
+declare const useForm: ({ initialValues, onFieldsChange, onValuesChange, scrollToFirstError, onFinish, onFinishFailed }: TUseForm) => FormInstance;
 export { useForm };

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/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, useState, Children, isValidElement, Fragment, Suspense, memo, useContext, useMemo, useEffect, useCallback, createContext, useImperativeHandle, useLayoutEffect } from 'react';
+import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, memo, useContext, useMemo, useEffect, createContext, useCallback, useImperativeHandle, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -886,40 +886,44 @@ const useForm = ({
       formRef.current[stepRef.current] = {};
     }
   }
+  const formInstanceRef = useRef(null);
   const formInstance = {
-    submit,
     setFields,
-    resetFields,
-    getFieldError,
-    registerField,
+    setOnFinish,
     setFieldValue,
-    getFieldValue,
-    validateFields,
     setFieldsValue,
+    setFieldInstance,
+    setOnFieldsChange,
+    setOnValuesChange,
+    setOnFinishFailed,
+    setScrollToFirstError,
     getFieldsValue,
-    isFieldTouched,
+    getFieldError,
+    getFieldValue,
     getFieldsError,
-    isFieldsTouched,
     getFieldWarning,
+    getFieldInstance,
+    isFieldTouched,
+    isFieldsTouched,
     isFieldValidating,
     subscribeToField,
     subscribeToForm,
     subscribeToFieldError,
+    subscribeToFields,
     onFieldsChange,
     onValuesChange,
-    getFieldInstance,
-    setFieldInstance,
-    subscribeToFields,
-    setScrollToFirstError,
+    submit,
+    resetFields,
+    registerField,
+    validateFields,
+    changeStep,
     scrollToFirstError,
-    isReseting,
-    setOnFinish,
-    setOnFieldsChange,
-    setOnValuesChange,
-    setOnFinishFailed,
-    changeStep
+    isReseting
   };
-  return formInstance;
+  if (!formInstanceRef.current) {
+    formInstanceRef.current = formInstance;
+  }
+  return formInstanceRef.current;
 };
 
 function _extends() {
@@ -1140,7 +1144,7 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
       };
     }
   }, [dependencies, name]);
-  const handleChange = (e, option) => {
+  const handleChange = e => {
     let rawValue = e?.target ? e.target.value : e;
     if (normalize) {
       const prevValue = fieldValue;
@@ -1157,9 +1161,8 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
       }
     }
     setFieldValue?.(name, rawValue, undefined, undefined, true);
-    onChange?.(e, option);
   };
-  const injectPropsIntoFinalLeaf = useCallback(child => {
+  const injectPropsIntoFinalLeaf = child => {
     if (! /*#__PURE__*/isValidElement(child)) {
       return child;
     }
@@ -1174,15 +1177,16 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
     return /*#__PURE__*/React.createElement(child.type, _extends({}, props, {
       ref: ref,
       name: name
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-    }, child.props, {
+    }, childProps, {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       size: childProps.size || props.size,
       child: child,
       value: fieldValue,
-      onChange: handleChange,
+      onChange: (e, option) => {
+        handleChange?.(e);
+        childProps.onChange?.(e, option);
+      },
       key: `${name}_${wasNormalize}`
     }, 'dangerouslySetInnerHTML' in childProps ? {} : {
       __injected: true,
@@ -1190,7 +1194,7 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
         error
       } : {})
     }));
-  }, [name, fieldValue, wasNormalize, error, handleChange, props, ref]);
+  };
   return injectPropsIntoFinalLeaf(child);
 });
 FormItem$1.displayName = 'FormItem';
@@ -1274,6 +1278,9 @@ const Form$1 = ({
     }));
   }, [rest.size, layout]);
   const injectedChildren = useMemo(() => Children.map(childrenList, child => injectPropsIntoFinalLeaf(child)), [childrenList, injectPropsIntoFinalLeaf]);
+  useEffect(() => {
+    console.log('formInstance', formInstance);
+  }, [formInstance]);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: formInstance
   }, /*#__PURE__*/React.createElement("form", {
@@ -1283,7 +1290,7 @@ const Form$1 = ({
     className: formClassName
   }, injectedChildren));
 };
-Form$1.Item = /*#__PURE__*/memo(FormItem$1);
+Form$1.Item = FormItem$1;
 var Form$2 = /*#__PURE__*/memo(Form$1);
 
 var Form$3 = /*#__PURE__*/Object.freeze({
@@ -3694,23 +3701,27 @@ const SelectComponent = ({
     }
     return options || [];
   }, []);
-  const extractedOptions = children ? extractOptions(children) : Array.isArray(options) ? 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);
-    }
-    if (filterOption === false) {
-      return true;
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    const optionFilterPropValue = option[optionFilterProp];
-    const valueToCheck = optionFilterProp && typeof optionFilterPropValue === 'string' ? String(optionFilterPropValue) : Array.isArray(option.children) && typeof option.children[0] === 'string' ? option.children[0] : getTextFromNode(option.children) || String(option.label) || String(option.value);
-    return valueToCheck.toLowerCase().includes(searchQuery.toLowerCase());
-  });
+  const filteredOptions = useMemo(() => {
+    return extractedOptions.filter(option => {
+      if (typeof filterOption === 'function') {
+        return filterOption(searchQuery, option);
+      }
+      if (filterOption === false) {
+        return true;
+      }
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      const optionFilterPropValue = option[optionFilterProp];
+      const valueToCheck = optionFilterProp && typeof optionFilterPropValue === 'string' ? String(optionFilterPropValue) : Array.isArray(option.children) && typeof option.children[0] === 'string' ? option.children[0] : getTextFromNode(option.children) || String(option.label) || String(option.value);
+      return valueToCheck.toLowerCase().includes(searchQuery.toLowerCase());
+    });
+  }, [extractedOptions, filterOption, searchQuery, optionFilterProp, getTextFromNode]);
   const handleTriggerClick = () => {
     if (!disabled) {
       setIsOpen(!isOpen);
@@ -3721,8 +3732,8 @@ const SelectComponent = ({
       setSearchInputWidth(searchContent.clientWidth - PADDING_TAG_INPUT);
     }
   };
-  const dataRender = (() => {
-    const options = filteredOptions.map(({
+  const dataRender = useMemo(() => {
+    return filteredOptions.map(({
       children,
       className = '',
       ...props
@@ -3751,8 +3762,7 @@ const SelectComponent = ({
         className: `${prefixCls}-selected-icon`
       }, menuItemSelectedIcon === true ? /*#__PURE__*/React.createElement(CheckIcon, null) : menuItemSelectedIcon));
     });
-    return options;
-  })();
+  }, [filteredOptions, hasMode, selected, maxCount, menuItemSelectedIcon]);
   const dropdownContent = !loading && open && isOpen && /*#__PURE__*/React.createElement("div", {
     className: clsx([`${prefixCls}-dropdown`, {
       [placement]: placement,
@@ -3934,9 +3944,7 @@ const SelectComponent = ({
   }, /*#__PURE__*/React.createElement(LoadingIcon, null)))), getPopupContainer?.(triggerNode) ? /*#__PURE__*/createPortal(dropdownContent, getPopupContainer(triggerNode)) : dropdownContent);
 };
 SelectComponent.displayName = 'Select';
-const Select = Object.assign(SelectComponent, {
-  Option
-});
+var Select = /*#__PURE__*/memo(SelectComponent);
 
 var Select$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,