x-ui-design 0.6.51 → 0.6.52

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

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

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

@@ -14,56 +14,7 @@ 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").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 Select: import("react").ComponentType<import("@/types/select").SelectProps>;
 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

@@ -2,8 +2,6 @@ import * as react from 'react';
 import { CSSProperties, ReactNode } from 'react';
 import * as __types_select from '@/types/select';
 export { CustomTagProps, DisplayValueType, OptionProps, OptionType, SelectProps, TagProps } from '@/types/select';
-import * as __types from '@/types';
-export { DefaultProps, MouseEventHandlerSelect, RuleType, RuleTypes, SyntheticBaseEvent, TargetProps } from '@/types';
 import * as __types_radio from '@/types/radio';
 export { RadioButtonProps, RadioGroupProps, RadioProps } from '@/types/radio';
 import * as __types_input from '@/types/input';
@@ -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';
@@ -118,56 +117,7 @@ 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.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 Select: react.ComponentType<__types_select.SelectProps>;
 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, useEffect, useContext, useMemo, createContext, useImperativeHandle, memo, useCallback, useLayoutEffect } from 'react';
+import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useEffect, useContext, useMemo, useCallback, createContext, useImperativeHandle, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -877,6 +877,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
       formRef.current[stepRef.current] = {};
     }
   }
+  const formInstanceRef = useRef(null);
   const formInstance = {
     submit,
     setFields,
@@ -910,7 +911,12 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
     setOnValuesChange,
     changeStep
   };
-  return formInstance;
+  if (formInstanceRef.current) {
+    return formInstanceRef.current;
+  } else {
+    formInstanceRef.current = formInstance;
+    return formInstanceRef.current;
+  }
 };
 
 function _extends() {
@@ -1069,6 +1075,7 @@ const FormItem$1 = ({
     }
   }, [dependencies, name]);
   const isRequired = useMemo(() => rules.some(rule => rule.required), [rules]);
+  console.log(name);
   return /*#__PURE__*/React.createElement("div", {
     style: style,
     "data-instance": name,
@@ -1177,6 +1184,10 @@ const FormItemChildComponent = ({
     if (isWrapper) {
       return /*#__PURE__*/React.createElement(child.type, childProps, Children.map(flattenChildren(childProps.children), injectPropsIntoFinalLeaf));
     }
+    const _onChange = useCallback((e, option) => {
+      handleChange(e);
+      childProps?.onChange?.(e, option);
+    }, [handleChange, childProps?.onChange]);
     if (childProps?.__injected) {
       return child;
     }
@@ -1187,10 +1198,7 @@ const FormItemChildComponent = ({
     }, child.props, {
       name: name,
       child: child,
-      onChange: (e, option) => {
-        handleChange(e);
-        childProps?.onChange?.(e, option);
-      },
+      onChange: _onChange,
       key: `${name}_${wasNormalize}`,
       value: fieldValue ?? props.value
     }, 'dangerouslySetInnerHTML' in childProps ? {} : {
@@ -1233,12 +1241,12 @@ const Form$1 = ({
   });
   const formRef = useRef(null);
   const formInstance = useMemo(() => form || internalForm, [form, internalForm]);
-  const handleSubmit = async e => {
+  const childrenList = useMemo(() => flattenChildren(children), [children]);
+  const handleSubmit = useCallback(async e => {
     e.preventDefault();
     e.stopPropagation();
     await formInstance.submit();
-  };
-  const childrenList = useMemo(() => flattenChildren(children), [children]);
+  }, []);
   useEffect(() => {
     if (onFinish) {
       formInstance.setOnFinish?.(onFinish);
@@ -1256,7 +1264,7 @@ const Form$1 = ({
       formInstance.setScrollToFirstError(scrollToFirstError);
     }
   }, [formInstance, onFieldsChange, onValuesChange, onFinishFailed, onFinish, scrollToFirstError]);
-  const injectPropsIntoFinalLeaf = child => {
+  const injectPropsIntoFinalLeaf = useCallback(child => {
     if (! /*#__PURE__*/isValidElement(child)) {
       return child;
     }
@@ -1273,7 +1281,7 @@ const Form$1 = ({
       size: childProps.size || rest.size,
       layout: childProps.layout || layout
     }));
-  };
+  }, [rest.size, layout]);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
     value: formInstance
   }, /*#__PURE__*/React.createElement("form", {
@@ -1281,7 +1289,7 @@ const Form$1 = ({
     ref: formRef,
     onSubmit: handleSubmit,
     className: `${prefixCls} ${className}`
-  }, Children.map(childrenList, child => injectPropsIntoFinalLeaf(child))));
+  }, Children.map(childrenList, injectPropsIntoFinalLeaf)));
 };
 Form$1.Item = FormItem$1;
 
@@ -1361,7 +1369,7 @@ const RadioButton$1 = dynamic$1(() => Promise.resolve().then(function () { retur
 const RadioGroup$1 = dynamic$1(() => Promise.resolve().then(function () { return Group; }), {
   ssr: false
 });
-const Select$3 = dynamic$1(() => Promise.resolve().then(function () { return Select$2; }), {
+const Select$2 = dynamic$1(() => Promise.resolve().then(function () { return Select$1; }), {
   ssr: false
 });
 const Option$2 = dynamic$1(() => Promise.resolve().then(function () { return Option$1; }), {
@@ -3364,7 +3372,7 @@ function getTextFromNode(node) {
   }
   return '';
 }
-const SelectComponent = ({
+const Select = ({
   prefixCls = prefixClsSelect,
   id,
   searchValue = '',
@@ -3443,8 +3451,8 @@ const SelectComponent = ({
     selectRef.current?.scrollTo(...args),
     nativeElement: selectRef.current
   }), []);
-  const handleMouseEnter = () => !disabled && selected?.length && setIsHover(true);
-  const handleMouseLeave = () => !disabled && setIsHover(false);
+  const handleMouseEnter = useCallback(() => !disabled && selected?.length && setIsHover(true), [disabled, selected?.length]);
+  const handleMouseLeave = useCallback(() => !disabled && setIsHover(false), [disabled]);
   const handleClearInputValue = useCallback(() => {
     if (!autoClearSearchValue) {
       return;
@@ -3461,7 +3469,7 @@ const SelectComponent = ({
   useEffect(() => {
     setSelected(hasMode ? checkModeInitialValue : initialValue);
   }, [checkModeInitialValue, hasMode, initialValue]);
-  const handleClickOutside = event => {
+  const handleClickOutside = useCallback(event => {
     if (!selectRef.current) return;
     const dropdown = document.querySelector(`.${prefixCls}-dropdown`);
     const clickedInside = selectRef.current.contains(event?.target) || dropdown && dropdown.contains(event?.target);
@@ -3472,7 +3480,7 @@ const SelectComponent = ({
       onClose?.();
       onDropdownVisibleChange?.(false, selected);
     }
-  };
+  }, [selectRef.current, prefixCls, selected]);
   useEffect(() => {
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
@@ -3556,7 +3564,7 @@ const SelectComponent = ({
   useEffect(() => {
     updateDropdownPosition(true);
   }, [searchQuery.length]);
-  const getScrollParents = element => {
+  const getScrollParents = useCallback(element => {
     const parents = [];
     let current = element.parentElement;
     while (current) {
@@ -3566,7 +3574,7 @@ const SelectComponent = ({
       current = current.parentElement;
     }
     return parents;
-  };
+  }, []);
   const handleSearch = e => {
     setSearchQuery(e.target.value);
     onSearch?.(e.target.value);
@@ -3695,7 +3703,7 @@ const SelectComponent = ({
   }, []);
   const extractedOptions = useMemo(() => {
     return children ? extractOptions(children) : Array.isArray(options) ? options : [];
-  }, [children, children]);
+  }, [children, options]);
   const triggerNode = useMemo(() => {
     return selectRef.current?.querySelector(`.${prefixCls}-trigger`);
   }, [prefixCls]);
@@ -3934,15 +3942,11 @@ const SelectComponent = ({
     }, menuItemSelectedIcon === true ? /*#__PURE__*/React.createElement(CheckIcon, null) : menuItemSelectedIcon));
   }) : !asTag ? notFoundContent || /*#__PURE__*/React.createElement(EmptyContent, null) : null)))));
 };
-SelectComponent.displayName = 'Select';
-const Select = Object.assign(SelectComponent, {
-  Option
-});
-var Select$1 = /*#__PURE__*/memo(Select);
+Select.displayName = 'Select';
 
-var Select$2 = /*#__PURE__*/Object.freeze({
+var Select$1 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	default: Select$1
+	default: Select
 });
 
 var css_248z$4 = "@keyframes xUi-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.xUi-skeleton-element{display:inline-block!important;width:auto!important}.xUi-skeleton-button{background:hsla(0,0%,75%,.2);border-radius:4px;display:inline-block;height:32px;line-height:32px;min-width:64px;vertical-align:top;width:64px}.xUi-skeleton-button-sm{height:24px;line-height:24px;min-width:48px;width:48px}.xUi-skeleton-button-lg{height:44px;line-height:44px;min-width:80px;width:80px}.xUi-skeleton-active .xUi-skeleton-button{animation:xUi-skeleton-loading 1.4s ease infinite;background:linear-gradient(90deg,hsla(0,0%,75%,.2) 25%,hsla(0,0%,51%,.24) 37%,hsla(0,0%,75%,.2) 63%);background-size:400% 100%}";
@@ -4166,5 +4170,5 @@ var Skeleton$1 = /*#__PURE__*/Object.freeze({
 	default: Skeleton
 });
 
-export { ArrowIcon, Button$3 as Button, CalendarIcon, CheckIcon, Checkbox$2 as Checkbox, ClearIcon, DateDistanceIcon, DatePicker$2 as DatePicker, Empty$1 as Empty, ErrorIcon, Form, FormContext, FormItem, Input$3 as Input, LoadingIcon, Option$2 as Option, Radio$2 as Radio, RadioButton$1 as RadioButton, RadioGroup$1 as RadioGroup, RangePicker$2 as RangePicker, SearchIcon, Select$3 as Select, Skeleton$2 as Skeleton, SkeletonAvatar$1 as SkeletonAvatar, SkeletonButton$1 as SkeletonButton, SkeletonImage$1 as SkeletonImage, SkeletonInput$1 as SkeletonInput, SpinerIcon, StampleIcon, SuccessIcon, Switch$2 as Switch, Tag$2 as Tag, Textarea$2 as Textarea, TimeIcon, TimePicker$2 as TimePicker, TrashIcon, Upload$2 as Upload, clsx, createArray, flattenChildren, parseValue, useForm, useWatch };
+export { ArrowIcon, Button$3 as Button, CalendarIcon, CheckIcon, Checkbox$2 as Checkbox, ClearIcon, DateDistanceIcon, DatePicker$2 as DatePicker, Empty$1 as Empty, ErrorIcon, Form, FormContext, FormItem, Input$3 as Input, LoadingIcon, Option$2 as Option, Radio$2 as Radio, RadioButton$1 as RadioButton, RadioGroup$1 as RadioGroup, RangePicker$2 as RangePicker, SearchIcon, Select$2 as Select, Skeleton$2 as Skeleton, SkeletonAvatar$1 as SkeletonAvatar, SkeletonButton$1 as SkeletonButton, SkeletonImage$1 as SkeletonImage, SkeletonInput$1 as SkeletonInput, SpinerIcon, StampleIcon, SuccessIcon, Switch$2 as Switch, Tag$2 as Tag, Textarea$2 as Textarea, TimeIcon, TimePicker$2 as TimePicker, TrashIcon, Upload$2 as Upload, clsx, createArray, flattenChildren, parseValue, useForm, useWatch };
 //# sourceMappingURL=index.esm.js.map