@broxus/react-uikit 0.20.0 → 0.21.0

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

@@ -44,7 +44,7 @@ const Close_1 = require("../../components/Close");
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 exports.Alert = React.forwardRef((props, ref) => {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { children, className, closable = true, closeIcon = config.alert?.closeIcon, prefixCls = config.prefixCls, style, severity, onClose, onClosed, ...restProps } = props;
+    const { children, className, closable = true, closeIcon = config.alert?.closeIcon, prefixCls = config.prefixCls, severity, style, onClose, onClosed, ...restProps } = props;
     const [closed, setClosed] = React.useState(false);
     const close = React.useCallback(() => {
         onClose?.();
@@ -54,9 +54,9 @@ exports.Alert = React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         close,
     }), [close]);
-    return (React.createElement(motion_1.default, { motionName: `${rootCls}-motion`, motionAppear: false, motionEnter: false, visible: !closed, onLeaveStart: node => ({
+    return (React.createElement(motion_1.default, { motionAppear: false, motionEnter: false, motionName: `${rootCls}-motion`, visible: !closed, onLeaveEnd: onClosed, onLeaveStart: node => ({
             maxHeight: node.offsetHeight,
-        }), onLeaveEnd: onClosed }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: (0, classnames_1.default)(rootCls, {
+        }) }, ({ className: motionClassName, style: motionStyle }) => (React.createElement("div", { className: (0, classnames_1.default)(rootCls, {
             [`${rootCls}-${severity}`]: severity !== undefined,
         }, className, motionClassName), "data-show": !closed, role: "alert", style: { ...style, ...motionStyle }, ...restProps },
         closable && (React.isValidElement(closeIcon) ? (React.cloneElement(closeIcon, {

package/dist/cjs/components/Align/Align.js

@@ -45,7 +45,7 @@ const ConfigProvider_1 = require("../../components/ConfigProvider");
 const defaultElement = 'div';
 function Align(props) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { align = 'left', className, direction = config.direction, prefixCls = config.prefixCls, s, m, l, xl, ...restProps } = props;
+    const { align = 'left', className, direction = config.direction, l, m, prefixCls = config.prefixCls, s, xl, ...restProps } = props;
     const isRtl = React.useMemo(() => direction === 'rtl', [direction]);
     const mergedAlign = React.useMemo(() => {
         if (isRtl && align === 'left') {

package/dist/cjs/components/Button/Button.js

@@ -56,10 +56,10 @@ exports.Button = React.forwardRef((props, ref) => {
     }, [restProps]);
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls, 'button'), [config, prefixCls]);
     const className = React.useMemo(() => (0, classnames_1.default)(rootCls, {
+        [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
+        [`${rootCls}-${size}`]: size !== undefined,
         [`${rootCls}-${type}`]: type !== undefined,
         [`${rootCls}-ghost`]: ghost === true,
-        [`${rootCls}-${size}`]: size !== undefined,
-        [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
     }, restProps.className), [rootCls, type, ghost, size, shape, restProps.className]);
     if (restProps.href !== undefined) {
         return (React.createElement(Component_1.Component, { ref: ref || buttonRef, component: Link_1.Link, href: restProps.href, ...restProps, className: className, onClick: onClick }));

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

@@ -46,9 +46,9 @@ const defaultElement = 'span';
 function Badge(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 { className, component = defaultElement, prefixCls = getRootCls(config.card?.prefixCls || config.prefixCls), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'badge'), [config, prefixCls]);
-    return React.createElement(Badge_1.Badge, { className: (0, classnames_1.default)(rootCls, className), ...restProps });
+    return (React.createElement(Badge_1.Badge, { className: (0, classnames_1.default)(rootCls, className), component: component, ...restProps }));
 }
 if (process.env.NODE_ENV !== 'production') {
     Badge.displayName = 'Card.Badge';

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

@@ -47,7 +47,7 @@ const defaultElement = 'div';
 function Card(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { asBody, className, kind, colorMode = kind && kind !== 'default'
-        // @ts-ignore
+        // @ts-expect-error TS7053: Element implicitly has an any type because ...
         ? (config.card?.[`${kind}ColorMode`] || config[`card${(0, js_utils_1.capitalizeFirstLetter)(kind)}ColorMode`])
         : undefined, hoverable, prefixCls = config.card?.prefixCls || config.prefixCls, size, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.card?.prefixCls || config.prefixCls, 'card'), [config, prefixCls]);
@@ -58,11 +58,11 @@ function Card(props) {
     }), [rootCls]);
     return (React.createElement(context_1.CardContext.Provider, { value: context },
         React.createElement(Component_1.Component, { className: (0, classnames_1.default)(rootCls, {
+                [`${config.prefixCls}-${colorMode}`]: colorMode && ['dark', 'light'].includes(colorMode),
                 [`${rootCls}-${kind}`]: kind && ['default', 'primary', 'secondary', 'tertiary'].includes(kind),
                 [`${rootCls}-${size}`]: size && ['small', 'large'].includes(size),
                 [`${rootCls}-body`]: asBody,
                 [`${rootCls}-hover`]: hoverable,
-                [`${config.prefixCls}-${colorMode}`]: colorMode && ['dark', 'light'].includes(colorMode),
             }, className), component: defaultElement, ...restProps })));
 }
 if (process.env.NODE_ENV !== 'production') {

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/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/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,12 +107,25 @@ 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;

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

@@ -47,10 +47,10 @@ exports.Container = React.memo((props) => {
     const { className, expandLeft, expandRight, prefixCls = config.prefixCls, preserve, size, ...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 }));
 });
 if (process.env.NODE_ENV !== 'production') {

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

@@ -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

@@ -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

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

@@ -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

@@ -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

@@ -45,7 +45,7 @@ const RadioGroupContext_1 = require("../../../components/Control/Radio/RadioGrou
 exports.Radio = React.forwardRef((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 { block, children, className, direction = config.radio?.direction || config.direction, disabled, id, prefixCls = config.radio?.prefixCls || config.prefixCls, size, skipGroup, style, onChange: onChangeCallback, onMouseEnter, onMouseLeave, ...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/TextArea/index.js

@@ -112,7 +112,6 @@ exports.TextArea = React.forwardRef((props, ref) => {
     const inputProps = React.useMemo(() => ({
         ...(0, omit_1.default)(restProps, ['allowClear', 'size']),
         prefixCls: rootCls,
-        // eslint-disable-next-line sort-keys
         onBlur,
         onChange,
         onCompositionEnd,
@@ -148,7 +147,7 @@ exports.TextArea = React.forwardRef((props, ref) => {
     const dataCountAttribute = dataCount ? { 'data-count': dataCount } : {};
     return (React.createElement("label", { className: wrapperClasses, htmlFor: inputProps.id, ...dataCountAttribute },
         React.createElement("span", { className: `${controlCls}-input` },
-            React.createElement(textarea_1.default, { ...inputProps, value: value, ref: ref }))));
+            React.createElement(textarea_1.default, { ...inputProps, ref: ref, value: value }))));
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.TextArea.displayName = 'TextArea';

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

@@ -43,7 +43,7 @@ const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
 function Cover(props) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { automute = true, className, children, height, prefixCls = config.prefixCls, width, ...restProps } = props;
+    const { automute = true, children, className, height, prefixCls = config.prefixCls, width, ...restProps } = props;
     const container = React.useRef(null);
     const coveringElement = React.useRef(null);
     const resize = React.useCallback(() => {
@@ -76,13 +76,8 @@ function Cover(props) {
         if (React.isValidElement(child)) {
             return React.cloneElement(child, {
                 ...child.props,
-                ref: idx === 0 ? coveringElement : null,
-                // eslint-disable-next-line sort-keys
                 className: (0, classnames_1.default)(rootCls, child.props.className),
-                onLoadedMetadata: () => {
-                    resize();
-                },
-                // eslint-disable-next-line sort-keys
+                ref: idx === 0 ? coveringElement : null,
                 onLoad: () => {
                     if (automute) {
                         try {
@@ -91,6 +86,9 @@ function Cover(props) {
                         catch (e) { }
                     }
                 },
+                onLoadedMetadata: () => {
+                    resize();
+                },
             });
         }
         return child;

package/dist/cjs/components/DatePicker/generatePicker.d.ts

@@ -4,19 +4,19 @@ export declare const generatePicker: <DateType extends AnyObject = AnyObject>(ge
     displayName?: string;
 } & {
     displayName?: string;
-    WeekPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
-        displayName?: string;
-    };
     MonthPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
         displayName?: string;
     };
-    YearPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+    QuarterPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
         displayName?: string;
     };
     TimePicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").GenericTimePickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
         displayName?: string;
     };
-    QuarterPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+    WeekPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
+        displayName?: string;
+    };
+    YearPicker: (<ValueType = DateType>(props: import("./types").PickerPropsWithMultiple<DateType, Omit<import("./types").PickerProps<DateType>, "picker">, ValueType>) => React.ReactElement) & {
         displayName?: string;
     };
 };

package/dist/cjs/components/DatePicker/generatePicker.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generatePicker = void 0;
 const generateSinglePicker_1 = require("../../components/DatePicker/generateSinglePicker");
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
+/* eslint-disable @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types,@typescript-eslint/no-unused-vars */
 const generatePicker = (generateConfig) => {
     const { DatePicker, MonthPicker, QuarterPicker, TimePicker, WeekPicker, YearPicker, } = (0, generateSinglePicker_1.generateSinglePicker)(generateConfig);
     const MergedDatePicker = DatePicker;

package/dist/cjs/components/DatePicker/generatePurePicker.js

@@ -45,7 +45,7 @@ const en_US_1 = __importDefault(require("../../components/DatePicker/locale/en_U
 const useComponents_1 = require("../../components/DatePicker/useComponents");
 const utils_1 = require("../../utils");
 const generatePurePicker = (generateConfig) => {
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     const getPanel = (picker, displayName) => {
         const consumerName = displayName === constants_1.TIMEPICKER ? 'timePicker' : 'datePicker';
         const Picker = React.forwardRef((props, ref) => {
@@ -58,7 +58,7 @@ const generatePurePicker = (generateConfig) => {
             React.useImperativeHandle(ref, () => pickerRef.current, []);
             return (
             // @ts-ignore
-            React.createElement(picker_1.PickerPanel, { ref: pickerRef, components: mergedComponents, direction: direction, generateConfig: generateConfig, locale: locale.lang, picker: mergedPicker, prefixCls: prefixCls, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), transitionName: (0, utils_1.getMotionName)(config.prefixCls, 'slide-bottom-small'), ...restProps }));
+            React.createElement(picker_1.PickerPanel, { ref: pickerRef, components: mergedComponents, direction: direction, generateConfig: generateConfig, locale: locale.lang, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), picker: mergedPicker, prefixCls: prefixCls, prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), transitionName: (0, utils_1.getMotionName)(config.prefixCls, 'slide-bottom-small'), ...restProps }));
         });
         if (process.env.NODE_ENV !== 'production' && displayName) {
             Picker.displayName = displayName;
@@ -68,7 +68,7 @@ const generatePurePicker = (generateConfig) => {
     const DatePicker = getPanel();
     const MonthPicker = getPanel(constants_1.MONTH, constants_1.MONTHPICKER);
     const QuarterPicker = getPanel(constants_1.QUARTER, constants_1.QUARTERPICKER);
-    // @ts-ignore
+    // @ts-expect-error Type Omit<TimePickerProps, 'picker'> does not satisfy the constraint ...
     const TimePicker = getPanel(constants_1.TIME, constants_1.TIMEPICKER);
     const WeekPicker = getPanel(constants_1.WEEK, constants_1.WEEKPICKER);
     const YearPicker = getPanel(constants_1.YEAR, constants_1.YEARPICKER);