@broxus/react-uikit 0.20.1 → 0.22.0

package/dist/esm/components/Component/index.d.ts

@@ -2,12 +2,12 @@ import * as React from 'react';
 type ComponentOwnProp<T extends React.ElementType = React.ElementType> = React.ComponentPropsWithoutRef<T> & {
     component?: T | keyof React.JSX.IntrinsicElements;
 };
-type PropsToOmit<E extends React.ElementType = React.ElementType, Props extends object = {}> = Omit<React.ComponentPropsWithoutRef<E>, keyof Props>;
-export type PolymorphicProps<E extends React.ElementType = React.ElementType, Props extends object = {}> = ComponentOwnProp<E> & PropsToOmit<E, Props>;
-export interface PolymorphicComponent<Component extends React.ElementType = React.ElementType, Props extends object = {}> {
+type PropsToOmit<E extends React.ElementType = React.ElementType, Props extends object = object> = Omit<React.ComponentPropsWithoutRef<E>, keyof Props>;
+export type PolymorphicProps<E extends React.ElementType = React.ElementType, Props extends object = object> = ComponentOwnProp<E> & PropsToOmit<E, Props>;
+export interface PolymorphicComponent<Component extends React.ElementType = React.ElementType, Props extends object = object> {
     <E extends React.ElementType = Component>(props: PolymorphicProps<E, Props>): React.JSX.Element;
-    displayName?: string;
     defaultProps?: Partial<any>;
+    displayName?: string;
     id?: string;
 }
 export declare const Component: React.ForwardRefExoticComponent<Omit<ComponentOwnProp<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;

package/dist/esm/components/Component/index.js

@@ -1,6 +1,3 @@
 import * as React from 'react';
 const defaultElement = 'div';
-export const Component = React.forwardRef((props, ref) => {
-    const { component: PolymorphicElement = defaultElement, ...restProps } = props;
-    return React.createElement(PolymorphicElement, { ref: ref, ...restProps });
-});
+export const Component = React.forwardRef(({ component: PolymorphicElement = defaultElement, ...props }, ref) => React.createElement(PolymorphicElement, { ref: ref, ...props }));

package/dist/esm/components/ConfigProvider/index.d.ts

@@ -9,41 +9,53 @@ interface PropsWithMouseHandler {
 }
 export { SizeContext } from '../../components/ConfigProvider/SizeContext';
 export interface ConfigContextConsumedProps {
-    breakpoints: Exclude<BreakpointsConfig<number>, 'default'>;
     alert?: {
         closeIcon?: React.ReactNode | (() => React.ReactElement);
     };
+    breakpoints: Exclude<BreakpointsConfig<number>, 'default'>;
     button?: {
         ghost?: boolean;
         prefixCls?: string;
         shape?: ButtonProps['shape'];
         size?: ButtonProps['size'];
     };
+    /** @deprecated Use `button['shape']` config instead */
+    buttonShape?: ButtonProps['shape'];
+    /** @deprecated Use `button['size']` config instead */
+    buttonSize?: ButtonProps['size'];
     card?: {
         prefixCls?: string;
         primaryColorMode?: ColorMode;
         secondaryColorMode?: ColorMode;
         tertiaryColorMode?: ColorMode;
     };
+    /** @deprecated Use `card['primaryColorMode']` config instead */
+    cardPrimaryColorMode?: ColorMode;
+    /** @deprecated Use `card['secondaryColorMode']` config instead */
+    cardSecondaryColorMode?: ColorMode;
+    /** @deprecated Use `card['tertiaryColorMode']` config instead */
+    cardTertiaryColorMode?: ColorMode;
     checkbox?: {
         direction?: Direction;
         prefixCls?: string;
     };
     control?: {
+        clearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
         direction?: Direction;
         prefixCls?: string;
-        clearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     };
+    /** @deprecated Use `control['clearIcon']` config instead */
+    controlClearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     datePicker?: {
+        clearIcon?: React.ReactNode | (() => React.ReactElement);
         direction?: Direction;
         locale?: PickerLocale;
-        prefixCls?: string;
-        clearIcon?: React.ReactNode | (() => React.ReactElement);
         nextIcon?: React.ReactNode;
+        prefixCls?: string;
         prevIcon?: React.ReactNode;
         suffixIcon?: React.ReactNode;
-        superPrevIcon?: React.ReactNode;
         superNextIcon?: React.ReactNode;
+        superPrevIcon?: React.ReactNode;
     };
     direction?: Direction;
     getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
@@ -63,49 +75,24 @@ export interface ConfigContextConsumedProps {
         secondaryColorMode?: ColorMode;
         tertiaryColorMode?: ColorMode;
     };
+    /** @deprecated Use `section['primaryColorMode']` config instead */
+    sectionPrimaryColorMode?: ColorMode;
+    /** @deprecated Use `section['secondaryColorMode']` config instead */
+    sectionSecondaryColorMode?: ColorMode;
+    /** @deprecated Use `section['tertiaryColorMode']` config instead */
+    sectionTertiaryColorMode?: ColorMode;
     select?: {
-        direction?: Direction;
-        prefixCls?: string;
         addIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
         arrowIcon?: React.ReactNode | ((props: {
             isOpen: boolean;
         } & PropsWithMouseHandler) => React.ReactElement);
         clearIcon?: React.ReactNode | (() => React.ReactElement);
+        direction?: Direction;
         loadingIcon?: React.ReactNode | (() => React.ReactElement);
         notFoundContent?: React.ReactNode | (() => React.ReactElement);
-        searchIcon?: React.ReactNode | (() => React.ReactElement);
-    };
-    timePicker?: {
-        direction?: Direction;
-        locale?: TimePickerLocale;
-        prefixCls?: string;
-        clearIcon?: React.ReactNode | (() => React.ReactElement);
-        suffixIcon?: React.ReactNode;
-    };
-    tile?: {
         prefixCls?: string;
-        primaryColorMode?: ColorMode;
-        secondaryColorMode?: ColorMode;
-        tertiaryColorMode?: ColorMode;
+        searchIcon?: React.ReactNode | (() => React.ReactElement);
     };
-    /** @deprecated Use `button['shape']` config instead */
-    buttonShape?: ButtonProps['shape'];
-    /** @deprecated Use `button['size']` config instead */
-    buttonSize?: ButtonProps['size'];
-    /** @deprecated Use `card['primaryColorMode']` config instead */
-    cardPrimaryColorMode?: ColorMode;
-    /** @deprecated Use `card['secondaryColorMode']` config instead */
-    cardSecondaryColorMode?: ColorMode;
-    /** @deprecated Use `card['tertiaryColorMode']` config instead */
-    cardTertiaryColorMode?: ColorMode;
-    /** @deprecated Use `control['clearIcon']` config instead */
-    controlClearIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
-    /** @deprecated Use `section['primaryColorMode']` config instead */
-    sectionPrimaryColorMode?: ColorMode;
-    /** @deprecated Use `section['secondaryColorMode']` config instead */
-    sectionSecondaryColorMode?: ColorMode;
-    /** @deprecated Use `section['tertiaryColorMode']` config instead */
-    sectionTertiaryColorMode?: ColorMode;
     /** @deprecated Use `select['addIcon']` config instead */
     selectAddIcon?: React.ReactNode | ((props: PropsWithMouseHandler) => React.ReactElement);
     /** @deprecated Use `select['arrowIcon']` config instead */
@@ -120,13 +107,26 @@ export interface ConfigContextConsumedProps {
     selectNotFoundContent?: React.ReactNode | (() => React.ReactElement);
     /** @deprecated Use `select['searchIcon']` config instead */
     selectSearchIcon?: React.ReactNode | (() => React.ReactElement);
+    tile?: {
+        prefixCls?: string;
+        primaryColorMode?: ColorMode;
+        secondaryColorMode?: ColorMode;
+        tertiaryColorMode?: ColorMode;
+    };
     /** @deprecated Use `tile['primaryColorMode']` config instead */
     tilePrimaryColorMode?: ColorMode;
     /** @deprecated Use `tile['secondaryColorMode']` config instead */
     tileSecondaryColorMode?: ColorMode;
     /** @deprecated Use `tile['tertiaryColorMode']` config instead */
     tileTertiaryColorMode?: ColorMode;
+    timePicker?: {
+        clearIcon?: React.ReactNode | (() => React.ReactElement);
+        direction?: Direction;
+        locale?: TimePickerLocale;
+        prefixCls?: string;
+        suffixIcon?: React.ReactNode;
+    };
 }
 export declare const ConfigContext: React.Context<ConfigContextConsumedProps>;
 export declare function useConfig(): ConfigContextConsumedProps;
-export declare function ConfigContextProvider({ children, ...restProps }: Partial<React.PropsWithChildren<ConfigContextConsumedProps>>): React.JSX.Element;
+export declare function ConfigContextProvider({ children, ...props }: Partial<React.PropsWithChildren<ConfigContextConsumedProps>>): React.JSX.Element;

package/dist/esm/components/ConfigProvider/index.js

@@ -39,7 +39,7 @@ export const ConfigContext = React.createContext({
 export function useConfig() {
     return React.useContext(ConfigContext);
 }
-export function ConfigContextProvider({ children, ...restProps }) {
+export function ConfigContextProvider({ children, ...props }) {
     const initialContext = useConfig();
     const context = React.useMemo(() => {
         let direction = 'ltr';
@@ -49,8 +49,8 @@ export function ConfigContextProvider({ children, ...restProps }) {
         catch (e) {
             error(e.message);
         }
-        return { ...initialContext, direction, ...restProps };
-    }, [initialContext, restProps]);
+        return { ...initialContext, direction, ...props };
+    }, [initialContext, props]);
     return React.createElement(ConfigContext.Provider, { value: context }, children);
 }
 if (process.env.NODE_ENV !== 'production') {

package/dist/esm/components/Container/index.d.ts

@@ -7,5 +7,10 @@ export interface ContainerOwnProps {
     preserve?: boolean;
     size?: 'xsmall' | 'small' | 'large' | 'xlarge' | 'expand';
 }
-export type ContainerProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ContainerOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ContainerOwnProps>;
-export declare const Container: React.MemoExoticComponent<(<E extends React.ElementType = "div">(props: ContainerProps<E>) => React.JSX.Element)>;
+export type ContainerProps<E extends React.ElementType = React.ElementType> = ContainerOwnProps & PolymorphicProps<E> & PolymorphicProps<E, ContainerOwnProps>;
+declare const defaultElement = "div";
+export declare function Container<E extends React.ElementType = typeof defaultElement>({ className, component, expandLeft, expandRight, preserve, size, ...props }: React.PropsWithChildren<ContainerProps<E>>): React.JSX.Element;
+export declare namespace Container {
+    var displayName: string;
+}
+export {};

package/dist/esm/components/Container/index.js

@@ -3,17 +3,17 @@ import * as React from 'react';
 import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 const defaultElement = 'div';
-export const Container = React.memo((props) => {
+export function Container({ className, component = defaultElement, expandLeft, expandRight, preserve, size, ...props }) {
     const config = useConfig();
-    const { className, expandLeft, expandRight, prefixCls = config.prefixCls, preserve, size, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'container'), [config, prefixCls]);
     return (React.createElement(Component, { className: classNames(rootCls, {
+            [`${prefixCls || config.prefixCls}-preserve`]: preserve,
             [`${rootCls}-${size}`]: size !== undefined,
             [`${rootCls}-expand-left`]: expandLeft,
             [`${rootCls}-expand-right`]: expandRight,
-            [`${prefixCls || config.prefixCls}-preserve`]: preserve,
-        }, className), component: defaultElement, ...restProps }));
-});
+        }, className), component: component, ...restProps }));
+}
 if (process.env.NODE_ENV !== 'production') {
     Container.displayName = 'Container';
 }

package/dist/esm/components/Control/Checkbox/Checkbox.d.ts

@@ -6,6 +6,7 @@ export interface AbstractCheckboxProps<T> extends Omit<React.InputHTMLAttributes
     children?: React.ReactNode;
     defaultChecked?: boolean;
     direction?: string;
+    id?: string;
     name?: string;
     prefixCls?: string;
     required?: boolean;
@@ -16,7 +17,6 @@ export interface AbstractCheckboxProps<T> extends Omit<React.InputHTMLAttributes
     title?: string;
     type?: string;
     value?: any;
-    id?: string;
     onChange?: (event: T) => void;
 }
 export interface CheckboxChangeEventTarget extends CheckboxProps {

package/dist/esm/components/Control/Checkbox/Checkbox.js

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { useCheckboxGroup } from '../../../components/Control/Checkbox/CheckboxGroupContext';
-export const Checkbox = React.forwardRef((props, ref) => {
+export const Checkbox = React.forwardRef(({ block, children, className, disabled, id, size, skipGroup, style, type = 'checkbox', onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...props }, ref) => {
     const config = useConfig();
     const checkboxGroup = useCheckboxGroup();
-    const { block, children, className, direction = config.checkbox?.direction || config.direction, disabled, id, prefixCls = config.checkbox?.prefixCls || config.prefixCls, size, skipGroup, style, type = 'checkbox', onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...restProps } = props;
+    const { direction = config.checkbox?.direction || config.direction, prefixCls = config.checkbox?.prefixCls || config.prefixCls, ...restProps } = props;
     const prevValue = React.useRef(restProps.value);
     const [internalChecked, setInternalChecked] = React.useState(restProps.checked
         ?? restProps.defaultChecked
@@ -31,7 +31,6 @@ export const Checkbox = React.forwardRef((props, ref) => {
         disabled,
         id,
         type,
-        // eslint-disable-next-line sort-keys
         onChange,
     }), [restProps, internalChecked, disabled, id, type, onChange]);
     if (checkboxGroup && !skipGroup) {
@@ -49,13 +48,13 @@ export const Checkbox = React.forwardRef((props, ref) => {
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.checkbox?.prefixCls || config.prefixCls, 'checkbox'), [config, prefixCls]);
     const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.checkbox?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
     const wrapperClasses = React.useMemo(() => classNames({
-        [controlCls]: block,
-        [`${controlCls}-checkbox`]: block,
         [`${controlCls}-${size}`]: block && size,
-        [`${rootCls}-wrapper`]: true,
-        [`${rootCls}-rtl`]: direction === 'rtl',
+        [`${controlCls}-checkbox`]: block,
         [`${prefixCls || config.checkbox?.prefixCls || config.prefixCls}-checked`]: checkboxProps.checked,
         [`${prefixCls || config.checkbox?.prefixCls || config.prefixCls}-disabled`]: checkboxProps.disabled,
+        [`${rootCls}-rtl`]: direction === 'rtl',
+        [`${rootCls}-wrapper`]: true,
+        [controlCls]: block,
     }, className), [
         controlCls,
         block,
@@ -93,7 +92,7 @@ export const Checkbox = React.forwardRef((props, ref) => {
     }, [restProps.value, skipGroup]);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: id, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
         React.createElement("span", { className: classNames(checkboxClasses) },
-            React.createElement("input", { className: `${rootCls}-input`, ref: ref, ...checkboxProps, id: id, type: "checkbox", ...globalAttributes }),
+            React.createElement("input", { ref: ref, className: `${rootCls}-input`, ...checkboxProps, id: id, type: "checkbox", ...globalAttributes }),
             React.createElement("span", { className: `${rootCls}-inner` })),
         children !== undefined && React.createElement("span", { className: `${rootCls}-label` }, children)));
 });

package/dist/esm/components/Control/Checkbox/Group.d.ts

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { type CheckboxChangeEvent } from '../../../components/Control/Checkbox/Checkbox';
 import { type SizeType } from '../../../types';
 export interface CheckboxOptionType<T = any> {
+    disabled?: boolean;
+    id?: string;
     label: React.ReactNode;
-    value: T;
+    required?: boolean;
     style?: React.CSSProperties;
-    disabled?: boolean;
     title?: string;
-    id?: string;
+    value: T;
     onChange?: (event: CheckboxChangeEvent) => void;
-    required?: boolean;
 }
 export interface AbstractCheckboxGroupProps<T = any> {
     block?: boolean;

package/dist/esm/components/Control/Checkbox/Group.js

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { Checkbox } from '../../../components/Control/Checkbox/Checkbox';
 import { CheckboxGroupContext } from '../../../components/Control/Checkbox/CheckboxGroupContext';
-export const Group = React.forwardRef((props, ref) => {
+export const Group = React.forwardRef(({ block, children, className, defaultValue, options = [], size, stack, style, onChange, ...props }, ref) => {
     const config = useConfig();
-    const { block, children, className, defaultValue, direction = config.checkbox?.direction || config.direction, options = [], prefixCls = config.checkbox?.prefixCls || config.prefixCls, size, stack, style, onChange, ...restProps } = props;
+    const { direction = config.checkbox?.direction || config.direction, prefixCls = config.checkbox?.prefixCls || config.prefixCls, ...restProps } = props;
     const [value, setValue] = React.useState(restProps.value || defaultValue || []);
     const [registeredValues, setRegisteredValues] = React.useState([]);
     const memoOptions = React.useMemo(() => options.map((option) => {
@@ -61,7 +61,7 @@ export const Group = React.forwardRef((props, ref) => {
     }, [restProps, restProps.value]);
     return (React.createElement("div", { className: checkboxGroupClasses, style: style, ...restProps, ref: ref },
         React.createElement(CheckboxGroupContext.Provider, { value: context }, options?.length > 0
-            ? memoOptions.map(option => (React.createElement(Checkbox, { key: option.value.toString(), block: block, checked: value.indexOf(option.value) > -1, direction: direction, disabled: 'disabled' in option ? option.disabled : restProps.disabled, size: size, value: option.value, className: `${rootCls}-item`, style: option.style, onChange: option.onChange }, option.label)))
+            ? memoOptions.map(option => (React.createElement(Checkbox, { key: option.value.toString(), block: block, checked: value.indexOf(option.value) > -1, className: `${rootCls}-item`, direction: direction, disabled: 'disabled' in option ? option.disabled : restProps.disabled, size: size, style: option.style, value: option.value, onChange: option.onChange }, option.label)))
             : children)));
 });
 if (process.env.NODE_ENV !== 'production') {

package/dist/esm/components/Control/Input/Input.js

@@ -6,10 +6,7 @@ import { useInput } from '../../../components/Control/Input/useInput';
 import { Icon } from '../../../components/Icon';
 export const Input = React.forwardRef((props, ref) => {
     const config = useConfig();
-    const { allowClear, htmlSize, inputRef, prefix, prefixCls, suffix, wrapperClasses, onClear, ...restProps } = useInput({
-        type: 'text',
-        ...props,
-    });
+    const { allowClear, htmlSize, inputRef, prefix, prefixCls, suffix, wrapperClasses, onClear, ...restProps } = useInput({ type: 'text', ...props });
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'input'), [config, prefixCls]);
     const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
     const inputProps = omit({
@@ -39,7 +36,7 @@ export const Input = React.forwardRef((props, ref) => {
         if (React.isValidElement(config.controlClearIcon)) {
             return config.controlClearIcon;
         }
-        return (React.createElement(Icon, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clear`, onClick: onClear }));
+        return (React.createElement(Icon, { key: "clearfix-icon", className: `${controlCls}-clear`, icon: "close", onClick: onClear }));
     }, [config, controlCls, onClear]);
     React.useImperativeHandle(ref, () => ({
         blur() {

package/dist/esm/components/Control/Input/Number/index.js

@@ -21,8 +21,8 @@ export const InputNumber = React.forwardRef((props, ref) => {
     }));
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'number'), [config, prefixCls]);
     const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'control'), [config, prefixCls]);
-    const upIcon = React.useMemo(() => React.createElement(Icon, { icon: "keyboard_arrow_up", className: `${rootCls}-handler-up-inner` }), [rootCls]);
-    const downIcon = React.useMemo(() => React.createElement(Icon, { icon: "keyboard_arrow_down", className: `${rootCls}-handler-down-inner` }), [rootCls]);
+    const upIcon = React.useMemo(() => React.createElement(Icon, { className: `${rootCls}-handler-up-inner`, icon: "keyboard_arrow_up" }), [rootCls]);
+    const downIcon = React.useMemo(() => React.createElement(Icon, { className: `${rootCls}-handler-down-inner`, icon: "keyboard_arrow_down" }), [rootCls]);
     const inputProps = omit({ ...restProps, className: `${rootCls}-wrapper` }, [
         'allowClear',
         'prefix',
@@ -32,7 +32,7 @@ export const InputNumber = React.forwardRef((props, ref) => {
     ]);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: restProps.id },
         React.createElement("div", { className: `${controlCls}-input` },
-            React.createElement(RcInputNumber, { ...inputProps, downHandler: downIcon, prefixCls: rootCls, ref: inputRef, upHandler: upIcon }))));
+            React.createElement(RcInputNumber, { ...inputProps, ref: inputRef, downHandler: downIcon, prefixCls: rootCls, upHandler: upIcon }))));
 });
 if (process.env.NODE_ENV !== 'production') {
     InputNumber.displayName = 'Input.Number';

package/dist/esm/components/Control/Input/Password/index.js

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { useConfig } from '../../../../components/ConfigProvider';
 import { Input } from '../../../../components/Control/Input/Input';
 import { Icon } from '../../../../components/Icon';
-export const Password = React.forwardRef((props, ref) => {
+export const Password = React.forwardRef(({ onBlur: onBlurCallback, onChange: onChangeCallback, ...props }, ref) => {
     const config = useConfig();
-    const { prefixCls = config.control?.prefixCls ?? config.prefixCls, onBlur: onBlurCallback, onChange: onChangeCallback, ...restProps } = props;
+    const { prefixCls = config.control?.prefixCls ?? config.prefixCls, ...restProps } = props;
     const inputRef = React.useRef(null);
     const removePasswordTimeout = React.useRef(null);
     const [visible, setVisible] = React.useState(false);
@@ -54,9 +54,9 @@ export const Password = React.forwardRef((props, ref) => {
         };
     }, [removePasswordValueAttribute]);
     const suffix = React.useMemo(() => (React.createElement(React.Fragment, null,
-        React.createElement(Icon, { key: "toggle_visibility_icon", icon: visible
+        React.createElement(Icon, { key: "toggle_visibility_icon", className: `${controlCls}-password-icon`, icon: visible
                 ? restProps.iconVisibility ?? 'visibility'
-                : restProps.iconVisibilityOff ?? 'visibility_off', className: `${controlCls}-password-icon`, onClick: toggleVisibility, onMouseDown: preventEvent, onMouseUp: preventEvent }),
+                : restProps.iconVisibilityOff ?? 'visibility_off', onClick: toggleVisibility, onMouseDown: preventEvent, onMouseUp: preventEvent }),
         restProps.suffix)), [
         controlCls,
         restProps.iconVisibility,
@@ -65,7 +65,7 @@ export const Password = React.forwardRef((props, ref) => {
         toggleVisibility,
         visible,
     ]);
-    return (React.createElement(Input, { ...restProps, suffix: suffix, type: visible ? 'text' : 'password', ref: inputRef, onChange: onChange, onBlur: onBlur, onFocus: onFocus }));
+    return (React.createElement(Input, { ref: inputRef, ...restProps, suffix: suffix, type: visible ? 'text' : 'password', onBlur: onBlur, onChange: onChange, onFocus: onFocus }));
 });
 if (process.env.NODE_ENV !== 'production') {
     Password.displayName = 'Input.Password';

package/dist/esm/components/Control/Input/types.d.ts

@@ -10,7 +10,7 @@ export interface InputRef {
     getInputRef(): React.RefObject<HTMLInputElement | null> | null;
 }
 export type OmittedNativeInput = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'defaultChecked' | 'size' | 'prefix' | 'type' | 'max' | 'min'>;
-export interface InputProps<T extends ValueType = ValueType> extends OmittedNativeInput, ControlProps<T> {
+export interface InputProps<T extends ValueType = ValueType> extends ControlProps<T>, OmittedNativeInput {
     htmlSize?: number | undefined;
     useInternalValueState?: boolean;
     onClear?(event: React.MouseEvent<HTMLElement>): void;

package/dist/esm/components/Control/Input/useInput.js

@@ -49,7 +49,6 @@ export function useInput(props) {
         ...restProps,
         prefixCls,
         value: fixControlledValue(internalValue || restProps.value),
-        // eslint-disable-next-line sort-keys
         onBlur,
         onChange,
         onClear,

package/dist/esm/components/Control/Radio/Group.js

@@ -4,9 +4,9 @@ import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { Radio } from '../../../components/Control/Radio/Radio';
 import { RadioGroupContext } from '../../../components/Control/Radio/RadioGroupContext';
-export const Group = React.forwardRef((props, ref) => {
+export const Group = React.forwardRef(({ block, children, className, defaultValue, disabled, id, options, size, stack, style, ...props }, ref) => {
     const config = useConfig();
-    const { block, children, className, defaultValue, direction = config.radio?.direction || config.direction, disabled, id, options, prefixCls = config.radio?.prefixCls || config.prefixCls, size, stack, style, ...restProps } = props;
+    const { direction = config.radio?.direction || config.direction, prefixCls = config.radio?.prefixCls || config.prefixCls, ...restProps } = props;
     const [value, setValue] = useMergedState(defaultValue, {
         value: restProps.value,
     });
@@ -25,7 +25,6 @@ export const Group = React.forwardRef((props, ref) => {
         disabled,
         name: restProps.name,
         value,
-        // eslint-disable-next-line sort-keys
         onChange,
     }), [disabled, restProps.name, value, onChange]);
     const renderGroup = () => {
@@ -33,15 +32,15 @@ export const Group = React.forwardRef((props, ref) => {
         if (options && options.length > 0) {
             childrenToRender = options.map(option => {
                 if (typeof option === 'string' || typeof option === 'number') {
-                    return (React.createElement(Radio, { key: option, block: block, className: `${rootCls}-item`, checked: value === option, direction: direction, disabled: disabled, size: size, value: option }, option));
+                    return (React.createElement(Radio, { key: option, block: block, checked: value === option, className: `${rootCls}-item`, direction: direction, disabled: disabled, size: size, value: option }, option));
                 }
                 return (React.createElement(Radio, { key: `radio-group-value-options-${option.value}`, block: block, checked: value === option.value, className: `${rootCls}-item`, direction: direction, disabled: option.disabled || disabled, size: size, style: option.style, value: option.value }, option.label));
             });
         }
-        return (React.createElement("div", { className: classNames(rootCls, {
+        return (React.createElement("div", { ref: ref, className: classNames(rootCls, {
                 [`${rootCls}-rtl`]: direction === 'rtl',
                 [`${rootCls}-stack`]: stack,
-            }, className), id: id, style: style, ref: ref }, childrenToRender));
+            }, className), id: id, style: style }, childrenToRender));
     };
     return React.createElement(RadioGroupContext.Provider, { value: context }, renderGroup());
 });

package/dist/esm/components/Control/Radio/Radio.d.ts

@@ -8,9 +8,9 @@ export interface RadioChangeEventTarget extends RadioProps {
     checked: boolean;
 }
 export interface RadioChangeEvent {
-    target: RadioChangeEventTarget;
-    stopPropagation: VoidFunction;
-    preventDefault: VoidFunction;
     nativeEvent: MouseEvent;
+    preventDefault: VoidFunction;
+    stopPropagation: VoidFunction;
+    target: RadioChangeEventTarget;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/esm/components/Control/Radio/Radio.js

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../../components/ConfigProvider';
 import { useRadioGroup } from '../../../components/Control/Radio/RadioGroupContext';
-export const Radio = React.forwardRef((props, ref) => {
+export const Radio = React.forwardRef(({ block, children, className, disabled, id, size, skipGroup, style, onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...props }, ref) => {
     const config = useConfig();
     const radioGroup = useRadioGroup();
-    const { block, size, className, children, direction = config.radio?.direction || config.direction, disabled, id, prefixCls = config.radio?.prefixCls || config.prefixCls, skipGroup, style, onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...restProps } = props;
+    const { direction = config.radio?.direction || config.direction, prefixCls = config.radio?.prefixCls || config.prefixCls, ...restProps } = props;
     const [internalChecked, setInternalChecked] = React.useState(restProps.checked
         ?? restProps.defaultChecked
         ?? ('value' in restProps && restProps.value === radioGroup?.value));
@@ -41,13 +41,13 @@ export const Radio = React.forwardRef((props, ref) => {
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.radio?.prefixCls || config.prefixCls, 'radio'), [config, prefixCls]);
     const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.radio?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
     const wrapperClasses = React.useMemo(() => classNames({
-        [controlCls]: block,
-        [`${controlCls}-radio`]: block,
         [`${controlCls}-${size}`]: block && size,
-        [`${rootCls}-wrapper`]: true,
-        [`${rootCls}-rtl`]: direction === 'rtl',
+        [`${controlCls}-radio`]: block,
         [`${prefixCls || config.radio?.prefixCls || config.prefixCls}-checked`]: radioProps.checked,
         [`${prefixCls || config.radio?.prefixCls || config.prefixCls}-disabled`]: radioProps.disabled,
+        [`${rootCls}-rtl`]: direction === 'rtl',
+        [`${rootCls}-wrapper`]: true,
+        [controlCls]: block,
     }, className), [
         controlCls,
         block,
@@ -73,7 +73,7 @@ export const Radio = React.forwardRef((props, ref) => {
     }, [restProps.checked, restProps.defaultChecked, radioGroup?.value]);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: id, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
         React.createElement("span", { className: classNames(radioClasses) },
-            React.createElement("input", { className: `${rootCls}-input`, ref: ref, ...radioProps, type: "radio", ...globalAttributes }),
+            React.createElement("input", { ref: ref, className: `${rootCls}-input`, ...radioProps, type: "radio", ...globalAttributes }),
             React.createElement("span", { className: `${rootCls}-inner` })),
         children !== undefined && React.createElement("span", { className: `${rootCls}-label` }, children)));
 });

package/dist/esm/components/Control/Select/index.d.ts

@@ -5,12 +5,10 @@ import * as React from 'react';
 import { type ControlProps, type SelectPlacement } from '../../../components/Control/types';
 import { type SizeType } from '../../../types';
 export type { BaseSelectRef, OptionProps };
-export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'allowClear' | 'mode' | 'placement'> {
-    mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'placement'> {
     size?: SizeType;
 }
-export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<ControlProps<ValueType>, 'value' | 'defaultValue'>, Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'> {
-    mode?: 'multiple' | 'tags';
+export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<ControlProps<ValueType>, 'allowClear' | 'defaultValue' | 'suffix' | 'value'>, Omit<InternalSelectProps<ValueType, OptionType>, 'inputIcon' | 'getInputElement' | 'backfill'> {
     placement?: SelectPlacement;
     showArrow?: boolean;
 }

package/dist/esm/components/Control/Select/index.js

@@ -7,9 +7,9 @@ import { Icon } from '../../../components/Icon';
 import { Spinner } from '../../../components/Spinner';
 const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
 /* eslint-disable jsx-a11y/label-has-associated-control */
-function InternalSelect(props, ref) {
+function InternalSelect({ allowClear, popupMatchSelectWidth, builtinPlacements = getBuiltInPlacements(popupMatchSelectWidth), className, listHeight = 256, listItemHeight = 24, mode, placement = 'bottom-left', showArrow = true, showSearch = false, onPressEnter, ...props }, ref) {
     const config = useConfig();
-    const { allowClear, direction = config.select?.direction || config.direction, popupMatchSelectWidth, builtinPlacements = getBuiltInPlacements(popupMatchSelectWidth), className, listHeight = 256, listItemHeight = 24, placement = 'bottom-left', prefixCls = config.select?.prefixCls || config.prefixCls, showArrow = true, showSearch = false, onPressEnter, ...restProps } = props;
+    const { direction = config.select?.direction || config.direction, prefixCls = config.select?.prefixCls || config.prefixCls, ...restProps } = props;
     const inputRef = React.useRef(null);
     const labelRef = React.useRef(null);
     const [focused, setFocused] = React.useState(false);
@@ -56,16 +56,6 @@ function InternalSelect(props, ref) {
     }, [direction]);
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.select?.prefixCls || config.prefixCls, 'select'), [config, prefixCls]);
     const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.select?.prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
-    const mode = React.useMemo(() => {
-        const { mode: m } = restProps;
-        if (m === 'combobox') {
-            return undefined;
-        }
-        if (m === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
-            return 'combobox';
-        }
-        return m;
-    }, [restProps]);
     const wrapperClasses = React.useMemo(() => classNames([controlCls, `${controlCls}-select`], {
         [`${controlCls}-${restProps.size}`]: restProps.size,
         [`${controlCls}-rtl`]: direction === 'rtl',
@@ -95,6 +85,7 @@ function InternalSelect(props, ref) {
             else {
                 suffixIcon = React.createElement(Spinner, { key: "spinner", ratio: 0.7 });
             }
+            suffixIcon = React.createElement("div", { className: `${rootCls}-arrow ${rootCls}-arrow-loading` }, suffixIcon);
         }
         else if (showArrow) {
             const isMultiple = mode === 'multiple' || mode === 'tags';
@@ -127,8 +118,11 @@ function InternalSelect(props, ref) {
                 suffixIcon = config.select.arrowIcon;
             }
             else {
-                suffixIcon = internalOpen ? (React.createElement(Icon, { key: "expand_less", icon: "expand_less" })) : (React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon }));
+                suffixIcon = internalOpen
+                    ? React.createElement(Icon, { key: "expand_less", icon: "expand_less", onClick: onClickIcon })
+                    : React.createElement(Icon, { key: "expand_more", icon: "expand_more", onClick: onClickIcon });
             }
+            suffixIcon = React.createElement("div", { className: `${rootCls}-arrow` }, suffixIcon);
         }
         // Not found content
         let mergedNotFound;
@@ -162,7 +156,7 @@ function InternalSelect(props, ref) {
             prefixCls: rootCls,
             removeIcon: React.createElement(Icon, { icon: "clear" }),
             showSearch,
-            suffixIcon,
+            suffix: suffixIcon,
             transitionName: `${prefixCls || config.select?.prefixCls || config.prefixCls}-motion-slide-bottom-small`,
             ...restProps,
             notFoundContent: mergedNotFound,
@@ -170,7 +164,6 @@ function InternalSelect(props, ref) {
                 [`${prefixCls || config.select?.prefixCls || config.prefixCls}-dropdown-rtl`]: direction === 'rtl',
             }),
             popupMatchSelectWidth: true,
-            // eslint-disable-next-line sort-keys
             onBlur,
             onFocus,
             onKeyDown,