@broxus/react-uikit 0.20.1 → 0.22.0

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

@@ -8,9 +8,9 @@ function fixEmojiLength(value, maxLength) {
     return [...(value || '')].slice(0, maxLength).join('');
 }
 /* eslint-disable jsx-a11y/label-has-associated-control */
-export const TextArea = React.forwardRef((props, ref) => {
+export const TextArea = React.forwardRef(({ className, dir, disabled, maxLength, readOnly, showCount, state, onPressEnter, ...props }, ref) => {
     const config = useConfig();
-    const { className, dir, disabled, maxLength, prefixCls = config.prefixCls, readOnly, showCount, state, onPressEnter, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const hasMaxLength = Number(maxLength) > 0;
     const [compositing, setCompositing] = React.useState(false);
     const [focused, setFocused] = React.useState(false);
@@ -73,7 +73,6 @@ export const TextArea = React.forwardRef((props, ref) => {
     const inputProps = React.useMemo(() => ({
         ...omit(restProps, ['allowClear', 'size']),
         prefixCls: rootCls,
-        // eslint-disable-next-line sort-keys
         onBlur,
         onChange,
         onCompositionEnd,
@@ -109,7 +108,7 @@ export const 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(RcTextArea, { ...inputProps, value: value, ref: ref }))));
+            React.createElement(RcTextArea, { ...inputProps, ref: ref, value: value }))));
 });
 if (process.env.NODE_ENV !== 'production') {
     TextArea.displayName = 'TextArea';

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

@@ -5,7 +5,7 @@ export interface CoverProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
     width?: number;
 }
-export declare function Cover(props: CoverProps): React.JSX.Element;
+export declare function Cover({ automute, children, className, height, width, ...props }: CoverProps): React.JSX.Element;
 export declare namespace Cover {
     var displayName: string;
 }

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

@@ -1,10 +1,10 @@
-import { Dimensions, debounce, isBrowser } from '@broxus/js-utils';
+import { debounce, Dimensions, isBrowser } from '@broxus/js-utils';
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Cover(props) {
+export function Cover({ automute = true, children, className, height, width, ...props }) {
     const config = useConfig();
-    const { automute = true, className, children, height, prefixCls = config.prefixCls, width, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const container = React.useRef(null);
     const coveringElement = React.useRef(null);
     const resize = React.useCallback(() => {
@@ -37,13 +37,8 @@ export 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: classNames(rootCls, child.props.className),
-                onLoadedMetadata: () => {
-                    resize();
-                },
-                // eslint-disable-next-line sort-keys
+                ref: idx === 0 ? coveringElement : null,
                 onLoad: () => {
                     if (automute) {
                         try {
@@ -52,6 +47,9 @@ export function Cover(props) {
                         catch (e) { }
                     }
                 },
+                onLoadedMetadata: () => {
+                    resize();
+                },
             });
         }
         return child;

package/dist/esm/components/DatePicker/PickerButton.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { type ButtonProps } from '../../components/Button';
-export declare const PickerButton: React.MemoExoticComponent<(props: ButtonProps) => React.JSX.Element>;
+export declare function PickerButton(props: ButtonProps): React.JSX.Element;

package/dist/esm/components/DatePicker/PickerButton.js

@@ -1,3 +1,5 @@
 import * as React from 'react';
 import { Button } from '../../components/Button';
-export const PickerButton = React.memo((props) => React.createElement(Button, { size: "small", type: "primary", ...props }));
+export function PickerButton(props) {
+    return React.createElement(Button, { size: "small", type: "primary", ...props });
+}

package/dist/esm/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/esm/components/DatePicker/generatePicker.js

@@ -1,5 +1,5 @@
 import { generateSinglePicker } from '../../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 */
 export const generatePicker = (generateConfig) => {
     const { DatePicker, MonthPicker, QuarterPicker, TimePicker, WeekPicker, YearPicker, } = generateSinglePicker(generateConfig);
     const MergedDatePicker = DatePicker;

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

@@ -6,7 +6,7 @@ import defaultPickerLocale from '../../components/DatePicker/locale/en_US';
 import { useComponents } from '../../components/DatePicker/useComponents';
 import { getMotionName } from '../../utils';
 export 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 === TIMEPICKER ? 'timePicker' : 'datePicker';
         const Picker = React.forwardRef((props, ref) => {
@@ -19,7 +19,7 @@ export const generatePurePicker = (generateConfig) => {
             React.useImperativeHandle(ref, () => pickerRef.current, []);
             return (
             // @ts-ignore
-            React.createElement(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: getMotionName(config.prefixCls, 'slide-bottom-small'), ...restProps }));
+            React.createElement(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: getMotionName(config.prefixCls, 'slide-bottom-small'), ...restProps }));
         });
         if (process.env.NODE_ENV !== 'production' && displayName) {
             Picker.displayName = displayName;
@@ -29,7 +29,7 @@ export const generatePurePicker = (generateConfig) => {
     const DatePicker = getPanel();
     const MonthPicker = getPanel(MONTH, MONTHPICKER);
     const QuarterPicker = getPanel(QUARTER, QUARTERPICKER);
-    // @ts-ignore
+    // @ts-expect-error Type Omit<TimePickerProps, 'picker'> does not satisfy the constraint ...
     const TimePicker = getPanel(TIME, TIMEPICKER);
     const WeekPicker = getPanel(WEEK, WEEKPICKER);
     const YearPicker = getPanel(YEAR, YEARPICKER);

package/dist/esm/components/DatePicker/generateSinglePicker.js

@@ -10,8 +10,8 @@ import { useComponents } from '../../components/DatePicker/useComponents';
 import { getPlaceholder } from '../../components/DatePicker/utils';
 import { Icon } from '../../components/Icon';
 import { getMotionName } from '../../utils';
+/* eslint-disable @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types */
 export const generateSinglePicker = (generateConfig) => {
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type,@typescript-eslint/explicit-module-boundary-types
     const getPicker = (picker, displayName) => {
         const consumerName = displayName === TIMEPICKER ? 'timePicker' : 'datePicker';
         const Picker = React.forwardRef((props, ref) => {
@@ -34,7 +34,6 @@ export const generateSinglePicker = (generateConfig) => {
                 if (mergedPicker === TIME) {
                     return React.createElement(Icon, { icon: "schedule" });
                 }
-                // @ts-ignore
                 if (mergedPicker && ![WEEK, MONTH, QUARTER, YEAR].includes(mergedPicker)) {
                     return React.createElement(Icon, { icon: "calendar_clock" });
                 }
@@ -50,7 +49,7 @@ export const generateSinglePicker = (generateConfig) => {
                         [`${prefixCls}-rtl`]: direction === 'rtl',
                     }, className), classNames: {
                         popup: classNames(popupClassName),
-                    }, components: mergedComponents, direction: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, picker: mergedPicker, placeholder: getPlaceholder(locale, mergedPicker, placeholder), placement: placement, prefixCls: prefixCls, suffixIcon: suffixIcon, 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` }), style: style, transitionName: getMotionName(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
+                    }, components: mergedComponents, direction: direction, generateConfig: generateConfig, getPopupContainer: getPopupContainer, locale: locale.lang, nextIcon: React.createElement("span", { className: `${prefixCls}-next-icon` }), picker: mergedPicker, placeholder: getPlaceholder(locale, mergedPicker, placeholder), placement: placement, prefixCls: prefixCls, prevIcon: React.createElement("span", { className: `${prefixCls}-prev-icon` }), style: style, suffixIcon: suffixIcon, superNextIcon: React.createElement("span", { className: `${prefixCls}-super-next-icon` }), superPrevIcon: React.createElement("span", { className: `${prefixCls}-super-prev-icon` }), transitionName: getMotionName(config.prefixCls, 'slide-bottom-small'), onCalendarChange: onCalendarChange, ...restProps, allowClear: mergedAllowClear, styles: {
                         popup: { minWidth: 'fit-content', ...restProps.styles },
                     } })));
         });

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

@@ -17,10 +17,10 @@ export interface AdditionalPickerLocaleLangProps {
     rangeMonthPlaceholder?: [string, string];
     rangePlaceholder?: [string, string];
     rangeQuarterPlaceholder?: [string, string];
-    rangeYearPlaceholder?: [string, string];
     rangeWeekPlaceholder?: [string, string];
-    yearPlaceholder?: string;
+    rangeYearPlaceholder?: [string, string];
     weekPlaceholder?: string;
+    yearPlaceholder?: string;
 }
 export interface PickerLocale extends AdditionalPickerLocaleProps {
     lang: RcPickerLocale & AdditionalPickerLocaleLangProps;

package/dist/esm/components/DescriptionList/DescriptionList.d.ts

@@ -3,7 +3,7 @@ export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElem
     divided?: boolean;
     prefixCls?: string;
 }
-export declare function DescriptionList(props: DescriptionListProps): React.JSX.Element;
+export declare function DescriptionList({ className, divided, ...props }: DescriptionListProps): React.JSX.Element;
 export declare namespace DescriptionList {
     var displayName: string;
 }

package/dist/esm/components/DescriptionList/DescriptionList.js

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function DescriptionList(props) {
+export function DescriptionList({ className, divided, ...props }) {
     const config = useConfig();
-    const { className, divided, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'description-list'), [config, prefixCls]);
     return (React.createElement("dl", { className: classNames(rootCls, {
             [`${rootCls}-divider`]: divided,

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

@@ -5,7 +5,7 @@ export interface DividerProps extends Omit<React.HTMLAttributes<HTMLHRElement>,
     small?: boolean;
     vertical?: boolean;
 }
-export declare function Divider(props: DividerProps): React.JSX.Element;
+export declare function Divider({ className, icon, small, vertical, ...props }: DividerProps): React.JSX.Element;
 export declare namespace Divider {
     var displayName: string;
 }

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

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Divider(props) {
+export function Divider({ className, icon, small, vertical, ...props }) {
     const config = useConfig();
-    const { className, icon, prefixCls = config.prefixCls, small, vertical, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'divider'), [config, prefixCls]);
     return (React.createElement("hr", { className: classNames({
             [`${rootCls}-icon`]: icon && !small && !vertical,

package/dist/esm/components/Dotnav/Dotnav.d.ts

@@ -3,7 +3,7 @@ export interface DotnavProps extends React.HTMLAttributes<HTMLUListElement> {
     prefixCls?: string;
     vertical?: boolean;
 }
-export declare function Dotnav(props: DotnavProps): React.JSX.Element;
+export declare function Dotnav({ className, vertical, ...props }: DotnavProps): React.JSX.Element;
 export declare namespace Dotnav {
     var displayName: string;
 }

package/dist/esm/components/Dotnav/Dotnav.js

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Dotnav(props) {
+export function Dotnav({ className, vertical, ...props }) {
     const config = useConfig();
-    const { className, prefixCls = config.prefixCls, vertical, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'dotnav'), [config, prefixCls]);
     return (React.createElement("ul", { className: classNames(rootCls, {
             [`${rootCls}-vertical`]: vertical,

package/dist/esm/components/Dotnav/Item.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface DotnavItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'children'> {
     isActive?: boolean;
 }
-export declare function Item(props: DotnavItemProps): React.JSX.Element;
+export declare function Item({ className, isActive, onClick, ...props }: DotnavItemProps): React.JSX.Element;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/esm/components/Dotnav/Item.js

@@ -2,12 +2,11 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { Button } from '../../components/Button';
 import { useConfig } from '../../components/ConfigProvider';
-export function Item(props) {
+export function Item({ className, isActive, onClick, ...props }) {
     const config = useConfig();
-    const { className, isActive, onClick, ...restProps } = props;
     return (React.createElement("li", { className: classNames({
             [`${config.prefixCls}-active`]: isActive,
-        }, className), ...restProps },
+        }, className), ...props },
         React.createElement(Button, { type: "text", onClick: onClick })));
 }
 if (process.env.NODE_ENV !== 'production') {

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

@@ -2,11 +2,11 @@ import { type DrawerProps as RcDrawerProps } from '@rc-component/drawer';
 import * as React from 'react';
 import { type Direction } from '../../types';
 export type DrawerSize = 'large';
-export type DrawerRef = {
+export interface DrawerRef {
     collapse: VoidFunction;
     expand: VoidFunction;
     isOpen?: boolean;
-};
+}
 export interface PushState {
     distance: string | number;
 }

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

@@ -5,9 +5,9 @@ import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { addModalMode, getMotionName, removeModalMode } from '../../utils';
 const defaultPushState = { distance: 180 };
-export const Drawer = React.forwardRef((props, ref) => {
+export const Drawer = React.forwardRef(({ animation = 'slide', children, className, defaultOpen, destroyOnHidden, direction, keyboard = true, mask = true, maskClosable = true, motion, open, placement = 'right', push = defaultPushState, rootClassName, rootStyle, size, trigger, onClose: onCloseCallback, ...props }, ref) => {
     const config = useConfig();
-    const { animation = 'slide', children, className, defaultOpen, destroyOnHidden, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, motion, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState, size, rootClassName, rootStyle, trigger, onClose: onCloseCallback, ...restProps } = props;
+    const { getContainer = config.getPopupContainer, prefixCls = config.prefixCls, ...restProps } = props;
     const [isShown, setShown] = React.useState(defaultOpen);
     const [internalOpen, setOpen] = React.useState(defaultOpen);
     const mergedOpen = open === undefined ? internalOpen : open;
@@ -21,8 +21,8 @@ export const Drawer = React.forwardRef((props, ref) => {
         'no-mask': !mask,
     }, rootClassName), [rootCls, animation, mergedOpen, isShown, size, direction, mask, rootClassName]);
     const drawerContainerClassName = React.useMemo(() => classNames(`${rootCls}-container`, {
-        [`${rootCls}-container-large`]: size === 'large',
         [`${rootCls}-container-${animation}-${placement}`]: placement !== undefined && ['push', 'reveal'].includes(animation),
+        [`${rootCls}-container-large`]: size === 'large',
     }), [rootCls, size, placement, animation]);
     const internalMotion = React.useMemo(() => ({
         onAppearPrepare: element => {
@@ -100,7 +100,7 @@ export const Drawer = React.forwardRef((props, ref) => {
     React.useEffect(() => cleanup, [cleanup]);
     return (React.createElement(React.Fragment, null,
         trigger?.({ collapse, expand, isOpen: !!mergedOpen }),
-        React.createElement(RcDrawer, { className: className, destroyOnHidden: destroyOnHidden, keyboard: keyboard, getContainer: getContainer, mask: mask, maskClosable: maskClosable, maskMotion: {
+        React.createElement(RcDrawer, { className: className, destroyOnHidden: destroyOnHidden, getContainer: getContainer, keyboard: keyboard, mask: mask, maskClosable: maskClosable, maskMotion: {
                 motionName: getMotionName(prefixCls || config.prefixCls, 'drawer-fade'),
             }, motion: mergedMotion, open: mergedOpen, placement: placement, prefixCls: rootCls, push: push, rootClassName: drawerRootClassName, rootStyle: { ...rootStyle, display: (mergedOpen || isShown) ? 'block' : '' }, onClose: onClose, ...restProps, classNames: {
                 ...restProps.classNames,

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

@@ -22,12 +22,12 @@ export interface DropProps extends Pick<TriggerProps, 'alignPoint' | 'action' |
     onOverlayClick?: (event: Event) => void;
     onVisibleChange?: (visible: boolean) => void;
 }
-export type TriggerRef = {
+export interface TriggerRef {
     forceAlign: VoidFunction;
-};
-export type DropRef = {
+}
+export interface DropRef {
     close: VoidFunction;
     open: VoidFunction;
     triggerRef: TriggerRef | null;
-};
+}
 export declare const Drop: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<DropRef>>;

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

@@ -4,9 +4,9 @@ import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import placements from '../../components/Drop/placements';
 import { getMotionName, mergeDropMaskMotion } from '../../utils';
-export const Drop = React.forwardRef((props, ref) => {
+export const Drop = React.forwardRef(({ action = ['hover'], align, alignPoint, arrow = false, autoDestroy, builtinPlacements = placements, children, defaultVisible, hideAction = action, maskMotion, minOverlayWidthMatchTrigger, motion, openClassName, overlay, overlayClassName, overlayStyle, placement = 'bottom-left', rootCls: externalRootCls, showAction = action, visible, onAlign, onOverlayClick, onVisibleChange, ...props }, ref) => {
     const config = useConfig();
-    const { action = ['hover'], align, alignPoint, arrow = false, autoDestroy, builtinPlacements = placements, children, defaultVisible, getPopupContainer = config.getPopupContainer, hideAction = action, maskMotion, motion, minOverlayWidthMatchTrigger, openClassName, overlay, overlayClassName, overlayStyle, prefixCls = config.prefixCls, placement = 'bottom-left', rootCls: externalRootCls, showAction = action, visible, onAlign, onOverlayClick, onVisibleChange, ...restProps } = props;
+    const { getPopupContainer = config.getPopupContainer, prefixCls = config.prefixCls, ...restProps } = props;
     const triggerRef = React.useRef(null);
     const [triggerVisible, setTriggerVisible] = React.useState(defaultVisible);
     const mergedVisible = 'visible' in restProps ? visible : triggerVisible;
@@ -68,7 +68,7 @@ export const Drop = React.forwardRef((props, ref) => {
             motionDeadline: 300,
             motionName: getMotionName(prefixCls || config.prefixCls, 'slide-bottom-small'),
             ...motion,
-        }, popupPlacement: placement, popupStyle: overlayStyle, popupVisible: mergedVisible, prefixCls: rootCls, showAction: Array.isArray(showAction) ? showAction : [showAction], stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', ...restProps, onPopupAlign: onAlign, onOpenChange: onPopupVisibleChange }, renderChildren()));
+        }, popupPlacement: placement, popupStyle: overlayStyle, popupVisible: mergedVisible, prefixCls: rootCls, showAction: Array.isArray(showAction) ? showAction : [showAction], stretch: getMinOverlayWidthMatchTrigger() ? 'minWidth' : '', ...restProps, onOpenChange: onPopupVisibleChange, onPopupAlign: onAlign }, renderChildren()));
 });
 if (process.env.NODE_ENV !== 'production') {
     Drop.displayName = 'Drop';

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { Drop } from '../../components/Drop';
-export const Dropdown = React.forwardRef((props, ref) => {
+export const Dropdown = React.forwardRef(({ children, ...props }, ref) => {
     const config = useConfig();
-    const { children, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'dropdown'), [config, prefixCls]);
     return (React.createElement(Drop, { ref: ref, ...restProps, rootCls: rootCls }, children));
 });

package/dist/esm/components/Flex/Flex.d.ts

@@ -18,7 +18,7 @@ export interface FlexOwnProps extends FlexBreakpoint, FlexBreakpointsConfig {
     inline?: boolean;
     prefixCls?: string;
 }
-export type FlexProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<FlexOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, FlexOwnProps>;
+export type FlexProps<E extends React.ElementType = React.ElementType> = FlexOwnProps & PolymorphicProps<E> & PolymorphicProps<E, FlexOwnProps>;
 declare const defaultElement = "div";
-export declare function Flex<E extends React.ElementType = typeof defaultElement>(props: FlexProps<E>): React.JSX.Element;
+export declare function Flex<E extends React.ElementType = typeof defaultElement>({ alignContent, alignItems, className, component, flexDirection, flexWrap, inline, justifyContent, ...props }: React.PropsWithChildren<FlexProps<E>>): React.JSX.Element;
 export {};

package/dist/esm/components/Flex/Flex.js

@@ -8,38 +8,38 @@ const defaultElement = 'div';
 const alignContentMap = new Map([
     ['around', 'around'],
     ['between', 'between'],
-    ['end', 'right'],
     ['center', 'middle'],
+    ['end', 'right'],
     ['start', 'left'],
     ['stretch', 'stretch'],
 ]);
 const alignItemsMap = new Map([
-    ['end', 'bottom'],
     ['center', 'middle'],
+    ['end', 'bottom'],
     ['start', 'top'],
     ['stretch', 'stretch'],
 ]);
 const justifyContentMap = new Map([
     ['around', 'around'],
     ['between', 'between'],
-    ['end', 'right'],
     ['center', 'center'],
+    ['end', 'right'],
     ['start', 'left'],
 ]);
 function mapJustifyContentBreakpoints(value) {
     const config = {};
     for (const key in value) {
-        // @ts-ignore
+        // @ts-ignore its fine
         if (justifyContentMap.has(value[key])) {
-            // @ts-ignore
+            // @ts-ignore its fine
             config[key] = justifyContentMap.get(value[key]);
         }
     }
     return config;
 }
-export function Flex(props) {
+export function Flex({ alignContent, alignItems, className, component = defaultElement, flexDirection, flexWrap, inline, justifyContent, ...props }) {
     const config = useConfig();
-    const { alignContent, alignItems, className, flexDirection, flexWrap, inline, justifyContent, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'flex'), [config, prefixCls]);
     const justifyContentCls = React.useMemo(
     // eslint-disable-next-line no-nested-ternary
@@ -53,11 +53,11 @@ export function Flex(props) {
     }), [rootCls]);
     return (React.createElement(FlexContext.Provider, { value: context },
         React.createElement(Component, { className: classNames({
-                [rootCls]: !inline,
-                [`${rootCls}-inline`]: inline,
                 [`${rootCls}-${alignItemsMap.get(alignItems)}`]: alignItems && alignItemsMap.has(alignItems),
                 [`${rootCls}-${flexDirection}`]: flexDirection !== undefined,
                 [`${rootCls}-${flexWrap}`]: flexWrap !== undefined,
+                [`${rootCls}-inline`]: inline,
                 [`${rootCls}-wrap-${alignContentMap.get(alignContent)}`]: alignContent && alignContentMap.has(alignContent),
-            }, justifyContentCls, className), component: defaultElement, ...restProps })));
+                [rootCls]: !inline,
+            }, justifyContentCls, className), component: component, ...restProps })));
 }

package/dist/esm/components/Flex/Item.d.ts

@@ -8,7 +8,7 @@ export interface ItemOwnItem {
     order?: Order | BreakpointsConfig<Order>;
     prefixCls?: string;
 }
-export type ItemProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ItemOwnItem & PolymorphicProps<E>> & PolymorphicProps<E, ItemOwnItem>;
+export type ItemProps<E extends React.ElementType = React.ElementType> = ItemOwnItem & PolymorphicProps<E> & PolymorphicProps<E, ItemOwnItem>;
 declare const defaultElement = "div";
-export declare function Item<E extends React.ElementType = typeof defaultElement>(props: ItemProps<E>): React.JSX.Element;
+export declare function Item<E extends React.ElementType = typeof defaultElement>({ className, component, itemDimensions, order, ...props }: React.PropsWithChildren<ItemProps<E>>): React.JSX.Element;
 export {};

package/dist/esm/components/Flex/Item.js

@@ -5,14 +5,14 @@ import { useConfig } from '../../components/ConfigProvider';
 import { FlexContext } from '../../components/Flex/context';
 import { getBreakpointsConfigClasses } from '../../utils';
 const defaultElement = 'div';
-export function Item(props) {
+export function Item({ className, component = defaultElement, itemDimensions, order, ...props }) {
     const config = useConfig();
     const { getRootCls } = React.useContext(FlexContext);
-    const { className, itemDimensions, order, prefixCls = getRootCls(), ...restProps } = props;
+    const { prefixCls = getRootCls(), ...restProps } = props;
     const orderCls = React.useMemo(() => (typeof order === 'string'
         ? `${prefixCls}-${order}`
         : getBreakpointsConfigClasses(prefixCls || config.prefixCls, 'flex', order)), [config.prefixCls, order, prefixCls]);
     return (React.createElement(Component, { className: classNames({
             [`${prefixCls}-${itemDimensions}`]: itemDimensions !== undefined,
-        }, orderCls, className), component: defaultElement, ...restProps }));
+        }, orderCls, className), component: component, ...restProps }));
 }

package/dist/esm/components/Flex/context.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export type FlexContextConsumerProps = {
+export interface FlexContextConsumerProps {
     getRootCls(): string | undefined;
-};
+}
 export declare const FlexContext: React.Context<FlexContextConsumerProps>;

package/dist/esm/components/Form/Controls.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface ControlsProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
 }
-export declare function Controls(props: ControlsProps): React.JSX.Element;
+export declare function Controls({ className, ...props }: ControlsProps): React.JSX.Element;
 export declare namespace Controls {
     var displayName: string;
 }

package/dist/esm/components/Form/Controls.js

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { FormContext } from '../../components/Form/context';
-export function Controls(props) {
+export function Controls({ className, ...props }) {
     const config = useConfig();
     const { getRootCls } = React.useContext(FormContext);
-    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const { prefixCls = getRootCls(), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'controls'), [config, prefixCls]);
     return React.createElement("div", { className: classNames(rootCls, className), ...restProps });
 }

package/dist/esm/components/Form/ControlsText.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface ControlsTextProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
 }
-export declare function ControlsText(props: ControlsTextProps): React.JSX.Element;
+export declare function ControlsText({ className, ...props }: ControlsTextProps): React.JSX.Element;
 export declare namespace ControlsText {
     var displayName: string;
 }

package/dist/esm/components/Form/ControlsText.js

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
 import { FormContext } from '../../components/Form/context';
-export function ControlsText(props) {
+export function ControlsText({ className, ...props }) {
     const config = useConfig();
     const { getRootCls } = React.useContext(FormContext);
-    const { className, prefixCls = getRootCls(), ...restProps } = props;
+    const { prefixCls = getRootCls(), ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'controls-text'), [config, prefixCls]);
     return React.createElement("div", { className: classNames(rootCls, className), ...restProps });
 }

package/dist/esm/components/Form/Fieldset.d.ts

@@ -3,7 +3,7 @@ export interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSet
     layout?: 'stacked' | 'horizontal';
     prefixCls?: string;
 }
-export declare function Fieldset(props: FieldsetProps): React.JSX.Element;
+export declare function Fieldset({ className, layout, ...props }: FieldsetProps): React.JSX.Element;
 export declare namespace Fieldset {
     var displayName: string;
 }

package/dist/esm/components/Form/Fieldset.js

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { useConfig } from '../../components/ConfigProvider';
-export function Fieldset(props) {
+export function Fieldset({ className, layout, ...props }) {
     const config = useConfig();
-    const { className, layout, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'fieldset'), [config, prefixCls]);
     return (React.createElement("fieldset", { className: classNames(rootCls, {
             [`${rootCls}-${layout}`]: layout !== undefined,

package/dist/esm/components/Form/Form.d.ts

@@ -4,7 +4,7 @@ export interface FormOwnProps {
     layout?: 'stacked' | 'horizontal';
     prefixCls?: string;
 }
-export type FormProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<FormOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, FormOwnProps>;
+export type FormProps<E extends React.ElementType = React.ElementType> = FormOwnProps & PolymorphicProps<E> & PolymorphicProps<E, FormOwnProps>;
 declare const defaultElement = "form";
-export declare function Form<E extends React.ElementType = typeof defaultElement>(props: FormProps<E>): React.JSX.Element;
+export declare function Form<E extends React.ElementType = typeof defaultElement>({ className, component, layout, ...props }: React.PropsWithChildren<FormProps<E>>): React.JSX.Element;
 export {};

package/dist/esm/components/Form/Form.js

@@ -4,9 +4,9 @@ import { Component } from '../../components/Component';
 import { useConfig } from '../../components/ConfigProvider';
 import { FormContext } from '../../components/Form/context';
 const defaultElement = 'form';
-export function Form(props) {
+export function Form({ className, component = defaultElement, layout, ...props }) {
     const config = useConfig();
-    const { className, layout, prefixCls = config.prefixCls, ...restProps } = props;
+    const { prefixCls = config.prefixCls, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'form'), [config, prefixCls]);
     const context = React.useMemo(() => ({
         getRootCls() {
@@ -16,5 +16,5 @@ export function Form(props) {
     return (React.createElement(FormContext.Provider, { value: context },
         React.createElement(Component, { className: classNames(rootCls, {
                 [`${rootCls}-${layout}`]: layout !== undefined,
-            }, className), component: defaultElement, ...restProps })));
+            }, className), component: component, ...restProps })));
 }