@broxus/react-uikit 0.20.1 → 0.22.0

package/dist/cjs/components/Card/Title.js

@@ -43,12 +43,12 @@ const context_1 = require("../../components/Card/context");
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'h3';
-function Title(props) {
+function Title({ className, component = defaultElement, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { getRootCls } = React.useContext(context_1.CardContext);
-    const { className, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
+    const { prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'title'), [config, prefixCls]);
-    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: defaultElement, ...restProps });
+    return React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, className), component: component, ...restProps });
 }
 if (process.env.NODE_ENV !== 'production') {
     Title.displayName = 'Card.Title';

package/dist/cjs/components/Card/index.d.ts

@@ -6,7 +6,7 @@ import { Footer } from '../../components/Card/Footer';
 import { Header } from '../../components/Card/Header';
 import { Media } from '../../components/Card/Media';
 import { Title } from '../../components/Card/Title';
-export type { CardProps };
+export { type CardProps };
 export interface Card extends React.FunctionComponent<CardProps> {
     Badge: typeof Badge;
     Body: typeof Body;

package/dist/cjs/components/Close/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type IconProps } from '../../components/Icon';
 export type CloseProps<E extends React.ElementType = React.ElementType> = Omit<IconProps<E>, 'icon'>;
 declare const defaultElement = "button";
-export declare function Close<E extends React.ElementType = typeof defaultElement>(props: CloseProps<E>): React.JSX.Element;
+export declare function Close<E extends React.ElementType = typeof defaultElement>({ className, ...props }: CloseProps<E>): React.JSX.Element;
 export declare namespace Close {
     var displayName: string;
 }

package/dist/cjs/components/Close/index.js

@@ -42,9 +42,9 @@ const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const Icon_1 = require("../../components/Icon");
 const defaultElement = 'button';
-function Close(props) {
+function Close({ className, ...props }) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { className, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'close'), [config, prefixCls]);
     return (React.createElement(Icon_1.Icon, { "aria-hidden": "false", className: (0, classnames_1.default)(rootCls, className), component: defaultElement, tabIndex: -1, ...restProps, icon: "close" }));
 }

package/dist/cjs/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/cjs/components/Component/index.js

@@ -36,7 +36,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Component = void 0;
 const React = __importStar(require("react"));
 const defaultElement = 'div';
-exports.Component = React.forwardRef((props, ref) => {
-    const { component: PolymorphicElement = defaultElement, ...restProps } = props;
-    return React.createElement(PolymorphicElement, { ref: ref, ...restProps });
-});
+exports.Component = React.forwardRef(({ component: PolymorphicElement = defaultElement, ...props }, ref) => React.createElement(PolymorphicElement, { ref: ref, ...props }));

package/dist/cjs/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/cjs/components/ConfigProvider/index.js

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

package/dist/cjs/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/cjs/components/Container/index.js

@@ -36,23 +36,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Container = void 0;
+exports.Container = Container;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const Component_1 = require("../../components/Component");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
-exports.Container = React.memo((props) => {
+function Container({ className, component = defaultElement, expandLeft, expandRight, preserve, size, ...props }) {
     const config = (0, ConfigProvider_1.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_1.Component, { className: (0, classnames_1.default)(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') {
-    exports.Container.displayName = 'Container';
+    Container.displayName = 'Container';
 }

package/dist/cjs/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/cjs/components/Control/Checkbox/Checkbox.js

@@ -42,10 +42,10 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../../components/ConfigProvider");
 const CheckboxGroupContext_1 = require("../../../components/Control/Checkbox/CheckboxGroupContext");
-exports.Checkbox = React.forwardRef((props, ref) => {
+exports.Checkbox = React.forwardRef(({ block, children, className, disabled, id, size, skipGroup, style, type = 'checkbox', onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...props }, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
     const checkboxGroup = (0, CheckboxGroupContext_1.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
@@ -70,7 +70,6 @@ exports.Checkbox = React.forwardRef((props, ref) => {
         disabled,
         id,
         type,
-        // eslint-disable-next-line sort-keys
         onChange,
     }), [restProps, internalChecked, disabled, id, type, onChange]);
     if (checkboxGroup && !skipGroup) {
@@ -88,13 +87,13 @@ exports.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(() => (0, classnames_1.default)({
-        [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,
@@ -132,7 +131,7 @@ exports.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: (0, classnames_1.default)(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/cjs/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/cjs/components/Control/Checkbox/Group.js

@@ -42,9 +42,9 @@ const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../../components/ConfigProvider");
 const Checkbox_1 = require("../../../components/Control/Checkbox/Checkbox");
 const CheckboxGroupContext_1 = require("../../../components/Control/Checkbox/CheckboxGroupContext");
-exports.Group = React.forwardRef((props, ref) => {
+exports.Group = React.forwardRef(({ block, children, className, defaultValue, options = [], size, stack, style, onChange, ...props }, ref) => {
     const config = (0, ConfigProvider_1.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) => {
@@ -100,7 +100,7 @@ exports.Group = React.forwardRef((props, ref) => {
     }, [restProps, restProps.value]);
     return (React.createElement("div", { className: checkboxGroupClasses, style: style, ...restProps, ref: ref },
         React.createElement(CheckboxGroupContext_1.CheckboxGroupContext.Provider, { value: context }, options?.length > 0
-            ? memoOptions.map(option => (React.createElement(Checkbox_1.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_1.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/cjs/components/Control/Input/Input.js

@@ -45,10 +45,7 @@ const useInput_1 = require("../../../components/Control/Input/useInput");
 const Icon_1 = require("../../../components/Icon");
 exports.Input = React.forwardRef((props, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { allowClear, htmlSize, inputRef, prefix, prefixCls, suffix, wrapperClasses, onClear, ...restProps } = (0, useInput_1.useInput)({
-        type: 'text',
-        ...props,
-    });
+    const { allowClear, htmlSize, inputRef, prefix, prefixCls, suffix, wrapperClasses, onClear, ...restProps } = (0, useInput_1.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 = (0, omit_1.default)({
@@ -78,7 +75,7 @@ exports.Input = React.forwardRef((props, ref) => {
         if (React.isValidElement(config.controlClearIcon)) {
             return config.controlClearIcon;
         }
-        return (React.createElement(Icon_1.Icon, { key: "clearfix-icon", icon: "close", className: `${controlCls}-clear`, onClick: onClear }));
+        return (React.createElement(Icon_1.Icon, { key: "clearfix-icon", className: `${controlCls}-clear`, icon: "close", onClick: onClear }));
     }, [config, controlCls, onClear]);
     React.useImperativeHandle(ref, () => ({
         blur() {

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

@@ -60,8 +60,8 @@ exports.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_1.Icon, { icon: "keyboard_arrow_up", className: `${rootCls}-handler-up-inner` }), [rootCls]);
-    const downIcon = React.useMemo(() => React.createElement(Icon_1.Icon, { icon: "keyboard_arrow_down", className: `${rootCls}-handler-down-inner` }), [rootCls]);
+    const upIcon = React.useMemo(() => React.createElement(Icon_1.Icon, { className: `${rootCls}-handler-up-inner`, icon: "keyboard_arrow_up" }), [rootCls]);
+    const downIcon = React.useMemo(() => React.createElement(Icon_1.Icon, { className: `${rootCls}-handler-down-inner`, icon: "keyboard_arrow_down" }), [rootCls]);
     const inputProps = (0, omit_1.default)({ ...restProps, className: `${rootCls}-wrapper` }, [
         'allowClear',
         'prefix',
@@ -71,7 +71,7 @@ exports.InputNumber = React.forwardRef((props, ref) => {
     ]);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: restProps.id },
         React.createElement("div", { className: `${controlCls}-input` },
-            React.createElement(input_number_1.default, { ...inputProps, downHandler: downIcon, prefixCls: rootCls, ref: inputRef, upHandler: upIcon }))));
+            React.createElement(input_number_1.default, { ...inputProps, ref: inputRef, downHandler: downIcon, prefixCls: rootCls, upHandler: upIcon }))));
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.InputNumber.displayName = 'Input.Number';

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

@@ -39,9 +39,9 @@ const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../../../components/ConfigProvider");
 const Input_1 = require("../../../../components/Control/Input/Input");
 const Icon_1 = require("../../../../components/Icon");
-exports.Password = React.forwardRef((props, ref) => {
+exports.Password = React.forwardRef(({ onBlur: onBlurCallback, onChange: onChangeCallback, ...props }, ref) => {
     const config = (0, ConfigProvider_1.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);
@@ -90,9 +90,9 @@ exports.Password = React.forwardRef((props, ref) => {
         };
     }, [removePasswordValueAttribute]);
     const suffix = React.useMemo(() => (React.createElement(React.Fragment, null,
-        React.createElement(Icon_1.Icon, { key: "toggle_visibility_icon", icon: visible
+        React.createElement(Icon_1.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: js_utils_1.preventEvent, onMouseUp: js_utils_1.preventEvent }),
+                : restProps.iconVisibilityOff ?? 'visibility_off', onClick: toggleVisibility, onMouseDown: js_utils_1.preventEvent, onMouseUp: js_utils_1.preventEvent }),
         restProps.suffix)), [
         controlCls,
         restProps.iconVisibility,
@@ -101,7 +101,7 @@ exports.Password = React.forwardRef((props, ref) => {
         toggleVisibility,
         visible,
     ]);
-    return (React.createElement(Input_1.Input, { ...restProps, suffix: suffix, type: visible ? 'text' : 'password', ref: inputRef, onChange: onChange, onBlur: onBlur, onFocus: onFocus }));
+    return (React.createElement(Input_1.Input, { ref: inputRef, ...restProps, suffix: suffix, type: visible ? 'text' : 'password', onBlur: onBlur, onChange: onChange, onFocus: onFocus }));
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.Password.displayName = 'Input.Password';

package/dist/cjs/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/cjs/components/Control/Input/useInput.js

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

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

@@ -43,9 +43,9 @@ const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../../components/ConfigProvider");
 const Radio_1 = require("../../../components/Control/Radio/Radio");
 const RadioGroupContext_1 = require("../../../components/Control/Radio/RadioGroupContext");
-exports.Group = React.forwardRef((props, ref) => {
+exports.Group = React.forwardRef(({ block, children, className, defaultValue, disabled, id, options, size, stack, style, ...props }, ref) => {
     const config = (0, ConfigProvider_1.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] = (0, useMergedState_1.default)(defaultValue, {
         value: restProps.value,
     });
@@ -64,7 +64,6 @@ exports.Group = React.forwardRef((props, ref) => {
         disabled,
         name: restProps.name,
         value,
-        // eslint-disable-next-line sort-keys
         onChange,
     }), [disabled, restProps.name, value, onChange]);
     const renderGroup = () => {
@@ -72,15 +71,15 @@ exports.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_1.Radio, { key: option, block: block, className: `${rootCls}-item`, checked: value === option, direction: direction, disabled: disabled, size: size, value: option }, option));
+                    return (React.createElement(Radio_1.Radio, { key: option, block: block, checked: value === option, className: `${rootCls}-item`, direction: direction, disabled: disabled, size: size, value: option }, option));
                 }
                 return (React.createElement(Radio_1.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: (0, classnames_1.default)(rootCls, {
+        return (React.createElement("div", { ref: ref, className: (0, classnames_1.default)(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_1.RadioGroupContext.Provider, { value: context }, renderGroup());
 });

package/dist/cjs/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/cjs/components/Control/Radio/Radio.js

@@ -42,10 +42,10 @@ const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../../components/ConfigProvider");
 const RadioGroupContext_1 = require("../../../components/Control/Radio/RadioGroupContext");
-exports.Radio = React.forwardRef((props, ref) => {
+exports.Radio = React.forwardRef(({ block, children, className, disabled, id, size, skipGroup, style, onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...props }, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
     const radioGroup = (0, RadioGroupContext_1.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));
@@ -80,13 +80,13 @@ exports.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(() => (0, classnames_1.default)({
-        [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,
@@ -112,7 +112,7 @@ exports.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: (0, classnames_1.default)(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/cjs/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;
 }