x-ui-design 0.6.44 → 0.6.46

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

@@ -1,10 +1,10 @@
 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/index.d.ts

@@ -14,7 +14,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

@@ -2,6 +2,8 @@ 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';
@@ -19,7 +21,6 @@ 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';
@@ -117,7 +118,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, useContext, useMemo, useEffect, createContext, useImperativeHandle, useCallback, useLayoutEffect } from 'react';
+import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useContext, useMemo, useEffect, createContext, useImperativeHandle, memo, useCallback, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 
@@ -1340,7 +1340,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$2 = dynamic$1(() => Promise.resolve().then(function () { return Select$1; }), {
+const Select$3 = dynamic$1(() => Promise.resolve().then(function () { return Select$2; }), {
   ssr: false
 });
 const Option$2 = dynamic$1(() => Promise.resolve().then(function () { return Option$1; }), {
@@ -3647,11 +3647,13 @@ const SelectComponent = ({
       isOpen: isOpen
     }));
   }, [showArrow, showSearch, isOpen, suffixIcon, searchIcon]);
-  const extractedOptions = children ? extractOptions(children) : Array.isArray(options) ? options : [];
+  const extractedOptions = useMemo(() => {
+    return children ? extractOptions(children) : Array.isArray(options) ? options : [];
+  }, [children, children]);
   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 {
@@ -3675,7 +3677,7 @@ const SelectComponent = ({
       return result;
     }
     return options || [];
-  }
+  }, []);
   const filteredOptions = extractedOptions.filter(option => {
     if (typeof filterOption === 'function') {
       return filterOption(searchQuery, option);
@@ -3699,76 +3701,6 @@ const SelectComponent = ({
       setSearchInputWidth(searchContent.clientWidth - PADDING_TAG_INPUT);
     }
   };
-  const dropdownContent = !loading && open && isOpen && /*#__PURE__*/React.createElement("div", {
-    className: clsx([`${prefixCls}-dropdown`, {
-      [placement]: placement,
-      [dropdownClassName]: dropdownClassName
-    }]),
-    style: {
-      ...dropdownPosition,
-      maxHeight: dropdownRender ? 'unset' : listHeight,
-      opacity: Object.keys(dropdownPosition).length ? 1 : 0
-    }
-  }, filterable && /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    inputMode: "text",
-    className: `${prefixCls}-search`,
-    value: searchQuery,
-    onChange: handleSearch,
-    placeholder: "Search..."
-  }), !loading &&
-  /*#__PURE__*/
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  React.createElement(ConditionalWrapper, {
-    wrapper: element => {
-      return dropdownRender?.(element || /*#__PURE__*/React.createElement(React.Fragment, null, " ")) || /*#__PURE__*/React.createElement(React.Fragment, null, " ");
-    },
-    condition: !!dropdownRender
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-options`,
-    style: {
-      maxHeight: listHeight,
-      overflowY: 'auto',
-      // display: !filteredOptions.length && asTag ? 'none' : 'block',
-      maxWidth: selectRef.current ? `${selectRef.current.getBoundingClientRect().width}px` : 'inherit'
-    }
-  }, asTag && !!searchQuery && /*#__PURE__*/React.createElement(Option, {
-    value: searchQuery,
-    className: `${prefixCls}-focused`,
-    onClick: e => {
-      handleSelect(e, searchQuery);
-    },
-    "data-value": searchQuery
-  }, searchQuery), filteredOptions.length ? filteredOptions.map(({
-    children,
-    className = '',
-    ...props
-  }, index) => {
-    const isSelected = hasMode ? selected.includes(props.value) : props.value === selected;
-    return /*#__PURE__*/React.createElement(Option, _extends({
-      key: `${props.value}_${index}`
-    }, props, {
-      selected: isSelected,
-      className: clsx([className, {
-        [`${prefixCls}-focused`]: hasMode ? isSelected : props.value === selected,
-        [`${prefixCls}-disabled`]: maxCount && hasMode && !isSelected ? selected.length >= maxCount : false
-      }]),
-      onClick: e => {
-        if (props.disabled) {
-          return;
-        }
-        handleSelect(e, props.value, {
-          children,
-          className,
-          ...props
-        });
-      },
-      "data-value": props.value
-    }), children || props.label || props.value, menuItemSelectedIcon && hasMode && isSelected && /*#__PURE__*/React.createElement("span", {
-      className: `${prefixCls}-selected-icon`
-    }, menuItemSelectedIcon === true ? /*#__PURE__*/React.createElement(CheckIcon, null) : menuItemSelectedIcon));
-  }) : !asTag ? notFoundContent || /*#__PURE__*/React.createElement(EmptyContent, null) : null)));
   const selectedOption = (() => {
     const option = extractedOptions.find(e => e.value === selected || e.label === selected || e.children === selected) || selected;
     return option?.children || option?.label || option?.value || null;
@@ -3905,16 +3837,89 @@ const SelectComponent = ({
     className: `${prefixCls}-arrow`
   }, 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);
+  }, /*#__PURE__*/React.createElement(LoadingIcon, null)))), /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: getPopupContainer !== undefined,
+    wrapper: element => getPopupContainer ? /*#__PURE__*/createPortal(element, getPopupContainer(triggerNode)) : /*#__PURE__*/React.createElement(React.Fragment, null, element)
+  }, !loading && open && isOpen && /*#__PURE__*/React.createElement("div", {
+    className: clsx([`${prefixCls}-dropdown`, {
+      [placement]: placement,
+      [dropdownClassName]: dropdownClassName
+    }]),
+    style: {
+      ...dropdownPosition,
+      maxHeight: dropdownRender ? 'unset' : listHeight,
+      opacity: Object.keys(dropdownPosition).length ? 1 : 0
+    }
+  }, filterable && /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    inputMode: "text",
+    className: `${prefixCls}-search`,
+    value: searchQuery,
+    onChange: handleSearch,
+    placeholder: "Search..."
+  }), !loading &&
+  /*#__PURE__*/
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  React.createElement(ConditionalWrapper, {
+    wrapper: element => {
+      return dropdownRender?.(element || /*#__PURE__*/React.createElement(React.Fragment, null, " ")) || /*#__PURE__*/React.createElement(React.Fragment, null, " ");
+    },
+    condition: !!dropdownRender
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-options`,
+    style: {
+      maxHeight: listHeight,
+      overflowY: 'auto',
+      // display: !filteredOptions.length && asTag ? 'none' : 'block',
+      maxWidth: selectRef.current ? `${selectRef.current.getBoundingClientRect().width}px` : 'inherit'
+    }
+  }, asTag && !!searchQuery && /*#__PURE__*/React.createElement(Option, {
+    value: searchQuery,
+    className: `${prefixCls}-focused`,
+    onClick: e => {
+      handleSelect(e, searchQuery);
+    },
+    "data-value": searchQuery
+  }, searchQuery), filteredOptions.length ? filteredOptions.map(({
+    children,
+    className = '',
+    ...props
+  }, index) => {
+    const isSelected = hasMode ? selected.includes(props.value) : props.value === selected;
+    return /*#__PURE__*/React.createElement(Option, _extends({
+      key: `${props.value}_${index}`
+    }, props, {
+      selected: isSelected,
+      className: clsx([className, {
+        [`${prefixCls}-focused`]: hasMode ? isSelected : props.value === selected,
+        [`${prefixCls}-disabled`]: maxCount && hasMode && !isSelected ? selected.length >= maxCount : false
+      }]),
+      onClick: e => {
+        if (props.disabled) {
+          return;
+        }
+        handleSelect(e, props.value, {
+          children,
+          className,
+          ...props
+        });
+      },
+      "data-value": props.value
+    }), children || props.label || props.value, menuItemSelectedIcon && hasMode && isSelected && /*#__PURE__*/React.createElement("span", {
+      className: `${prefixCls}-selected-icon`
+    }, 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);
 
-var Select$1 = /*#__PURE__*/Object.freeze({
+var Select$2 = /*#__PURE__*/Object.freeze({
 	__proto__: null,
-	default: Select
+	default: Select$1
 });
 
 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%}";
@@ -4138,5 +4143,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$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 };
+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 };
 //# sourceMappingURL=index.esm.js.map